소개
19기 ChatGPT 앱 개발 스터디 오프라인 모임에서 GPT 앱 개발의 전체적인 흐름과 초기 셋팅법에 대해 배웠습니다.
최근에 Apps in ChatGPT 기능이 곧 공개될 예정이라는 소식을 듣고, 누구보다 먼저 이 기술을 배우고 실제로 앱을 만들어보고 싶다는 마음에 이번 스터디에 참여하게 되었어요.
지난 1주차에는 스터디장님부터의 기본적인 챗지티피앱 개발(앱의 동작 원리, MCP 개념, 좋은 앱기획법)을 공부했다면, 이번엔 오프라인에서 만나 직접 pizza 앱을 실행해보는 실습 중심으로 진행했습니다.
진행 방법
✅ 사전 준비
ChatGPT Plus 구독
Claude Code Pro 구독
🧰 개발 환경 구성 및 실행 절차
VS Code (또는 Cursor) 설치
Claude Code for VS Code 확장 익스텐션 설치
Git 설치
Node.js 설치
ngrok 인증키 발급 및 chatGPT앱 연결 정보 설정
pnpm install, build
MCP서버 가동
chatCPT 입력창에서 pizza 앱 실행
🔧 npm 실행 오류
npm install -g pnpm 실행과정에서 오류 발생
🔧 npm 명령어 실행 오류를 Claude Code Agent와 대화를 통해 오류 수정
🔧 server.ts 파일내 오타 수정 및 설정
server.ts에서 pizza -> pizzaz로 수정하기
🔐 ngrok 가입 및 설정
ngrok 가입 및 인증키 발급
ngrok 인증키를 GPT 설정 > 연동 앱 및 커넥터 >pizza앱 연결정보에 입력
pizza MCP 서버 가동
pnpm start
🚀 ChatGPT에서 앱 실행
ChatGPT 입력창에서
pizza show me the pizzapizza 앱 실행 후 UI 확인
결과와 배운 점
Git 설치 오류 및 npm 실행 오류가 있었지만, Claude Code Agent의 도움으로 해결할 수 있었음
사소한 설정 하나하나가 앱 실행에 영향을 미친다는 점을 체감함
실습을 통해 GPT 앱의 흐름을 이해하고, ‘직접 해보는 힘’의 중요성을 느낌
무엇보다 스터디장님과 든든한 동기들의 피드백과 응원이 큰 도움이 되었음 😊
도움 받은 글
스터디장님의 1주차 강의 슬라이드
Claude Code 공식 가이드
Git 및 Node.js 설치 문서
💬 전하고 싶은 말
처음부터 잘 하는 사람은 없어요!
실습하고, 틀리고, 고치면서 배우는 과정에 함께하면 분명 ChatGPT 앱 만들 수 있습니다 💪
