ChatGPT와 대화하다가 “이 호텔 바로 예약해줘”라고 하면 어떻게 될까요? 보통은 링크를 몇 개 던져주고 끝이겠죠. 하지만 ChatGPT Apps가 설치되어 있다면 대화창 안에서 바로 호텔 목록을 보고, 날짜를 선택하고, 예약까지 완료할 수 있습니다. 앱을 따로 열 필요도 없이요.
OpenAI가 최근 공개한 ChatGPT Apps는 개발자들이 ChatGPT 대화창 안에 직접 앱을 임베드할 수 있게 해줍니다. 주간 활성 사용자 8억 명이라는 거대한 배포 채널이 열린 셈이죠.
Colin Matthews가 High Growth Engineer에 기고한 이 글은 ChatGPT Apps를 실제로 어떻게 만드는지 단계별로 보여줍니다. MCP(Model Context Protocol) 서버 구축부터 React 컴포넌트 개발, 그리고 실제 레스토랑 검색 앱 예제까지 몇 시간이면 만들 수 있다고 하네요.
출처: How to Build Your First ChatGPT App – High Growth Engineer
ChatGPT Apps는 어떻게 작동하나요?
ChatGPT Apps는 세 가지 핵심 요소로 구성됩니다.
MCP 서버 (백엔드)가 먼저 필요합니다. Python이나 Node.js로 작성하며 ChatGPT가 호출할 수 있는 API 역할을 합니다. 여기서 “도구”(함수)를 정의하죠. 예를 들어 search_restaurants나 book_ticket 같은 기능을 만들 수 있습니다.
다음으로 React 컴포넌트 (프론트엔드)가 있습니다. 사용자가 실제로 보고 상호작용하는 UI입니다. ChatGPT 안에서 샌드박스로 실행되는 미니 웹앱이라고 생각하면 됩니다.
마지막으로 ChatGPT (호스트)가 이 둘을 연결합니다. 사용자 대화 내용을 보고 언제 앱을 호출할지 자동으로 판단하고, 앱을 대화창에 임베드해서 보여줍니다.
작동 흐름은 이렇습니다. 사용자가 “브루클린에서 이탈리안 레스토랑 찾아줘”라고 하면, ChatGPT는 먼저 MCP 서버에 어떤 도구들이 있는지 물어봅니다. browse_listing과 book_listing 같은 도구를 발견하면 적절한 도구를 선택해서 호출하죠. 서버는 데이터를 돌려주고, 동시에 어떤 UI 컴포넌트를 보여줄지도 알려줍니다. ChatGPT는 그 컴포넌트 코드를 가져와서 대화창에 렌더링합니다.
세 가지 UI 모드
ChatGPT Apps는 상황에 맞게 세 가지 디스플레이 모드를 제공합니다.
Inline 모드는 기본값입니다. 대화 흐름 안에 자연스럽게 들어가는 작은 UI죠. 제품 카드나 레스토랑 목록 같은 걸 보여줄 때 적합합니다. 대부분의 앱이 여기서 시작해서 필요하면 다른 모드로 전환합니다.
Fullscreen 모드는 전체 화면을 차지합니다. 지도나 복잡한 폼, 데이터 대시보드처럼 공간이 많이 필요하거나 집중이 필요한 작업에 씁니다. 예를 들어 부동산 지도를 보거나 스프레드시트를 편집할 때 유용하죠.
Picture-in-picture 모드는 화면 위에 작은 창으로 떠 있습니다. 타이머나 음악 플레이어, 틱택토 게임처럼 대화를 계속하면서도 계속 보여야 하는 것들에 씁니다.
실제로 만들어보기
레스토랑 검색 앱을 예로 들어볼까요? 전체 흐름은 이렇습니다.
1단계: 사용자가 볼 화면 만들기
React로 레스토랑 목록을 보여줄 화면을 만듭니다. 버튼 누르면 예약하고, 별점 보여주고, 이런 일반적인 웹 인터페이스죠. 다만 window.openai 객체를 통해 ChatGPT와 데이터를 주고받을 수 있게 만듭니다. 사용자가 버튼을 클릭하면 그 정보를 ChatGPT에 전달하고, ChatGPT가 새로운 데이터를 보내면 화면을 업데이트하는 식입니다.
2단계: 백엔드에서 기능 정의하기
MCP 서버에 “레스토랑 검색” 기능을 등록합니다. ChatGPT한테 “나는 이런 기능을 할 수 있어, 필요하면 불러”라고 알려주는 계약서를 작성하는 셈이에요. 여기서 어떤 UI를 보여줄지도 함께 지정합니다.
3단계: 화면 코드를 서버에 올리기
1단계에서 만든 React 화면을 서버에 등록합니다. ChatGPT가 나중에 이 코드를 가져가서 대화창 안에 띄울 수 있게요.
4단계: ChatGPT에 연결해서 테스트
ChatGPT 설정에서 내가 만든 서버 주소를 입력하면 끝입니다. 이제 “브루클린에서 이탈리안 음식 찾아줘”라고 하면 ChatGPT가 알아서 내 앱을 불러서 레스토랑 목록을 예쁘게 보여줍니다. 텍스트로 나열하는 대신요.
빠르게 테스트용 앱을 만들고 싶다면 Colin이 만든 Chippy를 써볼 수 있습니다. App SDK로 훈련된 AI 에이전트가 5분 안에 MCP 서버를 만들어줍니다.
알아둬야 할 제약사항
물론 한계도 있습니다.
턴당 하나의 컴포넌트만 보여줄 수 있습니다. 예를 들어 “레스토랑 예약하고 우버 불러줘”라고 하면 레스토랑 컴포넌트만 먼저 나옵니다. 예약이 끝난 후에야 우버 컴포넌트를 띄울 수 있죠. 자동으로 체이닝은 안 됩니다.
컴포넌트 상태는 각 메시지별로 독립적입니다. 새 메시지에서 컴포넌트가 다시 생성되면 기본적으로 빈 상태로 시작합니다. 상태를 유지하려면 백엔드에서 관리해야 해요.
보안 샌드박스에서 실행되기 때문에 DOM에 직접 접근할 수 없습니다. ChatGPT 부모 페이지를 조작하거나 임의의 스크립트를 실행할 수 없죠. 모든 통신은 window.openai API를 통해서만 가능합니다.
성능도 고려해야 합니다. 컴포넌트 상태는 매 요청마다 AI 모델에 전송됩니다. 큰 페이로드는 응답 속도를 늦추니까 꼭 필요한 것만 보내야 합니다.
어디에 쓸 수 있을까요?
실용적인 활용 사례들을 보면 가능성이 보입니다.
이커머스에서는 가격으로 필터링하고 장바구니에 담고 체크아웃까지 하는 인터랙티브 제품 카탈로그를 만들 수 있습니다. 비즈니스 도구로는 칸반 보드를 만들어서 태스크를 드래그하고 마감일을 정하고 상태를 업데이트할 수 있죠. ChatGPT가 프로젝트에 대한 질문에 답하면서 동시에 사용자가 액션을 취할 수 있게 하는 겁니다.
예약 시스템도 강력합니다. 레스토랑 예약 컴포넌트에서 가능한 시간, 메뉴, 리뷰를 보여주고 ChatGPT에게 추천받은 다음 바로 예약까지 할 수 있습니다. 데이터 대시보드는 “4분기 매출 어때?”라고 물으면 인터랙티브 차트를 보여주고 특정 지역이나 제품별로 드릴다운할 수 있게 합니다.
지도 기반 서비스도 재미있습니다. 커피숍이나 부동산 같은 위치 기반 검색에서 마커가 찍힌 인터랙티브 지도를 풀스크린으로 보여주는 거죠.
다음 단계
ChatGPT가 먼저 문을 열었지만, MCP 표준 자체가 이 패턴을 지원하는 방향으로 발전하고 있습니다. Claude를 포함한 다른 AI 에이전트들도 대화 안에서 미니 앱을 실행할 수 있게 되는 거죠. 이런 시스템을 설계하고 의미 있는 사용자 경험을 만드는 능력은 AI 제품과 일반 SaaS 애플리케이션이 소통하는 완전히 새로운 방식을 열어줄 겁니다.
800만 명이 아니라 8억 명입니다. ChatGPT Apps는 단순히 새로운 기능이 아니라 배포 채널 자체의 혁신이에요. 사용자가 이미 있는 곳에서 자연스럽게 앱을 만나게 하는 거니까요.
참고자료:
답글 남기기