소개
최근 OpenAI의 Apps in ChatGPT 기능이 공개되면서 누구나 자신만의 GPT 앱을 만들 수 있게 되었습니다. 하지만 저처럼 기존 앱 구조에 익숙하지 않은 사람들에게는 처음 구현해보는 것이 쉽지 않았습니다 😅
처음 앱을 만들 당시에는 구조를 파악하기도 어렵고, 어떤 식으로 구성해야 할지 감이 잘 안 잡혔습니다. 저뿐만 아니라 스터디원분들도 구현 자체에 어려움을 많이 겪었고요.
그래서 생각했습니다.
"이걸 Claude 코드 스킬로 명령만 해서 바로 만들 수 있다면, 정말 빠르고 재밌게 앱을 만들어볼 수 있지 않을까?"
그래서 pizzazz 앱 예시의 구조를 분석하도록 하고, 그동안의 시행착오를 담아서 Claude 코드 스킬을 만들었습니다.
진행 방법
사용한 도구
OpenAI Apps SDK: ChatGPT 앱을 만들기 위한 핵심 도구
Claude 코드 스킬: 코드 자동화 실행을 위한 자연어 기반 명령 스킬
구현 내용
초반에는 스킬을 프로젝트별로 따로 구성했지만, 나중엔 글로벌 스킬로 구성해서 어디서든 사용할 수 있게 개선했습니다.
## 흔한 실수 및 해결
### 실수 1: build-all.mts의 targets 배열 업데이트 누락
증상: pnpm run build 해도 위젯 파일이 생성되지 않음
해결: build-all.mts의 targets 배열에 위젯 이름 추가
### 실수 2: MCP 서버의 widgets 배열 업데이트 누락
증상: ChatGPT에서 위젯 도구가 보이지 않음
해결: pizzaz_server_node/src/server.ts의 widgets 배열에 추가
### 실수 3: root ID 불일치
증상: 위젯이 렌더링되지 않음 (빈 화면)
해결:
- index.tsx: document.getElementById("{widget-name}-root")
- 빌드된 HTML: <div id="{widget-name}-root"></div>
- 두 ID가 정확히 일치해야 함
### 실수 4: 정적 파일 서버 미실행
증상: JS/CSS 404 에러
해결: pnpm run serve 실행 (포트 4444)
예시 프롬프트
"grocery store에서 장보는 앱을 만들자"결과와 배운 점
Claude 코드 스킬을 프로젝트가 아닌 글로벌 구조로 정의할 수 있다는 걸 알게 되어, 재사용성과 속도가 대폭 향상됐습니다 🔄
마켓플레이스에 등록하고 싶었지만, 구조나 개념을 아직 정확히 이해하지 못해서 등록엔 실패했어요 😅 (다음 목표!)
앱을 쉽게 만들 수 있게 되니, 다양한 실험을 빠르게 해볼 수 있었습니다.
도움 받은 글
: 많은 삽질을 통해 구현함
