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) 서버 핑거프린팅 — 쿠키·개인정보 없이 24시간 동안 조회수 중복 방지
- prebuild 훅으로 정적 JSON 검색 인덱스 생성 → Cmd+K와 slash(/)를 사용한 전역 Command Palette 검색
문제
그동안 블로그와 포트폴리오를 따로 운영 및 관리 하다보니 리소스 소모와 관리 비용이 두 배가 되는 점이 불편했습니다. tistory, velog와 같은 블로그 서비스의 구조를 입맛에 맞게 커스터마이징하면서, 노션으로 관리했던 이력서를 하나로 합쳐서 브랜딩과 관리를 통합하는 나만의 웹사이트가 필요하다고 판단했습니다. 급속히 발전하고 점점 성숙해져가는 AI 기술을 활용하여 전보다 훨씬 빠르고 탄력적으로 구현할 수 있겠다는 확신이 있었고, AI Native 개발 연습도 함께 도모하고자 본격적으로 계획 및 개발에 착수했습니다.
구현 기능
조회수 추적 시스템
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·사이트맵 완비와 함께 Light/Dark 다크모드 지원.
Notion CMS ISR 연동
@notionhq/client + 지수 백오프(1→2→4s) 재시도. React.cache() 중복 제거. ISR 30분 자동 갱신. 실패 시 정적 fallback.
성과
Lighthouse 성능 95+, SEO 100을 달성하며 Vercel에 배포했습니다. 쿠키·개인정보 없는 서버 핑거프린팅 조회수 추적, prebuild 정적 JSON 기반 Cmd+K 전역 검색, next-themes 다크/라이트 모드, next-intl v4 한/영 다국어 라우팅, Notion ISR 이력서 CMS를 하나의 코드베이스에서 운영 중입니다.
- Lighthouse 성능 95+, SEO 100
- 다국어 사이트맵 + hreflang으로 검색 엔진 로케일 명시
- OG 태그로 소셜 공유 미리보기 완비
- Supabase Free Tier + Vercel으로 서버리스 운영
- SHA-256 서버 핑거프린팅 — 쿠키·개인정보 없이 조회수 중복 방지
- Cmd+K 전역 검색 — 서버 없이 정적 JSON 인덱스로 즉시 응답
- next-themes 다크/라이트 모드 + next-intl v4 한/영 전환 지원
개발 타임라인
프로젝트 초기화 & 다국어 라우팅
next-intl v4로 /ko/, /en/ URL 분리. Turborepo 모노레포 + pnpm workspaces 환경 구성.
내비게이션 시스템
데스크탑 80px 고정 RailNav, 모바일 Sheet 드로어, PinnedGNB(테마·언어 토글) 구현. next-themes 연동으로 시스템 프리퍼런스 기반 다크/라이트 모드 지원.
MDX 블로그 파이프라인
rehype-pretty-code 코드 하이라이팅, rehype-slug TOC 앵커 자동 생성. SSG로 빌드해 로딩 지연 없음.
포스트 상세 & Supabase 조회수
SHA-256(IP|UA|Accept-Language) 서버 핑거프린팅으로 쿠키 없이 조회수 추적. 24시간 중복 차단 서버 액션, 관련 포스트 태그 교집합 추천 구현.
Resume & Notion CMS 연동
Notion API로 이력서 프로젝트 데이터를 관리합니다. 별도 CMS 없이 Notion 페이지가 단일 진실 공급원.
전역 검색 & SEO 배포
빌드 시 정적 JSON 인덱스를 생성해 Cmd+K 검색을 서버 없이 구현. Lighthouse 성능 95+, SEO 100 달성 후 Vercel 배포.
Projects 페이지 & 지속 개선
직장/개인 프로젝트 섹션 분리, soloProject 배지, 페이지 전환 애니메이션 추가. 현재도 기능 고도화 중.