인공지능이 콘텐츠 제작 방식을 완전히 바꿔놓았습니다. 이제 중력 무시 기술로 멋진 애니메이션, 제품 시연 영상은 물론이고, 영상 편집까지 완전히 자동화할 수 있습니다.00:00

이건 방금 출시된 새로운 기술, 레모션을 활용하는 건데요, 이걸로 모든 게 바뀔 겁니다.00:12

그리고 이번 영상에서는 여러분이 실제로 사용할 만큼 훌륭한 걸 어떻게 만드는지 보여드릴 거예요. 게다가, 99%의 사용자들이 존재조차 모르는 숨겨진 기능들도 함께 보여드릴 거랍니다.00:17

AI로 영상을 편집해서 시간을 절약하고 비즈니스를 더욱 성장시킬 수 있어요. 혹시 제가 누구인지 모르시는 분들을 위해 말씀드리자면, 제 이름은 잭 로버츠입니다. 저는 이전에 6만 명 이상의 고객을 가진 기술 스타트업을 만들고 성공시켰습니다.00:28

그리고 지금은 7자리 수 AI 자동화 사업을 하고 있어요. 그래서 아직 안 하셨다면 커피 한 잔 드시고 바로 시작해볼까요?00:40

이 도구를 좀 만져보다 보면, 제가 이 영상에서 보여드릴 내용들은 진짜 놀라실 거예요. 예를 들어, 여기 이 인터랙티브 대시보드, Remotion으로 만든 거죠.00:47

제가 원하는 특정 웹사이트의 정확한 브랜드 가이드라인에 맞춰서 했고, 딱 한 번의 프롬프트로 그걸 해냈어요. 얼마나 비슷한지 한번 보세요. 그리고 참고로, 이 부분은 기존 내용에 맞춰서 실시간으로 업데이트되는 거에요.00:55

예를 들어, 여기 숫자를 85, 300에서 100, 000으로 바꾸고 다시 대시보드로 돌아오면, 바로 100, 000으로 바뀌는걸 보실 수 있어요. 이렇게 실시간으로 바뀌는 거죠.01:08

업데이트 내용이 단순히 영상만 잘라내는 것뿐만 아니라, 제 노트북 LM 영상에 맞는 정확한 자막까지 Glido 브랜드 가이드라인에 맞춰 넣어줬어요. 영상은 잘라내고, 거기에 오디오도 개선해 줬답니다.01:20

자, 이거 들어보세요. 그 능력 덕분에 이렇게 됐는데, 진짜 대단하죠. 그래서 완전한 오디오 향상을 시켰고, 자막도 넣었거든요. 제가 딱 한 번 프롬프트만 줬어요.01:35

이 영상에서 제가 모든 걸 보여드릴 거예요. 그리고 나서 여러분도 웹사이트에서 이런 에셋들을 다운로드하는 방법, AI가 어떻게 읽고 이미지를 가져오고, 웹페이지의 모든 요소를 다운로드해서 여러분이 원하는 대로 영상을 만들 수 있는지 알게 될 겁니다.01:43

음성 넣은 영상에 대해서 이야기해 봐요.01:55

구체적으로 말해서, 이 모든 것을 가능하게 하는 엔진인 레모션(Remotion)입니다. 레모션이 정확히 뭘까요? 간단하게 말하면, 코드로 영상을 만들 수 있다는 것입니다.01:59

그게 실제로 무슨 뜻이죠? 그리고 왜 이게 이렇게 강력한가요? 음, 이걸 이렇게 생각해보면, 그들이 실제로 한 건 영상 자산의 모든 프레임이 코드라는 겁니다.02:10

핵심 아이디어는 모든 프레임이 코드라는 점이에요. 이걸 이용해서 프로그래밍을 통해 함수, 반복문, 조건문 같은 기능을 만들어서 영상 제작, 편집, 그래픽, 애니메이션을 AI를 활용해 자동화하고 확장할 수 있다는 거죠.02:23

그러니까 이게 이렇게 큰 건, 코드를 이용해서 효과적으로 창작할 수 있기 때문이에요. 코드라는 게 꽤 예술적인 용어라고 할 수 있거든요.02:36

코드로 작곡하고 있었어요. 다양한 형식으로 내보낼 수 있는데, 정말 멋지죠. 그리고 사업적인 측면에서 보면, 지금 엄청나게 성장하고 있어요.02:43

그리고 우리가 이걸 이야기하는 이유 중 하나는, 이러한 스킬들이 사용 가능하고 이제 Anti-Gravity나 Cursor 같은 환경에 연결해서 터미널에서도 사용할 수 있게 되었다는 점 때문입니다.02:52

이 시장이 엄청나게 크다는 점을 강조하고 싶습니다.03:01

서브매직을 보세요. 세 달 만에 100만 달러의 ARR을 달성했어요. 이들은 비디오 편집 도구입니다. 여기 AI 비디오라는 회사가 있었는데, 연간 100만 달러의 매출을 올렸고, AI 광고 제작기로 연간 500만 달러의 연간 반복 수익을 올렸습니다.03:04

크레오에서 연간 6백만 달러. 이제 대략적인 그림은 아시겠죠? 저희가 Anti-Gravity 내에서 사용할 AI 모델인 클로드, 특히 클로드 코드에 이 Remotion 스킬을 적용할 겁니다.03:15

그리고 저희는 안티-그래비티 내에서 그것을 진행할 거예요. 그래서 Remotion으로 할 수 있는 모든 것을 자세히 다뤄서 여러분이 Remotion의 전체 기능을 완전히 이해할 수 있도록 하겠습니다.03:26

그리고 제가 보여드릴 건, 레모션을 어떻게 사업이나 개인 생활에서 활용할 수 있는지, 난이도 세 단계로 나누어 설명하는 겁니다. 가장 쉬운 단계인 첫 번째는 비디오 편집과 향상시키는 방법을 다루죠. 그래서 제가 정말 멋진 에셋을 하나 가져와서, 설명란 아래에 링크를 넣어드릴 테니까요.03:34

이거 바로 가져가셔도 좋아요. 정말 게임 체인저가 될 테니까요. 리모션(Remotion)의 중력 반전 기능에 대해 살펴볼 건데요, 지금 보여드리는 것들은 여러분이 할 수 있는 엄청난 기능들의 몇 가지 예시일 뿐이에요. 마법 같은 설정이 어떻게 되는지 한번 보실까요? 영상 설명란에 링크가 있으니 확인해보세요.03:49

코딩으로 영상을 만들 수 있죠. 먼저 설치해야 합니다. 몇 가지 필요한 작업이 있어요. 첫 번째는 여기 설치하는 겁니다. Node.js를 다운로드하지 않았다면, 그냥 다운로드하세요.04:03

거의 그냥 복사해서 붙여넣기 해서 안티그래비티에 바로 넣을 수 있어요. 자, 이제 여기서 복사해서 안티그래비티로 넘어가 볼 거예요.04:15

하지만 그 전에, 이걸로 뭘 할 수 있는지 강조하고 싶어요. 어떤 기능을 생성할 수 있는지 알려드리는 거죠. 영상, 모션, 그래픽이 있습니다. 인트로, 아웃트로 애니메이션, 설명 영상, 제품 데모, 소셜 미디어, 영상 광고, 애니메이션 인포그래픽, 로고 리빌, 연결된 타이포그래피 같은 것들이 나올 수 있죠.04:22

이 비디오를 만들 때, 실제로 사용하실 만한 무언가가 되기를 바랐어요. 제가 찾은 예시들 중에는 그냥 보기 좋지 않은 것들이 많았어요. 텍스트 크기가 너무 크고, 이미지의 다른 부분은 그렇지 않거나, 실제로 사용하기에 적합하지 않으면, 언급할 가치가 없다고 생각했어요. 이걸로 정말 놀라운 것들을 만들 수 있어요.04:37

웹 디자인 및 개발, 랜딩 페이지, 마케팅 사이트, 대시보드, 관리자 패널, 정말 멋진 것들 정말 많아요. 그리고 UI/UX 자산, 컴포넌트 라이브러리, 디자인 시스템, 로딩 애니메이션… 죄송해요, 이 생각만 해도 끊기네요. 네비게이션 패턴, 폼까지요.04:52

디자인, 데이터 시각화 같은 것들요. 대충 감이 오시죠? 자동화 도구, 콘텐츠, 엄청나게 멋진 것들이 많이 있어요. 이걸 보면서 아이디어를 얻으셔도 좋고요.05:07

자, 그럼 설치해볼까요? 그냥 아래로 내려가서 이걸 선택해서 우리가 주로 사용하는 코드 편집기로 넘어가면 됩니다.05:14

우리는 멋진 아름다운 반중력 기능을 사용할 거예요. 그래서 여기, 멋진 아름다운 반중력 안에 있구요. 반중력 기능을 이용해서 채팅 창 밖에서도 코드를 실행할 수 있는 추가 기능을 보여드리고 싶어요. 제가 할 일은…05:20

제가 보여드리고 싶은 것은 클로 코드(clawed code)를 중력 역전(anti-gravity) 환경에서 어떻게 활용할 수 있는지입니다. 그냥 리모션과 대화하면서 가끔 '안녕'이라고 말하는 것만으로도 가능합니다. 가끔은 중력 역전 시 에이전트가 회전하거나 약간 무작위적인 행동을 할 수도 있는데, 그게 정말 멋지죠. 제가 보여드리고 싶은 것은 바로 그거입니다.05:35

또 다른 기술이 있는데, 왼쪽에 활용할 수 있어요. 이거 알아두면 정말 좋죠. 확장 기능으로 내려와서, 클로드라고 검색해 보세요. 그러면 클로드가 팝업으로 뜰 거예요, 멋지죠? 이제 이걸 설치할 건데, 클로드 데스크탑 앱이 있다면요.05:48

여기 중간을 더블 클릭하면 연결되어야 하고, 확인해보세요. 그러면 신기하고 멋진 클로드 창이 팝업됩니다. 그래서 제가 이걸 클릭할 수 있고, 이렇게 클릭해서 '어이, 클로드! 잘 지내?'라고 말할 수 있죠. 자, 이제 클로드와 대화하고 있는 거예요. 클로드와 이야기할 수 있습니다.06:03

기본적으로 자동 편집을 하고 논리적인 일들을 처리하는데, 클로드랑 대화하고 있으니까 혹시 채팅 패널이랑 충돌이 생기면 코드 담당자에게 보고하면 돼요. 여기 올려주세요. 그냥 기본적인 것만 하면 되는데.06:17

저기요, 이거 해 주시면 좋겠는데. 죄송한데, 이걸 한번 해보고 나서 모든 걸 다 넣어서, 전부 다 끝내고 나서 엔터 키를 누르면, 반중력 기능이 작동해서 이 모든 다양한 것들이 제대로 업데이트되는지 확인해 주세요. 그리고 사용하실 수 있을 거예요. 엄청 멋있어요. 보시면 아실 거예요.06:27

네, 헤이! Node.js 설치는 완료됐어요, 정말 멋지네요. 이제 확인하는 중인데, 그것도 너무 좋네요. 일단 이것만 끝나면 바로 시작해서 이 정말 멋진 소프트웨어를 사용할 수 있을 거예요. 그리고 작은 팁 하나 더 드릴게요.06:41

클로드 이걸 클릭해서 클로드 코드를 열면, 클라우드를 MCP 서버에 연결하고 싶을 때, 혹시 문제가 생길 때, 여기를 클릭해서 MCP 서버를 클릭할 수 있습니다. 그리고 참고로 MCP는 모델 컨텍스트 프로토콜을 의미합니다.06:51

기본적으로 이것이 바로 반중력 기술을 외부 세계와 연결하는 방법이고, Gmail, NA10, Zapier와 같은 도구들과 연결하는 방법입니다. 여러분이 할 수 있는 일은 MCP 서버를 클릭하고, MCP 서버 관리를 클릭하는 것입니다.07:05

음, 원하는 거 그냥 추가해도 되고, 이 안에 들어오면 제가 지금 움직여서 조금 옮겨봤어요. 보기에 raw config를 클릭하면, 그 내용을 전부 복사해서 코드에 붙여넣고, '자신의 mcp 설정 파일 만들어줘' 이렇게 하면 되는 거죠.07:18

클로드에게 여러분의 모든 MCP 서버에 접근할 수 있는 기능을 좀 주면 좋겠는데, 간단한 팁이에요. 언제든지 바로 시작할 수 있도록 공유하는 겁니다. 이 자료들은 영상 안에서 계속 나올 거니까, 준비하세요.07:32

커피 드신 거 맞죠? 좋아요. 이제 다 끝났어요. 거의 다 설치해서 준비 완료됐습니다.07:43

자, 제가 여기서 하고 싶은 첫 번째 일은 바로 폴더를 새로 만드는 건데, 왼쪽에서 'videos' 아니면 원하는 이름으로 폴더를 만들 수 있습니다, 그렇죠? 제가 여기 내려와서 새로운 폴더를 만들고, 이걸 'videos to edit'라고 부르겠습니다.07:48

좋아요, 정말 멋지네요. 자, 이제 '편집할 비디오' 폴더가 있잖아요. 그 안에 아직 편집되지 않은 비디오를 드래그해서 넣어주시면 돼요. 자, 바탕화면에서 하나 가져가 볼게요. 21초짜리 비디오가 있네요.08:00

자, 소리가 어떻게 들리는지 들어보죠. 다음으로 할 일은 사실 100% 활용하는 거예요. 자막이 없죠? 그냥 노트 트림이죠. 제가 할 일은 이걸 X로 클릭하고, 이걸 가져와서 '편집할 비디오' 폴더에 드래그해서 놓는 거예요.08:10

좋아요, 멋지네요. 이제 비디오 편집기에 들어왔어요. 한번 들어볼까요? 정말 멋지네요. 좋아요, 아주 괜찮네요. 이제 자막을 추가하고 싶어요.08:24

그래서 어떻게 하는 거죠? 음, 특정 브랜드나 스타일이 있을 때, 그걸 구현할 수 있습니다.08:34

그래서 Notion 문서로 다시 돌아가서 할 거예요. 여기 있는 Notion 문서에 세 가지 정말 멋진 활용 사례를 적어놨어요.08:40

스크롤을 좀 내려보면, 간단하게 살펴보겠습니다. 워크플로우 1은 자동화된 비디오 자막 방송용 출력입니다. 입력값을 주면 분석하고 잘라낼 거예요.08:46

그래서 와이퍼를 이용해서 전체 영상을 받아 적을 거예요. 단어 단위로 타임스탬프까지요. 그래서 영상의 어느 부분을 잘라야 하고, 어느 부분은 잘라내지 않아야 할지 지능적으로 판단할 수 있습니다.08:55

내용 검토를 마칠 거고, 이런 지침들을 다 드린 이유는 제가 모든 걸 꼼꼼하게 확인하고, 정말 엄청난 결과물을 만들어 드리려고 시간을 들여 깊이 파고들고 싶어서예요. 혹시 촬영 중 실수나 NG가 생길 수도 있으니, 그런 부분들도 두 번 다시 확인해서 보려고 해요.09:04

아시죠, 제가 실수를 하기도 하고, JR도 실수를 하냐고? 네, 가끔씩 합니다. 100퍼센트요. 스크립트 통과 과정에서 일어나는 일은, '아, 그거 명백한 실수였네'라고 판단하고, 그걸 제거해 줄 겁니다. 영상을 잘라내고, 오디오 처리도 할 거예요.09:16

일종의 오쏘닉스라는 걸 사용하는데, 정말 굉장한 기술이에요. 무료로 시작할 수 있답니다. 오디오 출력 품질을 개선해 줄 거고, 제가 차이점을 보여드릴게요.09:28

그 다음에는 캡션 생성 엔진이 작동할 겁니다. 이 엔진은 폰트를 적용하는 역할을 맡게 되죠. 그런데, 사람들이 이 부분에서 흔히 하는 실수는 폰트에 충분한 주의를 기울이지 않는 겁니다. 폰트 종류, 크기, 시각적 계층 구조, 여백, 흐름 등 다양한 세부 사항을 간과하는 거죠.09:36

모든 타이포그래피가 준비되어 있습니다. 다시 한번 말씀드리지만, 멋지고 아름다운 구글 폰트를 사용할 수 있습니다. 다양한 간격이 있는데, 이건 제가 가장 잘 작동한다고 생각하는 것들입니다. 한번 살펴볼까요?09:51

그리고 기본적으로 스타일링 로직이 있습니다. 이건 제 웹사이트에서 가져온 거예요. 잠시 후에 보여드릴게요. 텍스트 그림자, 오디오 정리 규칙, 그리고 렌더링과 제품 구조, 실행 규칙이 있습니다. 우리가 할 일은 그냥 이걸 복사하는 겁니다.10:01

잠깐만, 여기 와서 이 콘텐츠를 전부 가져올게요. 다 아래로 내려와요. 좋아.10:14

자, 이걸 할 거예요. anti-gravity로 다시 돌아가서, 그리고 프로젝트 파일에 태그를 달라고 할 거예요.10:19

그래서 쉬프트 키를 누르면, 입력해 보면 편집할 비디오, 편집할 비디오가 바로 여기 있어요. 파일이 하나 있고, 아래로 내려서 붙여넣을 거예요. 정말 멋지네요.10:25

좋아요. 그리고 그거 보내줘. 최고다. 이제 제가 또 조금 지혜를 나눠드릴게요. 저는 이미 제 브랜드 가이드라인을 미리 선택해 놓았는데, 한번 보세요. 여기 구멍을 두 번 클릭하면, 클럽 코드를 클릭해서 터미널을 열 수 있어요. 저는 그냥 인터페이스가 더 좋아서 이렇게 하는 거예요.10:35

음, 있잖아, 이 웹사이트 한번 들어가 봐. 거기 브랜드 가이드라인, 특히 폰트 쪽을 뽑아 줬으면 좋겠어. 로고도 가져다주고, 다른 필요한 자료들도 다 챙겨서 파일로 만들어 줘.10:50

알겠습니다, 글리도 비주얼 아이덴티티 확인해보세요. https://glido.com 들어가면 정말 예쁘네요. 이 링크는 지금 바로 보내드릴게요. 보시면 아시겠지만, 이 에이전트는 현재 어떤 개선 작업을 거치고 있는 것 같습니다.11:02

왜 이렇게 종료된 것 같지? 지금부터 Anti-Gravity 안에서 이 코드, 이 코드 같은 걸 어떻게 활용할 수 있는지 보여줄 건데, 만약 이런 타임아웃 같은 상황을 마주하게 된다면. 이제 이걸 닫고, 다시 돌아와서…11:15

자, 이 정보들을 전부 똑같이 복사하고, 이제 잠시 이 친구를 멈춰볼게요. 있잖아요, 진짜 멋있는 거 있는데, 다른 탭도 열어볼까요? 이제 두 개의 코딩 탭이 있네요. 좀 보세요! 그리고 이 끝부분을 이렇게 누르고, 수정 전에 질문하는 대신 그냥 자동으로 수정되게 해볼게요. 괜찮아요? 그리고 보내면 여러 개를 이렇게 만들 수 있어요.11:27

저희가 운영하는 인스턴스들이 있고, 이 건은 자동으로 편집할 수 있어서 하나의 코드 에이전트가 정보를 가져가고 있습니다. 특정 브랜드나 스타일이 있으시다면, 직접 하시는 걸 추천드려요. 그래야지, 여러분의 것을 제대로 반영할 수 있거든요.11:41

브랜드 아이덴티티가 있고, 두 번째는 바로 여기 있습니다. 이걸 진행하게 될 거예요. 자, 보세요. 질문을 받습니다. 비디오 파일의 경로는 어디인가요? 사용자 지정 경로라고 말할 겁니다. 전체 경로를 제공할 거예요. Orphonic API 키가 설정되어 있나요?11:54

네, 다른 변수 이름으로 할게요. 건너뛸 수도 있지만, 저는 강력히 추천해요. 그리고 제가 정보를 입력할 거예요.12:05

자, 그럼 오로닉 API 키를 받아볼까요? 그걸 하려면 브레이브를 클릭해주세요. 저는 오로닉을 뭐든지 다 쓰거든요, 정말 멋있어요. 이건 제가 무료로 만든 계정이고요, 완전 무료로 두 시간의 처리 시간을 얻을 수 있어요. 저는 유료 버전을 사용하고 있는데, 강력 추천합니다.12:12

자, 사용해서 API 키를 받아봅시다. 계정 설정에서 톱니바퀴 아이콘을 클릭해야 할 거예요. 아래로 스크롤하면 API 키가 보일 거예요. 필요하면 새로 발급받을 수 있습니다. 예를 들어, 제가 지금 API 키를 재설정해볼까요? 네, 확실합니다.12:26

새 거 하나 구해서 그대로 복사한 다음에 중력 반전으로 다시 돌아가. 거기서부터는 우리 비디오의 전체 경로를 알려주는 작업을 끝내야 해. 전체 비밀번호 비디오는 바로 여기 있으니까, 오른쪽 클릭해서 경로를 복사할 수 있어.12:38

그리고 나서 다른 항목으로 넘어가서 거기에 경로를 입력하시면 돼요. 그러면 오르토닉 키를 요구하니까, 아래로 내려서 여기에 오르토닉 키를 입력해 드릴게요. 그냥 다른 항목으로 넘어가서 이게 API 키라고 적어놓고, 복사하신 키를 붙여넣으시면 돼요.12:50

오쏘닉에서 가져온 다음에 클로드(Claude)가 백그라운드에서 이 마법을 시작할 수 있고, 저는 다시 처음 클로드 환경으로 돌아와서 SVG 로고가 글라이더, 기하학적 아이콘, 아이콘, XYZ를 사용할 수 있다는 것을 확인할 수 있습니다. 브랜드 아이덴티티와 가이드라인을 시작해서 얻는다는 것은 멋진 일이죠.13:03

더 자세한 버전을 원하시면, 네, 괜찮습니다 라고 답해주시고, 지금 바로 여기로 오시면 됩니다. 다시 한번 개요를 보여드리는데 정말 멋지죠. 플레이그라운드로 바로 가려면 galeido.com 에 접속하시면 됩니다. 이건 저희 음성 인식 서비스입니다.13:15

정말 놀라울 정도로 빠르게 베타 서비스를 시작한 스타트업이 나왔네요. 이제 확인해 보면, 브랜딩이 정말 멋지네요. 이 앱은 기본적으로 웹사이트를 분석하는 기능을 제공할 거예요.13:29

제가 공격을 시작하라고 말하는 거예요. ‘공격’이라는 단어가 강하게 들릴 수도 있지만, 웹사이트에 접속해서 모든 정보와 데이터를 가져와서 그걸 전부 보여줄 겁니다.13:40

여기서 로고와 주요 색상, 그리고 폰트까지 확인할 수 있어요. 이걸 복사해서 어떤 웹사이트에도 적용하고, 다시 돌아와서 이런 에셋으로 비디오를 만들 수 있죠.13:45

그리고 지금 보시면, 이거 보세요. 비디오를 추출해서 Whisper API로 받아쓰기까지 했어요. 받아쓰기 내용을 분석해서, 중요한 부분만 잘라내고, 오디오를 음성으로 처리하는 단계로 진행되죠.13:53

온라인 콘텐츠는 종종 시각적인 부분은 좀 부족해도 용서하지만, 오디오가 형편없으면 절대 용서하지 않죠. 그래서 오디오의 선명함이 정말, 정말 중요해요.14:02

이제 워크플로우를 통해 편집하고, 잘라내고, 뭐든지 할 수 있을 뿐만 아니라 적절한 타이밍에 멋진 자막까지 얻을 수 있다는 건 정말 놀라운 일이에요. 그리고 이 걸 무한한 복잡성까지 확장할 수 있다는 것도 말씀드리고 싶네요.14:12

그게 바로 제가 말씀드리는 뜻이고, 그 의미는 저희가 일련의 편집 규칙을 만들 수 있다는 뜻입니다.14:26

음, 일단은 모든 멈춤을 없애고, 그리고 되받아 말하는 부분은 한 번만 남겨두세요. 시행착오를 통해 편집 시스템을 구축할 수 있고, 이걸로 영상을 통째로 편집할 수도 있겠지만, 원하지 않더라도 가능합니다.14:29

편집 시간을 80~90% 정도 절약할 수 있어요. 그러면 오디오 퀄리티가 완전히 향상되겠죠. 예를 들어 지금 제 편집자가 제 영상을 가져갈 때, Orthotic 프로그램을 돌리는데, 이건 프로그래밍으로 설정할 수도 있지만 물리적으로 꼭 해야 할 건 아니에요.14:44

지금 수준이 이렇게 됐다는 게 진짜 미친 듯하고, 지금 단계에서 Remotion Caption 프로젝트를 돌리고 있다는 걸 보니 정말 대단하네요.14:57

이게 너무 좋아요. 영상 편집이 가능하다는 사실 자체가 엄청난 일이죠. 음, 아시잖아요. 이게 있으면 영상 편집자들이 얼마나 더 많은 고객을 확보할 수 있을지 상상해 보세요.15:04

진짜 너무 멋있어요, 솔직히. 제가 제일 좋아하는 건 우리가 할 수 있는 타이포그래피랑 색감이에요. 그리고 제가 그거 실제로 어떻게 보이는지 보여드릴 거예요. 솔직히, 안전벨트 꽉 매셔야 할 것 같은데요, 엄청난 일들이 벌어질 테니까요.15:14

한번만 시선 끌고 싶었어. 이거 보여? 이거 내가 다 덮었다고 말하는 게 바로 이거야.15:24

자, 보세요. 이거 때문에 모든 게 다 엉망이 됐어요. 지금 정확히, 거의 밀리세컨드 단위까지요. 제가 했던 말과 위치까지, 자세한 내용이 나오고, 불필요한 부분은 잘라내고 있어요. 정말 놀라울 정도예요. 마치 비디오 편집 프로그램 같은데, 제가 처음 시작했을 때요.15:28

프리미어 프로 배우는 거, 제가 처음 배울 때는 아이무비스였어요. 그 다음에 프리미어 프로였고, 이제 또다시 중력 무시하고 이런 환경 설정 도구들, 그리고 코딩… 코딩은 진짜 쉴 새 없이 다른 소프트웨어로 넘어가네요. 상상도 못할 정도로요. 지금 보시는 것처럼요.15:42

이제 최종 비디오를 데스크톱으로 렌더링하고 있어요. 코딩 커뮤니티 내에서 터미널을 사용할지, 아니면 시각적인 인터페이스를 사용할지에 대해 의견이 많이 갈리는 것 같아요. 터미널을 사용할 수도 있죠, 터미널을 이용해서 뭐라도 할 수 있고. 하지만 저는 시각적인 인터페이스가 이 경우에는 중요하다고 생각해요.15:56

제가 선호하는 방식이 그런 종류의 일이죠. 또 제가 중요하다고 생각하는 건, 이걸 여러 비디오에 동시에 적용할 수 있다는 점이에요. 예를 들어, 제가 비디오 5개, 10개, 50개 있다고 해도, 정말 다양한...16:11

그냥 이 버튼을 계속 누르면서 하나씩 진행하면, 각 영상이 완전히 별도의 영상에서 작업하게 됩니다. 마치... 프로그래밍을 생각해보면, 이런 방식이 확장을 가능하게 하는 이유가 됩니다.16:25

이 과정을 잘 따라하면, 이 도구들을 이용해서 규모를 확장할 수 있습니다.16:34

그래서 이렇게 하면 완료됐어요. 위스퍼 받아쓰기인데, 74단어, 모든 타임스탬프 포함이고 수정할 필요가 없어요. 이미 깨끗해서 정말 좋네요. 하지만 편집도 꽤 잘 되고, 레벨도 조정됐고, 정규화도 되어 있어서, 보철 처리에 딱 맞는 상태이고요.16:37

잡음을 제거해서 실제로 차이를 들어볼 수 있게 했어요. 그리고 자막 엔진도 입력했고, 네, 좋아요! 바탕화면에 띄우려면, 바탕화면으로 넘어가서 확인해볼까요? 정말 멋지네요. 이제 공식적으로 완료되었으니, 차이를 비교해 봅시다. 영상에서 보시는 것처럼 편집하기 쉬워졌어요.16:50

이전 버전이랑 새로 나온 버전 둘 다 있는데, 차이점을 확인해 봐요. 그리고 오디오 차이점에 특히 주의해 주세요. 준비됐어요?17:04

자, 이제 노트북 LM를 어떻게 활용하고, 안티-그래비티와 결합하는지 정확히 다뤘습니다.17:09

다음으로 우리가 해야 할 일은, 안티 그래비티의 모든 기능을 활용해서, 여러분이 아시는 것처럼 오디오 퀄리티 차이와 실제 기록을 비교해 보시는 겁니다.17:19

솔직히 미친 거 아니에요? 그리고 저 받아쓰기 완전 쩔고. 진짜 보세요, 완벽하잖아요. 진짜 어이없어요, 쭉 보니까. 완전 미친데요, 기술 쓰는 거 봐, 안 쓰면 진짜 안 되잖아요.17:30

플랫폼에서 빼내지는 못하고 있지만, 만약 제가 수정하고 싶으면 어떻게 해야 할까요? 한번 확인해 봅시다. 제가 텍스트 크기를 40% 늘려달라고 요청했는데, 그렇게 해 주네요. 수정해서 거기에 넣으면요. 왼쪽에는 '수정할 비디오' 폴더가 있고, 그 아래에는…17:44

수정 작업을 다 했고, 혹시 마음에 안 드는 부분이 있으면 그냥 "이거 좀 수정해줘"라고 말하면 돼요. 다음 단계로 넘어가기 전에 마지막으로 중요한 건, 작업이 완료되면 아래 프롬프트를 입력해야 해요. "야, dude, 내가 원하는 건..."17:56

이걸 반복할 수 있는 시스템과 표준 운영 절차를 만드는 거예요. 그래서 앞으로 제가 다른 영상들을 드릴 때도 동일한 스타일로 정확하게 똑같이 할 수 있게끔, 제가 이걸 실행할 때 아주 구체적으로 말씀해주세요. 최고예요.18:09

심지어 그걸 수행하는 기능을 직접 만들 수도 있어요. 굉장히 얇은 거죠. 제가 하고 싶은 건, 이 과정을 반복할 수 있도록 활성화할 수 있는 기능을 저를 위해 만드는 거예요. 빔! 그러면 그냥 그걸 말해서 넣어주면 되죠.18:21

네, 저희를 위해 알아서 진행해 줄 거고, 제가 여러분께도 이 내용을 복사해서 노션 문서에 추가해둘 테니, 필요할 때 다시 사용하실 수 있도록 하고요. 혹시 어디 있는지 궁금해하실 분들을 위해 말씀드리자면, 페이지 맨 아래에 있습니다. 그리고 이제 완료되었으니, 늘어난 건...18:33

140픽셀에서 200픽셀로 바꿔서 한번 확인해 볼까요? 어떤 모습인지 봅시다. 노트북 알람을 활용하고 외부 중력과 결합하는 방법을 정확히 다뤘습니다. 다음으로 필요한 것은...18:44

그리고 이게 다예요. 여러분, 지금 얼마나 터무니없는지 직접 보시면 알 겁니다. 이제 시작일 뿐이에요. 왜냐하면 이제 두 번째 단계로 아주 자연스럽게 이어지거든요. 이제 우리는 무엇이든 수정할 수 있게 됐어요.18:54

영상 오디오를 개선하고 싶은데, 저희는 완전 자동화된 워크플로우를 구축해서 100개의 영상을 저희가 키보드 한 번 만지지 않고도 처리할 수 있기를 바라요. 학교 커뮤니티 내에서 이런 지능형 시스템을 더 많이 구축하고 있으니 관심 있으시면 살펴보세요. 그런데 흥미로운…19:05

지금 우리가 할 수 있는 일은 이 기술에 웹사이트를 제공하고, 이를 통해 우리가 원하는 어떤 종류의 비디오 그래픽 애니메이션도 만들 수 있게 하는 겁니다. 바로 그거를 다음 단계에서 할 거고, 정말 흥미로운 사실은 이 기술이 효과적으로 작동할 뿐만 아니라 데이터를 가져올 수도 있다는 점이에요.19:18

좋아요, 그 페이지에서 자산 하나씩 다운로드 할게요. 코딩 모드로 들어왔어요. 한번 확인해볼게요. 57이 보이시죠? 50을 딱 누르는 순간, 딱 한 가지만 해주세요. 그냥 새 창 띄우는 것 뿐이에요.19:32

왜냐하면 맥락이 50대에 도달하면 사라져요, 알았죠? 첫 번째 50은 당신과 저, 아침 10시, 커피 마시면서 최고의 삶을 즐기는 거죠. 두 번째 50은 마치 11시 50분처럼 배고프고…19:42

너무 피곤해서 자고 싶고, 10시간 동안 제대로 먹지도 못했어요. 요점은, 브라우저 새로 고침을 하면 성능이 엄청 좋아진다는 거예요. 자, 한번 확인해보세요. 제가 지금 프롬프트를 이렇게 넣을 건데, 잠깐만요, 프롬프트를 지금 바로 적을까요, 아니면 나중에 할까요?19:54

이 문서로 다시 돌아와서 여기에서 가져오세요. 여기는 디자인 시스템 애니메이션, 레모션 쇼케이스 웹사이트입니다. 저희가 할 일은 웹사이트 URL을 제공하는 것뿐이에요. 그럼, 글라이도(glido)로 해볼까요? https da da bum bum glido.com. 이 사이트는 정말...20:05

재미있겠죠? 디자인 시스템을 분석하고 추출할 건데요. 구체적으로 타이포그래피, 색상, 아이콘, 로고, 레이어, 컴포넌트들을 다룰 겁니다. 그리고 Remotion을 이용해서 애니메이션 쇼케이스를 만들 거예요. 프레임 속도, 길이, 타임라인 변경 등 우리가 원하는 대로 지정할 수 있습니다.20:20

스토리보드, 인트로, 타이포그래피, 컬러 팔레트… 뭐 이런저런 얘기들이죠. 이건 그냥 보여주는 것일 뿐이고, 사실은 이거 제거할 거예요. 왜냐하면 이런 스타일로 스토리보드를 만들지는 않을 테니까. 애니메이션 스타일은 가볍고, 스프링 느낌을 살려서, 최대한 단순하게, 정말 멋있게 만들고, 파일을 생성해서 결과를 보여드리죠. 자, 우리가 할 일은…20:34

여기 있는 거 그냥 그대로 복사해서, 아래로 내려와서 이거 잡고, 그리고는 안티 중력 쪽으로 다시 돌아가서, 내가 할 말인데, 야, 너한테 부탁할 건 15초짜리 영상만 만들어 줘. 제품이 뭘 하는 건지 설명하는 영상이고, 마우이 여행권이 아니라 마우이 자체를 팔아달라는 거다.20:48

페이지에 있는 카피를 활용하고, 브랜드 로고를 포함한 모든 개별 에셋들을 다운로드해서 아래 명시된 사양에 맞춰 제작해야 합니다. 좋습니다. 아이러니하게도, 도구를 이용해서 도구를 얻고 있는 셈이죠.21:01

정말 대단하네요. 바로 실행 버튼을 누르고 클라우디오가 배경에서 그걸 만들어 줄 수 있도록 할 겁니다. 그런데 Remotion 같은 도구를 볼 때, 저는 어떤 생각을 하냐면요.21:15

AI 분야에서는 확실히 과장된 부분이 있는 것 같아요.21:25

그리고 제가 이 채널에서 하고 싶은 일은 그런 것들은 피하는 거예요. 실제로 기능적이고 사용 가능해야 하는데, 그래서 제가 이 비디오에서 보여드리는 모든 예시는 어떻게 하면 프로덕션 레벨의 결과물을 얻을 수 있는지, 실제로 진정으로 사용할 수 있는 무언가를 만드는 방법을 보여주는 겁니다.21:28

이거 진짜 엄청 멋있어요. 이 방법들을 따라 하면 뭐든지 할 수 있어요. 그리고, 아이디어가 잘 떠오르지 않는다면, 다시 한번 생각해 봐요.21:42

여기 있는 모든 것들을 마음껏 실험해볼 수 있어요. 마치 비유적인 사탕 가게에 들어간 어린아이처럼, 이 모든 것들을 구경하는 것과 같죠. 앞으로 편집이나 이미지, 에셋 제작을 할 때, '이걸 anti-gravity를 이용해서 프로그래밍적으로 처리할 수 있을까?'라는 식으로 생각해야 해요.21:48

이런 도구들을 Remotion을 사용해서 코드로 구현한다면 가능할 수도 있을 것 같아요. 그렇게 워크플로우를 구축하는 게 의미 있을 것 같고, 그 점을 고려해서 현재 해야 할 일 목록들도 업데이트되고 있고, 전부 다운로드되고 있어요.22:02

자산, 로고, 추천 글, 테마 디자인을 만들고, 쇼케이스를 만들고, 다 되면 데스크탑에 비디오를 저장하게 할 거예요. 제가 데스크탑에 저장하라고 말한 건 제가 거기서 자료를 가져오기 때문이고, 이론적으로는 어디든 가능해요. 폴더를 지정해서 사용할 수도 있죠.22:12

왼쪽, 판매하는 제품 뭐든, 설명서는 그거 따라갈 거예요. 이제 다른 멋진 점은 반중력 기능이 있다는 거고, 제미니를 사용할 수 있다는 겁니다. 제미니 모델은 나노 바나나에 접근할 수 있으니까요. 나노 바나나에 연결해서 문자 그대로 생성할 수도 있습니다.22:24

와, 지금까지 만들어진 어떤 이미지보다 퀄리티가 뛰어나고, 그걸 저희 영상에 적용해서 마치 그런 능력을 가진 것처럼 보이게 할 수 있어요. 특히 반중력 기술이랑 코딩을 융합하면 잠재력과 실력이 엄청나게 폭발적으로 성장하거든요. 그러니까 완성되면 여기에서 상세하게 확인해 보세요.22:37

첫 번째 장면, 영웅, 글라이더 로고, sfg, 헤드라인 타이포그래피 요소, 그리고 속도 비교, 뭐, 뭐, 뭐, 뭐. 음, 정말 흥미로운 디테일들이 많이 있네요. 한번 확인해 볼까요? 여기 켜두고 있었어요.22:52

자, 전체 화면으로 한번 볼까요? 와, 멋지다. 기존 앱보다 다섯 배나 빠르네요. 마음에 드네요. 속도 차이가 확실하네요. 한번 보세요. 정말 굉장하네요. 자연스럽게 말해주세요.23:04

바로 페어링이 되네요. 그리고 로고들이 있는데, 은은하게 부드럽게 떠다니는 느낌이 좋네요. Glido, 생각의 속도로 작업하세요. Glido 3, 블라블라블라. 진짜 멋있지 않아요?23:13

자, 그럼 클라이언트가 있다고 해 보자. 잭, 나는 초록색이 싫어. 파란색이 좋아. 좋아, 그럼 그냥 그래비티로 다시 돌아와서, 야, 이거 진짜 멋지다! 초록색을 파란색으로 바꿔줄 수 있을까? 초록색이랑 비슷한 느낌의 파란색 버전이지.23:21

그거 일단 보내주고, 이렇게 수정하면 되니까. 예를 들어, 파란색 버전, 노란색 버전, 초록색 버전 이렇게 세 가지 버전을 만들어주시면 제가 결정하고, 완전히 다른 세 가지 버전을 받으면 되는 거죠. 자, 다 됐고 열렸으니 한번 볼까요? 글라이드 레고는 다섯 배였어요.23:36

와, 진짜 빨라. 속도 차이가 엄청나. 블루로 바뀌었어, 저거 진짜 대단하다! 내가 왜 놀라는지 모르겠어. 진짜 멋진데, 색깔만 바꾸는 건 아니고, 다른 기능도 없는지 살펴봐야겠어. 이 부분에 아쉬운 점이 있나?23:50

바꿔서 만들 수 있고, 그걸 하려고 규칙 체계를 구축하는 건 정말 굉장한 일이에요. 예를 들어, 제가 '녹색 디자인 스타일이 너무 좋다'라고 말할 수도 있겠죠. 앞으로 제가 지시사항들을 만들고 왼쪽에는 척도를 두어서…24:02

제가 도와드린 것처럼 똑같은 걸 다시 해드릴 순 없어요. acabó.24:16

물론 지금 제가 프롬프트를 드렸지만, 이걸 스킬로 정리하면, 여러분은 그걸 완전히 압도할 수 있고, 그냥 이렇게 실행할 수 있어요, 어떤 것이든.24:20

이제 X에 대한 비디오 편집 스킬과 Y에 대한 비디오 편집 스킬이 있습니다.24:26

제가 하고 싶은 에셋 제작, 애니메이션, 영상 편집 작업들을 쭉 정리해서 필요한 기술들을 정의하고, 그걸 자동으로 처리해서 단 한 번도 버튼을 누르지 않고 모든 걸 끝낼 수 있게 만드는 거죠. 한번 고려해 볼 만한 가치가 있을 것 같아요.24:30

이제 모든 분들께서 어떤 영상이든 편집하고, 오디오 작업을 하고, 맞춤형 애니메이션과 그래픽을 만드는 방법까지 정확히 이해하셨을 겁니다.24:41

여기서는 우리가 실제로 웹사이트나 AI 앱에서 사용할 수 있는 애니메이션 대시보드나 그래픽을 만드는 방법을 배우는 것이 최종 단계입니다.24:48

지금 실시간 데이터에 연결되었어요. 이건 정말 놀라울 거예요. 자, 노션 문서로 다시 돌아가서 아름다운 사용 사례 3번으로 넘어가 볼까요? 바로 이 멋진 것 말이죠. 웹사이트 스타일의 인터랙티브 대시보드 UI입니다. 가 봅시다!24:59

기본적으로 제가 말씀드린 건, 먼저 가짜 데이터를 만들라는 겁니다. 자, 그럼 목표를 살펴볼까요? 저희 웹사이트 URL과 시각적 언어가 일치하는 인터랙티브 대시보드 UI를 구축해야 합니다. 나중에 슈퍼베이스를 연결하겠지만, 우선은 디자인 시스템 추출 UI를 만들고 실제 인터랙션을 구현해야 합니다.25:14

모의 데이터를 통해 웹사이트처럼 프리미엄한 느낌을 주는 기능적이고 반응형 UI를 제공합니다. 호버 및 활성 상태, 스켈레톤, 모델, 차트 등이 설계되어 추후 쉽게 기반을 변경할 수 있도록 했습니다.25:28

슈퍼 베이스는 마치 몇 년 동안 운동을 한 마이크로소프트 엑셀과 같아요. 핵심 데이터를 저장하는 곳인데, 예를 들어 구독자 수나 깃허브 스타 수를 저장할 수 있죠. 이제는 인터랙티브하고 멋진 대시보드를 만들 수 있게 됐어요.25:39

저희 웹사이트나 앱, 슈퍼 베이스에 연결되어 실시간 데이터를 활용하는 모든 곳에서, 숙련된 전문가들이 설계, 개발, 그리고 애니메이션까지 작업했습니다. 미래는 바로 여기, 바로 지금입니다.25:51

디자인 시스템을 웹사이트의 타이포그래피, 색상, 컴포넌트, 간격 및 레이아웃에서 추출할 수 있습니다. Superbase MCP를 사용할 수 있습니다. 다음 단계는 추출된 스타일을 사용하여 대시보드를 구축하는 것입니다.26:03

핵심 구성 요소들이 웹사이트와 완전히 일치해야 하고, 데이터 테이블, 차트, 모델, 인터랙티브 상태들이 포함되어야 해요. 그리고 제가 아래에 제공하는 더미 데이터 아키텍처도 따라 해야 합니다. 그냥 복사해서 붙여넣기만 하면 되는 거예요. 자, 그럼 Anti-Gravity로 돌아가서 이걸 한번 해볼까요? 여기 돌아오면, 이렇게요.26:13

음, 96 버전을 사용했으니 그냥 저 플러스 버튼을 클릭해서 새로 시작해 볼까요. 좋습니다. 여기 아래로 내려와서 이걸 추가하고, 웹사이트 주소를 넣을 거예요. 그냥 glido.com 으로 하면 되겠네요. 좋습니다. 이제 완료됐으니 이걸 확인해 볼 수 있습니다.26:27

와, 정말 멋진 글라이더 대시보드네요! 우리를 위해 만들어진 것 같아서 한번 살펴볼까요? 혹시 전체 화면으로 만들 수 있나? 아, 가능하네요. 자, 재생해서 뭐가 있는지 한번 볼까요. 와, 진짜 멋있다! 엄청나네요. 자, 이제 제가 원하는 컴포넌트를 선택해서 결정해볼게요.26:41

음, 사용자들에게 알려주고 싶은 것들이 많아요, 수익도 그렇고, 현재 활성화도 되어 있고요, 뭐, 엄청 멋지죠. 그냥 다음 프롬프트를 바로 보여드릴게요. 이건 좀 흥미로울 것 같아요. 저희 웹사이트 디자인 영상에서 보셨을 거예요. 한번 보세요. 정말 아름다운 웹사이트를 만들거든요. 이렇게 인터랙티브한 것 좀 보세요.26:55

이 영상이 바로 앞 영상일 수도 있고, 아니면 제가 보여드릴 다음 영상일 수도 있는데, 만약 다음 영상이라면 정말 제가 어떻게 하는지 꼼꼼히 확인하실 거예요. 하지만 지금은 이 멋진 웹사이트를 먼저 보실 수 있습니다. 보시면, 여러 가지 기능들이 있는데, 이 멋진 팝업창이 뜨면서요, 여러분의 작품에 대한 무료 평가를 받을 수 있답니다.27:07

저희의 주요 콘텐츠가 담긴 웹사이트에 방문하여 투자하세요. 다양한 성장 패키지를 둘러보세요. 그런데, 이 후기들은 정말 멋있어요. 좌우로 쭉 펼쳐지거든요! 스크롤을 내리면 아름다운 애니메이션도 보실 수 있습니다. 이제 돈 낭비하는 못생긴 웹사이트는 됐어요! 이거 정말 최고예요.27:20

그리고 하단으로 내려가서 계정을 만들고 이 인터랙티브한 양식을 살펴보실 수도 있습니다.27:31

제가 이 웹사이트를 어떻게 만드는지 정확히 보여드릴게요. 그런데 우리가 이 웹사이트에서 다뤄야 할 건, 우리가 일한 고객 수겠죠. 음, 제가 방금 보여드린 것처럼 인터랙티브한 대시보드를 만들어서, 예를 들어 이 웹사이트에 통합할 수 있을 거예요.27:37

그리고 새로운 고객이 생기는 순간, Superbase에 업데이트하면 즉시 반영됩니다. 수익일 수도 있고, 인스타그램 팔로워 수나 유튜브 팔로워 수일 수도 있죠.27:48

와, 이제 멋진 애니메이션 대시보드도 생겼어요. 데이터와 동기화해서 사용할 수 있는데, 정말 놀랍지 않나요? 여기 돌아와서 '무중력'으로 다시 들어가서 편집도 모두 하고, 완료되면 정말 멋져요, 진행될 겁니다.27:57

웹 페이지에 적용하고, 슈퍼에 연결해서, 어떤 빌드를 하든, 본인 사업이나 고객 사업을 위해서 어떻게 하는지 정확히 확인할 수 있도록 하겠습니다. 좋습니다. 이제 적용했는데, 좌우로 움직이는 것 같네요. 제가 원했던 건 좀 더 3차원적으로 회전시키는 거였어요. 한번 회전시켜 보겠습니다.28:09

피드백도 받고, 호버링할 때 색깔이 변하는 인터랙티브한 기능도 넣고 싶어요. 자, 이제 안티-그래비티로 돌아가서 플라잉 프롬프트를 가져와 볼까요? 아, 미안, 왼쪽으로 가는 게 아니었어.28:23

뭔가 아주 작은 움직임이 있었으면 좋겠는데, 축을 기준으로 회전하는 것처럼, 3D처럼 보였으면 해요. 그래서 왼쪽에서 오른쪽으로 가지 않고, 마치 오른쪽이 조금 더 가깝고 왼쪽이 조금 더 가깝게 느껴지는 것처럼, 아주 작고 뚜렷한 움직임만 있으면 좋겠어요.28:35

그다음에는 이거 제 HTML 웹사이트에 임베드하고 싶어요. 좋아요. 이거 보내드릴게요. 제 중력 반전 기능이 알아서 할게요. 정말 멋지네요.28:48

자, 이제 됐어요. 이 게 있네요. 로고도 있고, 기능과 가격, 그리고 샘플링도 있네요.28:56

만약 제가 아래로 스크롤해서 대시보드를 보면, 여러분, 호버하면 됩니다.29:01

저 네온 빛이 너무 좋아요. 그런데 이 숫자들은 정확하지 않네요.29:04

이제 Superbase에 연결하고 싶어요. 그러니까 지금 제가 할 일은 바로 anti-gravity로 돌아가는 거예요. 그리고 거기에 이런 프롬프트를 입력할 거예요. 있잖아, 친구야, Superbase에 이 방식으로 연결해 줘.29:09

슈퍼 베이스 MCP에서 프론트엔드 대시보드에 표시되는 숫자들과 연결하고 싶습니다. 만약 그 숫자들이 없다면, 슈퍼 베이스 MCP에서 그냥 만들어 주세요. 좋습니다!29:20

프롬프트를 입력하면, 슈퍼 베이스 MCP를 이용해서 연결을 시도하게 됩니다. 멋진 점은 중력 반전이 연결을 안정화시킨다는 거예요. 원하는 MCP는 어떤 언어 모델이든 검색해서 얻을 수 있습니다. 예를 들어, 제가 이걸 코드라고 가지고 있죠.29:31

아, 몇 가지 맞는 게 있지만, 이거 한번 보세요. 클릭하면 새 걸 아주 쉽게 열 수 있어요. 그리고 MCP 설정이 뭐지? 으음, 뭐든 상관없어요. 거기에 뭐가 있든, 그걸 가져와서 Superbase로 가서 키를 가져올 수 있는데, 그거 정말 멋지죠. 네, 설정은요.29:44

와, 정말 멋지네요. 여러분이 가야 할 URL은 superbase.com/dashboard/account/tokens 이에요. 여기로 와서 새로운 토큰을 생성하면 돼요. 예를 들어, 저는 이걸 이렇게 이름을 지을 거예요.29:59

잭 로버츠, 654, 좋아요. 그리고 '새 토큰 생성'을 클릭하세요. 그냥 한 시간 안에 만료되도록 설정해 볼게요. 물론, 원하는 만큼 오래 설정할 수도 있죠. 그러면 토큰이 생성되고, 그걸 복사한 다음에 바로 안티-그래비티로 돌아가서 뭔가 말할 수 있을 거예요.30:08

야, 친구. 아래 토큰을 이용해서 슈퍼 베이스 MCP에 연결하고, 그걸 클로드 MCP 파일에 저장해줘. 그래야 나중에 클로드 에이전트들이랑 언제든지 이걸 사용할 수 있을 거야.30:20

와, 한번 내려와서 그걸 확인해 봐. 정말 멋져. 그리고 추가하면, 여러분, 이제 슈퍼 베이스 MCP가 알아서 설정될 거야. 그래서 대시보드에 대해 생각할 필요도 없어. 대시보드를 만져봐, 꿈만 꿔도 돼. 지금은 안 돼. 이 작업을 하려면 클라우드를 재설정해야 해. 클라우드에게 이렇게 말해줘.30:32

재시작해도 대화가 끊기지 않고, 그대로 이어지도록 프롬프트를 저장해줘. 프롬프트 내용을 그대로 복사해서 붙여넣는 방식으로. 그리고 이 두 개는 닫고, 안티 그래비티 기능은 종료하고 완전히 나가. 그런 다음 다시 불러올 때.30:46

자, 여기처럼 클릭 두 번 해주세요. 그러면 멋지게 될 거예요. 그리고 여기 클로드 버튼을 다시 한 번 클릭하고, 클로드가 열리면 다시 돌아와서 프롬프트를 입력하면 됩니다. 멋지죠! 편집은 알아서 자동으로 해 줄 거예요. 짠! 그리고 바로 사용할 수 있을 거예요.30:57

자, 락 앤 롤! 이제 이걸 마무리하면 멋지고 역동적인 시각 효과를 백엔드 데이터베이스와 연결할 수 있습니다. 그 숫자가 변할 때마다 웹사이트가 자동으로 업데이트될 거예요. 그리고 이건 어떤 컴포넌트에도, 어떤 스타일에도 적용 가능합니다.31:09

여기 앉아서 색깔을 파란색으로 바꾸고, 숫자도 바꾸고, 디자인이나 레이아웃을 변경하는 등, 원하시는 모든 걸 말씀드릴 수 있습니다. 이건 정말 기본적인 설정이라는 뜻이에요.31:20

슈퍼 베이스 MCP로 빠르게 가볼 거예요. 괜찮죠? 제출하세요. 좋습니다. 그리고 슈퍼 베이스를 통해 MCP에 연결되면 이제 직접적인 반영이 될 겁니다.31:27

자, 웹사이트가 준비되었고, 저희의 그래픽도 보이네요. 저희가 만든 그대로입니다. 정말 멋지네요. 그리고 저희는 이 빛깔을 좋아합니다. 그래서 저는 Superbase로 넘어가서 왼쪽에 있는 테이블을 찾아 테이블 에디터로 내려오면 테이블이 보일 거예요. 그리고 제가 값을 가지고 있습니다.31:36

그래서 그냥 예를 들어서, '우리 고객들을 위해 이렇게 많은 수익을 냈어요' 또는 '이렇게 많은 고객이 있어요'라고 말할 수 있죠. 그래서 10만 달러면, 20만 달러가 되고, 실제로 25만 달러가 되면 어떨까요?31:48

와, 멋지네요. 그럼 제가 다시 웹사이트로 돌아와서 보면, 이제 25만으로 업데이트된 걸 볼 수 있을 거예요. 페이지 새로고침하면, 제가 아래로 내려가서 이제 수익이 25만 달러가 됐네요.31:58

아름다운 그래픽을 만드는 방법을 알게 되는 건 정말 멋진 일이지만, 아름다운 사용자 인터페이스를 만들 줄 모르면 잠재력을 완전히 발휘할 수 없을 거예요. 비디오로 생성되지 않은 인터페이스를 말이죠. 그리고 이 영상 여기를 클릭하면 그걸 배울 수 있습니다.32:07