Portfolio Website Development 🏗️ - Part 4

Context

초기 포트폴리오는 단일 페이지 스크롤 구조로 설계되어 앵커 네비게이션을 통해 접근했으나, 블로그와 마인드 너겟 수 증가에 따라 각 콘텐츠별 고유 URL, 태그 페이지, 시리즈 페이지 등을 지원해야 하는 요구사항이 발생했다. 또한 Hashnode 외부 API에 의존한 콘텐츠 관리는 도메인 내 콘텐츠 그래프 구축과 SEO 최적화를 저해했다.

Technical Solution

• Next.js 15 App Router 도입: 기존 단일 페이지(src/index) 구조를 /blogs, /blogs/[slug], /mindNuggets/[slug], /mentorship, /sideProjects 등 파일 기반 라우팅으로 전환
• MDX 파일 기반 콘텐츠 관리: 블로그 포스트와 마인드 너겟을 src/content/ 디렉토리의 .mdx 파일로 호스팅하고 frontmatter로 메타데이터 관리
• Velite 도입: frontmatter 검증, rehype-pretty-code를 통한 구문 강조, 타입 안전성을 위한 .velite/ 생성 및 #content 별칭을 통한 임포트
• SEO 우선 구현: sitemap.ts, robots.ts, feed.xml(RSS/Atom), 동적 라우트 별 generateMetadata(OG, Twitter cards), JSON-LD(Person/WebSite/BlogPosting 스키마) 적용
• 드래프트 관리: frontmatter 플래그로 발행 상태 제어해 미발행 포스트를 sitemap과 RSS에서 자동 제외

Impact

아티클에는 정량적 성과 수치가 없음.

Key Takeaway

포트폴리오나 개인 도메인 기반 콘텐츠 플랫폼을 구축할 때 초기 단계에서부터 고유 URL 전략, 콘텐츠 저장소 위치(외부 API vs 자체 호스팅), SEO 인프라(sitemap, 스키마 마크업)를 함께 설계하면 나중에 대규모 마이그레이션 없이 확장 가능한 체계를 확보할 수 있다.