[00:00]
간단한 최초 25마리의 전설의 포켓몬
[00:02]
도감을 만들어보겠습니다. 포켓몬의
[00:04]
타입, 설명, 이미지를 포함해서요.
[00:07]
CSS, JS, HTML을 하나의 파일로
[00:11]
만들었고, 보시다시피 심플한
[00:14]
애니메이션도 추가했으며,
[00:17]
검색창까지 넣었네요.
[00:19]
이번엔 좀 더 어려운 걸 해볼까요? 0부터 9까지
[00:21]
숫자 키로 채널을 바꿀 수 있는 TV를 만들어보죠.
[00:24]
각 채널마다 전통적인 TV 채널 장르에서
[00:26]
영감을 받은 아이디어를 넣어주세요.
[00:28]
자세하고 흥미로운 애니메이션과
[00:31]
화면에 채널명을 표시해주세요.
[00:34]
800x800 픽셀의 P5.js 스케치를
[00:37]
검은 배경으로 만들어주세요.
[00:41]
채널 내용이 TV 화면 안에만
[00:43]
표시되도록 마스킹하고,
[00:46]
모든 걸 하나의 파일에 넣어주세요.
[00:48]
정말 창의적으로 만들었네요.
[00:50]
모든 숫자 채널이 작동하고
[00:53]
실제 TV 채널 장르에서 영감을 받은
[00:56]
애니메이션이네요. 정말 놀랍습니다.
[00:58]
이번엔 좀 더 과학적인 걸 해볼까요?
[01:01]
자바스크립트로 실제 물리 법칙을 적용한
[01:03]
떨어지는 글자 애니메이션을 만들어보죠.
[01:05]
글자들이 화면 상단에서 무작위로
[01:07]
다양한 크기로 나타나고
[01:09]
지구 중력의 영향을 받아야 합니다.
[01:10]
실제 글자 모양을 기반으로 한
[01:12]
충돌 감지 기능이 있어야 하고
[01:15]
다른 글자, 바닥, 화면 경계와 상호작용하며
[01:17]
물과 비슷한 밀도 특성을 가지고
[01:20]
화면 크기 변화에 동적으로 대응하며
[01:22]
검은 배경에 표시되어야 합니다.
[01:25]
모든 것이 하나의 HTML 파일에
[01:27]
들어가야 하는데, 완벽하게 해냈네요.
[01:30]
01 미니와 같은 더 큰 모델도
[01:32]
못했던 건데 말이죠.
[01:35]
이번엔 이걸 해볼까요? LA의 3D 인터랙티브
[01:37]
지도를 만들고 왼쪽에는
[01:40]
인기 관광지 목록을 표시해주세요.
[01:42]
사용자가 관광지를 클릭하면
[01:45]
자동으로 해당 위치로 이동하고
[01:47]
하이라이트 표시가 되어야 합니다.
[01:50]
여기 시각화된 결과를 보시죠. LA로 이동했고
[01:53]
클릭하면 실제로 그 위치로
[01:56]
이동하네요. 정말 멋집니다.
[02:00]
다만 정확한 위치에서
[02:02]
약간 벗어나 있긴 하네요.
[02:04]
Open Router에 새로운 미스터리 모델이
[02:07]
등장했는데요, Quasar Alpha라고 하며
[02:10]
코딩에 특화되어 있고 매우 빠르다고 합니다.
[02:14]
Open Router가 X에 이렇게 올렸죠.
[02:16]
'최초의 스텔스 모델인 Quasar Alpha를
[02:19]
발표하게 되어 기쁩니다. 이것은
[02:22]
곧 출시될 긴 컨텍스트 기반 모델의
[02:24]
사전 릴리즈 버전입니다. 100만 토큰의
[02:27]
컨텍스트 길이를 가지고 있으며
[02:30]
코딩에 최적화되어 있지만
[02:32]
범용으로도 사용 가능하고
[02:35]
무료로 이용할 수 있습니다.'
[02:37]
이 모델을 테스트해보니
[02:39]
코딩 능력이 정말 인상적이더군요.
[02:41]
아직 모델 제공자는 알 수 없지만
[02:43]
컨텍스트 길이로 봤을 때
[02:46]
아마도 구글에서 나온 것 같습니다.
[02:49]
또한 Open Router가 제공한 API 호출
[02:52]
예시를 보면 멀티모달 기능도
[02:55]
지원하는 것 같은데,
[02:57]
이건 나중에 테스트해보겠습니다.
[02:59]
Open Router를 사용해보지 않으셨다면,
[03:01]
이 서비스는 하나의 API를 통해
[03:04]
다양한 LLM에 접근할 수 있게 해주는
[03:06]
서비스 제공자입니다. OpenAI
[03:10]
클라이언트를 OpenRouter의 기본 URL로 대체하면
[03:13]
그들이 제공하는 다양한 모델들을
[03:16]
오픈 웨이트와 독점 모델 모두
[03:18]
사용할 수 있습니다. 자, 이제
[03:21]
시작하기 위해
[03:22]
Quasar를 선택하고
[03:25]
새로운 채팅 세션을 시작하겠습니다. 주로
[03:27]
코딩 능력을 테스트해볼 건데요
[03:30]
첫 번째 프롬프트는
[03:32]
전설의 포켓몬 25마리에 대한 간단한
[03:34]
백과사전을 만드는 것입니다. 타입, 설명,
[03:36]
이미지를 포함해서 CSS, JS, HTML이
[03:39]
모두 담긴 단일 파일로 만들어보죠. 이 모델의 생성 속도는
[03:44]
정말 인상적입니다
[03:47]
자, 여기 만들어진 웹사이트를 보면
[03:49]
이런 애니메이션도 추가했고
[03:51]
이미지 URL을 통해 이미지도 추가했네요
[03:54]
이것은 아마도
[03:56]
학습 데이터에서 가져온 것 같습니다
[03:57]
이제 상단의 검색 기능을 한번 보죠
[04:00]
검색을 시도하면
[04:03]
실시간으로 검색어에 따라 필터링이 되는데
[04:07]
꽤 멋지네요. 이제 새로운 채팅을
[04:10]
시작했는데
[04:13]
이번에는 프롬프트가 코딩 능력뿐만 아니라
[04:14]
창의성도 테스트할 겁니다
[04:17]
TV를 만들건데
[04:20]
10개의 다른 채널로 전환되고
[04:23]
각 채널은
[04:25]
클래식한 TV 채널 장르에서
[04:26]
영감을 받아야 하며
[04:29]
애니메이션과 창의적인 채널명도
[04:31]
포함해야 합니다
[04:33]
추가 요구사항으로
[04:35]
p5.js를 사용하고 HTML은 사용하지 않으며
[04:39]
모든 채널 콘텐츠가
[04:41]
TV 화면 영역 안에 마스킹되어야 합니다
[04:43]
자, 이 요구사항들을 잘 따르는지 보죠
[04:46]
100만 컨텍스트 윈도우 모델임에도
[04:49]
생성 속도가 정말 훌륭하네요
[04:52]
그리고 이 모델은
[04:55]
추론 모델은 아닌 것 같고
[04:57]
아니면 적어도
[04:59]
추론 토큰을 보내주지는 않네요
[05:02]
좋습니다. 코드가 생성되었으니
[05:04]
이걸 복사해서
[05:07]
온라인 p5.js 에디터에서 실행해보겠습니다
[05:09]
자, 첫 번째 채널입니다
[05:12]
애니메이션이 꽤 멋지고
[05:16]
이름은 '레트로 카툰'이네요. 다음을 보죠
[05:19]
'네이처 롬', '브레이킹 뉴스'
[05:22]
비록 아무것도 보여주지 않지만
[05:24]
'사이파이 갤럭시', '스포츠 존', '클래식 시네마'
[05:28]
정말 멋지네요. '칠 튠즈'
[05:31]
'게임 허브', 만든 애니메이션이
[05:33]
정말 마음에 드네요. 그리고 이 모든 걸
[05:36]
한 번에 생성했다는 걸 기억하세요
[05:38]
정말 좋은 점은
[05:40]
모든 지시사항을 잘 따랐다는 거예요
[05:42]
보시다시피 모든 것이 TV 화면에 마스킹되어 있고
[05:45]
채널명도 모두 창의적이에요
[05:47]
게다가
[05:51]
다른 모델들과는 달리
[05:53]
직사각형이 아닌
[05:55]
정사각형 TV 화면을 만들었어요
[05:58]
다음으로는 교육용
[06:00]
산불 확산 시뮬레이션을 만들어보겠습니다
[06:02]
사용자가 바람의 방향, 속도,
[06:05]
그리드 기반 숲 지도에서
[06:07]
초기 발화점을 설정할 수 있게 할 거예요
[06:11]
이런 언어 모델들의 정말 유용한 사용 사례 중 하나는
[06:13]
교육 자료를 만드는 건데요
[06:16]
특히 이제 대부분의 모델들이
[06:18]
캔버스에 접근할 수 있어서
[06:20]
교육 자료를 설명하는 데
[06:23]
매우 유용할 수 있습니다. 지금 모델이
[06:27]
파이썬으로 모든 것을 생성했는데
[06:30]
HTML로 작성하도록 요청해 보겠습니다.
[06:34]
단일 HTML 파일을 생성하도록 하고
[06:37]
어떻게 되는지 살펴보겠습니다.
[06:40]
다시 시도해보겠습니다. 이 모델은
[06:43]
API를 통해서도 사용 가능한데
[06:45]
나중에 예시를 보여드리겠습니다.
[06:47]
단, 오픈라우터가 현재 프리릴리즈 테스트 중이라
[06:50]
속도 제한을 두고 있다는 점 참고해 주세요.
[06:52]
좋습니다.
[06:55]
동일한 HTML 편집기를 사용하겠습니다.
[06:57]
아직 잘 보이지는 않네요... 아, 알겠습니다.
[07:01]
이걸 시작해보죠. 이 모든 것이 나무라고 가정하면
[07:04]
다른 위치에서 시작할 수 있고
[07:07]
북쪽에서 시작해서
[07:10]
바람이 남쪽으로 부는 상황을 만들어보죠.
[07:12]
간단한 애니메이션이 생성되었네요.
[07:14]
이제 나무 사이에 공간을 만들고
[07:17]
오픈 스페이스를 만들어달라고 요청하고
[07:19]
세 가지 아이콘을 사용하도록 해보겠습니다.
[07:22]
어떻게 되는지 보죠. 코드가 생성되었네요.
[07:25]
돌아가서 코드를 붙여넣고
[07:27]
다시 실행해보겠습니다. 나무들이 생성되었네요.
[07:31]
좋습니다. 이제 바람이 없는 상태,
[07:33]
즉 풍속이 0인 경우를 시도해보죠.
[07:36]
몇 개의 나무가 있네요.
[07:39]
이제 불을 놓고
[07:42]
강한 바람이 불게 하고
[07:45]
바람이 북쪽으로 부는
[07:48]
방향으로 설정해보죠.
[07:50]
죄송합니다. 다시 시도해보겠습니다.
[07:54]
북쪽으로... 네, 꽤 멋지네요.
[07:58]
이번에는 중심극한정리
[08:00]
시뮬레이터의 간단한 애니메이션을
[08:02]
만들어달라고 요청했습니다.
[08:04]
균일 분포나 지수 분포를
[08:06]
선택할 수 있고, 표본 크기와
[08:09]
표본 수를 설정할 수 있으며
[08:12]
분포를 보여주는데
[08:14]
마우스를 올리면 멋진 애니메이션이 나타납니다.
[08:17]
이는 정말 훌륭한 도구가 될 수 있습니다.
[08:20]
특히 교육을 하거나
[08:21]
특정 개념을 이해하려 할 때 유용하죠.
[08:24]
지금까지는 제가 보낸 어떤 프롬프트도
[08:27]
문제없이 처리했습니다.
[08:29]
이번에는 이걸 시도해보죠.
[08:31]
3D 인터랙티브 지도를 만들고 왼쪽에
[08:33]
주요 관광 명소 목록을 표시하고
[08:35]
사용자가 목적지를 클릭하면
[08:38]
지도가 자동으로 이동하여
[08:41]
해당 위치를 강조 표시하도록 하겠습니다.
[08:43]
더 구체적으로 하기 위해
[08:46]
Cesium.js를 사용하도록 요청하겠습니다.
[08:49]
Cesium.js나 Cesium에서 무료 API 토큰을
[08:52]
받아서 인터랙티브 맵을 사용할 수 있습니다.
[08:56]
자, 여기 생성된 코드와
[08:59]
지침들이 있네요.
[09:01]
Cesium 토큰이 필요한데
[09:03]
계정을 만들어야 합니다.
[09:05]
Cesium에서 새 토큰을 생성하면 됩니다.
[09:08]
여기 코드가 있는데
[09:11]
API 키를 여기에 붙여넣겠습니다.
[09:15]
영상 촬영 후에는 이 API 키를
[09:18]
재생성할 예정입니다.
[09:20]
지난번에는 한 번에 됐는데
[09:22]
이번에는 몇 가지 문제가 있어서
[09:24]
수정 사항을 제안했고
[09:27]
최소한의 예제를 만들어냈습니다.
[09:30]
이 최소 예제를 보니 3D 지도가 보이고
[09:33]
지도에 모든 것이 표시되어 있네요.
[09:37]
목적지를 클릭하면
[09:39]
실제로 그 위치로 날아가지만
[09:42]
지도가 아직 완벽하지는 않네요.
[09:45]
별로 좋지 않네요. 그리고 특정 위치를
[09:48]
확대하거나 이동하는 것도 안 되는 것 같습니다.
[09:52]
재미있는 점은
[09:53]
LLM이 처음에는 기본 지형도
[09:55]
제공했는데 어떤 이유에서인지
[09:58]
이제는 작동하지 않네요. 레이아웃은
[10:01]
LA와 정확히 똑같아 보이긴 합니다.
[10:05]
마지막으로 테스트하고 싶은 것은
[10:07]
이 모델이 멀티모달인지 여부입니다.
[10:10]
이 예제를 사용해서 테스트해보겠습니다.
[10:13]
OpenAI Python 클라이언트를 설치하고
[10:15]
Open Router API 키를 제공하겠습니다.
[10:18]
이 키는 영상이 끝나면 삭제할 겁니다.
[10:20]
base URL과 함께요.
[10:22]
이제 테스트를 위해
[10:24]
이 이미지를 사용할 건데, 잘 작동하는 것 같습니다.
[10:26]
이 이미지를 제공하고
[10:28]
무엇이 있는지 물어보니
[10:30]
"이 이미지는 나무로 된
[10:32]
산책로가 울창한 초록 잔디밭이나
[10:35]
목초지를 가로지르고 있고,
[10:38]
길 양쪽으로 관목과 나무들이
[10:41]
있으며, 하늘은 대체로 맑고
[10:43]
구름이 약간 흩어져 있습니다.
[10:46]
전체적인 조명으로 보아 밝은
[10:48]
햇살이 비치는 날이며, 전체적으로 평화롭고
[10:51]
자연스러운 풍경입니다."라고 답했습니다.
[10:55]
이미지에 대한 매우 정확한
[10:58]
설명이며, 이 모델이 확실히 멀티모달입니다.
[11:01]
이제 이 모델의 배경에 대해 말하자면,
[11:02]
쿼이저라는 이름을 보면 - 쿼이저는
[11:05]
매우 밝고 극도로 먼 천체로
[11:07]
은하 중심부의 초대질량 블랙홀에 의해
[11:10]
구동되는 천체입니다.
[11:12]
전자기 스펙트럼 전반에 걸쳐
[11:14]
엄청난 에너지를 방출하죠. 이는
[11:17]
제미나이와 매우 유사합니다. 그래서
[11:20]
이것은 아마도 이런 대형 모델들 중
[11:22]
코드에 특화된 버전일 것 같습니다.
[11:25]
코딩 능력이 정말 뛰어나서
[11:27]
클라우드 소넷과 비슷한 수준이라고
[11:31]
말할 수 있을 것 같네요.
[11:34]
자, 이것으로 쿼이저의
[11:37]
코딩 능력에 대한 간단한 살펴보기였습니다.
[11:39]
곧 공식 발표가 있을 것 같고
[11:42]
이미 많은 사람들이 Open Router에서
[11:44]
이 모델을 테스트하기 시작했으며
[11:47]
많은 관심을 받고 있습니다.
[11:49]
여러분도 이 모델을 테스트해보시고
[11:52]
어떤 인상을 받았는지 알려주세요.
[11:54]
이 영상이 도움이 되었길 바랍니다.
[11:56]
시청해주셔서 감사하고
[11:58]
늘 그렇듯이 다음 영상에서
[12:00]
만나요.