hijero.me — 커스텀 블로그 애플리케이션
기술 스택
개요
Next.js 16+ App Router와 React 19 기반으로 직접 개발한 개인 블로그·포트폴리오 통합 사이트입니다. 쿠키 없이 SHA-256 서버 핑거프린팅으로 조회수를 추적하고, prebuild 훅으로 생성한 정적 JSON 인덱스로 서버 없이 Cmd+K 전역 검색을 구현했습니다. Notion API를 이력서 CMS로 연결하고 ISR로 30분마다 갱신하며, Turborepo 모노레포로 UI 패키지를 분리해 재사용성과 빌드 성능을 함께 확보했습니다.
- Turborepo 모노레포 + pnpm workspaces — UI 패키지 분리, Turbo 토폴로지 빌드 순서
- next-intl v4: /ko/, /en/ URL 분리, Accept-Language 자동 감지, hreflang·다국어 사이트맵
- SHA-256(IP|UA|Accept-Language) 서버 핑거프린팅 — 쿠키·개인정보 없이 24h 중복 차단
- prebuild 훅으로 정적 JSON 검색 인덱스 생성 → Cmd+K Command Palette 서버리스 즉시 검색
문제
블로그·포트폴리오를 분리 운영하면 관리 비용이 두 배가 되고, 다국어·SEO·검색·조회수 추적이 제각각 흩어진다. 하나의 코드베이스에 두 역할을 통합하되 프라이버시 중심 조회수 추적, 서버리스 검색, Notion 기반 이력서 관리까지 커버하는 구조가 필요했다.
구현 기능
조회수 추적 시스템
SHA-256(IP|UA|Accept-Language) 서버 핑거프린팅. 쿠키·개인정보 없이 24h 중복 차단. Supabase RPC 트랜잭션 보장.
MDX 블로그 파이프라인
rehype-pretty-code 코드 하이라이팅, rehype-slug TOC + IntersectionObserver 실시간 섹션 추적, 태그 교집합 관련 포스트 추천.
빌드 타임 검색 인덱스
pnpm prebuild 훅으로 MDX 프론트매터 파싱 → 정적 JSON 생성. Cmd+K Command Palette 서버리스 즉시 검색.
next-intl v4 다국어
/ko/, /en/ URL 분리. Accept-Language 자동 감지. 빌드 타임 번역 키 강제 검증. hreflang·사이트맵 완비.
Notion CMS ISR 연동
@notionhq/client + 지수 백오프(1→2→4s) 재시도. React.cache() 중복 제거. ISR 30분 자동 갱신. 실패 시 정적 fallback.
성과
Lighthouse 성능 95+, SEO 100 달성 후 Vercel 배포.
- Lighthouse 성능 95+, SEO 100
- 다국어 사이트맵 + hreflang으로 검색 엔진 로케일 명시
- OG 태그로 소셜 공유 미리보기 완비
- Supabase Free Tier + Vercel으로 서버리스 운영
개발 타임라인
프로젝트 초기화 & 다국어 라우팅
next-intl v4로 /ko/, /en/ URL 분리. Turborepo 모노레포 + pnpm workspaces 환경 구성.
내비게이션 시스템
데스크탑 80px 고정 RailNav, 모바일 Sheet 드로어, PinnedGNB(테마·언어 토글)를 구현
MDX 블로그 파이프라인
rehype-pretty-code 코드 하이라이팅, rehype-slug TOC 앵커 자동 생성. SSG로 빌드해 로딩 지연 없음.
포스트 상세 & Supabase 조회수
Supabase로 포스트 조회수를 추적합니다. 24시간 중복 차단 서버 액션, 관련 포스트 태그 추천 구현.
Resume & Notion CMS 연동
Notion API로 이력서 프로젝트 데이터를 관리합니다. 별도 CMS 없이 Notion 페이지가 단일 진실 공급원.
전역 검색 & SEO 배포
빌드 시 정적 JSON 인덱스를 생성해 Cmd+K 검색을 서버 없이 구현. Lighthouse 성능 95+, SEO 100 달성 후 Vercel 배포.
Projects 페이지 & 지속 개선
직장/개인 프로젝트 섹션 분리, soloProject 배지, 페이지 전환 애니메이션 추가. 현재도 기능 고도화 중.