동적 Polyfill 서비스로 실현하는 토스의 브라우저 호환성

프론트엔드 개발자에게 하위 브라우저 호환성 문제는 피할 수 없는 과제입니다. 모든 서비스에는 구형 브라우저를 사용하는 사용자가 존재하며, 이를 무시할 수 없기 때문인데요.


이런 문제를 해결하기 위해 Polyfill을 사용하지만 Polyfill을 사용하는 데도 단점이 있습니다. 불필요한 Polyfill 스크립트까지 다운로드하게 되는 경우가 생기며, 이는 JavaScript 코드의 크기를 증가시키고 사용자 경험(UX)에 영향을 미칠 수 있기 때문인데요. 특히 최신 브라우저를 사용하는 사용자에게도 필요 없는 Polyfill이 포함되어 로드 속도를 저하시킬 수 있습니다.


이러한 문제를 해결하기 위해, 토스 에서 동적으로 필요한 Polyfill만 제공하는 자체 Polyfill 서비스를 구축한 블로그 아티클을 재미있게 읽었습니다. 이 접근 방식은 브라우저 환경에 따라 꼭 필요한 Polyfill만 제공함으로써, 불필요한 스크립트 로드를 방지하고 성능을 극대화하는데요.


구현 방식

  1. User-Agent 기반 브라우저별 맞춤형 Polyfill 생성

    • 클라이언트(브라우저)가 Polyfill 서버에 요청을 보낼 때, 요청 헤더에 포함된 User-Agent 정보를 기반으로 브라우저 정보를 추출합니다.

    • 이 과정에서 browserslist-useragent 라이브러리를 사용해 브라우저와 필요한 기능을 매핑합니다.

  2. esbuild를 활용한 Polyfill 스크립트 생성

    • 생성된 Polyfill 목록을 기반으로 core-js 모듈에서 필요한 Polyfill을 가져와 JavaScript 코드를 생성합니다.

    • esbuild를 활용해 Polyfill 스크립트를 하나로 묶고, 크기를 줄이기 위해 압축 및 최적화를 수행합니다.

  3. Polyfill 서버 배포

    • 생성된 Polyfill 스크립트는 Node.js 서버 또는 AWS Lambda 같은 서버리스 환경에 배포됩니다.

    • 클라이언트가 서버에 요청을 보내면 해당 브라우저에 필요한 Polyfill만 포함된 최적화된 스크립트를 실시간으로 반환합니다.


사실 번들 크기의 최적화는 모든 프로젝트에서 최우선 과제가 아닐 수 있습니다. 그러나 저속 네트워크나 저사양 기기를 사용하는 환경에서는 번들 크기에 다라 사용자 경험에 직접적인 영향을 미칠 수 있습니다. 특히 이러한 환경일 경우 사용자들은 로딩 속도에 더욱 민감하게 반응하므로, 동적 Polyfill 서비스를 통한 최적화는 의미 있는 개선이 될 수 있습니다.


또한 이러한 접근 방식은 개발과 사용자 경험 모두에서 win-win 전략이 될수 있다고 느꼇습니다. 개발자는 최신 JavaScript 기능을 제약 없이 활용할 수 있고, 사용자는 자신의 브라우저 환경에 관계없이 항상 최적화된 성능과 안정적인 서비스를 경험할 수 있기 때문입니다.


https://toss.tech/article/smart-polyfills

똑똑하게 브라우저 Polyfill 관리하기

toss.tech

똑똑하게 브라우저 Polyfill 관리하기

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2025년 1월 1일 오전 1:01

댓글 0

    함께 읽은 게시물


    🪄 플레이모어와 함께할 동료를 찾습니다

    ... 더 보기

    플레이모어와 함께할 동료를 찾습니다 | Notion

    playmoreai on Notion

    플레이모어와 함께할 동료를 찾습니다 | Notion

     • 

    저장 7 • 조회 3,100


    전략적 입사 지원

    ... 더 보기

     • 

    저장 21 • 조회 1,499


    데이터 엔지니어로 성장하고 싶다면~

    🍀 데이터 엔지니어란? 소프트웨어 엔지니어링과 프로그래밍의 업무 역량 사이의 간극을 메우는 전문가로 데이터 엔지니어는 고급 분석 기술, 강력한 프로그래밍 기술, 통계적 지식, 빅데이터 기술에 대한 명확한 이해를 갖춘 사람입니다. 🍀 데이터 엔지니어는 어떤 일을 하나요? 정형 및 비정형 데이터에 쉽게 액세스할 수 있는 데이터 인프라를 설계, 관리, 테스트, 유지, 저장하고 작업을 하며, 대규모 데이터 처리를 탐색하고 확장 가능하고 안정적인 작업 환경을 보장하기 위해 전문 지식과 소프트 스킬 필요 🔱 서버와 애플... 더 보기

    15+ Must Have Data Engineer Skills in 2023

    Knowledgehut

    15+ Must Have Data Engineer Skills in 2023

    < 당신의 성장을 막는 가장 큰 적, '똑똑함' >

    1. "최고의 경지에 오른 사람의 노하우나 디테일은 말로 설명하기가 어려워요. 어깨너머로만 배울 수 있어요. 그리고 그 작은 차이가 완성도를 판가름하죠.

    ... 더 보기

    고난이 사람을 키운다

    태초에 모든 동물은 바다에서 살았다. 바다가 동물이 살기 좋은 환경이었던 것이다. 그런데, 동물 사이에 먹이 사슬이 형성되었고, 힘이 없는 동물들은 척박한 곳으로 밀려났다. 그곳이 바로 강이다. 처음에는 강에서 살기 힘들었지만, 성공적으로 적응하는 동물들이 생겨났고, 그래서 강에도 생태계가 형성되었다.

    ... 더 보기