브라우저 호환성 점검

지원 대상을 선언한다

회사 정책이나 실제 사용자 비율에 맞춰 브라우저와 버전을 먼저 정합니다.

target

문법 변환, API polyfill, CSS fallback이 필요한 부분을 각각 표시합니다.

feature

flex, grid, viewport, font, scrollbar, form control이 실제 화면에서 어떻게 달라지는지 확인합니다.

visual

터치, 키보드, autoplay, cookie, permission 같은 브라우저 정책 차이를 핵심 경로에서 확인합니다.

policy

Syntax/API

빌드와 런타임 지원을 나누어 처리 Babel로 해결되는 문제와 polyfill이 필요한 문제를 구분합니다.

runtime

Layout

화면이 보이는 방식의 차이 픽셀 단위 완전 일치보다 깨지지 않는 범위를 기준으로 둡니다.

render

Interaction

입력 방식과 권한 정책의 차이 hover, focus, touch, keyboard, permission prompt를 모두 경로에 포함합니다.

input

대상 브라우저 지원하지 않을 브라우저도 명시해야 불필요한 polyfill을 줄일 수 있습니다.

fallback 품질 새 기능이 없어도 핵심 작업은 완료할 수 있어야 합니다.

회귀 스냅샷 자주 깨지는 화면은 브라우저별 시각 비교나 수동 체크리스트에 올립니다.

문법 오류 -> transpile
API 없음 -> polyfill 또는 fallback
레이아웃 깨짐 -> CSS fallback
권한 차단 -> UX와 서버 정책 점검