이 게시글은 공부하면서 정리한 내용입니다.
잘못된 정보는 제보해주시면 매우 감사드리겠습니다.
---
디자인 시스템 구축 과정에서 필요한 컴포넌트.
그 중 버튼 컴포넌트에 대해 정리해보았다.
버튼 컴포넌트의 상태 (States)
버튼에 마우스를 올렸는데 아무 변화가 없다면?
클릭해봤는데 아무 변화가 없다면?
제대로 동작이 되는 중인지 불안하고 답답할 것이다.
이런 사소한 불편함이 누적되면 안 좋은 사용자 경험을 초래한다.
따라서 버튼이 지금 어떤 상태인지 힌트를 주는 게 바람직하다.
사용자 경험을 더욱 긍정적으로 만들 수 있다.
1. 데스크탑 기준
- 기본 (Enabled)
클릭할 수 있는 버튼의 기본 상태
- 마우스오버 (Hovered)
버튼에 마우스 커서가 닿은 상태
기본 상태보다 한 톤 밝거나 어두운 배경 색을 사용하는 경우가 많다.
반전되게 디자인하기도 하고, 눌린 상태와 똑같이 디자인하기도 한다.
- 눌림 (Pressed)
버튼이 클릭된 상태
기본 상태보다 더 어두운 배경 색을 사용하여 물리적으로 눌린 것 같은 느낌을 준다.
- 비활성화 (Disabled)
클릭할 수 없는 버튼의 상태
가시성이 낮아지도록 컨텐츠와 배경 색에 연한 회색조를 사용하여 비활성화된 느낌을 준다.
불이 꺼진 형광등을 상상하면 이해하기 쉽다.
- 집중됨 (Focused)
키보드 탭 키를 눌러 집중된 버튼의 상태
Focus는 마우스 없이도 요소를 선택할 수 있게 하는 기능이다.
클릭 가능한 모든 컴포넌트에 적용되므로 가급적 통일성 있게 디자인하는 것이 좋다.
현재 어느 요소에 초점이 맞춰져 있는지 지각할 수 있도록 명암비가 높게 디자인한다.
참고: 웹접근성지침 2.1(WCAG 2.1)의 비텍스트 대비
포커스 스타일은 배경 색보다 선으로 효과를 주는 경우가 많다.
선으로 효과를 주면 다른 상태와 동시에 적용했을 때 스타일이 겹치지 않는 장점이 있다.
선이 1 px 정도로 얇으면 가시성이 떨어지므로 잘 보이는 굵기를 권장한다.
선으로 디자인할 때 Border보다 Outline으로 구현하기를 추천한다.
겉보기에 똑같은 선이지만 Outline은 몇 px을 설정하든 자리를 차지하지 않기 때문이다.
반면 Border는 설정한 px만큼 자리를 차지하여 레이아웃에 영향을 준다.
참고: Outline 속성 (W3C), CSS 박스 모델 (W3C)
추가로 outline-offset을 적용하면 버튼과 선 사이에 간격을 설정할 수 있다.
간격을 설정하면 선이 버튼 색과 같아도 구분되어 보이고 요소가 확장되어 보이는 장점이 있다.
2. 모바일/태블릿 기준
모바일, 태블릿 환경에서는 클릭이 아닌 터치가 이루어진다.
그래서 Hovered, Focused 상태 스타일이 필요하지 않다.
- 기본 (Enabled)
누를 수 있는 버튼의 기본 상태
- 눌림 (Pressed)
버튼이 눌린 상태
기본 상태보다 더 어두운 배경 색으로 디자인하여 눌린 것 같은 느낌을 준다.
- 비활성화 (Disabled)
누를 수 없는 버튼의 상태
가시성이 낮아지도록 컨텐츠와 배경 색에 연한 회색조를 사용하여 비활성화된 느낌을 준다.
지금까지 버튼 컴포넌트의 상태에 관해 알아보았다.
알맞게 디자인하여 좋은 사용자 경험을 만들어가는 데 도움이 되었으면 좋겠다.
'디자이너가 알아야 할 것들 > Design System' 카테고리의 다른 글
| 웹 디자인 시스템 - 버튼 그룹 & 플로팅 액션 버튼 (FAB) (0) | 2023.04.10 |
|---|---|
| 웹 디자인 시스템 - 버튼 컴포넌트 스타일 (0) | 2023.03.26 |
| 웹 디자인 시스템 - 버튼 컴포넌트 (0) | 2023.03.03 |
| 디자인 시스템 구축하기 - 폰트 스타일 가이드 (2) | 2022.03.25 |
