AI로 앱 만들기 #2 - ChatGPT 프로젝트, 개발 환경 설정하기

기획 문서를 완료했으니, 개발 환경을 VSCode에 세팅해보겠습니다.

우선 개발 환경을 설정하기 전에 앞으로 프로젝트 전체를 지원하는 GPT 프로젝트를 설정해 보겠습니다.

 

GPT 프로젝트 설정하기

ChatGPT에서 프로젝트를 사용하는 이유는 크게 아래의 두가지입니다.

1. 참고해야 하는 문서를 미리 업로드해서 모든 컨텍스트 상에서 문서를 사용할 수 있도록 한다.

2. 전체 프로젝트 및 작업에서 최상위로 처리되는 프롬프트를 작성해 둔다.

 

만약, 이 작업을 해 두지 않으면 LLM 모델의 컨텍스트 용량으로 인해 앞에서 파일 참조를 프롬프트로 넣어두었어도 뒤에 가면 그 프롬프트가 무시되거나, 프로젝트의 기본 목적을 잊고 답변을 주어서 다시 초기 명령을 넣어줘야 하는 경우가 발생하기 때문입니다.

그렇기 때문에, 전체 프로젝트 상에서 기본이 되는 설정 프롬프트를 프로젝트에서 입력해둡니다.

 

이전에 받았던 정보를 기반으로 문서를 여러개로 쪼개줍니다. 저는 크게는 기획 문서와 개발 문서로 나누고 각각 목적별로 나누었습니다.

구조로 만들어보면 다음과 같습니다.

• 기획 문서
  • 서비스 개요 및 핵심 기능
  • 유저 스토리와 인수 조건
  • 정책과 알고리즘
• 개발 문서
  • 시스템 아키텍처
  • 기술 스택
  • 개발 환경
  • 배포 환경

각각의 파일을 txt로 만들어서 프로젝트의 "프로젝트 파일"에 업로드합니다. 그리고 이 파일을 사용하는 기본 설정 프롬프트를 "지침" 부분에 작성해줍니다.

지침 프롬프트는 다음과 같이 작성합니다.

 

[프로젝트 지침 프롬프트]

당신은 1인 개발자입니다. Visual Studio Code를 IDE로 사용하여 모바일 호환 웹 서비스를 개발합니다.
이 서비스의 핵심 기능은 다음과 같습니다.
이 핵심 기능과 업로드된 참조 문서를 참고하여 저와 함께 서비스를 개발해 주세요.

[핵심 기능] 
- 업로드된 여행 사진의 촬영 시간과 위치 데이터를 분석하여 시간과 위치별로 사진을 그룹화 
- 각 그룹에 방문한 장소에 대한 리뷰 남기기 
- 이 여행을 시간 순서와 공간 순서로 정리하고, 각 그룹의 리뷰를 포함하여 전체 여행을 한눈에 볼 수 있도록 구성
- 정리된 내용을 바탕으로 LLM 생성형 AI를 사용하여 전체 여행을 정리하는 기록을 생성
- 생성된 기록을 소셜 미디어에 공유

[참고 문서]
- 서비스 개요 및 핵심 기능: SERVICE OVERVIEW & CORE FEATURES.txt
- 사용자 스토리와 승인 기준: USER STORIES AND ACCEPTANCE CRITERIA PER PAGE.txt
- 각 승인 기준에 대한 정책과 알고리즘: POLICIES AND ALGORITHMS FOR ACCEPTANCE CRITERIA.txt
- 시스템 아키텍처 개요: dev_1_SYSTEM ARCHITECTURE OVERVIEW.txt
- 기술 스택: dev_2_TECH STACK.txt
- 개발 환경: dev_3_DEVELOPMENT ENVIRONMENT.txt
- 배포 환경 및 운영: dev_4_DEPLOYMENT AND OPERATIONS, DEVELOPER NOTES.txt

 

프로젝트 설정창

 

여기까지 설정했으면 이 프로젝트 내에서 GPT와 대화를 하면서 개발 환경을 설정합니다.

 

개발 환경 설정

아래 프롬프트를 사용하여 개발 환경 설정을 단계별로 요청합니다. 만약, 더 필요한 부분이 있다면 해당 단계에 대해 더 자세하게 알려달라고 요청합니다.

 

[개발 환경 설정 프롬프트]

저는 Visual Studio Code를 사용합니다.
현재 아무런 설정 없으며, 프로젝트 폴더 이름은 trip_track입니다.
개발에 필요한 것들을 설정하기 위한 과정을 단계별로 알려주세요.

 

o1 모델을 사용하여 요청하였기 때문에 굉장히 답변이 길고 자세하게 나와 내용은 생략합니다.

간단히 목차만 정리해보면 이런 순서와 내용으로 답변이 생성되었습니다.

 

1. VS Code 초기 설정(Node.js 설치 및 git 리포지토리 초기화)

2. Next.js + TypeScript 프로젝트 설정

3. 라이브러리 및 패키지 설치(관련 패키지 설치, UI 프레임워크 설정)

4. 환경 변수 설정(API키 작성)

5. 페이지와 API 라우트 구조 설정

6. 유저 스토리에 따른 페이지별 개발 내역 정리

7. 데이터베이스/파일 스토리지 설정 및 구성

8. OpenAI 클라이언트 설정

9. 테스트 & QA

10. 배포 설정(Vercel 사용)

 

이를 통해 기본적인 개발 환경을 설정하였고, 이를 설정하는 과정에서 아래와 같은 내용들을 업데이트하였습니다.

• UI Framework: Chakra UI 사용
• 데이터베이스/스토리지: Supabase 사용

이 내용을 다시 위의 txt 파일에 반영하여 프로젝트 파일에 업로드해 주는 것으로 향후 개발 작업을 시작하기 위한 프로젝트와 개발 환경 설정을 마쳤습니다.