이번 포스팅은 웹 표준과 크로스 브라우징에 대해서 정리하겠습니다.
웹 표준
우웹 표준은 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 의미하며 사용자가 어떤 운영체제나 브라우저를 사용해도 동일한 웹페이지를 보여주고 동작할 수 있는 것을 목표로 합니다.
웹 표준의 장점
- 유지보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
크로스 브라우징이란?
크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류와 상관 없이 등등한 화면과 기능을 제공할 수 있도록 하는 작업을 의미합니다. 여기서 동등한 작업은 같은 모양과 기능을 제공한다는 의미이지 완전히 같다는 것은 아닙니다.
웹과 사용자와의 소통이 복잡해지고 사용되는 기술들이 고도화되었지만 브라우저마다 지원하는 기능이 달라 개발자들은 브라우저 환경마다 별도로 개발을 진행해야 했습니다.
수 많은 호환성 문제를 일으키던 인터넷 익스플로러가 서비스를 종료하면서 크로스 브라우징 난이도가 낮아졌다고는 개발과정에서 다른 브라우저의 호환성을 고려해야합니다.
크로스 브라우징 워크 플로우
1. 초기 기획
초기 기획 단계에서 기능과 콘텐츠, 디자인 등을 결정하고 고객층에 대한 검토가 필요합니다. 고객이 사용하는 브라우저는 무엇일지, 기기는 무엇일지 고민이 필요합니다. 타겟 고객층이 주로 사용하게 될 브라우저와 기기를 파악했다면, 여기에 맞는 기술을 사용해서 개발할 수 있도록 기획해야 합니다.
2. 개발
코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 합니다. MDN, Can I Use 등의 사이트에서 코드의 호환성을 확인할 수 있습니다. 아래 예시는 MDN에서 제공하는 브라우저 호환성 정보입니다. 인터넷 익스플로러에서의 호환성이 처참한 것을 확인할 수 있습니다. 만약 주요 고객층의 인터넷 익스플로러 사용 비율이 높다면 해당 코드는 사용하지 않는 것이 좋습니다.
3. 테스트 / 발견
각 기능을 구현한 후에는 그 기능에 대한 테스트가 필요합니다.
안정적인 데스크톱 브라우저(롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트를 진행합니다.
휴대폰 및 태플릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트를 진행합니다.
그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행합니다.
Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행합니다.
직접 테스트를 수행할 수도 있지만, 자동으로 테스트를 진행해주는 도구를 이용하는 것도 방법입니다. TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴이 있습니다.
4. 수정 / 반복
테스트 단계에서 버그가 발견되었다면 수정이 필요합니다. 버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 합니다. 섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋습니다. 수정이 완료되면 3번 과정부터 반복합니다.
사실 웹 페이지를 개발할 때 웹 표준만 잘 지켜도 크로스 브라우징을 어느 정도 실현할 수 있습니다. 웹 표준 자체가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법이기 때문입니다.
