백엔드 없이 도는 데모 사이트 — 콘텐츠 제작 툴까지

• 분석 플랫폼의 퍼블릭 데모 사이트 — 로그인 없이 제품을 그대로 둘러보는 용도

증상

• 실제 서버에 붙이면 계정·데이터·비용이 얽혀 공개할 수 없음
• 데모 내용을 바꿀 때마다 개발자가 데이터를 직접 고쳐야 해 갱신이 병목

원인

• 화면 코드에 데모 분기를 심는 방식은 제품 코드와 데모가 갈라지게 만듦
• 목 데이터를 손으로 만들면 실제 응답 형태와 조용히 어긋남 — 데모만 멀쩡하고 제품이 깨지는 상태가 됨

조치

• 서비스워커로 네트워크를 가로채는 대신 API 클라이언트에 미들웨어를 끼우는 쪽을 택함. 데모 라우트에서만 미들웨어를 붙여 제품 경로는 그대로 두고, 화면 코드에는 분기를 심지 않음
• 목 데이터에 OpenAPI 스펙에서 생성된 타입을 그대로 적용 → 서버 계약이 바뀌면 데모 데이터가 컴파일 에러로 잡힘
• 팀이 직접 데모를 갱신하도록 편집 툴과 CLI(생성·수정·삭제)를 함께 구축 — 목 데이터를 개별 모듈로 두고 등록 지점을 CLI가 편집해, 사람이 목록을 관리하지 않음
• 개발 전용 화면으로 구성해 실사용 환경에는 노출되지 않게 차단

결과

• 계정 발급 없이 제품을 보여줄 수 있는 데모 확보
• 데모 갱신이 개발자 손을 거치지 않아도 되는 구조
• 목 데이터가 API 스펙에 묶여, 제품이 바뀌면 데모가 조용히 낡지 않고 빌드에서 잡힘

같은 스펙을 소스로 쓰는 쪽 → OpenAPI → TanStack Query 훅 자동생성