# 당신의 첫번째 ChatGPT 앱을 만드는 방법

> Clean Markdown view of GeekNews topic #25267. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25267](https://news.hada.io/topic?id=25267)
- GeekNews Markdown: [https://news.hada.io/topic/25267.md](https://news.hada.io/topic/25267.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-12-23T10:03:01+09:00
- Updated: 2025-12-23T10:03:01+09:00
- Original source: [read.highgrowthengineer.com](https://read.highgrowthengineer.com/p/how-to-build-your-first-chatgpt-app)
- Points: 12
- Comments: 0

## Summary

**ChatGPT Apps**는 개발자가 자신의 서비스를 ChatGPT 대화 안에 직접 임베드해, 8억 명이 넘는 사용자를 대상으로 한 새로운 **배포 채널**을 열어줍니다. MCP를 통해 LLM이 외부 도구와 UI 리소스를 선택적으로 호출하도록 설계되어, 대화형 AI가 실제 예약·검색·데이터 조회 같은 작업을 자연스럽게 처리할 수 있게 합니다. 프론트엔드는 React 기반 미니 앱으로, 백엔드 MCP 서버와 분리된 안전한 샌드박스에서 실행되며, 이는 향후 Claude 등 다른 에이전트로 확장 가능한 표준 인터페이스 계층으로 발전하고 있습니다.

## Topic Body

- OpenAI가 발표한 **ChatGPT Apps**는 개발자가 자신의 앱을 **ChatGPT 대화 안에 직접 임베드**할 수 있게 하며, **8억 명**이 넘는 주간 활성 사용자를 새로운 **배포 채널**로 활용할 수 있음   
- ChatGPT는 기존 텍스트 응답을 넘어 **UI 컴포넌트를 직접 렌더링**할 수 있고, 이를 통해 예약·쇼핑·데이터 조회 같은 실제 작업을 대화 흐름 안에서 처리 가능함  
- 이 구조의 핵심은 **Model Context Protocol(MCP)** 로, LLM이 외부 도구와 UI 리소스를 선택적으로 호출하는 방식으로 동작함  
- ChatGPT 앱은 백엔드(MCP 서버)와 프론트엔드(UI 컴포넌트)를 명확히 분리한 구조를 가지며, React 기반 미니 앱을 안전한 샌드박스에서 실행  
- MCP와 ChatGPT Apps 패턴은 향후 Claude 등 다른 에이전트로도 확장될 예정이며, 대화형 AI와 기존 SaaS를 연결하는 새로운 인터페이스 계층으로 자리잡고 있음  
  
---  
  
### ChatGPT Apps 개요  
  
- **ChatGPT Apps**는 개발자와 제품팀이 ChatGPT 대화 안에 앱을 직접 삽입할 수 있게 하는 기능  
- 사용자는 대화 중 호텔 예약, 부동산 검색, 온라인 쇼핑 등의 작업을 ChatGPT 안에서 바로 수행 가능  
- 주간 활성 사용자 **8억 명 이상**을 보유한 플랫폼으로, **차세대 배포 채널**로서의 가능성이 있음  
  
### ChatGPT Apps의 작동 원리  
  
- 모든 LLM(ChatGPT, Claude, Gemini)은 웹 검색, 파일 읽기, 코드 실행, 아티팩트 생성 등 제한된 도구만 사용 가능  
- ChatGPT Apps는 개발자가 **MCP 도구**를 통해 새로운 도구를 LLM에 노출시키고, 사용자가 쉽게 설치·사용할 수 있게 함  
- 앱 없이 단기 숙박을 예약하려 하면 사진과 규정 정보만 반환되고 실제 예약은 불가  
- 앱이 설치되면 요청에 맞는 Airbnb 숙소 목록을 받아 바로 예약 가능  
  
### 앱의 세 가지 구성 요소  
- ## MCP 서버 (백엔드)  
  - ChatGPT가 통신하는 서버로, **Python** 또는 **Node.js**로 작성  
  - API처럼 작동하며, ChatGPT가 호출할 수 있는 "도구"(함수)를 정의  
    - 예: `search_restaurants`, `book_ticket`  
- ## 컴포넌트 (프론트엔드)  
  - 사용자가 보는 **인터랙티브 UI**  
  - 일반적으로 **React**로 빌드되며 ChatGPT 내부의 보안 샌드박스에서 실행  
  - ChatGPT 대화 안에 사는 미니 웹앱 개념  
- ## ChatGPT (호스트)  
  - 앱이 ChatGPT 내 **임베디드 뷰**에 표시됨  
  - ChatGPT는 사용자의 대화 내용과 활성화된 앱을 기반으로 언제 앱을 호출할지 결정  
  
### 작동 흐름  
  
- 사용자가 단기 숙박 도움을 요청하면 ChatGPT는 자동으로 여러 단계 수행:  
  1\. 앱이 유용할지 판단  
  2\. 앱에 연락해 사용 가능한 도구 확인 (예: Book Listing, Browse Listing)  
  3\. Browse Listing 도구를 호출해 상위 5개 숙소 반환  
  4\. 사용자에게 상위 5개 숙소 응답  
- 이 워크플로우가 **MCP(Model Context Protocol)** 의 기반  
- AI 에이전트(ChatGPT)가 목표 달성을 돕는 도구에 접근권을 받고, 사용자 요청 시 이 도구들을 선택적으로 사용  
- 도구는 두 숫자를 더하는 계산기처럼 단순하거나 이미지 생성 같은 복잡한 백엔드 프로세스일 수 있음  
  
### 디스플레이 모드  
- ChatGPT Apps는 세 가지 UI 표시 모드를 지원함  
- ## 인라인 모드  
  - **적합 용도**: 목록, 카드, 소형 시각화  
  - 모든 앱의 기본 모드이며, 필요시 다른 모드로 전환  
  - 예: 제품 캐러셀, 레스토랑 목록  
- ## 전체화면 모드  
  - **적합 용도**: 지도, 복잡한 폼, 데이터 집약적 대시보드  
  - 컴포넌트가 전체 ChatGPT 창을 차지  
  - 더 많은 공간이 필요하거나 복잡한 작업에 집중해야 할 때 사용  
  - 예: 부동산 인터랙티브 지도, 스프레드시트 에디터  
- ## PiP(Picture-in-Picture) 모드  
  - **적합 용도**: 지속 도구, 게임, 실시간 업데이트  
  - 컴포넌트가 화면 상단에 작은 창으로 떠 있음  
  - 사용자가 채팅을 계속하는 동안 계속 보여야 하는 것에 적합  
  - 예: 타이머, 음악 플레이어, 틱택토 게임  
  - 디스플레이 모드 간 전환을 계획할 경우 **UX 패턴에 더 많은 고려** 필요  
  
### 제약 사항  
- ## 턴당 하나의 컴포넌트  
  - ChatGPT가 컴포넌트를 반환하는 도구를 호출하면 해당 턴이 종료됨  
  - 여러 UI 반환 도구를 자동으로 연결할 수 없음  
  - 예: "레스토랑 예약하고 Uber 불러줘" 요청 시 레스토랑 컴포넌트를 먼저 표시하고, 예약 후 후속 트리거로 Uber 컴포넌트 표시  
- ## 컴포넌트 상태의 범위 제한  
  - 각 컴포넌트 인스턴스는 해당 특정 메시지 내에서만 유지되는 자체 상태 보유  
  - ChatGPT가 컴포넌트와 새 메시지를 생성하면 기본적으로 빈 상태의 새 인스턴스  
  - 백엔드에서 **지속 및 조회를 통해 상태 관리** 필요  
- ## 직접 DOM 접근 불가  
  - 컴포넌트는 **보안 샌드박스(iframe)** 에서 실행되어 상위 ChatGPT 페이지 접근이나 임의 스크립트 실행 불가  
  - 모든 통신은 `window.openai` API를 통해 수행  
- ## 성능 중요  
  - 컴포넌트 상태가 각 요청마다 AI 모델에 전송됨  
  - 대용량 페이로드는 응답 속도를 늦추므로 **필요한 것만 전송**  
  
### 실제 활용 사례  
- ## 이커머스 & 쇼핑   
  - 가격 필터링, 장바구니 추가, 결제(보통 메인 앱으로 푸시)가 가능한 인터랙티브 제품 카탈로그 구축  
- ## 비즈니스 도구  
  - 사용자가 컬럼 간 태스크 드래그, 마감일 지정, 상태 업데이트가 가능한 **칸반보드** 생성  
  - ChatGPT가 프로젝트에 대한 질문에 답하면서 동시에 사용자가 조치를 취할 수 있게 하는 **내부 도구에 특히 강력**  
- ## 부킹 & 예약  
  - 가용성, 메뉴, 리뷰를 보여주는 레스토랑 예약 컴포넌트 구축  
  - 사용자가 ChatGPT에 추천을 요청하고 인터페이스를 통해 직접 예약 가능  
- ## 데이터 대시보드  
  - 인터랙티브 차트로 판매 분석 표시  
  - "Q4 매출은 어때?"라고 물으면 특정 지역이나 제품으로 드릴다운할 수 있는 대시보드 제공  
- ## 지도 & 위치  
  - 커피숍, 부동산 또는 위치 기반 검색용 마커가 있는 인터랙티브 지도 표시  
  - **전체화면 모드에서 특히 효과적**  
  
### 첫 번째 앱 빌드 가이드 (레스토랑 검색 앱 예시)  
- ## Step 1: 컴포넌트 빌드 (프론트엔드)  
  - iframe 컴포넌트와 ChatGPT 간 통신을 위해 `window.openai.*` API와 상호작용하는 **React 컴포넌트** 생성  
  - OpenAI가 API 상호작용을 돕는 **글로벌** 제공  
- ## Step 2: 도구 정의 (백엔드)  
  - MCP 서버가 ChatGPT와의 **"계약"** 정의  
  - 모델에게 무엇을 할 수 있고 도구 호출 완료 시 어떤 컴포넌트를 표시할지 알려줌  
- ## Step 3: 리소스 등록 (백엔드)  
  - React 컴포넌트를 **HTML로 번들링**하고 MCP 서버에 리소스로 호스팅  
  - ChatGPT가 이전 단계의 `outputTemplate` URI를 가져와 iframe될 코드를 요청  
- ## Step 4: 흐름 테스트  
  - 서버 배포 후:  
    - ChatGPT를 열고 **Developer Mode** 활성화  
    - Settings → Connected Apps (또는 "My Apps")로 이동  
    - "Connect new app" 클릭  
    - 서버 URL 입력 (예: `https://my-mcp-server.com`)  
    - OAuth 없이 연결  
  - ChatGPT가 `search_restaurants` 도구를 감지하면 "Find me Italian food in Brooklyn" 입력으로 테스트  
  - ChatGPT가 도구를 호출하고 데이터를 가져와 텍스트 대신 **인터랙티브 React 목록 렌더링**  
  
### 향후 전망  
  
- ChatGPT가 먼저 시작했지만, 곧 **MCP 표준이 MCP apps를 통해 동일한 패턴 지원** 예정  
- Claude와 다른 에이전트들도 대화형 경험에 미니 앱을 주입할 수 있게 됨  
- 이러한 시스템 아키텍처와 사용자를 위한 의미 있는 경험 구축 방법 이해가 AI 제품과 일반 SaaS 애플리케이션 간 **새로운 통신 방식** 개척

## Comments



_No public comments on this page._