[NextJs v13 Project] 바르셀로나 온라인 쇼핑몰 프로젝트 - 01 openAI를 이용하여 기획서 작성하기

이번 프로젝트는 블로그에 기록하면서 구축해보려합니다.

 

저는 1인 개발 프로젝트를 진행할 때 보통 아래와 같은 순서로 진행합니다.

1. 간단한 기획
   • 프로젝트 주제, 프로젝트 간단 설명, 사용 기술, 예상 규모(기간, db등,,)
2. 간단한 기획을 기반으로 openAI와 상세 기획 구성
3. 디자인 레퍼런스 검색 (주로 유튜브나 Dribbble 참고)
4. 1,2,3 을 통합하여 기획서(노션) 및 뼈대(draw.io) 작성
5. 4번을 기반으로 1번에서의 사용 기술, 예상 규모 재검토
6. 개발 시작

 

1. 간단한 기획

최근 1 ~ 2달간 NextJs v13을 기반으로 한 game forum 프로젝트를 진행하였고, 진행중입니다.

따라서 이번에는 조금 결이 다른 프로젝트를 진행해보려합니다.

 

저는 개인 프로젝트 주제를 정할 때 생각하는건 두 가지입니다.

1. 재미있겠는지

2. 무조건 내가 관심있는 주제

 

따라서 이번에는 바르셀로나를 바탕으로한 온라인 쇼핑몰을 구축하려합니다

이때까지는 해당 프로젝트에 어떤 기능이 들어가고 그런건 생각하지 않습니다. 1번에서는 크게크게만 잡아갑니다

또한 이번에는 외부 CMS를 사용하지 않고, 자체 CMS(관리자 페이지)를 구축해보려합니다.

 

2. 상세 기획

 

이 내용들을 나중에 openAI에 넣을 프롬으로 준비합니다

인풋

프로젝트 주제: 바르셀로나온라인 쇼핑몰

프로젝트 설명: FC바르셀로나 선수들을 기반으로 온라인 쇼핑몰을 구축합니다. 이때 어떤 기능이 들어갈지는 정해진것은 없지만, 기본적으로 바르셀로나 선수들 데이터를 활용할 수 있고, 온라인 쇼핑몰의 기본적인 기능들은 포함되어야합니다.

또한 해당 프로젝트는 크게 2개의 배포 결과물로 이루어질 것입니다. 하나는 react 기반의 상품들을 보여주는 store 페이지, 다른 하나는 next.js 기반의 관리자 기능을 포함하는 admin 페이지(ex, sanity)

사용 기술:

• 관리자
  • NextJs + react18의 server 컴포넌트 (v13 이지만 chatGPT는 v13의 존재를 모르기때문에 그냥 NextJs와 react 18의 server 컴포넌트로 작성합니다) / mongoDB (prisma) / tailwind / zustand / stripe / redis
• 스토어
  • React / tailwind / react-query / redux-toolkit or zustand

예상 규모

• 기간: 2주 ~ 1달 (매일 3시간 기준)

최종 질문: 위의 정보를 참고하여, 아래와 같은 포멧으로 기획서를 2개의 패턴으로 작성해주세요

포멧:

• 주제 (좀더 구체적으로 변경해주세요)
• 프로젝트명 (3개정도 제시해주세요)
• 프로젝트 설명 
• 사용 기술 (NextJs + react18의 server 컴포넌트는 NextJs v13 으로 표기해주세요)
• 프로젝트 구체적인 내용 (현재는 어떤 기능이 들어갈지 정해진게 별로없습니다. 이를 당신이 유명 온라인 쇼핑몰(ex, 아마존, 쿠팡등)을 바탕으로 온라인 쇼핑몰에 들어가야할 기능과 바르셀로나 선수들 데이터를 활용하여 나타낼 수 있는 신선(또는 이미 존재하지만 많이 알려지지 않은,,)한 기능들을 제시해주세요
• 예상 규모: 예상 기간, 예상 db 규모   

 

아웃풋 1

패턴 1
주제
바르셀로나 팬들을 위한 유니크 메모리아블 쇼핑

프로젝트명
BarcaFanMall
BarcaMemorabiliaShop
BlaugranaBoutique
프로젝트 설명
FC바르셀로나의 선수들 및 그들의 경기 데이터를 기반으로 사용자들에게 독특하고 개인화된 쇼핑 경험을 제공하는 온라인 쇼핑몰을 구축합니다.

사용 기술
관리자: NextJs v13 / mongoDB (prisma) / tailwind / zustand / stripe / redis
스토어: React / tailwind / react-query / zustand
프로젝트 구체적인 내용
상품 판매 페이지에 선수들의 경기 데이터(득점, 어시스트, 경기 출전 시간 등)를 시각화하여 표현합니다.
판매되는 상품들을 선수들의 특정 경기나 순간(예: 해트트릭을 기록한 경기의 유니폼)과 연결하여 판매합니다.
사용자들이 선수 데이터를 기반으로 자신만의 커스텀 상품(예: 유니폼, 머그컵, 포스터)을 제작할 수 있는 기능을 제공합니다.
상품 리뷰 기능에서 사용자들이 사진과 함께 자신의 기억이나 경험을 공유할 수 있게 합니다.
가장 인기 있는 선수 혹은 경기에 기반한 인기 상품 섹션을 메인에 표시합니다.
예상 규모
기간: 2주 ~ 1달 (매일 3시간 기준)
예상 DB 규모: 선수 데이터, 상품 데이터, 사용자 데이터, 주문 데이터 등을 포함한 중형 규모

패턴 2
주제
바르셀로나 선수들의 순간을 소장하는 쇼핑몰

프로젝트명
BarcaMomentoShop
BlaugranaChronicle
BarcaLegacyMall
프로젝트 설명
FC바르셀로나의 선수들 및 경기 순간을 컨셉으로 한 다양한 상품들을 판매하는 쇼핑몰입니다. 이 쇼핑몰은 바르셀로나 팬들이 좋아하는 선수의 특별한 순간이나 경기를 기억하고 그들과 공유할 수 있는 플랫폼을 제공합니다.

사용 기술
관리자: NextJs v13 / mongoDB (prisma) / tailwind / zustand / stripe / redis
스토어: React / tailwind / react-query / zustand
프로젝트 구체적인 내용
경기 하이라이트나 선수들의 특별한 순간을 VR/AR 기술로 사용자들이 체험할 수 있게 합니다.
선수들의 사인이 포함된 한정판 상품을 판매합니다.
경기 날짜, 선수, 점수 등을 기반으로 한 상품 검색 기능을 제공합니다.
각 상품의 구매와 함께 관련된 경기의 하이라이트 클립을 제공합니다.
"오늘의 경기" 섹션에서는 과거 이 날 있었던 특별한 경기와 관련 상품을 소개합니다.
사용자들이 특정 경기의 날짜를 선택하여 그 날의 경기와 관련된 상품을 볼 수 있는 캘린더 기능을 제공합니다.
예상 규모
기간: 2주 ~ 1달 (매일 3시간 기준)
예상 DB 규모: 선수 데이터, 경기 데이터, 상품 데이터, 사용자 데이터, 주문 데이터 등을 포함한 중형 규모

 

두 패턴 모두 개인이 구현하기에는 조금 힘든 부분들이 있습니다. 이를 수정 요청한 후 다시 결과물을 뽑아봤습니다.

 

수정 요청 프롬

둘다 훌룡한 주제들이지만, 개인이 구현하기에는 어려운 부분들이 있습니다 (ex 실제 유니폼과 연결, vr/ar 기술등)
따라서 아래와 같은 조건을 하나 추가하겠습니다
조건: 실제로 물건을 오가는 온라인 쇼핑몰이 아닌, 가상 데이터가 오가는 온라인 쇼핑몰로 부탁합니다. 예를들어 피파라는 게임의 이적시장등을 참고해주세요

 

아웃풋 2

패턴 1
주제
가상의 바르셀로나 선수 이적 시장 쇼핑몰

프로젝트명
BarcaFantasyMarket
VirtualBarcaShop
eBarcaExchange
프로젝트 설명
사용자들이 가상의 세계에서 바르셀로나 선수들을 "구매"하고 "판매"할 수 있는 시뮬레이션 쇼핑몰을 구축합니다. 이 쇼핑몰에서 팬들은 가상의 자금으로 선수들을 구매하여 자신의 '팀'을 만들고, 그들의 성적에 따라 가치가 상승하거나 하락하는 등의 경험을 할 수 있습니다.

사용 기술
관리자: NextJs v13 / mongoDB (prisma) / tailwind / zustand / stripe(for simulation) / redis
스토어: React / tailwind / react-query / zustand
프로젝트 구체적인 내용
선수들의 가치는 실제 경기 데이터 또는 시뮬레이션된 경기 데이터에 기반하여 변동합니다.
사용자들은 가상의 자금을 활용하여 선수들을 "구매"하고, 자신의 "팀"을 관리합니다.
시즌이 끝날 때 마다 사용자들의 팀 성적에 따른 보상을 시뮬레이션합니다.
사용자들 간에 선수 "교환"이 가능하도록 플랫폼을 제공합니다.
선수들의 개인적인 순간(예: 골, 어시스트)도 시뮬레이션하여, 그 순간의 가치 변동을 보여줍니다.
사용자들이 직접 가치를 예측하여 분석하고 토론할 수 있는 커뮤니티 공간을 제공합니다.
예상 규모
기간: 2주 ~ 1달 (매일 3시간 기준)
예상 DB 규모: 가상 자금 데이터, 사용자 데이터, 선수 데이터, 가상 시즌 데이터 등을 포함한 중형 규모

패턴 2
주제
바르셀로나 선수 기반 가상 판타지 스토어

프로젝트명
BarcaFantasyShop
BarcaDreamStore
VirtualBarcaFestival
프로젝트 설명
사용자들이 가상의 화폐를 사용하여 바르셀로나 선수들의 판타지 아이템(예: 특별한 스킬, 능력치, 유니폼, 액세서리 등)을 구매하고, 이를 바탕으로 개인의 선수들이 가상의 경기를 진행하면서 다양한 보상을 얻는 플랫폼을 제공합니다.

사용 기술
관리자: NextJs v13 / mongoDB (prisma) / tailwind / zustand / stripe(for simulation) / redis
스토어: React / tailwind / react-query / zustand
프로젝트 구체적인 내용
사용자들이 가상 화폐로 선수들의 판타지 아이템을 구매합니다.
구매한 아이템을 활용하여 선수들의 능력치를 상향 시킬 수 있습니다.
선수들의 실제 경기 데이터를 바탕으로 가상 경기의 결과를 시뮬레이션하고, 이에 따라 사용자들이 보상을 받을 수 있습니다.
"대결" 기능을 통해 사용자들이 서로의 팀을 대결시켜 가상의 경기를 즐길 수 있습니다.
시즌별, 월별 랭킹 시스템을 도입하여 경쟁 요소를 도입합니다.
사용자들이 자유롭게 아이템을 교환하거나 판매할 수 있는 마켓 플레이스를 제공합니다.
예상 규모
기간: 2주 ~ 1달 (매일 3시간 기준)
예상 DB 규모: 사용자 데이터, 선수 데이터, 가상 아이템 데이터, 가상 경기 데이터, 가상 화폐 데이터 등을 포함한 중형 규모

 

이번에는 두 패턴 모두 재밌고, 실제로 구현가능한 주제들이 나왔습니다

이 중에서 저는 2번째 패턴을 주제로 프로젝트를 구현해보려합니다.

 

 

3. 최종 초기 기획

노션 링크

BarcaFantasyShop