Ladder Pick — ChatGPT App 개발 계획#
- 프로젝트명:
ted-mcp-servers - 앱 이름(App Directory 표시): Ladder Pick
- 앱 언어: 영어 우선 (UI / 툴 description / 프라이버시 정책 모두 영어, 계획 문서만 한글)
공식 개발자 문서 참고 링크#
핵심 문서(필독)#
- Apps SDK 홈: https://developers.openai.com/apps-sdk
- Quickstart(Todo 예제 포함): https://developers.openai.com/apps-sdk/quickstart
- MCP Server 개념: https://developers.openai.com/apps-sdk/concepts/mcp-server
- MCP Apps in ChatGPT: https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt
설계 / 디자인#
- UX 원칙: https://developers.openai.com/apps-sdk/concepts/ux-principles
- UI 가이드라인: https://developers.openai.com/apps-sdk/concepts/ui-guidelines
- 디자인 컴포넌트: https://developers.openai.com/apps-sdk/plan/components
- 툴 정의: https://developers.openai.com/apps-sdk/plan/tools
- 유스케이스 리서치: https://developers.openai.com/apps-sdk/plan/use-case
빌드#
- MCP 서버 셋업: https://developers.openai.com/apps-sdk/build/mcp-server
- ChatGPT UI 빌드: https://developers.openai.com/apps-sdk/build/chatgpt-ui
- 상태 관리: https://developers.openai.com/apps-sdk/build/state-management
- 인증: https://developers.openai.com/apps-sdk/build/auth
- 예제 앱 모음(GitHub): https://github.com/openai/openai-apps-sdk-examples
- UI 라이브러리(GitHub): https://github.com/openai/apps-sdk-ui
배포 / 테스트 / 제출#
- 배포 가이드: https://developers.openai.com/apps-sdk/deploy
- 테스트 가이드: https://developers.openai.com/apps-sdk/deploy/testing
- ChatGPT 연결: https://developers.openai.com/apps-sdk/deploy/connect-chatgpt
- 앱 제출 및 유지보수: https://developers.openai.com/apps-sdk/deploy/submission
- 앱 제출 가이드라인(정책 / 규칙): https://developers.openai.com/apps-sdk/app-submission-guidelines
- Developer Mode 설정: https://platform.openai.com/docs/guides/developer-mode
가이드 / 참고#
- 보안 & 프라이버시: https://developers.openai.com/apps-sdk/guides/security-privacy
- 메타데이터 최적화: https://developers.openai.com/apps-sdk/guides/optimize-metadata
- 트러블슈팅: https://developers.openai.com/apps-sdk/deploy/troubleshooting
- API 레퍼런스: https://developers.openai.com/apps-sdk/reference
- 변경 로그: https://developers.openai.com/apps-sdk/changelog
일반 참고#
- Apps in ChatGPT(Help Center): https://help.openai.com/en/articles/12503483-apps-in-chatgpt-and-the-apps-sdk
- 앱 디렉터리 제출(Help Center): https://help.openai.com/en/articles/20001040
- 앱 디렉터리 브라우징: https://chatgpt.com/apps
목표#
- ChatGPT App Directory에 등록 가능한 “Ladder Pick” 앱을 만듭니다.
- 채팅 안에서 인터랙티브 위젯(iframe) 을 통해 참가자 / 항목 입력 → 사다리(랜덤 매칭) 생성 → 결과 공개까지 완료할 수 있게 합니다.
- ChatGPT Developer Mode로 테스트 후, 최종적으로 App Directory 제출 / 승인 / Publish 를 목표로 합니다.
전제 / 범위#
- MVP: 인터랙티브 위젯(iframe UI) + MCP 툴 기반. 위젯에서 참가자 / 항목 입력, 결과 표시, 다시 섞기 등 핵심 인터랙션을 제공합니다.
- 비범위(초기): 로그인 / 결제, 실시간 멀티플레이, 복잡한 애니메이션, 외부 데이터 연동.
- 인증 불필요: 외부 서비스 연동이 없으므로 OAuth / 인증 플로우 없이 시작합니다.
- 안전 / 정책: 외부 시스템에 쓰기(write) 동작 없음. 툴의 hint annotation:
readOnlyHint: false— 내부 상태를 생성 / 변경하므로 true가 아님destructiveHint: false— 되돌리기 어려운 외부 영향 없음openWorldHint: false— 공개 인터넷 상태 변경 없음
사용자 경험(UX) 시나리오#
기본 흐름(인터랙티브 위젯)#
- 사용자가
@Ladder Pick또는 “play a ladder game"처럼 입력합니다. - ChatGPT가
create_game툴을 호출하고, Ladder Pick 위젯 이 iframe에 표시됩니다. - 위젯 내에서:
- Players 리스트: 참가자 이름 추가 / 삭제 (기본 4명)
- Items 리스트: 결과 항목(상품 / 역할) 추가 / 삭제
- Options: Reveal mode (All at once / One by one), Seed (auto / custom)
- “Pick!” 버튼 클릭 → 매칭 결과 생성
- 결과 영역:
- All at once: 전체 매칭 표 즉시 표시
- One by one: “Reveal Next” 버튼으로 한 명씩 공개
- “Reshuffle” 버튼: 새 시드로 다시 섞기
- “Export” 버튼: 결과를 텍스트로 복사
텍스트 폴백#
- 위젯 없이도 ChatGPT가 툴 호출 결과를 텍스트(표)로 보여줄 수 있습니다.
- 예: “Ladder Pick, match A,B,C,D with 1st,2nd,3rd,4th” → 텍스트 표 응답
에러 케이스#
- 참가자 < 2명 → 에러 메시지: “At least 2 players are required.”
- 항목 개수 ≠ 참가자 수 → 에러 메시지: “Number of items must match number of players. You have {n} players and {m} items.”
- 항목 비어있음 → 에러 메시지: “Items list cannot be empty.”
기능 요구사항#
입력#
- 참가자 목록(Players): 2~20명
- 결과 항목(Items): 참가자 수와 정확히 동일한 개수 (불일치 시 에러 반환)
- 옵션
- Reveal mode:
all|one-by-one - Seed: 자동 생성 또는 사용자 지정(재현 가능성)
- Reveal mode:
출력#
- 매칭 결과: Player ↔ Item 1:1 매핑
- 사다리 표현: Canvas 기반 시각적 사다리(수직선 + 가로 발판 + 색깔별 경로 애니메이션) 구현
상태 / 저장#
- 모듈 레벨
Map<gameId, GameState>으로 프로세스 내 인메모리 관리 - 게임 생성 시 고유 ID 발급, 이후 reshuffle / reveal_next에서 해당 ID로 조회
- 영구 저장 없음(서버 재시작 시 초기화됨, 초기에는 이 정도로 충분)
기술 설계#
아키텍처(공식 구조 기반)#
ChatGPT Apps는 아래 두 요소로 구성됩니다: