토스, AI 어드민 제작 플랫폼 'TOI' 공개… 브라우저 내 Preview Runtime으로 로딩 1.3초 달성

토스(Toss)는 사내 어드민 제작 플랫폼 TOI를 공개하며, AI가 생성한 React 코드를 브라우저에서 실시간으로 실행하고 검증하는 Preview Runtime 기술을 도입했다. TOI는 API 등록 후 자연어로 화면을 요청하면 AI가 스키마를 참고해 코드를 생성하는 구조로, 2026년 2월부터 8월까지 프로젝트 439개와 하위 페이지 2,418개를 생성했다.

실행 환경의 진화

초기에는 Next.js Dev Server를 iframe으로 연결하는 방식을 시도했으나, 다중 사용자 환경에서 컴파일 에러가 격리되지 않는 문제가 발생했다. 이후 Sandpack을 적용해 사용자별 격리에는 성공했으나, 패키지 다운로드 지연으로 첫 화면 표시까지 47초가 소요되는 성능 이슈와 사내 패키지 연결의 기술적 복잡성으로 인해 채택을 보류했다.

브라우저 내 빌드 및 패키지 최적화

TOI는 esbuild-wasm을 활용해 브라우저 내부에서 TypeScript와 JSX를 변환하며, 가상 파일 시스템(Virtual File System)을 구현해 import 경로를 해석한다. 의존성 패키지는 빌드 대상에서 제외하고, Yarn으로 설치된 패키지 조합을 Vite로 사전 빌드하여 S3에 업로드한다. 브라우저는 import map을 통해 필요 시점에 패키지를 연결하며, 동일한 패키지 조합은 해시를 공유해 재빌드를 생략하고 캐시를 활용한다.

성능 및 사용자 경험

HMR 대신 문서 전체 교체 방식을 채택해 빌드 실패 시 이전 정상 화면을 유지하는 트랜잭션 커밋과 유사한 안정성을 확보했다. 반복적인 패키지 다운로드 작업을 사전 빌드로 이동함으로써, Preview Runtime 구축 후 첫 화면 표시까지 걸리는 시간을 1.3초로 단축했다. TOI는 정책(보안, 마스킹)과 화면(UI)을 분리해 관리하며, AI 코드 생성 비용 절감에 따라 제품 가치 정의와 UX 설계가 엔지니어의 핵심 역할로 부상함을 시사한다.