최대한 간단하게 MVP 버전 만들기

사이트 도메인과 소셜 계정들까지 준비가 되었으니 이제 본격적으로 MVP(Minimum Viable Product) 버전을 프로토타이핑해 봅니다.

첫째 날에 클로드가 뚝딱하고 만들어준 프로토타입 웹 페이지는 디자인은 그럴싸했지만 텍스트로만 구성되어 있고 스토리 분기가 제대로 구현되어 있지도 않았습니다.

둘째 날에 100일 계획을 수립하면서 정해진 MVP 개발 방법은 다음과 같습니다.

  • 스토리팩 생성기와 서비스 웹사이트로 나누어 개발
    • 스토리팩 생성기: 인터렉티브 버전 고전 소설 콘텐츠(스토리팩)를 AI를 활용해 생성
    • 서비스 사이트: 콘텐츠 팩토리 모듈이 생성한 스토리 팩을 Static Site 형태로 서비스
  • 콘텐츠 팩토리의 스토리 팩 생성은 콘텐츠 유형에 따라 적당한 AI를 사용
    • 클로드: 스토리 노드와 분기점 등 텍스트 생성, 스토리 팩 생성 과정을 관리하는 Agent 역할
    • 제미나이 (나노 바나나): 스토리 노드마다 들어갈 일러스트레이션 이미지 생성
    • 음악 생성 AI(Suno?): 배경 음악 생성 <- 일단 첫 번째 MVP 버전에서는 제외
  • 서비스 사이트는 SSG(Static Site Generator) 프레임워크 중 업무 상 익숙한 Astro를 사용
    • MVP 버전에는 사용자 로그인 등의 기능을 고려하지 않아서 데이터베이스 등 백엔드는 불필요

최초 버전의 스토리팩 생성기로 첫 콘텐츠가 만들어지면, 역시 최초 버전의 웹 사이트에 해당 스토리팩을 적용해 첫 번째 MVP 버전이 나오게 됩니다.

이후 여러 차례의 테스트와 개선을 반복하며 콘텐츠 및 웹 사이트의 완성도를 높여 나갈 계획입니다.

스토리팩 생성기 설계

MVP 개발 순서에 따라 스토리팩 생성기를 만들기 전에, 해당 모듈의 동작 방식과 스토리팩 데이터의 구성을 설계합니다.

기본적으로 스토리팩 생성기의 동작은 생성할 콘텐츠 (고전 소설 중 하나) 제목을 입력하면 인터액티브 버전의 스토리 라인과 각 페이지 별 일러스트 이미지를 생성해 출력하는 것입니다.

스토리팩 생성은 로컬 환경에서 결과물을 만드는 방식이므로 CLI 환경에 적합한 클로드 코드를 이용합니다. 이후 생성된 스토리팩을 Static 웹사이트에 추가하는 과정도 클로드 코드를 통해 진행하게 됩니다.

스토리팩 생성 과정을 세분화하면 다음과 같습니다.

스토리 구조 만들기

클로드에 새로운 스토리팩을 생성할 고전 소설 제목을 알려주면, 클로드는 해당 소설의 줄거리를 주요 포인트마다 나누어 스토리 노드를 구성합니다.

장면 페이지는 스크롤 없이 표시

하나의 스토리 노드는 이후 웹 사이트에서 하나의 장면 페이지가 되며, 한 장면은 모바일 브라우저 화면을 기준으로 스크롤 없이 읽을 수 있는 분량이어야 합니다. 화면에는 일러스트 이미지까지 표시되어야 하므로 노드 하나의 텍스트 길이는 클로드가 제안한 최대 75단어 이내로 제한했습니다.

일반 노드, 분기 노드, 엔딩 노드

각각의 스토리 노드는 전체 스토리에서의 위치와 역할에 따라 다음과 같은 유형으로 구분합니다.

  • 일반 노드: 다음 노드가 하나만 있는 노드입니다. 해당 장면 페이지에는 사용자 선택 없이 ‘다음’ 버튼만 존재합니다. 시작 노드도 이 유형에 해당됩니다.
  • 분기 노드: 스토리 분기가 일어나는 노드입니다. 사용자는 선택에 따라 여러 개의 다음 노드 중 하나로 이동하게 됩니다.
  • 엔딩 노드: 다음 노드가 없이 스토리가 완료되는 노드입니다. 사용자 선택에 의해 달라진 결말과 그에 대한 성격 유형을 표시해 줍니다. 최소 4가지 이상의 엔딩을 생성해 리플레이성을 높이고 성격 유형을 세분화하도록 합니다.

시작부터 엔딩까지 3분 이내로

고전 소설마다 분량이 다르고 원본은 최소 백 페이지 이상이지만, 모바일 환경과 숏폼에 익숙한 이용자들을 위해 하나의 스토리를 엔딩까지 진행하는 데 대략 3분 정도 소요되도록 텍스트 길이를 조절합니다.

클로드에 의하면, 위에서 정한 노드 당 단어 수(최대 75단어)와 1회 플레이 소요 시간(3분)을 고려할 때 한 스토리 라인(시작->엔딩)의 노드 수는 대략 12~15개 정도가 적당하다고 합니다.

스토리 구조 파일 생성

스토리 구조 파일은 json 형식으로 만들어지며, 크게 메타데이터(제목, 작가, 출판연도 등)와 스토리 노드 배열로 구성됩니다.

클로드의 도움으로 설계한 스토리 노드의 구조는 다음과 같습니다. (일반 노드의 경우)

{
  "nodeId": "chapter1_start",
  "pageType": "normal",
  "text": "Alice sits by her sister on the riverbank, drowsy and bored. Suddenly, a White Rabbit with pink eyes runs close by her, consulting a watch from its waistcoat-pocket before hurrying on.",
  "artPrompt": "Whimsical fantasy illustration of a young girl, Alice, in a blue dress, looking surprised at a frantic White Rabbit in a waistcoat holding a pocket watch. Sunny riverbank setting, storybook style.",
  "original": true,
  "nextNodeId": "chapter1_choice1"
}
  • nodeId: 각 노드를 구분하고 다음 노드를 링크하기 위해 사용하는 짧은 문자열
  • pageType: 노드 유형 (일반, 분기, 엔딩)
  • text: 장면 페이지에 표시될 텍스트
  • artPrompt: 해당 장면을 묘사할 일러스트 이미지 생성용 프롬프트
  • original: 해당 스토리 라인이 원작의 스토리인지 새로운 스토리인지 구분
  • nextNodeId: 다음 버튼 클릭 시 이동할 노드

일러스트 이미지 만들기

스토리팩에 필요한 일러스트 이미지는 세 가지 종류가 있습니다.

  • 커버 이미지: 콘텐츠 목록과 상세 페이지(스토리 시작 전 화면)에 사용
  • 장면 이미지: 내용 이해에 도움이 되도록 각 장면 텍스트에 기반한 이미지를 표시
  • 엔딩 이미지: 각각의 결말을 하나의 이미지로 묘사

모든 일러스트 이미지는 원작 소설의 시대 배경에 어울리면서 전체 스토리 라인에서 시각적 일관성이 유지되어야 합니다. (캐릭터 얼굴, 의상 등)

이를 위해 1단계 스토리 구성 후 이미지 생성을 위한 스타일 가이드 프롬프트와 주요 캐릭터별 특징을 json 스토리 파일에 추가하도록 합니다.

상세 프로세스

스토리팩 생성의 상세 과정을 다이어그램으로 만들어 정리했습니다.

다음은 위 설계에 따라 실제 스토리팩 생성기를 만들어 보겠습니다.