브라우저용 번들링 플러그인, 직접 만들었어요

토스페이먼츠 DX 팀은 개발자 경험 향상을 위해 브라우저에서 바로 코드를 작성하고 실행할 수 있는 '샌드박스'라는 도구를 개발했습니다. 이 도구의 핵심 기능 중 하나는 사용자가 코드를 수정할 때마다 실시간으로 미리보기를 업데이트하는 것입니다.

이를 구현하기 위해 프론트엔드 번들링 플러그인을 직접 개발하는 과정을 소개합니다. 일반적인 번들링은 파일 시스템에 직접 접근하지만, 브라우저 환경에서는 보안상의 이유로 파일 시스템 접근이 제한됩니다.

Sandpack이나 WebContainer 같은 가상 환경 도구는 iframe 기반으로 작동하여 리다이렉트가 필요한 토스페이먼츠 SDK와 같은 경우 적용하기 어려웠습니다. 결국, 브라우저 환경에서 직접 번들링할 수 있는 Rollup의 `@rollup/browser` 라이브러리를 활용하여 이 문제를 해결했습니다.