Ladder Pick in ChatGPT on Ted Factory

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