[개인 프로젝트] 블로그 & 포트폴리오 사이트 구축
회고

[개인 프로젝트] 블로그 & 포트폴리오 사이트 구축

작성일: 2026년 02월 08일

개발 의도

Next.js + Notion API를 활용한 블로그 및 포트폴리오 사이트

  • Next.js: React 기반의 풀스택 프레임워크로 SSG/SSR을 자유롭게 구현 가능
  • Notion API: 이미 사용 중인 노션을 CMS처럼 활용할 수 있어 별도 관리자 페이지 불필요
  • DX와 UX를 모두 고려하여 노션에서 글을 작성하면 자동으로 블로그에 반영되는 구조.

    • 개발 목표

    최종적으로 이 프로젝트는 3가지 카테고리를 담을 예정이다:

    카테고리설명
    📝 블로그기술 글, 회고, 일상 기록
    💼 포트폴리오프로젝트 소개 및 작업물
    👤 프로필자기소개, 연락처, 이력

    v1 목표: 블로그 우선 제작

    첫 번째 버전에서는 블로그 기능에 집중했다.

  • Notion API를 활용한 글 목록 및 상세 페이지 구현
  • SSG(Static Site Generation) 형태로 렌더링하여 빠른 로딩 속도 확보
  • 빌드 시점에 정적 페이지 생성 → SEO 최적화에 유리

    • 구현 사항

    1. SEO 최적화

    검색 엔진 최적화는 블로그 운영에서 중요한 부분이다. 다음 항목들을 적용했다:

  • 메타 태그: 각 페이지별 title, description 동적 생성
  • Open Graph / Twitter Card: SNS 공유 시 미리보기 최적화
  • sitemap.xml / robots.txt: 검색 엔진 크롤링 지원
  • Semantic HTML: 올바른 태그 구조로 접근성 향상

    • 2. 커스텀 도메인 연결

    구매한 도메인을 연결하여 브랜드 아이덴티티를 확립했다.

  • Vercel 대시보드에서 간단한 DNS 설정
  • HTTPS 자동 적용으로 보안 강화

    • 3. CI/CD 자동 배포

    Vercel의 편의성을 최대한 활용했다.

    

Git Push → Vercel 자동 빌드 → 프로덕션 배포
  • GitHub 연동으로 push 시 자동 배포
  • Preview 환경으로 PR별 미리보기 가능
  • 빌드 로그 실시간 확인

    • 기술 스택

    분류기술
    FrameworkNext.js 15 (App Router)
    CMSNotion API / Firebase
    Stylingtailwind css
    DeploymentVercel
    LanguageTypeScript

    회고 및 다음 단계

    잘된 점

  • Notion을 CMS로 활용하니 글 작성이 매우 편리
  • SSG 덕분에 페이지 로딩 속도가 빠름
  • Vercel CI/CD로 배포 자동화 완료
  • ISR(Incremental Static Regeneration) 도입 검토
  • 이미지 최적화 추가
  • 다크모드 지원

    • v2 계획 📋

  • 포트폴리오 섹션 추가
  • 프로필 페이지 구현
  • 댓글 기능 연동 (giscus or utterances)