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