실용적인 크로스 브라우저 테스트 체크리스트
레이아웃은 한 브라우저에서는 완벽해 보일 수 있지만 다른 브라우저에서는 깨질 수 있습니다. 화면이 좁은 저가형 안드로이드 폰이나 125%로 확대된 오래된 노트북은 디자인을 망칠 수 있습니다.
테스트를 막연한 최종 점검 단계로 취급하지 마세요. 구체적인 체크리스트로 다루어야 합니다.
위험도가 높은 영역에 집중하세요:
- 폼 및 입력창
- 네비게이션 메뉴
- 레이아웃 시프트(Layout shifts)
- 폰트 로딩
- JavaScript 상호작용
모든 브라우저를 하나하나 테스트하려고 하지 마세요. 시간 낭비입니다. 대신 효율적인 매트릭스를 사용하세요:
- 데스크톱용 Chromium 브라우저 1개
- Safari 환경 1개
- Firefox 환경 1개
- Android 스마트폰 1개
- iPhone 1개
사용자가 실제로 제품을 사용하는 방식에 맞춰 테스트를 구성하세요. 페이지가 모든 곳에서 똑같이 보일 필요는 없습니다. 사용 가능하고, 읽기 쉬우며, 안정적이어야 합니다.
체크리스트에는 다음 항목이 포함되어야 합니다:
- 브라우저 및 OS
- 뷰포트 너비
- 확대/축소 수준
- 특정 사용자 흐름(User flows)
리스트를 짧게 유지하세요. 테스트에 반나절이 걸린다면 팀원들은 이를 건너뛸 것입니다. 제대로 된 점검은 1시간 이내에 끝나야 합니다.
구조부터 시작하세요. 홈페이지, 콘텐츠 페이지, 폼을 확인하세요. 창 크기를 데스크톱에서 모바일 너비로 조절해 보세요. 화면을 확대해 보세요. 다음 문제들을 주의 깊게 살펴보세요:
- 어색하게 줄바꿈되는 버튼
- 잘려 나가는 제목
- 가로 스크롤 발생
- 콘텐츠를 가리는 스티키 헤더(Sticky headers)
- 중요한 컨트롤을 가리는 모달
다음으로 상호작용을 테스트하세요. 브라우저마다 폼을 처리하는 방식이 다릅니다. 텍스트 입력창, 비밀번호 관리자, 날짜 선택기, 파일 업로드를 테스트하세요. 자동 완성 기능이 레이아웃에 어떤 영향을 미치는지 확인하세요.
탭, 아코디언, 검색 제안과 같이 JavaScript 비중이 높은 컴포넌트를 테스트하세요. 콘솔에 오류가 표시되지 않더라도 버튼이 작동하지 않을 수 있습니다.
마지막으로 사이트를 스트레스 테스트하세요:
- 네트워크 속도 제한(Throttle)
- 캐시 비활성화
- 입력 필드에 매우 긴 텍스트 입력
- 오버플로 확인을 위해 평소보다 많은 항목 로드
최고의 체크리스트는 지루한 것입니다. 단순히 통과(pass) 또는 실패(fail)를 가리는 목록이어야 합니다. 제품을 출시할 때마다 매번 사용하세요. 버그가 운영 환경(production)으로 유출되면, 해당 실패 사례를 체크리스트에 추가하세요.
체크리스트는 팀이 놓친 것을 기억해 줄 때만 유용합니다.
Source: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a