테스트는 콘텐츠 기반 웹 애플리케이션의 기능, 품질, 접근성, 보안, 성능을 보장하는 데 매우 중요합니다. 테스트를 통해 사용자 환경을 평가하고 추가 개발이 필요한지 확인할 수 있습니다. 웹 애플리케이션은 품질 표준을 충족하고 예상대로 작동해야 합니다.
여기에서는 웹 애플리케이션의 접근성과 사용자 친화적인 제작을 위해 고려할 수 있는 기본 테스트 안내를 제공합니다.
| 구성요소 | |
|---|---|
| 색상 대비 | 대비율이 가독성을 위해 최적화되었는지 확인합니다. 다양한 유형의 색맹 및 사용자가 정의한 고대비 강제 색상에 대해 검사를 실행해야 합니다. |
| 서체 | 애플리케이션이 다른 기기 및 설정을 수용하는지 여부를 결정합니다. 상대적 글꼴 크기와 비선형 크기 조정을 사용하여 서체를 최대 크기에서도 계속 사용할 수 있습니다. |
| 이미지 | 이미지가 고화질이고 빠르게 로드될 수 있어야 합니다. 네트워크가 없고 더 높은 해상도에 최적화된 애셋이 없는 올바른 대체가 있는지 확인하는 것이 중요합니다. |
| 탐색 | 탐색이 명확하고 마우스, 터치, 키보드 탐색으로 사용할 수 있는지 확인합니다. 기록 API를 확인하면 뒤로 및 앞으로 탐색도 올바르게 보존됩니다. |
| 검색 | URL 쿼리 매개변수 및 검색창에서 쿼리에 대한 응답 시간이 짧은지 확인합니다. |
| 양식 | 모든 양식이 사용자 친화적으로 작성되어 제출할 수 있어야 합니다. 기본 양식 제출을 재정의하는 경우 올바른 이벤트를 수신 대기하고 양식을 재설정하고 악의적인 사용자 입력으로부터 보호할 수 있는지 확인해야 합니다. |
| 성능 | 애플리케이션의 효율성과 응답성, 빠른 로드 속도를 보장합니다. 이는 회귀 테스트의 중요한 부분이기도 합니다. |
웹 접근성을 확인하는 데 사용할 수 있는 많은 도구가 있습니다. 다양한 접근성 구성요소를 포괄하려면 여러 메서드를 사용하는 것이 중요합니다. ARIA 라벨, DOM 요소의 a11y, 키보드 탐색, 스크린 리더 사용을 확인하세요.
Jest, Vitest, Cypress, Mocha, Jasmine과 같은 프런트엔드 테스트 프레임워크를 사용하면 테스트를 효율적으로 작성하고 동작 기반 및 테스트 기반 개발을 지원할 수 있습니다. 또한 CI/CD 파이프라인에 통합하면 테스트를 자동화하고 커밋에서 회귀 버그를 방지하는 데 도움이 될 수 있습니다.
웹 테스트 실행기, Playwright, 웹 드라이버 또는 Node.js의 테스트 실행기와 같은 실행기 프레임워크를 사용하면 이러한 테스트를 효율적으로 실행하고 여러 환경과 플랫폼에서 테스트를 지원할 수 있습니다. 이 목록은 전체 목록이 아니며 사용 중인 프레임워크에 따라 내장된 테스트가 있을 수 있습니다.