요구사항 커버리지
각 카드를 눌러 실제 동작하는 데모 화면으로 바로 이동할 수 있습니다.
인터랙티브 뷰어 원리
클라이언트가 제공하는 콘텐츠 JSON을 그대로 호출해 렌더링합니다. 회차 파일만 교체하면 새 이야기가 즉시 반영됩니다.
JSON 스키마
클라이언트 에디터 산출물
파서 · 검증
블록·무드 구조 해석
블록 렌더
텍스트 · 삽화 배치
무드 엔진
배경색 · 음악 · 포인트 컬러
{
"episodeId": "ep-12",
"title": "12화. 새벽의 문턱",
"access": "paid",
"moods": [
{ "id": "dawn", "label": "새벽 안개",
"color": "#4d7cff",
"bgm": { "kind": "synth", "preset": "calm" } }
],
"blocks": [
{ "id": "b-01", "type": "text", "mood": "dawn",
"text": "창밖으로 스며드는 달빛이…" },
{ "id": "b-02", "type": "illust",
"src": "/content/illust/ep12-dawn.svg" }
]
}개발 일정
계약 · 착수
즉시
요구사항 확정, JSON 스키마 협의
상세 기획 · UI/UX
2주
화면 설계서, 모바일 우선 디자인
프런트 · 백엔드 개발
8주
뷰어·결제·관리자, 카카오·PG 연동
QA · 안정화
2주
크로스 브라우저, PWA, 부하 점검
오픈 · 납품
10.24
결과 발표회 맞춤 서비스 오픈
PWA 기반으로 홈 화면에 추가하면 네이티브 앱처럼 실행됩니다. Next.js · TypeScript · Tailwind로 구축한 정적 배포는 빠르고 안정적입니다.
모바일에서 바로 체험
QR을 스캔해 직접 감상하고, ‘홈 화면에 추가’로 PWA 설치를 확인해 보세요.
배포 URL은 결과물 확정 후 삽입됩니다