HUNI² 포트폴리오 사이트 구축기 — 내 기록을 담는 공간

왜 만들었나

개발 일지를 Notion에 쓰다 보면 공개하기 애매하고, GitHub README에 넣기엔 형식이 맞지 않는다. 내가 쌓아온 것들을 제대로 보여줄 수 있는 공간이 필요했다.

그래서 4월 중순, 포트폴리오 사이트를 직접 만들기 시작했다.

기술 선택

레이어	선택	이유
프레임워크	Next.js 16 App Router	서버 컴포넌트로 초기 로드 최적화
백엔드/DB	Supabase	Auth + PostgreSQL + Storage를 한 곳에서
스타일	Tailwind CSS v4 + DaisyUI v5	다크/라이트 테마를 data-theme 하나로 관리
애니메이션	Framer Motion	페이지 진입 효과, 벤토 그리드 hover
배포	Vercel + GitHub Actions	main push → 자동 배포

기간별 구현 흐름

4월 16~20일 — 기반 구축

첫 커밋부터 배포까지 4일 만에 달렸다.

• Supabase 스키마 설계 (projects, logs, site_settings)
• Portfolio CMS + 마크다운 블로그 시스템
• Admin 패널 (About · Contact · SEO · 포트폴리오 관리 · 글쓰기)
• 한국어/영어 i18n (useTranslation 훅)
• GitHub Actions → Vercel 자동 배포 파이프라인

Next.js 16에서 middleware 파일명 컨벤션이 바뀌어서(middleware.ts → proxy.ts) 초반에 약간 헤맸다. 훈련 데이터 기반의 Next.js 지식과 실제 최신 버전이 다른 대표적인 케이스였다.

5월 10일 — 홈 페이지 전면 개편

정보를 나열하는 형태에서 벤토 그리드로 바꿨다.

마우스 움직임에 따라 카드 위에 빛 반사 효과(mouse light reflection)가 생긴다. mousemove 이벤트를 rAF(requestAnimationFrame)로 throttle해서 60fps에서도 성능 문제 없이 돌아간다. 나중에 모바일 카드 높이 auto 전환과 CSS 셀렉터 범위 축소도 추가해서 불필요한 레이아웃 재계산을 줄였다.

홈에 Impact CRUD 기능, Dev Log 다중 표시도 붙었다.

5월 10일 — Log 기능 고도화

• 무한 스크롤 (IntersectionObserver 기반)
• 태그 필터링 + 포트폴리오-Log 태그 연결 (같은 태그면 크로스 링크)
• 검색 + 필터링 고도화

태그 클라우드 최적화도 했다. 태그를 빈도수 기준으로 정렬하고 크기를 조절하는 방식.

6월 14일 — Impact 시스템 + Contact 폼

Impact 페이지: 숫자로 보여주는 나의 작업 결과. 각 수치에 관련 개발 로그 링크를 연결했다. 단순한 숫자가 아니라 맥락이 있어야 의미 있다고 생각했다.

Supabase site_settings 테이블의 impact_stats 키에 JSON으로 저장하고, 어드민에서 CRUD하는 구조.

Contact 폼: Resend로 실제 이메일 전송 + Supabase에 메시지 저장. 어드민 패널에서 받은 메시지를 확인할 수 있다.

6월 19일 — 디자인 시스템 정제

전체 primary 색상을 인디고-바이올렛으로 통일했다. 컴포넌트마다 조금씩 달랐던 색상, 여백, 폰트 크기를 정리했다.

히어로 카피는 XYZ 기법(X를 Y함으로써 Z를 달성했다)으로 리라이팅. 단순한 기술 나열보다 임팩트가 훨씬 명확해졌다.

구조 설계에서 신경 쓴 것

서버/클라이언트 분리: 데이터 페치는 page.tsx(서버 컴포넌트), 인터랙션은 *Client.tsx(클라이언트 컴포넌트). 서버 컴포넌트가 기본값인 Next.js 16 철학을 그대로 따랐다.

Admin CMS: 별도 서비스 없이 Supabase Row Level Security로 인증 처리. 로그인한 사용자만 쓰기 가능, 읽기는 공개.

i18n 설계: 라이브러리 없이 lib/i18n.tsx의 useTranslation 훅 하나로 해결. 오버엔지니어링 없이 필요한 것만.

이 사이트 자체가 포트폴리오

개발 과정을 문서화하고, 임팩트를 숫자로 정리하고, 코드를 Admin CMS로 운영하는 경험을 이 사이트 자체로 담았다.

지금 보고 있는 이 글도 그 일부다.