피드로 돌아가기
Dev.toFrontend
원문 읽기
Sandboxed iframe와 Streaming 분리를 통한 안전한 실시간 AI UI 렌더링 구현
I built /ai inside a notes app — here's how I render generated UI components safely
AI 요약
Context
노트 앱 내에서 AI가 생성한 인터랙티브 UI 컴포넌트를 즉시 실행하려는 요구사항 발생. 기존의 단순 코드 블록 방식은 별도 에디터 필요로 인한 작업 흐름 단절과 생성 중 잦은 리렌더링으로 인한 성능 저하 문제를 가짐.
Technical Solution
- Tiptap 기반 Custom AiNode 설계로 생성된 HTML/CSS/JS 코드를 속성값으로 보유하고 iframe으로 렌더링하는 구조 채택
- Streaming 데이터와 Rendering 로직을 분리하여 useRef에 코드를 누적한 후 스트림 종료 시점에 단 한 번 updateAttributes를 호출하는 최적화 수행
- iframe sandbox 설정에서 allow-same-origin을 제외함으로써 부모 DOM 및 LocalStorage 접근을 원천 차단한 보안 격리 환경 구축
- CDN 기반 Tailwind CSS 주입 방식으로 별도 빌드 단계 없는 즉각적인 스타일 적용 환경 구현
- 기존 코드와 수정 요청을 함께 전달하는 /api/edit 엔드포인트 설계를 통해 Full Regeneration 대비 추론 속도와 일관성 향상
실천 포인트
- AI 생성 콘텐츠 실행 시 allow-scripts만 허용하고 allow-same-origin을 제거하여 XSS 및 데이터 유출 방지 - LLM 스트리밍 출력물을 UI에 즉시 반영할 때 발생하는 리렌더링 병목 해결을 위해 버퍼링 후 일괄 업데이트 전략 검토 - 기존 결과물 기반의 Refine 기능을 구현할 때 전체 재생성 대신 Current Code와 Instruction을 함께 전달하는 Context 주입 방식 적용