웹을 돌아다니다 보면 같은 사이트가 기기에 따라 다르게 보이거나, 일부 기능이 아예 작동하지 않는 경우를 자주 접하게 됩니다.
흔히 웹사이트의 문제라고 생각하기 쉽지만, 실제 원인은 대부분 브라우저에 있습니다. 주요 데스크톱 브라우저들은 서로 다른 '렌더링 엔진'을 사용해 웹 페이지를 표시하며, 각각 작동 방식이 다릅니다.
그렇기 때문에 어떤 브라우저를 사용하는지, 그리고 그 브라우저의 어느 버전을 쓰는지에 따라 웹 경험이 크게 달라질 수 있습니다.
렌더링 엔진이란 무엇인가?
웹 페이지는 한 번에 내려받아 픽셀 단위로 그려지는 하나의 덩어리가 아닙니다. 대신 HTML, CSS, 자바스크립트, PHP 등 다양한 코드로 작성된 일련의 명령어 모음으로, 브라우저에게 무엇을 어디서 어떻게 처리할지 지시합니다.
각 브라우저는 레이아웃 엔진이라고도 불리는 렌더링 엔진을 사용해 코드에 담긴 콘텐츠와 스타일 정보를 해석하고, 완전히 서식화된 형태로 화면에 표시합니다.
문제는 모든 브라우저가 동일한 렌더링 엔진을 쓰는 것이 아니라는 점입니다. 각 언어는 상세한 사양으로 정의되어 있지만, 엔진은 그 사양에 대한 일종의 '해석'을 제공할 뿐입니다.
특히 스타일 정보를 담당하는 CSS의 경우 어떤 엔진도 정확히 같은 결과를 만들어내지 못합니다. 때로는 몇 픽셀 어긋난 수준에 그치지만, 경우에 따라서는 훨씬 크게 달라질 수도 있습니다.
어떤 브라우저가 어떤 엔진을 사용할까?
가장 널리 쓰이는 브라우저들은 주로 다음 네 가지 렌더링 엔진을 사용합니다.
- WebKit: 오픈소스 엔진으로, OS X·iOS의 사파리와 안드로이드 기본 브라우저 등 수많은 모바일 브라우저가 사용합니다.
- Blink: WebKit을 기반으로 만든 오픈소스 엔진으로, 크롬·오페라·아마존 실크·안드로이드 WebView(앱 안에서 열리는 브라우저)를 구동합니다.
- Gecko: 모질라 재단이 개발한 오픈소스 엔진으로, 파이어폭스가 사용합니다.
- Trident: 마이크로소프트가 개발한 사유 엔진으로 인터넷 익스플로러에 탑재되었으며, 새 마이크로소프트 엣지는 EdgeHTML이라는 더 최신 버전을 사용했습니다.
웹 표준은 왜 지켜지기 어려운가?
렌더링 엔진 간 격차는 인터넷 익스플로러가 브라우저 시장을 지배하던 시절보다 훨씬 줄어들었습니다.
Acid3 같은 테스트는 브라우저가 페이지를 얼마나 정확하게 렌더링하는지 보여주며, 최신 브라우저 대부분은 높은 점수를 받습니다. 하지만 웹 표준을 준수하는 일은 극도로 복잡한 작업입니다.
HTML과 CSS 등의 사양은 방대합니다. 새로운 요소가 계속 추가되고, 오래되었거나 쓸모없는 요소는 제거됩니다. 렌더링 엔진이 이런 변화를 전부 반영하기까지는 상당한 시간이 걸립니다.
HTML5와 CSS 사양의 일부 요소는 아직 어떤 주류 브라우저에서도 지원되지 않고, 일부는 부분적으로만 지원되며, 또 어떤 것들은 일부 브라우저에서만 지원됩니다.
html5test.com 사이트에서는 현재 사용 중인 브라우저와 버전을 테스트해 HTML5의 공식·실험적 기능을 얼마나 잘 지원하는지 확인할 수 있습니다. 당시 기준으로 크롬이 주요 브라우저 중 가장 좋은 성적을 냈고, 인터넷 익스플로러(v11)가 가장 낮았습니다.
웹 개발자가 한 브라우저에서는 지원되지만 다른 브라우저에서는 지원되지 않는 기능을 사용하면, 지원하지 않는 브라우저는 비슷한 대안으로 처리하거나 해당 기능을 아예 무시해야 합니다. 예를 들어 투명해야 할 박스가 불투명하게 렌더링되는 식입니다.
때문에 웹 페이지 렌더링은 겉보기보다 훨씬 복잡한 작업입니다. 자주 업데이트되는 브라우저일수록 표준 준수율이 높은 경향이 있는데, 꾸준한 자동 업데이트를 제공하는 크롬과 업데이트 주기가 긴 IE를 비교하면 이 차이가 잘 드러납니다.
그 외에도 여러 요인이 작용합니다.
- 엔진의 버그: 렌더링 엔진도 소프트웨어이고, 모든 소프트웨어에는 버그가 존재합니다. 치명적인 버그는 빠르게 발견되어 수정되지만, 특정 코드 조합이 렌더링 시 예상치 못한 결과를 낼 가능성까지 완전히 없앨 수는 없습니다.
- 웹 페이지의 버그: 브라우저에는 어느 정도의 오류 허용 능력이 내장되어 있지만, 그 수준은 엔진마다 다릅니다. 코드에 오류가 있는 페이지도 한 브라우저에서는 멀쩡하게 렌더링되지만, 다른 브라우저에서는 심하게 깨져 보일 수 있습니다.
- 폰트: 글꼴 표시 방식은 브라우저가 아니라 운영체제가 처리합니다. 윈도와 OS X는 폰트를 서로 다르게 렌더링하므로, 같은 폰트를 같은 브라우저로 봐도 플랫폼에 따라 다르게 보일 수 있습니다.
- 레거시 호환성: 브라우저는 공식 사양에 포함되기 전에 새 기능(특히 CSS)을 먼저 도입하는 경우가 많습니다. 이후 기능 구현 방식이 변경되면 브라우저 개발사는 변경 사항을 반영해 구버전 기반으로 만들어진 수천 개 사이트와의 호환성을 깨뜨릴지, 아니면 새 버전을 무시할지 결정해야 합니다.
- 사유 기능: 일부 브라우저는 다른 환경에서 사용할 수 없는 독점 기술을 채택하기도 합니다. 가장 유명한 사례가 인터넷 익스플로러의 마이크로소프트 ActiveX 프레임워크이며, 새 마이크로소프트 엣지에서는 이를 사용하지 않기로 했습니다.
정리하며
이처럼 여러 변수가 얽혀 있다 보니 브라우저마다 웹 페이지 처리 방식에 차이가 남아 있는 것은 자연스러운 일입니다.
상황은 분명 개선되고 있지만, 완전히 해결되기는 어려울 것으로 보입니다. 모든 사용자가 자신이 쓰는 브라우저의 최신 버전을 사용한다면 큰 도움이 되겠지만, 출시 6년 된 인터넷 익스플로러 8이 여전히 4.5%의 점유율을 유지하고 있는 현실을 고려하면 그날은 아직 멉니다.
여러분은 어떤 브라우저를 사용하며, 항상 최신 버전으로 유지하고 계신가요? 사용 중인 브라우저에서 정상적으로 작동하지 않는 웹사이트를 발견한 적이 있다면 댓글로 알려주세요.
이미지 출처: Devices by Jeremy Keith, Unsupported browser by Duncan Hill