Lovable.dev: 최고의 AI 소프트웨어 개발 도구? 전체 리뷰 및 튜토리얼

Lovable.dev는 슈퍼베이스 에지 함수를 사용하여 신속한 풀스택 앱 생성을 지원함으로써 경쟁 AI 개발 툴을 능가합니다.

### Lovable.dev: Bolt 및 Cursor를 능가하는 최고의 AI 소프트웨어 개발 도구
* 👨‍💻 Lovable.dev는 **Bolt와 Cursor를 뛰어넘는 최고의 AI 소프트웨어 개발 도구**로 평가되었습니다.
* ⏱️ 한 시간 이내에 완벽하게 작동하는 애플리케이션을 개발하는 데 성공했습니다.
* 🔗 Lovable.dev는 **Supabase와의 독점적인 연결 기능**을 제공하며, Supabase 내부의 모든 것을 편집하고 **Edge Functions**를 추가할 수 있습니다.
* 🤯 **백엔드 서버 없이** 애플리케이션을 실행할 수 있는 놀라운 기능을 선보였습니다.  이는 **Edge Functions**를 통해 프론트엔드와 데이터베이스만으로 애플리케이션을 구동하기 때문입니다.
* 💻  **Harbor와 유사한 기능**을 재현했으며, Anthropic의 Claude AI와 Supabase를 사용하여 콘텐츠 생성기를 구축했습니다.
* 🛠️  개발 과정에서 여러 오류 수정을 거쳤으며, OpenAI와 Gina AI를 통합하여 웹 스크래핑 및 최적화된 콘텐츠 생성을 달성했습니다.  "**Gina는 모든 웹페이지를 LLM이 읽을 수 있는 텍스트로 변환**"하는 데 중요한 역할을 했습니다.
* 🚀 Lovable.dev를 사용하여 단 20분 만에 애플리케이션을 완성했으며, 이는 다른 도구들보다 훨씬 빠른 속도입니다.
* 👀  Lovable.dev의 **"Featured" 섹션**에서 다른 사용자들이 개발한 코드를 확인할 수 있지만, API 키 등 중요 정보 노출에 주의해야 합니다.

Welcome to this video where we're going to be discussing something incredibly exciting, which is Lovable.dev. Now, in

my opinion, this thing beats Bolt, it beats Cursor; it's the best AI software development tool that I've used so

far. I'm going to show you a project that I built in less than an hour that is fully functioning. Okay, I'm going to show

you how I built it, and then we will have a little bit of a play around with some of the features here. But I'm probably

not going to code an entire app in this video. Probably one thing that Lovable has that no other tool has is a

connection to Supabase. But it's not just the connection to Supabase; okay, it's not just a basic connection; it will

edit everything inside your Supabase. It will add edge functions, which I didn't even know this, but apparently

that means that you can run an entire app like this without a backend. Okay, you literally—this entire app is just

sitting on Lovable. Okay, there's no backend server, which is very, very, very, very interesting to me. Now, let's just

open this up. So if I press 'publish,' and then if I just open this up, you'll see this exists and it does work. So I'll

sign in with Google here. So it has OAuth already, which means it has a database, of course, and then you can see

here it's very, very similar to, um, to Harbor, basically. Yes, I recreated Harbor, um, pretty much for

free. Um, so let's just press 'generate' here, and we'll we'll see what happens. So, "2 men iTab XML men's sneakers 2024." All

it's going to do is it's going to Harbor-ify this, um, article, basically. So it's using pretty much the same process as

Harbor, but the really, really interesting thing is that there's no—I, I don't want to say there's no

backend because I'm not exactly sure what that would mean, but from my understanding, there's no backend server running.

You would normally need a backend server here, but instead, what we've got is Edge Functions on Supabase. So if I just go

on my Supabase—okay, and I do not, for context, understand what the hell an Edge Function is, okay—

but they're here and they exist. So, kind of in my head, I can explain, although I'm probably going to get loads of comments

saying that this is wrong, but basically, from my understanding, what this means is that you are running your

app purely from the frontend and database; there's nothing else. There's no backend server; it's frontend and database

because if you look, what this is, is these are the functions inside the application, right, that are being run

through Supabase, which is really, really, really cool if you ask me. So this is what it came out with. Let's

just press save content here, um, and then that will save it to my, um, to my database basically. And then

let's just grab this article, go to Markdown HTML. Now, obviously, I'm not saying this is the perfect, um, this isn't a

perfect system by any means, but I made this in such a short amount of time, um, and I didn't do any prompting or

anything for this; it's literally just telling Lovable what I wanted. So let's run through the process that I went

through. So I just said, "Make me a content generator which uses Anthropic's Claude AI for web scraping and Supabase for the

database.  Basically, input should be sitemap URL and keyword; then it should create the website's sitemap, find relevant pages in the

article, um, for the article, then scrape those pages with Claude, then write an SEO-optimized article using Anthropic's API." So

It came out with this first time round, um, just very basic. And then I added my Anthropic key; it automatically

connected to Supabase. Okay, and then I just said, "Please connect Supabase to project High High High," or

it said that. Then I just said, "For the code present, there's an error," because obviously there are going to be errors.

There's another error, and then what it did was it created these Edge functions. Okay, this is where it gets super, super

interesting, super cool. Basically, it goes on Supabase; you don't have to touch anything, and it will create the Edge

function for you without you even opening Supabase, which is very, very cool. So then it made those Edge

functions. We had a few more errors—another few errors—there we go, a few errors. Then it changed to OpenAI. I

didn't ask it to do this, but, you know, I'm not completely against it using OpenAI. And then I said, "No content

is shown on the generated content section." So it fixed that.  "Is there a reason the final content doesn't have

any images scraped using uh, Gina? Gina should turn any pages into LLM-readable text." And then I gave it um—and it says

"This doesn't display content" again. Then I actually gave it the Gina documentation here, and I just said, "This

is very interesting. Okay, this is what I really believe separates Lovable from Bolt." I said, "Please use a logical mix of

OpenAI for decision-making and Gina for scraping to get highly relevant contextual data." And then I sent it the

Gina AI uh, documentation, which, just for context, if you go on gina. and then at the top here, just press "API," and then on

the right, just press "Integrate," and then copy the full prompt. If you then copy that prompt anywhere, then you will teach an

LLM how to code with Gina. Okay, for context, what Gina does is it basically just scrapes—it turns any website

into LLM-readable text. Basically, I centered this, and then, amazingly—and I couldn't believe it when

I did this—it basically nailed what I needed it to nail. So this was just another Edge Function error, so this

fixed the super-based Edge Function, and then there was another error, and then another error, a final error, I

believe, and then I gave it a final flow. So: scrape the sitemap, find relevant pages, scrape those pages, extract images using

OpenAI ChatGPT 4, mini JSON mode, write an article with the context, and then that works. That

literally worked just from those, you know, 10–15 steps. It managed to create something, and then I just said, "Please

add… adding OO is not… um, it can't automate this just yet. You do have to go

inside Superbase for this to kind of fix this." Um, but yeah, that that was literally it, and then we have a fully functioning app.

Um, and it literally took me 20 minutes compared to, you know, to get to this point here on

Cursor or Bolt or whatever—you're probably looking at two to three hours, whereas Lovable literally did it in, you

know, I want to say 15, 20, 25 minutes, I think, for that, for for this video. We'll

leave it there. Um, but I'm definitely going to be making more videos about Lovable because I do really, really

really like this project. It's amazing. It seems much better than Bolt, much better than Cursor, and it just seems to

understand—not only understand what you want better, but also put the pieces of the puzzle together in a much, much more

Effective way. I'll leave the video there, guys. Check out Lovable for yourselves; you can use it for free. I got the paid

version just because there are things here that I don't want people to be able to see—some really cool things. By the

way, just so you know, you can click on "Featured" here and you can actually see other people's code. This is why I

paid for the premium one, just because I didn't want people to see my code. You can see what people are building; you can

see how people built whatever they're building. So if I click on this one, for example, you can see... uh... I probably

shouldn't say this, but um, yeah, this is also a really good place to find API keys and things like that

because most likely people are putting their API keys here. They shouldn't. Uh, do not put any API keys on this, guys. Just

say no. Um, but yeah, you can—you can basically—you can almost definitely find API keys here as well, but I

shouldn't have even mentioned that, to be honest with you. Um, so yeah, have a look at these featured sections; have a look

at the latest sections; see what other people are building; see what you could build; um, and just—yeah—just—just

have fun with it, to be honest with you. I'll leave the video there, guys. Really, really exciting project. I really, really

enjoy looking at these new AI projects, and Lovable.dev is definitely up there with one of the best that I've ever seen.

Thank you so much for watching, guys. If you're watching all the way to the end of this video, as usual, you're a legend, and I will see you very, very soon with some more content. Peace out.

Watch this video if you want some real use

cases for the new streaming AI that Google has come out with.

Lovable.dev just DESTROYED Bolt.new

The No B.S, No Secrets YouTube Channel For Organic Marketing Strategies.

Join as we uncover new strategies every day for marketing your business online with an organic-first approach. There are too many YouTube gurus out there making outlandish claims about what's possible and our mission is to make sure you get honest, no secrets, no "buy more course to find out the last 10% to succeed". 

Thanks for being here and supporting us to 100K subscribers. We're excited to continue to grow, explore together and help you gain the leading edge in your organic marketing. 

PEACE!


Income stream surfers

Lovable.dev 소개 및 기타 AI 개발 도구와의 비교

Lovable.dev는 Bolt, Cursor보다 우수한 AI 소프트웨어 개발 도구로 평가됨.

1시간 이내에 완전히 작동하는 프로젝트 구축 사례 소개.

Supabase와의 연결 기능을 강조, 단순 연결 이상의 기능 제공.

백엔드 없이 애플리케이션 실행 가능 (Edge Functions 활용).

실제 작동하는 애플리케이션 데모 시연 (Google OAuth 로그인 포함).

Harbor와 유사한 기능 및 백엔드 없는 구조 설명

Harbor와 유사한 방식으로 콘텐츠 생성, 백엔드 서버 없이 Edge Functions 사용.

백엔드 서버가 없다는 점을 강조, 프론트엔드와 데이터베이스만으로 작동.

Supabase의 Edge Functions 설명 (본인의 이해를 바탕으로).

프론트엔드와 데이터베이스만으로 애플리케이션 실행 방식 설명.

Supabase를 통해 실행되는 애플리케이션 내부 함수 설명.

Lovable.dev를 사용한 콘텐츠 생성 프로세스 및 문제 해결 과정

Anthropic의 Claude AI, Supabase를 사용한 콘텐츠 생성기 제작 과정 설명.

Anthropic 키 추가 및 Supabase 자동 연결.

오류 발생 및 Edge Functions 자동 생성 과정.

OpenAI 사용 및 추가 오류 수정 과정.

Gina AI 통합을 위한 설명 및 Lovable.dev와 Bolt의 차별점 강조.

최종적으로 작동하는 콘텐츠 생성기 완성.

Lovable.dev 사용 시간 및 기타 도구와의 비교

Lovable.dev를 사용하여 15~25분 만에 애플리케이션 구축.

Cursor나 Bolt보다 훨씬 빠른 개발 시간을 강조.

Bolt, Cursor보다 우수한 성능 및 이해도를 강조.

유료 버전 사용 이유 및 다른 사용자 코드 확인 기능 설명.

Lovable.dev의 추가 기능 및 주의 사항

다른 사용자의 코드 확인 기능 소개.

다른 사용자의 프로젝트 확인 및 Lovable.dev 활용 권장.