다국어 개발자 포트폴리오 및 블로그 CMS (현재 웹사이트)

개요

최신 Next.js 16 App Router를 기반으로 구축된 프로덕션 수준의 포트폴리오 및 블로그 플랫폼입니다.

Airbnb 스타일에서 영감을 받은 공개 웹사이트와 완전한 관리자 CMS를 결합하여, 누구나 쉽게 포크하여 자신의 포트폴리오 플랫폼으로 활용할 수 있도록 설계되었습니다.

라이브 사이트: https://hwanhoon.kim

주요 기능

• Next.js의 Parallel Routes 및 Intercepting Routes를 활용한 포트폴리오 시스템

  • 프로젝트 카드를 클릭하면 그리드 위에 모달로 표시
  • 동시에 SEO 친화적인 독립 URL 제공

• 고급 이미지 갤러리

  • 라이트박스
  • 확대/축소
  • 전체 화면
  • 슬라이드쇼
  • 썸네일 탐색
  • 키보드 및 터치 스와이프 지원
  • next/image 기반 최적화

• Markdown 및 Tiptap 기반 블로그

  • 커버 이미지
  • 태그 시스템
  • 페이지네이션
  • 자동 임시저장(localStorage)

• 관리자 CMS (/admin)

  • 포트폴리오 관리
  • 블로그 게시물 관리
  • 이미지 라이브러리 관리
  • Clerk 인증 및 이메일 허용 목록 기반 접근 제어

• 다국어 지원 (한국어, 영어, 프랑스어)

  • next-intl 기반 국제화
  • PostgreSQL에 언어별 콘텐츠 저장
  • 영어 콘텐츠 자동 폴백
  • 최소한의 설정으로 신규 언어 추가 가능

• SEO 최적화

  • 페이지별 메타데이터
  • hreflang
  • sitemap
  • robots.txt
  • Open Graph
  • JSON-LD 구조화 데이터

• Cloudflare R2 기반 이미지 업로드 및 관리

• 다크 모드 / 라이트 모드 / 시스템 테마 지원

• 접근성(ARIA, Skip Link, Semantic Landmark) 고려

아키텍처 및 기술적 특징

• TypeScript 기반 End-to-End 타입 안정성
• Drizzle ORM 기반 데이터 계층
• Zod 기반 입력 검증
• Server Actions 기반 관리자 CRUD 구현
• 기본적으로 React Server Components 사용
• 인터랙션이 필요한 영역만 Client Components 적용
• 정규화된 다국어 데이터베이스 설계
• Turbopack 기반 빌드
• Biome 기반 코드 품질 관리

결과

본 프로젝트는 단순한 개인 포트폴리오를 넘어, 다국어 콘텐츠 관리와 블로그 운영이 가능한 재사용 가능한 CMS 플랫폼으로 발전했습니다. 최신 Next.js 아키텍처, 국제화, SEO, 클라우드 스토리지, 타입 안전한 데이터 관리 경험을 집약적으로 보여주는 프로젝트입니다.