반응형 및 접근성
응급 상황 관련 페이지는 모든 사람이 모든 기기에서 스트레스 상황에서도 사용할 수 있어야 합니다. 명확함이 기발함보다 중요합니다.
중단점
Tailwind 기본값: sm 640, md 768, lg 1024, xl 1280, 2xl 1536. 모바일 우선으로 설계하고 각 범위에 따라 의도적으로 적용:
- 320–639: 단일 열, 평면 휴대폰, 가로 스크롤 스냅 갤러리, 전체 너비로 쌓인 CTA, 디스클로저 패널 내 메뉴.
- 640–1023: 콘텐츠가 허용하는 경우 2열 그리드; 여전히 3D 기울기 또는 고정 없음.
- ≥ 1024: 비대칭 12열 레이아웃, 2.5D 휴대폰, 포인터 기울기, 선택적 고정 스토리텔링.
테스트 너비: 320, 375, 414, 768, 1024, 1280, 1440, 1920. 모든 너비에서 가로 페이지 스크롤 없음(회전된 휴대폰과 과도하게 큰 텍스트 주의 —
body가 아닌 섹션에overflow-x: clip사용).
랜드마크 및 구조
<a href="#main" class="skip-link">컨텐츠로 건너뛰기</a>첫 번째 포커스 가능 요소.<header>(nav),<main id="main">, 각 섹션은<section aria-labelledby="…-heading">,<footer>.- 정확히 하나의
h1(히어로 헤드라인). 각 섹션은h2로 시작하고 하위 항목은h3. 수준 건너뛰기 없음. - 섹션
id는 내비게이션 앵커와 일치:about,features(카테고리 + 쇼케이스),how-it-works,register,faq. - 앵커 대상은 고정 내비게이션만큼 오프셋:
scroll-margin-top: var(--nav-h).
내비게이션
- 데스크톱: 인라인 링크 + 정보 제공 CTA (예: "기능 살펴보기") — 다운로드/설치 CTA 없음, CLAUDE.md "범위: 쇼케이스, 설치 퍼널 아님" 참조.
- 모바일:
<button aria-expanded aria-controls="mobile-menu">토글 버튼으로 패널 열림. 열리면 첫 번째 링크에 포커스;Esc키 누르면 닫히고 포커스가 버튼으로 돌아감; 링크 클릭 시 메뉴 닫힘. 본문 스크롤 잠금은 선택 사항이며 안정적으로 해제되어야 함. 햄버거 버튼에 "메뉴 열기"/"메뉴 닫기" 접근 가능한 이름이 있음. - 현재 섹션 표시(선택 사항): 색상만이 아닌
aria-current="true"사용.
키보드 및 포커스
- 모든 대화형 요소는 시각적 순서대로 Tab으로 도달 가능. 양수
tabindex없음. - 모든 컨트롤에 가시적 포커스 링:
outline: 2px solid var(--color-accent); outline-offset: 3px;— 어두운 배경과 밝은 배경 모두에서 ≥ 3:1 대비 확인 (빨간 버튼에는 밝은 링 사용). - 가로 갤러리: 컨테이너
tabindex="0"+role="region"+aria-label, 화살표 키로 기본 스크롤. - 비활성화/사용 불가 컨트롤 (예: 누락된 연락처/법적 링크):
<span aria-disabled="true">또는<button disabled>로 설명 텍스트와 함께 렌더링, 포커스 가능한 가짜 링크 사용 금지.
FAQ 아코디언
- 네이티브
<details><summary>선호; 또는button[aria-expanded][aria-controls]+ region. 요약 텍스트는h3에 해당하는 일반 텍스트로 된 질문. - 콘텐츠는 DOM에 존재 (검색 가능, JS 없이도 작동).
터치 및 포인터
- 터치 대상 크기 ≥ 44×44px (버튼, 메뉴 항목, FAQ 토글).
- 인접 대상 간 간격 ≥ 8px.
- 호버 전용 효과는 정보를 숨기지 않음.
색상 및 텍스트
- 본문 텍스트 대비 ≥ 4.5:1, 큰 텍스트 ≥ 3:1, UI 경계 ≥ 3:1.
- 상태(대기 중/진행 중/해제됨)에는 항상 텍스트 라벨 + 아이콘이 함께 사용되며 색상만으로 표시하지 않음.
- 텍스트가 200%로 확장되어도 손실 없음; 고정 높이 텍스트 컨테이너 없음.
- 본문 줄 길이 ≤ 약 70자.
이미지 및 미디어
- 의미 있는 스크린샷: 사실적인
alt(app-screenshot-showcase 참조). 장식용:alt=""+ 순수 장식 SVG에는aria-hidden. - 플레이스홀더는 스스로를 알림: "스크린샷 플레이스홀더: 등록 화면".
- 텍스트와 함께 제공되는 아이콘:
aria-hidden="true".
모션
prefers-reduced-motion존중 (lightweight-motion 참조). 애니메이션으로만 나타나는 콘텐츠 없음.- 설명용 애니메이션 컴포넌트(추적, 조정)에는 그림임을 나타내는 가시적 텍스트가 포함되며
aria-live는 사용하지 않음 (실시간 데이터 아님).
비상 정보
- 면책 문구는 히어로 CTA 근처, FAQ("SOS는 긴급 전화번호를 대체합니까?"), 최종 CTA 근처, 푸터에 표시됩니다. 평이한 언어, 읽을 수 있는 대비, 작은 텍스트(≥ 14px)에 숨겨지지 않음.
검토 체크리스트
- axe / Lighthouse a11y ≥ 95, 심각한 위반 0건
- 키보드 전용: 스킵 링크, 메뉴 열기/닫기/Esc, 모든 앵커, FAQ, 갤러리
- 화면 판독기 스팟 체크(VoiceOver/NVDA): 제목 목록이 논리적인가
- 320px: 오버플로우 없음, 헤드라인 맞음, CTA 눈에 띔
- 200% 줌 작동
- 동작 제한 확인됨
- 가로 모드 모바일(예: 740×360) 사용 가능