PostCSS에 대해 정리하다가 크로스 브라우징에 대해서도 정리를 한 번 해야겠다는 생각을 했다. 왜냐하면, 내가 해본 건 겨우 클론코딩이 전부이지만 코드를 작성할 때 한 번도 이 부분에 대해 신경을 써본 적이 없다는 걸 깨달았기 때문이다. 단순히 디바이스에 따른 레이아웃 변화만 크로스브라우징이라 생각했던 것도 있는 것 같다.
크로스브라우징(Cross Browsing)이 뭘까?
크로스 브라우징(Cross Browsing)은 웹 개발에서 중요한 개념으로, 다양한 웹 브라우저와 디바이스에서 웹 사이트나 웹 애플리케이션이 동일한 사용자 경험을 제공하는 것을 목표로 한다.
다른 웹 브라우저(ex:Chrome, Firefox, Safari, Edge 등)나 다양한 디바이스(데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지가 일관된 모습과 동작을 보이도록 만드는 작업을 포함한다. 즉, 크로스 브라우징은 웹 페이지의 상호 호환성을 의미한다.
크로스 브라우징을 신경쓰지 않으면, 웹 페이지가 한 브라우저나 디바이스에서는 잘 작동하더라도 다른 브라우저나 디바이스에서는 레이아웃이 깨지거나 기능이 동작하지 않을 수 있다.
실제로, 가입되어 있는 여러 스터디 모임에서 크롬에서는 잘 되는데 사파리에서는 레이아웃이 뒤틀린다고 어떻게 하면 되냐는 질문글을 많이 보기도 했다. 이게 다 크로스 브라우징을 신경쓰지 않아서 생긴 문제라는 것을 지금은 나도 안다.
그럼 어떤 노력을 해야 할까?
- 웹 표준 준수 : 웹 표준에 따라 코드를 작성하여 각 브라우저에서 일관된 동작을 유지한다.
- 프리픽스 사용 : 벤더 프리픽스를 추가하여 브라우저별 호환성을 확보한다.
- 미디어 쿼리 활용 : 미디어 쿼리를 사용해 다양한 화면 크기에 대응하는 반응형 디자인을 구현해 적절한 레이아웃을 제공한다.
- 테스트와 디버깅 : 다양한 브라우저와 디바이스에서 테스트하며 크로스 브라우징 이슈를 해결할 수 있다. BrowserStack에서 다양한 브라우저와 디바이스에서의 웹 페이지를 테스트할 수 있다.
- 유연한 레이아웃 : 고정된 픽셀값 대신 백분율로 레이아웃을 설정하여 화면 크기가 변경될 때 요소들이 자동으로 크기를 조정하게 해, 디바이스의 가로 너비에 따라 요소들이 유연하게 배치된다. 또한 flex와 grid를 활용하면 유연한 레이아웃을 구현하는 데 도움이 된다.
- 웹 접근성 고려 : 웹 접근성 가이드라인을 따르면 모든 사용자가 웹 사이트에 접근하기 용이하다.
- 폴리필 사용 : 폴리필은 브라우저에서 지원하지 않는 기능을 JavaScript로 구현하여 채워주는 방법이다. 이 방법으로 오래된 브라우저에서도 적절한 사용자 경험을 제공할 수 있다. Modernizr 프로젝트에서 제공하는 HTML5 관련 폴리필 정보를 참고할 수 있다.
참고할만 한 링크
- Can I Use : 웹 기술의 브라우저 호환성 정보를 제공하는 사이트
- MDN Web Docs : 웹 기술에 대한 최신 정보와 가이드를 제공하는 Mozilla 개발자 네트워크 문서
- Google Web Fundamentals : Google에서 제공하는 웹 개발 가이드와 리소스
마치며
크로스브라우징은 웹 개발을 하면서 정말 필수적인 요소일 수밖에 없겠구나라는 걸 느꼈다. 그리고 IE 기술지원 종료가 발표됐을 때 왜 많은 개발자들이 그렇게 환호했는지도 좀 알 것 같다.
난 아직 반응형 웹을 따라서 만들어보는 것 말고는 제대로 신경써서 만들어본 적이 없어서 정확히 어떤 점이 불편하게 하는지는 아직 모르겠지만, IE의 종말에 이어 safari의 종말도 기다리는 사람들이 있는 걸 보니 얼마나 어마무시한 녀석인지 두렵기도 하다.
아무튼 역시 계속 테스트해보고 디버깅해보는 게 중요하겠구나 하는 생각이 든다.
