UX 패턴별 테스트 케이스는 어떻게 작성할까

먼저 던질 질문

UX 품질을 테스트로 어느 정도 보장할 수 있을까

핵심 관점

UX 테스트는 화면이 렌더링되는지 확인하는 것이 아니라 사용자가 중요한 흐름에서 막히지 않는지 확인하는 일이다.

구현 품질로 이어지는 장면

Form 테스트에서 필수값 오류, 서버 오류, 포커스 이동을 확인한다.

Modal 테스트에서 열림, 닫힘, Escape, 포커스 복귀를 확인한다.

운영에서 깨지는 흐름

컴포넌트가 렌더링되는지만 테스트한다.

성공 경로만 테스트하고 에러와 빈 상태를 놓친다.

구현 사례와 근거

테스트는 정상 화면보다 상태 전환을 봐야 한다

UX 패턴 테스트는 버튼이 렌더링되는지 확인하는 데서 멈추면 부족하다. 클릭 후 pending, 성공 후 피드백, 실패 후 복구, 포커스 이동을 검증해야 한다.

Dialog 테스트는 열림, 닫힘, Escape, Tab 순환, 원래 포커스 복귀를 포함해야 한다. Form 테스트는 오류 요약, 필드 오류 연결, 재입력 후 오류 제거를 포함해야 한다.

실무 해석

WCAG와 WAI-ARIA APG는 패턴별 테스트 가능한 기준을 제공한다. 테스트 이름도 "should render error"보다 "사용자가 잘못된 이메일을 제출하면 이메일 필드로 돌아가 수정할 수 있다"처럼 사용자 관점으로 쓰는 편이 좋다.

구현 판단 기준

• 성공 경로와 실패 경로를 함께 테스트한다
• 접근성 기반 쿼리로 사용자가 찾는 요소를 찾는다
• 상태 전환과 회복 액션을 테스트한다

자주 빠지는 함정

스냅샷이나 class 기반 테스트만으로는 UX가 작동하는지 알 수 없다. 사용자가 읽고 누르고 되돌리는 흐름을 테스트해야 한다.

추가로 비교할 구현 사례

• Form Validation, Dialog, File Upload, Empty State 테스트 케이스를 만든다
• getByRole 기반 테스트와 class 기반 테스트를 비교한다
• 시각적 회귀 테스트의 한계를 사례로 설명한다

구현 품질 질문

• 성공 경로 외 실패와 회복 경로를 테스트하는가
• 접근성 쿼리를 왜 우선해야 하는지 설명했는가

출처

• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• WAI-ARIA APG, Dialog Modal Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
• WAI-ARIA APG, Alert Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
• GOV.UK Design System, Error summary: https://design-system.service.gov.uk/components/error-summary/
• WAI-ARIA APG, Table Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/table/