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될 코드를 요청