접근성 있는 App Store 스크린샷: 대비, 텍스트 크기, 대체 텍스트
App Store 스크린샷은 웹 페이지처럼 스크린 리더로 탐색할 수 없어요 — Apple은 사용자에게 스크린샷 대체 텍스트를 직접 노출하지 않아요. 하지만 시각적 접근성 규칙(대비, 텍스트 크기, 색상 독립성)은 분명히 적용되며, 이는 썸네일 크기 가독성을 결정하는 규칙과 동일해요. 둘 다 같은 작업이니 함께 챙기는 게 맞아요.
대비: WCAG AA를 기준선으로
WCAG AA 대비 비율:
- 일반 텍스트: 배경 대비 최소 4.5:1.
- 큰 텍스트 (24pt 이상 보통체 또는 18pt 이상 굵은체): 최소 3:1.
- 그래픽 요소 / UI 컨트롤: 3:1.
무료 도구가 많으니 대비 검사기를 활용해서, 각 캡션과 그것이 위치한 패널 배경 사이의 대비를 확인하세요. 배경이 그라디언트라면 캡션이 놓인 그라디언트의 가장 밝은 지점과 가장 어두운 지점 모두에서 확인하세요.
흔한 실패 사례: 밝은 주황에서 어두운 주황으로 이어지는 그라디언트 위의 흰색 텍스트. 캡션이 밝은 주황 부분에 걸리면 대비가 4.5:1 아래로 떨어지고 썸네일 크기에서 텍스트가 사라져요.
썸네일에서의 텍스트 크기
App Store 스크린샷은 여러 크기로 렌더링돼요:
- 제품 페이지 전체 크기 (~1290px 너비).
- 검색 결과 미리보기 (~600px 너비).
- 검색 결과 썸네일 (~300px 너비).
디자인 파일에서 1290×2796 크기로 캡션이 60px라면, 300px 검색 썸네일에서는 약 14px로 렌더링돼요. 14px는 가독성을 위한 권장 최소 크기보다 작아요. 해결책: 캡션을 80~100px로 디자인하면 썸네일에서 18~22px로 렌더링돼요. 검색에 표시되는 패널 1~3에 특히 중요해요.
색상 독립성
정보를 전달할 때 색상에만 의존하지 마세요. 가장 흔한 위반: 배경과 색조(hue)만으로 구별되는 색상의 캡션 텍스트(예: 녹색 배경 위 빨간 텍스트). 적록색맹이 있는 사용자는 탁한 색만 보게 돼요.
테스트 방법: 스크린샷을 흑백으로 바꿔도 모든 캡션을 읽을 수 있나요? 읽을 수 있다면 색상 독립성이 확보된 거예요. 읽을 수 없다면 색조 차이가 아니라 밝기(명도) 차이를 높이세요.
App Store Connect의 대체 텍스트
App Store Connect는 웹 페이지가 alt 속성을 노출하는 방식과 동일하게 스크린샷 대체 텍스트를 노출하지 않아요. 하지만 App Store Connect에는 App Store를 탐색하는 VoiceOver 사용자에게 사용되는 스크린샷별 '접근성 태그' 필드가 있어요. 채워 두세요. 스크린샷이 무엇을 보여주는지 짧게 설명하세요: "스크린샷 1"이 아니라 "월간 지출 개요가 있는 홈 화면" 같은 형태로요.
거의 모든 개발자가 하지 않기 때문에, 이게 접근성 측면에서 가장 큰 개선이에요. 현재 App Store를 탐색하는 VoiceOver 사용자는 대다수의 앱에서 "스크린샷 1, 스크린샷 2"라는 말만 들어요. 패널당 설명 몇 줄이면 해당 사용자에게 앱 목록이 훨씬 유용해져요.
"작은 글꼴, 장식용 서체" 안티패턴
장식용 폰트(손글씨 스타일, 초가늘기 디스플레이 폰트)는 접근성과 썸네일 테스트 모두에서 동시에 실패하는 경우가 많아요. 전체 크기에서 우아해 보이는 얇은 획이 300px에서는 판독 불가능해지고, 저시력 사용자에게도 읽히지 않아요.
이런 장식 스타일은 캐러셀 전체에서 최대 강조어 하나에만 사용하세요. 본문 캡션과 중요한 텍스트는 원하는 크기에서 일정한 획 굵기를 가진 폰트가 필요해요 — 대부분의 현대 그로테스크 산세리프(Inter, SF Pro, Roboto)가 잘 작동해요.
캡션 위치와 안전 영역
Apple은 때때로 App Store 캐러셀 위에 UI를 덧씌워요('받기' 버튼, 연령 등급 칩, 설치 후 '열기' 버튼). 캡션이 그 영역에 있으면 가려져요. 캡션을 안전 영역 안에 두세요: 양 옆 60px, 상단 80px, App Store UI를 위해 하단 200px 여백.
배포 전 확인 사항
- 모든 캡션을 패널 배경과의 대비 검사기로 확인하세요.
- 썸네일 시뮬레이터(또는 Figma에서 크기를 줄여서)에서 300px 너비로 스크린샷을 확인하세요. 모든 캡션이 여전히 읽혀야 해요.
- 색상 독립성을 위해 흑백 테스트를 진행하세요.
- App Store Connect에서 각 패널에 접근성 태그를 작성하세요.
- VoiceOver 사용자가 테스트 그룹에 있다면, 앱 목록을 탐색하고 피드백을 요청하세요.
접근성을 넘어 중요한 이유
WCAG가 정의한 대비 및 크기 규칙은 인간 시각 연구에서 도출된 거예요. 임의적인 기준이 아니라, 의미 있는 비율의 사용자가 텍스트를 편안하게 읽지 못하는 임계값이에요. AA 기준으로 설계한다는 건 나이 든 사용자, 강한 야외 햇빛 아래에 있는 사용자, 약한 시력 교정 문제가 있는 사용자, 그리고 검색을 빠르게 스크롤하는 모든 사용자를 포괄하는 설계예요.
저시력 사용자가 스크린샷을 읽을 수 있게 해주는 규칙은, 햇볕이 쨍한 날 지하철에서 App Store를 스크롤하는 사용자에게도 도움이 돼요. 같은 문제, 같은 해결책이에요.