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

어드민마다 개발·보안·배포 작업을 반복하는 부담을 줄이기 위해 토스는 API 정책을 플랫폼에서 적용하고, AI가 생성한 React 코드를 실행하는 사내 플랫폼 TOI를 만들었다. 서버의 Next.js Dev Server는 사용자 간 오류가 공유됐고, Sandpack은 패키지를 매번 내려받아 첫 화면이 늦고 사내 패키지 인증과 네트워크 제약도 해결해야 했다. 이를 개선하기 위해 가상 파일 시스템과 esbuild-wasm으로 브라우저에서 코드를 빌드하고, Yarn과 Vite로 패키지 조합을 미리 준비해 import map으로 연결했으며, 실행 결과는 iframe 문서 전체를 교체해 표시했다. 그 결과 Preview 첫 화면까지 걸리는 시간은 47초에서 1.3초로 줄었고, 제품 요구에 맞춰 기존 도구를 조합하는 엔지니어링의 중요성을 확인했다.

• 여러 사용자가 동시에 편집하는 미리보기에서는 실행 환경을 사용자별 브라우저로 옮겨 오류가 서로 전파되지 않게 할 수 있다.
• 브라우저에서 파일을 다루려면 가상 파일 시스템을 두고, esbuild-wasm 플러그인으로 import 경로와 파일 내용을 연결한다.
• 패키지는 개별 파일이 아니라 전이 의존성과 싱글톤 관계를 포함한 조합으로 관리하고, lockfile 기반 해시로 조합을 식별한다.
• 미리보기에서 편집 상태를 보존할 필요가 적다면 HMR 대신 문서 전체를 교체해 구현 복잡도를 낮출 수 있다.