Internet Explorer 와 작별하기
안녕하세요, 번개장터 서비스 플러스 팀에서 FE 개발을 담당하고 있는 Leo 입니다. 😃
기존에 번개장터는 Internet Explorer(이하 IE)에서도 서비스가 되고 있었는데요, 결과적으로 이번에 IE에 대한 지원을 종료하게 되면서 종료를 하게 된 배경과 그 과정을 공유드리고자 합니다.
배경
웹 프로덕트를 개발하고 있는 개발자 분들이라면 대부분 소식을 접하셨겠지만, 22년 6월 15일 자로 마이크로소프트의 IE 11 에 대한 지원이 종료되었습니다. (참고 링크)
저희 번개장터는 꽤 예전부터 PC 쪽도 서비스가 되고 있었기 때문에, babel을 통해 ES5로 트랜스파일을 시켜주고 있습니다. 하지만 이번에 공식적으로 IE 지원이 종료되면서, 아래와 같은 생각을 하게 됐는데요.
이번 기회에 IE 지원을 종료하고, ES6을 기준으로 한 babel 세팅 (또는 다른 loader 적용), IE 지원을 위한 폴리필 제거 등의 좀 더 모던한 개발 환경을 세팅할 수 있다면.. 좋지 않을까?
그래서, IE 지원 종료에 대한 검토를 진행해보기로 했습니다.
IE의 문제점
검토한 내용들을 소개하기 전에, IE 가 문제 되던 내용을 잠깐 소개하고자 합니다.
IE 는 Windows 95 시절부터 시작해 현재에 이르기까지, 인터넷의 부흥을 담당했다고 해도 과언이 아닌 유서깊은(?) 브라우저 입니다. 이는 2000년대 초반엔 점유율 90%를 넘을 정도로 웹 브라우저에 있어 사실상 표준 이기도 했었죠.
깊은 역사를 가진 브라우저 이지만 그 때문에 문제점 역시 많았는데요, IE 는 기본적인 웹 표준 기술들을 준수하고 있긴 했지만, ES6 이상 표준에 대한 미 지원(또는 부분적인 지원), 지원하지 않는 Web API 등 기술적으로 지원하지 않는 스펙들이 많았고, 그 때문에 babel 을 통해 ES5 기준으로 트랜스파일링을 하거나, 지원하지 않는 API 에 대한 폴리필 작성(또는 babel 서드파티 플러그인 적용)을 해야 하는 등 개발자로 하여금 신경써야 하는 부분들이 많았습니다.
또한 IE 에서는 특정 기능을 수행하기 위해 ActiveX, Silverlight 등 고유한 기술들이 지원되고 있었는데요, 이를 이용한 사이버 공격 등의 취약점이 많아 기술적인 부분을 제외하더라도 IE 를 사용하는 건 좋지 못한 상황이었죠.
검토 내용
1. IE 이용 현황
과거의 영광이 무색하리만큼, 현재는 IE의 점유율이 국내,외 할 것 없이 낮은 상황이고 그 추세도 점점 더 내려가고 있지만, 번개장터를 사용할 때 IE를 사용하는 비율이 유의미하게 있다면 섣불리 종료할 순 없겠죠.
IE에 대해 지속적으로 지원을 할 필요가 있는지 확인하기 위해, 우선 PC Web에 IE로 접근하고 있는 유저 수를 확인해보기로 했습니다.
데이터 팀 분들의 도움을 받아 2022/08/19 기준 최근 한 달 간 PC Web DAU 대비 IE DAU를 redash를 통해 확인해보니, 아래와 같은 결과를 얻을 수 있었습니다.
사진 상으로는 퍼센트가 표기가 되진 않았지만, 번개장터에서는 평균적으로 전체 PC Web DAU 기준 약 1.4% 정도의 사용률을 보여주고 있는데요, 이는 국내 브라우저 점유율과 비교해 보았을 때, 비슷하거나 약간 상회하는 수치임을 알 수 있습니다.
2. IE 지원 종료 시 단점
IE 지원을 종료했을 때 발생할 수 있는 단점으로, 기존 IE 유저들로 하여금 익숙한 브라우저 환경을 바꾸도록 해야 한다는 점 입니다.
기술적으로나, 보안적으로나 당연히 유저가 새로운 브라우저를 사용하도록 하는게 좋겠죠. 수가 많지는 않지만 엄연히 IE를 통해 번개장터를 이용하는 사람들은 존재하고, 갑자기 IE를 쓰지 못하도록 한다면 유저 경험이 좋진 않을 겁니다. 많은 경우 유저들은 IE에서 안되는 것을 확인하고 다른 브라우저를 통해 들어가겠지만, 자연스럽게 다른 브라우저를 사용할 수 있도록 서비스에서 유도해 준다면 더욱 좋지 않을까요?
3. IE 지원 종료 방법
그럼 위 내용들을 토대로 IE 지원을 종료한다면, 어떻게 진행하는게 좋을까요?
1) IE로 접근 시, 지원 종료를 알리는 not-supported 페이지로 이동시켜준다.
가볍게 생각해볼 수 있는 방법입니다. 유저가 IE로 접근하게 됐을 때, /not-supported.html 와 같은 형식의, 자체적으로 준비한 페이지로 이동되도록 하는 것이죠.
인프라 단에서 user-agent가 IE인 경우에만 /not-supported.html 으로 이동시켜주게 하면, 큰 리소스 없이 해결할 수 있습니다. 좋은 방법이지만, 유저로 하여금 브라우저를 새로설치해야 하는 추가적인 액션이 발생하게 됩니다.
2) IE로 접근 시, Microsoft Edge로 리디렉션 하기
Microsoft(이하 MS) 에서는 IE 지원이 종료됨에 따라, 기존 유저들을 Edge 브라우저로 이동시킬 수 있게끔 지원하고 있는데요, Move users to Microsoft Edge from Internet Explorer 문서에서 소개하듯이, MS가 관리하는 Need Microsoft Edge List에 서비스 도메인을 추가하는 방법입니다.
이 방법을 이용해 리스트에 도메인을 추가하게 되면 저희가 따로 처리할 필요 없이 IE에서 접근한 유저를 Edge로 이동시켜줄 수 있습니다. 기존 IE 페이지는 IE 지원 종료를 알리는 안내 페이지로 이동되게 됩니다. Windows 10 부터는 Edge가 기본 설치되어 있기 때문에, 사용자로 하여금 브라우저 설치를 유도할 필요 없이 자연스레 유저 이동을 시킬 수 있다는 장점이 있습니다.
리스트에 도메인을 추가하는 방법은 ietoedge@microsoft.com 로 아래 내용을 기술해 메일로 요청하면 됩니다.
- Owner name : 신청자 이름
- Corporate Title : 법인 명
- Email address : 신청자 메일
- Company name: 회사 명
- Street address: 소재지
- Website address: 서비스 도메인
이 중 신청자 이름/메일의 경우, MS 측에서 문의사항이 있을 경우 연락하고 웹 사이트와의 제휴를 확인할 수 있는 회사 연락처면 되기 때문에, 개인/회사에 따라 알맞게 작성하면 됩니다. 또한 Website address의 경우 적용할 서비스의 도메인을 넣어주시면 되는데요, 적용 시 서브도메인도 적용되기 때문에 메인 도메인 하나만 작성해주시면 됩니다.
추가적으로, 현재 MS에서는 IE 지원 종료에 대한 플랜을 크게 2단계로 진행하고 있다고 합니다. 1단계는 현재와 같이 리디렉션을 제공하는 단계이고, 1단계가 종료되면 2단계로 진행되는데, 이 때는 IE 폐기 범위에 있는 Windows 플랫폼을 사용하는 모든 기기에 대해 향후 업데이트를 통해 영구적으로 IE를 비활성화 한다고 하네요.
또한 Edge에서는 IE 모드를 통해 엣지 내에서 IE 환경으로 페이지를 열어볼 수 있는데, Need Edge List 에 추가된 도메인인 경우, IE 모드 또한 비활성화된다는 장점 역시 있습니다.
3) 리디렉션 스크립트를 추가해 Edge로 리디렉션 하기
위 2번 방법과 유사하지만, 수동으로 user-agent를 확인해, IE인 경우 Edge로 리디렉션 되도록 아래와 같은 스크립트를 초기 진입점(index.html)에 추가하는 방법입니다.
<script>
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
window.location = 'microsoft-edge:' + window.location;
setTimeout(function() {
// IE에 보여질 페이지를 리디렉션 시킵니다. 변경 가능합니다.
window.location = 'https://support.microsoft.com/office/160fa918-d581-4932-9e4e-1075c4713595';
}, 1);
}
</script>모놀리식 구조인 경우 스크립트 하나만 넣으면 되지만, 번개장터의 경우 프론트엔드 역시 MSA 구조로 서브 도메인에 따라 각 Repo가 분리되어 있는데요, 때문에 각 Repo 별로 스크립트를 넣어줘야 하는 불편함이 있습니다. (새롭게 Repo가 생기는 경우에도 추가해줘야 한다는 단점 역시 있죠)
(22/9/30 - 본 글 코멘트로 Hyunbin님이 기여해 주셨습니다.)
Microsoft Edge의 경우, 사실 현재의 Chromium 기반의 Edge가 있기 전, IE의 렌더링 엔진인 Trident를 토대로 하위 호환을 고려하지 않고 만들었던 EdgeHTML 렌더링 엔진 기반의 legacy Edge가 있었습니다.
만약 legacy Edge가 있는 경우, 위 스크립트와 같이microsoft-edge:로 시작하는 location으로 이동한다면 legacy Edge로 리디렉션 됩니다. legacy Edge 또한 21년 3월 9일을 끝으로 지원이 종료되었기 때문에, (legacy Edge가 남아 있는 경우가 많진 않겠지만) IE를 지원종료하는 의미가 없게 됩니다.
2번의 방법인Need Edge List를이용하면, Chromium 기반의 Edge로만 리디렉션됩니다.
4. 검토 결과 및 적용하기
IE 지원이 종료된 것과 IE 점유율 등을 여러 이해관계자 분들과 함께 종합적으로 고려해본 결과, 지원 종료를 해도 될 것 같다는 결론이 나오게 되었습니다.
지원 종료 방법은 언급한 방법 중 Need Edge List에 도메인을 추가하는 방식으로 진행하면, 큰 리소스 없이 유저를 모던 브라우저로 이동시킬 수 있을 것 같아 해당 방법으로 진행하게 됐습니다.
리스트 추가 요청이 적용되기 까지는 약 3일 내로 처리가 모두 완료되었습니다. (시차 때문에 그렇지, 굉장히 빠르게 처리해주는 것 같았습니다.)
그렇게 끝나면 좋았겠지만..
Need Edge List 에 도메인이 추가되기만 하면 모든게 완벽하게 될 거라 생각했지만.. 생각과는 달랐습니다. Edge로 이동되지 않는 여러 변수들이 존재했기 때문인데요.
1. Need Edge List 의 적용이 곧잘 되진 않는다.
사실 이 부분은 아직 정확한 동작 원리를 모르기 때문에 추측이긴 하지만, 내부적으로 Need Edge List 에 대한 정보를 캐싱하고 있는 듯 했습니다. 그 때문인지 리스트에 추가된 것은 확인 했지만, 유저 PC 에 따라 IE 종료-열기 를 몇차례 반복해야만 적용이 되는 경우가 있었습니다. 물론, 한번 적용된 이후엔 문제없이 동작하게 됩니다.
2. Edge 의 기본 브라우저 설정을 변경한 경우, 리디렉션 되지 않는다.
Edge의 설정 > 기본 브라우저 > Internet Explorer 호환성 영역에서, Internet Explorer를 사용하여 Microsoft Edge에서 사이트를 열어 보세요. 라는 설정이 있는데요, 아래 3가지 값 중 설정을 할 수 있습니다.
- 안 함 : IE로 접근 시, 어떠한 경우라도 Edge로 리디렉션을 시키지 않습니다.
- 호환되지 않는 사이트만 : IE로 접근 시,
Need Edge List에 포함된 도메인이라면 Edge로 리디렉션 시킵니다. - 항상(권장) : IE로 접근 시, 항상 Edge로 리디렉션 시킵니다.
일반적으로는 ‘항상(권장)’ 또는 ‘호환되지 않는 사이트만’ 으로 설정되어 있는데요, 유저가 이를 ‘안 함’ 으로 설정한다면, 아무리 Need Edge List 에 도메인을 추가한다 한들 Edge로 이동되지 않습니다.
3. 그 밖의 다양한 경우들
- 그 수가 매우 적지만, Windows 7의 경우 Edge가 설치되어 있지 않습니다. 이 경우엔 Edge 설치를 하지 않을 경우 Edge로 리디렉션 되지 않습니다.
- Edge로 리디렉션이 되기 위해선 Edge 최소 버전, 지원하는 OS 버전 등의 사전 조건이 필요한데요, 이 조건에 충족되지 않는 유저인 경우 역시 동작하지 않습니다.
안전하게 지원 종료하기
위와 같은 예외 상황의 경우 저희가 기대하는 바와 달리 여전히 IE로 접근이 가능해지기 때문에, 결국 추가적인 처리가 필요하다는 것을 알게 됐습니다.
결국 앞서 소개한 방법 중, IE인 경우 not-supported 페이지로 이동시키는 방법으로 적용하는 것을 추가로 적용해 해결했습니다. 저희의 경우 Devops 분들의 도움을 받아 이를 인프라적으로 처리했지만, 다양한 방법으로 적용해볼 수 있을 것 같네요.
그렇게 적용된 모습을 잠깐 소개해드리고 마치고자 합니다.
Need Edge List 에 추가되어, IE 접근 시 Edge로 리디렉션될 경우
not-supported 페이지로 이동될 경우마치며
물론 유저의 사용성, 경험 등을 고려하지 않고 무작정 최신 기술, 개발자에게 편한 환경을 추구하는 것은 지양해야 합니다. 하지만 IE 지원 종료의 경우, 유저 경험도 향상시킬 수 있고, 기술적으로도 좀 더 좋은 환경을 세팅해볼 수 있어 결과적으로는 두 마리 토끼를 모두 잡지 않았나 싶네요. 😃
물론 기존에 PC Web 서비스를 제공하지 않았거나 당초 IE 지원을 고려하지 않고 있었던 상황이라면 굳이 적용할 필요는 없습니다만, 기존에 IE로도 서비스를 제공하고 있었다면, 한번쯤 고려해보시는건 어떨까요?
