포트폴리오 사이트 개발 회고 — Next.js 16 + Supabase + DaisyUI v5
포트폴리오 사이트 개발 회고 — Next.js 16 + Supabase + DaisyUI v5
이 사이트를 만들면서 결정했던 것들, 삽질했던 것들을 정리해둔다.
기술 선택 이유
Next.js 16 — App Router가 안정화됐고, Server Component로 Supabase 데이터를 서버에서 패칭해서 내려주는 구조가 깔끔했다. 포트폴리오 특성상 SEO가 중요한데 SSR이 기본인 Next.js가 맞는 선택이었다.
Supabase — 백엔드를 직접 만들 이유가 없었다. 인증, DB, Storage를 한 번에 해결해준다. site_settings 테이블에 JSONB로 CMS 데이터를 넣는 구조를 써서 About, Contact 페이지를 admin에서 수정할 수 있게 만들었다.
DaisyUI v5 — Tailwind만 쓰면 컴포넌트 디자인에 시간을 너무 많이 쓰게 된다. v5로 업그레이드하면서 @plugin "daisyui" 방식으로 바뀐 부분에서 한 번 삽질했다.
구조 결정
데이터 패칭은 서버에서, 언어 전환(i18n)이나 인터랙션은 클라이언트에서 처리하는 패턴을 썼다.
app/about/page.tsx ← 서버 컴포넌트, Supabase 패칭
components/about/AboutClient.tsx ← 클라이언트, useI18n() 사용
site_settings JSONB 테이블로 스키마 변경 없이 새 페이지 콘텐츠를 추가할 수 있어서 유연하다.
삽질 목록
- middleware.ts → proxy.ts: Next.js 16에서 파일명이 바뀐 걸 뒤늦게 알았다.
- lucide-react v1.8: Github, Linkedin 아이콘이 없어서 직접 SVG 컴포넌트 만들었다.
- DaisyUI v5 theme: hydration 이슈가 있었다.
<head>에 인라인 스크립트로 먼저 세팅하는 방식으로 해결. - admin 빌드 에러: Supabase 클라이언트가 빌드 타임에 실행되려고 해서
export const dynamic = 'force-dynamic'을 admin layout에 추가해야 했다.
Claude Code로 개발하는 방식
이 프로젝트는 Claude Code와 같이 만들었다. 처음엔 "AI가 다 만들어주면 내가 뭘 배우지?" 싶었는데, 실제로 해보니까 달랐다.
내가 뭘 만들고 싶은지, 왜 이렇게 구조를 짜야 하는지를 먼저 이해하고 있어야 AI한테 제대로 된 요구사항을 줄 수 있었다. AI가 짠 코드도 왜 이렇게 됐는지 이해 못 하면 다음 요청을 못 한다.
결국 개발 속도는 빨라졌지만 이해 없이는 속도도 안 나왔다.