Read Original
#Frontend

AI가 만든 코드가 어드민이 되기까지

AI가 만든 코드가 어드민이 되기까지
01

Summary

AI가 짠 코드를 브라우저에서 바로 실행하는 토스의 'Preview Runtime' 정복기

47초 걸리던 브라우저 렌더링 지연을 부수고 웹 빌드 파이프라인을 완전히 새롭게 정의하는 법

토스의 사내 어드민 제작 플랫폼 TOI는 AI가 즉석에서 생성한 프론트엔드 코드를 완벽히 격리된 환경에서 즉각 실행해야 하는 독특한 과제를 안고 있었습니다. 이 글은 전통적인 데브 서버 방식과 샌드박스 도구의 실패를 딛고 가상 파일 시스템, WebAssembly 빌더, Import Map 표준을 활용하여 완전히 독자적인 브라우저용 런타임을 설계해 낸 시니어 엔지니어들의 집요한 기술 검증 과정을 깊이 있게 공유합니다.

  • 01서버 기반 Dev Server에서 공유 컴파일 오류가 발생하여 사용자 격리에 실패했던 PoC 한계 분석
  • 02Sandpack 도입 시 private npm registry 프록시 구성 복잡도와 패키지 전체 다운로드로 인한 47초 로딩 지연 극복
  • 03가상 파일 시스템(VFS)을 설계해 브라우저에 존재하지 않는 빌드 경로와 리소스를 매핑한 노하우 제공
  • 04Go 기반의 esbuild-wasm 빌더를 Web Worker 상에 안착시켜 메인 스레드 블로킹을 방지한 고속 번들링 구현
  • 05패키지 조합을 고유 해시로 묶어 사전에 빌드하고 표준 Import Map 데이터 형식으로 가볍게 바인딩하는 최적화 패러다임 제시

RECOMMENDATION

브라우저 기반 웹 IDE, 실시간 코드 에디터, 로우코드 및 노코드 컴포넌트 실시간 미리보기 시스템을 구축해야 하는 프론트엔드 및 플랫폼 엔지니어들에게 최고의 아키텍처 나침반이 되어줄 글입니다.

The Problem

토스 사내에서 어드민 페이지 수요가 급증함에 따라 중복되는 개발 비용과 보안 정책 적용의 번거로움이 증가했습니다. 이를 해결하고자 자연어와 API 스키마를 활용해 AI가 React 코드를 작성해주는 사내 플랫폼(TOI)을 구축했으나, 여러 사용자가 실시간으로 안전하게 격리된 환경에서 빠른 미리보기(Preview)를 볼 수 있도록 구현하는 데 어려움을 겪었습니다.

The Solution

독립된 실행을 보장하지 못하는 서버 기반 Next.js Dev Server와 초기 로딩 속도가 47초에 달하던 브라우저 기반 Sandpack의 한계를 마주한 후, 자체 Preview Runtime을 브라우저에 직접 구축했습니다. 이를 위해 메모리상에 레이어별 가상 파일 시스템을 만들고, Web Worker 내부에서 esbuild-wasm을 실행해 고속으로 브라우저 내 빌드를 수행했으며, 의존성 패키지 조합을 packageSetHash 단위로 묶어 Import Map을 활용해 런타임에 주입했습니다.

The Result

2026년 2월 사내 공개 후 6개월 동안 총 439개의 프로젝트와 2,418개의 하위 페이지가 성공적으로 생성되었습니다. 기존에 47초가 걸리던 무거운 브라우저 기반 패키지 로딩 병목을 완전히 해결하고 실시간에 가깝게 빌드 및 렌더링을 제공하는 고속 미리보기 환경을 달성했습니다.

Trade-off

다양한 프로젝트의 복잡한 패키지 요구사항에 대응하기 위해 사용자 정의 dependencies 조합마다 고유한 해시를 부여하고 서버 단에서 워크스페이스를 빌드해 준비해두는 별도의 사전 처리 프로세스와 캐시 인프라 관리가 동반됩니다. 아울러 웹 브라우저의 연산 자원(Web Worker 및 WebAssembly)을 대량으로 활용하므로 클라이언트 기기 사양에 따라 대규모 코드 빌드 시 성능 제약이 가해질 수 있습니다.

03

Key Concepts

Concept · 01

esbuild-wasm

Go 언어로 고속 번들링을 수행하는 빌드 엔진 esbuild를 WebAssembly로 컴파일하여 웹 브라우저 환경에서도 Node.js 없이 완벽하게 작동하게 만든 빌더입니다.

  • TypeScript와 JSX로 이루어진 AI 생성 코드를 브라우저가 직접 실행 가능한 JavaScript ESM 번들로 전환하는 빌드 엔진으로 활용했습니다.
  • 메인 스레드 간섭을 막기 위해 Web Worker 환경 내부에서 안전하게 실행되도록 설정했습니다.
Concept · 02

Import Map

브라우저의 기본 기능으로서 패키지 명칭(bare module specifier)을 실제 다운로드하고 호스팅받을 모듈의 주소 URL로 해석해 주는 명세 매핑 방식입니다.

  • 빌드 단계에서 제외된 react나 date-fns 같은 주요 의존성 모듈들을 브라우저 런타임에 직접 실시간 매핑하기 위해 사용했습니다.
Concept · 03

가상 파일 시스템 (Virtual File System)

물리 디스크가 없는 브라우저 환경 내에서 가상 경로와 실제 파일 텍스트 버퍼를 맵 형태로 매핑해 빌드 시스템이 상대 경로 임포트 분석을 지속할 수 있도록 돕는 인메모리 공간입니다.

  • 사용자 파일, 프로젝트 공유 파일, Preview 템플릿, 런타임 등 변경 주기가 다른 네 가지 성격의 레이어를 하나로 결합하는 가상 스토어를 구축했습니다.
  • esbuild가 가상 디스크 요청 시 파일 해석을 수행할 수 있도록 커스텀 플러그인을 연결해 바인딩했습니다.