Ladder Pick in ChatGPT#
ChatGPT Apps란?#
ChatGPT Apps 는 외부 서비스 제공자가 자신의 서비스를 ChatGPT에 통합할 수 있도록 OpenAI가 2025년 10월에 도입한 기능입니다. MCP(Model Context Protocol) 를 기반으로 하고 있는데, MCP는 LLM이 외부의 기능(tools)을 호출할 수 있는 표준을 제공합니다. ChatGPT Apps는 여기서 한 단계 더 나아가, 외부 기능의 인터랙티브 UI와 로직까지 ChatGPT 채팅 화면 안에 통합될 수 있도록 확장한 것입니다. 즉, MCP를 통해 “LLM이 외부 기능을 사용하는 표준"이 마련되었고, 그 외부 기능의 범위가 단순한 데이터 조회나 실행을 넘어 사용자와 상호작용하는 UI까지로 넓어진 것이라 보면 됩니다. 여기에 더해 OpenAI는 App Directory라는 마켓플레이스를 열어, 다양한 앱을 많은 사람이 탐색하고 사용해 볼 수 있는 장을 마련했습니다. 개발자 입장에서는 자신이 만든 앱을 ChatGPT의 방대한 사용자 기반에 노출시키고, 앱을 통한 수익화를 기대해 볼 수 있는 환경이 된 것입니다.
사용자는 대화 중에 앱 이름을 언급하거나(예: “Spotify, 플레이리스트 만들어줘”) ChatGPT가 문맥에 맞는 앱을 자동으로 제안하는 방식으로 앱을 사용할 수 있습니다. 초기 파일럿 파트너로 Booking.com, Canva, Coursera, Figma, Expedia, Spotify, Zillow 등이 참여했으며, 2025년 12월부터는 일반 개발자도 App Directory에 앱을 제출할 수 있게 되었습니다.
시작하게 된 계기#
얼마 전 에이전트 시대, Ted Factory의 방향을 다시 점검하며 라는 글을 쓰면서 여러 고민을 했습니다. 그중에서도 특히 인상 깊었던 깨달음이 하나 있었습니다. 요즘같이 봇물처럼 기술이 밀려오는 시대에는 지식량이 중요한 것이 아니라, “흡수 → 전환” 능력이 중요하다 는 것이었습니다. 새 기술을 내 시스템에 빠르게 반영해 가치로 전환하는 능력, 그것이 핵심이라는 판단이었습니다.
그래서 ChatGPT Apps라는 플랫폼을 알게 되었을 때, 뭐든 하나 만들어서 올려보자 는 자세로 바로 개발에 착수했습니다. “완벽하게 이해한 후에 시작하자"가 아니라, “작게라도 붙여보고, 효과가 있으면 확장하고, 없으면 빠르게 버린다"는 원칙을 실천한 것입니다.
왜 사다리 게임인가#
뭘 올려볼까 고민하다가 사다리 게임 으로 결정했습니다. 이유는 다음과 같습니다.
- 간단합니다: 로직 자체가 복잡하지 않아 MVP를 빠르게 만들 수 있습니다.
- 범용성이 있습니다: 팀 배정, 순서 정하기, 벌칙 게임 등 일상에서 활용되는 장면이 많아, 어쩌면 많은 사람이 쓸 수도 있을 것 같은 희망이 보였습니다.
- 아직 아무도 안 올렸습니다: ChatGPT App Directory를 찾아보니, 아직은 사다리 게임 앱이 등록되어 있지 않은 것으로 보여서 결정했습니다.
계획서 작성#
가장 먼저 한 일은 계획서 를 작성하는 것이었습니다. ChatGPT Apps의 공식 개발자 문서를 꼼꼼히 읽고, 아키텍처(MCP 서버 + 웹 컴포넌트), 기술 설계, MCP 툴 설계, 위젯 설계, 배포 전략, 테스트 계획, 제출 체크리스트까지 문서화했습니다.
- Ladder Pick 개발 계획서 문서를 참고해 주세요.
구현#
계획서를 기반으로 앱 프로젝트를 구성하고 관련 코드를 구현했습니다. 이때까지만 해도 금방 끝날 줄 알았습니다..
기술 스택#
- Node.js + TypeScript, 패키지 매니저는 pnpm
@modelcontextprotocol/sdk— MCP 서버 프레임워크@modelcontextprotocol/ext-apps— Apps SDK 헬퍼zod— 툴 입력 스키마 검증- UI는 바닐라 HTML / CSS / JS 단일 파일(ChatGPT 내 iframe으로 렌더)
MCP 툴 4개#
| 툴 | 설명 |
|---|---|
create_game | 참가자와 항목을 받아 사다리 게임을 생성하고 랜덤 1:1 매칭을 수행합니다 |
reshuffle | 기존 게임의 매칭을 새로운 시드로 다시 섞습니다 |
reveal_next | one-by-one 모드에서 다음 매칭을 한 명씩 공개합니다 |
export_result | 게임 결과를 텍스트 또는 JSON으로 내보냅니다 |
핵심 알고리즘#
- mulberry32 시드 기반 RNG + Fisher-Yates shuffle 로 Items를 섞어 Players와 1:1 매핑합니다.
- 서버(Node.js)와 위젯(브라우저 JS) 양쪽에 동일한 mulberry32 알고리즘을 구현하여, 같은 시드로 동일한 결과를 보장합니다.
- Canvas 기반 사다리 시각화: Fisher-Yates 결과를 bubble sort 인접 교환으로 분해하여 가로선을 배치하고, 플레이어별 색상으로 경로 애니메이션을 표시합니다.
위젯 UI#
사용자가 ChatGPT에서 @Ladder Pick 또는 “play a ladder game"처럼 입력하면, ChatGPT가 create_game 툴을 호출하고 Ladder Pick 위젯이 iframe에 표시됩니다.
로컬 테스트와 배포#
로컬 테스트#
초기 구현 후 테스트할 때는 로컬에 서버를 띄운 후 ngrok 을 이용하여 HTTPS URL을 만들고, ChatGPT를 Developer Mode 로 변경한 후에 앱을 추가하고 테스트했습니다.
AWS Lightsail 배포#
ChatGPT의 Apps에 앱을 등록하기 위해서는 MCP 서버를 외부에서 접근 가능한 서버로 배포해야 했고, AWS Lightsail 을 이용하여 배포하기로 결정했습니다. 구성은 다음과 같습니다.
- Lightsail 인스턴스 ($5 / 월) 에서 Nginx 리버스 프록시 + Let’s Encrypt HTTPS 구성
- PM2 로 MCP 서버 프로세스 관리
- 경로 기반 라우팅 으로 추후 다른 앱도 같은 인스턴스에서 호스팅할 수 있는 구조
앱 등록 과정: 생각보다 많은 시간이 소요된 구간#
platform.openai.com/apps-manage 에서 New App 버튼을 누르고 앱 등록을 진행하는 과정에서도 상당히 많은 시간을 소비했습니다. 요구하는 모든 사항이 required였고, 하나하나 준비해야 할 것들이 많았습니다.
앱 정보 기재#
- 앱 이름, 설명, 카테고리 등 기본 정보를 입력했습니다.
- Terms of Service 페이지를 별도로 만들어야 했습니다.
- 데모 동영상 도 만들어서 S3에 올린 후 URL을 기재해야 했습니다.
MCP 서버 정보 기재#
- 서버 URL을 입력하고, 도메인 인증 을 위해 요구되는 경로(
/.well-known/openai-apps-challenge)로 접속 시 인증값을 출력하도록 Nginx 설정을 변경 · 적용했습니다.
그 외 요구사항들#
- 툴들에 대한 설명을 기재했습니다.
- 테스트케이스들을 기재했습니다.
- 스크린샷을 만들어서 입력했습니다.
- 프라이버시 정책 URL, 지원 국가 설정 등 다양한 정보들이 추가로 요구되었습니다.
데모 영상#
아래는 Ladder Pick 앱의 데모 영상입니다. ChatGPT 안에서 사다리 게임을 생성하고, 위젯에서 매칭 결과를 확인하는 과정을 보여줍니다.
현재 상태#
Ladder Pick 앱은 현재 ChatGPT Apps에 등록 요청되어 “리뷰” 단계에 있습니다. OpenAI의 심사를 통과하면 App Directory에 공개될 예정입니다.
돌아보며#
처음 “간단한 사다리 게임이니까 금방 끝나겠지"라고 생각했지만, 실제로는 생각보다 훨씬 많은 시간이 들었습니다. 앱 코드를 짜는 것보다 등록 과정에서 요구하는 사항들을 하나하나 준비하는 데 더 많은 시간이 소요되었습니다. Terms of Service 페이지 만들기, 데모 영상 촬영 및 업로드, 도메인 인증 설정, 테스트케이스 작성, 스크린샷 제작 등 각각은 작은 작업이지만, 이것들이 모여서 상당한 시간을 차지했습니다.
그럼에도 불구하고, 이 과정 자체가 “흡수 → 전환” 능력을 실천하는 과정이었다고 생각합니다. ChatGPT Apps라는 새로운 플랫폼을 알게 되고, 실제로 앱을 하나 만들어 등록하기까지의 전 과정을 경험한 것은, 앞으로 이 플랫폼에서 추가 앱을 만들거나 다른 새로운 플랫폼이 등장했을 때 훨씬 빠르게 대응할 수 있는 기반이 되었습니다.