AI
AI가 만든 코드가 어드민이 되기까지
두줄요약
AI가 만든 코드를 어드민 화면으로 보여 주기 위해 브라우저 기반 Preview Runtime을 구축한 과정을 소개했습니다. 가상 파일 시스템, esbuild-wasm, import map, 패키지 사전 빌드로 격리성과 속도를 함께 해결했습니다.
문제 상황
- 어드민 제작에 필요한 스캐폴딩, 인증, 배포, 보안 정책 적용 등 반복 작업의 누적 비용 증가
- AI가 생성한 코드를 실시간으로 보여 주려면 브라우저 안에서 실행 가능한 개발 환경 필요
- 여러 사용자의 편집 환경 격리, 사내 패키지 사용, 빠른 첫 화면 응답이라는 추가 요구
해결 방법
- Dev Server와 Sandpack을 거쳐, 브라우저 안에서 코드를 빌드·실행하는 Preview Runtime 구축
- 가상 파일 시스템과 esbuild-wasm으로 브라우저에서 번들링하고, import map으로 사전 빌드한 패키지 연결
- 패키지 조합을 packageSetHash로 관리해 사전 빌드·캐시하고, 문서 전체 교체 방식으로 화면 갱신
