반응형 UI 테스트

측정 도구: Playwright (Chromium 엔진)
테스트 목적: 다양한 디바이스 환경에서 웹페이지가 viewport 경계를 벗어나지 않고 올바르게 렌더링되는지 검증
검사 대상: 9개 주요 뷰포트 (모바일 3개, 폴더블 1개, 태블릿 3개, 데스크톱 2개)

측정 항목:
• body 요소의 실제 렌더링 폭
• viewport 폭 대비 초과 픽셀 수
• 각 뷰포트별 초과 발생 여부

테스트 방식:
1. 각 뷰포트 크기로 브라우저 설정
2. 페이지 로드 후 네트워크 안정화 대기 (6초)
3. document.body.getBoundingClientRect() 측정
4. viewport 폭과 비교하여 초과 픽셀 계산

검사 뷰포트 목록:
• 모바일: 360×800, 390×844, 414×896
• 폴더블: 672×960
• 태블릿: 768×1024, 834×1112, 1024×1366
• 데스크톱: 1280×800, 1440×900

이 테스트는 약 30초~1분 정도 소요되며, 수평 스크롤바 발생 가능성을 사전에 발견하여 사용자 경험을 개선할 수 있습니다.