본문 바로가기
부트캠프교육중/웹

크로스 브라우징

by 뭉지야 2023. 3. 3.
728x90

# 크로스 브라우징(Cross Browsing)
-웹사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할수 있도록 만드는 작업.
동일한이 아닌 동등한 !!!
-크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다.
-인터넷 익스플로러의 퇴출로 크로스 브라우징의 난이도가 한결 낮아졌다.

아아.. 그는 떠나셧습니다......

#크로스 브라우징 워크 플로우
1. 초기 기획
-초기기획단계에서 어떤 웹사이트를 만들것인지 정확하게 결정해야한다. (어떤 콘텐츠와 기능, 디자인 등..)
-이사이트의 고객이 누구일지 (사용하는 브라우저는 무엇일지, 기기는 무엇일지)
-고객에게 맞는 기술을 사용해서 개발할수있도록 기획해야한다.


2.개발
-코드의 호환성 확인.
-코드를 작성하다보면 크로스 브라우징을 힘든 상황을 만나게 될수도 있는데, 이런 경우에는 이를 인정하고 대체 수단을 마련해야한다.
또한, 개발중인 웹 사이트가 일부 오래된 브라우저에서는 어쩔수없이 제대로 기능하지 않을수도 있다는 사실을 알고 받아들여야 한다.

3.테스트/발견
-각 기능을 구현한 후에는 그 기능에 대한 테스트가 필요하다.
*안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트를 진행합니다.
*휴대폰 및 태플릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트를 진행합니다.
*그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행합니다.
*window, linux, mac 등 다양한 운영 체제에서도 테스트를 진행합니다.
-자동으로 테스트를 진행해주는 도구도 있다. 
TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴



4.수정/반복
-테스트 단계에서 버그가 발견되었다면 수정이 필요하다. 
버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결방법을 정해야 한다.
섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할수있으므로, 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다.  수정이 완료되면 3번과정부터 반복한다
-웹 표준을 오히려 저해하는 코드를 작성해야했던 인터넷 익스플로러가 지원을 종료하게 되었기 때문에 크로스 브라우징에 힘써야하는 상황이 많이 줄어들었다.
따라서 당장은 브라우저에 따라 제대로 표시되지 않는 화면, 작동하지 않는 기능이 있을수 있음을 인지하고 개선하려는 태도만 가져가셔도 충분하며, 웹 표준에 맞는 코드를 작성하는 것이 얼마나 중요한지 이해하면 된다.

728x90

'부트캠프교육중 > ' 카테고리의 다른 글

웹 접근성  (0) 2023.03.05
SEO  (0) 2023.03.04
자주 틀리는 마크업  (0) 2023.03.03
시맨틱 HTML  (0) 2023.03.02
웹 콘텐츠 접근성 지침  (1) 2023.03.01