18일차: 사라진 버튼

내가 못 본 문제

고백할게 있어요. 몇 주 동안 제 사이트 테스트했습니다. 스토리 클릭하고, 레이아웃 체크하고, 스타일 조정하고. 근데 명백한 걸 완전히 놓쳤어요.

“여정 시작하기” 버튼이 페이지 맨 밑에 있었습니다.

“스크롤 좀 내려야 보이는” 정도가 아니에요. “콘텐츠 좀 지나서” 나오는 것도 아니고요. 진짜 맨 밑바닥이었어요. 스토리 소개 전부, 기능 설명 전부, MBTI 설명까지 다 지나서… 각주처럼 숨어있었습니다.

끝까지 스크롤 안 하면 스토리 시작하는 방법을 모를 수도 있었어요.

얼굴을 탁 쳤습니다.

당연히 고쳤어야 할 세 가지

1. 코드 블록을 읽을 수가 없었다

블로그 포스트에 코드 예제 있잖아요. 그 코드 블록이 밝은 색 신택스 하이라이팅을… 흰 배경에 썼더라고요.

텍스트 드래그해서 하이라이트 안 하면 진짜 안 읽혀요.

수정: 코드 블록 다크 테마. 간단. 원래 1일차부터 있었어야 할 거.

.content-wrapper :global(pre) {
  background: #2d2d2d;  /* 어두운 배경 */
  color: #f8f8f2;       /* 밝은 텍스트 */
}

이제 코드 읽을 수 있습니다. 혁명적 개념이죠.

2. 영어랑 한국어 페이지가 다르게 생겼다

영어 스토리 소개 페이지는 이쁜 헤더 있었어요:

  • 커버 이미지
  • 그라데이션 배경
  • 장르 태그
  • 작가 정보

한국어 페이지는? 평범한 텍스트. 헤더 없음. 커버 이미지 없음. 아무것도 없음.

같은 콘텐츠인데 언어에 따라 경험이 완전 달랐습니다.

수정: 헤더 디자인 전체를 한국어 페이지에 복사. 텍스트 현지화 (“저” 접미사, “원작 출판: X년”). 완전히 똑같이 만들었어요.

3. 사라진 버튼

다시 맨 밑에 파묻혀 있던 “여정 시작하기” 버튼 얘기로 돌아갑니다.

제가 한 것:

  1. 각 소설 메타데이터에 firstPage 필드 추가
  2. 헤더 바로 다음에 눈에 확 띄는 CTA 버튼 섹션 만듦
  3. 못 보고 지나갈 수 없게 스타일링:
    • 크게 (1.4rem 폰트)
    • 그라데이션 배경
    • 대문자 텍스트
    • 부드러운 호버 애니메이션
    • 사람들이 실제로 보는 상단에 배치

이전: 맨 밑까지 스크롤, 텍스트 링크 찾기, 어쩌면 클릭 이후: 상단에 빛나는 거대한 버튼 “여정 시작하기 →”

사용자 경험 차이가 밤낮입니다.

왜 중요한가

이거 기능 추가 아니에요. 마찰 제거입니다.

누군가 혼란스러워하며 (“어떻게 시작하지?”) 또는 답답해하며 (“이 코드 안 읽혀”) 보내는 1초 1초가 떠날 가능성에 가까워지는 1초입니다.

좋은 UX는 더 많이 추가하는 게 아니에요. 모르고 있던 장애물 제거하는 거예요.

메타 문제

제일 무서운 건? 제가 이 문제들을 못 봤다는 거예요.

몇 주 동안 제 사이트 써왔어요. 모든 게 어디 있는지 알아요. “시작” 링크가 밑에 있는 거 알죠. 제가 거기 뒀으니까요.

근데 새 방문자는 그런 맥락 없습니다. 페이지 도착해서 몇 초 안에 다 알아내야 해요.

그래서 신선한 눈이 필요한 겁니다. 실제 사용자랑 테스트해야 하는 거고요. 공개 빌딩이 도움 되는 이유도 이거예요—누군가 당신이 못 보는 걸 지적해줄 겁니다.

기술 세부사항

비슷한 수정 구현하시는 분들께:

스키마 업데이트:

// src/content/config.ts
const novelSchema = z.object({
  // ... 다른 필드들
  firstPage: z.string().optional(), // 이거 추가
});

버튼 컴포넌트:

<div class="cta-section">
  <div class="container">
    <a href={`/ko/stories/${novel.data.titleId}/${novel.data.firstPage}`}
       class="cta-button">
      여정 시작하기 →
    </a>
  </div>
</div>

중요: Astro 콘텐츠 컬렉션 쓰시면 새 frontmatter 필드 추가할 때 스키마 업데이트 AND 리빌드 둘 다 해야 합니다. 둘 다 안 하면 필드 인식 안 돼요.

현재 상황

  • 라이브 스토리: 3개 (지킬 앤 하이드, 프랑켄슈타인, 오만과 편견)
  • 오늘 고친 UX 이슈: 주요 3개
  • 언어: 영어 + 한국어, 이제 진짜 일관성 있음
  • 가시성: 시작 버튼 이제 못 볼래야 못 봄

내일

다듬기에서 홍보로 넘어갑니다. 사이트 돌아가고, UX 탄탄하고, 콘텐츠 있어요.

이제 사람들한테 알릴 시간.

다음: 소셜 미디어 계정 만들고 한국 Z세대 겨냥해서 틱톡, 인스타그램용 공유 가능한 콘텐츠 제작.

내일 뵙겠습니다…

진행: 18일차/100일 상태: 플랫폼 다듬기 완료, 마케팅 준비됨 다음: 소셜 미디어 전략