App Bridge와 Server Route 분리를 통한 Storyblok 맞춤형 워크플로우 통합 설계

Context

기존 Storyblok Webhook은 이벤트 기반의 자동 실행만 가능하여 에디터의 수동 제어 및 특정 시점의 실행 요청 대응에 한계가 있음. 에디터가 외부 대시보드나 ID 복사 없이 Visual Editor 내에서 즉각적으로 외부 프로세스를 트리거해야 하는 컨텍스트 스위칭 제거 필요성이 대두됨.

Technical Solution

• App Bridge postMessage를 활용하여 iframe 내 플러그인이 현재 편집 중인 스토리 컨텍스트를 동적으로 획득하는 구조 설계
• 보안 강화를 위해 OAuth 토큰, Client Secret, Webhook URL 등 민감 정보를 브라우저 UI에서 완전히 배제하고 SvelteKit Backend에서 처리하는 계층 분리
• Storyblok Management API를 통한 Space-level 설정을 백엔드에서 조회하여 각 워크스페이스별 독립적인 설정값을 적용하는 동적 구성 체계 구축
• 서버 사이드 라우트를 통한 Payload 포워딩 방식으로 클라이언트 노출 없이 외부 Webhook으로 데이터를 전송하는 Proxy 아키텍처 구현
• mkcert 기반의 로컬 HTTPS 환경 구축을 통해 Storyblok iframe 보안 제약 사항을 해결하고 개발 생산성 확보