스터디장님 시연 영상 보고 일단은 따라했습니다.
이상한 에러가 나서 그것을 잡느라 Claude code와 씨름하 다가 2시간 정도를
날린 것 같네요.
예제 앱은 만들었는데 이상하게도 자꾸 정적인 이미지가 표현이 안되어서
클코와 씨름하면서 수정하다가 속된 말로 꼭지(?) 돌 뻔 했습니다. 🤕 🤭
나중에는 포기하고 싶었는데 그래도 그냥 꾹 참고 버티기 모드로 했더니
어떻게 됐는지는 모르지만 성공했습니다.
거친 과정은
git clone ...
OpenAI 공식 예제 소스코드 내려받기
cd openai-apps-sdk-examples
프로젝트 디렉토리로 이동했어요.
npm install -g pnpm
pnpm을 전역으로 설치했어요.
pnpm install
프로젝트에 필요한 모든 의존성 설치
server.ts 수정
예제 앱 이름을 pizza에서 pizzaz로 변경했어요.
UI 빌드 설정 Tip(클로드 코드에 프롬프트로 명령)
CSS/JS 파일이 따로 안 생기도록 HTML에 인라인(Inline)으로 작성되게 설정했어요.
pnpm run build
앱을 실행 가능한 형태로 빌드했어요.
npm start
서버 실행 및 GPT in App 구동을 확인했어요!
스터디장님이 하라고 한 대로 따라해서 하긴 했는데
여기서 가장 큰 의문 겸 질문이 있습니다.
개발을 잘 모르는 (개발알못) 입장에서
하라는 대로 하는 것은 어떻게든 하겠는데
왜 이러한 것들을 하는 것인지?
npm? pnpm? 은 무엇이고?
비개발자 입장에서는 가르쳐 주지 않으면 이러한 작업 내용과 작업 명령어들을 전혀 생각할 수 없어서..... 답답함
이러한 것들을 모르면 매번 컴퓨터 앞에 앉아서
멍하니 코드 만 또는 Cursor 화면만 보고 있을 수 밖에 없다는 생각이 들어서
이런 부분들에 대한 보는 눈 또는 실력을 키울 수 있는
방법 또는 이론 또는 교재 등등을 알면 좋겠습니다.
Claude code와 사투를 벌인 과정 일부
한국어 텍스트 편집기의 스크린샷
한국어 응용 프로그램의 스크린샷
남들 되는 게 왜 나는 안될까? T.T
이번에 새로 배운 것
Ctrl+C 누르면 터미널 강제 종료시킴
ngrok
ngrok은 내 컴퓨터에서 돌고 있는 프로그램(예: 웹서버, API, webhook 등)을 외부 인터넷에서 접근할 수 있게 해주는 ‘터널링 도구’야.
쉽게 말하면, 로컬 환경을 잠시 인터넷에 공개해주는 서비스라고 보면 돼.
---
## 🔍 핵심 개념을 가장 쉽게 정리하면
### 1) 로컬 → 인터넷 연결용 ‘임시 주소(URL)’ 생성
내 PC에서 localhost:3000 같은 주소로만 접속 가능한 서비스가 있다고 해보자.
ngrok은 이것을 외부에서 접속 가능한 URL로 바꿔 줘.
예)
localhost:3000 → https://a1b2c3d4.ngrok-free.app
---
### 2) 방화벽, 포트포워딩 없어도 된다
보통 외부에서 내 PC로 접속하려면 공유기 설정·포트포워딩 등 복잡한 작업이 필요해.
ngrok은 이런 과정을 모두 건너뛰게 해줘.
---
### 3) 웹훅 테스트에 필수
Stripe, Kakao, Slack, GitHub Webhook처럼
외부 서비스가 내 서버로 데이터를 보내야 하는 상황에서 ngrok을 많이 사용해.
예: Bubble, n8n, ChatGPT Actions 테스트할 때도 필수적이야.
---
## 🧠 실제로는 어떻게 사용할까?
### 예: 3000번 포트에서 서버 실행 중일 때
터미널에서
ngrok http 3000
하면 바로 외부에서 접근 가능한 URL이 생겨.
드디어 천신만고 끝에 만든 결과물
한국어가 포함된 한국어 앱 스크린샷
한국의 어느 레스토랑 사진
일단 test로 예제를 통해서 앱을 만들고 챗GPT에 연결해 보는 경험을 해 보니
챗GPT에 앱을 만들어서 등록한다라는 것이 어떤 개념인지
살짜쿵 이해가 좀 되는 것 같습니다.
챗GPT가 원하고 도움 받기를 원하는 앱이 어떤 것들인지
약간은 감이 잡히는 듯 하네요
챗GPT에 등록시킬 앱을 구상해 보고 기획해서
만드는 작업을 진행시켜 봐야겠습니다.
감사합니다. 🙇 🌸 🔥
