토스, AI 생성 어드민 코드 즉시 실행 파이프라인 공개

ai.euno.news 자동 뉴스 요약

토스가 자연어로 요청한 화면을 AI가 React 코드로 생성하고, 그 코드를 실행 시점에 자동으로 보안 정책과 결합해 어드민으로 서비스하는 사내 플랫폼 ‘TOI’의 구조를 공개했다. 2026년 2월 사내 출시 후 6개월 만에 프로젝트 439개, 하위 페이지 2,418개가 이 플랫폼으로 만들어졌다.¹

토스에서는 여러 팀이 크고 작은 어드민을 계속 새로 만들고 고쳐야 했다. 문제는 어드민 하나를 만들 때마다 스캐폴딩, 인증, 배포 같은 반복 작업뿐 아니라 개인정보 마스킹, 조회 사유 수취, 다운로드 파일 암호화 같은 보안 요건까지 매번 새로 챙겨야 한다는 점이었다. 수요가 늘어날수록 개발·보안·배포 비용이 함께 불어나는 구조였다.

TOI는 이 문제를 어드민을 ‘정책’과 ‘화면’ 두 영역으로 나눠서 풀었다. 사용자가 어드민에서 쓸 API를 TOI에 등록하면, 이후 모든 호출은 TOI 서버를 거쳐 원래 서버로 전달된다. 이 과정에서 호출 기록이 자동으로 남고, API별로 설정한 개인정보 마스킹이나 파일 암호화 같은 정책이 프록시 단계에서 강제 적용된다. 필수 보안 정책은 개발자가 신경 쓰지 않아도 자동으로 걸린다. 반면 테이블을 그리고 필터를 붙이고 상세 페이지로 이동하는 화면 로직은 AI가 API의 요청·응답 스키마를 참고해 React 코드로 만든다.

문제는 AI가 코드를 만드는 것과, 그 코드를 사용자가 실시간으로 확인하는 것 사이의 간극이었다. 토스는 이를 위해 두 가지 방식을 순서대로 시도했다가 모두 폐기했다. 처음에는 서버에 Next.js Dev Server를 띄우고 iframe으로 연결하는 방식을 썼는데, 한 프로세스를 여러 사용자가 공유하다 보니 사용자 A의 코드에서 난 컴파일 에러 오버레이가 다른 페이지를 편집 중인 사용자 B의 화면에도 나타나는 구조적 한계가 있었다. 두 번째로는 CodeSandbox의 Sandpack을 도입해 코드 실행 위치 자체를 서버에서 각 사용자의 브라우저로 옮겼다. 사용자별 격리 문제는 해결됐지만, 진입 후 Preview가 뜨기까지 47초가 걸렸다. Sandpack이 렌더링 시작 시점에 프로젝트에 선언된 패키지를 전부 내려받는 방식으로 동작했기 때문이다.

인증 문제도 겹쳤다. 토스의 사내 패키지는 인증된 요청만 허용하는 private registry로 관리되는데, 인증 정보를 브라우저 런타임에 그대로 노출할 수 없었다. 이를 우회하기 위해 인증을 대신 처리하는 Proxy API를 만들었지만, 패키지 metadata 안의 dist.tarball 필드가 Proxy API가 아닌 원본 registry 주소를 직접 가리키고 있어 tarball 요청의 URL도 별도로 치환해야 했다. 사내 패키지가 다른 사내 패키지에 의존하는 경우까지 고려하면, 의존성 그래프를 내려가는 모든 단계에서 같은 인증·치환 로직을 반복 적용해야 했다. 여기에 Sandpack Preview가 별도 origin의 iframe에서 실행되면서 발생하는 CORS와 PNA(Private Network Access) 문제까지 더해지자, 토스는 문제를 하나씩 우회하는 대신 자체 실행 환경인 ‘Preview Runtime’을 새로 만드는 쪽을 택했다.

두 번의 시도를 거치며 풀어야 하는 문제가 세 가지로 정리됐고, 그중 첫 번째가 브라우저에서 코드를 빌드하는 문제였다. Preview Runtime이 풀어야 했던 첫 번째 과제는 브라우저에 파일 시스템이 없다는 점이었다. 빌드 도구가 ./components/Table 같은 import 경로를 실제 파일로 해석하려면 프로젝트 파일 시스템이 필요한데, 브라우저에는 이를 조회할 대상이 없다. 토스는 경로와 파일 내용을 매핑하는 가상 파일 시스템을 직접 구현해 이 문제를 풀었다. 이 가상 파일 시스템은 소유 범위와 변경 주기 기준으로 사용자 파일, 프로젝트 공유 파일, Preview 템플릿 파일, Preview Runtime 파일 네 레이어로 나뉜다.

공개된 자료에는 가상 파일 시스템 설계까지만 담겨 있고 나머지 두 과제에 대한 구체적인 해법은 확인되지 않았다.

읽기 목록은 이 브라우저에 저장됩니다.