- 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 애플리케이션 간 새로운 통신 방식 개척