[00:00] OpenAI 위젯 빌더는 완전히 새로운

[00:01] ChatKit과 Agent Builder 시스템의

[00:03] 가장 강력한 기능 중 하나입니다.

[00:05] 이번 영상에서는 여러분께

[00:07] OpenAI 위젯 빌더를 사용해서

[00:09] 정말 인터랙티브한

[00:10] 채팅 인터페이스용 위젯을

[00:12] 구축하는 방법을 보여드릴 겁니다.

[00:14] 이 도구를 최대한 활용하는

[00:16] 방법에 대해 완전히 정리해 드릴게요.

[00:18] 여러분은 정말 멋진 UI 요소들을

[00:20] 만들 수 있게 될 텐데, 지금 화면에 보이는

[00:21] 성적 매긴 과제처럼 멋진 점수와

[00:23] 이름들이 있고, 이 요소들 위에

[00:25] 마우스를 올릴 수도 있습니다.

[00:27] 이런 위젯도 만들 수 있는데

[00:29] 이제 책 추천에 이미지가 있고

[00:31] 여기에 별점도 있습니다.

[00:33] 정말 멋진 스타일링이고

[00:34] 전체적인 사용자 경험을 정말 향상시켜 줍니다.

[00:37] 이런 것도 할 수 있는데

[00:38] 캘린더 이벤트가 실제 위젯 안에

[00:40] 나타나게 하고 실시간 데이터를

[00:41] 보여줄 수 있습니다.

[00:43] 이번 영상에서는 이런 위젯들을

[00:44] 완전히 처음부터 만드는 방법을 배우게 됩니다.

[00:47] 가장 좋은 점은

[00:48] 코딩 경험이 전혀 필요하지 않다는 것입니다.

[00:50] 만약 Agent Builder에서 에이전트를

[00:53] 만드는 방법에 대한 제 1시간 완전 강의를

[00:55] 아직 보지 않으셨다면

[00:56] 그 영상을 먼저 보시길 추천하는데

[00:58] 이번 영상은 위젯 빌더에

[01:00] 특별히 집중한 심화 내용이거든요.

[01:02] 하지만 그 영상을 보고 싶지 않으시다면

[01:03] Agent Builder가 무엇인지

[01:05] 그리고 위젯 빌더가 어떻게

[01:07] 작동하는지에 대해

[01:08] 빠르게 설명드리겠습니다.

[01:11] 아주 간단히 다시 말씀드리면, 이것은

[01:14] 시각적 노코드 캔버스 도구이고

[01:15] OpenAI의 완전히 새로운 도구로

[01:17] OpenAI 생태계 내에서 네이티브로

[01:20] 에이전틱 워크플로우를 구축할 수 있게 해줍니다.

[01:22] 이 Agent Builder를 새로운 ChatKit과

[01:24] 결합할 수 있는데, 지금 보시는 것이

[01:25] 완전히 커스터마이징 가능한

[01:27] 채팅 인터페이스입니다.

[01:29] 이 ChatKit 안에는 위젯들이 있는데

[01:31] 이것들은 시각적 인터페이스 카드 같은 것이고

[01:32] 원하는 대로 커스터마이징할 수 있으며

[01:34] ChatGPT와 같은 경험을

[01:36] 정말 제공해 줍니다.

[01:38] 응답과 모든 것이 구조화된 방식이

[01:40] ChatGPT와 매우 유사하지만

[01:41] 우리가 구축하려는 것에 완전히 맞춤화되어 있습니다.

[01:44] 이것이 Agent Builder입니다.

[01:46] 시작 노드와 에이전트가 있는데

[01:47] 새 워크플로우를 만들 때 기본으로

[01:49] 제공되는 것입니다.

[01:51] 이 에이전트 단계 중 하나를 클릭하면

[01:53] 커스텀 GPT를 만들 때

[01:54] 봤을 법한 것과 매우 유사한

[01:56] 많은 지시사항들을 보게 됩니다.

[01:57] 하지만 특히 여기 맨 아래에

[02:00] 출력 형식이 있습니다.

[02:01] 출력 형식을 클릭하면

[02:03] 텍스트, JSON, 또는 위젯을 선택할 수 있습니다.

[02:06] 당연히 위젯이 이 새로운 시스템의

[02:07] 진정한 킬러 기능입니다.

[02:09] 여기서 플러스 위젯을 클릭하면

[02:12] 위젯 파일을 업로드해서

[02:13] 워크플로우에 위젯을 연결하라는

[02:15] 탭이 나타납니다.

[02:17] 워크플로우에 연결하거나 위젯 스튜디오에서 새로 생성할 수 있습니다.

[02:21] 위젯 스튜디오는 위젯 빌더라고도 불립니다.

[02:23] 왜 두 개의 다른 이름이 있는지는 잘 모르겠지만,

[02:24] 그렇긴 합니다.

[02:26] 어쨌든 위젯 스튜디오는 본질적으로 위젯 빌더입니다.

[02:28] 그리고 여기서 기존 위젯을 복사할 수 있는데,

[02:29] 지금 보고 있는 것이 바로 그것입니다.

[02:31] 이것은 OpenAI 갤러리입니다.

[02:32] 그들이 이미 만든 위젯들의 모음으로,

[02:35] 가능한 것들을 보여주기 위한 것입니다.

[02:36] 그리고 우리는 이 위젯들을 업로드할 수 있습니다.

[02:38] 말 그대로 .widget 파일로 다운로드해서

[02:40] 바로 여기에 업로드하면 됩니다.

[02:42] 그리고 출력 형식을 위젯으로 설정할 때,

[02:44] 본질적으로 우리가 하는 일은

[02:45] 이 에이전트의 전체 목적을

[02:47] 위젯 출력으로 만드는 것입니다.

[02:49] 따라서 이것은 위젯을 출력하도록 지정됩니다.

[02:51] 본질적으로 모든 필드와

[02:53] 스타일링 및 요소들을

[02:55] 어떻게 채울지 생각하도록 되어 있습니다.

[02:56] 특정 위젯에서 사용되는 것들 말이죠.

[02:58] 다시 한 번, 이 예시에서

[03:01] 과제 채점의 경우, 이것은

[03:03] 전용으로 구축되고

[03:05] 프롬프트가 작성된 개별 에이전트입니다.

[03:07] 여기 이 정보를 표시할 수 있도록 말이죠.

[03:08] 이전 대화를 기반으로 하거나

[03:11] 지식 기반 정보를 기반으로 하거나

[03:12] 사용자가 제공한 컨텍스트를 기반으로

[03:15] 참조하고 생성할 수 있도록 합니다.

[03:16] 사용자가 볼 수 있는 무언가를 말이죠.

[03:18] 그럼 기본적인 것부터 시작하겠습니다.

[03:20] 날씨를 만들어보겠습니다.

[03:21] 여기서 바로 날씨를 해보겠습니다.

[03:22] 사용하고 싶은 위젯 중 하나를 클릭한 후,

[03:24] 위젯 에디터에서 열기를 클릭할 수 있습니다.

[03:26] 여기서 볼 수 있는 것은

[03:28] 왼쪽에 있는 약간의 코드입니다.

[03:29] 이것이 본질적으로 이 위젯을

[03:31] 생성하는데 사용되는 것입니다.

[03:33] 그리고 하단에는 이 코드에서

[03:35] 참조되는 몇 가지 변수들을 볼 수 있습니다.

[03:36] 바로 여기에서 말이죠.

[03:38] 그리고 이것은 이미지에서

[03:40] 많은 동적 값을 가져오는데 사용되고 있습니다.

[03:42] 여기 태양에서 사용되는 것들과

[03:44] 배경 그라디언트뿐만 아니라

[03:46] 실제 텍스트도 마찬가지입니다.

[03:47] 실제 온도도 마찬가지로요.

[03:49] 이들은 모두 대화마다

[03:51] 달라질 변수들의 일종입니다.

[03:53] 아주 간단히, 오른쪽 상단의

[03:54] 다운로드 버튼을 누르겠습니다.

[03:56] .widget 파일이 바로 다운로드됩니다.

[03:57] 그러면 우리가 해야 할 일은

[03:59] 여기 플러스 위젯으로 가서

[04:01] 업로드하는 것뿐입니다.

[04:02] 완료되면 바로 채워집니다.

[04:03] 그리고 하단에서 클릭하면,

[04:06] 날씨, 현재 또는

[04:07] 해당 위젯의 이름이

[04:08] 하단에 채워지는 것을 볼 수 있습니다.

[04:10] 바로 여기에 말이죠.

[04:11] 다음으로 우리가 해야 할 일은

[04:13] 어시스턴트를 구축하는 것입니다.

[04:15] 위젯을 채우는데 필요한

[04:16] 정보를 참조하는데 사용될 것입니다.

[04:18] 하지만 그 전에, 먼저

[04:20] 무엇을 채우거나

[04:21] 어떻게 해야 하는지에 대한

[04:22] 어떤 지시도 주지 않고

[04:24] 실행해서 기본적으로

[04:25] 어떻게 보이는지 보여드리겠습니다.

[04:28] 오른쪽 상단으로 가서 미리보기 버튼을 누르면

[04:29] 미리보기 버튼을 클릭합니다. 우리가 할 수 있는 것은

[04:31] 여기 에이전트에게 메시지를 보내는 것입니다.

[04:33] 그러면 즉시 위젯 에이전트가

[04:34] 호출되고 응답을 받게 됩니다.

[04:36] 처음부터 바로

[04:38] 이런 일이 일어날 겁니다.

[04:39] 당연히 우리가 아직 프롬프트를

[04:41] 작성하지 않았고, 만든 위젯을

[04:42] 어떻게 사용할지 도움을 주지 않았기 때문에

[04:44] 여기서 받은 응답은

[04:45] 정말 형편없습니다.

[04:47] 당연히 이것은 날씨가 아닙니다.

[04:48] 위젯의 구조만 가져와서

[04:50] 거기에 생각나는 대로

[04:52] 채워 넣은 것뿐입니다. 이것은 간단히 말해서

[04:54] 위젯으로 무엇을 해야 하는지,

[04:56] 어떻게 채워야 하는지,

[04:57] 어떤 데이터로 채워야 하는지에 대한

[04:59] 지침을 전혀 주지 않았기 때문입니다.

[05:00] 실제로는 많은 설정과 구성이

[05:02] 필요하며 이것을 더 잘 작동하게 하려면

[05:04] 상당한 작업이 필요합니다.

[05:05] 이것은 아마도 이 위젯들에 대해

[05:07] 알아야 할 가장 중요한 것 중 하나인데,

[05:09] 정말 멋져 보이지만

[05:10] 실제로는 약간의

[05:11] 설정이 필요하다는 것입니다.

[05:13] 정말 유용하게 만들려면 말이죠. 에이전트 빌더로 돌아가서

[05:16] 우리가 해야 할 일은 단순히

[05:18] 위젯을 제대로 사용하도록 프롬프트하고

[05:20] 이것이 날씨용이고

[05:22] 특정 데이터로 채워지기를 원한다고

[05:23] 알려주는 것뿐만 아니라

[05:25] 실제로 사용할 이미지에 대한

[05:27] 참조도 제공해야 합니다. 이것은 절대

[05:29] 간과하면 안 되는 부분입니다.

[05:30] 더 많은 컨텍스트를 위해

[05:32] 위젯 빌더로 돌아가면 여기 아래쪽 왼쪽에서

[05:33] 날씨용으로 사용되는 이미지들이

[05:36] 직접 OpenAI에서

[05:38] 제공되는 것을 볼 수 있습니다.

[05:40] 만약 클라이언트를 위해 이 시스템을

[05:41] 구축한다면 OpenAI가 지속적으로

[05:43] 이 이미지를 자체 데이터베이스에

[05:45] 저장할 것에 의존하는 것은 그다지 신뢰할 만하지 않을 것입니다.

[05:48] 이것이 짧은 기간 동안만

[05:50] 거기에 있을 가능성이 있습니다.

[05:51] 그래서 위젯에서 참조할 수 있도록

[05:53] 자체 그래픽을 구축해야 할 것입니다.

[05:55] 그래야 할 설정이 좀 있다는 걸 알지만

[05:57] 그런 이미지들을 쉽게 얻을 수 있는

[05:59] 정말 멋지고 쉬운 방법들이 있습니다.

[06:00] 하지만 이미지로 넘어가기 전에

[06:03] 나머지 세부 사항들과

[06:04] 나머지 스타일링을 프롬프트 엔지니어링을 통해

[06:06] 채울 수 있는지 확인해보겠습니다.

[06:07] 아주 간단하게 출력할

[06:09] 위젯을 날씨 정보로

[06:10] 채워야 한다는 지침을

[06:12] 줄 것입니다. 특정 위치를 지정하거나

[06:14] 사용자 입력에 따라

[06:15] 동적으로 만들 수 있습니다.

[06:16] 그렇지 않으면 여기

[06:17] 호주 멜버른의 날씨 정보를

[06:19] 주도록 하고 정확하게 나오는지

[06:21] 확인해보겠습니다.

[06:23] 지침에 대한 프롬프트를

[06:24] 변경했습니다.

[06:26] 이것은 특별히 우리의

[06:27] 날씨 위젯을 위한 것입니다.

[06:29] 방금 지침의 프롬프트를

[06:31] 변경했고 이것은 특별히

[06:33] 우리의 날씨 위젯을 위한 것입니다.

[06:35] 위젯입니다. 이제 이걸 좀 더 확장해보겠습니다. '프롬프트 확장'을 클릭해서요.

[06:36] 제가 '당신은 날씨 위젯 제작자입니다'라고 입력했어요.

[06:38] 위젯 필드를 날씨 조회에서 찾은 날씨 데이터로 채워넣게 됩니다.

[06:40] 웹 검색 도구를 사용해서 멜버른 날씨 데이터를 찾아주세요.

[06:42] 이제 이 기능에 특화되어 있습니다.

[06:44] 물론 가장 정교한 지시사항은 아니죠.

[06:46] 곧 더 추가해야 할 내용들을 살펴보겠습니다.

[06:48] 그런데 추가 도구도 하나 더 넣었어요. 웹 검색 도구입니다.

[06:50] 이건 OpenAI 에이전트 빌더에 기본 내장된 기능이에요.

[06:52] 별도의 외부 API 호출 없이 웹 검색이 가능합니다.

[06:53] 웹 검색 설정을 클릭해보면, 제가 구성한 건 간단합니다.

[06:55] bomb.gov.au 사이트를 추가했어요.

[06:57] 호주 기상청 사이트로, 정확하고 최신의 날씨 정보를 제공합니다.

[06:59] 제가 참조하는 위치에 가장 관련성 높은 정보를 줍니다.

[07:00] 여기에 추가했는데요. 사실 굳이 넣지 않아도 될 수도 있어요.

[07:02] 자체적으로 리서치를 할 테니까요.

[07:04] 위치를 호주나 본인 거주지로 변경하면 더 정확해질 거예요.

[07:06] 하지만 대부분은 자동으로 처리됩니다.

[07:09] 테스트해보고 이번에는 어떤 결과가 나오는지 봅시다.

[07:11] 자, 결과가 나왔네요. 이번엔 훨씬 나아 보입니다.

[07:13] 14.8도로 나와있는데, 정확한 것 같네요.

[07:15] 멜버른 올림픽 파크 VIC으로 위치도 제대로 찾았고요.

[07:17] 제가 검색한 웹사이트를 기반으로 찾은 위치입니다.

[07:18] 소나기가 약해지면서 약한 바람이 분다고 나오네요.

[07:20] 훌륭해요. 이번엔 훨씬 잘 채워졌습니다.

[07:22] 인사말 대신 제대로 된 날씨 정보를 보여주고 있어요.

[07:23] 약간의 프롬프팅만으로도 정확히 무엇을 해야 하는지 이해했네요.

[07:25] 하지만 아직 완벽하지는 않아요.

[07:26] 한 가지는 배경이 회색이라는 점입니다.

[07:28] 그다지 화창한 날씨는 아니지만, 배경 색상을 더 잘 만들 수 있을 것 같아요.

[07:30] 다른 위젯 빌더에서 봤던 것처럼 뒷배경에 멋진 그래디언트를 넣을 수 있겠죠.

[07:32] 간단하게 배경이 멋지게 보이도록 프롬프트에 조건을 추가하면 될 것 같아요.

[07:34] 프롬프트를 통해 선형 그래디언트를 스스로 만들도록 지시하면 됩니다.

[07:36] 그리고 당연히 이미지도 표시되지 않고 있어요.

[07:38] 위젯에서 참조할 수 있는 멋진 이미지를 만들고 직접 호스팅하는 방법도 보여드릴게요.

[07:40] 가장 먼저 할 일은 하단의 예시를 복사해서

[07:42] 우리 에이전트가 참고할 수 있도록 사용하는 것입니다.

[07:44] 어떤 방식으로 그래디언트를 만들어야 하는지 정확히 이해할 수 있도록요.

[07:46] 이걸 프롬프트에 넣었습니다.

[07:48] 소나기가 약해지면서 약한 바람이 분다고 하네요.

[07:52] 멋져요. 이번엔 확실히 훨씬 잘 채워졌습니다.

[07:53] 이번에는 인사말이 없고

[07:55] 제대로 된 날씨 정보를 보여주고 있어요.

[07:56] 조금의 프롬프팅만으로도 정확히 무엇을 해야 하는지 이해했네요.

[07:58] 하지만 여전히 완벽하지는 않아요. 배경이 회색인 점이 문제입니다.

[08:00] 그다지 화창한 날씨는 아니지만, 배경을 더 잘 만들 수 있을 것 같아요.

[08:01] 다른 위젯 빌더에서 봤던 것처럼

[08:03] 뒷배경에 멋진 그래디언트를 적용할 수 있겠죠.

[08:05] 간단하게 프롬프트에 조건을 추가해서

[08:07] 배경이 멋지게 보이도록 선형 그래디언트를 만들라고 지시하면 됩니다.

[08:08] 그리고 당연히 이미지도 나오지 않고 있어요.

[08:10] 위젯에서 참조할 수 있는 정말 멋진 이미지를 만들고

[08:13] 직접 호스팅하는 방법도 보여드릴게요.

[08:15] 먼저 할 일은 하단의 예시로 가서

[08:17] 이걸 복사해서 우리 에이전트가 참고하도록 사용하는 것입니다.

[08:18] 어떤 방식으로 그래디언트를 만들어야 하는지 정확히 이해할 수 있도록요.

[08:20] 이걸 프롬프트에 넣었습니다.

[08:21] 배경이 멋지게 보이려면 프롬프트를 사용해서

[08:23] 어떤 종류의 선형 그래디언트든 스스로 만들어야 한다고 지시해야 합니다.

[08:26] 그 외에도 당연히 이미지가 나오지 않고 있어요.

[08:28] 위젯에서 참조할 수 있는 정말 멋진 이미지를 만들고

[08:30] 직접 호스팅하는 방법도 보여드릴게요.

[08:32] 먼저 할 일은 하단의 예시로 내려가서

[08:34] 이걸 복사해서 우리 에이전트 참조용으로 사용하는 것입니다.

[08:35] 어떤 방식으로 그래디언트를 만들어야 하는지 정확히 이해할 수 있도록요.

[08:37] 그래서 이걸 복사해서

[08:39] 하단의 예시를 그대로 사용할 예정입니다.

[08:40] 우리 에이전트가 참고할 수 있도록

[08:41] 어떤 방식으로

[08:43] 그래디언트를 만들어야 하는지 정확히 이해할 수 있도록요.

[08:46] 이런 종류의 방식으로 만들어야 한다는 걸 이해할 수 있게

[08:48] 그래디언트를 만들 수 있도록 말이죠.

[08:49] 그래서 이걸 프롬프트에 넣었습니다.

[08:51] 프롬프트에 추가했습니다. 날씨 상태에 따라

[08:53] 그라데이션을 배경으로 스타일링해 달라고

[08:55] 요청했습니다. 여기 맑은 날에 대한

[08:57] 예시가 있습니다. OpenAI 예시에서

[08:59] 직접 붙여넣었고, 이제 우리 에이전트가

[09:01] 위젯용 그라데이션 제작의 스타일링과

[09:03] 형식에 대한 맥락을 이해할 수 있을

[09:04] 것입니다. 이 예시를 단순히

[09:06] 참조하는 것뿐만 아니라,

[09:09] 오늘처럼 흐린 날에는

[09:10] 회색조로 만들되 여전히

[09:12] 그라데이션 효과를 적용할 것으로

[09:14] 기대합니다. 한번 시도해 보겠습니다.

[09:16] 보시다시피 배경이 이제 훨씬

[09:18] 더 나은 그라데이션으로 변했습니다.

[09:20] 단순한 회색이 아닙니다.

[09:22] 더 어두운 날씨에서 더 밝은

[09:24] 날씨로 그라데이션이 적용되었네요.

[09:25] 오전에는 소나기가 내리고 하루 종일

[09:28] 점차 맑아지는 패턴입니다.

[09:29] 정말 멋지고 지능적이라고 생각합니다.

[09:31] 날씨가 바뀐 것 같네요.

[09:32] 실제로 멜버른의 다른 지역을

[09:34] 참조하고 있는 것 같습니다.

[09:35] 원하는 지역의 날씨를 가져오도록

[09:36] 약간의 프롬프팅이 필요하지만,

[09:38] 전반적으로 꽤 좋아 보입니다.

[09:40] 이제 이런 이미지들을

[09:41] 어떻게 얻을 수 있는지 보여드리겠습니다.

[09:43] ChatGPT로 이동하겠습니다.

[09:46] 이것을 사용해서 이런

[09:47] 이미지들을 만들 예정입니다.

[09:49] 이런 유형의 작은 아이콘과

[09:50] 투명 아이콘 제작에 정말 좋은 도구입니다.

[09:53] 실제로 얼마나 좋은지 놀라실 겁니다.

[09:55] 이런 프롬프트를 입력하겠습니다.

[09:56] 흐린 날을 위한 작은 투명 아이콘을

[09:59] 만들어 달라고 요청하고,

[10:01] 맑은 날 아이콘을 참조로

[10:03] 제공했다고 말하겠습니다.

[10:06] 위젯 빌더에서 사용된

[10:08] 이미지의 스크린샷을 찍어서

[10:10] 참조로 사용할 예정입니다.

[10:12] 그 스타일링을 사용할 수 있도록

[10:14] 참조하겠습니다. 물론 원하는 대로

[10:15] 프롬프트할 수 있지만, 이렇게 하면

[10:17] 프로세스를 더 빠르게 하고

[10:18] 조금 더 나은 결과를

[10:19] 얻을 수 있습니다. AI가 처리하도록

[10:22] 맡기겠습니다. 미래에 OpenAI가

[10:25] 이미지 생성 모델을 에이전트

[10:27] 빌더에서 직접 사용할 수 있도록

[10:29] 출시한다면 정말 멋질 것 같습니다.

[10:30] 즉석에서 이런 이미지들을

[10:32] 만들 수 있다면 정말

[10:34] 대단할 것 같습니다. 그렇지 않다면

[10:36] 현재로서는 이 방법을 사용해야 합니다.

[10:38] 여기 결과가 나왔네요.

[10:40] 완전히 투명한 이미지로

[10:42] 위젯입니다. 이것을 다운로드해서

[10:44] 우리 위젯에서 참조할 수 있습니다.

[10:46] 이런 이미지들을 직접

[10:48] 어딘가에 저장하는 것을 권장합니다.

[10:50] OpenAI 서버를 참조하는 것은

[10:51] 권장하지 않습니다. 이런 이미지들은

[10:53] 언제든지 사라질 수 있기 때문입니다.

[10:55] 여기 있는 것은 IMGA입니다.

[10:57] 이미지를 저장할 수 있는

[10:58] 이미지 업로드 도구 같은 것입니다.

[11:01] 하지만 실제로는 어떤 공용

[11:03] 파일 저장소든 같은 역할을 합니다.

[11:05] IMGA에 이미지를 업로드했습니다.

[11:07] 페이지에서 우클릭하고 이미지 주소를 복사할 수 있습니다.

[11:09] 이제 복사한 이미지 주소는

[11:11] 누구나 이 이미지에 접근할 수 있는

[11:13] 공개적으로 사용 가능한 링크입니다.

[11:15] 이제 에이전트 빌더로 돌아가서

[11:18] 내 에이전트로 들어가면

[11:19] 프롬프트로 이동해서

[11:21] 이 이미지를 사용하도록 지시할 수 있습니다.

[11:23] 흐린 날에는 이 이미지를 참조하라고 하겠습니다.

[11:25] 지침에 추가한 내용을 보면

[11:27] 실제로 이미지라는

[11:29] 마크다운 섹션을 추가했습니다.

[11:31] 이렇게 하면 프롬프트를 더 길게 작성할 때 최적화됩니다.

[11:34] 프롬프트의 다른 부분들을

[11:36] 섹션으로 나누면

[11:38] 훨씬 매끄러워집니다.

[11:40] 이것을 실제 제품으로 만들 때는

[11:41] 아마도 다양한 날씨 조건에 맞는

[11:42] 3-4개의 다른 이미지를

[11:44] 사용하게 될 것이고

[11:45] 모든 이미지를 이 지침 세트에

[11:47] 저장하고 싶을 것입니다.

[11:49] 여기서는 흐린 날에

[11:51] 이 이미지를 사용하라고 하고

[11:53] IMGA 링크에 직접 연결했습니다.

[11:55] AI가 출력에서 이를 참조할 수 있고

[11:56] 완전한 위젯을 제공할 수 있습니다.

[11:58] 마침내 날씨 위젯이 모두 구성되었습니다.

[12:00] 그라데이션 배경과 함께

[12:02] 적절한 날씨와

[12:03] 날씨 이미지까지

[12:05] 그리고 하단의 텍스트까지 있습니다.

[12:07] 이 위젯이 완성되었습니다.

[12:09] 이제 구성과 설정이 끝났으니

[12:10] 제대로 사용할 수 있습니다.

[12:12] 프롬프트 엔지니어링과

[12:13] 데이터를 가져와서 참조하고

[12:15] 위젯에서도 참조할 수 있도록

[12:16] 이미지를 만드는 과정은

[12:18] 다른 위젯들을 만들 때도

[12:20] 정확히 같은 과정입니다.

[12:22] 이 모든 위젯들은

[12:24] 이미지를 사용하고

[12:25] 다양한 소스에서 가져온

[12:27] 데이터를 사용합니다.

[12:29] 함수 호출이든 MCP 호출이든

[12:30] 모든 데이터는

[12:32] 위젯을 만들기 전에 먼저

[12:35] 우리 에이전트로 전달되어야 합니다.

[12:37] 좋습니다. 이제 기존 위젯을 사용하고

[12:39] 원하는 대로 구성하는 방법을

[12:41] 알게 되었습니다.

[12:43] 하지만 완전히 새로운

[12:44] 위젯을 어떻게 만들까요?

[12:46] 정확한 용도에 맞게 커스텀으로 만들어서

[12:47] 대화에 추가하는 방법은 무엇일까요?

[12:50] 다행히 이런 위젯을 만들기 위한

[12:52] 전용 섹션이 있습니다.

[12:54] 가장 좋은 점은

[12:56] 단순히 프롬프트로

[12:57] 위젯을 만들 수 있다는 것입니다.

[12:59] 모든 코드는 AI가 생성하고

[13:01] 우리는 원하는 것을

[13:03] 정확히 알려주기만 하면 됩니다.

[13:04] 예를 들어 채팅 대화에서

[13:06] F1의 최신 드라이버

[13:08] 순위를 가져오는 위젯을

[13:09] 만들고 싶다고 해봅시다.

[13:11] 포인트가 많은 큰 컬럼과

[13:13] 드라이버 이름들, 아마도 이미지까지

[13:15] 포함하고 싶을 것입니다.

[13:17] 그리고 F1 스타일 위젯처럼

[13:19] 멋지게 포맷되고 스타일링된 모양을 원할 것입니다.

[13:21] F1 스타일 위젯 같은 느낌으로 만들어보고 싶어요. 일단 간단하게

[13:23] 프롬프트를 던져보고

[13:24] 어떤 결과가 나오는지 보겠습니다.

[13:26] ChatGPT에 접속해서

[13:28] 챗봇용 F1 드라이버

[13:30] 순위표 위젯을 디자인하는

[13:33] 프롬프트를 만들고 싶다고 했어요.

[13:35] F1 스타일링과 함께

[13:37] 잘 디자인된 리더보드나

[13:39] 현재 순위 목록이 있어야 한다고요.

[13:40] 생성된 텍스트 중

[13:42] 일부를 복사해서 사용하겠습니다.

[13:44] 여기서 생성된 걸 가져다가

[13:45] 다른 것들과 함께 사용해보죠.

[13:47] 이 모든 게 필요한지는 확실하지 않지만

[13:49] 원한다면 사용할 수 있어요.

[13:50] 바로 여기에 붙여넣고

[13:52] 어떤 결과가 나오는지 보겠습니다.

[13:55] F1 드라이버 순위표가

[13:56] 상단에 나타났네요.

[13:58] 순위를 새로고침할 수 있는

[14:01] 새로고침 버튼도 있고요.

[14:03] 순위를 찾을 수 없습니다.

[14:04] 새로고침을 탭하세요. 음, 여기 보세요.

[14:06] 꽤 잘 스타일링됐네요.

[14:08] 물론 F1의 색상들이죠. 하지만 당연히

[14:11] 여기에는 채워진 필드가

[14:12] 없습니다. 그 이유는

[14:15] 사용할 필드의 예시를

[14:17] 제공하지 않았고

[14:18] 프롬프트에 따라 동적으로

[14:20] 작동하기 때문이에요.

[14:22] 하지만 작은 트릭으로

[14:24] 테스트를 위해 데이터를 생성해서

[14:26] 채울 수 있게 만들 수 있어요.

[14:27] 전체 위젯 파일을

[14:29] ChatGPT에 넣고

[14:31] 이 참조 데이터를

[14:32] 가짜 데이터로 업데이트할 수 있냐고

[14:34] 물어봤어요. 처음에 받은 걸

[14:36] 아래쪽에 있는 걸 줬고요.

[14:38] 그러면 이런 긴 코드 목록이

[14:40] 나와서 참조용으로

[14:41] 사용할 수 있습니다.

[14:43] 실제로 데이터를

[14:44] 얻을 수 있어요.

[14:46] '코드 복사'를 클릭해서

[14:48] 여기로 와서 이걸 교체하면

[14:50] 모든 데이터가 채워지는 걸

[14:51] 볼 수 있습니다.

[14:53] 여기에 붙여넣으면

[14:55] 여기 보세요.

[14:56] 이제 많은 드라이버들이

[14:58] 채워졌습니다. 포인트도

[15:00] 여기 있고요.

[15:01] 긴 목록이네요. '하나 더 보기'도

[15:03] 클릭할 수 있는데, 이건 자동으로

[15:06] 생성된 버튼이에요.

[15:08] 이것도 열고 닫을 수 있고요.

[15:09] 어떤 이유에서든요. 하지만

[15:11] 정말 놀라운 건

[15:13] 이런 종류의 인터페이스를

[15:14] 말 그대로 프롬프트만으로

[15:16] 구축할 수 있다는 거예요.

[15:18] 물론, 이 데이터는

[15:20] 최신이 아니고

[15:21] 최신 데이터를 제공하길

[15:23] 원하겠지만,

[15:25] 실제로 우리가 할 일은

[15:27] 이런 타입의 구조를

[15:29] 모든 정보에 사용하고

[15:30] 우리 프롬프트에 제공하는 거예요.

[15:31] 그러면 실제 에이전트가

[15:33] 인터넷에서 검색해서

[15:35] 이 경우에 적절한 데이터를

[15:37] 채워넣을 거예요.

[15:39] 그리고 당연히, 이걸

[15:41] 챗봇에서 사용하고 싶다면 다운로드해서 에이전트 빌더에 업로드하고, 최신 F1 드라이버 순위에 대한 연구를 하라고 프롬프트하면 됩니다. 그러면 이런 식으로 데이터를 채워넣을 수 있을 거예요. 이제 이 위젯들을 어떻게 사용하고 정말 인터랙티브한 인터페이스를 만드는지 잘 이해하셨을 거라고 생각합니다. 에이전트 빌더에서 에이전트 구축에 대해 더 배우고 싶다면, 에이전트 빌더에서 에이전트를 구축하는 방법에 대한 제 1시간 완전 강의를 100% 추천합니다.