Maersk.com의 고객과 개발자를 위한 Internet Explorer 지원 종료의 의미
저는 Steve Workman이고 Maersk.com의 수석 엔지니어입니다. Maersk는 통합 공급망 물류 분야의 글로벌 리더로서 118년 동안 고객이 전 세계에서 상품을 운송해 왔으며 20년 이상 온라인 예약을 할 수 있도록 지원하고 있습니다. @Maersk는 2022년 6월 Microsoft에 대한 지원을 공식적으로 중단한 것과 2022년 5월 초에 고객 대상 시스템에서 Internet Explorer (IE) 지원을 공식적으로 중단했습니다. 지금은 중요한 웹 시대가 끝나고 새로운 시대가 시작되었습니다.
저는 2018년에 Maersk에 입사했고, 첫 번째 프로젝트는 새로운 글로벌 탐색 메뉴를 빌드하는 것이었습니다. 완전히 테스트할 수 있어야 하고, 다운타임 없이 전 세계로 쉽게 배포 및 업데이트할 수 있어야 하며, 모바일 중심, 응답성, 여러 브랜드 지원, 구성 가능, 11개 언어로 현지화, IE9 지원 등이 필요했습니다.
통계 카운터에 따르면 2018년에 Windows 7과 기본 브라우저인 IE9은 여전히 매우 인기가 있었으며 Windows 10과 IE11은 2020년 초에만 임계치에 도달했습니다. 당사의 데이터를 살펴본 결과, 호환성 모드에서 IE9(또는 최악의 경우 IE11)를 사용하는 고객들로부터 상당한 양의 거래가 이루어진 것으로 나타났습니다. 이 트래픽은 신흥 시장과 Maersk의 고객층이 급격히 성장하고 있는 지역으로 크게 기울어졌습니다.
탐색 메뉴가 작동하지 않으면 로그인 버튼을 찾기 어렵습니다. 로그인이 작동하지 않으면 컨테이너를 예약할 수 없으며 기존 브라우저로 인해 갑자기 큰 문제가 발생합니다.
이 문제를 해결하기 위해 Google에서는 탐색 구성요소와 앞으로 출시될 모든 웹 앱에 대한 점진적인 개선 조치를 취했습니다. '작동'하게 만들 수는 있지만 이를 위해 상당한 폴리필과 제한사항이 있을 수 있습니다. 예를 들어 IE는 Fetch API를 지원하지 않지만 IE10으로 돌아가는 폴리필이 있으며 이러한 브라우저에는 폴리필을 포함합니다. IE9의 경우 XMLHttpRequest 호출을 별도의 파일에 코딩하여 fetch를 폴리필할 수 없는 경우에만 로드되도록 했습니다.
IE9 지원을 중단할 당시, 소수의 고객만 남아 있었을 때 우리는 최신 브라우저에서 최소한의 노력과 최대의 혜택으로 애플리케이션에서 이 코드를 간단히 삭제할 수 있었습니다.
Maersk의 디지털 혁신이 계속됨에 따라 당사는 VueJS에 기반한 마이크로 프런트엔드로 사이트의 많은 부분을 재구축했습니다. Vue는 상시 브라우저용 최신 ES 모듈 문법을 사용하는 버전과 ES6 모듈을 이해하지 못하는 기존 애플리케이션을 위한 두 가지 버전의 애플리케이션이 빌드되는 최신 모드까지, 고급 트리 쉐이킹 및 번들 최적화를 위한 사전 설정 구성 등 미래에도 사용하기 편리한 다양한 기능을 갖추고 있습니다. 이 기존 버전은 IE와 같은 브라우저에 제공되며, 단순히 브라우저에서 누락된 기능의 양으로 인해 gzip으로 압축된 폴리필 번들이 100KB 더 큰 경우가 많습니다.
또한 Microsoft가 IE10에서 사양을 시작했기 때문에 CSS 그리드와 같은 대부분의 최신 CSS 레이아웃 기법을 사용할 수 있다는 것을 알게 되었습니다. 페이지의 여러 영역 이름을 효과적으로 지정할 수 있도록 autoprefixer와 이 CSS 도움말 문서를 통해 가볍고 모든 프로젝트에 적합하며 매우 유연한 레이아웃 시스템을 구축할 수 있었습니다. 그러나 호환성 문제를 해결하는 데 많은 시간이 걸렸습니다.
갑자기 비용-편익 분석 단계로 돌아왔습니다. 그러나 이번에는 모든 버전의 IE에서 IE9와 마찬가지로 모든 사용자를 지원하고 프로젝트마다 몇 주간의 고된 개발 시간 사이에서 절충점을 찾아야 합니다. 최신 브라우저를 사용하면 더 나은 고객 경험을 제공할 수 있다는 확신을 갖고 사용자가 웹사이트를 방문할 때 Internet Explorer를 사용하지 않게 되었습니다. Google과 상호작용하기 위해 IE를 여는 습관이 있는 활성 고객에게는 이 방법이 소량의 성공으로 나타났습니다. 이 메시지는 좋았지만 계산을 수행하기에는 충분하지 않았습니다.
IE의 방문이 막혔을 때, Maersk는 다른 많은 사람들보다 먼저 IE에 대한 공식적인 지원을 중단하기로 했습니다. 하지만 IE에 대한 공식적인 지원을 중단하기로 했습니다. 왜 지금일까요?
간단히 말해, 웹 플랫폼은 진화했으며 IE11은 소수의 폴리필을 사용하더라도 필요한 작업을 할 수 없습니다. 탐색 구성요소를 살펴보겠습니다. 최신 웹 플랫폼 환경에서는 CSS 변수와 컨테이너 쿼리를 기반으로 하는 자체 캡슐화된 스타일이 포함된 맞춤 요소입니다. 이러한 플랫폼 부분이 없으면 이러한 구성요소의 스타일을 애플리케이션에서 완전히 변경할 수 있으며 스타일이 다른 구성요소로 누출되거나 애플리케이션으로 다시 누출될 수 있습니다. 맞춤 요소, ShadyCSS, ShadyDOM, template 요소를 비롯하여 대부분의 기능을 에뮬레이션할 수 있는 polyfill이 있습니다.
실제로 이러한 폴리필은 격리된 구성요소에서 잘 작동하지만, 복잡한 애플리케이션에서 여러 구성요소를 결합하면 JavaScript 런타임이 스타일 트리를 40초 동안 계산하려고 시도하는 동안 IE가 수십 초의 흰색 화면에서 멈춥니다. 간단히 말해 브라우저를 지원하기 위해 사용자 환경이 심각하게 손상을 입었습니다.
이전에는 폴리필을 사용하면 첫 번째 페인트에 0.5초만 더할 수 있는 작은 중단이 있었습니다. 이러한 상황이 달라져 이러한 앱은 사용할 수 없게 되었습니다. Polyfill은 최신 웹 플랫폼의 복잡성으로 인해 어려움을 겪을 때만 가능합니다.
IE 지원이 중단된 이후 어떻게 된 것인지 아시나요? 아주, 아주 적게요. 고객 지원 티켓이 많거나 부정적인 의견이 접수되지 않았습니다. Google 엔지니어의 만족도는 높아지고 있습니다. Google의 애플리케이션은 Vue 3 (프록시 객체를 폴리필할 수 없으므로 IE11을 지원하지 않음)로 업그레이드할 수 있는 경로와 더 작은 번들 크기를 이용할 수 있습니다. CSS 변수와 가변 글꼴에 대한 완벽한 지원을 통해 브랜드 전반에 걸쳐 더 간단한 테마 설정을 할 수 있으며, Vue의 단일 파일 구성 요소 내에서 토큰을 사용할 수 있는 능력도 인지 복잡성을 줄여주므로 더 나은 개발자 환경을 제공합니다.
고객의 관점에서 IE의 사용량은 서서히 감소하고 있습니다. Internet Explorer는 사이트에서 차단되지 않았지만, 점진적인 개선이 단계적으로 저하되면 기능과 애플리케이션의 작동이 중단됩니다. 고객은 Google 기술의 발전을 통해 사이트에서 더욱 일관된 경험을 얻을 수 있습니다. 권장사항, 접근성, 디자인이 진화하는 Lit 기반 디자인 시스템에 통합되어 현재 또는 미래에 존재하는 모든 프레임워크와의 완전한 상호 운용이 가능합니다.
야간에 보다 쉽게 선박 시스템을 사용할 수 있도록 어두운 모드를 사용하는 것부터 웹 앱이 어떤 상황에서도 우리 주변의 실제 세상과 상호작용할 수 있도록 웹 블루투스, WebXR, PWA에 이르기까지 회사 내에서 새로운 웹 플랫폼 기능을 어떻게 활용할 수 있을지 기대가 큽니다. Internet Explorer 사용자님, 감사합니다. 이제 웹 플랫폼을 따라잡을 수 있습니다.
Matt Botsford의 히어로 이미지