UI 상태 종류 싹 다 파헤치기

구글이 정의하는 상태의 종류와 사용방법

상태(state)의 종류에 대해 알아봅니다

상태의 종류와 사용방법

상태(state)란 컴포넌트나 요소가 현재 어떤 조건에 놓여 있는지를 나타내는 표현입니다. 인터페이스에서 상태는 눈에 잘 띄지 않지만, 사용자가 제품을 이해하고 신뢰하게 만드는 가장 기본적인 단서입니다. 버튼이 눌릴 수 있는지, 지금 어떤 요소에 주의가 가 있는지, 방금 어떤 행동이 수행되었는지는 모두 상태를 통해 전달됩니다.

본 글에서는 Google Material 3에서 정의하는 상태의 종류와 사용방법에 대해 알아보겠습니다.

---

상태의 종류

Material 3에서는 상태를 다음과 같이 여섯 종류로 분류하고 있습니다.

활성화, 비활성화, 호버 상태의 버튼

1️⃣ 활성화(Enabled)

활성화 상태는 컴포넌트 또는 요소가 상호작용 가능함을 알려줍니다.

2️⃣ 비활성화(Disabled)

비활성화 상태는 컴포넌트 또는 요소가 작동하지 않음을 알려줍니다. 활성화된 버튼은 컨테이너와 텍스트 사이에 강한 대비를 가집니다. 비활성화된 버튼은 회색 컨테이너 위에 낮은 대비의 회색 텍스트를 사용합니다.

3️⃣ 호버(Hover)

호버 상태는 사용자가 커서를 상호작용 요소 위에 올려놓았을 때를 알려줍니다.

포커스, 눌림, 드래그 상태의 버튼

4️⃣ 포커스(Focused)

포커스 상태는 키보드나 음성과 같은 입력 방식을 사용해 요소가 강조되었을 때를 알려줍니다. 포커스 된 버튼은 컨테이너와 텍스트 사이에 강한 대비를 가집니다.

5️⃣ 눌림(Pressed)

눌림 상태는 사용자의 탭 동작을 알려줍니다.

6️⃣ 드래그(Dragged)

드래그 상태는 사용자가 요소를 누른 채 이동하고 있을 때를 알려줍니다. 눌린 버튼은 컨테이너와 텍스트 사이에 강한 대비를 가집니다. 드래그된 칩은 이동 중인 상태임을 시각적으로 나타냅니다.

---

콘텐츠, 상태 레이어, 컨테이너 세 가지 레이어로 나눈 요소

상태(State)의 레이어

상태 레이어(state layer)는 요소의 상태를 나타내기 위해 요소 위에 반투명하게 적용되는 레이어입니다. 상태 레이어는 불투명도를 활용해 상태를 시각화하는 체계적인 방식을 사용합니다. 레이어는 요소 전체에 적용할 수도 있고, 원형 형태로 적용할 수도 있으며, 한 번에 하나의 상태 레이어만 적용할 수 있습니다.

1️⃣ 콘텐츠(Content)

2️⃣ 상태 레이어(State Layer)

3️⃣ 컨테이너(Container)

상태 레이어는 각 상태마다 고정된 불투명도를 가진 오버레이이며, 콘텐츠와 동일한 색상을 사용합니다.

---

상태별 사용방법

여섯 개의 상태별 사용방법을 알아보겠습니다.

활성화 상태가 적용된 버튼, 플로팅 액션 버튼(FAB), 스위치, 텍스트 필드

1️⃣ 활성화(Enabled)

활성화 상태(enabled state)는 해당 컴포넌트나 요소가 상호작용 가능함을 알려줍니다. 활성화 상태에서는 각 인터랙티브 컴포넌트에 정의된 기본 스타일이 적용됩니다.

비활성화 상태의 버튼

2️⃣ 비활성화(Disabled)

비활성화 상태(disabled state)는 해당 컴포넌트나 요소가 상호작용할 수 없는 상태임을 알려줍니다. 이 상태는 색상 변화와 낮아진 엘리베이션을 통해 시각적으로 표현됩니다. 비활성화 상태는 Material 디자인의 대비(contrast) 요구 사항을 충족할 필요가 없습니다.

비활성화 상태의 체크박스, 아이콘 버튼, 라디오 버튼, 세그먼트 버튼

비활성화 상태(disabled state)는 액션, 선택, 입력 컴포넌트 전반에 걸쳐 공통적으로 적용됩니다.

비활성화 상태가 적용되는 컴포넌트의 예시는 다음과 같습니다.

버튼(Buttons)

카드(Cards)

체크박스(Checkboxes)

칩(Chips)

리스트 아이템(List items)

라디오 버튼(Radio buttons)

스위치(Switches)

텍스트 필드(Text fields)

FAB이 나타내는 액션을 사용할 수 없는 경우, FAB이 화면에 나타나서는 안 됩니다.

비활성화 상태(disabled state)는 커뮤니케이션, 컨테인먼트, 내비게이션, 그리고 일부 액션 컴포넌트에는 적용되지 않습니다.

비활성화 상태가 적용되지 않는 컴포넌트의 예시는 다음과 같습니다.

앱 바(App bars)

배지(Badges)

다이얼로그(Dialogs)

플로팅 액션 버튼(FABs)

메뉴(Menus)

내비게이션 바, 드로어, 레일

시트(Sheets)

탭(Tabs)

툴팁(Tooltips)

비활성화된 버튼은 호버 상태나 기타 상태 레이어를 상속받지 않습니다.

비활성화된 컴포넌트는 포커스를 받을 수 없고, 드래그하거나 누를 수 없으며, 탭 하거나 호버해도 상태가 변경되지 않습니다.

비활성화된 redo 아이콘과 checklist 아이콘

레이아웃에는 비활성화 상태(disabled state)가 몇 개든 존재할 수 있습니다.

호버 상태의 버튼

3️⃣ 호버(Hover)

호버(hover) 상태는 사용자가 커서를 이용해 인터랙티브 요소 위에 잠시 멈췄을 때 시작됩니다.

호버 상태를 나타내는 낮은 강조도의 서피스 오버레이는 컴포넌트 전체에 적용할 수 있고, 컴포넌트 내부의 일부 요소에만 적용할 수도 있으며, 컴포넌트의 특정 영역 위에 원형 형태로 적용할 수도 있습니다.

호버 상태의 버튼, FAB, 아이콘 버튼, 세그먼트 버튼

호버(hover) 상태는 액션, 선택, 입력 컴포넌트 전반에 공통적으로 상속되어 적용됩니다.

호버 상태가 적용되는 컴포넌트의 예시는 다음과 같습니다.

버튼(Buttons)

카드(Cards)

체크박스(Checkbox)

칩(Chips)

날짜 및 시간 선택기(Date and time pickers)

리스트 아이템(List items)

슬라이더(Slider)

스위치(Switch)

텍스트 필드(Text fields)

앱 바 안에 포함된 개별 액션 컴포넌트만 호버 상태를 상속받습니다.

호버(hover) 상태는 커뮤니케이션, 컨테인먼트, 내비게이션 컴포넌트에는 적용되지 않습니다.

호버 상태가 적용되지 않는 컴포넌트의 예시는 다음과 같습니다.

앱 바(App bars)

배지(Badges)

다이얼로그(Dialogs)

메뉴(Menus)

내비게이션 바, 드로어, 레일

시트(Sheets)

탭(Tabs)

호버(hover) 상태는 낮은 강조도의 애니메이션 페이드 효과를 통해 나타났다가 사라집니다.

호버(hover) 상태는 사용자가 커서를 이용해 인터랙티브 요소 위에 잠시 멈췄을 때 시작됩니다.

커서 위치를 기준으로 한 번에 하나의 요소에만 적용됩니다.

레이아웃에는 한 번에 하나의 호버(hover) 상태만 존재할 수 있습니다.

포커스 상태의 버튼

4️⃣ 포커스(Focused)

포커스 상태(focused state)는 사용자가 키보드나 음성 입력을 사용해 요소를 강조(선택)했을 때를 전달합니다. 포커스 상태는 모든 인터랙티브 컴포넌트에 적용됩니다.

포커스 상태를 나타내는 높은 강조도의 서피스 오버레이는 컴포넌트 전체에 적용할 수 있고, 컴포넌트 내부의 일부 요소에만 적용할 수도 있으며, 컴포넌트의 특정 영역 위에 원형 형태로 적용할 수도 있습니다.

포커스가 적용된 버튼, FAB, 아이콘 버튼, 세그먼트 버튼

포커스 상태(focus state)는 액션, 선택, 입력 컴포넌트 전반에 공통적으로 상속되어 적용됩니다.

포커스 상태가 적용되는 컴포넌트의 예시는 다음과 같습니다.

버튼(Buttons)

카드(Cards)

체크박스(Checkbox)

칩(Chips)

날짜 및 시간 선택기(Date and time pickers)

리스트 아이템(List items)

선택 컨트롤(Selection controls)

텍스트 필드(Text fields)

앱 바 안에 포함된 개별 액션 컴포넌트만 포커스 상태를 상속받습니다.

포커스 상태(focus state)는 대부분의 커뮤니케이션, 컨테인먼트, 내비게이션 컴포넌트에는 상속되지 않습니다.

포커스 상태가 적용되지 않는 컴포넌트의 예시는 다음과 같습니다.

앱 바(App bars)

배지(Badges)

배너(Banner)

카드(Card)

다이얼로그(Dialogs)

내비게이션 바, 드로어, 레일

시트(Sheets)

채워진 버튼(filled button)의 키보드 포커스 인디케이터

키보드 포커스 인디케이터

많은 사용자는 Tab 키나 기타 단축키를 사용해 웹 페이지의 인터랙티브 요소(링크, 버튼, 칩 등)를 탐색합니다. 요소가 Tab 키로 선택되면, 링 형태의 키보드 포커스 인디케이터와 함께 포커스 상태로 표시됩니다.

이 인디케이터는 사용자가 현재 페이지에서 어디에 위치해 있는지를 인지하는 데 도움을 줍니다. 포커스가 유지된 상태에서는, 해당 요소를 키보드로 직접 조작할 수 있습니다.

포커스 상태는 한 번에 하나의 카드에만 적용됩니다.

레이아웃에는 한 번에 하나의 포커스(focus) 상태만 존재할 수 있습니다.

눌림 상태의 버튼

5️⃣ 눌림(Pressed)

눌림(pressed) 상태는 사용자가 커서, 키보드, 또는 음성 입력을 통해 탭 하거나 클릭했을 때 발생한 상호작용을 전달합니다. 이 상태는 모든 인터랙티브 컴포넌트에 적용됩니다.

눌림 상태는 컴포지션의 변화를 유발하며, 높은 강조도(high-emphasis)로 표현되어야 합니다. 눌림 상태는 리플(ripple) 오버레이로 나타나며, 컴포넌트 전체에 적용할 수 있고, 컴포넌트 내부의 일부 요소에만 적용할 수도 있으며, 컴포넌트의 특정 영역 위에 원형 형태로 적용할 수도 있습니다.

눌림 상태의 버튼, FAB, 아이콘 버튼, 세그먼트 버튼

눌림(pressed) 상태는 액션, 선택, 그리고 일부 컨테인먼트 컴포넌트에 공통적으로 상속되어 적용됩니다.

눌림 상태가 적용되는 컴포넌트의 예시는 다음과 같습니다.

버튼(Buttons)

카드(Cards)

체크박스(Checkbox)

칩(Chips)

리스트 아이템(List items)

텍스트 필드(Text fields)

앱 바 안에 포함된 개별 액션 컴포넌트만 눌림(pressed) 상태를 상속받습니다.

눌림(pressed) 상태는 커뮤니케이션, 내비게이션, 그리고 일부 컨테인먼트 컴포넌트에는 상속되지 않습니다.

눌림 상태가 적용되지 않는 컴포넌트의 예시는 다음과 같습니다.

앱 바(App bars)

배지(Badges)

하단 내비게이션(Bottom navigation)

다이얼로그(Dialogs)

메뉴(Menus)

시트(Sheets)

탭(Tabs)

활성화(activated) 상태는 사용자가 직접 수행한 순서에 따라 나타납니다.

눌림(pressed) 상태는 사용자가 인터랙티브 요소에 대해 키보드 또는 음성 입력을 수행했을 때 시작됩니다.

눌림(pressed) 상태는 한 번에 하나의 카드에만 적용됩니다.

레이아웃에는 한 번에 하나의 눌림(pressed) 상태만 존재할 수 있습니다.

드래그 상태의 리스트 아이템

6️⃣ 드래그(Dragged)

드래그(dragged) 상태는 사용자가 요소나 컴포넌트를 누른 채로 이동할 때 발생합니다.

드래그 상태는 사용자의 작업을 방해하지 않도록 낮은 강조도(low-emphasis)로 표현되어야 합니다. 드래그 상태에서는 낮은 강조도의 오버레이를 사용하며, 컴포넌트 전체에 적용할 수 있고, 컴포넌트 내부의 일부 요소에 적용할 수도 있습니다.

리스트 아이템, 칩, 카드와 같은 일부 컴포넌트는 드래그 상태를 나타내기 위해 엘리베이션을 적용할 수 있습니다.

드래그 상태의 칩과 카드

드래그(dragged) 상태는 일부 컨테인먼트 및 선택 컴포넌트에 공통적으로 상속되어 적용됩니다.

드래그 상태가 적용되는 컴포넌트의 예시는 다음과 같습니다.

카드(Cards)

칩(Chips)

리스트 아이템(List items)

슬라이더(Sliders)

앱 바처럼 항상 일정한 위치를 유지해야 하는 컴포넌트는 드래그(dragged) 상태를 적용해서는 안 됩니다.

드래그(dragged) 상태는 액션, 커뮤니케이션, 내비게이션, 그리고 일부 컨테인먼트 컴포넌트에는 상속되지 않습니다.

드래그 상태가 적용되지 않는 컴포넌트의 예시는 다음과 같습니다.

앱 바(App bars)

배지(Badges)

버튼(Buttons)

다이얼로그(Dialogs)

메뉴(Menus)

내비게이션 바, 드로어, 레일

드래그 상태의 리스트 아이템

드래그(dragged) 상태는 사용자가 탭이나 클릭과 같은 입력 방식으로 요소를 누른 채 유지할 때 시작됩니다.

드래그(dragged) 상태는 한 번에 하나의 카드에만 적용됩니다.

레이아웃 내에는 한 번에 하나의 드래그(dragged) 상태만 존재할 수 있습니다.

---

마치며

상태(state)는 사용자와 시스템 사이의 현재 관계를 설명하는 핵심 언어입니다. enabled, disabled, hover, focus, pressed, dragged와 같은 상태는 각각 '지금 무엇이 가능한지', '어디에 주의가 가 있는지', '어떤 행동이 일어났는지'를 명확하게 전달합니다. 이 상태들이 일관된 규칙 아래 정의될 때, 사용자는 학습 없이도 인터페이스를 자연스럽게 이해할 수 있습니다.

중요한 점은 모든 상태가 모든 컴포넌트에 적용되는 것은 아니라는 점입니다. 액션·선택·입력 컴포넌트는 상태를 적극적으로 상속받는 반면, 앱 바나 내비게이션처럼 역할과 위치가 고정된 구조적 컴포넌트는 상태 표현이 제한됩니다.

상태를 설계할 때는 모든 컴포넌트에 모든 상태를 적용하려 하기보다, 각 컴포넌트의 역할과 맥락에 맞는 상태만 선택적으로 사용하는 것이 중요합니다. 결국 좋은 상태 설계란 더 많이 보여주는 것이 아니라, 사용자가 필요한 순간에만 정확한 신호를 전달하는 절제된 디자인임을 기억해야 할 것입니다.

상태(state)에 대한 자세한 내용은 아래에서 확인하실 수 있습니다.

States – Material Design 3