Web Guide크로스브라우징브라우저 호환성사파리 깨짐
브라우저 호환성 : 크롬에서만 잘 보이는 홈페이지의 위험
브라우저마다 웹 표준을 해석하는 방식이 조금씩 다릅니다.
제작사 PC의 크롬에서는 완벽한데 고객의 아이폰 사파리에서는 레이아웃이 무너지는 일이 여전히 일어납니다. 어떤 환경을 지원해야 하고 어떻게 확인하는지 정리했습니다.
01
지원 범위를 계약에 명시한다
지원이 종료된 인터넷 익스플로러는 제외하는 것이 표준이며, 공공기관 등 특수한 요구가 있다면 계약 시 별도로 정합니다.
PC 크롬 · 엣지 | PC 사파리 · 파이어폭스 |
iOS 사파리 | 안드로이드 크롬 | 삼성 인터넷 |
범위가 명시되어야 `이 브라우저에서 깨진다`가 하자인지 아닌지 판단할 수 있습니다.
02
사파리와 아이폰의 특이점
iOS 사파리는 다른 브라우저와 다르게 동작하는 지점이 있습니다.
화면 하단 주소창 · 100vh
스크롤에 따라 높이가 변합니다.
날짜 입력 필드
기본 UI와 동작이 다릅니다.
동영상 자동 재생
조건을 만족해야만 재생됩니다.
아이폰 사용자 비중이 높은 국내에서는 iOS 실기기 테스트를 생략하면 안 됩니다.
같은 코드라도 브라우저에 따라 이렇게 다르게 그려집니다.
03
웹 표준 준수가 근본 대책
특정 브라우저의 편법에 의존하지 않고 W3C 표준에 맞춰 코딩하면 호환성 문제가 대부분 사라집니다. 표준 검사 도구로 마크업 오류를 점검하고, 최신 기능을 쓸 때는 지원하지 않는 브라우저에서의 대체 동작을 준비합니다.
웹비스타는 퍼블리싱 단계에서 표준 검사와 주요 브라우저 검수를 거칩니다.
04
오픈 후에도 브라우저는 바뀐다
브라우저 업데이트로 오픈 당시 정상이던 화면이 달라지는 경우가 있습니다. 특정 브라우저에서 깨진 화면을 발견하면 브라우저 종류·버전·기기명과 캡처를 함께 알려주세요. 재현 정보가 정확할수록 빨리 수정됩니다.
유지보수 계약에 브라우저 대응이 포함되어 있는지도 확인해 두면 좋습니다.
CHECK POINT
□ 지원 브라우저와 기기 범위가 계약에 명시되어 있는가
□ iOS 사파리 실기기에서 검수했는가
□ 표준 검사 도구로 마크업 오류를 점검했는가
관련 FAQ 탭 | 운영 및 유지보수
#크로스브라우징
#브라우저 호환성
#사파리 깨짐
#iOS 테스트
#웹 표준
#W3C 검사
#반응형 검수
#퍼블리싱
#유지보수 범위