크로스 브라우징이란?

웹에 대한 공부를 하다가 크로스 브라우징에 대한 정리가 필요했다.

웹 브라우저에 대한 (간단한) 이해

브라우저는 그래픽 사용자 인터페이스(GUI)로 사용자들이 웹을 사용할 수 있도록 도와주는 애플리케이션이다.
여기서 말하는 그래픽 사용자 인터페이스란, 아이콘이나 그래픽으로 기능을 이용할 수 있도록 도와주는 것이다.
그에 반대되는 것은 커맨드 라인 인터페이스(CLI )가 있겠다.

왼쪽이 GUI, 오른쪽이 CLI

웹은 서버에서 받아온 HTML, CSS문서를 기반으로 브라우저에 내장된 렌더링 엔진이 이를 읽어서 화면을 그려주게 된다.
오늘날 크롬, 엣지, 파이어폭스, 사파리... 등 수 많은 브라우저가 서비스 되고 있다.

이 브라우저가 가지고 있는 엔진이 모두 다르기에, 같은 HTML, CSS 문서를 읽더라도 다른 방식으로 보여주게 된다.

내가 만든 웹이 브라우저마다 다르게 보여지거나, 작동을 안할 수 있다니..? 끔찍하지 않은가?
여기서 필요한 개념이 크로스 브라우징이다.

크로스 브라우징

구글링을 통해 알아본 크로스 브라우징에 대한 정의는 다음과 같다.

- 서로 다른 브라우저에서 웹 사이트가 정상적으로 작동하고, 중요한 스타일이나 기능의 차이를 최소화하는 작업
- 웹 사이트가 서로 다른 브라우저에서 작동하고 브라우저 기능이 없거나 부족할 때 제한된 기능을 최대한 유지하도록 하는 것.
- 중요한 것은 ‘크로스 브라우징’이 모든 브라우저에서 100% 똑같이 보이도록 만드는 동일성이 아닌 동등성(등가성)을 의미한다.

mdn

여기서 말하는 최소화는 어떤 뜻일까?

웹 페이지가 모든 곳에서 결과물이 똑같이 그려지는 것은 사실상 불가능에 가깝다.
사용자들이 이용할 수 있는 선택의 폭이 넓어지고 있기 때문이다. (네이버, 삼성에서도 브라우저를 만드니까 말이다)

1. 브라우저의 버전이나 종류
2. 기기의 종류
3. OS의 종류

위 같은 이유로 웹 페이지를 각각의 브라우저, 기기, OS 상황에 맞추는 것은 어려운 일이다.
그래서 완전히 똑같은 페이지를 그리는 것 보다 동일한 경험을 주는 것에 초점을 맞춰야한다.

최신 브라우저에서는 애니메이션과 모션을 통해 보여줄 수 있고
구형 브라우저에서는 동일한 정보를 나타내기위해 비교적 리소스 부담이 적은 평면 그래픽을 보여주는 방식처럼 말이다.

그래서 유저가 소외감을 느끼지 않도록 (어느 한 요소에 치우치지 않고) 브라우저간에 공통으로 쓰이는 요소를 사용해 페이지를 만들어야한다.

요약

지원하는 것과 모양이 같다는 것은 다른 의미

• 최신 브라우저 : 기본 기능 지원 + 뛰어난 외관
• 구형 브라우저 : 기본 기능 지원

 

그래서 어떻게하나?

크로스 브라우징을 적용하기 위해서는 다음과 같은 방법이 있다.

1. can i use 사이트 이용

CSS, HTML 등 다양한 속성들에서 브라우저의 호환성과 전세계 사람들이 그 기능을 사용할 수 있는지에 대해서 알려주는 사이트다.
특정 기능이나 속성을 사용하기 전에 해당 사이트에서 검색해보는 것이 좋다.

아래는 flex 속성에 대한 지원 여부를 검색한 결과다. 
초록색은 지원한다는 뜻이고, 빨간색은 지원하지 않는다 정도로 알아두자.

2. 타겟 사이트 정하기

작업 전 처음부터 어떤 브라우저의 몇버전까지 지원할 것인지 계획을 세워두는 것도 좋은 방법이다.
추후 다른 브라우저에 대한 요소를 계속 끼워넣다보면 번거로운 점이 한 두가지가 아니기 때문이다.

3. 직접 테스트 하기

테스트 기준은 다음과 같다. 

1. 기본 기능

• 프로젝트 주요 기능의 작동여부
• 양식 필드의 유효성 검사가 올바르게 작동여부

2. 그래픽 사용자 인터페이스

• 응용 프로그램의 모양과 느낌
• 폰트, 이미지, 레이아웃 등이 디자인 의도 적용됐는지 확인

3. 응답

• 애플리케이션이 사용자 작업에 얼마나 잘 반응하는지

4. 반응형

• 다양한 화면 크기와 방향에 맞는지 확인

---

 

덧붙여서 

아래 표는 브라우저에서 사용되는 렌더링 엔진을 정리한 표다.

파이어폭스	게코(Gecko)
사파리	웹킷(Webkit)
크롬	블링크(Blink)
오페라	블링크(Blink)
인터넷 익스플로러 (윈도우용)	트라이던트(Trident)
인터넷 익스플로러 (맥용)	태즈먼(Tasman)

여기서 크롬에서 돌아가는 코드는 오페라에서도 제대로 돌아갈 수 있지 않을까? 라는 추론을 내릴 수 있겠다. (렌더링 엔진이 같으니까)
여기에 대해서는 더 알아보긴 해야겠다.

벤더 프리픽스

CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용해야한다.

벤더 프리픽스는 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.
브라우저 버전이 올라감에 따라, 구형 브라우저를 지원하기 위해서는 아래와 같은 벤더 프리픽스를 적용해야한다.

BrowserVendor Prefix

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

.page-wrap {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

그런데 수 많은 브라우저를 위한 벤더 프리픽스는 코드의 양을 늘게하고, 거의 매달 업데이트가 이뤄지고 있어서 유지보수가 까다롭다.

사용하지 않아도 되는 벤더 프리픽스를 사용하는 것은 성능에 영향을 주기 때문에 prefix free 라이브러리를 사용하는 것을 권장한다.