화면 코드는 AI가 만들고 데이터 정책은 플랫폼이 맡는다
토스는 등록한 API의 요청·응답 스키마를 참고해 AI가 React 화면 코드를 만드는 사내 어드민 플랫폼 TOI를 소개했다. 이현재의 글은 2026년 2월 사내 공개 뒤 8월까지 프로젝트 439개와 하위 페이지 2,418개가 만들어졌다고 설명한다. 이번 사례의 초점은 코드를 생성하는 모델보다 실시간으로 생성·편집한 코드를 실행해 보여 주는 환경에 있다.
API 호출은 먼저 TOI에 등록한 뒤 서버의 프록시를 거쳐 원래 서버로 전달된다. 이 과정에서 호출 기록과 개인정보 마스킹, 조회 사유 수취, 다운로드 파일 암호화 등의 설정·필수 정책을 적용한다고 밝혔다. 표와 필터 같은 화면 표현은 AI에 맡기되 데이터 취급 정책을 매번 생성 코드에 다시 구현하도록 하지 않는 구분이다.
공유 개발 서버에서 사용자별 브라우저 실행으로 옮겼다
처음 공유 Next.js 개발 서버를 iframe에 연결했을 때 한 사용자의 컴파일 오류가 다른 사용자의 미리보기에도 나타났다고 설명한다. 다음 시도인 Sandpack은 브라우저별 실행을 분리했지만 첫 화면까지 47초가 걸렸다고 밝혔다. 사내 패키지의 메타데이터와 압축 파일에 인증 프록시를 적용하고 별도 출처 iframe의 API 접근 조건을 처리하는 부담도 있었다.
자체 Preview Runtime은 경로와 내용을 연결하는 가상 파일 시스템을 만들고 사용자·프로젝트·템플릿·실행 환경의 네 레이어로 파일을 관리한다. esbuild-wasm으로 TypeScript·JSX를 변환하고 앱 코드를 ESM 번들로 만들며 Web Worker에서 빌드를 처리했다. esbuild 공식 문서도 브라우저에서 WebAssembly와 Worker로 비동기 API를 사용할 수 있다고 설명한다.
패키지 조합을 미리 만들고 성공한 화면을 교체한다
패키지는 앱 번들에 넣지 않고 사전 빌드한 파일을 import map으로 연결한다. 팀은 패키지를 각각 묶으면 React 인스턴스가 달라지는 문제가 생길 수 있어 의존성 전체의 조합을 관리했다고 설명한다. 공개 진입점과 lockfile을 해시해 조합 이름을 만들고 Yarn으로 실제 설치한 결과를 Vite로 빌드해 S3에 올렸다. 같은 조합은 저장 파일과 브라우저 캐시를 재사용한다.
코드 변경 후에는 일부 모듈의 HMR보다 새 HTML과 iframe 전체를 교체하는 방식을 택했다. 실패한 결과는 화면에 반영하지 않고 마지막 정상 화면 위에 오류를 표시한다고 설명한다. 팀은 이 구조를 갖춘 뒤 첫 미리보기 화면이 1.3초에 나타났다고 밝혔다. 47초와 1.3초는 해당 사내 환경의 측정이며 Sandpack과 새 구조의 모든 사용 조건에 대한 일반 성능 비교는 아니다.
반복 작업을 변경 시점으로 옮긴 설계다
이 사례의 시간 개선은 코드 생성 자체를 빨리 한 결과로 설명되지 않는다. 매번 미리보기를 열 때 의존성을 찾고 준비하던 일을 패키지 조합이 변경될 때 수행하도록 옮긴 것이 핵심이다. 브라우저는 준비된 자료를 가져와 실행한다. 같은 설계를 검토하는 팀은 최초 패키지 준비와 반복 미리보기의 시간을 나누어 측정해야 사용자가 어느 단계에서 기다리는지 이해할 수 있다.
import map은 모듈 이름을 파일 주소로 연결하는 브라우저 기능이며 패키지 버전 충돌을 해결하는 설치 도구는 아니다. 공식 참조는 지도에 의존하는 모듈보다 먼저 선언·처리해야 한다고 설명한다. 토스가 패키지 매니저의 실제 설치 결과를 사용한 이유는 이 구분과 맞닿아 있다. 주소 연결, 버전 해석과 번들 생성의 역할을 나누면 각 도구가 맡을 수 있는 범위를 명확히 할 수 있다.
미리보기의 격리와 데이터 권한을 함께 설계한다
사용자의 오류가 다른 미리보기에 퍼지지 않는 실행 구조와 데이터 API의 권한은 별개의 문제다. 브라우저에서 실행 위치를 나눴다는 설명만으로 개인정보 정책 전체가 검증됐다고 볼 수는 없다. 사례에서는 TOI 서버가 데이터 취급 정책을 맡고 실행 환경이 화면을 담당한다. 유사한 제품도 생성 코드의 편의성 외에 어떤 경로에서 접근을 확인하고 기록을 남기는지 살펴볼 필요가 있다.
iframe 전체 교체는 이전 DOM과 상태를 다음 화면으로 가져오지 않는 선택이다. 입력 상태를 이어가는 편집기가 아니라 새 코드의 화면을 확인하는 도구라는 제품 요구에 맞춘 판단이라고 설명했다. esbuild 문서도 JavaScript HMR을 기본 구현하지 않는다고 밝힌다. 익숙한 개발 환경의 모든 기능을 재현하기보다 필요한 사용자 동작을 정하고 기존 도구를 조합한 점이 이 설계의 재사용 가능한 부분이다.
출처
토스테크의 원출처와 본문에 표시한 참고자료를 바탕으로 한국어로 재구성했습니다. ‘ARCH.B 분석’은 자료를 읽고 덧붙인 편집 해석입니다.
AI가 만든 코드가 어드민이 되기까지 (새 창)
.png&w=1200&q=75)