이 게시물은 2016년 8월 8일 수정판입니다.

이야기에 앞서

이 글에서는, 다양한 웹 브라우저들의 특징을 살펴보고, 호환성 높은 웹 사이트를 개발하는데 도움을 드리고자 합니다. 여기서 소개하는 웹 브라우저는 전 세계 인터넷 사용자의 대부분이 사용하는 메이저급 제품들이며, 사용 빈도가 낮은 제품과 모바일 플랫폼용 웹 브라우저는 설명에서 제외하였습니다. 글의 중간중간 크로스 플랫폼에 관한 호환성 이야기가 거론 될 수는 있지만, 이 글의 요지는 웹 브라우저 자체의 특성을 이해하고, 이것이 차후에 이야기 될 호환성과 어떤 연결고리를 갖게 되는지에 대한 이해에 있습니다.

아울러, 위키백과에서 제공하는 정보들은 그 이야기가 다소 딱딱하고 많은 정보의 전달에 촛점이 맞춰져 있어, 실질적으로 몸에 와닿을 수 있는 이야기로 풀어 전달하는 것 또한 이 글의 주요 포인트입니다. 이 글을 통해 왜 여러분이 그토록 많은 웹 브라우저를 일일이 다운로드 받아 귀찮은 확인작업을 해야하는지에 대해 이해하는 시간을 가져보고자 합니다.

테스트의 목적

사람의 취향이 모두 다르듯이, 웹 브라우저의 종류도 많고 사용하는 제품도 각양각색입니다. 내가 만든 웹 문서가 최대한 다양한 웹 브라우저에서 동일한 모양새와 결과를 나타내도록 하는 것이 웹 브라우저 테스트의 목적입니다.

일상 생활에서 흔히 볼 수 있는 검증 방법으로, 무작위 검사가 있습니다. 개체 수가 많은 생산품을 일일이 확인할 수 없으므로, 생상 된 제품 중 몇 개만을 무작위로 골라 검사하는 방식이죠. 모니터 공장에서 불특정 모니터를 골라 파손 테스트를 해보는 것이 그러한 예입니다.

우리도 세상에 출시 된 모든 웹 브라우저에서 테스트를 해볼 수 없기 때문에, 비교적 사용자 층이 두꺼운 제품을 골라 검사하게 됩니다. 적게 한 두개에서 시작하여 많게는 4-5개까지 테스트하며, 테스트에서 가장 비중있게 공략할 부분으로, 사용자도구(User Agent)라는 하는 웹 브라우저 초기값 스타일시트의 표현을 일률화 시키는데 있습니다. 이 부분은 호환성 문제를 다루는 글에서 다시 거론하기로 합니다.

테스트 브라우저에 대해 알아보기

이제부터 거론하는 웹 브라우저들은 위에 설명한 목적을 위해 일반적으로 선택하는 메이져급 제품입니다. 반드시 모든 웹 브라우저를 내려받을 필요는 없으며 그 선택은 여러분의 몫입니다. 글을 읽어가며 테스트의 필요성이 느껴진다면 다운로드 하기 바랍니다.

모질라 파이어폭스

인터넷 익스플로러보다 더 먼저 소개 할 웹 브라우저는 모질라 재단(Mozilla Foundation)에서 개발 및 유지보수를 맡고 있는 크로스-플랫폼 웹 브라우저 Mozzila Firefox입니다. 지역에 따라서는 인터넷 익스플로러보다도 사용자 층이 두터우며, 비영리, 자유 소프트웨어를 추구하기 때문에 비교적 높은 인지도를 가지고 있습니다.

파이어폭스를 테스트 브라우저로 처음에 소개하는 가장 큰 이유는, 대부분의 웹 브라우저들이 파이어폭스에서 사용하는 User Agent와 호환된다는 점입니다. User Agent는 HTML, CSS를 비롯하여 웹 브라우저의 다양한 기능을 표현하는 역할을 하는데, 웹 브라우저마다 중구난방으로 표현하는 것이 아니라 어느정도 파이어폭스와 비슷한 표현을 한다는 뜻으로 쉽게 이해할 수 있습니다.

여러 운영체제에서의 안정감 있는 퍼포먼스

아무튼, 파이어폭스는 여러 운영체제에서 제대로 작동하기 위한 크로스-플랫폼쪽에 상당한 기술을 보유했고, 실제로 윈도우즈는 물론 Mac OS에서 조차 자사 제품에 견줄만한 뛰어난 퍼포먼스와 일관성 있는 동작을 보여줍니다. 이것은 상당히 중요한 부분인데, 평소 집에서 PC로 작업하던 사람이 외출 나갈 때는 맥북으로 작업하는 경우도 있습니다. 집에서는 인터넷 익스플로러로 테스트하고, 외부에서는 맥용 사파리로 테스트하는 등의 일관적이지 못한 작업환경에서 오는 호환성 문제를 파이어폭스가 쉽게 극복시켜 준다는 뜻입니다.

폭 넓은 확장성과 개발자

파이어폭스의 또 하나의 장점이라면, 확장성입니다. 아주 다양한 플러그-인을 보유하고 활용하는 것은 파이어폭스가 주력으로 내세우는 개성이기도 합니다. 현재 보고 있는 웹 사이트에 사용된 이미지를 한 눈에 볼 수 있게 한다던가, 일부 코드를 활성, 비활성하여 변화를 실시간으로 관찰한다던지 하는 위젯 따위를 파이어폭스의 부가 기능에서 가장 빨리 찾아볼 수 있습니다. 특히, Web Developer나 Fire Bug 같은 우수한 플러그-인 하나 때문에 파이어폭스를 선택할 정도였으니까요. 물론 지금은 이런 플러그-인들을 다른 여러 브라우저에서도 쉽게 만나볼 수 있게 되긴 했습니다.

적당한 속도의 표준 지향

파이어폭스가 W3C에서 권장하는 테스트 브라우저라는 이야기를 들은바가 있는데, 사실인지 아닌지는 모르겠지만 한 가지 확실한 것은, W3C에서 재정하는 웹 표준을 아주 적당한 속도로 따라간다는 점입니다. 너무 빠르지도, 너무 느리지도 않게 W3C의 템포에 맞춰 나갑니다.

사용 빈도가 높은 규칙들, 예를들어 CSS3의 background, animation, transform과 같은 속성 표현에 대해 Vendor Prefix(-mozilla- 따위의) 딱지를 비교적 빨리 떼어버릴 수 있어 테스트 코드 작성시의 번거로움을 줄일 수 있습니다.

인터넷 익스플로러

파이어폭스와 함께 웹 브라우저로서의 정통성에 대한 가장 긴 역사를 가졌지만, 운영체제의 시장 독점에서 발생한 나태함으로 말미암아 가장 오랜 시간동안 개발자로부터 원성을 듣기도 하는 애증의 브라우저입니다. IE 버전 4부터 6은 CSS2의 기본적인 표현에서부터 문제가 있고, 버전 7부터 많은 버그들이 고쳐져 11에 이르러서야 모던 브라우저 계열에 합류했다는 평을 받고 있습니다.

본래 IE에서 사용하는 랜더링 엔진인 Trident는 꽤 훌륭한 오픈소스 엔진임에도 불구하고 마이크로소프트사가 기능 개선 없이 오랫동안 방치하여 사용한 것이 화근이 되었습니다. 하지만 Clean Type의 텍스트 랜더링이나 자바스크립트 처리면에서는 오히려 Google Chrome이나 Safari를 능가하기도 합니다.

우리나라 같은 경우는, 운영체제의 불법 복제 사용 빈도가 높아 업데이트를 등한시 하게되고, Active X를 많이 사용한 쇼핑, 금융, PC방 등의 레거시 인프라가 신 버전 웹 브라우저의 사용을 막는 장애물이 되고 있어, 아직까지도 구버전 IE에 대한 호환성 부담을 감당해야 하는 실정입니다.

IE는 크로스-플랫폼에 대한 지원을 오래 전에 중단했기 때문에 윈도우즈에서만 테스트 할 수 있으며, 버전 10의 개발자 도구(키보드의 F12)를 통해 제한적으로나마 구 버전 랜더링 엔진을 에뮬레이팅 할 수 있습니다. 다만, 버전 11부터는 이 에뮬레이터 자체도 개선이 너무 많이 되어 오히려 테스트 결과에 대한 신뢰도가 더 떨어지게 되었습니다. 최선의 방법은 버전 10을 사용하는 것입니다.

IE는 특정 결과를 도출해 내는것에 대해 깊은 성찰 없이, 표현해 내는데만 급급한 문제가 해결되지 않고 있습니다. 다른 웹 브라우저들이 W3C의 표준안을 “어떻게 잘 표현하느냐”를 생각할 때, IE는 “어떻게든 표현만 하자”라는 느낌을 떨칠 수 없습니다. 시장 점유율이 가장 높은 웹 브라우저이면서도 가장 멍청한 웹 브라우저라는 꼬리표를 뗄 수 없는 것이 바로 이런 스마트하지 못한 부분에서 비롯됩니다.

오페라

오페라 역시 옛날의 모질라 프로젝트와 마찬가지로, 통신회사의 일부 부서였다가 Opera Software라는 이름의 독립된 회사로 분리되어 오늘날에 이르고 있습니다. 웹 표준에 대한 기술 도입 속도는 파이어폭스와 비슷하며, 화면 랜더링, 글꼴 처리 등 모든 부분에서 훌륭한 퍼포먼스를 보여줍니다.

오페라는 크로스-플랫폼 웹 브라우저이면서, PDA, 닌텐도, 팜과 같은 휴대용 기기들을 가장 많이 지원합니다. 오페라는 Presto라고 하여 라이선스가 필요한 상업용 랜더링 엔진을 사용했습니다. 그 때문인지 지난 행보를 살펴보면 웹 브라우저 자체도 돈을 지불해야 사용할 수 있었던 때가 상당히 많습니다. 사용자층이 얇아진 이유도 이것과 관련이 없지는 않을 수 있습니다.

페이지 로딩은 애플의 Safari와 필적할 만큼 뛰어나고, 내부적인 터보 알고리즘 덕분에 자바스크립트 처리까지 매우 탁월합니다. 랜더링 엔진이 웹키트 기반으로 변경되었고, 이후에는 구글이 독자적으로 개발한 블링크(Blink) 엔진을 탑재하면서 구글과 그 행보를 같이하게 될 것으로 보입니다.

사파리

애플에서 개발한 사파리는 Mac OS에서 사용할 수 있는 가장 보편적인 웹 브라우저입니다. 웹 표준에 대해 구글과 함께 가장 빠른 도입을 보이지만, 반대로 내부 테스트 기간이 길어 Vendor Prefix가 가장 오래 사용되기도 합니다. 이것은 양날의 칼과 같기 때문에 어떤 것이 옳고 그르다라고 쉽게 판단하기 힘듭니다.

애플이 다양한 전자기기를 생산하는 만큼, 사파리의 보급율도 높아졌지만, 주로 개발이 진행되는 데스크탑 웹 브라우저만 볼 때는 테스트용 브라우저로서 아쉬운 점이 있습니다. PC용 사파리는 옛날 Mac OS용 인터넷 익스플로러를 연상시키는 답답한 퍼포먼스를 보여주기 때문에, 크로스-플랫폼 지향적인 브라우저라고 말하기는 조금 애매한 경향이 있습니다.

사파리 브라우저는 Mac OS를 사용하는 사람들을 위한 호환성에만 목적을 두고 해당 운영체제 안에서 테스트 해 보는 것이 가장 좋은 방법입니다. 만일 Mac OS를 가지고 있지 않다면 PC용 사파리를 별도로 사용하기 보다는, 구글 크롬이나 오페라에서 테스트 하는 것이 낫습니다.

크롬

공개 수집형 로봇으로 편파적이지 않은 검색 서비스를 제공하여 각광을 받다가, 다양한 웹 비즈니스 솔루션과 폭넓은 개발자 지원에 힘입어 급성장을 일궈낸 구글(Google Corpration)의 크로스-플랫폼 웹 브라우저 크롬. 마이크로소프트의 인터넷익스플로러나 애플의 사파리가 운영체제에 번들로 제공되는 점을 제외한다면, 전 세계적으로 가장 많은 다운로드 수와 독립 사용자를 보유한 브라우저입니다.

사파리와 같이 오픈소스 랜더링 엔진인 웹키트 기반이었으며, 이후, 웹키트 엔진에 대한 개발 권한이 애플에 치중되면서 블링크라는 별도의 랜더링 엔진을 개발하여 탑재를 준비하고 있습니다.

사실 HTML이나 CSS와 같은 마크업에 있어 랜더링 엔진이 크게 좌우하는 부분은 없습니다. 단순히 브라우저가 어떤 큰 물줄기를 따르고 있느냐 정도로만 참고하세요.

웹 표준에 대해 사파리와 함께 매우 빠른 도입을 보이고 있으며, W3C에 제안하는 의견의 양도 최대 수준입니다. 개발자에 대한 지원이 강력하다보니 웹 프로그래머나 디자이너에게 유용한 것들을 많이 제안하고 실현시키는 이상적인 행보를 보이고 있습니다.

웹키트 기반의 브라우저들이 그렇듯이 데스크탑 모니터에서의 글꼴 표현에 있어서는 외곽선 처리 부분이 상대적으로 얇아 미려해 보이지 않는 문제점도 가지고 있지만, 상당히 스마트한 차세대 브라우저로서의 면모를 매우 많이 가지고 있습니다.

마치며

글을 적고보니 파이어폭스에 많은 장점을 두각시킨 것 같지만, 아무래도 서로 비슷한 장, 단점을 가지고 있으면서 맨 처음에 소개하다보니 포괄적인 개념으로 인해 그렇게 되었다고 생각해 주세요. 중간중간 랜더링 엔진 이야기가 포함되어 있는데, 이것을 분류로 생각하면 호환성 테스트의 기준을 잡기가 쉬워집니다.

1. 가장 호환성이 높은 User Agent를 가진 파이어폭스에서 기본적인 테스트를 진행
2. 서로 같은 기반의 랜더링 엔진으로 표현하는 사파리, 크롬, 오페라 중에서 1개로 1차적인 호환성 테스트
3. 상위 버전 인터넷 익스플로러로 2차적인 호환성 테스트
4. 하위 버전 에뮬레이터로 IE6-7에 대한 최종 호환성 테스트. (이 테스트는 투자에 대한 실효성이 거의 없으므로 제외해도 좋습니다.)