왜 크로스 브라우징(Cross Browsing)을 고려해야해요?

목차

· 크로스 브라우징(Cross Browsing) 이란?

· 브라우저 간 상호 호환성을 맞추려면, 브라우저간 100%의 동일성을 맞춰야하지 않나요?

· 동등성과 등가성, 어디까지 맞춰야할까?

· 크로스 브라우징에서 어떤 부분을 테스트해야할까?

· 어떻게 맞출 수 있을까?

· 어떻게 사용을 해요?

· 레퍼런스

---

크로스 브라우징(Cross Browsing)이란?

크로스 브라우징이란, 한국 소프트웨어 진흥원 공개 SW 지원 센터에서 발간한 `Cross Browsing 가이드` 라는 문서에 따르면 크로스 브라우징에 대해 이렇게 설명을 한다. 

Cross Browsing 이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 데스크톱 웹 브라우저뿐만 아니라 모바일, 임베디드 기기, 홈 네트워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애인, 노약자, 어린이 등 다양한 사용자가 존재하기 때문이다.

가이드 문서에 요약하자면 크로스 브라우징은 `브라우저 간 상호 호환성` 을 의미하는 것이다. 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것을 의미한다. 하지만 여기서 중요한 것은 크로스 브라우징이 모든 브라우저에서 100% 똑같이 보이도록 만드는 `동일성`이 아닌 `동등성` 및 `등가성`을  의미하는 것이다.

 

그리고 더 자세히 정리를 하자면, 크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로 비슷하게 만들어 어떤 환경에서도 이상없이 작동되게 하는 웹 페이지를 제작하는 방법론이다.

브라우저 간 상호 호환성을 맞추려면, 브라우저간 100%의 동일성을 맞춰야하지 않나요?

`Cross Browsing 가이드` 문서에 따르면 이러한 내용도 담겨져 있다.

웹페이지의 상호 호환성(Cross Browsing) 구축에 대해 이야기하면 기본적인 오해가 있다. 그것은 바로 이것이 모든 웹브라우저에서 100% 똑같이 보이도록 만드는 것이라는 생각이다. 작게는 1990년대 후반 Netscape사와 Microsoft사의 Browser War 기간 동안 일어난 브라우저의 비호환성을 억지로 끼워 맞추려는 기법 정도로 치부되는 것이다…(중략)

어느 한쪽에 치우쳐져있지 않고, 최적화 되어져 있지 않은 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 동등한 수준의 정보, 기능 접근에 초점을 맞춘다. 그렇다면 왜 100% 동일성이 아닌 동등성과 등가성을 맞추는 걸까?

 

그 이유는 브라우저 별 렌더링 엔진(HTML과 CSS를 파싱하여 요청한 콘텐츠를 표시해주는 브라우저의 구조 요소 중 하나)이 다르기 때문에, 100%의 동일성을 맞추지 못하는 것이기 때문이다. 그래서 동일하게 만들지 않는 것이 아닌, 동일하게 만드는 것이 애초에 불가능한 일이기 때문이다.

동등성과 등가성, 어디까지 맞춰야할까?

이에 따른 정해진 것은 없다. 클라이언트(고객)이 서비스하려는 대상에 따라 달라지며, 보통은 브라우저 점유율에 따라 크로스 브라우징의 구축을 시도하기도 한다. 크롬의 등장으로 아직까지도 크롬 브라우저가 1등을 달리고 있기 때문에, 보통은 크롬에 맞춰 크로스 브라우징을 하곤한다. 얼마 전, Safari 브라우저에서 크로스 브라우징 경험을 겪었기 때문에 크롬과 Safari 를 동시에 맞춰 구축을 진행하기도 한다.

크로스 브라우징에서 어떤 부분을 테스트해야할까?

제일 궁금했던 테스트에 대한 부분이다, 호환성 테스트에는 웹 페이지를 구성하는 모든 것이 포함될 수 있지만, 모든 부분을 테스트할 수 없을 것이다. 그렇기 때문에 많은 필수 사항 중 아래와 같이 기능을 분류하여 테스트를 나눠 진행할 수 있다.

 

1. 기본 기능 (링크, 대화 상자, 메뉴 등)

· 모든 대화 상자 및 메뉴가 잘 작동하는가?

· 양식 필드의 유효성 검사가 올바르게 작동하는가?

· 등등..

 

2. GUI (응용 프로그램의 모양과 느낌)

· 폰트, 이미지, 레이아웃 등이 디자인대로 잘 나오는가?

 

3. 응답 (어플리케이션이 사용자 작업에 얼마나 잘 반응하는가?)

· 사용자와 웹 페이지의 상호작용에 의해 웹 페이지가 잘 응답하는가?

 

4. 반응형 (다양한 화면 크기와 방향에 맞는지 확인)

· 각 기기별 해상도에 따른 지원을 잘 하고 있는가?

어떻게 맞출 수 있을까?

· 모질라 MDN

직접 테스트 서버를 통해 브라우저 별 테스트를 해보는 방법도 있겠지만, 모질라 MDN 사이트를 통해 기능적인 부분에 있어 브라우저 호환성 부분까지 확인을 할 수가 있다. 

· Can I Use..

또, Can I Use 라는 사이트에서 원하고자 하는 기능을 검색란에 입력해주면 크로스 브라우징 체크가 편리하게 가능하다.

· Modernizr

그 밖에 Modernizr 이라는 라이브러리도 있다. Modernizr는 40개 이상의 신규 요소와 속성들을 테스트할 수 있으며, 웹 문서에 Modernizr 스크립트를 포함하면 현재 브라우저가 CSS3 뿐만 아니라, HTML5의 기능(Audio, Video, LocalStorage, 새로 추가된 Input 요소의 Types와 Attributes)에 대해서도 지원 여부를 점검 및 확인할 수 있다.

어떻게 사용을 해요?

· CSS 초기화 작업

웹 브라우저마다 default 값으로 스타일이 적용되어 있기 때문에, 우리는 브라우저마다 기본 default의 값이 아닌, 동일한 CSS 스타일을 보여주기 위해 default 값을 초기화 해줘야한다.

* {margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	font-size: 100%; 
	font: inherit; 
	vertical-align: baseline; 
}

/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block; 
} 

html {font-size:10px}

body { line-height: 1; font-family: 'Noto Sans KR', sans-serif; font-size : 1.4rem } 
body, input, button,select, textarea, th, td {color: #222;}

a {text-decoration: none;  color: inherit;}
ol, ul { list-style: none; } 
blockquote, q { quotes: none; } 

blockquote:before, blockquote:after,
q:before, q:after { 
	content: ''; 
    content: none; 
} 

table { border-collapse: collapse; border-spacing: 0; }

· 만약 해당 브라우저가 작성해놓은 CSS 기능을 지원하지 않는다면, 벤더 프리픽스를 사용한다.

벤더 프리픽스는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사를 의미한다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용한다.

 

CSS에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로 임시적으로 접두어를 사용하는 것이다. 벤더 프리픽스를 통해 표준으로 만들어지기 전에 일어날 문제들을 사전에 막을 수 있다.

IE or Edge → -ms-
Chrome → -moz-
Firefox → -webkit-
Opera → -o-
iOS Safari → -webkit-
Android Browser → -webkit-
Chrome for Android → -webkit-

header {
	height: 90px;
    width: 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

브라우저 접두어를 앞쪽에 쓰고, 맨 마지막에 표준 속성을 쓴다. 접두어 버전을 사용하는 브라우저는 그것을 이용 할 것이고, 이해하지 못하는 브라우저는 그 속성을 무시한다. 표준을 지원하는 브라우저는 맨 마지막 있는 속성을 실행한다.

---

레퍼런스

Cross Browsing

크로스 브라우징(Cross Browsing)이란?

[개념] 웹 브라우저와 웹 서버 / 크로스 브라우징과 벤더 프리픽스