Inclusive Design
모든 사용자가 제품에 쉽게 접근하고 사용할 수 있도록 도와요.
Overview
포용적 디자인(Inclusive Design)은 시각, 청각, 운동 능력, 인지 능력 등 다양한 능력과 상황을 가진 모든 사용자가 제품에 쉽게 접근하고 사용할 수 있도록 보장해요. 이 가이드는 가능한 한 폭넓은 사용자를 포용하는 디자인 지침을 제공해요.
Visual Clarity
Color and Contrast
- 색상만으로 정보를 전달하지 않고, 텍스트·아이콘 등 다른 시각 요소와 함께 제공해요.
- 텍스트와 배경의 명도 대비는 APCA(Advanced Perceptual Contrast Algorithm)를 기준으로 다음을 지켜요.
- 가독성 텍스트는 최소 Lc 75 이상이어야 하며, Lc 90 이상을 권장해요. 2줄 이상의 본문, 화면 제목, 헤드라인, 입력 필드 텍스트, 툴팁 텍스트가 해당돼요.
- 그 밖의 텍스트는 최소 Lc 60 이상이어야 해요. 이때 16px 미만이면 bold 두께를 사용해요.
- placeholder, disabled 상태의 텍스트는 최소 Lc 30 이상이어야 해요.
- 역할 기반 색상의 주요 조합 대비는 Color › Contrast 에서 확인할 수 있어요.
Hierarchy and Layout
- 명확하고 간결한 콘텐츠 계층 구조를 설계해 중요한 정보가 쉽게 인식되게 해요.
- 논리적이고 직관적인 콘텐츠 순서를 유지해 스크린 리더가 올바르게 읽을 수 있게 해요.
Interaction and Navigation
Touch Area Size
- 터치 영역(Target Size)은 44×44px 이상이 이상적이에요. 디자인이나 기능 제약으로 어렵다면 최소 24×24px 이상을 보장해요.
- 아이콘 같은 시각 요소가 작더라도 터치 가능한 영역은 충분히 넓게 잡아요.
Accessible Interaction
- 핀치 줌, 드래그 같은 복잡한 제스처는 단순한 터치 동작으로도 할 수 있도록 대체 방법을 제공해요.
- 모든 상호작용은 VoiceOver, TalkBack 등 보조 기술로 접근할 수 있어야 해요.
- 키보드로 모든 기능을 사용할 수 있어야 하고, 포커스 위치가
stroke.focus-ring외곽선으로 보여야 해요.
Clear Navigation Structure
- 사용자가 현재 위치를 알 수 있도록 명확한 라벨과 직관적인 아이콘을 사용해요.
- 주요 기능은 쉽게 발견하고 접근할 수 있는 위치에 둬요.
Content Accessibility
Alternative Text
- 이미지, 아이콘 등 텍스트가 아닌 모든 요소에는 명확하고 간결한 대체 텍스트(accessibility label)를 제공해요.
- 대체 텍스트는 이미지나 아이콘의 기능과 맥락을 간결하게 설명하고, 불필요한 설명은 생략해요.
- 장식용(decorative) 요소는 스크린 리더에서 숨겨요(
aria-hidden).
Error Handling
- 오류가 생기면 즉각적인 메시지를 제공해 사용자가 이해하고 빠르게 조치할 수 있게 해요.
- 즉각적인 메시지란 시각적 피드백(예: 테두리 색 변경)과 함께
aria-live로 보조 기술에 콘텐츠 변경을 알리는 것을 뜻해요. - 오류 메시지는 입력 필드 가까이에 두고, 문제를 쉽게 인식하고 고칠 수 있도록 구체적인 해결 방법을 알려요.
Personalization and User Control
Font Size
- 사용자가 설정한 폰트 크기에 따라 텍스트 크기를 조절해요. 그래서 폰트 크기 토큰은 rem 단위를 사용해요.
- 뷰포트 크기에 따라 레이아웃이 깨지지 않도록 반응형으로 설계하고, 요소 간격을 조정해 가독성을 유지해요.
Animation
- 사용자가 애니메이션을 끌 수 있게 해요(
prefers-reduced-motion). - 2초 이상의 애니메이션은 주의를 분산시킬 수 있어 가급적 쓰지 않아요. 꼭 필요하면 건너뛸 수 있게 해요.
- 광과민성 발작을 예방하기 위해 초당 3회 이상 번쩍이지 않아요.
Automatic Media Playback
- 사용자가 자동 재생을 끌 수 있게 해요.
- 자동 재생은 기본으로 꺼 두고, 필요하면 음소거 상태로 시작해요.
- 3초 이상 자동 재생되는 오디오에는 일시정지, 중지, 음량 조절 기능을 제공해요.
Language Setting
- 사용자가 선호하는 언어로 콘텐츠를 볼 수 있도록 언어 변경 옵션을 제공해요.