Tech Stack
React TypeScript Vite Tailwind CSS Cloudflare DeepL API i18next
주요 기능
- Cloudflare Workers 스크래핑 + KV 일일 단위 캐싱
- DeepL API 자동 번역 (일본어 → 한국어 / 영어)
- i18next 기반 3개 국어 실시간 전환
- 12별자리 순위 정렬 및 1위 하이라이트
- 별자리별 생일 범위 · 행운의 아이템 표시
- 방송 시간(오전 7시) 기준 당일 / 전날 운세 구분
- API 갱신 지연 시 원본 사이트 직접 조회 fallback
- GitHub Actions 로 매일 캐시 워밍업
성과
- ohaasa.site 도메인으로 실서비스 운영 중
- KV 캐시로 인해 트래픽이 몰려도 원본 사이트에 부하가 가지 않음
- SEO 최적화 (OG · Twitter Card · sitemap) 및 Google Analytics · Microsoft Clarity 계측 적용
- 기획부터 배포·운영까지 혼자 완성한 개인 서비스
상세내용
Cloudflare Workers 가 매일 원본 운세를 수집하고 DeepL API 로 일본어 원문을 한국어·영어로 번역한 뒤 Cloudflare KV 에 캐싱합니다. 프론트엔드는 Cloudflare Pages 에 배포되어 KV 캐시만 읽으므로, 방문자가 몰려도 원본 사이트에 부하가 가지 않습니다.
방송 시간(오전 7시)을 기준으로 당일/전날 운세를 구분해 노출하고, API 갱신이 늦어지면 TV Asahi 사이트를 직접 조회하는 fallback 을 둬 빈 화면이 뜨지 않도록 했습니다. 다크 모드 전용 배경 애니메이션처럼 서비스 성격에 맞는 연출도 함께 다듬었습니다.
초기에는 Gemini API 로 번역했으나, 별자리 운세처럼 짧고 정형화된 문장에서는 범용 LLM보다 전용 번역 엔진인 DeepL이 더 안정적인 품질을 보여 전환했습니다. i18next 를 적용해 3개 국어를 실시간 전환할 수 있습니다.
트러블슈팅
오전 이른 시간에 접속하면 빈 화면이 뜨거나 전날 운세가 나오는 현상
- 원인
- 원본 방송이 오전 7시에 갱신되는데 그 시각을 기준으로 삼지 않아, 갱신 전 접속과 갱신 후 접속이 같은 데이터를 보고 있었습니다.
- 해결
- 방송 시간을 기준으로 당일/전날 운세를 구분해 노출하고, API 갱신이 늦어지면 TV Asahi 사이트를 직접 조회하는 fallback 을 둬 빈 화면이 뜨지 않도록 했습니다.
방문자가 늘수록 원본 사이트로 요청이 그대로 전달됨
- 원인
- 초기 구조에서는 방문 시점마다 원본을 조회해, 트래픽이 그대로 외부 사이트 부하로 이어졌습니다.
- 해결
- Cloudflare Workers 가 하루 한 번 설정한 시간에 수집·번역한 결과를 KV 에 캐싱하고 프론트엔드는 캐시만 읽도록 바꿨습니다. GitHub Actions 로 매일 캐시를 미리 채워 첫 방문자도 지연을 겪지 않게 했습니다.
기여도 · 1인 개발 - 기획 · 프론트엔드 · Workers 백엔드 · 배포 및 운영