---
type: template
domain: product
role: UX·UI디자인
status: active
last-reviewed: 2026-07-27
---

# 접근성·반응형 계획

> 접근성과 반응형을 "지원"한다고 쓰지 않고 사용자·화면·viewport·검증 절차별로 정의한다. 기준은 **착수 전 발주사와 합의된 것만 검수 기준이 된다** — 계약·요구사항정의서에 없는 기준을 검수일에 들이대는 것도, 요구된 기준(공공기관 웹 접근성 인증 등)을 빠뜨리는 것도 분쟁이다.

## 적용 기준

| 항목 | 값 |
|---|---|
| 적용 화면·요구 ID | `{SCR / FR / NFR}` |
| 접근성 기준 | `WCAG 2.2 AA / KWCAG(한국형) / 계약 명시 기준` |
| 인증 요구 여부 | `{웹 접근성 인증 마크 필요 여부 — 계약 근거}` |
| 지원 브라우저·기기 | `{발주사 표준 환경·최소 버전 — 계약 근거}` |
| 기준 언어·방향 | `{ko/en · LTR/RTL}` |
| 검증자·승인자 | `{Frontend/QA/발주사 검수자}` |

> [!WARNING] 지원 범위는 계약에 못 박는다
> "IE 지원", "모바일 대응" 같은 문구가 계약에 애매하게 있으면 착수 전에 브라우저·버전·기기 목록으로 확정한다. 목록 밖 환경 대응 요청은 CR 회부.

## 시맨틱·키보드

| 화면·기능 | 시맨틱 요소·랜드마크 | Tab 순서 | 키보드 동작 | 포커스 진입·복귀 | 오류·상태 알림 |
|---|---|---|---|---|---|
| `{SCR-01}` | `{main/nav/form/button}` | `{1→2→3}` | `{Enter/Escape/화살표}` | `{모달 등}` | `{aria-live/연결}` |

## 접근성 요구

| A11Y ID | 항목 | 기준 | 설계 결정 | 검증법 | PASS | Owner |
|---|---|---|---|---|---|---|
| `A11Y-01` | 본문 대비 | `≥ 4.5:1` | `{토큰 조합}` | `{contrast 도구}` | `{측정값}` | `{역할}` |
| `A11Y-02` | UI 대비 | `≥ 3:1` | `{값}` | `{도구}` | `{측정값}` | `{역할}` |
| `A11Y-03` | 키보드 | `전체 기능 접근` | `{순서·단축키}` | `수동 순회` | `{조건}` | `{역할}` |
| `A11Y-04` | 포커스 | `항상 가시적` | `{스타일}` | `수동·axe` | `{조건}` | `{역할}` |
| `A11Y-05` | 상태 전달 | `색 외 단서` | `{아이콘·텍스트}` | `{검사}` | `{조건}` | `{역할}` |
| `A11Y-06` | 모션 | `reduced motion 존중` | `{대체}` | `{OS 설정}` | `{조건}` | `{역할}` |
| `A11Y-07` | 터치 대상 | `최소 48×48px 또는 계약 기준` | `{값}` | `{측정}` | `{조건}` | `{역할}` |

## 반응형 행렬

| 화면·요소 | 320px | 375px | 768px | 1024px | 1440px | 오버플로·재배치 규칙 |
|---|---|---|---|---|---|---|
| `{SCR-01 / 영역}` | `{배치}` | `{배치}` | `{배치}` | `{배치}` | `{배치}` | `{wrap/stack/scroll}` |

## 콘텐츠 스트레스

| 케이스 | 입력·조건 | 기대 동작 | 대상 viewport | 검증 증거 |
|---|---|---|---|---|
| 긴 한글·영문 제목 | `{발주사 실데이터 최대 길이}` | `{줄바꿈·말줄임+전체 보기}` | `320 / 1440` | `{스크린샷}` |
| 200% 확대 | `{브라우저 zoom}` | `{기능·내용 손실 없음}` | `{값}` | `{결과}` |
| 동적 글꼴·큰 텍스트 | `{조건}` | `{레이아웃}` | `{값}` | `{결과}` |
| 빈·대량 데이터 | `{0 / N건 — 실운영 물량}` | `{상태·스크롤}` | `{값}` | `{결과}` |
| 세로·가로 방향 | `{기기}` | `{배치}` | `{값}` | `{결과}` |

## 미디어·이미지

| 항목 | 대체 텍스트·레이블 규칙 | 크기·비율 | 로딩·오류 | 장식 처리 |
|---|---|---|---|---|
| `{이미지·아이콘·차트}` | `{규칙}` | `{값}` | `{fallback}` | `{alt="" 등}` |

## 검증 계획 — 테스트결과서 입력

| 검증 | 대상 | 실행 절차·명령 | PASS | 증거 | 판정자 |
|---|---|---|---|---|---|
| 자동 접근성 | `{화면}` | `{axe/Playwright 명령}` | `{위반 0 또는 기준}` | `{리포트}` | `QA` |
| 키보드 순회 | `{핵심 흐름}` | `{절차}` | `{막힘·포커스 손실 0}` | `{영상·체크}` | `{사람}` |
| 반응형 | `{대표 route}` | `{viewport 목록}` | `{가로 스크롤·잘림 0}` | `{스크린샷}` | `{사람}` |
| 스크린리더 | `{고위험 흐름}` | `{도구·절차}` | `{레이블·상태 이해 가능}` | `{기록}` | `{사람}` |

> PASS/FAIL과 증거는 그대로 테스트결과서 행이 된다 — 검수 서명과 잔금의 트리거다 ([[외주 개발 산출물]]).

## 예외·미수행

| 항목 | 이유 | 사용자 영향 | 보완·대체 | Owner·기한 | 발주사 합의 |
|---|---|---|---|---|---|
| `{검사}` | `{이유}` | `{영향}` | `{조치}` | `{값}` | `{합의 일자 — 미합의 예외는 검수 리스크}` |

## 관련 문서

- [[디자인-체크리스트]]
- [[03_화면·상태 명세]]
- [[90_UX·UI디자인 완료 체크리스트]]