Lovable로 완벽설명

https://www.youtube.com/watch?v=CfwNxDEXe6I

Master Lovable AI in 30 Minutes (Beginner Tutorial)

  - 이 비디오에서는 제 정신을 가장 많이 흔들어 놓은 AI 도구인 Lovable을 사용하여 유튜브 클론을 만들 것입니다. 코드를 알 필요가 없다는 것, 그리고 기본적으로 잡담하듯 로그인, 검색, 업로드, 심지어 댓글과 좋아요 기능까지 갖춘 앱을 만들 수 있다는 것은 정말 마법 같은 일입니다. 불과 1년 전만 해도 엔지니어가 며칠, 아니 몇 주가 걸렸을 작업이지만, 이 비디오에서는 30분 만에 해낼 것입니다. 바로 시작합시다. Lovable.dev로 가서 가입하거나, 돈을 아끼고 싶다면 아래 링크를 사용해 10% 할인을 받을 수 있습니다. 다음 단계는 Lovable로 AI 빌딩을 위한 특정 모범 사례를 따르는 것입니다. 이는 가능한 최고의 결과를 얻기 위함이므로 여기를 건너뛰지 마십시오.

  - 첫 번째 단계는 AI로 무언가를 만들 때마다 멈춰서 생각해야 한다는 것입니다. 우리는 스스로에게 무엇을 만들고 있는지 물어봐야 합니다. 사소하게 들릴지 모르지만 이 단계는 매우 중요합니다. 왜냐하면 지침이 좋을수록 AI는 자신의 작업을 더 잘 수행할 것이기 때문입니다. AI를 사용하더라도 무언가를 구축할 때 오류가 발생하기 마련이고, 보통은 '이거 고쳐주세요' 버튼을 클릭하는 것만큼 쉽지만, 우리는 가능한 한 오류를 피하고 싶습니다. 어떻게 해야 할까요? 우리는 요구 사항 목록을 만듭니다. 직접 입력하고 싶지 않다면 제가 사용하고 있는 프롬프트 템플릿을 설명의 링크에서 찾을 수 있습니다. 기본적으로 앱 개요(앱이 무엇에 관한 것인지 설명), 페이지 목록(앱에 포함하려는 모든 페이지), 페이지별 기능, 데이터베이스 요구 사항(예: 사용자, 비디오 업로드, 좋아요, 댓글 등)이 필요합니다. 이 모든 것이 데이터베이스의 일부여야 합니다. 또한 미적 및 시각적 선호도, 개발 순서(일반적으로 UI로 시작한 다음 나중에 데이터베이스 연결로 이동)가 있습니다. 마지막으로 앱의 첫 페이지에 대한 몇 가지 UI 세부 정보가 있습니다.

  - 좋습니다. 이제 Lovable로 넘어갑니다. 여기 작은 텍스트 필드 또는 입력 필드를 선택하고 우리가 가지고 있던 프롬프트를 붙여넣을 것입니다. 다음 단계는 제가 미리 이 레이아웃을 만든 피그마 파일로 이동하는 것입니다. 이는 Lovable에게 제가 원하는 모습에 대한 매우 명확한 지침을 제공하는 데 도움이 될 것입니다. 그러나 이것이 필수는 아닙니다. 프롬프트만으로도 만들 수 있으며 여전히 매우 좋은 결과를 얻을 수 있습니다. 저는 매우 구체적인 종류의 UI를 원하기 때문에 이 스크린샷들을 사용하고 있습니다. 스크린샷을 찍어 Lovable로 돌아가 여기에 붙여넣을 것입니다. 이제 이것을 당분간 비공개 프로젝트로 변경한 다음 버튼을 클릭하고 Lovable이 마법을 부리도록 할 것입니다.

  - 여기서 제가 여러분이 싫어할 수도 있는 작은 면책 조항을 말씀드리고 싶습니다. 그러나 이것은 진심에서 우러나온 말입니다. 저는 이 도구를 정말 좋아합니다. 처음 사용하기 시작했을 때 5분 만에 저는 Lovable에 연락하여 협업에 관심이 있는지 확인해야 한다는 것을 알았습니다.

  - 그래서 이것은 스폰서 비디오이자 협업 비디오입니다. 그러나 진심으로 저는 이것이 시장에서 동종 최고의 도구라고 생각하며, 여러분은 지금 여기서 직접 눈으로 확인하게 될 것입니다. 이제 로딩을 기다리고 어떤 결과가 나오는지 봅시다. 첫 페이지가 나왔는데, 시작부터 아주 놀라운 작업입니다. 멋지네요. 이제 중앙의 로고 타입과 내비게이션을 수정하겠습니다. 제가 로고 타입을 첨부 파일 섹션에 업로드하고 보낼 것입니다. 자, 로고 타입이 여기 있습니다. 제가 추가하고 싶은 몇 가지 사항은 다음과 같습니다. 내비게이션 로고 타입은 로그아웃 상태일 경우 항상 환영 페이지로 연결되어야 하며, 로그인 상태일 경우 피드 페이지로 연결되도록 할 것입니다. 또한 로그인 버튼과 시작하기 버튼을 로그인 페이지에 연결하고, 회원가입 링크는 회원가입 페이지로 연결되도록 할 것입니다.

  - 좋습니다. 시작하기를 누르니 404 오류가 발생합니다. 작동하지 않습니다. 로그인도 마찬가지이고, 회원가입도 마찬가지입니다. 이미 페이지에 있기 때문에 링크 표시기는 나타납니다. 이제 시작하기 버튼이 로그인이라고 불리게 하고 로그인 페이지로 연결되도록 하겠습니다. 잘 작동하는지 봅시다. 안 됩니다. 여기서 404 오류가 발생하지만 Lovable은 이것을 보지 못합니다.

  - 그래서 저는 Lovable에게 이 로그인 버튼을 클릭하면 404 페이지로 이동한다고 알려주고 수정해 달라고 요청해야 합니다. 이것이 수정되는 동안 Lovable, AI, 그리고 모든 코딩 도구에서 이러한 종류의 문제가 발생할 수 있습니다. 오류가 발생하고, Lovable은 때때로 스스로 오류를 인지하지 못합니다. 때로는 오류가 있다는 것을 알고 수정 버튼을 제공하기도 하지만, 이 경우에는 오류가 있음을 이해하도록 제가 그 맥락을 제공해야 했습니다. 이제 작동합니다. 여기를 다시 클릭하고 로그인을 클릭하면 작동합니다. 여기 로그인을 클릭해도 작동합니다. 회원가입은 여전히 작동하지 않습니다.

  - 그래서 회원가입 링크도 수정하고 404 오류를 수정하겠습니다. 이제 시도해보니 회원가입도 작동합니다. 멋지네요. 다음 단계는 실제로 프로젝트의 데이터베이스를 만드는 것입니다. 화면에 무언가를 보여주는 것 이상의 기능이 필요하다면, 예를 들어 사용자, 비디오, 좋아요, 댓글 등이 필요하다면 데이터베이스에 연결해야 합니다. Lovable에서는 이것이 매우 간단합니다. Superbase로 이동하겠습니다. 이것은 Lovable에 통합되어 있어 매우 쉽습니다. 여기에서 프로젝트 연결을 클릭하고 이메일 주소를 입력한 다음 새 프로젝트를 만들겠습니다. 이름을 'food tube'(O 세 개가 매우 중요합니다)라고 하고 무작위 비밀번호를 설정한 다음 새 프로젝트를 만들겠습니다.

  - 이것이 생성되는 동안, 여러분이 저처럼 AI 튜토리얼 콘텐츠 제작을 좋아하신다면 (제가 하지 않겠다고 말했지만 Lovable 덕분에 튜토리얼에 대한 열정이 다시 생겼습니다) 그리고 우리가 살고 있는 이 AI 시대의 창의적인 미래에 더 깊이 들어가고 싶다면 제 뉴스레터를 확인하십시오. AI 시대에 대체 불가능한 존재가 되는 데 필요한 모든 것을 다룹니다. 링크는 설명에 있습니다. 잠시의 어색한 침묵 후에 Superbase에서 프로젝트가 설정되었습니다. 당분간은 이것에 대해 더 이상 생각할 필요가 없습니다. Lovable로 돌아가면 이제 설정이 완료되었습니다. 프로젝트로 이동하면 'food tube'라는 활성 프로젝트가 보이고 연결할 수 있습니다. 연결하겠습니다. 이 모달이 나타나면 연결을 클릭하고 이제 프로젝트에 연결된 것을 볼 수 있습니다.

  - 이것은 중요합니다. 왜냐하면 이제 기본적으로 사용자를 만드는 단계로 넘어가고 싶기 때문입니다. 로그인할 수 있도록 계정을 만들 수 있어야 합니다. 이를 위해 Lovable에게 멋지네요, 이제 인증이 작동하는지 확인합시다라고 말할 것입니다. 엔터를 누르면 SQL 코드가 나타나는데, 제가 게으르기 때문에 (읽지 않고) 이것이 좋다고 가정하고 변경 사항 적용을 클릭할 것입니다. 이것이 멋진 점입니다. 저처럼 게으르거나 코드를 잘 모른다면 (저는 코드를 조금 알지만 프로그래머나 엔지니어는 아닙니다) 이제 창작자로서 이런 식으로 우리 자신의 아이디어를 만들 수 있습니다. 저는 잡담만으로 유튜브 클론을 만들고 있는 것입니다. 좋습니다. 이제 설정되었다고 합니다. 제 이메일을 추가해 보겠습니다. 사실 사용자 이름도 넣고 싶었습니다.

  - 그래서 추가해 봅시다. 감사합니다. 실제로 회원가입 페이지에 사용자 이름도 추가하고 데이터베이스에도 추가되었는지 확인합시다. 자, 이제 이메일을 입력합니다. 저는 제 이메일을 사용할 것입니다. 사용자 이름은 Tim Gabe로 하겠습니다. 비밀번호를 추가하고 붙여넣습니다. 이제 진실의 순간입니다. 성공입니다. 그리고 계정을 확인하려면 이메일을 확인하라는 메시지가 나타납니다. 계정을 확인하기 위해 이메일을 보내는 것입니다. Superbase에서 이메일을 확인하면 이 화면이 보일 것입니다. 깨진 것처럼 보이지만 작동합니다. 아직 이 페이지를 수정하지 않았지만 괜찮습니다. 이제 확인되었으므로 필요하지 않습니다. 여기로 가면 자동으로 로그인 페이지로 이동된 것을 볼 수 있습니다. 이메일과 비밀번호를 입력하고 로그인합니다. 아무 일도 일어나지 않습니다. 좋습니다. 고칠 수 있습니다.

  - 로그인은 작동하지 않지만 인증은 작동한다고 말하고 있습니다. 이제 다음 스크린샷을 보여주고 싶습니다. 비디오가 없을 때의 홈페이지 또는 피드 페이지 스크린샷입니다. 아직 비디오가 없습니다. 저는 이것을 넣고 이것이 홈/피드 페이지이며 비디오가 업로드되지 않았을 때의 모습이라고 말할 것입니다. 로그인할 때 여기에 도착하도록 하고 로그인도 작동하도록 확인해주세요. 좋습니다. 다시 로그인해 봅시다. 자, 여기 있습니다. 처음부터 거의 완벽하게 해냈습니다. 아바타 버튼이 되어야 하는 것, 검색이 올바르지 않은 것, 이 이미지가 올바르게 보이지 않는 것 등 수정해야 할 몇 가지 사항이 있습니다.

  - 그래서 멋지네요, 당신은 최고입니다. 여기에 업로드하는 이미지로 가운데 이미지를 업데이트합시다. 제가 가지고 있는 이 이미지를 첨부하겠습니다. 또한 검색 창이 테두리 없이 둥글게 처리되도록 합시다. 마지막으로, 아바타 아이콘에 실제로 아이콘이 있고 클릭 시 로그아웃할 수 있는 팝오버가 있도록 합시다. 이제 저는 이 프롬프트에 많은 내용을 추가했는데, 문제가 될 수도 있습니다. 때로는 AI가 알아내고 때로는 그렇지 않습니다. 일반적으로 지침을 적게 줄수록 정확하게 실행하는 데 더 좋습니다. 그러나 우리는 더 많은 토큰을 구매하지 않는 한 사용할 수 있는 토큰 양이 제한되어 있습니다.

  - 그래서 적절한 균형을 찾아야 합니다. 좋습니다. AI가 대부분의 것을 올바르게 파악했습니다. 이미지가 올바르게 보이지 않습니다. 멋지네요, 이미지를 수정합시다. 중앙의 이미지가 컨테이너 안에 맞도록 합시다. 지금은 잘리고 있습니다. 이제 이미지 컨테이너의 배경색을 제거하도록 합시다. 또한 검색 창을 더 짧게 만들고 가로 패딩을 4픽셀 정도 더 추가하여 깔끔하게 정리합시다. 자, 여기 있습니다. 완벽하지는 않고, 제가 원했던 것만큼 선명하게 보이지는 않지만, 계속해서 이렇게 작업하여 우리가 원하는 대로 정확하게 보이도록 할 수 있습니다. 하지만 지금은 괜찮습니다.

  - 제가 지금 하고 싶은 것은 이 업로드 버튼이 작동하도록 확인하는 것입니다. 멋지네요, 이제 업로드 버튼이 비디오를 업로드할 수 있는 모달을 트리거하도록 합시다. 썸네일, 비디오 제목, 설명과 같이 필요한 모든 필드를 포함합니다. 여기서 원치 않는 변경 사항이라고 말하는 것이 나옵니다. 기본적으로 같은 내용을 다른 방식으로 다시 물어보라고 요청합니다. 방금 작성한 내용을 바탕으로 '업로드 버튼이 비디오를 업로드할 수 있는 모달을 트리거하도록 합시다'라고만 하고 무슨 일이 일어나는지 보겠습니다. 좋습니다. 작동하는지 봅시다. 업로드! 붐! 작동합니다. 업로드! 붐! 작동합니다. 제목, 설명, 썸네일 및 비디오 필드가 있습니다. 이것을 테스트하고, 썸네일용 파일을 선택하고, 비디오를 선택하고, 업로드를 클릭하면 아직 아무 일도 일어나지 않습니다.

  - 그래서 다시 멋지네요, 이제 업로드 비디오를 클릭했을 때 실제로 업로드가 이루어지도록 합시다. 모든 필드를 올바르게 채우고 항목을 업로드했다고 가정합니다. 그리고 다시 이 SQL 코드를 받습니다. 이것을 적용합니다. 다시 한번 말씀드리지만, 사람들이 이러한 내용을 읽고 가능한 한 코드를 많이 이해하려고 노력하는 것이 도움이 될 것입니다. 왜냐하면 AI로 디버그하고 생성하는 것이 더 쉬울 것이기 때문입니다. 그러나 저처럼 게으르더라도 도구가 작업을 해주기 때문에 여전히 해낼 수 있습니다. 좋습니다. 파일이 커지고 있다고 표시되므로 더 나은 유지보수를 위해 리팩토링하여 작게 만들 것인지 묻습니다. 하지만 그 전에 실제로 작동하는지 봅시다. 'homemade pasta'라고 하고, 설명은 한 줄 정도 쓰고, 썸네일을 선택하고, 파스타 비디오는 없지만 이 비디오를 선택합시다. 진실의 순간, 업로드! 그리고 'null 속성을 읽을 수 없음' 오류가 발생하며 리셋을 읽을 수 없습니다.

  - 여기서 Lovable이 '이거 고쳐주세요' 버튼을 제공하지 않는 것을 볼 수 있습니다. 그래서 우리가 직접 조사하고 싶다면 마우스 오른쪽 버튼을 클릭하고 검사를 선택할 수 있습니다. 개발자 도구 메뉴가 나타나고, 여기서 콘솔 탭을 선택하면 요청 등 모든 콘솔 내용을 볼 수 있습니다. 여기서 빨간색으로 보이는 것을 복사하여 Lovable에게 맥락을 제공하고 무엇을 고쳐야 하는지 알려줄 수 있습니다. 저는 아래에 있는 이 내용을 복사하여 '이 오류가 발생했습니다. 고쳐주실 수 있나요?'라고 말하고 비디오를 업로드하려고 할 때 이 오류가 발생한다고 맥락을 제공할 것입니다. 그리고 실행하도록 하겠습니다. 좋습니다. 다시 한 번 시도해 봅시다. 게으르니까 속도를 위해 간단히 테스트라고 입력하고 썸네일과 비디오를 업로드하고 다시 시도해 봅시다. 이제 비디오가 성공적으로 업로드된 것 같습니다. 좋습니다. 문제는 비디오가 보이지 않는다는 것입니다.

  - 그래서 저는 피그마 파일로 돌아가서 이 스크린샷을 찍어 Lovable에 붙여넣을 것입니다. 이제 작동하는 것 같습니다. 비디오가 데이터베이스에 업로드된 것 같습니다. 그러나 첫 번째 비디오를 업로드하면 표시해야 합니다.

  - 그래서 비디오를 업로드한 후 스크린샷으로 제출한 레이아웃으로 변경합시다. 우리가 그렇게 했을 때 새로운 오류가 발생했습니다. 이제 Lovable이 스스로 오류를 감지한 것을 볼 수 있습니다. 그래서 저는 그냥 '수정 시도'로 이동할 것입니다. Lovable이 문제가 무엇인지 알고 있다고 생각하기 때문에 변경 사항 적용 옵션을 제공했습니다. 변경 사항을 적용하겠습니다. 이제 비디오가 여기에 업로드된 것 같습니다. 멋지네요. 심지어 자체 디자인 선택을 하여 각 카드에 '지금 보기' 버튼을 추가했습니다. 좋습니다. 작동하고 있습니다.

  - 저는 이제 리팩토링을 할 것입니다. AI가 리팩토링을 요청하는 것은 좋은 습관이지만, 우리는 게으르고 그냥 일이 일어나기를 원합니다. 이 도구로는 너무 빨리 일어나기 때문에 그 시간을 낭비하고 싶지 않고 더 많은 것을 만들고 싶어집니다. 아무튼 좋습니다. 리팩토링이 완료되었습니다. 이제 '지금 보기'를 클릭하면 아무 일도 일어나지 않습니다. 각 카드에는 꽤 멋진 호버 효과가 있습니다. 비디오가 업로드되었습니다. 실제로 우리가 원하는 대로 작동하는지 확인하기 위해 다시 한 번 업로드를 시도해 보겠습니다. 제목은 'Pancakes Deluxe'로 하고, 설명은 '이것이 최고의 팬케이크입니다'라고 하겠습니다. 실제로 팬케이크는 없지만 여기 사람들을 속일 것입니다. 하지만 이 경우 부끄러워할 필요는 없습니다. 비디오 업로드! 비디오가 업로드되었습니다.

  - 이제 실제로 이 세부 정보 페이지를 클릭할 수 있는지 확인하겠습니다. 비디오 카드를 클릭하면 비디오의 세부 정보 페이지로 연결되기를 원합니다. 피그마로 돌아가서 다시 스크린샷을 찍고 여기에 붙여넣은 다음 엔터를 누릅니다. 이제 작동하는지 봅시다. 클릭하면 세부 정보 보기가 나타납니다. 멋지네요. 좋습니다. 제가 찾던 시각적 미학은 아니지만 괜찮습니다. 이제 댓글과 좋아요도 작동하는지 확인하겠습니다. 감사합니다. 좋아요를 클릭하면 UI와 데이터베이스에 좋아요가 추가되는지 확인합시다. 댓글도 마찬가지입니다. 댓글을 추가하면 UI와 데이터베이스에 추가됩니다. 변경 사항 적용을 클릭합니다. 변경 사항 적용, 변경 사항 적용. 이것이 AI를 사용하는 과정입니다. 이러한 오류를 겪어야 하고, 변경 사항을 적용해야 하며, 문제를 해결하고 오류를 처리해야 합니다.

  - 그러나 결국에는 며칠 또는 몇 주 대신 몇 분 만에 앱을 만드는 속도로 작업하고 있기 때문에 그만한 가치가 있습니다. 멋지네요. 이제 댓글 기능을 구현합시다. 기본적으로 AI가 데이터베이스에서 많은 것을 변경했고, 이제 UI에서 올바른 구성 요소와 실제로 댓글을 추가하는 데 필요한 모든 것을 갖추고 구현을 시작할 준비가 되었습니다.

  - 자, 댓글 섹션이 있습니다. 댓글을 추가하고 게시할 수 있으며, 댓글이 성공적으로 게시되었습니다. 멋지네요. 이제 여기를 클릭하면 아무 일도 일어나지 않습니다. 멋지네요, 이제 좋아요 버튼을 클릭하면 각 비디오에 좋아요를 추가할 수 있는지 확인합시다. 좋아요 버튼을 클릭하면 하트가 떠오르고 매끄럽게 사라지는 애니메이션이 나타나도록 하고 싶습니다. 또한 비디오에 좋아요를 누르면 클릭한 하트가 빨간색이 되도록 만드십시오. 붐! 다시 변경 사항을 적용해야 합니다. 모든 것이 작동하도록 데이터베이스의 내용을 변경해야 합니다. 오류가 발생했습니다. 로그를 보여주고 문제가 무엇인지 확인하는 척하며 '친구여, 우아하게 수정해 주세요. 감사합니다'라고 말합니다. 자, 진실의 순간입니다. 좋아요를 클릭하면 애니메이션이 나타나고 빨간색이 되지만 숫자가 바뀌지 않습니다.

  - 그래서 숫자도 변경하도록 요청합시다. 다시 시도해 봅시다. 붐! 그리고 약간의 싸움 끝에 작동합니다. 좋아요 기능이 있고 멋진 작은 애니메이션도 있습니다. 그러나 비디오가 없습니다.

  - 그래서 먼저 감사합니다. 썸네일 대신 비디오가 상단에 표시되도록 확인합시다. 자, 여기 있습니다. 이제 썸네일 대신 비디오가 있습니다. 마음에 듭니다. 이제 비디오 피드로 돌아가서 이 다양한 비디오들을 클릭해 봅시다. 작동하는 것 같습니다. 여기서 좋아요를 추가할 수 있고 비디오가 재생됩니다. 소리도 켜져 있습니다. 여기로 들어가면 또 다른 비디오가 있고, 비디오가 재생되기 전에 썸네일을 보여줍니다. 이것도 꽤 멋집니다. 이 모든 것이 작동하는 것 같습니다. 이제 마지막으로, 실제로 두 번째로 마지막으로 할 일은, 여기에 올바른 숫자가 없는 것을 볼 수 있다는 것입니다. 여기를 클릭하면 댓글 4개, 좋아요 1개로 정확합니다. 그러나 여기서는 아직 연결되지 않았습니다.

  - 그래서 빠르게 연결합시다. 멋지네요, 이제 비디오 피드 페이지에서 각 카드에 댓글과 좋아요의 정확한 값이 표시되도록 확인합시다. 자, 여기 있습니다. 이제 좋아요 1개, 댓글 4개, 좋아요 1개, 댓글 2개가 있고, 여기는 0입니다. 들어가서 확인하면 실제로 0, 0입니다. 멋지네요. 이제 작동합니다.

  - 라운드 오프하기 전에 마지막으로, 기능적으로는 하나만 더 남았습니다. UI는 아직 완벽하지 않지만, 기능적으로 마지막으로 수정할 것은 검색입니다. 'pan'을 검색해도 아무 일도 일어나지 않습니다.

  - 그래서 검색 기능을 연결해야 합니다. 다시 한번 감사합니다. 피그마 파일로 이동하여 이 검색 결과 스크린샷을 찍고 Lovable에 붙여넣겠습니다. 이제 검색 필드에 무언가를 입력하고 엔터를 누르면 결과가 포함된 검색 페이지가 표시되는지 확인합시다. 이 스크린샷을 참고 자료로 보세요. 그렇게 하자 오류가 발생합니다. 오류를 수정합시다. 3, 2, 1. 좋습니다. 이제 확인해 봅시다. 검색에서 'pan'을 입력하고 검색하면 'Pancakes Deluxe' 결과가 나옵니다. 뒤로 돌아가서 'home'을 검색하면 'homemade pasta'가 나옵니다. 클릭해서 좋아요를 누르면 좋아요가 추가됩니다. 이제 모든 것이 작동하는 것 같습니다. 우리는 며칠 또는 몇 주가 아닌 몇 분 만에 우리만의 작은 유튜브 클론을 만들었습니다. 이제 AI 시대에 창의성을 가지고 살아남는 것, 창의적인 사람으로서 대체 불가능한 존재가 되는 것에 대해 제가 새로운 것을 발견할 때마다 알림을 받고 싶다면 다시 한번 뉴스레터를 확인하십시오. 링크는 설명에 있습니다. 그럼 모든 것이 놀랍기를 바라며, 곧 다시 이야기합시다.

---
감사합니다.