크로스 브라우징(cross browsing)이란 무엇일까?
크로스 브라우징(Cross Browsing)은 웹 페이지나 웹 어플리케이션이 다양한 웹 브라우저에서 일관되게 작동하고 동일하게 보이도록 하는 것을 의미합니다. 각 브라우저는 웹 표준을 해석하고 렌더링하는 방식에 약간의 차이가 있을 수 있기에 크로스 브라우징은 웹 개발 과정에서 꼭 고려해야할 사항입니다.
특히 IE와 같은 구형 브라우저와 최신 브라우저 간에는 지원하는 JS버전의 차이가 있어 구형 브라우저에서도 호환성을 유지하기 위해 추가적인 작업이 필요할 수 있습니다.
이전 직장에서 크로스 브라우징 관련 이슈가 생겨 크로스 브라우징에 대한 내용을 처음으로 찾아보게 되었는데 내용을 더 자세하게 정리하려고 한다.. (코드를 수정하고 나니 IE에선 작동을 하지 않는?!)
크로스 브라우징의 중요성
1. 사용자 접근성
웹사이트는 모든 사용자에게 열려 있어야 한다.
브라우저에 관계없이 콘텐츠에 접근할 수 있도록 크로스 브라우징을 고려하는 것은 웹 접근성을 높이는 방법 중 하나이다.
특히 다양한 브라우저와 장치를 사용하는 사용자들이 많기 때문에 호환성 없는 웹 페이지는 사용자 경험을 저하시킬 수 있다.
2. 일관된 사용자 경험
크로스 브라우징을 통해 웹사이트는 일관된 사용자 경험을 제공한다.
각 브라우저에서 비슷한 레이아웃과 스타일로 콘텐츠가 보이도록 함으로써 사용자 만족도를 높이고 이탈률을 낮추는 효과를 얻을 수 있다.
3. 브랜드 이미지
다양한 브라우저에서 웹 사이트가 동일하게 작동하지 않으면 브랜드에 부정적인 이미지를 줄 수 있다. 특정 브라우저에서 작동이 되지 않는 사이트는 사용자로부터 신뢰를 잃을 가능성이 크다.
4. SEO
검색 엔진은 접근성과 사용자 경험을 중요하게 평가한다. 크로스 브라우징을 통해 다양한 브라우저에서도 일관된 콘텐츠 제공이 가능해지고, 이는 검색 엔진 최적화에도 도움이 될 수 있다.
크로스 브라우징을 위한 방법
1. HTML5 DOCTYPE선언
HTML 파일의 시작에
<!DOCTYPE html>을 선언하여 HTML5 문서임을 명시해야 합니다. DOCTYPE은 브라우저가 표준 모드(Standards Mode)로 렌더링하도록 유도하며 이를 선언하지 않으면 브라우저는 호환 모드(Quirks Mode)로 렌더링할 수 있습니다. 호환 모드는 구형 웹페이지의 호환성을 유지하기 위해 만들어졌으나 현재는 표준 모드 사용을 권장합니다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cross Browsing Example</title> </head> <body> <h1>Hello, World!</h1> </body> </html>
2. 코드 유효성 검사
크로스 브라우징 이슈의 상당수는 HTML이나 CSS 코드의 오타나 잘못된 문법에서 발생합니다. 이를 방지하기 위해 W3C 유효성 검사기 같은 도구를 사용하여 코드의 유효성을 확인할 수 있습니다.
HTML 유효성 검사기
CSS 유효성 검사기
3. CSS 초기화
브라우저마다 기본으로 적용하는 스타일이 다르기 때문에 CSS 초기화는 필수적입니다.
초기화를 통해 브라우저 기본 스타일을 제거하고 통일된 스타일링을 적용할 수 있습니다. 대표적인 CSS 초기화 방법으로는
Reset CSS와 Normalize CSS가 있습니다. 
4. 브라우저별 지원 검토 및 Can I Use 활용
CSS 속성이나 JavaScript 기능이 모든 브라우저에서 동일하게 지원되지 않습니다. Can I Use와 같은 사이트에서 특정 속성이나 기능의 호환성을 확인하여 필요한 경우 대체 방법을 사용할 수 있습니다.
5. 벤더 프리픽스 (Vendor Prefix)
CSS에서 최신 속성 중 일부는 브라우저별 프리픽스를 붙여야 작동합니다. 이를 통해 브라우저별로 최적화된 렌더링을 적용할 수 있습니다.
.selector { -webkit-transform: rotate(45deg); /* Chrome, Safari */ -ms-transform: rotate(45deg); /* Internet Explorer */ transform: rotate(45deg); /* 표준 */ }
크로스 브라우징 이슈 예시
IE에서 CSS Flexbox 문제
IE11에서는 flex 속성을 지원하지만, 일부 속성(
align-items, justify-content)이 예상대로 작동하지 않을 수 있습니다. 이런 경우에는 추가적인 CSS를 통해 스타일을 조정해야 합니다./* IE용 Flexbox 조정 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .flex-container { display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; } }
JavaScript의 Promise 지원 문제
IE는
Promise와 같은 최신 JavaScript 기능을 지원하지 않으므로 polyfill을 추가하여 기능을 보완해야 합니다. core-js 라이브러리를 이용하면 쉽게 해결할 수 있습니다.import 'core-js/stable'; import 'regenerator-runtime/runtime';
