제로에서 시작해 AI 기반 포트폴리오를 7일 만에 만든 이야기: Storyblok 챌린지 참여 경험

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자, Next.js 및 Storyblok을 사용하는 프론트엔드 개발자, AI 기능을 통합하고자 하는 개발자

핵심 요약

• Next.js와 Storyblok을 사용해 헤드리스 CMS 기반의 풀스택 포트폴리오 및 블로그를 구축함.
• OpenAI API를 활용해 AI 기반 요약 도구를 구현하여 블로그 글 요약 작업 효율성 향상.
• Framer Motion으로 사용자 경험(UX)을 강화하고, 인크리멘탈 스태틱 재생성(getStaticProps, getStaticPaths) 기능으로 동적 블로그 페이지 생성.

섹션별 세부 요약

1. 프로젝트 개요 및 목표

• Next.js를 프론트엔드, Storyblok을 헤드리스 CMS로 사용하여 풀스택 포트폴리오 및 블로그 시스템 구축.
• Storyblok의 시각 편집기를 통해 헤드라인, 소개, 기술 스킬, 프로젝트 목록, 푸터 등 모든 콘텐츠를 직접 편집 가능.
• AI 기능 추가를 통해 블로그 글 요약 자동화를 구현, AI 상품 경쟁력 강화.

2. 주요 기능 및 기술 스택

• Next.js와 Storyblok을 결합하여 풀리스 커플링 아키텍처 구현.
• Framer Motion을 사용해 애니메이션 및 UX 개선.
• PrismJS로 코드 하이라이팅을 지원.
• OpenAI API를 사용한 AI 요약 도구 구현, GPT-3.5 Turbo 모델 사용.

3. 구현 과정 및 주요 도전 과제

• HTTPS 프록시 설정을 통해 로컬 HTTP 서버와 Storyblok 편집기 연결.
• CSS 파일 로드 문제 해결: 경로 오타로 인한 스타일 적용 실패, 디버깅 시 체계적인 접근 필요성 강조.
• Next.js API 라우트를 통해 OpenAI API 요청 처리 및 요약 결과 반환.

4. Storyblok 사용 경험 및 장점

• Storyblok의 시각 편집기는 컴포넌트 기반 페이지 구성이 가능하며, 개발 서버에서 실시간 콘텐츠 반영이 가능.
• 재사용 가능한 컴포넌트를 사용해 빠르고 직관적인 페이지 개발 가능.

결론

• Next.js + Storyblok + OpenAI API 조합을 통해 AI 기능을 포함한 포트폴리오를 효율적으로 개발할 수 있음.
• HTTPS 프록시 설정 및 CSS 디버깅을 통해 실무 개발에서의 문제 해결 능력 향상 가능.
• Storyblok의 시각 편집기는 개발자와 디자이너 협업에 유리한 헤드리스 CMS 도구로 추천.