반응형·브라우저 검증
반응형 검증은 특정 기기 스크린샷을 만드는 작업이 아닙니다. 폭이 달라져도 같은 정보와 핵심 기능에 접근할 수 있는지 확인하는 과정입니다.
기본 화면 크기
섹션 제목: “기본 화면 크기”SLUR 제작물은 다음 화면을 공통 기준으로 확인합니다.
- 모바일:
390 × 844 - 태블릿:
768 × 1024 - 데스크톱:
1440 × 900 - 좁은 화면 스트레스 테스트:
320px폭
고정 화면은 비교 가능한 기준점입니다. 프로젝트의 실제 사용자 환경에 중요한 화면이 있다면 별도로 추가합니다.
화면마다 같은 내용을 확인한다
섹션 제목: “화면마다 같은 내용을 확인한다”각 화면에서 다음 항목을 같은 순서로 확인합니다.
- 문서 가로 스크롤이 생기지 않는가
- 텍스트와 조작 요소가 잘리거나 겹치지 않는가
- 핵심 정보의 순서가 유지되는가
- 메뉴와 탐색을 사용할 수 있는가
- 폼을 입력하고 제출할 수 있는가
- 오류·성공·로딩·빈 상태를 이해할 수 있는가
- 확대하거나 글자 크기를 키워도 핵심 콘텐츠가 손실되지 않는가
레이아웃이 달라도 핵심 정보와 기능은 같아야 합니다. 모바일 전용으로 핵심 내용을 삭제해 문제를 숨기지 않습니다.
실제 흐름으로 검증한다
섹션 제목: “실제 흐름으로 검증한다”정적인 첫 화면만 확인하지 않습니다. 대표 사용자 흐름을 시작부터 결과까지 실행합니다.
예를 들어 문의 흐름이라면 다음을 확인합니다.
- 문의 진입 링크를 찾습니다.
- 키보드와 포인터로 필드를 입력합니다.
- 의도적으로 오류를 발생시킵니다.
- 오류 위치와 해결 방법을 이해할 수 있는지 확인합니다.
- 오류를 수정하고 제출합니다.
- 완료 결과와 다음 행동을 확인합니다.
실패와 복구 과정까지 확인해야 실제 사용성을 검증할 수 있습니다.
키보드 검증
섹션 제목: “키보드 검증”Tab과Shift + Tab의 순서가 화면의 의미 순서와 맞는가- 모든 조작 요소에 도달할 수 있는가
- 현재 초점을 명확히 볼 수 있는가
Enter,Space, 방향키가 역할에 맞게 동작하는가- 모달을 열고 닫은 뒤 초점이 예상 위치로 돌아오는가
- 초점이 보이지 않는 영역에 갇히지 않는가
포인터로 가능하다는 이유만으로 키보드 검증을 생략하지 않습니다.
동적 콘텐츠 검증
섹션 제목: “동적 콘텐츠 검증”JavaScript, iframe, Canvas, 외부 위젯이 있는 경우 접근성 트리나 HTML 존재 여부만으로 완료를 판단하지 않습니다.
- 실제 콘텐츠가 로딩되는가
- 로딩 실패 시 대체 안내가 있는가
- 상태 변경이 화면에 반영되는가
- 보조 기술에 필요한 상태도 함께 갱신되는가
- 새로고침과 뒤로 가기 이후에도 흐름이 안전한가
검증 결과 기록
섹션 제목: “검증 결과 기록”각 문제에는 화면 크기, 브라우저, URL, 재현 순서, 기대 결과, 실제 결과와 증거를 남깁니다.
개선 후에는 같은 화면과 같은 흐름으로 다시 확인합니다. 조건을 바꾸면 개선 효과와 환경 차이를 구분하기 어렵습니다.