핵심 이슈
4개
가장 시급
텍스트 대비
폼 리스크
라벨 연결 부족
키보드 리스크
포커스 가시성
1. 라이트 모드 텍스트 대비가 너무 약함
보조 텍스트, 설명 문구, 메타 정보, 비활성 내비 라벨이 크림 배경 위에서 너무 옅다. 작은 텍스트가 많은 서비스 특성상 체감 문제가 더 크다.
Priority · High
Before · 실제 캡처
상단 메타, 소개 카피, 토글 보조 상태, 하단 내비의 비활성 라벨이 전반적으로 흐리게 보인다.
| 조합 | 대비비 | 판정 |
|---|---|---|
| #888 on #f5f5f0 | 3.24:1 | AA 미달 |
| #aaa on #f5f5f0 | 2.12:1 | AA 미달 |
| #bbb on #f5f5f0 | 1.76:1 | AA 미달 |
After · 개선안
Contrast-first treatment
SINGAPORE · MONDAY EVENING
When the coffee matches your mood
Muted copy should still read clearly at arm’s length on a phone. Secondary text can feel soft without becoming invisible.
- Secondary text는 최소 4.5:1을 맞추고, tertiary/muted는 정보 중요도에 따라 제한적으로 사용.
- 상단 메타/설명/비활성 라벨에 같은 연회색을 반복 적용하지 말고 3단계 정도로만 단순화.
- 작은 텍스트는 색을 더 흐리게 하지 말고, 대신 굵기·간격으로 톤을 조절.
2. 키보드 포커스가 거의 보이지 않음
탭 이동 시 현재 포커스 위치를 명확히 보여주는 전역 focus-visible 스타일이 보이지 않는다. 모바일 외에도 키보드/스위치 사용자에게 치명적이다.
Priority · High
Before · 탭 이동 캡처
실제 탭 이동 캡처. 선택 상태나 포커스 상태가 시각적으로 충분히 도드라지지 않는다.
After · 개선안
Visible focus system
Theme toggle
:focus-visible에 전역 아웃라인을 부여하고, 아이콘 버튼·칩·하단 내비에도 동일 규칙 적용.- 선택 상태(active)와 포커스 상태(focus)를 구분해서 표현. 둘을 같은 미세한 톤 변화로 처리하지 않기.
- 작은 아이콘 버튼은 44×44px 이상 hit area를 보장.
3. 폼이 placeholder에 기대고 있고 라벨 연결이 약함
시각적으로는 라벨처럼 보이지만, 코드상으로는 label + for 연결이 아니라 텍스트 span 뒤에 input/textarea가 오는 구조로 보인다.
Priority · High
Before · 피드백 폼 캡처
Message / Email 입력창은 placeholder가 눈에 띄고, 상단 필드명은 스크린리더와 명시적으로 연결돼 있지 않을 가능성이 높다.
After · 개선안
Programmatic labels + persistent help
최대 800자 · placeholder는 예시로만 쓰고 필드명은 항상 유지
후속 답변을 받고 싶을 때만 입력
- 모든 입력 요소에 실제 label을 연결하고, 도움말은
aria-describedby로 연결. - placeholder는 예시 텍스트로만 사용하고, 필드 이름 대체 수단으로 쓰지 않기.
- 에러 메시지도 입력과 연결해서 스크린리더가 즉시 알 수 있게 구성.
4. 하단 내비 라벨이 너무 작고 상태 구분이 미약함
번들 기준 하단 내비 라벨이 약 9px 수준으로 보인다. 모바일에서 빠른 훑어읽기와 저시력 접근성 모두 불리하다.
Priority · Medium
Before · 하단 내비 / 검색 시트
내비 라벨, 검색 입력 placeholder, 섹션 레이블, 체크/칩 상태가 전체적으로 얇고 작게 보인다.
After · 개선안
Larger nav + clearer state
내비 라벨은 최소 12px 이상, 활성 상태는 색·배경·굵기를 함께 사용해 구분.
- 하단 내비 라벨은 12–13px 정도로 상향.
- 활성/비활성 상태를 명도 차이만으로 처리하지 말고 배경, 굵기, 아이콘 변화까지 함께 사용.
- 칩과 체크 선택 UI도 선 두께와 대비를 올려 상태 판별이 한눈에 되게 조정.
빠른 수정 체크리스트
- 라이트 모드의 secondary / tertiary / muted 색상 재정의
- 전역
:focus-visible스타일 추가 - 아이콘-only 버튼에
aria-label부여 - 폼 필드에
label,id,aria-describedby연결 prefers-reduced-motion지원 추가- 하단 내비 라벨 크기와 hit area 확대
참고: 이번 리포트는 정적 번들 분석 + 모바일 시각 캡처 기반이다. 실제 최종 수정 전에는 키보드 탐색, VoiceOver/TalkBack, Lighthouse/axe 같은 도구로 한 번 더 검증하는 것이 좋다.