오늘 저희는 특별한 게스트인 마이크님을 모셨습니다. 그는 과거 유튜브 엔지니어였습니다.00:00

그가 인공지능을 활용하여 유튜브를 처음부터 다시 만드는 방법을 45분 안에 보여드릴 예정입니다.00:03

알파벳의 직원 소프트웨어 엔지니어로서 modernyoutube.com을 구축하는 데만 해도 3년이 넘게 걸렸습니다.00:08

45분 안에 코드를 한 줄도 작성하지 않고 똑같이 할 수 있도록 가르쳐 드리겠습니다.00:13

제 이름은 마이크입니다. 이제 만들기에 들어가도록 하겠습니다. 정식으로 제 소개를 해드릴게요.00:18

저는 구글과 다른 웹 서비스에서 유튜브를 포함하여 8년 동안 일했습니다.00:24

이후에 저는 웨이모로 옮겨서, 그곳에서 4년 동안 샌프란시스코를 포함하여 여러 지역에 출시하는 것을 도왔습니다.00:28

그리고 나서 제 회사를 설립하고 Pony Diffusion을 출시했으며, 현재 Fictional을 운영하고 있습니다.00:33

오늘 진행을 맡게 되었어요. 따라오시려면 어떤 기술적인 능력이 필요하신가요?00:39

만약 여러분이 개발 환경(IDE) 사용 경험이 있고, 터미널 작업에 익숙하며 어느 정도의...00:44

어떤 웹 개발 지식이 있으면 내부 동작을 이해하는 데 도움이 되겠지만, 소프트웨어 엔지니어가 될 필요는 없습니다.00:49

코딩 방법을 알 필요는 없으세요.00:55

사실 저희는 ID를 아주 가볍게 사용할 것이고, 몇 가지 설정하는 데만 사용할 예정입니다.00:57

따라서 기술이 전혀 없더라도 따라와 주세요. 정말 재미있을 거예요.01:03

개발 과정에서 몇 가지 외부 서비스를 이용할 예정인데, 그중 일부는 유료로 제공될 수 있습니다.01:08

그래서 이것이 당연히 다음 중요한 질문입니다.01:15

에이전트 개발 도구인 커서나 코덱스 같은 구독이 없으시다면, 01:18

하나 정도 구비하시는 게 좋을 것 같습니다.01:23

이미지와 동영상을 호스팅하기 위해 클라우드플레어를 사용할 예정이며, 월 구독료가 있습니다.01:25

하지만 저희에게 시간을 정말 많이 절약해 줄 것이기 때문에 개인적으로는 충분히 가치가 있다고 생각합니다.01:32

그리고 저희는 이미지와 영상 제작을 위해 File.ai를 사용할 예정입니다. 웹사이트에 많은 가짜 데이터를 만들거든요, 그리고 정말 멋지게 보일 거예요.01:37

이것 말고는 거의 다인 것 같습니다.01:43

다른 모든 것은 무료이니, 오늘 에이전트에게 합리적으로 무엇을 요청할 수 있는지 알아봐야겠어요.01:48

물론, 가능한 것들을 살펴봐야 합니다.01:53

저희의 꿈은 그들에게 모든 것을 하도록 하는 거예요. 제품을 만들고, 데이터로 채우고, 배포하고, 홍보하는 거죠.01:58

실제 사용자를 확보하고 심지어 광고를 집행할 수도 있겠지만, 빠르게 다가오고 있습니다. 아직은...02:04

아마 일 년에서 이 년 정도 걸릴 것 같아요. 그래서 저희는 제품 관리자와 기술 리드 역할을 겸하며 에이전트에게 특정 기능을 만들도록 지시하게 될 겁니다.02:10

제품 관리자이자 기술 리더로서 에이전트가 특정 작업을 수행하도록 안내하는 흥미롭고 약간은 독특한 조합이 될 것 같습니다.02:16

이 연습에서는 유튜브닷컴의 얼굴이라고 할 수 있는 홈페이지에 집중할 예정입니다.02:22

그리고 시청 페이지는 가장 중요한 요소인 비디오 플레이어가 포함되어 있습니다.02:28

자, 페이지들을 살펴보고 대략적으로 어떤 구성 요소들이 있는지 알아봅시다.02:32

홈페이지를 보면 상단 바도 있는데, 그 안에는 입력 상자가 있습니다.02:37

검색창이나, 로그인하시면 아바타, 사이드바가 있는데, 유튜브의 다른 중요한 서비스로 연결되는 기능들이 있습니다.02:42

영상이나 다양한 콘텐츠를 보여주는 여러 개의 선반이 있습니다.02:47

실제로 감상 페이지로 연결되는 쇼츠들이 있습니다. 그리고 감상 페이지를 확인해 보면, 일부 요소들은 동일하게 유지됩니다.02:54

상단 바는 그대로 있고, 사이드바는 사라졌습니다. 이러한 부분을 유지한 이유는 최대한의 공간을 확보하기 위해서입니다.03:01

영상에 집중된 화면이지만, 여전히 보여줄 수 있습니다. 시청 페이지에서 가장 중요한 부분인 영상 플레이어가 있습니다.03:07

영상 설명, 제목과 같은 메타데이터도 함께 제공됩니다.03:14

다른 사용자들의 댓글과 함께 중요한, 매우 중요한 측면입니다.03:19

추천 동영상이 포함된 오른쪽 사이드바는 핵심 구성 요소입니다.03:23

그리고 관련 영상들과 재생되지 않는 영상들도 있습니다. 사실상 많은 기술을 뒷받침하는 매우 제한적인 구성 요소들의 집합이라고 할 수 있습니다.03:28

이 페이지들을 작은 조각으로 나누어 하나씩 구현할 수 있습니다.03:35

하나씩 구현할 수 있습니다. 코덱을 사용하거나, 커서를 사용하거나, 에이전트를 활용할 수 있는 거의 모든 편집기를 사용할 수 있습니다.03:41

에이전트나 심지어 에이전틱 CLI만으로도 충분합니다.03:49

저는 커서(Cursor)를 좋아합니다. IDE처럼 보이고 에이전트를 통합할 수 있는 것을 사용하는 데 더 익숙하지만요.03:55

원하는 대로 하시면 됩니다.04:01

자, 원래 유튜브닷컴에 대한 흥미로운 사실은, 몇 년 전 저희가 만들던 시기에 사용하기로 결정했던 것이 있습니다.04:07

당시에는 이것이 고려될 만한 기술로 여겨졌습니다.04:12

최첨단 기술이었기 때문에, 저희는 웹 컴포넌트에 적극적으로 관심을 가졌고 특히,04:17

웹 컴포넌트를 웹사이트 내에서 사용할 수 있게 해준 Polymer라는 프레임워크에 주목했습니다.04:21

시대가 변해서 폴리머는 더 이상 사용되지 않고, 웹 컴포넌트도 시간이 지나면서 사라졌습니다.04:26

그래서 저희는 조금 다른 도구들을 사용할 거고, 그리고요.04:32

이 프로젝트에 추천하는 것은 NetJS를 사용하는 것입니다. 굉장히 안정적인 프레임워크입니다.04:36

많은 어려움을 피할 수 있고, 전반적으로 정말 잘 되어 있을 겁니다.04:41

요즘 굉장히 인기 있는 TypeScript 기반의 React 프레임워크들을 활용할 겁니다.04:45

자, 이제 시작해 볼까요. 커서로 이동해서 아주 기본적인 구현을 시작하도록 하겠습니다.04:52

NetJS를 이용해서 기본적인 구조를 먼저 만들고, 멋진 걸 만들기 전에 작업하겠습니다.04:58

새로운 폴더를 방금 열었다는 것을 보실 수 있습니다.05:04

오른쪽에 파일이 없습니다. 완전히 새로운 프로젝트이고, 새롭게 채팅을 시작할 겁니다. 코서에서는 여러 모델을 사용할 수 있습니다.05:07

코서에서는 여러 모델을 사용할 수 있습니다.05:14

계획 및 에이전트 모드를 지원합니다. 다양한 경우에 유용하지만, 지금은 기본 설정을 사용하겠습니다.05:18

다양한 경우에 유용하지만, 지금은 기본 설정으로 진행하도록 하겠습니다.05:21

지금 시도하려는 것에 대해서는 아무 문제 없습니다.05:26

기본적으로 Grok 모델을 사용하게 됩니다. 몇 가지 선택지가 있습니다.05:29

오푸스를 선택하셔도 됩니다. 제미니를 선택하셔도 괜찮습니다. 그리고 방금 보신 프롬프트는 실제 농담이 아니었습니다.05:34

방금 제가 입력한 그대로 그 프롬프트를 그대로 사용하겠습니다.05:40

슬라이드입니다. 자, 시작해 볼까요? 에이전트가 뭘 만들어낼 수 있는지 한번 봅시다.05:44

몇 분 정도 기다렸고, 제가 에이전트가 실행하고 싶어 했던 뷰 명령을 승인해야 했습니다.05:53

안전한지 확실하지 않아서요. 하지만 저희 에이전트가 생성한 파일들이 많이 있습니다.05:59

저희 에이전트는 모든 작업이 완료되었고 ex.js 애플리케이션이 실행 중이라고 보고했습니다.06:05

브라우저 안에서 'cursed'라는 환경에 있는 건 지금 시점에서는 별로 인상적이지 않지만, 이것이 저희의 시작점입니다. 기반을 다졌으니 이제 유튜브닷컴과 비슷한 무언가를 만들기 시작할 수 있습니다. 저희가 하고 싶은 것은06:12

바로 이것입니다.06:17

저희는 저희가 만들고 있는 애플리케이션들의 인터페이스를, 특히 저희의 경우 유튜브닷컴의 메인 페이지와 같이 캡처하고 싶습니다. 그리고 이를 도와줄 수 있는 텍스트 이미지 모델들이 많이 있습니다.06:25

이러한 작업을 도와줄 수 있는 다양한 텍스트-이미지 모델들이 존재합니다.06:30

최신 GPT 이미지 2.5는 사용자 인터페이스를 구축하는 데 매우 뛰어납니다.06:37

이 모델은 제가 개인적으로 사용하고 추천하는 모델입니다.06:43

하지만 다른 모델들도 많이 있습니다. 구글의 나노 바나나처럼, 제미니를 통해 사용할 수 있는 모델도 아주 좋습니다.06:47

그리고 콴타 이미지와 같은 오픈 소스 모델들도 이 작업을 수행하는 데 충분히 좋은 성능을 낼 수 있을 겁니다.06:53

자, 이제 우리가 만들고 싶은 인터페이스 이미지가 있을 때, 실제로 그 인터페이스를 코드로 변환하고 싶어합니다.06:59

그리고 우리는 사용할 수 있는 다양한 전략들이 있습니다.07:06

이런 작업을 하는 가장 일반적인 방법은 피그마를 사용하는 것입니다.07:09

피그마는 많은 기업과 회사에서 널리 사용되는 서비스입니다.07:13

디자이너와 엔지니어 간의 협업을 가능하게 해줍니다. 그래서 많은 실제 제품에서 매우 인기 있는 전략이라고 할 수 있습니다.07:19

피그마의 대안으로는 판다 개발(Panda Dev)이 있는데, 이는 피그마의 로컬 버전입니다.07:26

자신의 LLM에 연결할 수 있도록 해주는 기능도 있습니다. 또 다른 유용한 도구입니다.07:32

피그마에 얽매이고 싶지 않으시다면, 다른 대안을 사용하실 수도 있습니다.07:36

세 번째 옵션은 외부 애플리케이션 서비스들을 거치지 않고 이미지를 바로 에이전트에게 전달하는 것입니다.07:40

모든 경우에 적용되는 것은 아니지만, 저희 경우에는 아주 훌륭하게 작동할 겁니다.07:48

그리고 제가 앞으로 사용할 전략은 이미지 생성 후 코덱을 거치지 않고 바로 GPT 이미지에서 가져와서 에이전트에 전달하는 것입니다.07:52

이렇게 하면 에이전트에게 이미지를 직접 전달할 수 있습니다.07:56

아니면 그냥 즉흥적으로 진행할 수도 있습니다. 많은 경우에 에이전트에게 무엇을 구현해야 하는지 직접 지시할 수 있습니다.08:01

유튜브와 같이 매우 유명한 서비스의 경우에는, 그리고 모든 큰...08:07

언어 모델들은 유튜브가 무엇인지 잘 알고 있으므로, 그렇게 하는 것은 정말 효과적일 겁니다.08:12

만약 직접 복잡한 UI를 구축하고 있다면, 어떤 경우에는 텍스트가08:17

설명이 항상 최선은 아닐 수 있고, 이미지가 더 도움이 될 수도 있습니다.08:23

저예요08:27

이제 OpenAI의 코덱스로 전환했습니다. 여기서 유튜브닷컴 홈페이지와 비슷한 것을 생성하도록 명령을 내리겠습니다.08:31

유튜브닷컴과 유사한 홈페이지를 생성하도록 지시할 명령어입니다.08:37

제가 사용하고 있는 프롬프트는 다시 한번 매우 간단합니다.08:40

최근에는 프롬프트가 상당히 단순할 수 있기 때문이기도 하고요.08:43

모든 거대 언어 모델은 실제 유튜브닷컴이 무엇인지 잘 알고 있습니다.08:49

제가 말씀드린 지 딱 한 분 뒤에08:53

명령을 내린 직후인데, 유튜브의 버전이 하나 나타났고, 보면 꽤 괜찮아 보여요.08:55

정말 유튜브처럼 보입니다. 고양이 관련 아이콘들이 많이 있어요.09:03

일반적으로 유튜브의 색상과 구조를 따르고 있습니다.09:09

이 정도면 상당히 만족스럽네요. 이제 커서로 다시 돌아갈 수 있겠습니다.09:13

커서로 돌아가겠습니다. 생성된 이미지를 커서 안으로 드래그해 볼게요.09:24

그리고 커서에게 이 버전의 CatTube를 구현하도록 요청할 거예요.09:31

몇 분 정도 걸리겠습니다. 에이전트가 상당히 많은 작업을 해야 하지만, 곧 다시 돌아와서09:35

아마 약 오분 후에 진행 상황을 확인할 수 있을 겁니다.09:42

네, 잠시 기다려야 했지만 대체로 원하던 대로 나왔습니다.09:55

이것은 저희의 CatTube 버전입니다. 몇 가지 오류는 있지만 모든 것이 있습니다.10:00

섬네일도 준비되었고, 위에 카테고리 선택 기능도 작동하는 것을 확인할 수 있습니다.10:07

물론 아무거나 클릭할 수는 있지만, 지금까지는 홈페이지만 처리하도록 요청했습니다.10:14

지금 우리가 할 수 있는 일은 페이지에서 보이는 몇 가지 오류를 수정하도록 요청하는 것입니다.10:18

제가 확인하고 싶은 흥미로운 점이 하나 있는데, 다른 화면으로 넘어가면...10:24

화면의 해상도와 설정들을 살펴보면, 실제로 홈페이지를 구현했을 뿐만 아니라,10:29

다양한 레이아웃으로 구현했는데, 모바일 레이아웃도 포함되어 있습니다.10:33

그래서 제가 지금 보기에 문제가 있는 부분을 에이전트에게 다시 한번 물어보면서 어떻게 해결될 수 있는지 확인해 보겠습니다.10:38

단 하나의 명령으로 저희 애플리케이션 문제를 실제로 해결할 수 있습니다.10:47

지금 훨씬 보기 좋네요. 그리고 만들면서 에이전트가 중요한 기능들을 구현하기도 했습니다.10:51

전반적인 구조는 상위 카테고리를 작동하도록 하는 로직을 만들었습니다.10:58

아바타 섬네일과 동영상을 포함하는 원래 이미지도 가져왔고,11:05

원래 섬네일의 일부를 잘라내서 저희의 것 안에 삽입했습니다.11:10

홈페이지의 어느 정도 작동하는 버전이 나왔습니다. 이제 이 페이지가 준비되었으니 시청 페이지로 넘어가도록 하겠습니다.11:17

Codex로 다시 돌아가서, 이미 세션이 진행 중이니 계속 이어가겠습니다.11:27

지금 ChatGPT에게 워치 페이지를 구현하도록 요청하는 세션입니다.11:31

좋습니다. 저희를 위해 생성된 이미지를 확인해 보겠습니다.11:35

꽤 합리적으로 느껴지네요. 여기 레이아웃이 몇 군데 조금 이상하지만, 저희가 해결할 수 없는 정도는 아니고요.11:38

정말 수정할 수 있으니까, 이제 이 항목을 커서로 옮겨서 시청 페이지를 구현해 보겠습니다.11:45

홈페이지에서 했던 것처럼 거의 동일하게 만들 거예요.11:53

이제 생성한 이미지를 커서에 드래그해서 이 페이지를 구현하도록 요청할 겁니다.11:56

이 부분도 다시 몇 분 정도 걸릴 수 있지만, 에이전트가 이미 상당 부분을 레이아웃으로 구현했고, 관련 요소들이 많기 때문에 그렇습니다.12:04

그런 점들을 고려하면 훨씬 빠르게 진행될 거예요.12:08

재사용할 수 있는 요소들이 많기 때문에, 이번에는 훨씬 빠른 과정이 될 거예요.12:12

자, 몇 분 후에 보시는 것처럼, 실제로 작동하는 시청 페이지가 구현되었습니다.12:20

사이드바가 실제 유튜브와 똑같습니다.12:28

기본적으로 숨겨져 있고, 비디오 플레이어는 있습니다.12:32

지금 당장은 아무 기능도 하지 않지만, 시간이 흘러도 그렇습니다. 하지만 페이지의 나머지 부분은 상당히 괜찮아 보입니다.12:35

지금 당장은 아무런 기능도 수행하지 않지만, 시간이 지나도 마찬가지입니다. 그런데 페이지의 다른 부분들도 꽤 합리적으로 보입니다.12:40

모든 요소들이 다 여기 있습니다. 클릭해서12:44

이 페이지들을 둘러볼 수 있고, 심지어 약간 가짜처럼 보이는 섬네일도 나타나는 걸 확인할 수 있네요.12:47

하지만 시작은 아주 좋네요. 물론 유튜브와는 거리가 멀지만, 점점 비슷해지고 있습니다.12:54

홈페이지도 있고 시청 페이지도 갖춰졌으니, 계속해서 발전시켜 나가도록 하겠습니다.13:00

우리는 잠시 돌아가서 어떻게 애플리케이션을 동적으로 만들지 생각해 봐야 할 것 같아요. 지금은 단순히...13:09

애플리케이션을 동적으로 만들기 위해 약간의 우회 경로를 설정해야 하고, 현재는...13:10

대부분 정적인 웹사이트예요. 몇몇 비디오 페이지를 통해 확인할 수 있는데, 실제와 비슷한 콘텐츠가 있지만, 모두 가짜이고요. 좀 더 현실적으로 만들기 위해서는13:17

이런 과정을 거쳐야 합니다.13:23

그리고 동적으로 만들려면 데이터베이스에 연결해야 합니다. 사용할 수 있는 데이터베이스 옵션은 정말 많습니다.13:29

저희에게는 여러 가지 선택지가 있지만, 저는 거의 모든 것에 대해 포스트그레스(Postgres)를 사용하는 것을 강력하게 추천합니다.13:35

정말 좋은 데이터베이스입니다. 포스트그레스(Postgres)를 사용해야 하는 이유에 대해 자세히 설명하지 않겠지만, 저는13:40

개인적으로 정말 좋아합니다. 그래서 저는 포스트그레스를 사용할 거예요. 그리고 저희의 삶을 더욱 간단하게 만들기 위해, 대신13:46

로컬에 설치하거나, 아니면 도커를 사용해서 작업하는 대신, '수퍼베이스'라고 불리는 서비스를 사용할 거예요.13:52

수퍼베이스는 무료로 체험해 보실 수 있습니다. 데이터베이스 호스팅도 가능합니다.13:57

매우 쉽고 편리하며, 그리고14:02

다양한 도구들을 제공해 줍니다. 저희가 호스팅할 데이터베이스에 연결하기 위해서요.14:04

슈퍼베이스에서 드리즐을 사용하게 될 거예요. ORM을 필수로 사용할 필요는 없답니다.14:09

실제로 그렇게 하셔도 괜찮습니다.14:14

슬로닉 같은 좀 더 낮은 레벨의 것을 사용하거나 심지어 모든 것을 직접 코딩할 수도 있지만, 그렇게는 추천해 드리지 않겠습니다. 저는 유용한 곳에서는 ORM을 사용하는 것을 좋아합니다.14:15

ORM이 유용하게 쓰일 만한 곳에서는 ORM을 사용하는 것을 선호합니다.14:22

자 이제 프로젝트 설정을 시작해 보겠습니다.14:26

가장 먼저 해야 할 일은 데이터베이스를 생성하고 등록하는 것입니다.14:28

슈퍼베이스에 연결해서 저희 프로젝트에 적용하겠습니다.14:33

그래서 제가 미리 새로운 데이터베이스를 생성했습니다.14:39

슈퍼베이스입니다. 이제 이 데이터베이스를 저희 애플리케이션에 연결하고, 이 연결을 사용하여 데이터를 저장하도록 지시할 건데요.14:43

이 연결을 통해 데이터를 저장하도록 하겠습니다.14:49

슈퍼베이스 관리자 계정으로 가서 '연결'을 클릭하면,14:52

데이터베이스를 연결하는 다양한 방법을 보여주는 목록이 제공될 거예요.14:58

ORM을 사용하고 있어서, 이걸 클릭해서 Drizzle을 선택하면 데이터베이스 URL을 제공해 줄 거예요.15:03

데이터베이스 URL과 함께 프롬프트도 제공해주니, 그냥 바로 지시사항을 전달할 수 있겠네요.15:07

제 코딩 에이전트가 이 특정 설정을 사용하도록 하겠습니다.15:14

이제 슈퍼베이스 인터페이스에서 제공된 정확한 프롬프트를 제 에이전트에 붙여넣었습니다.15:21

그리고 구현하도록 요청할 거예요. 완벽하네요.15:27

자, 이제 필요한 데이터베이스를 만들었고, 데이터베이스에 연결했습니다.15:35

모든 것이 잘 작동합니다. 이제 데이터를 마이그레이션할 수 있습니다.15:39

우리가 이 데이터베이스를 사용할 수 있는 애플리케이션을 만들고 관리자 인터페이스도 생성할 수 있을 텐데요, 그러면15:43

데이터를 편집할 수 있도록 할 것입니다. 이 작업이 제게는 상당히 큰 규모로 보입니다.15:48

많은 부분들이 이동해야 할 것 같습니다.15:54

움직이는 부분이 많아서, 단순히 에이전트 전략만 사용하는 것보다 계획 모드로 전환해서 제가15:55

에이전트가 먼저 이 복잡한 작업을 완료하기 위해 필요한 단계를 파악하도록 해볼게요.16:02

보시는 것처럼 에이전트가 우리에게 몇 가지 질문을 하고 있습니다.16:11

첫 번째 질문은 어떤 종류의 인증 방식을 사용할지 여부입니다.16:14

실제 프로젝트에서는 당연히 그런 것들이 있겠지만, 인증 부분은 이 프로젝트의 조금 뒤에 다루도록 하겠습니다.16:18

좋습니다. 그럼 이제 에이전트가 저희를 위해 계획을 세워줬으니, 빠르게 이 계획을 검토해 보겠습니다.16:26

그리고 보시는 것처럼, 저희를 위한 스키마를 생성했고, 이 데이터베이스의 중요한 부분들을 모두 검토했습니다.16:34

꽤 상당한 양의 추론 과정을 거쳤고, 기본적으로...16:40

저희에게 매우 합리적인 계획을 제시해 주셨고, 제가 원했던 모든 것을 다루는 것 같아서요.16:46

제가 에이전트가 이 계획을 진행하도록 허락하겠습니다. 왜냐하면 여기 있는 모든 것이 말이 되기 때문입니다.16:53

저에게 말씀드리자면, 제가 요청한 모든 사항이 다 포함되고 있습니다. 실제 데이터베이스 객체를 만들 예정이고요.16:58

현재 정적으로 포함되어 있는 데이터를 이용해서 해당 객체들을 채워 넣을 것입니다.17:03

웹사이트고요, 이 데이터를 둘러볼 수 있는 인터페이스를 만들 거예요.17:08

원한다면 수정하고 더 추가할 수도 있습니다.17:13

에이전트가 데이터 처리하는 것을 마쳤고, 확인해야 할 두 가지 사항이 있습니다. 우선 웹사이트는 동일하게 운영되고 있고 계속 클릭할 수 있습니다.17:20

있습니다.17:24

한 번 살펴보니 데이터는 그대로 있는 것 같아요. 이전과 크게 달라진 점은 없어 보입니다.17:30

이제 에이전트가 생성해 준 새로운 URL로 이동해 보겠습니다.17:35

확인해 볼 수 있습니다.17:43

대시보드가 있고, 보고서에 나타난 데이터를 살펴보면 저희의 모든 비디오를 확인할 수 있습니다.17:44

이 비디오들을 가서 수정할 수도 있습니다.17:52

새로운 비디오를 만들 수도 있습니다.18:00

이제 댓글로 다시 돌아가 볼까요? 모든 댓글이 아직 여기 있네요. 이전에는 고정되어 있던 데이터들이 이제 동적으로 변해서 사용 가능합니다.18:04

우리가 편집할 수 있도록 말이죠. 하지만 이 데이터가 실제로 저희 데이터베이스에 존재하는지 한번 더 확인해 보겠습니다.18:11

슈퍼베이스로 다시 돌아가서 데이터베이스 안에 무엇이 있는지 확인해 보겠습니다.18:16

실제로 테이블 편집기로 들어가면 확인할 수 있네요.18:23

슈퍼베이스에서 댓글 테이블을 열어보면요, 모든 데이터가 여기에 있습니다.18:28

비디오로 넘어가 볼까요? 모든 데이터가 여기에서 확인 가능합니다.18:37

에이전트가 다른 테이블 몇 개도 생성했습니다.18:41

비디오 관련 객체들이 모두 여기 표현되어 있고, 카테고리들도 있습니다.18:44

여기에서 모든 채널 정보도 확인하실 수 있습니다.18:48

기존에는 고정적으로 할당되었던 데이터를 기본적으로 데이터베이스로 옮겼습니다.18:52

지금 당장은 도움이 되지 않지만, 훨씬 더 멋진 일을 하기 위한 중요한 단계입니다.18:58

이제 거대 언어 모델과 생성형 인공지능 시대에 살고 있기 때문에, 많은 것을 활용할 수 있습니다.19:04

저희 웹사이트에 있는 콘텐츠를 시작하고 정말 멋지고 놀라운 영상들을 만들 수 있도록 다양한 도구들을 활용할 수 있습니다.19:11

그 전에, 클라우드플레어를 연결하겠습니다.19:18

세 번째 서비스 제공 업체이고, 안타깝게도 이 서비스는 유료로 이용해야 합니다.19:23

하지만 저희 프로젝트에서 다뤄야 할 두 가지 매우 중요한 문제를 해결해 줍니다.19:29

첫 번째는 호스팅된 이미지입니다. 기술적으로는 필수는 아니에요.19:34

직접 처리하실 수도 있지만, 콘텐츠 전달 능력이 뛰어난 외부 업체를 이용하는 것이 좋습니다.19:38

이미지 전달 네트워크를 통해 이미지를 제공하고 이미지 리사이징을 지원하며,19:43

정말 빠르고 효율적으로 제공할 수 있다는 점이 아주 멋있습니다.19:48

아주 인기 있는 서비스입니다. 대부분의 대기업들이 이미지 호스팅으로 사용하고 있습니다.19:51

하지만 저희에게는 영상 호스팅과 스트리밍이 훨씬 더 큰 문제입니다.19:57

실제 유튜브는 백엔드에서 엄청난 규모의 시스템으로, 비디오를 처리하고20:02

비디오를 다시 인코딩하고, 분할하고, 메타데이터를 추출하는 등 전반적인 작업을 수행할 수 있습니다.20:08

다양한 플랫폼에서 효율적으로 전달하는 방식이 중요합니다.20:14

저희도 충분히 만들 수 있겠지만, 지금 하고 있는 프로젝트보다 훨씬 더 큰 규모의 작업이 될 겁니다.20:18

지금은요.20:25

그래서 저희는 비디오를 제공하고 재생하는 데 클라우드플레어를 이용할 겁니다.20:25

이것은 저희 애플리케이션을 상당히 단순화하고 더 빠르게 완료하는 데 도움이 될 것이기 때문입니다.20:32

다음 단계에서 저희 애플리케이션과 연결할 예정이지만, 실제로 크게 할 일은 없을 것입니다.20:39

저는 이미 클라우드플레어를 설정했고, 필요한 권한과 토큰들을 프로젝트에 이미 가져왔습니다.20:45

이제 에이전트들에게 클라우드플레어를 사용하도록 요청할 것인데요. 데이터를 채워넣어 줄 겁니다.20:50

이것은 다음 흥미로운 과정입니다. 데이터를 생성하게 될 거예요.20:56

실시간으로 고양이 영상을 만들게 될 겁니다.21:00

어떻게 이 고양이 영상을 만들 계획인가요? 필요한 것 세 가지가 있습니다.21:04

제가 개인적으로 유용하다고 생각하고 좋아하는 부분을 설명드리겠습니다.21:08

세 가지 구성 요소가 필요합니다.21:13

큰 언어 모델이 영상 제목과 전체적인 아이디어를 생성하는 데 도움을 줄 것입니다.21:14

이것에 대한 메타데이터 같은 것도 필요할 거예요.21:21

기본적으로 고양이 영상의 가능한 변형을 만들어낼 거예요.21:22

이미 존재하는 것을 활용할 겁니다. 그리고 이미지 모델을 이용해서 썸네일을 생성하게 될 거예요.21:28

이 썸네일은 비디오에 대한 LLM에서 만든 설명을 기반으로 만들어질 거에요.21:33

그리고 나서 이 섬네일을 이용해서 영상을 생성할 거예요.21:38

물론 기술적으로는 섬네일 없이도 만들 수 있지만, 저는 섬네일이 더 마음에 들어요.21:43

이런 방식을 선택하는 이유는 결국 필요한 섬네일을 얻을 수 있기 때문입니다.21:48

그리고 저희가 보게 될 내용에 대한 더 많은 제어권을 가질 수 있습니다. 이를 위해.21:51

저는 다양한 모델들을 모아놓은 펠(fel.ai)을 사용할 예정인데, 텍스트와 비디오 모두를 지원하는 아주 유용한 플랫폼입니다.21:56

비디오도 지원합니다.22:03

그리고 펠 안에서 오픈루터를 사용할 거예요.22:05

이 부분은 조금 복잡할 수 있는데, 오픈루터는 사실 독립적인 프로젝트입니다.22:08

OpenRouter는 직접 사용하실 수도 있지만, 제가 fel을 통해 사용하는 이유는 하나의 API 키로 간편하게 사용할 수 있고,22:13

어디든 접근할 수 있기 때문입니다.22:20

그래서 저희는 오픈루터와 GPT 이미지 2.5 모델을 사용하여 이미지를 생성할 예정입니다.22:21

이미지를 생성할 것입니다.22:29

섬네일도 있고, 비디오 생성에는 H3를 사용할 예정입니다. 특히 File.ai에서 개발한 H3 Max 버전을 사용하는데요.22:30

터보 버전이 있어서 최대 분량의 영상을 생성할 수 있습니다.22:36

15초면 정말 빠르고 저렴합니다. 영상 생성은 여전히 비용이 많이 들지만, 이렇게 하면22:43

정말 저렴한 가격에 멋진 고양이 영상을 얻을 수 있습니다. 이제 영상 제작 구현으로 넘어가 보겠습니다.22:49

파이프라인에서 데이터베이스에 현재 저장되어 있는 기존 데이터를 삭제하고, 가짜 사용자, 채널, 댓글을 생성해야 합니다. 그리고 비디오도 생성해야 하는데, 비디오는 조금 더 작업이 필요합니다.22:56

비디오의 경우 좀 더 복잡한 과정이 필요하기 때문입니다.23:03

저희는 둘 다 메타데이터가 필요합니다. 영상 제목, 섬네일 설명, 그리고 영상 설명을요.23:08

섬네일을 생성하고 영상을 만들 때 사용될 영상에 대한 설명이 필요하고, 그다음에 저희는 이것들을 생성해야 합니다.23:13

썸네일 이미지들과 함께, H3 모델을 사용하여 실제 비디오를 생성해야 합니다.23:18

Cloudflare에 업로드하고, 이 비디오와 이미지가 웹사이트에서 사용되고 있는지 확인해야 합니다.23:23

이 경우에는 플랜 모드를 거치는 것이 정말 좋을 것 같아요. 많은 작업이 진행될 예정이기 때문에,23:30

에이전트가 무언가를 만들기 전에 제가 먼저 검토하고 싶습니다.23:36

아마 눈치채셨을 거예요. 제가 아직 같은 채팅 세션을 사용하고 있다는 것을요. 이 경우에는 저희가 하고 있는 작업이 하나의 연속적인 프로젝트라는 점이 의미가 있습니다.23:41

저희가 진행하는 일이 계속 이어지는 하나의 프로젝트이기 때문에 이런 방식이 적절하다고 생각합니다.23:47

저희는 고양이 튜브를 만들고 있습니다. 지금 당장은 중요하지 않지만, 이전에 일어났던 맥락들이 에이전트가 어디로 향하고 있는지 이해하는 데 도움이 될 수 있습니다. 아직 많은 맥락 정보가 남아 있고,23:51

에이전트는 여전히 충분한 정보를 가지고 있습니다.23:58

앞으로도 계속 같은 채팅을 사용하는 데 특별한 이유가 없다고 생각합니다.24:03

좋습니다, 현재 계획이 무엇인지 다시 한번 살펴보겠습니다. 이 다이어그램은 제가 말씀드린 내용을 잘 반영하고 있어서 정말 마음에 듭니다.24:09

영상 제작의 전체 과정에 대해 말씀드린 내용을 시각적으로 잘 나타내고 있어서 보기 좋네요. 예상하신 대로입니다.24:16

우리가 12개의 영상을 만들기로 확정했죠. 정확히 그 개수의 영상이 필요합니다.24:21

현재 가지고 있는 내용이지만, 이미지와 영상 특히 영상 제작은 비용이 많이 들 수 있으므로 몇 장의 이미지부터 시작하는 것이 합리적이라고 생각합니다. 에이전트가 선택한 모델들을 보니 그렇게 보이네요.24:26

확인했습니다.24:32

가격도 합리적이어서 걱정 없습니다. 클라우드플레어 호스팅을 잘 선택했네요, 다행입니다.24:39

좋습니다. 비디오 재생을 위해 스키마를 업데이트해야 해서 아주 적절합니다.24:45

스크립트를 작성해서 데이터도 채워 넣을 수 있을 거예요. 스크립트가 데이터를 채울 겁니다.24:53

네, 완벽합니다. 모든 것이 괜찮아 보이니까 이제 개발을 시작할 수 있겠네요.24:58

다시 돌아왔고, 섬네일이 변경되었어요. 하나를 들어가서 무엇을 생성했는지 확인해 보면 완전히 AI가 만든 영상들이 있습니다.25:10

그것들을 살펴봅시다.25:14

그리고 지금 화면에서 보시는 모든 것들이 또 다른 인공지능이 생성한 영상입니다.25:21

정말 멋지네요.25:22

지금까지는 다섯 초로 제한되지만, 개선할 수 있습니다. 해상도도 향상시킬 수 있을 거예요.25:29

하지만 지금은 테스트 실행을 위해 이 정도면 괜찮습니다.25:34

정말 합리적인 것 같아요.25:38

지금은 모의 데이터를 사용하고 있지만, 실제 웹사이트처럼 보이기 시작했어요.25:41

지금 사용자들이 아무것도 업로드하지 못하게 하고 있는데, 지금 배포한다면 완전히 작동하는25:48

CAD2 버전이 될 겁니다.25:53

하지만 유튜브에서 하는 정말 흥미로운 것들이 몇 가지 있는데, 저희는 현재 완전히 놓치고 있습니다. 그리고 저는 이 두 가지에 집중하고 싶습니다.25:55

지금 당장 이 두 가지를 중점적으로 다루고 싶어요.26:00

먼저 검색 기능이 있고, 다른 하나는 관련 동영상입니다.26:04

그럼 어떻게 검색 기능을 구현할 건가요?26:09

추천 동영상 말이죠? 음, 속임수를 써서요. 실제 유튜브와 같은 서비스에서는 엄청난26:14

팀들이 이 두 가지 문제를 함께 처리합니다. 그리고 검색과 관련 영상 또는 추천 영상은 많은26:20

많은 서비스에서 검색과 추천은 생존을 좌우하는 중요한 요소입니다.26:26

정확히 시청자가 보고 싶어 하는 영상을 추천할 수 있는 것은,26:30

시청하고 싶어하시는 영상은 유튜브와 같은 서비스가 할 수 있는 가장 중요한 일 중 하나일 가능성이 높습니다.26:33

현재 전체 규모로 구현할 여력이 없기 때문에, 다른 방식으로 진행해 볼 예정입니다.26:37

더 작게 만들어야 하고, 그걸 고려해야 합니다. 저희가 실제로 무엇을 하고 있는지 생각해야 해요. 비디오를 검색할 때,26:42

텍스트 검색어와 비슷한 것을 찾으려고 시도하시잖아요.26:48

그리고 우리가 큰 그림으로 보면, 그게 바로 비디오입니다.26:52

하지만 비디오란 무엇일까요? 비디오를 제목이라고 생각할 수도 있습니다.26:57

비디오의 제목이라고 생각할 수도 있습니다. 비디오를 썸네일이나 더 긴 스크립트로 보는 것도 가능합니다.27:01

아마도 자막일 수도 있고, 비디오 자체일 수도 있습니다. 따라서 매우 다양한 구성 요소들이 있습니다.27:07

사용할 수 있는 비디오, 그리고 아주 간단한 검색 방법은 예를 들어 제목을 그대로 사용하는 것입니다.27:13

만약 검색창에 '고양이'라고 입력하면, 그 단어가 포함된 모든 제목의 비디오를 찾을 수 있습니다.27:19

하지만, 그건 상당히 단순화된 접근 방식입니다. 왜냐하면 만약 '고양이'라고 입력한다면, 호랑이나 표범이 포함된 영상은 절대 찾을 수 없기 때문이죠.27:25

우리는 좀 더 똑똑한 방법이 필요합니다.27:32

그리고 다시 한번, 어떤 것을 이용해서 영상의 내용을 파악할까요?27:38

이번 프로젝트에서 제가 처리할 방식은 두 가지 콘텐츠를 고려하는 것입니다.27:42

텍스트에 대해 생각하고, 영상 자체의 섬네일도 고려해 보겠습니다.27:48

섬네일은 당연히 전체 영상을 나타내는 것은 아니지만, 매우 좋은 정보를 제공합니다.27:53

그 영상이 무엇에 관한 내용인지 나타내는 표현이라고 생각하시면 됩니다.27:57

이제 이론적인 부분에 대해 조금 이야기해야 할 것 같아요. 이해하려면 필요하기 때문입니다.28:02

그리고 유사성을 계산하는 방법과 함께, 임베딩이라고 불리는 것에 대해 이야기해 보겠습니다.28:07

임베딩 자체를 컴퓨터에 표현되는 것으로 본다면,28:14

그냥 긴 숫자 목록일 뿐입니다. 그리고 이 숫자들은 아주 구체적인 의미를 가지고 있습니다.28:20

하지만 그 의미는 우리가 인간으로서 쉽게 파악할 수 없는 것입니다.28:27

그래서 임베딩을 숫자 목록이라고 생각하시면 됩니다.28:30

모든 제목은 임베딩을 가지고 있고, 모든 비디오도 임베딩을 가지고 있습니다.28:35

그럼 질문이 되는데요, 이 숫자들을 어떻게 만들고, 어떻게 활용하고, 왜 우리가 그걸 필요로 하는 걸까요?28:40

글쎄요, 단순히 텍스트 자체에 대해 생각해 본다면, 임베딩은 그렇게 만들어집니다.28:47

사람들이 이해하기 쉬운 비슷한 단어들을 가져와서 가까이 배치하면 그렇게 만듭니다.28:54

단어들이 서로 가깝다면, 숫자 표현도 매우 가깝게 나타납니다.28:59

의미가 매우 다른 단어들은 어느 정도 거리를 두게 됩니다.29:04

텍스트와 이미지를 모두 사용하게 될 것입니다.29:08

여기서 모델을 활용할 수 있는데, 이 모델들을 멀티모달 모델이라고 부릅니다.29:12

텍스트와 이미지 모두를 동일한 임베딩 공간에 표현하는 임베딩을 생성합니다.29:17

즉, 사자의 이미지가 고양이 라고 쓰여진 텍스트 옆에 있고, 또 고양이의 이미지는29:24

호랑이 라는 단어와 가깝게 위치한다는 뜻입니다.29:31

그러므로 이것은 매우 유용하며, 이러한 것들이 함께 있음을, 그리고 다른 것들은 멀리 떨어져 있음을 말할 수 있게 해줍니다.29:34

서로 연결되어 있는 반면, 분리되어 있고 멀리 떨어져 있는 것을 나타낼 수 있습니다.29:39

기술적인 측면에서 이러한 유사성을 처리하기 위해, 저희는 사용합니다.29:43

이 긴 숫자 목록은 실제로는 벡터이기 때문에 코사인 유사도라는 것을 활용합니다.29:48

이 벡터들 사이의 각도를 알아내는 것은 이들이 얼마나 가깝거나 멀리 떨어져 있는지 이해하는 데 도움이 됩니다.29:54

텍스트나 썸네일 각각에 대해 임베딩을 만든다면요,30:01

어떤 것들이 서로 유사한지 파악하고 그 기준으로 정렬할 수 있을 거예요.30:08

유사도 기반으로 검색이 가능합니다. 예를 들어 고양이 영상이 있다면, 다른 관련 영상들을 모두 찾을 수 있습니다.30:13

섬네일의 유사성만으로도 해당 영상과 매우 유사한 다른 영상들을 찾을 수 있습니다.30:18

단순화하는 것은 확실하지만, 정말 잘 작동할 거예요. 이제 해결해야 할 두 가지 문제가 있습니다.30:25

이 임베딩들을 어디에, 어떻게 저장해야 하는지, 그리고 당연히 어떻게 계산해야 하는지를 알아내야 합니다.30:31

저장 기간을 고려했을 때 말이죠,30:37

일반적인 데이터베이스에 저장하는 것은 권장되지 않았습니다. 가능은 하지만 효율적으로 유사성을 찾아보려면 사소하지 않은 수학 연산이 필요하고, 기존의 데이터베이스는30:41

그렇게 하기 어렵기 때문입니다.30:47

그렇게 하기가 어려웠습니다. 그래서 사람들은 파인이나 바바와 같은 외부 전문 데이터베이스를 사용했습니다.30:55

다행히도 2026년에는 포스트그레스가 따라잡았고 pgvector라는 특별한 확장이 있습니다.31:01

정말 놀랍게 잘 작동합니다. 그래서 저희는 기존 데이터베이스에 임베딩을 저장할 수 있습니다.31:08

다른 구성 요소를 도입할 필요 없이, 기본적으로 포스트그레스만으로 모든 것을 사용할 수 있게 되었습니다.31:14

서로 관련 있는 영상들이 있을 때 더 잘 보이도록 몇 편 더 영상을 생성해 달라고 에이전트에게 요청했어요.31:25

슈퍼 히어로 고양이 영상을 열어봤는데, 보시는 것처럼 가장 관련성이 높은 것은 또 다른 슈퍼 히어로 영상이에요.31:32

스포츠 영상으로 넘어가면, 상위 두 개 영상이 내용과 시각적인 스타일 모두 비슷합니다.31:39

내용 면에서도, 그리고 시각적인 스타일 면에서도요.31:47

그래서 이 영상은 흑백 영화 같은 느낌이네요.31:50

좀 더 화려한 스타일, 예를 들어 패션쇼 영상을 보면, 또 다른 애니메이션 스타일의 영상이 나오는 걸 알 수 있습니다.31:53

이 영상은 켄이 돋보기를 들고 있어서 흥미롭네요. 그리고 가장 관련 있는 영상도 돋보기 영상이에요.32:05

가장 관련있는 영상은 또 다른 돋보기 영상입니다.32:10

지금부터 검색 기능을 구현해 보고 싶습니다. 왜냐하면 현재는 관련 동영상들만 보여주는 상태거든요.32:13

검색 기능이 있으면 더 이상 단순히 두 동영상 간의 유사성 비교가 문제가 아니게 됩니다. 저희 경우에는요.32:19

섬네일과 섬네일인데, 텍스트와 섬네일을 연결하는 방식에 차이가 있습니다.32:25

여기서 발생하는 복잡성은 더 이상 미리 채워 넣지 않기 때문입니다.32:28

이 데이터를 백엔드에서 처리하고 있었는데, 실제로는 사용자 쿼리를 받아 빠르게 임베딩으로 변환해야 합니다.32:34

그런 다음 빠르게 조회 작업을 수행할 수 있습니다.32:38

그래서 이것이 우리가 다음에 처리할 작업입니다.32:41

이제 사용자의 질문을 받아 검색 기능을 구현하도록 에이전트에게 요청해 보겠습니다.32:43

제공된 내용을 기반으로 클립 임베딩으로 변환하고, 가장 유사한 비디오를 찾는 과정입니다.32:50

네, 에이전트가 모든 것을 구현하는 데 몇 분 정도 걸렸습니다. 이제 어떻게 작동하는지 확인해 보겠습니다.33:02

누아르 스타일로 검색해 볼게요. 완벽하네요.33:07

검색 결과로 검은색과 흰색 이미지가 많이 나오는 것 같아요.33:11

이거 정말 마음에 드네요.33:15

네, 이 건 확실히 누아르 같아요. 그럼 슈퍼히어로 쪽은요?33:20

네, 다시 한번 말씀드리지만 제 생각에는 이것은 정말 슈퍼히어로처럼 보입니다.33:30

스포츠는 어떻습니까?33:36

다시 한번 말씀드리지만, 검색 기능이 완전히 구현된 것 같습니다.33:42

관련 동영상도 있고, 검색 기능은 작동하고 있으며, 동영상도 표시되고 있습니다.33:46

재생도 되고, 섬네일도 있고, 모바일 데이터도 있습니다. 유튜브와 상당히 비슷한 수준으로 보입니다.33:51

아직 몇 가지 부족한 부분이 있습니다. 지금부터 보여드릴 내용은 저희의 관리자 인터페이스인데,33:58

누구나 사용할 수 있도록 열려 있습니다. 저희는 가짜 사용자 계정을 만들었습니다.34:04

원하는 대로 무엇이든 구독할 수 있습니다. 다음에는 두 가지 작업을 진행할 것 같습니다.34:11

먼저, 모든 것을 조금 더 다듬고, 그리고 두 번째로 아주 간단한 인증 방식을 도입할 예정입니다.34:16

BetterOS라는 서비스를 사용할 텐데요, 이건 또 라이브러리 세트이기도 합니다.34:23

그래서 서비스도 사용하실 수 있고, 완전히 독립적인 라이브러리만으로도 사용할 수 있습니다.34:28

그리고 저희가 할 일은, 단순히 해당 라이브러리들 자체만 필요합니다.34:31

자, 이제 에이전트에게 몇 가지 정리하고 인증을 제대로 맞추도록 요청해 보겠습니다.34:35

매우 간단한 프롬프트를 사용하고 있습니다.34:43

제가 말씀드린 내용을 그대로 구현하도록 LLM, 즉 에이전트에게 요청할 예정입니다.34:46

여기에는 할 일이 많습니다. 따라서 계획 모드를 거치는 것이 합리적일 수 있지만, 저는 그냥 사용할 것 같습니다.34:52

에이전트 모드를 사용할게요. 해야 할 일이 많긴 하지만, 꽤 간단해 보이고 이상한 제약도 없어 보이거든요.34:58

좋네요, 인증을 성공적으로 구현했나 봐요.35:12

페이지에 몇 가지 변경 사항이 있어서 로그인해야 한다는 것을 알게 되었어요.35:17

만약 제가 관리자 인터페이스로 직접 이동하려고 하면 화면에 나타날 거예요.35:21

인증 로그인 화면이 나타납니다.35:27

테스트를 위해 저희 에이전트가 특별히 만들어준 계정을 사용해 보겠습니다.35:29

그리고 로그인할 수 있는지 확인해 보겠습니다.35:35

네, 로그인은 가능합니다. 대시보드에 접속할 수도 있습니다.35:39

웹사이트로 가서 몇 개의 동영상을 클릭해 보고 구독 버튼을 한번 눌러보도록 하겠습니다.35:43

이제 정상적으로 작동하는 것 같습니다. 구독 목록으로 가 보겠습니다.35:50

그리고 실제로 저희가 이전에 구독했던 몇몇 채널의 동영상도 가지고 있습니다.35:55

그래서 점점 일반적인 웹사이트처럼 되고 있네요.35:59

하지만 하나 빠진 부분이 있네요. 그리고 이건 정말 저를 좀 답답하게 만드는 부분이에요.36:03

일반 유튜브를 사용하시면 아시겠지만, 밝은 모드가 실제로 있습니다.36:08

이렇게 밝은 모드만 있고 다크 모드가 없다는 건 정말 큰 실수인 것 같아요. 자, 이제36:13

조금 더 다듬고 다크 모드를 추가해서 저희 웹사이트가 정말 멋지게 보이도록 해봐요.36:19

프롬프트 하나로 에이전트에게 다크 모드를 추가해달라고 요청했더니, 완전히 구현할 수 있었던 것 같습니다.36:33

몇 번 토글해보니 아주 괜찮아 보이네요.36:38

아무것도 수정할 필요가 없었네요.36:45

시계 페이지도 아주 좋습니다. 여기 있는 모든 것이 이해가 되네요.36:48

여기 이 작은 정보 조각도 색깔이 변하는 것 같아요.36:54

정말 멋지네요. 옛날에 이거 있었다면 좋았을 텐데.37:00

다크 모드에서 유튜브가 제대로 보일 수 있도록 실제로 확인하는 데 몇 달이 걸렸기 때문입니다.37:05

지금은 정말 5분이면 됩니다. 그래서 모두 아주 좋고, 이제 전 세계에 무엇을 보여줄 준비가 되었다고 생각합니다.37:11

우리가 계속 만들어왔는데요, 아직 많은 부분이 빠져있고 저희 영상 업로드 기능도 없지만, 37:17

저희 영상들이 아직 AI로 생성된 것이기 때문에 버전의 꽤 괜찮은 근사치라고 생각합니다.37:23

유튜브가 어떻게 보일지 보여주는 것 중 하나이고, 이걸 온라인에 올리고 싶습니다. 그래서 저희는 여러 가지 옵션이 있지만, next.js 기반으로 구축하고 있기 때문에 매우 간단한37:29

방법을 가지고 있습니다.37:34

이걸 호스팅하는 방법은 베르셀을 사용하는 건데요, 베르셀은 넥스트.제이에스가 있는 회사라서 당연히 넥스트.제이스 프로젝트를 배포할 수 있는 아주 간단한 방법을 제공합니다.37:40

베르셀에서 넥스트.제이스 프로젝트를 배포하는 것은 매우 간단한 방법이죠.37:47

하지만 중요한 한 가지가 빠졌네요. 일반적으로 Vercel에 Next.js 애플리케이션을 배포하는 방법은 GitHub를 사용하는 것입니다.37:51

그리고 저희는 프로젝트를 생성한 적이 없었고요.37:57

저희는 이전에 GitHub을 사용한 적이 없었습니다. 사실상 저희 컴퓨터에 있는 로컬 폴더였어요.38:02

자, 이제 코드를 GitHub에 넣고 Vercel과 연결해 보겠습니다.38:06

그래서 저는 GitHub로 옮겼고, 저희를 위한 저장소를 만들었어요.38:15

하지만 문제가 있어요. 제가 이 저장소에서 폴더를 초기화한 적이 없네요.38:19

사실 저는 Git을 잘 다루지 못해서 여기서 뭘 해야 할지 잘 모르겠어요.38:24

그럼 저희가 에이전트에게 모든 것을 대신 해달라고 부탁하는 건 어떨까요?38:28

에이전트가 코딩뿐만 아니라 거의 모든 일을 할 수 있는 것도 있고요.38:32

제가 에이전트에게 코드를 깃허브 안에 넣어달라고 요청했어요.38:45

그리고 말씀드리지만, 제가 이 컴퓨터에 설정해 놓은 환경 때문에 시간이 좀 걸렸습니다.38:49

여러 개의 깃허브 계정과 여러 버전의 커서가 다양한 저장소와 통신하는 상황이었으니까요.38:54

그래서 연결하려는 이 프로젝트의 특정 버전을 제가 사용하고 싶었던 GitHub 계정에 연결할 수 있도록 여러 가지를 알아내야 했답니다.38:59

정말 많은 것들을 처리해야 해서 가능하게 됐어요.39:04

제가 직접 알아내려고 했다면, 아마 문서를 몇 시간 동안 읽었을 거예요.39:09

하지만 실제로 불과 다섯에서 일곱 분 정도밖에 걸리지 않았습니다.39:14

이제 제가 GitHub에 가서 파일들이 실제로 있는지 확인할 수 있겠네요.39:18

네, 모든 파일이 저희 GitHub에 있습니다.39:23

이제 이 프로젝트를 버셀에 연결하기 시작할 준비가 되었어요.39:26

지금 바로 버셀로 전환하겠습니다.39:31

그리고 제 깃허브 저장소는 제가 이전에 깃허브로 로그인하면서 계정을 연결했기 때문에 이미 인식되었습니다.39:35

그래서 이제 가져오기를 진행하겠습니다.39:41

그리고 저희 애플리케이션을 완전히 설정하기 위해 제가 해야 할 일은 단 두 가지뿐이었습니다.39:50

애플리케이션 프리셋으로 가서 Next.js 애플리케이션을 선택했고, 그리고 그 안에 들어갔습니다.39:53

환경 변수들을 가져왔고, 이미 프로젝트에 있던 .n 파일들도 불러왔습니다. 왜냐하면 그것은39:59

깃허브에 커밋되는 부분에는 포함되지 않기 때문입니다. 거기에 중요한 정보들이 담겨있어서, 그걸 공개해서는 안 되거든요.40:05

깃허브 저장소에 포함시키지는 않지만, 웹사이트를 완전히 배포하는 데는 꼭 필요합니다. 그래야 어디에 연결해야 하는지, 어떤 데이터베이스를 사용해야 하는지 등 개발 과정에서 추가했던 모든 것들을 알 수 있습니다.40:09

알 수 있도록 도와줍니다.40:15

자 이제 이 애플리케이션을 배포 진행하겠습니다.40:21

배포 후에 문제가 발생한 것 같습니다.40:28

제 서비스 미리보기가 제가 예상하는 웹사이트를 보여주지 않는 것 같습니다.40:32

에러율이 백 퍼센트인 것을 보니 심각하게 잘못된 것 같습니다.40:37

베르사유에서 로그를 확인해서 조금 디버깅해 보겠습니다.40:43

제가 시도한 페이지 아무것도 제대로 작동하지 않는 것 같습니다.40:47

로그를 확인해보니, 특정 모듈을 찾지 못한다고 불평하고 있네요.40:53

노드에서 Onyx Runtime 모듈을 찾지 못하는 것 같습니다.40:59

실제로 저희는 클립 임베딩을 생성하기 위해 Onyx 런타임을 사용하고 있습니다.41:02

이것은 좋지 않은 상황입니다. 왜냐하면 이 모듈에 대해 특정 가정을 했기 때문입니다.41:06

사용 가능할 예정이지만, Versil이 작동하는 방식과 배포되는 방식은 저희가 처음 설정했던 것과 완전히 호환되지 않습니다.41:10

처음에 우리가 했던 초기 설정과는 완전히 호환되지 않기 때문입니다.41:14

음, 에이전트에게 이 문제를 해결하도록 요청할 겁니다.41:18

그래서 오류 내용을 복사해서 에이전트로 옮긴 다음, 수정하도록 요청해 보겠습니다.41:21

다시 한번 말씀드리지만, 제가 사용한 프롬프트는 매우 간단했습니다. 실제로 제가 경험했던 오류들을 복사해서 붙여넣기 했습니다.41:35

그리고 약간의 맥락만 추가했어요.41:42

에이전트에게 이것이 Vercel 배포이고, GitHub PR을 생성해 달라고 말씀드렸습니다.41:44

변경 사항을 실제로 배포하기 전에 검토하고 싶어서요.41:50

잠시 시간이 걸렸지만, 이제 솔루션이 나왔네요. 그럼 GitHub으로 가서 실제로 생성된 내용을 확인해 보겠습니다.41:54

좋습니다. 에이전트가 만들어 놓은 풀 리퀘스트가 이미 생성되었네요.42:03

한번 확인해 보겠습니다. 그리고 여러 검사를 거쳤습니다.42:08

빌드를 미리보기로 보면 베르셀이 저희 변경 사항에 대해 어떻게 생각하는지 확인할 수 있습니다.42:13

자, 한번 보십시오. 이번에는 웹사이트가 제대로 로드된 것 같습니다.42:23

그럼 이제 GitHub로 돌아가서 이 풀 리퀘스트를 병합해 보겠습니다.42:27

자, 그럼 버셀로 돌아가서 어떻게 보이는지 한번 살펴볼까요.42:37

어머, 잘 됐네요. 수정 사항을 배포했더니 배포도 성공했습니다.42:51

자, 열어보도록 하겠습니다. 무엇이 있는지 한번 살펴볼까요?42:57

축하드립니다. 이것은 저희의 아주 작은,43:01

하지만 정말 귀엽고 고양이 친화적인 유튜브 버전이네요.43:05

그냥 동영상 하나를 클릭해 볼까요? 제가 마음에 드는 걸 골라보겠습니다.43:09

정말 굉장하네요.43:14

더 자세한 대화에 관심이 있으시다면요.43:23

유튜브의 엔지니어링 역사나, 오늘날 이런 것을 어떻게 만들 수 있는지, 질문이 있으시거나, 유튜브 초기 시절의 에피소드를 듣고 싶으신 분들은43:26

ByteByteGo에서 저를 찾아보실 수 있습니다.43:31

제가 또 다른 실제 개발자들과 함께 업계 경험을 공유할 때요.43:37

제 이름은 마이크입니다. 오늘 이렇게 함께하게 되어 기뻤고, 새로운 유용한 것을 배우셨기를 바랍니다.43:41

안녕히 계세요.43:47