Next.js와 Storyblok을 활용한 헤드리스 CMS 포트폴리오 구축 및 AI 기반 콘텐츠 요약 기능 개발 여정

핵심 기술

본 콘텐츠는 Next.js 프레임워크와 Storyblok 헤드리스 CMS를 기반으로 반응형 디자인, 애니메이션, 그리고 AI 기반 콘텐츠 요약 기능을 갖춘 개인 포트폴리오 및 블로그 웹사이트를 개발하는 전 과정을 상세히 기록합니다.

기술적 세부사항

• 아키텍처: 완전 디커플드(Decoupled) 아키텍처를 적용하여 프론트엔드는 Next.js로, 콘텐츠 관리는 Storyblok 헤드리스 CMS로 구축.
• 프론트엔드 구현: Next.js의 강력한 기능(Incremental Static Regeneration, API Routes)을 활용하여 다중 페이지 포트폴리오 및 블로그, 동적 페이지 라우팅(/blog, /blog/[slug]) 구현.
• Storyblok 활용: Hero, About Me, Skills, Projects, Footer 등 다양한 사용자 정의 컴포넌트를 Storyblok Visual Editor를 통해 시각적으로 구성 및 편집.
• UX/UI 디자인: 깔끔하고 반응형인 디자인을 채택하고, Framer Motion 라이브러리를 사용하여 페이지 요소에 부드러운 애니메이션 효과 적용.
• AI 기능 구현: /assistant 페이지에서 OpenAI API(GPT-3.5 Turbo)를 연동하여 블로그 게시물 텍스트를 입력받아 AI 기반 요약문을 자동 생성하는 기능 개발. 이를 통해 콘텐츠 작성 워크플로우 효율화.
• 기술 스택: Next.js/React (Frontend), Storyblok (Headless CMS), Vercel (Deployment), Global CSS (Styling), Framer Motion (Animation), PrismJS (Syntax Highlighting), OpenAI API (AI).
• 주요 개발 과제: 로컬 HTTP 서버와 Storyblok의 HTTPS 에디터 연동을 위한 로컬 SSL 프록시 설정, CSS 파일 로드 문제는 있으나 스타일이 적용되지 않는 버그 해결 (보이지 않는 타이포 발견).

개발 임팩트

• 개발 생산성 향상: Storyblok Visual Editor를 통한 즉각적인 콘텐츠 수정 및 AI 기반 요약 기능으로 콘텐츠 제작 시간 단축.
• 최신 웹 기술 습득: 헤드리스 CMS, 최신 프론트엔드 프레임워크(Next.js), AI API 연동 등 실무적인 개발 기술 습득 및 경험 축적.
• 전문성 강화: 시각적으로 매력적이고 기능적으로 뛰어난 개인 포트폴리오 구축을 통해 개발자로서의 전문성 어필.

커뮤니티 반응

• (언급 없음)

톤앤매너

개발자에게 실질적인 도움이 되는 기술적 통찰력과 경험을 공유하는 전문적이고 긍정적인 톤.