[Lovable]  https://lovable.dev/

 

Lovable

Build software products, using only a chat interface

lovable.dev

Lovable이란?

장점 단점/주의사항
코딩 몰라도 풀스택 앱 빠르게 구축 가능 대규모 복잡한 서비스는 한계가 있음
GitHub 연동 및 코드 소유권 보장 복잡한 버그 발생 시 직접 수정이 필요할 수 있음
배포 및 데이터베이스 연결이 매우 쉬움 무료 사용량(크레딧)이 제한적임

 

Lovable(러버블)은 한 마디로 '말만 하면 웹 서비스를 실제로 만들어주는 AI 개발 플랫폼'이다.

기존의 노코드(No-code) 툴들이 미리 정해진 블록을 조립하는 방식이었다면, Lovable은 사용자가 채팅으로 요구사항을 설명하면 AI가 직접 프론트엔드부터 백엔드, 데이터베이스까지 연결된 실제 코드를 짜서 웹 앱을 구축해 준다.

1. 주요 특징

  • 풀스택 개발: 화면 디자인(React)뿐만 아니라 데이터 저장(Supabase 연동), 사용자 인증(로그인), 비즈니스 로직까지 한 번에 생성한다.
  • 실제 코드 기반: 생성된 결과물은 단순한 디자인 시안이 아니라, 언제든 다운로드하거나 GitHub로 내보낼 수 있는 '진짜 소스 코드'를 만들어낸다.
  • 실시간 미리보기 & 수정: 채팅창 옆에 작업 중인 앱이 실시간으로 떠 있어서, "이 버튼을 빨간색으로 바꿔줘", "검색 기능을 추가해줘"라고 말하면 즉시 반영된다.
  • Vibe Coding: 복잡한 문법을 몰라도 "이런 느낌의 앱을 만들어줘"라는 식의 대화만으로 개발이 가능해 '바이브 코딩' 도구로도 불린다.

2. 어떤 때 사용하면 좋은가요?

Lovable은 속도와 검증이 필요한 상황에서 강력한 위력을 발휘한다.

  • 아이디어 검증(MVP 제작): 새로운 사업 아이디어가 떠올랐을 때, 며칠씩 고민하지 않고 단 몇 시간 만에 실제로 작동하는 시제품을 만들어 고객 반응을 살필 수 있다.
  • 내부 도구 제작: 사내에서 사용할 대시보드, 고객 관리용 CRM, 간단한 예약 시스템 등 복잡한 설계가 필요 없는 도구를 개발자 도움 없이 직접 만들 때 유용하다.
  • 개발자 생산성 향상: 전문 개발자가 반복적인 '보일러플레이트(기초 코드)'를 짜는 시간을 줄이고, AI가 만든 초안을 바탕으로 세부 로직만 수정하고 싶을 때 좋다.
  • 랜딩 페이지 제작: 마케팅용 페이지나 이벤트 페이지를 고퀄리티의 디자인과 함께 빠르게 배포해야 할 때 효과적.

 

직접 사용해보자

홈페이지 접속해서 구글 계정으로 로그인만 하면 바로 무료버전으로 사용해 볼 수 있다

로그인 후 메인페이지(대시보드)

메인페이지에서는 사이드바에서 여러 메뉴들을 선택할 수 있고 중앙에 있는 프롬프트에 원하는 요청을 입력해서 바로 프로젝트를 시작할 수 있다.

백엔드 개발자 포트폴리오 웹페이지를 개발하려고 해. 기본적인 포트폴리오 양식으로 만들어줘. 블랙앤화이트 톤에 깔끔한 폰트로 사용해줘.

위와 같이 프롬프트에 요청하니까 바로 웹 페이지 하나를 뚝딱 만들어주는데 단순히 디자인적인 요소만 볼 수 있는게 아니라 Preview탭에서 실제 동작을 확인할 수 있었다.

만들어주는 속도는 엄청 빠르진 않았지만 기다릴만한 정도?

간단한 포트폴리오 페이지 정도는 5분 이내로 완성했다.

그리고 디자인만 해주는건줄 알았는데 실제 동작하는 웹페이지를 만들어 줌!

프로젝트에는 Preview, Cloud, Design, Code, Analytics, Security, Speed 탭이 있고 각각 관련된 기능들을 사용할 수 있다.

Preview: 실제 브라우저에서 동작하는 것처럼 만들어진 웹 페이지를 확인할 수 있음

프롬프트 요청 후 나오는 화면(Preview 탭)

Cloud: Built-in-backend를 연동하거나, LLM을 연동할수도 있고, 권한 설정 등 배포를 위한 설정들을 하는 곳이다.

Cloud 탭 - 다양한 옵션 구체적 설정 가능
구체적 권한 설정도 가능함..!

Design: 원하는 테마를 전체적으로 적용하거나 웹페이지 요소들을 PPT를 수정하는 것처럼 수정할 수 있는 페이지이다. PPT처럼 웹페이지를 바로 수정하는게 매우 신기한 경험이었음

PPT 수정하는 거처럼 수정가능하고 요소에 대한 AI 요청도 가능

Code: 만들어진 코드를 확인할 수 있는 페이지로, 코드를 다운로드 받을 수 있다

실제 코드들을 확인할 수 있음. AI가 다음 작업으로 할 만한 것도 추천해줌.

Analytics: 배포한 웹페이지에 대한 분석을 제공.

얼마나 정확한지는 모르겠으나 다양한 분석결과 제공 (배포하자마자 US visitors가 4명이라고 나오는데 bot인가...)

Security: 보안 취약점을 파악해서 알려주고 고치는 것도 제공.

Speed: 웹페이지에 관련된 다양한 분석을 제공.  탭을 클릭하면 해당 이슈를 보여줌. SEO도 있음.

 

정말 코딩을 하나도 몰라도 완성된 서비스는 아니더라도 실제 동작하는 프로토타입을 만드는 수준으로는 너무 좋은 것 같다.
대시보드에서 프로젝트 별로 관리가 가능한 것도 사용자 편의성에서 아주 좋은 듯.
기존에 사용하던 gemini 로 어느정도 대체할 수 있을 것 같지만 배포가 쉽게 가능하고, 여러가지 보고서를 제공하고 쉬운 UI로 개발이 가능하다는 점에서 차별성이 있는 것 같다.
다만, 매일 5credits 를 제공하는데 무료 크레딧 만으로는 정말 테스트만 가능했다.
개발자보다는 기획자들에게 더 유용한 AI 서비스인 것 같다.

 

 

 

+ Recent posts

티스토리툴바