YumYum 디자인 시스템 — 접근성 가이드 v2

냠냠픽업 디자인 시스템 Accessibility Guidelines 작성일: 2026-05-13 버전: v2.0

1. 디자인 원칙

1.1 목표 등급

WCAG 2.1 AA 기준 — 산업 표준
모든 컴포넌트, 화면이 이 기준을 만족해야 함

1.2 WCAG 등급 비교

등급	의미	대상
A	기본 최소 한도	모든 서비스
AA ⭐	YumYum 목표	일반 상용 서비스
AAA	최고 등급	의료/공공

1.3 접근성은 누구를 위한 것인가

시각장애 (시각, 색맹/색약)
청각장애
운동 능력 제한 (정밀한 터치 어려움)
인지 능력 차이
일시적 장애 (한 손 사용, 밝은 햇빛 아래 등)
노화에 따른 시력/터치 정확도 저하

접근성은 특정 사용자만이 아니라, 모든 사용자가 더 나은 경험을 하게 함.

2. 색상 대비 (Color Contrast)

2.1 WCAG AA 기준

항목	최소 대비
본문 텍스트 (14px 이하)	4.5:1
큰 텍스트 (18px+ 또는 14px Bold+)	3:1
UI 요소 (버튼 보더, 입력창 등)	3:1
비활성 요소	기준 적용 안 됨

2.2 YumYum 컬러 시스템 대비비 검증

조합	대비비	등급
`neutral-800` on `neutral-50`	14.8:1	✅ AAA
`neutral-700` on `neutral-50`	11.2:1	✅ AAA
`neutral-500` on `neutral-50`	4.8:1	✅ AA
`neutral-800` on `yellow-500`	11.5:1	✅ AAA
`neutral-50` on `neutral-800`	14.8:1	✅ AAA
`white` on `yellow-500`	1.7:1	❌ 절대 금지
`neutral-300` on `neutral-50`	1.7:1	❌ (장식용만)

2.3 절대 규칙

⚠️ Brand Yellow (#FFDE36) 위에 흰색 텍스트 절대 금지 항상 neutral-800 같은 진한 색 사용. 대비 1.6:1로 가독성 매우 떨어짐.

2.4 검증 도구

WebAIM Contrast Checker — webaim.org/resources/contrastchecker
Stark (Figma plugin) — 디자인 단계 검증
Lighthouse — 개발 후 자동 점수

3. 색 외 정보 전달 (Color Independence)

3.1 원칙

색맹/색약 사용자는 색 변화만으로는 의미를 인지할 수 없음. 색 + 아이콘 또는 색 + 텍스트 조합 필수.

3.2 잘못된 예 vs 좋은 예

❌ "빨간 글씨 = 에러, 초록 글씨 = 성공" ✅ "X 아이콘 + 에러 메시지, 체크 아이콘 + 성공 메시지"

3.3 YumYum 시스템 적용

무채색 Semantic Colors를 채택한 이유 중 하나가 바로 이것. 색에 의존하지 않는 의미 전달:

상태	아이콘
Success	ti-circle-check
Error	ti-circle-x
Warning	ti-alert-triangle
Info	ti-info-circle

색이 아닌 아이콘 모양과 메시지로 의미 구분 → 색맹/색약 사용자도 동일하게 인지 가능.

4. 터치 영역 (Touch Target)

4.1 최소 크기

플랫폼	최소
iOS	44×44pt
Android	48×48dp
YumYum 기준	44×44px 이상

4.2 원칙

시각적 사이즈 ≠ 터치 영역 — 아이콘이 24px이라도 버튼 영역은 44×44
인접 터치 영역 사이 8px 이상 간격
모든 누를 수 있는 요소 (버튼, 링크, 입력창, 리스트 아이템)에 적용

4.3 YumYum 컴포넌트 적용 현황

컴포넌트	Height	통과
Button Small	32	⚠️ 인라인 액션에만
Button Medium	40	⚠️ 보더포함 44 권장
Button Large	48	✅
Input	44	✅
List Item	44 min	✅
Tab Bar item	56	✅
Icon button	44×44	✅

4.4 Small 버튼 사용 시 주의

height 32px Small 버튼은 인라인 액션(텍스트 옆 가벼운 액션)에만 사용. 메인 액션에는 절대 사용 X.

5. 타이포그래피 접근성

5.1 최소 폰트 크기

본문 텍스트: 14px 이상 (권장 16px)
캡션/부가: 12px 이상
10px 이하 절대 금지

5.2 줄높이

본문: 1.5 이상 (한글 권장 1.6)
큰 글자: 1.2 이상

→ YumYum 타이포 시스템에 이미 반영됨 (body line-height: 1.6)

5.3 사용자 폰트 크기 변경 허용

rem 단위 사용 (브라우저 폰트 설정 따라감)
px 고정 시 접근성 약화
모바일 앱은 시스템 폰트 크기 설정 존중

6. 폼 접근성

6.1 Label은 필수

모든 input에 시각적 <label> 또는 aria-label.

❌ Placeholder만 사용 (입력 시 라벨 사라짐) ✅ Label + Placeholder 같이 사용

6.2 자동완성 (autocomplete)

html

<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input type="text" autocomplete="name">
<input type="text" autocomplete="street-address">

사용자가 빠르게 입력 가능. 운동 능력 제한 사용자에게 큰 도움.

6.3 에러 메시지 연결

html

<input
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
>
<div id="email-error">올바른 이메일 형식이 아닙니다</div>

스크린 리더가 에러 메시지 자동으로 읽음.

6.4 필수 필드

시각적: * 표시 (color: neutral-800 권장)
코드: aria-required="true" 또는 required

7.1 의미있는 HTML 사용

html

<!-- ❌ Bad -->
<div onclick="submit()">제출</div>

<!-- ✅ Good -->
<button onclick="submit()">제출</button>

의미있는 태그(button, nav, main, article 등) 사용 → 스크린 리더가 자동 인식.

7.2 Icon-only 버튼

html

<button aria-label="검색">
  <i class="ti ti-search" aria-hidden="true"></i>
</button>

aria-label: 버튼의 의미
aria-hidden="true": 장식 아이콘은 읽지 않도록

7.3 동적 콘텐츠

Toast, Modal 등장 시:

html

<div role="status" aria-live="polite">
  주문이 정상 접수되었습니다
</div>

aria-live="polite": 현재 작업 끝나면 읽음
aria-live="assertive": 즉시 읽음 (긴급한 경우만)

7.4 Heading 구조

html

<!-- ✅ 순서대로 -->
<h1>매장 상세</h1>
  <h2>메뉴</h2>
    <h3>인기 메뉴</h3>
  <h2>리뷰</h2>

<!-- ❌ 디자인 위해 건너뛰기 -->
<h1>매장 상세</h1>
  <h3>메뉴</h3>  <!-- h2 건너뜀 -->

7.5 이미지 alt 텍스트

html

<!-- 의미있는 이미지 -->
<img src="/restaurant.jpg" alt="치킨마루 강남점 매장 외관">

<!-- 장식용 이미지 -->
<img src="/decoration.svg" alt="">
<!-- 또는 -->
<img src="/decoration.svg" role="presentation">

8. 키보드 접근 (Focus Management)

8.1 Focus 상태 명확하게

모든 인터랙티브 요소 focus 상태 명시
outline: none 절대 X (또는 대체 focus 스타일 제공)
YumYum 시스템: 검정 보더 + 노랑 ring

css

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-yellow-100);
}

8.2 Tab 순서

시각적 순서와 DOM 순서 일치
tabindex 무분별하게 사용 X
필요시 tabindex="0" (탭 가능) / tabindex="-1" (프로그래밍적 포커스만)

8.3 키보드 트랩 방지

Modal 열렸을 때 포커스 가둠 (focus trap)
Modal 닫으면 원래 위치로 복귀

9. 모션 접근성

9.1 prefers-reduced-motion 지원

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

이미 모션 시스템에 반영됨. 사용자 OS 설정 자동 따름.

9.2 절대 금지

깜빡임 모션 (광과민성 발작 위험) — 1초에 3회 이상 깜빡임 X
자동 재생 (5초 이상은 사용자 컨트롤 가능)
무한 idle 모션 (reduced motion 시 멈춰야 함)

9.3 캐릭터 모션과 접근성

캐릭터 모션도 prefers-reduced-motion 활성화 시 정지. 모션이 멈춰도 의미 전달 가능해야 함 (텍스트, 아이콘 함께).

10. 디자이너 체크리스트

작업 마무리 전 확인:

[ ] 모든 텍스트 대비 4.5:1 이상 (큰 텍스트는 3:1)
[ ] Brand Yellow 위에 흰 텍스트 사용 안 함
[ ] 색 외에 아이콘/텍스트로 의미 전달 (특히 Semantic)
[ ] 모든 버튼/링크 터치 영역 44×44px 이상
[ ] 인접한 터치 영역 사이 8px 이상
[ ] 모든 input에 시각적 label 표시
[ ] 본문 텍스트 14px 이상, 권장 16px
[ ] 줄높이 1.5 이상 (한글 권장)
[ ] Focus 상태 명확하게 (border + ring)
[ ] Empty/Loading/Error 상태마다 명확한 안내
[ ] Stark 또는 WebAIM으로 대비 검증 완료
[ ] 색맹 시뮬레이션으로 확인 (Stark plugin)

11. 개발자 체크리스트

PR 머지 전 확인:

[ ] 의미있는 HTML 태그 사용 (button, nav, main 등)
[ ] Icon-only 버튼에 aria-label
[ ] 장식 아이콘에 aria-hidden="true"
[ ] Heading 순서대로 사용 (h1 → h2 → h3)
[ ] Form input에 <label> + autocomplete
[ ] 필수 필드 required + aria-required="true"
[ ] 에러 메시지 aria-describedby로 연결
[ ] Toast/Modal에 aria-live="polite"
[ ] prefers-reduced-motion 미디어 쿼리 지원
[ ] 키보드 포커스 가능 (tabindex, focus-visible)
[ ] 이미지에 의미있는 alt 텍스트
[ ] Lighthouse 접근성 점수 90+ 달성
[ ] Axe DevTools 자동 검사 통과
[ ] VoiceOver/TalkBack으로 실제 테스트

12. 검증 도구

12.1 디자인 단계

WebAIM Contrast Checker (webaim.org/resources/contrastchecker)
Stark (Figma plugin) — 대비 + 색맹 시뮬레이션
A11y Color Tokens — 자동 색 토큰 검증

12.2 개발 단계

Axe DevTools (Chrome 확장)
Lighthouse (Chrome DevTools 내장)
WAVE (wave.webaim.org)

12.3 실제 테스트

VoiceOver (iOS) — Settings → Accessibility → VoiceOver
TalkBack (Android) — Settings → Accessibility → TalkBack
NVDA (Windows, 무료)
JAWS (Windows, 유료)

13. 흔히 놓치는 것들

13.1 디자인

"이쁘니까 회색으로" → 대비 부족
"이 정도 작아도 누를 수 있겠지" → 터치 영역 부족
"Placeholder만 있어도 OK" → Label 없음
"에러는 빨갛게" → 색맹 사용자 못 인지

13.2 개발

<div onclick> → 키보드 접근 불가
outline: none → focus 안 보임
aria-label 없는 아이콘 버튼 → 스크린 리더 무용지물
자동 재생 캐러셀 → 사용자 컨트롤 불가

14. 한국어 특수 고려사항

14.1 한글 가독성

한글은 영문보다 시각적으로 무거움 → 줄높이 1.6 권장
자간 살짝 좁히기 (큰 글자에서) → -0.01 ~ -0.02em
본문 16px 권장 (영문은 14px도 OK)

→ 이미 타이포 시스템에 반영됨.

14.2 한국 표준 (KS X 9301)

공공기관 의무 적용
일반 서비스도 권장 (한국 사용자 대상)
WCAG 2.1 AA와 거의 일치

15. 다음 단계

접근성까지 정리되면 디자인 시스템 v2의 모든 시스템 작업이 완료됨!

남은 후속 작업:

[ ] 실제 화면 디자인 적용 — 만든 시스템으로 핵심 화면 만들기 (홈, 매장 상세, 주문)
[ ] 컴포넌트 라이브러리 Figma 구축 — Variables + Components 실제 빌드
[ ] 개발 환경 셋업 — CSS Variables 파일 생성, 컴포넌트 코드 베이스

접근성은 일회성 작업이 아닌 지속적인 마인드셋입니다. 새 컴포넌트/화면 추가 시 항상 체크리스트 확인하세요.

YumYum 디자인 시스템 — 접근성 가이드 v2 ​

1. 디자인 원칙 ​

1.1 목표 등급 ​

1.2 WCAG 등급 비교 ​

1.3 접근성은 누구를 위한 것인가 ​

2. 색상 대비 (Color Contrast) ​

2.1 WCAG AA 기준 ​

2.2 YumYum 컬러 시스템 대비비 검증 ​

2.3 절대 규칙 ​

2.4 검증 도구 ​

3. 색 외 정보 전달 (Color Independence) ​

3.1 원칙 ​

3.2 잘못된 예 vs 좋은 예 ​

3.3 YumYum 시스템 적용 ​

4. 터치 영역 (Touch Target) ​

4.1 최소 크기 ​

4.2 원칙 ​

4.3 YumYum 컴포넌트 적용 현황 ​

4.4 Small 버튼 사용 시 주의 ​

5. 타이포그래피 접근성 ​

5.1 최소 폰트 크기 ​

5.2 줄높이 ​

5.3 사용자 폰트 크기 변경 허용 ​

6. 폼 접근성 ​

6.1 Label은 필수 ​

6.2 자동완성 (autocomplete) ​

6.3 에러 메시지 연결 ​

6.4 필수 필드 ​

7. 스크린 리더 (Screen Reader) ​

7.1 의미있는 HTML 사용 ​

7.2 Icon-only 버튼 ​

7.3 동적 콘텐츠 ​

7.4 Heading 구조 ​

7.5 이미지 alt 텍스트 ​

8. 키보드 접근 (Focus Management) ​

8.1 Focus 상태 명확하게 ​

8.2 Tab 순서 ​

8.3 키보드 트랩 방지 ​

9. 모션 접근성 ​

9.1 prefers-reduced-motion 지원 ​

9.2 절대 금지 ​

9.3 캐릭터 모션과 접근성 ​

10. 디자이너 체크리스트 ​

11. 개발자 체크리스트 ​

12. 검증 도구 ​

12.1 디자인 단계 ​

12.2 개발 단계 ​

12.3 실제 테스트 ​

13. 흔히 놓치는 것들 ​

13.1 디자인 ​

13.2 개발 ​

14. 한국어 특수 고려사항 ​

14.1 한글 가독성 ​

14.2 한국 표준 (KS X 9301) ​

15. 다음 단계 ​

YumYum 디자인 시스템 — 접근성 가이드 v2

1. 디자인 원칙

1.1 목표 등급

1.2 WCAG 등급 비교

1.3 접근성은 누구를 위한 것인가

2. 색상 대비 (Color Contrast)

2.1 WCAG AA 기준

2.2 YumYum 컬러 시스템 대비비 검증

2.3 절대 규칙

2.4 검증 도구

3. 색 외 정보 전달 (Color Independence)

3.1 원칙

3.2 잘못된 예 vs 좋은 예

3.3 YumYum 시스템 적용

4. 터치 영역 (Touch Target)

4.1 최소 크기

4.2 원칙

4.3 YumYum 컴포넌트 적용 현황

4.4 Small 버튼 사용 시 주의

5. 타이포그래피 접근성

5.1 최소 폰트 크기

5.2 줄높이

5.3 사용자 폰트 크기 변경 허용

6. 폼 접근성

6.1 Label은 필수

6.2 자동완성 (autocomplete)

6.3 에러 메시지 연결

6.4 필수 필드

7. 스크린 리더 (Screen Reader)

7.1 의미있는 HTML 사용

7.2 Icon-only 버튼

7.3 동적 콘텐츠

7.4 Heading 구조

7.5 이미지 alt 텍스트

8. 키보드 접근 (Focus Management)

8.1 Focus 상태 명확하게

8.2 Tab 순서

8.3 키보드 트랩 방지

9. 모션 접근성

9.1 prefers-reduced-motion 지원

9.2 절대 금지

9.3 캐릭터 모션과 접근성

10. 디자이너 체크리스트

11. 개발자 체크리스트

12. 검증 도구

12.1 디자인 단계

12.2 개발 단계

12.3 실제 테스트

13. 흔히 놓치는 것들

13.1 디자인

13.2 개발

14. 한국어 특수 고려사항

14.1 한글 가독성

14.2 한국 표준 (KS X 9301)

15. 다음 단계