Tokki - 백예린 아카이브 팬사이트

백예린 관련 활동 기록을 모아 탐색·보존하는 미니멀 아카이브

프로젝트 개요

Tokki는 백예린( Baek Yerin / Yerin Baek )의 앨범, 공연, 영상, 인터뷰, 기사 등을 한곳에서 탐색할 수 있게 정리한 팬 아카이브입니다. 외부 플랫폼(Spotify, YouTube, Instagram 등)의 메타데이터를 통합하고, 일관된 카드/디테일 UI로 가볍게 탐색할 수 있게 구성했습니다.

서비스 화면

Tokki 메인 화면
Tokki 아카이브 화면

주요 기능

콘텐츠 표준화 아카이브

  • 앨범/싱글/공연/영상/인터뷰/기사 등 타입 기반 구조화
  • JSON 스키마(타입, 발매일, 플랫폼, URL, 태그, 출처, 슬러그)로 일관 관리

자동 수집 & 배포

  • (선택) GitHub Actions 스케줄러로 YouTube/Spotify/API·RSS 동기화 → JSON 갱신 PR → Pages 자동 배포

검색·필터·정렬

  • 태그/연도/활동유형 파셋 필터 + 텍스트 검색(lunr.js/mini-search)
  • 최신/인기/가나다 정렬

SEO · 공유 메타

  • react-helmet-async + Open Graph/Twitter 카드
  • JSON-LD(MusicAlbum/VideoObject/Event), sitemap.xml/robots.txt 생성

접근성 & 성능

  • 의미있는 alt/캡션, 키보드 포커스, 대비 준수
  • 이미지 WebP/AVIF + srcset, lazyload, 폰트 display:swap
  • (선택) react-snap 사전 렌더로 SEO/First Paint 개선

저작권·출처 고지

  • 외부 플랫폼 임베드/링크 이용약관 준수
  • 저작권/상표 고지와 Takedown 안내 페이지 제공

아키텍처 구성도

architecture-0
  • React 기반 SPA(컴포넌트: 카드/디테일/검색/필터)
  • 데이터: /data/*.json(스키마 표준화) → 동적 렌더링
  • SEO: react-helmet-async, JSON-LD 스키마, (선택) react-snap 사전 렌더
  • 정적 배포: GitHub Pages + Actions(빌드/배포)
  • (선택) 스케줄링: Actions가 API/RSS를 크롤링하여 JSON 갱신 PR 생성
  • 성능: 이미지 최적화(WebP/AVIF, srcset), lazyload, 캐시 헤더
  • 안정성: 링크체커(액션) + 대체 링크/썸네일, 404 전용 안내

기술 스택

프론트엔드: React, Material UI (Creative Tim Kit), react-helmet-async 검색: (경량) lunr.js 또는 mini-search 정적 호스팅: GitHub Pages (+ GitHub Actions CI) 사전 렌더: (선택) react-snap / Astro/Vite SSG 디자인: Figma 이미지: WebP/AVIF 변환, responsive srcset 분석: (선택) Plausible/umami 등 프라이버시 친화 분석

담당 역할

문제 해결 및 성과

회고 / 느낀 점