웹을 탐색할 때 기기마다 다르게 보이는 사이트를 만나는 것은 드문 일이 아닙니다. 일부 기능이 전혀 작동하지 않을 수 있습니다.
종종 이것은 웹사이트의 문제가 아닙니다. 그것은 당신의 브라우저입니다. 5개의 주요 데스크톱 브라우저는 4개의 서로 다른 "렌더링 엔진"을 사용하여 웹 페이지를 표시합니다. Windows 10용 새 Microsoft Edge 브라우저는 5번째를 도입할 예정이며 각각은 다르게 작동합니다.
이는 웹 경험이 사용 중인 브라우저와 해당 브라우저의 버전에 따라 달라질 수 있음을 의미합니다.
렌더링 엔진이란 무엇입니까?
웹 페이지는 한 번에 한 픽셀씩 다운로드되어 화면에 표시되는 단일 개체가 아닙니다. 대신 기본적으로 브라우저에 무엇을, 어디서, 어떻게 해야 하는지 알려주는 다양한 유형의 코드(HTML, CSS, JavaScript, PHP 등)로 작성된 일련의 지침입니다.
각 브라우저는 레이아웃 엔진이라고도 하는 렌더링 엔진을 사용하여 코드에 포함된 콘텐츠와 스타일 정보를 가져와 완전한 형식으로 화면에 표시합니다.
문제는 모든 브라우저에서 사용되는 단일 렌더링 엔진이 없다는 것입니다. 그리고 각 언어는 자세한 사양으로 정의되지만 엔진은 해당 사양에 대한 해석만 제공할 수 있습니다.
특히 CSS(스타일링 정보를 제공하는 코드)를 사용하면 엔진이 정확히 동일한 결과를 생성하지 않습니다. 때때로 그 차이는 여기 저기에 오정렬된 이상한 픽셀에 불과할 수 있지만 때로는 더 근본적으로 다를 수 있습니다.
어떤 브라우저가 어떤 엔진을 사용하는지
가장 인기 있는 브라우저가 사용하는 네 가지 주요 렌더링 엔진이 있습니다.
- 웹킷: 기본 Android 브라우저를 포함하여 모바일 장치의 다른 많은 브라우저뿐만 아니라 OS X 및 iOS의 Safari에서 사용하는 오픈 소스 엔진
- 깜박임: WebKit을 기반으로 하는 오픈 소스 엔진은 Chrome, Opera, Amazon Silk 및 Android의 WebView(앱 내에서 열리는 브라우저)를 지원합니다.
- 도마뱀붙이: Mozilla Foundation에서 개발한 오픈 소스 엔진으로 Firefox에서 사용됩니다.
- 삼지창: Microsoft에서 개발하고 Internet Explorer에서 사용하는 독점 엔진입니다. Microsoft Edge 브라우저는 EdgeHTML이라는 최신 버전을 사용합니다.
웹 표준
서로 다른 렌더링 엔진 간의 격차는 Internet Explorer가 주요 브라우저였을 때보다 훨씬 작습니다.
acid3와 같은 테스트는 브라우저가 페이지를 얼마나 정확하게 렌더링하는지 보여주며 대부분의 최신 브라우저는 높은 점수를 받습니다. 그러나 표준을 준수하는 것은 엄청나게 복잡한 작업입니다.
HTML, CSS 등의 사양은 엄청납니다. 새로운 요소가 추가됩니다. 오래되거나 사용되지 않거나 오래된 것은 제거됩니다. 렌더링 엔진이 이러한 변경 사항을 반영하는 데 오랜 시간이 걸릴 수 있습니다.
HTML5 및 CSS 사양의 일부 요소는 여전히 주류 브라우저에서 지원되지 않으며 일부는 부분적으로만 지원되며 나머지는 일부 브라우저에서 여전히 지원되지만 전부는 아닙니다.
웹사이트 html5test.com에서 브라우저와 실행 중인 특정 버전을 테스트하여 HTML5의 공식 및 실험 기능을 얼마나 잘 지원하는지 확인할 수 있습니다. 작성 당시 Chrome은 주요 브라우저 중 최고였으며 Internet Explorer(v11)가 가장 낮았습니다.
웹 개발자가 한 브라우저에서는 지원되지만 다른 브라우저에서는 지원되지 않는 기능을 사용하는 경우 지원되지 않는 브라우저는 거의 동등한 것으로 정착하거나 해당 기능을 완전히 무시해야 합니다(예:투명한 상자는 불투명하게 렌더링될 수 있음).
이것은 웹 페이지를 렌더링하는 작업을 보이는 것보다 훨씬 더 복잡하게 만듭니다. 훨씬 더 드문 IE 업데이트와 비교하여 정기적인 자동 Chrome 업데이트에서 강조되는 것처럼 더 자주 업데이트되는 브라우저는 그렇지 않은 브라우저보다 더 표준을 준수할 가능성이 높습니다.
그리고 다른 요인들도 작용하고 있습니다.
- 엔진의 버그: 렌더링 엔진은 소프트웨어이며 모든 소프트웨어에는 버그가 있습니다. 치명적인 버그가 발견되어 신속하게 해결되지만 웹 페이지의 특정 코드 조합이 렌더링될 때 예상치 못한 결과를 생성하지 않는다고 보장할 수는 없습니다.
- 웹페이지의 버그: 브라우저에는 특정 수준의 오류 허용 오차가 내장되어 있지만 이는 엔진마다 다릅니다. 코드에 오류가 있는 웹 페이지가 한 브라우저에서는 여전히 완벽하게 렌더링되지만 다른 브라우저에서는 끔찍하게 손상될 수 있습니다.
- 글꼴: 서체가 표시되는 방식은 브라우저가 아니라 운영 체제에서 처리합니다. Windows와 OS X는 글꼴을 다르게 렌더링하므로 동일한 브라우저에서 동일한 글꼴이라도 다른 플랫폼에서 볼 때 다르게 보일 수 있습니다.
- 기존: 브라우저는 공식 사양의 일부가 되기 전에 특히 CSS에 대한 새로운 기능을 채택하는 경우가 많습니다. 기능이 채택될 때 구현이 변경되면 브라우저 개발자는 변경 사항을 채택하고 이전 버전용으로 설계된 수천 개의 웹사이트와의 호환성을 깨는 위험을 감수할지 아니면 새 버전을 완전히 무시할지 결정해야 합니다.
- 독점 기능: 일부 브라우저는 다른 곳에서는 사용할 수 없는 독점 기술을 사용할 수 있습니다. 이것은 Internet Explorer의 Microsoft ActiveX 프레임워크에서 가장 유명하게 나타났지만 회사는 새로운 Microsoft Edge 브라우저에서 이를 사용하지 않을 것입니다.
요약
관련된 문제가 너무 많기 때문에 브라우저에서 웹 페이지를 처리하는 방식의 차이가 지속되는 것은 놀라운 일이 아닙니다.
상황은 나아지고 있지만 완전히 해결될 수는 없습니다. 모든 사람이 선택한 브라우저의 최신 버전을 실행하는 것이 도움이 되지만 6년 된 Internet Explorer 8이 여전히 4.5%의 시장 점유율을 유지하고 있다는 점을 감안하면 이는 아직 갈 길이 먼 것입니다.
어떤 브라우저를 사용하고 최신 상태로 유지합니까? 선택한 브라우저에서 작동하지 않는 웹사이트를 찾으셨습니까? 댓글로 알려주세요.
이미지 출처: Jeremy Keith를 통한 기기, Duncan Hill을 통한 지원되지 않는 브라우저