ShipSF 워크숍 - Codex 및 Vercel로 앱에 생성형 UI 에이전트 내장하기

하이라이트

• Vercel 샌드박스는 수백 밀리초 만에 실행되며 ActiveCPU 기반으로 작동하여 활성 상태에서만 과금된다.

• Vercel 드라이브는 샌드박스 간 공유되는 영구 스토리지를 제공하여 사용자 메모리와 스타일 가이드를 유지한다.

• OpenAI Codex와 초고속 서비스 티어를 결합하면 실시간 동적 생성형 UI 컴포넌트를 지연 없이 렌더링할 수 있다.

• 애플리케이션 에이전트화 과정은 마크다운 기반의 재사용 가능한 스킬 파일로 추출된다.

• 기존 앱 프로젝트와 에이전트 백엔드 프로젝트를 Vercel에 각각 분리하여 배포하면 인프라 격리가 유지된다.

타임라인

1. 00:00 - 09:28

   생성형 UI 에이전트 도입과 기본 데모

   기존 정적 쇼핑몰 인터페이스에 에이전트 기반 쇼핑 어시스턴트가 추가된다. 주말 옷차림을 요청받은 에이전트는 인심 길이 같은 개인 선호도를 반영해 상품을 찾고 장바구니 담기 작업을 수행한다. 모델이 실시간으로 판단하여 동적 UI를 구성하므로 사전 프로그래밍되지 않은 유연한 상호작용이 가능하다.

   • Codex와 Vercel을 활용하여 기존 e커머스 쇼핑몰 앱에 생성형 UI 에이전트가 내장된다.
   • 사용자의 자연어 요청에 따라 에이전트가 재고를 검색하고 개인 취향에 맞는 상품을 실시간 UI 타일로 생성한다.
   • OpenAI의 초고속 서비스 티어는 동적 생성형 UI 렌더링에 필요한 낮은 지연 시간을 제공한다.
2. 09:28 - 20:20

   Vercel 샌드박스와 드라이브를 통한 메모리 및 개인화 구현

   에이전트가 실행되는 동안 보안 경계를 유지하기 위해 격리된 샌드박스 환경이 사용된다. ActiveCPU 기반 과금 방식을 적용해 유휴 상태의 비용 발생 없이 샌드박스를 미리 띄워두고 빠른 응답을 보장한다. 프라이빗 사용자 드라이브에 저장된 선호도 데이터는 스냅샷 형태로 제너티브 UI 샌드박스에 전달되어 일관된 개인화 경험을 제공한다.

   • Vercel 샌드박스는 격리된 가상 머신 환경을 제공하여 에이전트 코드를 수백 밀리초 만에 안전하게 실행한다.
   • Vercel 드라이브는 영구 스토리지를 지원하여 여러 샌드박스 세션 간에 사용자 메모리와 스타일 가이드를 공유한다.
   • 드라이브의 읽기 전용 스냅샷을 샌드박스에 마운트하여 데이터 변경으로 인한 혼란을 방지한다.
3. 20:20 - 39:44

   워크플로우 스킬화와 Vercel 배포

   복잡한 프롬프트 엔지니어링 과정을 반복하지 않도록 엔드투엔드 에이전트화 원칙을 마크다운 스킬로 정의한다. 배포 단계에서는 기존 앱과 생성형 UI 인프라인 에이전트 백엔드를 두 개의 독립된 프로젝트로 나누어 Vercel에 퍼블리싱한다. 이를 통해 인프라 격리를 유지하면서 로컬에서 개발한 개인 스타일리스트 기능을 프로덕션 환경에 완벽하게 반영한다.

   • 에이전트화 프로세스는 마크다운 기반의 재사용 가능한 스킬 파일로 추출된다.
   • 기존 애플리케이션 프로젝트와 에이전트 백엔드 프로젝트를 Vercel에 각각 분리하여 배포한다.
   • Vercel 플러그인은 개발 환경 내에서 문서화, 디버깅, 관측 가능성 파악을 위한 통합 도구를 제공한다.