핵심 요약
토스가 TOI의 Preview Runtime를 구축해 AI가 만든 어드민 코드를 브라우저에서 실시간으로 실행하고 화면에 미리 보여주도록 했으며, 첫 화면 도달 시간을 1.3초로 측정했습니다. 6개월간 439개 프로젝트와 하위 페이지 2,418개가 생성되는 등 대규모 어드민 운영에 적용 가능한 구조를 제시했습니다.
구현 방법
- Dev Server와 Sandpack의 시도를 거쳐, 다수 사용자의 독립 실행과 빠른 로드를 위한 Preview Runtime를 선택적으로 도입
- 다층 가상 파일 시스템 설계: 파일 소유 범위와 변경 주기에 따라 사용자 파일, 프로젝트 공유 파일, Preview 템플릿 파일, Preview Runtime 파일의 4개 레이어로 구성
- esbuild-wasm을 Web Worker에서 번들링하고, createVirtualFsPlugin을 통해 가상 파일 시스템을 연결
- 외부 패키지는 external로 처리하고, 실행 시점에 미리 준비한 패키지를 import map으로 연결
- 패키지 준비 방식: Yarn으로 의존성 설치 및 lockfile 생성, Vite로 브라우저용 패키지 빌드, importmap.json 생성 후 S3에 업로드
- 실행 방식: 빌드가 끝난 후 새 HTML 문서를 생성해 iframe으로 로드, 페이지 교체를 트랜잭션 커밋처럼 처리하여 실패 시 마지막 정상 화면 유지
- 문제점 대응: CORS/PNA 및 private 패키지 인증 이슈를 해결하기 위한 프록시 및 인증 전략 도입
- 성능 개선 수치: Sandpack 대비 첫 화면 도달 시간이 대폭 단축되며, 최종적으로 1.3초에 첫 화면이 나타남
주요 결과
- 브라우저 기반에서 AI가 생성한 코드를 격리된 환경에서 빠르게 시연 가능
- 패키지 조합(Import map 기반의 프리빌드)으로 로딩 시간과 복잡도를 관리
- 439개 프로젝트, 2,418개 하위 페이지가 6개월간 생성되는 대규모 운영 시나리오를 지원
- 프리뷰 런타임 도입으로 정책 적용과 실행 환경 분리 등 운영 안전성 강화
