스토리는 만들었는데 볼 수가 없었다

스토리팩 생성기랑 이미지 생성기 만드느라 며칠을 쏟아부어서, 지킬 박사와 하이드에 필요한 건 다 준비됐습니다:

  • JSON 형식 스토리 노드 18개
  • 장면 일러스트 18개
  • MBTI 성격 추적 로직

근데 실제로 작동하는 걸 볼 방법이 없더라고요. JSON 파일이랑 이미지가 그냥 폴더에 쌓여만 있었어요.

웹사이트가 필요했습니다.

Astro를 선택한 이유

Claude한테 정적 웹사이트 만들기 좋은 도구가 뭔지 물어봤어요. 필요한 조건들을 설명했습니다:

  • 정적 사이트 생성 (서버 없이 작동)
  • 빠른 페이지 로딩
  • 한국어/영어 지원
  • 배포 쉬운 거

Claude가 Astro를 추천했습니다. 가장 큰 이유는 Astro가 빌드 타임에 전부 정적 HTML로 만들어준다는 점이었어요. 콘텐츠에 JavaScript가 필요 없습니다. 그냥 순수 HTML 파일만.

장점이 확실했어요:

  • 엄청 빠른 로딩 속도
  • 어느 호스팅이든 다 됨 (GitHub Pages, Netlify, Cloudflare)
  • 호스팅 비용 거의 0원

사이드 프로젝트에 딱이었습니다.

프로젝트 세팅

먼저 Node.js 설치하고 이걸 실행했습니다:

npm create astro@latest

“minimal” 템플릿을 골랐어요. 그리고 진짜 필요한 것만 추가했습니다:

  • Content Collections (스토리랑 블로그 포스트 관리용)
  • i18n 지원 (한국어/영어용)

Claude가 도와준 디렉토리 구조:

website/
├── src/
│   ├── pages/           # 라우트 (인덱스, 라이브러리, 스토리)
│   ├── content/         # 스토리 데이터, 블로그 포스트
│   ├── layouts/         # 페이지 템플릿
│   └── components/      # 재사용 가능한 UI 컴포넌트
└── public/              # 정적 파일 (이미지, 스토리 데이터)

첫 실행

의존성 설치하고:

cd website
npm install
npm run dev

터미널에 Local: http://localhost:4321 이렇게 뜨더라고요.

브라우저로 열었습니다. 빈 페이지. 당연했죠. 아직 콘텐츠를 안 넣었으니까요.

지킬 박사와 하이드 스토리 넣기

생성했던 스토리 JSON이랑 이미지들을 웹사이트로 복사했어요:

  • website/public/stories/jekyll-and-hyde/jekyll-and-hyde.json
  • website/public/stories/jekyll-and-hyde/opening.png
  • 나머지 장면 이미지들 전부

그다음 스토리 페이지 템플릿을 만들었습니다: src/pages/stories/[slug]/[nodeId].astro

이 템플릿이 할 일:

  1. 스토리 JSON 로드
  2. 현재 노드의 텍스트랑 이미지 표시
  3. 선택지 버튼 보여주기
  4. MBTI 점수 계속 추적

첫 테스트

브라우저 주소창에 입력했습니다: http://localhost:4321/stories/jekyll-and-hyde/opening

페이지가 떴어요. 오프닝 장면 일러스트가 보이고, 텍스트가 나타나고, 선택지 버튼들이 있었습니다.

선택지 하나를 클릭했어요. 다음 페이지가 로드됐습니다.

됐습니다.

고쳤던 문제들

이미지 경로가 처음엔 안 먹혔어요. Astro는 /public/에서 파일을 서빙하는데 URL은 /로 시작해야 했거든요. JSON 안의 이미지 참조를 전부 바꿔야 했습니다:

"./jekyll-and-hyde/opening.png"

이렇게:

"/stories/jekyll-and-hyde/opening.png"

MBTI 계산기 JavaScript도 안 로드되더라고요. 페이지 템플릿에 스크립트 태그 넣는 걸 까먹었더라고요. 추가하니까 성격 추적이 제대로 작동했습니다.

다음: 디자인 작업

기능은 됐는데 디자인이 너무 밋밋했어요. 그냥 하얀 배경에 검은 텍스트. 스타일링 전혀 없음. 분할 화면 레이아웃(한쪽엔 텍스트, 반대편엔 이미지)도 아직 안 만들었고요.

제대로 된 제품처럼 보이게 CSS 작업이 필요했습니다.

다음 편에서 계속…