들어가며
제가 프론트앤드 개발자로 취업을 준비하면서 가장 기본적으로 많이 받았던 질문 중 하나가 ‘크로스 브라우징에 대해 알고 있는가?‘였습니다.
‘웹 접근성’과 같이 ‘크로스 브라우징’은 매우 중요한 기술 중 하나인데요,
경험상 크로스 브라우징을 얼마나 ‘이해’하고 있는가에 따라 후에 이 기술을 얼마나 ‘잘’ 할 수 있는지를 결정짓게 되더라고요.
그래서 오늘은, ‘크로스 브라우징’에 대해 알아보도록 하겠습니다.
Let’s go!
크로스 브라우징(Cross Browsing)이란?
한국소프트웨어진흥원 공개 SW 지원센터에서 발간한 ‘Cross Browsing 가이드’라는 문서에 따르면 크로스 브라우징에 대해 이렇게 설명합니다.
* Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹 브라우저 뿐만 아니라 모바일, 임베디드 기기, 홈 네트 워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.
‘무슨 말이지?‘라고 생각하실 수도 있습니다. 저도 처음에는 조금 어렵게 느껴졌거든요. 크로스 브라우징은 쉽게 말해 *웹 페이지의 상호 호환성을 의미합니다.
결국 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것을 의미하는 것이죠.
하지만 여기서 중요한 것은 ‘크로스 브라우징’이 모든 브라우저에서 100% 똑같이 보이도록 만드는 동일성이 아닌 동등성(등가성)을 의미한다는 것입니다.
‘Cross Browsing 가이드’라는 문서에 이런 내용도 포함됩니다.
* 웹페이지의 상호 호환성(Cross Browsing) 구축에 대해 이야기하면 기본적인 오해가 있다. 그것은 바로 이것이 모든 웹브라우저에서 100% 똑같이 보이도록 만드는 것이라는 생각이다. 작게는 1990년대 후반 Netscape사와 Microsoft사의 Browser War 기간 동안 일어난 브라우저의 비호환성을 억지로 끼워 맞추려는 기법 정도로 치부되는 것이다…(중략)
어느 한쪽에 최적화되지 않고, 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 동등한 수준의 정보, 기능 접근에 초점을 맞춥니다.
왜 동일하게 만드는 것이 아닌가?
상호 호환성, 동등성, 등가성 모두 단어 자체의 의미는 알겠지만 그래서 ‘왜?’ 크로스 브라우징은 동일하게 만드는 것이 아닌가에 대한 의문은 풀리지 않았습니다.
제가 또 나름 집요한 구석이 있거든요!
그래서 이곳저곳 검색을 해서 찾아보았는데,
이유는 OS가 다르고, 브라우저마다 ‘렌더링 엔진’이 다르기 때문에.
결국 동일하게 ‘안’만드는 것이 아닌, 어쩌면 동일하게 만드는 것이 애초에 불가능한 일이기 때문이었습니다.
* 렌더링 엔진: 요청한 콘텐츠를 표시합니다. HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시합니다.
그럼 어디까지 맞춰야 해요?
정해진 것은 없습니다. 고객이 서비스하려는 대상에 따라 달라져야 합니다.
하지만 대부분 브라우저 점유율에 따라 크로스 브라우징이 결정되는 경우도 많습니다.
많이 사용되는 브라우저가 우선적일 수밖에 없으니까요.
이럴 때 유용한 사이트를 공유해 드리겠습니다.
- 스탯 카운터(https://gs.statcounter.com/)
해당 사이트는 1999년에 시작된 웹 트래픽 분석 웹 사이트입니다. 웹 사용 점유율을 계산하는 데 사용되는 것으로 유명합니다.
2020년 10월부터 2021년 10월까지 시장조사 결과, 여전히 Chrome이 압도적이네요!
어떤 부분을 테스트해야 하나요?
호환성 테스트에는 모든 것이 포함될 수 있지만, 모든 부분을 테스트할 수 없을 수 있습니다.
해서 많은 필수 사항 중 아래와 같이 기능을 분류할 수 있습니다.
1. 기본 기능: 링크, 대화 상자, 메뉴 등
- 모든 대화 상자, 메뉴가 잘 작동하는가?
- 양식 필드의 유효성 검사가 올바르게 작동하는가? 등
2. 그래픽 사용자 인터페이스: 응용 프로그램의 모양과 느낌
- 폰트, 이미지, 레이아웃 등이 디자인대로 잘 나오는가?
3. 응답: 애플리케이션이 사용자 작업에 얼마나 잘 반응하는가
4. 반응형: 다양한 화면 크기와 방향에 맞는지 확인
어떻게 맞춰야 해요?
- 모질라 MDN (https://developer.mozilla.org/ko/)
해당 사이트는 기능적인 부분을 확인하고, 사용하는 데에 가장 많이 사용하는 사이트입니다.
기능을 검색하고, 맨 하단으로 내리면 ‘브라우저 호환성’ 부분에서 어디까지 사용할 수 있는지, 크로스 브라우징 체크가 가능합니다.
- Can I Use… (https://caniuse.com/)
제가 크로스 브라우징을 체크할 때 개인적으로 MDN보다 더 많이 사용하는 사이트인데요,
보다 편하게 사용이 가능합니다.
확인하고자 하는 기능을 검색란에 입력해 주면 크로스 브라우징 체크가 가능합니다.
- Modernizr (https://modernizr.com/)
40개 이상의 신규 요소와 속성들을 테스트할 수 있으며,
웹문서에 Modernizr 스크립트를 포함하면 현재 브라우저가 CSS3뿐만 아니라 HTML5의 기능(audio, video, localStorage, 새로 추가된 input 요소의 types과 attributes)에 대해서도 지원 여부를 점검, 확인할 수 있습니다.
사용해 본 적은 아직 없지만, 매우 강력한 크로스 브라우징 라이브러리라고 소문나있습니다.
많은 기능들이 있지만, 그만큼 적용하기 까다로워 보여서 아직 사용을 해보진 않았는데요,
기능을 잘 활용한다면 편리하게 사용이 가능해 보입니다.
해당 라이브러리는 저도 호기심이 생겨서, 다음 포스팅에서 다뤄보면 어떨까 해요!
마치며
간단하게 알고 있는 내용도, 이렇게 자세히 풀어보니 몰랐던 부분이 많았습니다.
무엇을 아느냐, 얼마나 아느냐도 중요하지만 얼마나 ‘잘’아는지가 중요하다고 생각해요.
개발자에게 기본이 될 수 있는 ‘크로스 브라우징’
여러분들도 조금 더 가까워질 수 있는 계기가 되었으면 좋겠습니다.
긴 글 읽어주셔서 감사합니다!