Anatomy
Presence는 User와 Agent를 한 쌍으로 보여주되 두 역할을 같은 존재처럼 합치지 않습니다.
Pair
User는 위쪽, Agent는 아래쪽에 놓입니다. 둘은 같은 face grammar를 공유하지만 크기와 색, 움직임의 강도는 다릅니다.
User
User는 Action 계열 색을 쓰고 Agent보다 작게 표현합니다. 반응은 짧고 절제되어 Agent의 상태를 함께 읽게 합니다.
Agent
Agent는 Signal 계열 색을 쓰고 lifecycle state를 주도합니다. Working, Waiting, Blocked, Thinking, Done이 Agent의 움직임에서 먼저 드러납니다.
Variants
관계 반응을 켜거나 줄일 수 있고, 표정 vocabulary는 같은 두 눈과 head pose 안에서 변합니다.
Reactive / Quiet
같은 Agent state라도 User 반응을 줄일 수 있습니다.
가 기본이며, 주변 UI가 이미 충분히 바쁠 때 로 User 반응을 줄일 수 있습니다.
Expression vocabulary
User와 Agent가 공유하는 alpha expression grammar입니다.
Expression은 별도 스티커를 붙이는 방식이 아니라 eye slit의 길이·곡률·개방 정도와 head pose를 바꿉니다. Pair choreography에서는 User 쪽 표현을 더 절제해서 사용합니다.
States
Presence의 lifecycle은 여섯 상태로 제한됩니다. 상태 이름보다 움직임과 User↔Agent 관계가 함께 읽혀야 합니다.
실제 canonical Presence runtime의 여섯 상태입니다.
외 값은 현재 public lifecycle contract가 아닙니다.
Size
Large와 Medium은 volumetric 표현을 사용할 수 있고, Compact는 identity를 유지한 flat fallback을 사용합니다.
Compact는 Canvas를 쓰지 않고 flat SVG로 고정됩니다.
는 크기와 explicit motion policy를 보고 실제 render mode를 고릅니다. Compact는 요청 값과 관계없이 flat child render를 사용합니다.
Usage
Presence는 “AI 느낌”을 장식하는 아이콘이 아니라 실제 Agent 상태와 관계를 보여줄 때 사용합니다.
Active workflow
Agent가 실제로 작업 중일 때 lifecycle과 관계 반응을 함께 보여줍니다. 별도의 “AI sparkle” 장식은 필요하지 않습니다.
Ambient identity
상태가 화면의 중심이 아닐 때는 Compact + Quiet 조합으로 identity만 남기고 시각적 점유를 줄입니다.
How to use
상태와 관계가 실제로 필요한 곳에만 쓰고, 움직임 자체를 목적처럼 만들지 않습니다.
- 실제 Agent lifecycle과 화면의 상태를 맞춥니다.
- 상태가 중요한 경우 텍스트나 accessible name으로도 의미를 전달합니다.
- 작은 주변 영역에서는 Compact/Quiet로 시각적 점유를 낮춥니다.
- Thinking을 hidden chain-of-thought나 reasoning transcript처럼 표현하지 않습니다.
- 실제 작업이 없는데 Working/Done animation을 장식으로 반복하지 않습니다.
- User와 Agent를 같은 크기·강도의 두 mascot처럼 다루지 않습니다.
Customize
현재 runtime에서 실제로 읽는 attribute와 method만 정리합니다.
| Surface | Values | Use |
|---|---|---|
| idle · working · waiting · blocked · thinking · done | Agent lifecycle | |
| large · medium · compact | Pair size and compact fallback | |
| auto · flat · volumetric | Avatar renderer preference | |
| full · reduced | Explicit WBDS motion preference | |
| reactive · quiet | User↔Agent reaction level | |
| expression + gaze | Alpha expression API | |
| expression + gaze | Alpha expression API |
Accessibility
움직임과 색만으로 상태를 맡기지 않고, explicit motion preference와 accessible naming을 함께 사용합니다.
Name
Pair는 role="img"를 사용하고 내부 User/Agent avatar는 aria-hidden입니다. 상태가 업무 의미를 가진다면 consumer가 구체적인 aria-label 또는 인접한 상태 텍스트를 제공해야 합니다.
Motion policy
현재 runtime은 OS media query를 public contract로 직접 쓰지 않습니다. v9 runtime proxy가 scoped/root data-wb-motion 값을 사용하며, 제품이나 사용자가 reduced를 명시할 때 motion을 낮춥니다.
Full / Reduced
같은 lifecycle을 두 motion preference로 비교합니다.
Reduced에서도 상태 자체는 사라지지 않습니다. 표현 강도와 renderer만 낮춥니다.