Video: GPT 앱스토어 등장 🚨 개발자에게 열린 새로운 판!
Channel: 노마드 코더 Nomad Coders
Duration: 8m 38s
Source: subtitle (auto, ko)
Transcript:
Chat GPT에 이제 앱 스토어가 생겼습니다. 이 영상에서는 [음악] 앱을 만드는 방법을 배우게 됩니다. Chat GPT 내에서 앱을 개발할 수 있다는 사실을 몰랐다면 , 당신만 그런 것은 아닙니다. 꽤 새로운 기능이긴 하지만 사실입니다. 이제 Chat GPT [음악] 대화창 내에서 버튼, 차트, 애니메이션 등 실제 상호작용 가능한 UI를 갖춘 앱을 만들 수 있습니다. 그리고 이건 실험적인 기능이 아닙니다. 대기업들은 이미 지금 채팅 GPT 앱을 개발하고 출시하고 있습니다 . chat.openai.com/apps에 접속해서 직접 확인해 보세요. 포토샵, 애플 뮤직, 캔바, 유희왕, 잡코리아, 카카오톡 등 다양한 앱들이 있습니다. OpenAI가 이 기술을 최초로 선보였지만 , 채팅 GPT 앱은 MCP의 오픈 소스 확장 기능인 MCP 앱으로 구축되었기 때문에 다른 AI 회사들도 이를 채택할 수 있습니다 . 클로드(Claude)를 만든 앤트로픽(Anthropic)은 이미 그러한 기능을 갖추고 있으며, 이를 인터랙티브 도구라고 부릅니다.

그리고 최근에는 VS Code에서도 MCP 앱 지원이 추가되었습니다. VS Code 채팅 창 안에 바로 인터랙티브 위젯(음악)을 표시할 수 있습니다 . 이는 매우 중요한 의미를 지니는데, 특정 플랫폼 하나만을 위해 개발하는 것이 아니라는 뜻이기 때문입니다 . 당신은 생태계를 위해 구축하고 있습니다 . 구글이 해당 기술을 채택하기로 결정하면 , 여러분의 앱은 구글 플랫폼에서도 문제없이 작동할 것입니다. 자, 만약 여러분이 개발자라면, 이 방송에 주목해 주세요. 이건 정말 큰 기회라고 생각합니다. 한번 생각해 보세요. 애플 앱스토어가 처음 출시되었을 때, 초기 개발자들은 간단한 앱을 만들어 큰돈을 벌었습니다 . 쇼피파이가 앱 스토어를 출시했을 때 , 개발자들은 쇼피파이 플러그인을 기반으로 사업 전체를 구축했습니다. Chat GPT는 수억 명의 사용자를 보유하고 있으며, 최근 앱 스토어를 오픈했습니다. 챗 GPT 내에서만 의미가 있는 사업을 구축할 수도 있고, 직접 기업들을 찾아가 챗 GPT 음악 앱을 만들어주겠다고 제안할 수도 있습니다 .

대부분의 회사들은 이것이 가능하다는 사실조차 아직 모르고 있습니다. 저는 지금이 기회의 창이라고 생각하지만 , 그 기회가 영원히 열려있지는 않을 겁니다 . 오늘 우리가 만들 앱은 간단한 주가 앱이지만, 채팅 기반 GPT 앱이 실제로 어떻게 작동하는지 알려줄 만큼 충분히 복잡합니다. 사용자가 Chat GPT에 주식 가격을 문의하면, 텍스트 답변 대신 가격, 차트, 그리고 관심 목록에 추가하는 버튼이 있는 보기 좋은 카드 형태의 메시지를 받게 됩니다 . 사용자는 관심 종목 목록을 보여달라고 요청할 수도 있으며, ChatGPT는 저장된 모든 주식과 실시간 가격을 보여주는 다른 위젯을 로드합니다. [음악] ChatGPT 모바일과 웹 모두에서 작동합니다. 앞서 말씀드렸듯이, 이 앱은 모든 작동 방식을 이해하기 쉽게 만든 간단한 앱입니다. 더 자세한 내용을 알고 싶으시면 ChatGPT 앱 마스터클래스 강좌를 확인해 보세요. 우리는 거기서 네 개의 앱을 개발했습니다. 영화를 검색하고 찾아볼 수 있으며, 영화에 대한 모든 세부 정보를 볼 수 있는 영화 검색 앱입니다.

ChatGPT에서 플래시카드를 생성하고 사용자가 직접 넘겨보면서 학습하는 플래시카드 학습 앱입니다. [음악] 학습 진행 상황을 추적하고, 집중 모드로 공부하고 , 추가 질문을 하세요. ChatGPT가 사용자 맞춤형 운동 프로그램을 설계하고 운동 시간을 알려주는 운동 타이머 앱입니다. [음악] 그리고 인증, 이미지 업로드, 사용자 리뷰, 장바구니 등 모든 기능을 갖춘 완벽한 전자상거래 스토어도 있습니다. ChatGPT 안에 모두 살고 있습니다. [음악] 링크는 설명란에 있습니다. 좋아요, 그럼 만들어 봅시다. 그러니까 본질적으로 ChatGPT 앱은 몇 가지 추가 설정이 포함된 MCP 서버일 뿐입니다 . 그게 다예요. 제 MCP 영상을 보셨다면 필요한 내용의 대부분은 이미 알고 계실 겁니다. [음악] 아직 안 보셨다면, 이 영상 끝나고 꼭 보세요. MCP 서버는 ChatGPT나 Claude와 같은 AI 앱이 호출할 수 있는 도구를 제공합니다. 가장 간단한 버전부터 시작해 보겠습니다. 단순히 텍스트를 반환하는 MCP 서버일 뿐입니다 .

입력 유효성 검사를 위해 MCP SDK를 가져와 설치합니다 . 우리는 서버를 만들고 ' get stock [음악] price'라는 도구를 등록합니다. 이 도구는 주식 기호를 입력받아 가격을 가져와 [음악] 텍스트로 반환합니다. 그리고 지금 이것을 ChatGPT에 연결하면 작동합니다. 사용자가 "애플 주식 가격은 얼마인가요 ?"라고 묻습니다. ChatGPT가 저희 도구를 호출하고 텍스트로 가격을 회신합니다. 멋지긴 한데, 지루해. 우리는 사용자 인터페이스(UI)를 원합니다. 바로 이 지점에서 ChatGPT 앱이 흥미로워집니다. 텍스트만 반환하는 대신 위젯을 반환할 수도 있습니다. [음악] 위젯은 대화창 내 iframe에 렌더링할 React 앱입니다. 이를 위해 서버에서 두 가지를 가져와야 합니다. 첫째, 자원입니다. 이것은 저희 [음악] 위젯의 HTML 코드입니다. 우리는 그것을 특별한 URI로 등록합니다 . 둘째, 해당 리소스를 도구의 사용자 인터페이스로 사용하도록 지시합니다. 제가 음악을 들려드릴게요. 먼저 리소스를 등록합니다 .

ChatGPT에게 "안녕하세요, 위젯이 있습니다. HTML 코드는 다음과 같습니다."라고 말하는 것과 같다고 생각하면 됩니다. MCP 앱 라이브러리에서 몇 가지 도우미 함수를 가져옵니다 . 우리는 앱 리소스를 등록하고, 이름, URI, 그리고 React 앱 의 HTML을 반환하는 함수를 지정합니다 . 그게 다예요. 그게 바로 우리의 자원입니다. 그런 다음, 해당 리소스를 가리키도록 도구를 수정하고 위젯에서 사용할 수 있는 구조화된 데이터를 반환하도록 합니다 . 두 가지가 바뀌었습니다. 우리는 ChatGPT에게 "이 도구가 실행된 후, 이전에 등록한 리소스의 URI인 이 URI에 있는 위젯을 로드하세요 ."라고 알려주는 meta.ui.resourceUri, [music]을 추가했습니다. 그리고 저희 [음악]는 구조화된 콘텐츠, 즉 위젯 으로 전송되는 데이터 페이로드를 추가했습니다 . 텍스트는 ChatGPT로 전송되어 ChatGPT가 그에 대해 논의할 수 있도록 합니다. 구조화된 콘텐츠는 React 앱으로 전송되어 앱이 이를 렌더링할 수 있게 됩니다.

그래서 서버에는 두 가지가 있습니다. [음악] 리소스는 자바 스크립트와 CSS가 포함된 HTML 파일 , 위젯, 그리고 ChatGPT가 호출할 수 있는 [음악] 도구입니다. 이 도구는 해당 리소스를 가리키며 ChatGPT에게 " 텍스트만 표시하지 말고 이 위젯을 대신 표시하세요."라고 알려줍니다. 그리고 이 도구는 위젯에 표시하려는 데이터인 구조화된 콘텐츠를 함께 전송합니다 이 도구가 실행되면 ChatGPT는 대화창 내의 iframe에 위젯을 렌더링하고 우리가 보낸 데이터를 전달합니다 . 자, 이제 위젯이 데이터를 어떻게 수신하는지 살펴보겠습니다. 이 위젯은 React 앱입니다. 우리는 iframe 내부에서 ChatGPT와 통신 하고 도구 결과를 수신하기 위해 use app이라는 훅을 사용합니다. [음악] 중요한 건 도구의 결과물입니다. 도구가 데이터를 반환하면 이 콜백 함수가 서버에서 보낸 구조화된 콘텐츠 [음악]와 함께 실행됩니다. 우리는 주식 데이터를 가져와서 주식 카드 컴포넌트를 렌더링합니다.

그리고 [음악]이 전부입니다 ChatGPT에서 개발자 모드를 먼저 활성화한 다음, 설정, 앱, 앱 만들기로 이동하여 MCP 서버의 URL을 붙여넣어 앱을 연결합니다. 그런 다음 ChatGPT에 주식 가격을 문의하면 서버에서 보낸 데이터가 포함된 React 컴포넌트가 대화창에 바로 표시됩니다. 한 가지 더, 스타일링을 위해 OpenAI는 ChatGPT의 모양과 느낌에 맞는 구성 요소를 포함하는 Apps SDK UI라는 오픈 소스 UI 라이브러리를 제공합니다 . 제가 이 앱의 배지와 로딩 표시기에 사용하고 있는 게 바로 그거예요. 자, 이제부터 정말 흥미진진해집니다. 보시다시피 , 저희 주식 카드에는 관심 목록에 추가 버튼이 있습니다. 사용자가 해당 항목을 클릭하면 서버의 도구를 호출하여 해당 주식을 사용자의 관심 목록에 저장하려고 합니다. 서버 측에서는 ' 관심 목록에 추가'라는 도구를 등록합니다. 여기서 핵심은 가시성 앱 모델입니다. 기본적으로 모델만 도구를 호출할 수 있습니다. 앱을 추가하면 위젯에서 도구를 직접 호출할 수 있습니다 .

[음악] 위젯 측에서는 버튼을 클릭했을 때 앱 인스턴스를 사용하여 서버 도구를 호출합니다. 함수 호출 한 번이면 충분합니다. 사용자가 위젯의 버튼을 클릭하면 위젯이 ChatGPT를 통해 당사의 MCP 서버를 호출하고 , 서버는 해당 주식을 관심 목록에 저장한 후 응답을 반환합니다. 이제 위젯은 ChatGPT 내부에 있는 완전한 대화형 앱입니다 . [음악] 데이터를 표시하고 동작을 실행할 수 있습니다. 이 모든 것은 MCP 프로토콜을 통해 이루어집니다. 이제 사용자에게 관심 목록을 보여주려면 같은 패턴을 사용하면 됩니다. [음악] 관심 종목 위젯에 두 번째 리소스를 추가하고, 저장된 모든 주식을 가져와 관심 종목 리소스를 가리키고 데이터를 반환하는 새로운 도구인 '관심 종목 가져오기'를 추가합니다. 사용자가 관심 종목 목록을 보여달라고 요청하면 ChatGPT가 해당 도구를 호출하고, 저장된 모든 주식이 표시된 다른 위젯이 나타납니다. 자, 그럼 정리해 볼까요? ChatGPT 앱은 도구와 리소스를 갖춘 MCP 서버일 뿐입니다 이러한 도구들은 ChatGPT에 텍스트를 반환하고 위젯에 필요한 구조화된 데이터를 제공합니다.

리소스는 기본적으로 JavaScript와 CSS가 포함된 HTML 파일입니다. 저게 바로 위젯이에요. [음악] 위젯은 이를 렌더링하는 도구로부터 데이터를 받습니다. 또한 위젯은 서버로 도구를 호출할 수도 있습니다 . 그것이 바로 인터랙티브한 요소입니다. 자, 여기까지입니다. ChatGPT 앱은 그런 식으로 작동하지만, [음악] 분야에서는 훨씬 더 많은 기능을 제공합니다. ChatGPT의 앱은 복잡한 워크플로를 위해 전체 화면으로 전환할 수도 있습니다 . 채팅을 유지하면서 화면 속 화면처럼 띄워놓을 수 있습니다 . 마치 대화 의 한쪽 구석에 자리 잡은 게임을 만드는 것을 상상해 보세요 . 캐러셀, 지도, 미디어 앨범을 렌더링할 수 있습니다. 대화 도중 바로 결제를 처리할 수도 있습니다 . ChatGPT 내에서 상점을 만들 수 있습니다 . 오늘 우리가 만든 것은 단순화된 형태입니다. 우리는 배포 최적화, 인증, 스타일링, 영구 저장소, 음악 오류 처리 등 실제 운영 환경에 필요한 여러 가지 요소들을 생략합니다.

ChatGPT 앱 마스터클래스 과정에서는 이 모든 내용을 다룹니다. 간단한 앱부터 고급 앱까지 여러 앱을 처음부터 직접 개발하고 , 실제 운영 환경에 배포합니다. 설명란에 링크가 있습니다 . 현재로서는 대부분의 사람들이 ChatGPT에 앱 스토어가 있다는 사실조차 모르지만, OpenAI가 본격적인 마케팅에 나서면 머지않아 모든 사람들이 자신만의 앱을 만들고 싶어할 것입니다. 그런 상황이 발생했을 때, 당신은 이미 그곳에 도착해 있어야 합니다. 댓글에 어떤 종류의 ChatGPT 앱을 만들고 싶은지 알려주세요. 늘 시청해 주셔서 감사합니다. 자 , 알고리즘에 오신 것을 환영합니다. 저편에서 다시 만나요. 다음 영상에서 만나요. 마요네즈처럼 굴지 마세요. 안녕.