❤️🔥 Cross Browsing
- 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미
- 핵심 point!
동일한이 아닌동등한표현에 집중하자. 크로스 브라우징은 모든 브라우저 상에서 완전히 똑같은 화면이 보이도록 만드는 것이 아니다. 애초에 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 똑같이 만드는 것은 불가능하다. 따라서 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다.
😲 우리는 이미 Cross Browsing이 되지 않아 불편함을 겪은 적이 있다!
- 무언갈 하려고 할 때마다 뜨는 경고창이 뜨는 걸 경험해 본 적이 있을 것이다.
- 이 문제는 인터넷 익스플로러(Internet Explorer)가 계속해서 브라우저 점유율 1위를 차지하게 만들었던, 1위에서 내려온 뒤에도 계속해서 높은 점유율을 차지하게 만든 원인이기도한 ActiveX 때문이다.
🤔 ActiveX ?
- MS 사에서 개발한 인터넷 익스프로러용 플러그인, 웹 브라우저와 웹 문서만으로는 이용할 수 없는 추가 기능들을 사용할 수 있게 해 주는 브라우저 외부 프로그램
- 세계 브라우저 점유율과 한국 브라우저 점유율을 비교해보면, 지금은 압도적인 점유율을 차지하고 있는 크롬이 인터넷 익스플로러의 점유율을 처음 추월한 시점이 각각 2012년도와 2016년도인 것을 볼 수 있다.
- 한국이 무려 4년이나 뒤쳐져 있는 수치이다. 한국 정보화 수준을 생각했을 떄에는 특히 이상한 현상인데, 이는 공공기관을 포함한 한국의 웹 사이트들이 ActiveX이 사용을 사용자에게 거의 강제했기 때문이다.
- ActiveX 덕분에 웹 브라우저 상에서 음악, 동영상 등의 멀티미디어 콘텐츠를 자유롭게 즐기고, 은행과 주식 등의 금융 거래도 가능해지고, 사용자의 신원을 증명할 수 있게 돼 집에서 공문서를 출력할 수 있게 되는 등 웹 브라우저의 기능을 거의 무한대로 확장할 수 있게 됐다.
- 하지만 문제점은 정말 무한대로 확장하면서 무언갈 작업하려고 하면 ActiveX를 설치하라는 문구가 뜨고, 필요한 ActiveX 하나라도 설치돼 있지 않으면 기능이 제대로 작동하지 않는 등 배보다 배꼽이 더 커지는 현상이 발생하게 되었다. 인터넷 익스플로러에서만 사용 가능했기 때문에 다른 브라우저를 사용하는 일은 거의 불가능했다. 즉, ActiveX 때문에 크로스 브라우징이 불가능한 상황이 된 것이다.
- ActiveX만 익터넷 익스플로러가 크로스 브라우징에 악영향을 줬던 요소는 아니다. 인터넷 익스플로러는 최신 스펙의 CSS와 자바스크립트를 제대로 지원하지 못했고, 이 때문에 크로스 브라우징을 위해 웹 표준을 저해하는 코드를 작성해야 했다. 다른 웹 브라우저들은 최신 문법을 지원하는데 오롯히 IE만을 위해 크로스 브라우징에 시간과 비용을 투자해야 했다. 이런 여러 이유 때문에 IE는 웹 개발자 사이에서
공공의 적이라고까지 불리게 되었다.
-
IE는 2022년 6월 15일자로 지원을 종료하게 되었고, 크로스 브라우징의 가장 큰 걸림돌이인 브라우저가 은퇴하게 된 것이다. 물론 MS 사의 엣지에서 아직 ActiveX를 사용하는 웹 사이트들을 위해 IE를 최소 2029년까지 제공할 예정이라고 밝혔지만 크로스 브라우징을 할 때, IE 때문에 머리 싸맬 일은 거의없을 것이다.
-
IE의 지원 종료로 난이도가 낮아진 크로스 브라우징은 어떻게 진행하면 되는지 알아보자!
❤️🔥 Cross Browsing | Workflow
1. 초기 기획
- 어떤 웹 사이트를 만들 것인지 결정
- 웹 사이트에서 제공하는 기능, 콘텐츠는 어떤 것으로 할지, 디자인과 같은 사항을 결정
- 사이트의 고객이 사용하는 브라우저, 접근 기기 타겟층이 주로 사용하는 브라우저와 기기를 파악해 적합한 기술을 사용해 개발할 수 있도록 기획
2. 개발
- 코드를 작성할 때는 사용하는 코드가 각 브라우저에서 지원하는지 호환성을 파악하고 사용해야 한다. MDN, Can I Use 등의 사이트에서 브라우저와 코드의 호환성을 확인할 수 있다.
- 코드를 작성하다 보면 크로스 브라우징을 하기 힘든 상황이 생길 수도 있는데, 이런 경우에는 이를 인정하고 대체 수단을 마련하는 게 좋다. 또한 개발 중인 사이트가 일부 오래된 브라우저에서는 어쩔 수 없이 제대로 기능하지 않을 수 있다는 사실을 알고 받아들여야 한다.
3. 테스트 / 발견
-
각 기능을 구현 후, 각 기능들의 테스트가 필요
안정적인 데스크톱 브라우저에서 테스트 진행
휴대폰, 태플릿 브라우저 등 다양한 기기에서 테스트 진행
초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트 진행
다양한 운영체제에서도 테스트 진행 -
직접 테스트를 진행하는 방법도 있지만, TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴을 사용하여 자동으로 테스트를 진행해 주는 도구를 이용하는 방법도 있다.
4. 수정 / 반복
- 테스트 과정에서 버그를 발견했다면 수정이 필요하다. 버그 발생 위치를 최대한 좁혀 특정하고, 버그가 발생하는 특정 브라우저에서의 해결방법을 정해야한다. 섣불리 코드를 수정했다가, 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 다른 코드를 실행하는 방식으로 수정하는 편이 좋다. 수정을 완료하면 3번 과정부터 반복한다.
