대부분의 멋있는 코딩 튜토리얼은 멋있어 보이지만, 실제 조각들이 어떻게 연결되는지는 보여주지 않아요. 이번 영상에서는 구글 안티중력 기술을 이용해서 리드 매그넷을 위한 진짜 랜딩 페이지를 만들 거예요.00:00

참조 이미지를 시작으로 브랜드 가이드라인을 만들 거예요. 에이전트와 MCP를 사용하고, Supabase를 이용해서 사용자 이름과 이메일을 수집하는 실제 데이터베이스를 연결할 겁니다. 그리고 GitHub과 Vercel을 이용해서 모든 것을 라이브로 배포할 거에요.00:11

조금 기술적인 부분도 있지만, 마치 블록을 조립하듯이 조각들이 맞춰지면서 재미있어요. 레고를 생각해보시면 돼요. 각 조각은 단순하지만, 제대로 쌓으면 실제 작동하는 시스템이 되고 모든 게 딱 맞게 연결되는 거죠.00:25

자, 이제 Antigravity 안으로 들어왔습니다. 이 프로그램을 처음 다운로드 받으신 거라면 antigravity.google.com으로 오셔서 다운로드 버튼을 누르고 구글 계정 이름과 비밀번호로 로그인하시면 됩니다. 오른쪽에는 여러분의 에이전트가 있습니다.00:37

여기서는 중력 무시와 소통할 수 있습니다. 제미니 3 프로나 클로드 소네트와 같은 여러 모델을 활용할 수 있습니다.00:49

이 둘 다 훌륭해요. 가운데 부분은 여러분의 파일과 폴더가 보이고, 왼쪽은 탐색기인데, 여기서 모든 탐색을 할 수 있습니다. 프로젝트를 시작하면 바로 알 수 있을 거예요. 뭐든지 만들기 위해서는 폴더 안에 들어가 있어야 합니다.00:54

이 anti-gravity 템플릿 폴더에는 제가 사용할 수 있는 몇 가지 핵심 기술들이 이미 들어있어요. 그래서 제가 그냥 복제해서 오늘 랜드페이지를 만들고 있으니까 랜드페이지라고 이름 지어볼게요.01:06

자, 이제 이걸 확보했으니, 진행해서 열고, 랜딩 페이지 폴더로 이동해서 열어볼게요. 그럼 안에는 뭐가 있는지 보여드릴 수 있는데, 여기 보시면 에이전트는 오른쪽에 있고, 탐색기 왼쪽에 파일과 폴더들이 있네요. 만약 어떤 폴더든 들어가면…01:17

여기서 하나씩 살펴보실 수 있습니다. 이제 에이전트.md 파일에 따라 저희 파일들을 안티-그래비티에서 나머지 설정해 줄 거예요. 잠시 후에 그 파일에 대해 설명해 드릴게요.01:32

진짜 진짜 쉬워요, 그냥 에이전츠라고 입력하면 돼요. 그리고 제가 세팅해 달라고 할 수 있어요. Anti-gravity가 알아서 우리 파일들을 다 설정해 줄 거예요.01:40

이해해야 할 몇 가지 다른 계층이 있어요. 하나는 이 세 계층 아키텍처입니다. 기본적으로 anti-gravity가 높은 수준에서 작동하기 위해 이해하는 세 가지 일련의 요소입니다.01:48

하나는 지시 사항, 즉 시스템에게 무엇을 해야 할지 알려주는 것입니다. 둘은 오케스트레이션, 즉 에이전트인데, 사용자의 지시 사항을 어떻게 해석하고 실제로 실행해야 할지 알아내는 역할을 합니다.01:57

그리고 세 번째는 실행 자체입니다. 이건 반중력 기술이 우리가 요청한 작업을 수행하기 위해 실제로 작성할 코드나 스크립트들을 말합니다. 이 지침들을 바탕으로 하는 거죠.02:09

이런 영상들을 따라가기가 조금 까다로운 것 같아요. 왜냐하면 기초적인 내용 설정이 처음에 너무 많이 이루어지거든요. 그러다가 갑자기 마지막에 모든 게 한꺼번에 맞춰지니까요.02:19

하지만 시작 부분의 모든 단계는 정말 중요해요. 마치 레고 블록을 쌓듯이 하나씩 맞춰보면 갑자기 전체 그림이 드러나는 것과 같아요. 왜냐하면 저희는 랜딩 페이지를 만들고 있는데, 고려해야 할 사항이 정말 많거든요.02:30

디자인에 대해 고민해야 하고, 카피에 대해 고민해야 하고, 우리 브랜드에 대해 고민해야 하고, 리드 마그넷 자체에 대해서도 고민해야 하고, 이 모든 작은 조각들을 하나로 엮어낼 수 있는 설정과 기반 시설에 대해서도 생각해 봐야 합니다. 결국 완전히 작동하는 시스템을 만들 수 있도록 말이죠.02:42

정말 놀라운 건, Antigravity 같은 AI 기반 코딩 도구들이 모든 조각들을 꿰뚫어 보듯 생각하는 능력이 정말 뛰어나다는 거예요.02:56

자, 그럼 계속 진행해 볼까요. 끝까지 보시면 전부 다 이해가 되실 거예요. 잠시만 기다려보세요, Antigravity가 나머지 폴더들을 만들고 있는데, 이건 저희의 지시 폴더이고, 여기에 Antigravity가 스크립트나 실행 파일 같은 실제 실행 파일을 만들기 위한 지시사항을 생성할 겁니다.03:02

가장 먼저 저희 랜딩 페이지나 디자인의 전체적인 분위기와 느낌을 잡아보고 싶어요.03:17

Nina Macalakina 님이 만든 개인 브랜드 스타일의 웹사이트를 찾았어요. 이름 발음이 틀렸다면 죄송해요. 이건 Behance라는 사이트에서 찾은 건데요. Behance는 영감을 얻기 좋은 사이트예요.03:20

그리고 그녀의 디자인이 정말 좋았어요. 질감, 색감, 구도 등 모든 면에서 정말 훌륭하게 사용했더라고요. 그리고 여기서 그녀는 자신의 브랜드 가이드라인까지 가지고 있어요. 어떤 폰트를 써야 하고 어떤 색을 사용해야 하는지 봐요.03:30

그리고 니나 스타일을 바탕으로 랜딩 페이지를 만들 수 있을지 확인해 보려고 생각했어요. 베한스의 좋은 점은 바로 오른쪽 클릭해서 이미지를 열거나 따로 저장할 수 있다는 거예요.03:41

저는 그냥 몇 개를 열어봤어요. 여기 있습니다. 브랜드 가이드라인이 실제로 나와 있는 이미지입니다. 그리고 저는 이 섹션이 정말 멋진 그리드가 있어서 좋았어요.03:52

그리고 이 부분들은 정말 재미있네요. 그리고 또 다시 말씀드리지만, 그녀가 구도, 색상, 질감의 사용법을 설명한 이 섹션은 우리 시스템이 우리 브랜드를 더 깊이 이해하는 데 정말 도움이 될 것 같아요.04:00

제가 할 건, 마우스 오른쪽 버튼을 클릭해서 이 이미지를 저장하는 거예요. 저희 랜딩 페이지 폴더로 들어가서 '레퍼런스'라는 새 폴더를 만들어서 이 이미지들을 하나씩 저장할 수 있어요.04:12

그래서 이걸 저장하고, 특히 이 파일은 나중에 안티-그래비티에서 바로 참고할 수 있도록 이름을 지정할 거예요.04:21

다른 두 개도 살펴보고 저장하고 있어요. 이제 이걸로 작업할 수 있겠네요. 그런데 재밌는 건, 이걸 저장하는 대신에 그냥 스크린샷을 찍어볼 거예요.04:28

챗GPT에 들어가서 이 텍스트를 추출해 줘, 라고 말할 수 있어요. 그래서 챗GPT가 텍스트를 추출하게 되겠죠.04:37

이제 이걸 anti-gravity에 대한 지시사항으로도 사용할 수 있어요. 사실 텍스트를 그냥 싹 다 뗐거든요. 그녀의 모든 지시사항은 색상 팔레트가 제한적이고, 새로운 요소들은 주된 구성 요소를 따라야 하고, 사진들은 두 색조를 띠게 된다는 이런 디자인 언어 용어들이죠.04:45

저희에게 정말, 정말 도움이 될 거라고 생각해요. 이걸 복사할 수도 있고, 중력 반전 상태로 다시 돌아올 수도 있고, 제가 이 폴더를 만들었기 때문에 참고 이미지들이 이미 다 저장되어 있는 걸 확인할 수 있어요.05:00

이 폴더 안에 새로운 파일을 만들 수 있고, 이걸 brand.md라고 이름을 붙여서 여기에 붙여넣을 수 있어요. Command-S를 눌러서 저장하고, 이제 이걸 이용해서 나머지 의사 결정을 할 수 있겠네요.05:11

다음으로 알아두셔야 할 것은 중력 역전 및 이러한 AI 코딩 플랫폼들의 가장 강력한 기능 중 하나입니다.05:23

이걸 스킬이라고 불러요. 스킬은 기본적으로 시스템이 참고할 수 있는 미리 정의된 지침들의 집합이에요. 여기 있는 건 아름다운 프론트엔드 디자인을 만드는 방법에 대한 거죠. 목적과 톤, 그리고 어떤 제약 조건들, 타이포그래피와 색상을 어떻게 사용하는지에 대한 내용이에요. 왜 이렇게 강력한지는…05:29

원하는 규칙이나 절차를 따르는 방식으로 스킬을 만들면 시스템이 이를 깊이 이해하고 예측 가능한 과정을 통해 매번 일관된 결과를 얻을 수 있습니다. 그래야 안티-그래비티가 여기서 헛구역질하지 않고 여러분의 토큰을 전부 낭비하려고05:44

무엇을 원하는지 알아내려고 애쓰는 대신 여러분이 원하는 것을 직접 알려주는 것입니다. 그러면 여기에서 정확히 어떤 결과를 얻게 될지 알 수 있습니다. 저도 브랜드 가이드라인 스킬을 가지고 있는데, 여기에는 우리에게 정말 필요한 색상 팔레트, 강조 색상, 구체적인 내용들이 모두 들어있습니다. 이제 안티-그래비티가 방금 가져온 모든 이미지를 분석하도록 하겠습니다.06:03

브랜드 가이드라인을 새로 만들 수 있는 브랜드에 대한 정보도 포함되어 있습니다. 이제 에이전트와 함께 작업하기 시작할 수 있습니다. 여기로 들어와서 이 상자에 입력할 수 있습니다.06:22

이렇게 말로 바로 하는 게 좀 더 빨라서, 제 생각을 한 번에 쭉 쏟아낼 수 있거든요. 우선, 레퍼런스 폴더에 있는 모든 이미지를 분석해 줘.06:31

색깔, 질감, 구도, 분석을 꼼꼼하게 해 줬으면 좋겠어요.06:40

그리고 브랜드.md 파일을 한번 살펴봐서 이미지와 텍스처를 어떻게 다루는지 이해해야 해. 거기서 새로운 정보를 바탕으로 브랜드 가이드라인 스킬을 업데이트해.06:45

이제 이걸 보내고, 안티-그래비티가 이 주제에 대해 엄청나게 많은 조사를 할 거야. 스킬에 접근하고 싶다면, 클로를 만든 회사인 앤스로픽에서 지금까지 만든 모든 스킬의 무료 저장소를 깃허브에 제공하고 있어.06:55

브랜드 가이드라인이 있고, 프론트엔드 디자인이 있고, MCP 빌더도 있고, 이 모든 것들이 여기 있어요. 만약 이 모든 것을 다운로드하고 싶다면, 팁을 드리자면 URL 표시줄의 이닷컴을 이닷데브로 변경하면 돼요.07:09

이제 웹 편집기를 설치해 드릴게요. 그리고 이제 파일을 시스템에 바로 다운로드할 수 있습니다.07:21

그래서 이 브랜드 가이드라인 기능이 있는데, 여기 들어와서 다운로드 버튼만 누르면 바로 이 기능을 사용할 수 있게 돼요. 중력 반전 기술이 정말 강력한 점은 실제로 이 기능이 구현 계획까지 자동으로 만들어준다는 거예요. 필요에 따라 사람이 직접 읽어보고 시스템이 이 방식으로 작동하는지 확인하는 거죠. 폰트나 색상 같은 것들도 가져왔다는 걸 확인할 수 있고요.07:28

스타일링 같은 것들, 그리고 발견된 사항들을 반영하기 위해 브랜드 가이드라인을 수정하는 제안을 하는 거죠.07:46

이제 미리 계획을 세우고 싶어요. 제임스 디커슨이라는 사람이 링크드인에 올린 정말 좋은 글을 봤는데, 이 랜딩 페이지 공식으로 8개월 동안 디지털 제품을 44만 3천 달러어치나 팔았대요.07:52

그는 기본적으로 고성능 랜딩 페이지의 전체 아키텍처를 제공해 줬어요. 그래서 저도 똑같이 할 거예요. 이 랜딩 페이지 아키텍처를 스크린샷으로 찍어서 가져올 거에요.08:04

챗지피티로 들어가서 이 텍스트도 추출해볼게요.08:14

이제 이 랜딩 페이지 아키텍처를 이용해서 완전히 새로운 스킬을 만들어볼 거예요.08:19

이거 복사해서 가져올 건데, 제가 잠시 기다린 이유는 반중력 기능, 정말 멋진 거 보여드리고 싶어서였어요. 이제 이걸 진행 누르고 여기 위에 올라가서 에이전트 매니저 열어라고 할 수 있어요.08:24

자, 여기서는 플러스 버튼을 눌러서 시스템에 새로운 에이전트를 추가할 수 있습니다. 여러 에이전트가 동시에 다양한 작업을 수행하도록 하죠. 지금 'skill'이라고 입력하고 'skill creator skill'을 만들겠습니다.08:35

새로운 기술을 만들어서, 높은 전환율을 가진 랜딩 페이지를 제작하는 방법을 상세하게 안내해주셨으면 합니다. 다음 원칙들을 따르세요.08:47

이제 이 랜딩 페이지 아키텍처를 붙여넣고 바로 보낼 수 있어요. 이 에이전트가 작업할 거예요. 새로운 스킬을 만드는 동안, 브랜드 가이드라인이 업데이트되었는지 확인할 수 있어요.08:54

여기 들어오면, '전부 동의'를 클릭하고 브랜드 가이드라인 스킬을 열 수 있어요. 이제 Nina의 디자인을 바탕으로 새로운 컬러 팔레트가 적용되었죠.09:06

타이포그래피에 대한 정보도 있고, 우리가 선호하는 폰트, 혼합된 커트아웃 사진과 벡터 셰이프, 스티커 미학을 사용한 이미지와 텍스처 작업 방법에 대한 정보도 있습니다. 정말 멋지네요. 우리 랜딩 페이지의 뼈대를 만들고 있는 거예요.09:15

에이전트 매니저를 다시 열어서 보면, 이 에이전트가 새로운 스킬, 즉 랜딩 페이지 제작자를 만들고 있는 걸 확인할 수 있어요. 불과 몇 초 만에 브랜드 가이드라인과 고전환 랜딩 페이지를 만들기에 필요한 모든 지침이 준비됐네요.09:29

스킬의 가장 강력한 점은 이제 이 기능을 라이브러리에 가지고 있다는 거예요. 이 랜딩 페이지 제작자를 다른 프로젝트로 가져와서 동일한 프레임워크를 따르는 랜딩 페이지를 만들 수 있다는 거죠.09:43

그래서 이제 필요한 모든 요소를 갖추었다고 생각해요. 마지막으로 필요한 건 자체적으로 리드 매그넷이네요. 제가 ChatGPT로 AI 에이전시를 확장하고 성장시키는 방법에 대한 심층적인 연구를 진행했고, 어떤 퍼널을 사용해야 하는지, 어떤 이메일 시퀀스를 사용해야 하는지, 어떤 리드 매그넷 전략을 사용해야 하는지에 대한 자료가 있어요.09:52

저는 닉 서바이브나 로보 너겟의 제이처럼 제 경쟁사들을 좀 조사해 봤어요. 이런 것들요. 그래서 오늘 이 문서를 리드 마그넷으로 사용할 거예요.10:07

이 파일을 다운로드하고 무료로 제공하려고 합니다. 문서 텍스트 버전이 있는데, Anti-Gravity에 가져와서 여러분이 볼 수 있도록 전체 AI 에이전시 확장 방법에 대한 문서임을 보여드리겠습니다.10:15

매우, 매우 꼼꼼합니다. 이제 이 모든 요소를 결합할 수 있습니다. 우선, AI 에이전시 확장 및 전략 텍스트 문서를 꼼꼼히 읽고 이해해야 합니다. 그리고 나서, 새로운 랜딩 페이지를 만들기 위해 랜딩 페이지 제작 스킬을 사용할 거예요.10:29

랜딩 페이지는 브랜드 가이드라인 스킬을 아주 밀접하게 따라야 하고, 아름다운 구성을 하고 싶어요. 스크롤할 때 멋진 패럴랙스 효과를 줄 수 있도록 몇 가지 레이어를 추가하고 싶네요.10:44

이 웹사이트는 정말 아름답고, 우아하고, 현대적인 느낌이 드는 디자인이 되어야 해요. 지금 바로 전달하고, Anti-Gravity에서 사이트 구축을 위해 어떤 전략을 내놓을지 확인해 보려고 합니다. 우선, 랜딩 페이지에 대한 조사와 계획을 세우고, '에이전시 전략 확장 방법'과 같은 자료들을 꼼꼼히 검토하고 있어요. 그런 다음, 브랜드 가이드라인을 분석해서 브랜드의 특징을 정확히 이해하려고 노력하고 있습니다.10:52

모든 것들을 살펴보더니, 우리 웹사이트를 어떻게 만들 건지에 대한 전체적인 계획을 세웠어요. 이제 진행을 누르고, 안티 그래비티가 알아서 하도록 할게요.11:11

반중력 기술에서 정말 멋진 점은, 이 모든 것에 대해 불만족스러우시다면 시스템에 의견을 남길 수 있다는 거예요. 예를 들어, 히어로 섹션 변경에 대해 불만족스럽다면 그냥 이렇게 의견을 남기시면 돼요. 반중력이 실제로 이 실행 계획을 진행하기 전에 여러분의 의견을 충분히 반영할 겁니다. 이제 실제로…11:19

자, 이제 아트 디렉터처럼 말해서, 정말 몇 분 안에 이 사이트가 완성되었어요. 디자인적인 측면에서 솔직히 말씀드리면 완전히 만족스럽지는 않네요. 몇 가지 눈에 띄는 문제점이 있는데, 이걸 고치려면 Nina의 원래 레퍼런스를 다시 한번 확인해 보는 게 좋을 것 같아요. 배경에 이런 도트 패턴 질감이 들어간 걸 Nina가 참고했었죠.11:38

이런 점들이 질감과 생동감을 더해주는 것 같아요. 다른 점은 스티커나 이런 이미지들을 활용하는 게 정말 재미있네요.11:55

사이트를 좀 더 돋보이게 할 수 있도록 그 요소들을 좀 더 활용해보고 싶어요.12:04

자체적으로 자료를 가지고 있다면, 마치 반중력 효과처럼 유용하게 사용할 수 있을 거예요.12:08

스티커나 이미지가 있다면 그걸 시스템에 제공해주시면 당연히 더 좋은 결과가 나올 거예요. 아주 좋은 시작입니다.12:12

몇 가지 요소가 빠지고 지금은 사이트가 좀 밋밋한 상태예요. 특히 배경에 있던 하프톤 텍스처가 없고, 스크롤할 때 패럴랙스 효과를 줄 수 있는 점 요소도 부족하고, 그리드에 있던 재미있는 이미지들도 없네요. 제가 말하는 게 뭔지 확실히 이해하려면 이 두 이미지를 잘 살펴보세요.12:18

그리고 나서 저는 이미지들을 이렇게 특정 태그를 달 수 있을 거예요. 여기 이 이미지가 바로 이것이고, 여기 이 격자 이미지가 바로 이것이고, 좀 더 멋진 디자인을 만들 수 있는지 한번 살펴볼게요. 솔직히 말씀드리면 저는 제미니를 사용하고 있는데, 좋은 모델이라고 생각해요. 하지만 쿼드 코드가 이런 종류의 작업에는 훨씬 더 잘 맞는 것 같아요. 이 작업이 진행되는 동안12:35

이제 나머지 과정들을 진행해서 실제로 라이브 환경에 배포할 수 있습니다. 이 과정에서 사용할 주요 플랫폼은 세 가지입니다. 첫 번째는 코드를 저장하는 곳인 Github이고, 두 번째는 사용자 정보(이메일, 이름 등)를 저장하는 Supabase입니다. 이를 통해 이메일 목록에 사용자들을 추가할 수 있으며, 마지막으로 배포 플랫폼으로 Vercel을 사용할 예정입니다.12:54

인터넷에 공개해서 웹사이트를 호스팅하는 아주 저렴하고 좋은 방법이에요. 우선 제 GitHub 프로필로 들어가볼게요. 레포지토리로 가서 새로 만들기를 클릭할 건데요. 여기서는 'agency lead magnet'이라고 이름을 지어볼게요.13:13

저한테는 괜찮아요. 그리고 다른 건 더 할 필요도 없고요. 공개할지 비공개할지는 본인이 결정하시면 돼요. 하지만 이건 본인 계정에 있으니까, 비공개로 설정해도 접근 가능해요.13:27

이건 이제 비공개로 만들어서 다른 사람이 접근 못 하게 할 거예요. 바로 '저장소 만들기' 버튼을 눌러서 진행할게요. 그럼 다 설정되고 바로 사용할 수 있을 거예요.13:36

한편, Antigravity에서는 반중력 효과를 주는 디자인 개선 계획을 수립했는데, 여기에는 도트 패턴, 격자 무늬, 패럴랙스 효과, 그리고 재미있는 이미지 요소들이 포함되어 있습니다.13:43

제가 일단 진행 버튼을 눌러서 어떻게 되는지 확인해볼게요. Antigravity를 사용하면 MCP 서버들과 연결되어서 자료를 업로드하는 게 정말 쉬워요.13:52

MCP는 모델 컨텍스트 프로토콜을 의미합니다. 여기 이 점들로 들어와서 MCP에 접근할 수 있는데, 기본적으로는 이 시스템들이 서로 대화할 수 있는 방법이라고 할 수 있어요. 스크롤하다 보면 몇 개의 점을 추가했고, 약간의 패럴랙스 효과도 생겼어요. 아직 충분하진 않지만 시작은 됐네요. 여기 이 섹션에서는 배경에 이런 격자 종이 스타일을 추가했습니다.14:00

음, 조금 도움이 되는 것 같아요. 여기 또 점이 생겼네요, 괜찮아요. 아래로 스크롤하면 이 종이 질감 그래프가 또 보이는데, 이 정보 추가하는 데는 잘 못 했어요. 하지만 조금 더 다듬고, 더 많은 리소스를 투입하면 더 좋은 결과가 나올 거라고 생각해요. 필요한 두 개의 MCP 서버는 깃허브입니다.14:18

여기 들어오면 그냥 Git을 검색해서 GitHub MCP에 접근할 수 있어요. 이걸 클릭하고 설치를 클릭하면 GitHub 개인 접근 토큰을 물어볼 거예요.14:35

깃허브 안에서 프로필로 와서, 여기서 설정으로 들어가세요. 쭉 아래로 내려가서 개발자 설정, 개인 접근 토큰으로 들어가면 됩니다. 여기서 '미세 조정 토큰'이라고 불리는 토큰을 사용해야 합니다.14:45

솔직히 제가 정확히 무슨 뜻인지 잘 모르겠지만, '새 토큰 생성'을 클릭하시면 이메일 주소 인증을 요청할 거예요. 그걸 진행하신 다음에, 토큰이 생길 거고, 그냥 복사해서 여기 붙여넣기하시면 돼요.14:56

그래서, Supabase도 비슷한 과정을 진행할 수 있습니다. MTP 서버를 이용해서 연결할 수도 있죠. Supabase는 테이블이나 이런 것들을 다 만들 수 있어서 정말 강력합니다.15:07

가이드 다운로드 버튼이나 무료 가이드 버튼을 누르면, 리드 자석을 받아들일 수 있도록 이름과 이메일을 입력하는 팝업이 필요해요. 이 정보를 저장하기 위해 Supabase에 프로젝트를 생성해 줘야 하고, Supabase MCP를 사용해야 합니다.15:17

제가 그들이 액세스하게 될 문서를 가지고 있어서, 공유 버튼을 클릭할 수 있어요. 링크를 가진 사람이 이 문서에 접근할 수 있다고 설정하고, 그들이 이름과 이메일을 입력한 후에는 여기 링크가 있는 성공 화면으로 넘어가도록 할 수 있어요.15:32

저희는 리드 마그넷을 다운로드 받는 사람들의 이름과 이메일 주소를 저장하기 위해 Supabase 데이터베이스를 구축할 계획입니다.15:46

앤티그라비티에서 이걸 모두 구현해 줄 거예요. 꽤 멋지네요. Supabase에 들어오면 새로운 테이블이 생기는데, 이름(first name), 이메일, 그리고 생성 시간을 기록하는 '리드(leads)' 테이블이 생깁니다.15:51

자, 가이드 다운로드를 클릭했을 때 어떤 일이 일어나는지 한번 볼까요? 새로운 팝업 모달이 떴는데, 저는 이게 정말 멋지다고 생각해요. 제 이름이랑 hello@hello.com을 넣을 수 있네요. 아주 좋아요.16:01

자, 잠금 해제 가이드 클릭하세요. 여기 보시면 '잠금 해제'라고 적혀 있는데, 실제로 PDF 파일로 바로 연결되어서 다운로드하거나 시스템으로 복사할 수 있어요.16:12

정말 멋지네요. 그리고 Supabase에 접속해서 페이지를 새로고침하면, 제 이름과 이메일 주소가 설정되어 바로 사용할 수 있을 거예요.16:22

자, 마지막으로 우리가 해야 할 일은 이 사이트를 실제로 띄우는 거예요. 방금 전에 만들었던 깃허브 저장소로 와서 이걸 복사해서, 안티 그래비티에 붙여넣고, 이 프로젝트를 이 깃허브 저장소로 푸시해보세요. 보내기 버튼을 누르면 됩니다.16:31

그리고 MCP을 통해 GitHub에 연결되어 있으므로 코드를 모두 업로드하는 데 문제가 없을 거예요. 깃허브 저장소에 랜딩 페이지 프로젝트를 성공적으로 업로드했고, 다시 여기 들어오면 모든 파일이 준비된 것을 확인할 수 있습니다.16:45

다음 단계는 Vercel로 이동하는 거예요. 계정을 만들 때 GitHub와 연결하라고 할 텐데, 그냥 연결해주세요. 그러면 여러분의 모든 저장소에 바로 접근할 수 있게 됩니다.16:58

여기서 바로 가져오기 버튼을 클릭할 수 있습니다. 저희 에이전시 리드 마그넷이 방금 49초 전에 업데이트되었고, 이 내용을 가져오려면 리드 마그넷 이름, 프레임워크 프리셋 같은 걸 그냥 배포 버튼을 누르고 기본 설정을 사용할 겁니다.17:09

다 괜찮아요. 덩컨의 프로젝트에 새로운 프로젝트를 배포한 거예요.17:22

여기서 바로 열어볼 수 있어요. 이제 이 에이전시 리드 매그넷.버셀 앱을 웹상의 누구에게든 보낼 수 있어요. 그리고 만약 다운로드 가이드, 테스트닷컴을 클릭하면, 계속해서 잠금 해제 가이드로 연결될 거예요. PDF 웹사이트로요.17:27

정말 놀랍죠. 그리고 슈퍼 베이스로 다시 들어가면 바로 이름과 이메일 주소가 떴네요. 이제 이걸 이메일 캠페인이나 뉴스레터에 활용할 수 있겠네요. 란딩 페이지 만드는 법을 이제 아셨으니, 99% 이상의 사람들보다 안티 그래비티를 더 잘 활용할 수 있는 8가지 팁을 알려드릴게요. 곧 거기서 만나요.17:42