State
상호작용 상태와 옵션 상태 — 이름과 표현, 겹칠 때
상태 표현은 컴포넌트나 누를 수 있는 요소가 지금 어떤 상태인지, 무엇을 할 수 있는지를 사용자에게 알린다.
아직 스펙 YAML 과 제품에는 들어가지 않았다. 스펙은 컴포넌트 단계에서 SEED 와 비교할 때 이 이름 · 표현으로 옮기고(값은 그대로), 제품은 앱 적용 단계에서 옮긴다. 지금 제품은 비활성을 불투명도로, 선택을 브랜드 색(Desk) · 회색(HR · SSO)으로 보인다.
상태 표현의 유형
상태는 두 가지다.
- 상호작용 상태 — 사용자의 동작에 따라 바뀐다. 버튼을 누르고 있으면 눌린 상태로 보인다.
- 옵션 상태 — 컴포넌트에 걸린 옵션에 따른다. 버튼에 비활성 옵션을 걸면 비활성 상태로 보인다.
두 유형은 한쪽이 다른 쪽을 덮기도 하고, 함께 나타나기도 한다. 함께 나타나면 selected + pressed 처럼 함께 적는다.
상태 이름
| 이름 | 뜻 | 어디서 |
|---|---|---|
enabled | 기본 — 아무 상호작용이 없을 때 | 모두 |
hovered | 포인터가 위에 있음 | 웹 — 마우스가 있는 기기에서만(@media (hover: hover)) |
focused | 키보드 포커스(:focus-visible), 입력칸은 입력 중 | 모두 |
pressed | 누르고 있는 동안 | 모두 |
selected | 선택됨 · 켜짐 · 지금 항목 | 모두 |
disabled | 비활성 — 상호작용을 받지 않는다 | 모두 |
invalid | 값이 규칙에 맞지 않음 | 입력 요소 |
loading | 진행 중 — 입력을 받지 않는다 | 누를 수 있는 요소 |
readonly | 값은 보이지만 바꿀 수 없음 | 입력 요소 |
Enabled
아무 상호작용도 하지 않은 기본 상태다.
Hovered
포인터가 요소 위에 있는 상태다. 마우스가 있는 기기에서만 켠다 — 터치 화면에는 호버가 없고, 켜 두면 손을 뗀 뒤에도 호버가 붙어 남는다. SEED 에는 없는 상태로, groo 의 두 웹을 위해 더했다.
Focused
키보드로 요소에 들어온 상태다(:focus-visible). 마우스로 누를 때는 링을 그리지 않는다. 입력칸은 마우스로 눌러도 "입력 중" 이라 이 상태가 된다.
앱도 같다 — 키보드로 옮길 때만 웹과 같은 링을 그리고, 손가락으로 누를 때는 그리지 않는다. 누를 수 있는 것은 버튼까지 모두 포커스를 받아 Tab 순서에 든다(사용자 결정 2026-10-08).
Pressed
터치 · 마우스 · 펜으로 요소를 누르고 있는 상태다. 누르는 동안 표면 색이 바뀌고 요소가 살짝 줄어 입력이 닿았음을 알린다 — Feedback.
Selected
요소가 선택 · 켜진 옵션 상태다. 보통 다른 상호작용 상태와 함께 나타난다.
Disabled
요소가 비활성인 옵션 상태다. 지금은 상호작용을 받지 않지만, 다른 조건에 따라 받을 수 있게 될 수도 있음을 뜻한다. 다른 상호작용 상태와 함께 나타나지 않는다.
Invalid · Loading · Readonly
입력 요소와 누를 수 있는 요소에 따로 있는 컴포넌트 상태다. 값이 규칙에 맞지 않으면 invalid, 진행 중이라 입력을 받지 않으면 loading, 값은 보이지만 바꿀 수 없으면 readonly 다.
상태별 표현
| 상태 | 표면 | 글자 · 아이콘 | 테두리 · 링 | 더하는 것 |
|---|---|---|---|---|
hovered | -pressed 역할 색(누름과 같다) | 그대로 | 그대로 | — |
focused — 키보드 | 그대로 | 그대로 | 링 2px · 띄움 2px · stroke-focus-ring | outline 으로 그려 자리가 밀리지 않는다. 링은 상자 모서리를 따른다 — 링 바깥 반지름 = 상자 반지름 + 띄움 + 두께(띄움 2 면 + 4, 모서리 12 상자는 16). 모서리 0 이면 0, 원은 원이다. CSS outline 이 그리는 그대로라 앱은 이 셈으로 그린다(2026-10-15 구현 세션 질문 Q-007-5 정리) |
focused — 입력 중 | 그대로 | 그대로 | 안쪽 2px stroke-neutral-contrast | 반투명 링은 쓰지 않는다. 안쪽에 덧그려 내용이 밀리지 않는다(Text Field 2026-10-01 — 처음엔 stroke-focus-ring 이었다) |
pressed | -pressed 역할 색 | 그대로 | 그대로 | 축소(Feedback) |
selected | bg-neutral-inverted | fg-neutral-inverted | — | 칩 · 세그먼트 · 날짜처럼 고르는 요소 |
disabled | bg-disabled(배경이 있는 요소만) | fg-disabled | stroke-neutral-weak | 불투명도를 쓰지 않는다. 커서 not-allowed |
invalid | 그대로 | 오류 문구 fg-critical | 테두리 2px stroke-critical-solid | 문구는 입력칸 가까이(Writing › 오류) |
loading | -pressed 역할 색 | 글자 대신 진행 표시 | 그대로 | 누름 · 축소 없음 |
readonly | bg-disabled | 값은 fg-neutral 로 읽히게 | 그대로 | — |
- 호버와 누름이 같은 색이라, 마우스로 누를 때는 색이 더 바뀌지 않고 축소만 더해진다.
- 불러오는 중 · 읽기 전용의 표면은 SEED 컴포넌트 값을 따랐다.
- 선택을 테두리로 보이는 요소(선택 상자 · 타일)와 목록 · 메뉴의 지금 항목, 스위치처럼 색으로 켜짐을 뜻하는 요소의 비활성은 컴포넌트 단계에서 SEED 의 해당 컴포넌트와 비교해 정한다.
겹칠 때
- 옵션 상태는 상호작용 상태와 겹친다 — 선택된 요소에도 호버 · 누름 · 포커스가 더해진다. 선택된 요소를 누르면 선택 색은 그대로 두고 줄이기만 한다.
- 비활성은 다른 상호작용 상태와 함께 나타나지 않는다 — 호버 · 누름 색 · 축소가 없다. 키보드로 머무를 수 있는 비활성(
aria-disabled)만 포커스 링을 받는다. - 불러오는 중은 입력을 받지 않는다 — 누름 · 축소가 없다.
- 오류와 입력 중이 겹치면 테두리는 오류 색이 이긴다.
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.