배포 전에 모바일 접근성을 어떤 순서로 보면 덜 놓칠까?

이 허브는 정적 페이지와 브라우저 실행형 도구가 중심이라서, 배포 전 마지막 수동 QA에서 탐색 가능성, 입력/결과 이해 가능성, CTA 도달성을 모바일 기준으로 확인하는 편이 중요합니다. 특히 홈 → 가이드 → 도구 퍼널이 길어질수록 키보드 포커스와 읽기 순서가 조금만 어긋나도 실제 사용성 손실이 크게 느껴집니다.

0. 3분 실기기 QA 루트부터 먼저 돈다

배포 후 실제 iPhone Safari 또는 Android Chrome에서 시간이 부족하다면, 아래 네 단계만 먼저 따라가도 가장 자주 놓치는 탐색·CTA·입력·결과 읽기 문제를 빠르게 걸러낼 수 있습니다.

홈 허브부터 다시 보기 → 첫 CTA 밀도와 quick-check 카드가 실제 모바일에서 과하지 않은지 비교하기 좋습니다.

1. 첫 진입에서 바로 확인할 것

• 본문 바로 가기 링크가 첫 포커스로 노출되는지
• 현재 페이지 링크에 aria-current가 붙어 있는지
• 모바일 폭에서도 첫 화면 안에 핵심 CTA가 너무 아래로 밀리지 않는지
• 브랜드 링크, 주요 탐색, 본문 제목의 읽기 순서가 자연스러운지

2. 도구 페이지에서 확인할 것

• 텍스트 입력란에 helper text가 연결돼 무엇을 붙여 넣어야 하는지 바로 이해되는지
• 옵션 묶음이 fieldset/legend로 읽혀 체크박스 의미가 분리되는지
• 결과 영역이 aria-live 또는 명확한 요약 문구로 갱신 사실을 알려 주는지
• 복사 버튼이나 다음 단계 CTA가 입력 아래에서 너무 멀어지지 않는지

3. 가이드 → 도구 전환 퍼널에서 확인할 것

1. 가이드 H1과 CTA 문구만 읽어도 다음 행동이 분명한지
2. 관련 카드가 너무 많아 핵심 CTA를 묻어버리지 않는지
3. 도구로 이동한 뒤 같은 작업 문맥이 유지되는지
4. 뒤로 가기 없이도 홈 허브나 인접 도구로 갈 수 있는 안전한 탈출 경로가 있는지

4. 색 대비와 포커스 표시

정적 도구는 상호작용이 단순해 보여도, 포커스 링과 CTA 대비가 약하면 모바일 키보드·보이스오버 사용자에게는 즉시 사용 장벽이 됩니다. 최소한 다음 네 가지는 배포 URL에서 실제 기기로 다시 확인하는 편이 안전합니다.

• 버튼, 텍스트 링크, 배지의 대비가 밝은 배경 위에서도 충분한지
• 포커스 아웃라인이 카드 그림자에 묻히지 않는지
• 긴 가이드 문단에서 링크만 연속으로 읽히지 않고 문맥이 남는지
• 다크 모드나 브라우저 고대비 설정에서 의미 전달이 깨지지 않는지

5. 이 프로젝트 기준 권장 수동 QA 루트

1. 홈에서 skip link, hero CTA 3종, 빠른 시작 카드가 차례대로 잘 읽히는지 본다.
2. 맞춤법 검사 전 정리 가이드로 이동해 CTA와 관련 카드의 우선순위를 확인한다.
3. 교정 전처리기에서 입력 helper, 옵션 그룹, 결과 요약이 충분히 이해되는지 본다.
4. SRT QC 검사기에서 요약 카드와 이슈 목록이 스크린리더 기준으로도 자연스럽게 읽히는지 확인한다.
5. 마지막으로 홈으로 돌아가 다른 진입점도 같은 패턴을 유지하는지 비교한다.

배포 후 실패 신호가 보이면 어디부터 고칠까?

• 첫 행동이 안 보임: 홈 hero CTA 우선순위나 가이드 CTA 위치를 먼저 줄입니다.
• 입력 의미가 모호함: 도구 helper text와 fieldset/legend 설명을 먼저 다듬습니다.
• 결과가 바뀐 걸 못 느낌: 요약 문구, aria-live, 복사 피드백 문장을 먼저 점검합니다.
• 스크롤이 길어 핵심 CTA를 놓침: 관련 카드 수와 FAQ 밀도를 줄이고, primary action을 상단으로 다시 끌어올립니다.

배포 후 다시 봐야 하는 항목

로컬 스모크 테스트만으로는 실제 모바일 브라우저의 주소창 축소, 시스템 글꼴 차이, 보이스오버 제스처 흐름까지 다 재현되지 않습니다. 그래서 배포 뒤에는 실기기 iPhone Safari와 Android Chrome + TalkBack 기준으로 한 번씩 재점검하는 것이 좋습니다.