📝 소개: 대체 뭘 하려고 했고, 왜 했냐면요?
시도 목표
이번 프로젝트는 OpenAI에서 새로 선보인 GPT in App 기능을 직접 써보고 싶어서 시작했어요. 목표는 GPT 창 안에서 돌아가는 나만의 애플리케이션을 만들어보는 거였죠. OpenAI 공식 예제를 가지고 개발 환경을 세팅하고, 최종적으로 GPT 안에서 앱 화면을 성공적으로 띄우는 것을 목표로 했어요.
도전 이유
기술이 멋져 보이는 것도 중요하지만, 저는 실행과 완성을 통해 배우고 성장하고 싶었어요. 그래서 짧고 확실한 데드라인이 있는 명확한 목표를 세우고, 이 프로젝트를 끝까지 완주해 보려고 했답니다. 완주 경험만큼 확실한 학습은 없다고 생각했거든요!
🛠️ 진행 방법: 어떤 도구를 사용했고, 어떻게 활용했나요?
1. 사용 도구 및 환경
GPT in App 개발 환경은 OpenAI의 공식 가이드라인을 따라 준비했어요.
주요 도구:
Node.js (기존에 설치해 둔 환경을 활용했어요.)
VS Code 터미널
Git (예제 코드 복제에 필수였죠.)
pnpm (빠르고 효율적인 패키지 관리 도구예요.)
협업/보조 도구:
Claude 확장 (VS Code 환경에서 Git 설치와 연동 과정에 도움을 받았답니다.)
2. 구체적인 진행 단계
OpenAI에서 제공하는 예제 저장소(openai-apps-sdk-examples)를 클론받아 환경을 설정하고 앱을 실행했어요.
순서
명령어 / 작업 내용
주요 목적
1.
git clone ...
OpenAI 공식 예제 소스코드 내려받기
2.
cd openai-apps-sdk-examples
프로젝트 디렉토리로 이동했어요.
3.
npm install -g pnpm
pnpm을 전역으로 설치했어요.
4.
pnpm install
프로젝트에 필요한 모든 의존성 설치
5.
server.ts 수정
예제 앱 이름을 pizza에서 pizzaz로 변경했어요.
6.
UI 빌드 설정 Tip(클로드 코드에 프롬프트로 명령)
CSS/JS 파일이 따로 안 생기도록 HTML에 인라인(Inline)으로 작성되게 설정했어요.
7.
pnpm run build
앱을 실행 가능한 형태로 빌드했어요.
8.
pnpm start
서버 실행 및 GPT in App 구동을 확인했어요!
3. Tip: 활용한 핵심 프롬프트 전문
이 과정에서 클로드 코드에서 아래 프롬프트를 넣어서 수정했어요.
[코드 블록]
Plaintext
ui 빌드할때, css, js파일이 생성되지 않도록 html에 인라인으로 작성해줘.
💡 결과와 배운 점: 4전 5기 끝에 얻은 인사이트
배운 점과 나만의 꿀팁
🔑 반복 학습의 힘! 인지 과부하를 넘어서다
사실 총 4번의 시도 끝에 성공했어요. 처음 라이브 시연을 따라 할 때는 Git clone부터 계속 막혔죠. 생소한 개념들을 실시간으로 따라가려니 인지 과부하가 올 수밖에 없었어요.
하지만 포기하지 않고 녹화된 영상을 보며 반복 학습했더니, 나중에는 '핵심 과정은 생각보다 어렵지 않았네!'라는 걸 깨달았어요.
새로운걸 배울 때 미리 관련된 영상을 몇 번 보는 것이 관련된 개념과 ui를 익숙하게 해서 라이브 시연을 따라하는데 도움이 되겠다는 생각이 들었어요.
그래서 다음 주에 배울 클로드 스킬에 대한 영상을 가볍게 봤는데 너무 유용해 보여서 빨리 배우고 싶은 마음이 들었어요. 관련된 영상을 미리 보는게 기대감도 올려주는것 같아서 좋아요.
과정 중에 겪은 시행착오
총 4번의 도전: 첫 라이브 시연은 실패했고, 녹화본을 본 2, 3차 시도에서도 중간에 에러가 발생해서 여러 번 다시 시작해야 했어요. 이 끈기가 결국 '실행과 완성'이라는 목표를 이루게 해줬어요.
