학습 목표
- 고객 과제를 명확한 페이지·탐색으로 옮깁니다.
- 기기별 접근성과 전체 상호작용을 봅니다.
페이지가 지지할 결정 정의
대상, 질문, 다음 행동을 씁니다. 서비스 페이지는 장식 도입보다 적합성·절차·한계·연락이 먼저일 수 있습니다. 의미 있는 제목 아래 쉽고 구체적으로 씁니다. 여기 둘 내용과 명확히 연결한 별도 설명을 나눕니다.
이해할 경로 만들기
일관된 탐색과 목적지를 설명하는 링크를 씁니다. 현재 위치와 돌아갈 길을 보입니다. 핵심 행동은 색만으로 구분하지 않습니다. 폼에는 보이는 라벨, 필요 정보, 필드 근처 수정 가능한 오류가 필요합니다. 성공 제출 후 과정도 설명합니다.
다양한 능력·상황 고려
키보드, 보조 기술, 확대, 밝은 곳의 작은 화면을 쓸 수 있습니다. 대비, 논리적 포커스, 목적을 담은 대체 텍스트를 봅니다. 좁은 공간·확대 글자에 재배치되게 합니다. 자동 검사는 일부 문제를 찾지만 실제 사람의 완료를 입증하지 않습니다.
성능·유지관리 포함
적절한 이미지, 안정된 공간, 필요한 상호작용을 씁니다. 콘텐츠 가림과 예측 불가 탐색 효과를 피합니다. 가격·범위·연락 갱신 담당을 정합니다. 실제 길이, 언어 방향, 오류를 시험합니다. 실제 콘텐츠가 와도 쓸 수 있어야 합니다.
과제 중심 설계 순환
개별 화면이 아닌 전체 여정을 봅니다.
이해
사용자 과제와 필요 정보를 찾습니다.
조직
명확한 콘텐츠·탐색을 만듭니다.
구축
접근 가능한 반응형 상호작용을 구현합니다.
평가
완료 관찰, 장애 수정, 정확성 유지.
비교표
| 영역 | 질문 | 증거 |
|---|---|---|
| 콘텐츠 | 방문자가 서비스 적합성을 아는가? | 정확한 범위와 이해할 제목 |
| 상호작용 | 마우스 없이 끝낼 수 있는가? | 키보드 경로, 보이는 포커스, 고칠 오류 |
| 반응형 배치 | 좁아도 정보를 이용하는가? | 실제 모바일·확대 글자 확인 |
| 성능 | 주요 정보가 예상대로 보이는가? | 안정 배치와 적절한 미디어 |
완전해 보인 연락 폼
가상 기업의 아름다운 문의 페이지는 빨간 테두리로만 오류를 보입니다.
- 키보드 검토에서 누락 정보를 알아볼 수 없음이 드러납니다.
- 팀이 라벨, 설명 오류, 명확한 포커스를 추가합니다.
- 작고 큰 화면에서 수정·확인·약속한 후속을 시험합니다.
개선은 새 색이 아닌 완료와 이해할 피드백입니다. 완전 평가는 추가 확인이 필요할 수 있습니다.
실행 체크리스트
- 과제와 다음 행동 명시.
- 의미 있는 제목·링크 사용.
- 키보드·오류 수정 확인.
- 좁은 배치·큰 글자 시험.
- 콘텐츠·유지 담당 지정.
흔한 실수
빈 템플릿 승인
짧은 데모만 맞는 배치는 실제 번역·이미지에 실패할 수 있습니다.
자동 점수를 전체 경험으로 취급
높은 점수는 모든 사용자의 탐색·문구·복잡한 상호작용 성공을 입증하지 않습니다.
질문과 답변
반응형은 데스크톱 축소인가요?
아닙니다. 필수 정보와 읽기·포커스 순서를 유지하며 배치와 상호작용을 조정합니다.
접근성은 끝에만 추가할 수 있나요?
늦은 수정은 가능하지만 내용·구조·상호작용은 전 과정에서 다루기 쉽습니다.
출처 및 참고 자료
- 접근성 원칙W3C Web Accessibility Initiative
일차 국제 지침이 주요 요건과 관련 표준을 안내합니다.
- 실용 설계·개발 팁W3C Web Accessibility Initiative
W3C는 저자·디자이너·개발자 입문 자료를 제공합니다. 짧은 목록은 전체 적합성 감사가 아닙니다.
