한국어 버전 출시했다가…
어제 지킬 박사와 하이드, 프랑켄슈타인 한국어 번역 완료. 스토리 노드 총 71개. 휴대폰으로 테스트해보니 괜찮아 보여서 프로덕션에 푸시했어요.
그리고 데스크톱으로 한국어 페이지 열었습니다.
레이아웃이 영어 버전이랑 완전 딴판이었어요. 분할 화면 잡지 레이아웃은 온데간데없고, 콘텐츠가 그냥 세로로 쭉 쌓여 있더라고요.
데스크톱 스타일을 빼먹었다
한국어 템플릿 파일 확인해보니까, 영어 템플릿에서 모바일이랑 태블릿 스타일만 복사했더라고요. 데스크톱 스타일(1024px 이상 화면)은 통째로 빠져 있었어요.
영어 버전은 CSS Grid로 분할 화면 레이아웃 만듭니다:
- 왼쪽: 스토리 일러스트 (고정, 제자리 유지)
- 오른쪽: 텍스트, 선택지, 네비게이션 (스크롤 가능)
한국어 템플릿엔 이게 아예 없었습니다. 그냥 다 세로로 쌓기만.
영어 템플릿에서 데스크톱 미디어 쿼리 전부 복사해서 한국어 템플릿에 붙였어요. 다시 빌드. 이제 한국어 페이지가 데스크톱에서도 영어랑 똑같이 보입니다.
이미지가 안 뜨던 문제
두 번째 문제가 더 골치 아팠어요. 일부 한국어 스토리 페이지에서 이미지 대신 마크다운 문법이 그대로 보이더라고요:
브라우저에 이미지로 렌더링되는 게 아니라 그냥 텍스트로 나왔습니다.
Astro 템플릿이 마크다운 처리하는 방식 문제였어요. 한국어 템플릿의 정규식이 상대 경로(./로 시작)만 매치하게 되어 있었는데, 저는 이미지 파일 중복 피하려고 한국어 마크다운을 절대 경로(/stories/jekyll-and-hyde/...)로 바꿔놨거든요.
정규식을 상대 경로랑 절대 경로 둘 다 처리하게 수정했어요. 이제 모든 한국어 페이지에서 이미지 제대로 뜹니다.
한국어가 메인이다
사실 이 프로젝트의 주 타겟은 한국 시장입니다. 영어 시장 아니에요.
한국 Z세대는 MBTI 성격 콘텐츠에 진짜 미쳐 있어요. 한국 소셜 미디어 어디 가든 MBTI 얘기입니다. 틱톡, 인스타그램, 심지어 취업 면접에서도 MBTI 유형 물어보잖아요.
그래서 한국어 버전이 완벽하게 작동하는 게 수익화 측면에서 영어보다 훨씬 중요합니다.
한국어 페이지가 이제 영어와 동일한 분할 화면 레이아웃, 반응형 디자인, MBTI 성격 추적 다 됩니다.
다음 편에서 계속…