Ladder Pick 개발 계획서

Ladder Pick — ChatGPT App 개발 계획#

  • 프로젝트명: ted-mcp-servers
  • 앱 이름(App Directory 표시): Ladder Pick
  • 앱 언어: 영어 우선 (UI / 툴 description / 프라이버시 정책 모두 영어, 계획 문서만 한글)

공식 개발자 문서 참고 링크#

핵심 문서(필독)#

설계 / 디자인#

빌드#

배포 / 테스트 / 제출#

가이드 / 참고#

일반 참고#


목표#

  • 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) 시나리오#

기본 흐름(인터랙티브 위젯)#

  1. 사용자가 @Ladder Pick 또는 “play a ladder game"처럼 입력합니다.
  2. ChatGPT가 create_game 툴을 호출하고, Ladder Pick 위젯 이 iframe에 표시됩니다.
  3. 위젯 내에서:
    • Players 리스트: 참가자 이름 추가 / 삭제 (기본 4명)
    • Items 리스트: 결과 항목(상품 / 역할) 추가 / 삭제
    • Options: Reveal mode (All at once / One by one), Seed (auto / custom)
    • “Pick!” 버튼 클릭 → 매칭 결과 생성
  4. 결과 영역:
    • 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: 자동 생성 또는 사용자 지정(재현 가능성)

출력#

  • 매칭 결과: Player ↔ Item 1:1 매핑
  • 사다리 표현: Canvas 기반 시각적 사다리(수직선 + 가로 발판 + 색깔별 경로 애니메이션) 구현

상태 / 저장#

  • 모듈 레벨 Map<gameId, GameState>으로 프로세스 내 인메모리 관리
  • 게임 생성 시 고유 ID 발급, 이후 reshuffle / reveal_next에서 해당 ID로 조회
  • 영구 저장 없음(서버 재시작 시 초기화됨, 초기에는 이 정도로 충분)

기술 설계#

아키텍처(공식 구조 기반)#

ChatGPT Apps는 아래 두 요소로 구성됩니다:

개발 히스토리

개발 히스토리#

코드배틀은 “한 번에 크게 만들기”보다는 MVP를 올리고, 느린 지점을 고치고, 행사를 지원하면서 확장하는 방식으로 성장해 왔습니다. 특히 초창기에는 회사 일과 공부 사이에서 시간을 쪼개며 진행했고, 그 과정에서 “개발 히스토리를 문서로 남겨 컨텍스트를 유지하는 습관”이 큰 도움이 되었습니다.

2017년 5월 21일 — 가위바위보 게임 MVP로 사이트 오픈#

코드배틀의 1st MVP는 가위바위보 게임이었습니다. 처음에는 웹페이지 하나와 API 하나로 시작했고, 사용자는 onGameStart(), onRoundStart() 같은 콜백 함수를 코드 영역에 작성해 “내 전략”을 주입하는 방식이었습니다.

Green Swagger

Green Swagger#

Green Swagger 아이콘 Green Swagger 프로모션 이미지

Green Swagger는 2024년 Gemini API Developer Competition에 출품하기 위해 Flutter로 개발한 안드로이드 / iOS 앱입니다. 앱은 “출시를 목표로 개발”까지는 했지만, 여러 이유를 검토한 끝에 출시하지 않기로 결정했고 현재는 프로젝트를 보류한 상태입니다.

대회에 왜 뛰어들었나#

대회의 1등 상금이 무려 30만 달러였고, 경품으로는 영화 백투더퓨쳐에 나올 법한 자동차까지 걸려 있었습니다. 필자 입장에서는 “안 해야 할 이유를 찾기 어려운” 조건이었고, 결국 출품을 결심하게 됐습니다.

Apps

Apps#

Apps

개인적으로 앱을 개발해 출시하고, 직접 운영하고 있습니다.

이곳에는 모바일 앱, 웹서비스, 크롬 익스텐션 등 다양한 형태의 앱들이 모여 있습니다. 제가 개인적으로 기획부터 디자인, 개발, 배포, 운영까지 전 과정을 진행하며 겪었던 시행착오와 고민을 기록하고 공유합니다.

특히 “런칭한 앱”만 다루지 않습니다. 출시를 포기했거나 운영을 종료한 앱들도, 그 과정에서 배운 점이 분명히 있었기 때문에 가능한 한 함께 정리해두려 합니다.

다루는 내용#

  • 기획: 아이디어를 검증하는 방법, 범위 설정, 우선순위, MVP 결정
  • 디자인: UX 흐름, UI 컴포넌트, 사용성 개선, 디자인 시스템 고민
  • 개발: 아키텍처, 기술 선택, 성능/안정성, 유지보수 전략
  • 출시/운영: 배포, 모니터링, 사용자 피드백, 지표/수익화, 개선 사이클
  • 중단/종료: 왜 멈췄는지, 무엇을 놓쳤는지, 다음엔 어떻게 할지

읽는 방법#

  • 왼쪽 사이드바에서 앱(또는 프로젝트)을 선택해 관련 글을 볼 수 있습니다.
  • 운영 경험은 시간이 지날수록 달라지기 때문에, 내용은 수시로 업데이트됩니다.

Ladder Pick in ChatGPT

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의 방대한 사용자 기반에 노출시키고, 앱을 통한 수익화를 기대해 볼 수 있는 환경이 된 것입니다.

Walkholic(워크홀릭)

Walkholic(워크홀릭)#

Walkholic(워크홀릭) 아이콘 Walkholic(워크홀릭) 프로모션 이미지

Walkholic(워크홀릭)은 2015년경 구글플레이에 출시했었던 안드로이드 앱입니다. 현재는 관리상의 이유로 구글플레이에서 삭제되었습니다.

당시는 “걷기/달리기/자전거” 같은 기본 활동을 측정하고, 활동량이나 심박 등을 기록해 주는 피트니스 앱들이 본격적으로 유행하기 시작하던 시기였습니다. 마침 구글에서도 Google Fit API를 제공하며 생태계를 만들기 시작했고, 그 흐름 속에서 Google Fit Challenge라는 개발자 대회가 열렸습니다. 그리고 역시나(?) 필자는 참가를 했고, 앱을 개발하기 시작했습니다.

I am your AI

I am your AI - 웹 학습, 노트 작성, 작업 자동화를 위한 AI 어시스턴트#

읽고, 묻고, 정리하고, 자동화까지 — 웹 브라우징의 모든 순간에 AI가 함께합니다.

웹페이지를 빠르게 요약하고, 모르는 부분은 바로 질문하고, AI와 함께 노트를 작성하며 지식을 쌓아보세요. 반복적인 웹 작업도 자동화할 수 있습니다. 프롬프트를 직접 설정하며 나만의 AI 어시스턴트를 만들어 보세요.

크롬 웹 스토어 - I am your AI (상세 페이지)

필자가 이 앱을 만들고 출시한 이유#

생각해보면 컴퓨터를 사용할 때 웹브라우저를 사용하는 비율이 상당히 높습니다. 일을 할 때나 공부를 할 때나 놀 때나 결국 대부분의 정보와 작업 흐름이 브라우저 안에서 일어납니다. 그렇다면 AI 기반의 브라우저 확장 도구를 잘 만들면, 필자처럼 “웹에서 시간을 많이 쓰는 사람"의 퍼포먼스를 여러 방면에서 끌어올릴 수 있고, 비슷한 니즈를 가진 분들에게도 충분히 유의미한 앱이 될 수 있다고 판단했습니다.

미션 오목(TAKE FIVE)

미션 오목(TAKE FIVE)#

미션 오목(TAKE FIVE) 아이콘 미션 오목(TAKE FIVE) 프로모션 이미지

미션 오목(TAKE FIVE)은 2014년경 구글플레이에 출시했었던 안드로이드 게임입니다. 현재는 관리상의 이유로 구글플레이에서 삭제되었습니다.

당시는 캔디크러쉬 같은 퍼즐 게임들이 유행하던 시기였는데, 문득 “오목은 익숙한 룰인데도 제대로 선점한 게임이 없지 않나?”라는 생각이 들었습니다. 그래서 단순한 오목을 그대로 구현하기보다, 재미있는 컨셉과 ‘미션’ 구조를 입힌 오목을 만들어 보기로 했습니다.

컨셉: UFO 2대가 ‘땅따먹기’를 하는 오목#

게임의 기본 룰은 “가로 / 세로 / 대각선으로 다섯 칸을 먼저 점령하면 승리”라는 오목 규칙을 따르되, 말(돌) 대신 UFO 2대가 격자 공간에서 땅을 점령하면서 이동하는 형태였습니다.

코드배틀(Code Battle)

코드배틀(Code Battle)#

코드배틀(Code Battle)은 필자가 운영 중인 웹사이트로, 내 코드와 상대 코드가 턴(TURN) 단위로 1:1 대결을 벌이는 게임입니다. 게임은 여러 개의 라운드(ROUND)로 구성되고, 라운드는 여러 개의 턴으로 구성됩니다. 각 턴에서 “나의 선택”과 “상대의 선택”이 승/패와 점수를 만들고, 그 결과가 누적되어 라운드 승/패와 게임 승/패가 결정됩니다.

코드배틀 사이트 (https://codebattle.online/)

코드배틀은 무엇인가(What)#

코드배틀의 핵심은 “정답을 맞히는 코딩”이라기보다, 전략을 코드로 구현해 상대를 이기는 구조입니다. 단순히 문제를 풀고 끝나는 것이 아니라, 상대의 패턴을 분석하고, 다음 턴을 예측하고, 그 예측을 코드로 반영해 대결의 흐름을 만든다는 점이 특징입니다.

스마트 브라우저

스마트 브라우저#

스마트 브라우저 아이콘 스마트 브라우저 프로모션 이미지

스마트 브라우저는 2012년경 구글플레이에 출시했었던 안드로이드 브라우저 앱입니다. 현재는 관리상의 이유로 구글플레이에서 삭제되었습니다.

이 앱은 2012년에 열렸던 “구글 핵페어”라는 행사에 출품하기 위해 개발했습니다. 당시에는 모바일 시장이 한창 전쟁터이면서도, 지금만큼 완전히 성숙하기 전이었습니다. 개인적으로 안드로이드 폰에서 크롬 브라우저를 쓰면서 아쉬웠던 지점들이 있었고, 마침 핵페어에 참여하게 되면서 “그럼 내가 원하는 브라우저를 직접 만들어보자”는 마음으로 프로젝트를 시작했습니다.

© 2026 Ted Kim. All Rights Reserved. | 이메일 문의