코딩 한 줄 모르는 사람도 이제 웹사이트를 만들 수 있을까요? 저는 최근 Lovable이라는 AI 웹빌더를 직접 써보면서 이 질문에 대한 답을 찾았습니다. 바이브 코딩으로 웹사이트 구조를 짜보려다 막혀서 시작한 실험이었는데, 프롬프트 몇 줄로 단 몇 분 만에 완성된 사이트를 보고 솔직히 놀랐습니다. 이 글에서는 Lovable이 실제로 어떻게 작동하는지, 데이터베이스 연결은 얼마나 쉬운지, 그리고 무료 플랜의 한계는 무엇인지 제 경험을 바탕으로 공유하겠습니다.
Lovable, 프롬프트만으로 웹사이트가 완성되다
Lovable은 자연어 프롬프트로 웹사이트와 앱을 자동 생성하는 AI 기반 노코드 플랫폼입니다. 여기서 노코드(No-code)란 프로그래밍 코드를 직접 작성하지 않고도 애플리케이션을 개발할 수 있는 방식을 의미합니다. 제가 처음 Lovable을 사용할 때는 ChatGPT로 프롬프트를 먼저 정리했습니다. "데크 시공 전문가용 사이트를 만들어줘. 회사 소개, 서비스 안내, 무료 견적 요청 폼이 필요해"라는 식으로 구체적으로 요구사항을 작성한 뒤, 이를 영어로 번역해서 Lovable에 입력했습니다.
결과는 정말 빨랐습니다. 5분도 안 돼서 원페이지 형태의 반응형 웹사이트가 완성되었고, PC·태블릿·모바일 모든 화면에서 최적화된 레이아웃이 자동으로 구현되었습니다. 텍스트 수정은 에디터 모드에서 클릭 한 번으로 가능했고, 마진(Margin)과 패딩(Padding) 같은 간격 조정도 직관적인 UI로 해결되었습니다. 여기서 마진이란 요소 바깥쪽 여백을, 패딩이란 요소 안쪽 여백을 의미합니다. 하지만 일부 요소는 백엔드 코드와 연결되어 있어서 직접 수정이 불가능했고, 이럴 때는 다시 AI 채팅창에 프롬프트를 입력해서 변경을 요청해야 했습니다.
예를 들어 메인 화면 배경 이미지를 바꾸고 싶을 때는 원하는 이미지를 채팅창에 업로드한 뒤 "웹사이트 첫 화면의 배경 사진을 업로드한 이미지로 변경해줘"라고 요청하면 됩니다. 서비스 섹션에 새로운 항목을 추가할 때도 "데크 오일 스테인 서비스를 추가해줘"라고 입력하니 일관된 디자인의 이미지와 설명 텍스트까지 자동으로 생성되었습니다. 제 경험상 프롬프트를 얼마나 구체적으로 작성하느냐에 따라 결과물의 완성도가 확연히 달라졌습니다(출처: Lovable 공식 문서).
Supabase 연동부터 이메일 발송까지, MCP로 간단하게
Lovable의 진짜 강점은 데이터베이스와 외부 서비스 연동이 간단하다는 점입니다. 저는 처음엔 Lovable 자체 데이터베이스를 쓰다가, 다른 AI 도구와의 호환성을 고려해 Supabase로 전환했습니다. Supabase는 오픈소스 기반의 BaaS(Backend as a Service)로, 백엔드 인프라를 직접 구축하지 않고도 데이터베이스·인증·스토리지 기능을 사용할 수 있는 플랫폼입니다. 여기서 BaaS란 서버 관리 없이 백엔드 기능을 클라우드 서비스로 이용하는 방식을 의미합니다.
연결 과정은 놀라울 정도로 단순했습니다. Lovable 설정에서 Supabase 메뉴를 클릭하고, 미리 만들어둔 Supabase 프로젝트를 선택한 뒤 'Connect' 버튼을 누르면 끝입니다. MCP(Model Context Protocol) 설정도 코딩 없이 "이렇게 연결해줘"라는 프롬프트 몇 마디로 해결되었습니다. 이메일 발송 기능을 추가할 때도 비슷했습니다. Resend라는 이메일 발송 서비스에 가입한 뒤 API 키를 발급받고, Lovable 채팅창에 "견적 요청 폼을 통해 관리자 이메일로 발송되게 해줘. Resend 기능을 추가해줘"라고 입력하니 자동으로 연동이 완료되었습니다(출처: Supabase 공식 사이트).
더 흥미로웠던 건 견적 계산기 기능 추가였습니다. 저는 프롬프트로 이런 요구사항을 입력했습니다.
- 사용자가 데크 오일 색상을 선택하면 해당 색상이 적용된 데크 이미지가 실시간으로 표시됨
- 시공 면적을 입력하면 1㎡당 2,000원으로 자동 계산됨
- 외부 도장 옵션 선택 시 총 금액의 20% 추가됨
- '정확한 견적 요청하기' 버튼 클릭 시 견적 폼 섹션으로 스크롤되며, 선택한 정보가 문의 내용란에 자동 입력됨
이 모든 기능이 프롬프트 한 번에 1분도 안 돼서 구현되었습니다. 초보자인 제가 직접 코딩했다면 며칠은 걸렸을 기능입니다. 실제로 테스트해보니 색상 선택에 따라 이미지가 바뀌고, 면적 입력 시 실시간으로 예상 비용이 계산되었으며, 견적 요청 버튼을 누르니 설정한 이메일로 모든 정보가 정확하게 전달되었습니다.
Lovable을 써보면서 든 생각은 이제 정말 코딩 실력이 아니라 전문 지식과 아이디어가 경쟁력이 되는 시대가 왔다는 것입니다. 데크 시공 전문가라면 시공 노하우를, 요리사라면 레시피를, 세무사라면 세무 상담 로직을 웹사이트에 바로 구현할 수 있게 된 겁니다. 하지만 무료 플랜의 현실은 좀 달랐습니다. 하루에 제공되는 크레딧(토큰)이 5개뿐이고, 한 달 최대 30개까지만 사용 가능했습니다. 프롬프트 한 번 실행할 때마다 크레딧이 소모되는데, 사이트 하나 제대로 만들려면 최소 10~15번은 수정해야 하니 무료로는 턱없이 부족했습니다.
진입 장벽을 낮춘 건 좋지만, 본격적으로 쓰려면 유료 플랜으로 업그레이드해야 한다는 점에서 소비자를 살짝 농락하는 건 아닌가 하는 의구심도 들었습니다. 프로 플랜은 월 100크레딧을 제공하고, 개인 도메인 연결과 Lovable 워터마크 제거가 가능해 정식 사이트로 운영할 수 있습니다. 저는 결국 프로 플랜으로 전환했고, 그제야 제대로 된 웹사이트를 완성할 수 있었습니다. 크레딧을 아끼려면 한 번에 여러 요청을 묶어서 프롬프트를 작성하는 게 핵심입니다. "배경 이미지 바꿔줘. 그리고 서비스 섹션에 새 항목 추가해줘. 제목은 '데크 오일 스테인 시공'으로 변경해줘" 이런 식으로 말입니다.
Lovable은 분명 혁신적인 도구지만, 무료 플랜만으로는 완성도 있는 결과물을 기대하기 어렵습니다. 본격적으로 비즈니스용 사이트를 만들 계획이라면 유료 전환을 고려해야 하고, 프롬프트를 최대한 구체적이고 효율적으로 작성하는 연습이 필요합니다. 개인적으로는 코딩 없이 이 정도 퀄리티의 웹사이트를 만들 수 있다는 사실 자체가 놀라웠고, 앞으로 더 많은 사람이 자기만의 디지털 서비스를 손쉽게 시작할 수 있을 거라는 기대가 생겼습니다. 혹시 코딩 없이 웹사이트를 만들어보고 싶으셨다면, 무료 플랜으로 가볍게 시작해보는 것도 좋은 경험이 될 것 같습니다.