Inclusive Design
모든 사용자가 쉽게 쓸 수 있게 — 보기 · 조작 · 콘텐츠 · 개인 설정
groo 는 모든 사용자가 제품을 쉽게 쓸 수 있게 돕는다.
포용적 디자인은 시각 · 청각 · 운동 · 인지 능력과 상황이 저마다 다른 모든 사용자가 제품을 쓸 수 있게 하는 일이다. 이 문서는 가능한 한 넓은 사용자를 품는 규칙을 적는다.
아직 제품에는 들어가지 않았다. 2026-09-30 조사에서 어긋난 자리 — Desk 웹이 화면 확대를 막음, Desk 웹 입력칸 오류를 보조 기술에 알리지 않음, 이름 없는 아이콘 버튼 90여 곳, HR 웹의 <html lang="en">, 모션 줄이기를 따르지 않는 반복 모션 — 은 앱 적용 단계에서 고친다.
보기
색과 대비
식비12%늘었어요
교통4%줄었어요
이렇게 — 색과 함께 아이콘 · 글자로도 알린다
식비12%
교통4%
이렇게 하지 않는다 — 빨강 · 초록만으로는 색을 구분하기 어려운 사람에게 뜻이 전해지지 않는다
- 색만으로 정보를 전하지 않는다. 상태 · 오류 · 차트는 글자 · 아이콘 · 모양을 함께 쓴다.
- 글자와 배경의 대비는 WCAG 2 AA 를 지킨다 — 본문 4.5:1, UI 요소 3:1. groo 는 이 값을 검사기로 잰다(역할 색의 짝마다).
- SEED 는 APCA(Lc)로 대비를 잰다. 방법이 달라 SEED 의 수치는 옮기지 않았다.
- 비활성 · 플레이스홀더 글자는 WCAG 가 대비를 따지지 않지만, 전용 색으로 읽히게 둔다.
| 글자 | 배경 | 쓰는 곳 | 라이트 | 다크 |
|---|---|---|---|---|
fg-neutral | bg-layer-default | 본문 | #1A1F2E 16.41:1 AA | #F5F6FA 13.42:1 AA |
fg-neutral-muted | bg-layer-default | 보조 글자 | #535866 7.11:1 AA | #B7BDCC 7.70:1 AA |
fg-neutral-subtle | bg-layer-basement | 흐린 글자 · 바닥 위 | #62697A 5.09:1 AA | #A2A8B7 6.89:1 AA |
fg-critical | bg-layer-default | 오류 글자 | #D72323 5.06:1 AA | #FF8477 6.08:1 AA |
fg-brand | bg-layer-default | 브랜드 글자 | #0147AD 8.38:1 AA | #7AA9F6 6.10:1 AA |
fg-disabled | bg-disabled | 비활성(WCAG 예외) | #8A91A0 2.93:1 — | #838997 3.18:1 — |
위계와 순서
- 중요한 정보가 먼저 보이게 콘텐츠의 위계를 짠다.
- 화면의 순서를 논리적으로 둔다 — 스크린 리더가 그 순서로 읽는다.
조작
터치 영역
닫기 아이콘 16 → 누르는 영역 44
체크박스 20 → 누르는 영역 44
- 누르는 영역은 모두 터치 영역 기준 이상이다.
- 아이콘처럼 보이는 요소가 작아도 누르는 영역은 넉넉히 넓힌다 — 보이지 않는 여백으로.
누구나 할 수 있는 조작
- 밀기 · 끌기 · 핀치 같은 제스처로 하는 일은 누르기로도 할 수 있게 한다.
- 모든 동작에 VoiceOver · TalkBack · 키보드로 닿는다. 키보드 포커스는 State 의 focused 로 보인다.
- 앱도 누를 수 있는 것은 버튼까지 모두 키보드 포커스를 받는다. 링은 키보드로 옮길 때만 그린다.
길 찾기
- 지금 어디에 있는지 이름과 선택 표시로 알 수 있게 한다.
- 주요 기능은 찾기 쉬운 자리에 둔다.
콘텐츠
이름
- 아이콘만 있는 버튼 · 이미지에는 기능과 맥락을 짧게 적은 이름을 단다 — 웹은
aria-label·alt, 앱은Semanticslabel ·tooltip. - 장식은 보조 기술에서 숨긴다 —
alt=""·aria-hidden·ExcludeSemantics. - 이름도 번역 문구에 둔다. 화면이 한국어인데 이름만 영어로 읽히지 않게.
오류
현대카드같은 이름의 카드가 있어요. 다른 이름으로 바꿔주세요.
<input aria-invalid="true"
aria-describedby="card-name-error" />
<p id="card-name-error" role="alert">
같은 이름의 카드가 있어요. …
</p>- 오류는 바로 알린다 — 테두리 색과 함께 글자로.
- 웹은
aria-invalid와aria-describedby로 입력칸과 문구를 잇고,role="alert"(또는aria-live)로 보조 기술에 알린다. 앱은Semantics의 liveRegion. - 문구는 입력칸 가까이 두고, 무엇이 잘못됐는지와 고칠 방법을 쓴다 — Writing › 오류.
개인 설정
글자 크기와 확대
- 사용자가 정한 글자 크기를 따른다 — 웹 글자는 rem 이라 브라우저 설정을, 앱은 OS 설정을 따른다(Typography).
- 글자가 커져도 레이아웃이 깨지지 않게 한다.
- 화면 확대를 막지 않는다 —
user-scalable=no·maximum-scale을 쓰지 않는다(WCAG 1.4.4).
애니메이션
- 모든 모션이 모션 줄이기 모드를 따른다.
- 2초 넘는 애니메이션은 주의를 흩뜨려 되도록 쓰지 않는다. 쓰면 멈추거나 건너뛸 수 있게 한다.
- 발작을 막으려 초당 3번 넘게 번쩍이지 않는다.
자동 재생
- 소리 · 영상은 멈춰 둔 채로 시작한다. 필요하면 소리 없이 시작한다.
- 3초 넘게 저절로 나는 소리에는 멈춤 · 음량 조절을 준다.
언어
- 사용자가 화면 언어를 고를 수 있게 한다. 바꾸면
<html lang>도 바뀐다 — International Design.
참고 문서
- ARIA Authoring Practices Guide
- WCAG 2.2 · KWCAG 2.2(한국형 웹 콘텐츠 접근성 지침)
- Apple Accessibility · Android Accessibility
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.