스토리블록 챌린지 제출물 요약

카테고리

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

서브카테고리

웹 개발

대상자

• 웹 개발자 (Next.js, React, Storyblok CMS, Gemini API 경험자)
• 중간 난이도 (API 연동 및 CMS 설정 경험이 필요)

핵심 요약

• Storyblok의 Preview Token과 Gemini API를 활용한 AI 기반 리소스 검색 기능 구현
• Next.js + React 환경에서 Storyblok CMS와 프론트엔드 연동 시스템 구축
• Gemini API의 Quota 제한과 CMS 설정 복잡성이 주요 기술적 장애물로 발생

섹션별 세부 요약

1. 스토리블록 공간 설정

• JSON 형식의 콘텐츠 라이브러리 제공 (curl 요청으로 테스트 가능)
• "resources" 폴더 생성 및 sub-blocks 기반의 content-type 정의
• Storyblok Access Token을 사용한 API 인증 프로세스 포함

2. 코드 레포지토리 및 데모

• GitHub 레포지토리 링크 제공 ()
• 프론트엔드 UI 이미지 및 curl 요청 예시 포함
• Google Drive를 통한 데모 영상 공유 (https://drive.google.com/...)

3. 기술 스택 및 구현

• Next.js + React + JavaScript 기반 웹 애플리케이션 구축
• Gemini API Key를 활용한 프론트엔드-Storyblok CMS 연동
• 프롬프트 기반 리소스 검색 기능 개발 (예: fetch(resources, prompt))

4. 개발 과정의 주요 문제점

• CMS 설정과 프론트엔드 연동 과정에서 시간 소요 발생
• Gemini API의 Quota 제한으로 인한 테스트 제약
• AI 모델의 정확성과 리소스 매칭 알고리즘 개선 필요

결론

• Storyblok CMS와 Gemini API 연동 시 Quota 관리와 CMS 설정 문서화가 필수
• 프론트엔드-백엔드 연동 시 API 토큰 보안 및 에러 처리 로직 추가 권장
• AI 기반 리소스 검색 기능은 사용자 프롬프트의 명확성과 데이터 매핑 방식에 따라 성능 차이 발생