크로스 브라우징에 대해 알아보자.
🙋♀️ 크로스 브라우징이란?
Cross Browsing이란 적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것
즉, 간단히 말하면 크로스 브라우징이란 서로 다른 브라우저에서 웹 페이지가 의도한 기능을 동등하게 수행하며, 어느 한 브라우저에 최적화되어 치우치지 않도록 페이지를 제작하는 기법을 말한다.
🤷♀️ 왜 필요할까?
크게 4가지의 이유가 있음을 알아보았다.
- 브라우저마다 지원 수준이 다르기 때문에 작동되지 않는 HTML, JS가 존재하기 때문
- 브라우저마다 렌더링 엔진이 다르기 때문에 해석하지 못하는 CSS 코드가 존재하기 때문
- 브라우저마다 버그들이 존재하기 떄문
- 브라우저마다 자체적인 CSS 스타일이 있기 때문
** 렌더링엔진은 화면에 텍스트와 이미지를 그리는 소프트웨어로, Blink, Gecko, EdgeHTML, WebKit 등이 있다.
💻 크로스 브라우저 테스트를 위한 워크 플로우
충분한 테스트를 수행하여 문제가 발생하지 않도록 하는 것이 좋다.
특히 대규모 프로젝트를 작업하는 경우 정기적으로 테스트하여 새 기능이 제대로 작동하는지, 새로 추가된 코드가 이전에 작동하던 기능을 손상시키지 않는지 확인해야한다.
워크 플로우는 크게 4가지로 나눌 수 있다.
초기 계획 > 개발 > 테스트/발견 > 수정/반복
① 초기 계획
초기 계획 단계에서는 클라이언트와 여러 번의 계획 회의를 통해 웹 사이트에 대해 (어떤 콘텐츠와 기능이 있어야 하는지, 어떻게 생겼는지, 마감일 등) 정확하게 결정한다.
그리고 사이트 이용자가 어떤 브라우저, 장치 등을 주로 사용하는지 탐색해야한다.
ex) 북미 고객에게 서비스를 제공하는 경우, 북미 고객에게 가장 인기있는 데스크톱 및 모바일의 마지막 몇 가지 버전에서 완전히 작동해야한다.
② 개발
(1) 모든 브라우저 대상으로 가능한 비슷하게 모든 기능을 작동시킨다.
(2) 일부 기능이 모든 브라우저에서 동일하게 작동하지 않을 것이라는 점을 인정하고 전체 기능을 지원하지 않는 브라우저에서 다른 (허용 가능한) 솔루션을 제공한다.
(3) 귀하의 사이트가 일부 구형 브라우저에서 작동하지 않을 것이라는 점을 인정하고 계속 진행한다. 클라이언트/사용자 기반에 문제가 없는 경우 이 문제가 해결된다.
일반적으로 개발에는 위의 세 가지 접근 방식의 조합이 포함된다.
가장 중요한 것은 커밋하기 전에 테스트 하는 것이다.
③ 테스트/발견
각 구현 단계 후 새로운 기능을 테스트하여 기능이 작동하는지 확인해야한다.
(1) Firefox, Safari, Chrome 또는 IE / Edge와 같은 시스템의 몇 가지 안정적인 브라우저에서 테스트하기
(2) 키보드만으로 사이트를 사용하거나 화면 판독기를 통해 사이트를 사용하여 탐색 가능한지 확인하는 등 lo-fi 접근성 테스트를 수행하기
(3) Android 또는 iOS와 같은 모바일 플랫폼에서 테스트하기
그런 다음 테스트 브라우저 목록을 대상 대상 브라우저의 전체 목록으로 확장하고 여러 브라우저 문제를 해결하는 데 주력한다.
(1) Firefox, Chrome, Opera, IE, Edge 및 데스크톱 용 Safari (이상적으로는 Mac, Windows 및 Linux)를 포함하여 가능한 모든 최신 데스크톱 브라우저에서 최신 변경 사항 테스트
(2) 일반적인 휴대폰 및 태블릿 브라우저 (예 : iPhone / iPad의 iOS Safari, iPhone / iPad / Android의 Chrome 및 Firefox)에서 테스트
(3) 또한 초기에 정의한 다른 브라우저에서 테스트
④ 수정 / 반복
버그를 발견한 후에는 수정해야한다.
가장 먼저 할 일은 버그가 발생하는 범위를 최대한 좁히는 것이다.
버그가 일어나는 환경에 대해 가능한 많은 정보를 얻자.
ex) 플랫폼, 장치, 브라우저 버전 등 유사한 구성 (예 : 다른 데스크톱 플랫폼에서 동일한 브라우저 버전 또는 동일한 플랫폼에서 동일한 브라우저의 몇 가지 다른 버전) 등
버그의 원인을 발견했다면 문제를 일으키는 특정 브라우저에서 해결 방법을 결정해야하지만, 다른 브라우저에서 기능이 손상 될 수 있으므로 코드를 완전히 변경할 순 없다.
출처
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction
