AI가 만든 코드가 어드민이 되기까지
이현재 토스 · 토스 기술 블로그
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 대신 문서 전체를 교체해 구현 복잡도를 낮출 수 있다.
소개
실시간으로 생성되는 코드를 어드민 화면으로 보여 주기 위해, 개발 환경을 브라우저 안으로 옮긴 이야기를 소개해요.
비슷한 학습 자료
컨퍼런스 SLASH
고객의 소중한 정보를 다루는 ‘어드민 서비스’는 어떻게 만들어져야 할까요? 토스의 혁신적인 개발 문화를 뒷받침해주는 안전하고 편리한 어드민 개발 과정을 소개합니다. 조유성 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3J1HPGs 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #serverdrivenui #어드민 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및...
프론트엔드 UI/UX
문서 신지호
브라우저용 번들링 플러그인, 직접 만들었어요
문서 김민지
디자이너가 시안 대신 앱을 만든 이유
문서 이은호/안정빈
토스의 AI 그래픽 생성기, 토스트를 소개합니다 #2
책 권경열 예스24
하네스 엔지니어링으로 완성하는 에이전틱 AI
책 권경열 예스24
프롬프트 몇 줄만으로는 부족하다, 코드로 통제하는 AI 에이전트를 만들 차례! 이 책은 ReAct 패턴을 프레임워크 없이 직접 구현하는 것부터 시작해, 모델을 코드로 감싸고 통제하는 ‘하네스 엔지니어링’으로 에이전트를 설계합니다. 툴 사용, 단기·장기 메모리, 컨텍스트 엔지니어링, RAG, 랭그래프 워크플로, 멀티 에이전트 오케스트레이션까지 하나씩 직접 구현하며 원리를 익힙니다. 매일 아침 시장 브리핑을 전송하는 정보 워크플로 에이전트, 스스로 에러를 고치는 자기수정 데이터 분석가, 카메라로 방을 보고 물건을 옮기는 멀티모달 집사 로봇까지, 서로 다른 도메인의 실전 프로젝트 3개를 처음부터 끝까지 완성합니다. 여기서 멈추지 않습니다. 프롬프트 인젝션과 위험한 실행을 막는 보안 가드레일, 비용과 데이터 보안을 고려한 vLLM 기반 로컬 서빙, FastAPI와 AWS Lambda를 활용한 배포, 랭스미스 기반 관측성과 비용 모니터링까지 다룹니다. 잘 작동하는 데모를 넘어, 실제로 일하고...
데브옵스 · 인프라 AI에이전트 개발 보안