·약 24분 읽기
안녕하세요. 모두의바이브코딩입니다.
이번 포스팅에서는 앞에서 소개해드린 다양한 바이브 코딩 도구 중 Lovable에 대해 알아보겠습니다. Lovable은 단순한 ‘코드 생성기’가 아닙니다. 기획 + 디자인 + 프론트엔드 개발 + DB 연동까지 한 번에 수행하는 AI 엔지니어에 가깝습니다.
오늘은 Lovable을 활용해 15분 만에 실제로 작동하는 ‘AI 맞춤형 영양제 추천기’를 만든 경험을 공유합니다. 코딩의 ‘ㅋ’자도 몰라도 됩니다. 저만 따라오세요!
Lovable은 브라우저에서 대화하듯 프롬프트를 넣으면, 화면 안에서 바로 프론트엔드·라우팅·스타일이 갖춰진 웹앱 뼈대를 만들어 주는 웹 기반 풀스택형 바이브 코딩 도구입니다. 오늘 예제는 ‘빠른 체감’을 목적으로, 건강·영양 맞춤 추천이라는 주제에 맞춰 설문 → 추천 카드가 한 흐름으로 이어지는 웹 페이지를 만들어 보겠습니다.
화면 오른쪽 상단의 [Get Started] 버튼을 클릭합니다.
회원 가입 화면이 나옵니다. 구글 아이디로 가입합니다.
Lovable답게 소셜 로그인으로 비밀번호를 따로 관리할 부담이 없고, 이후 같은 Google 계정으로 결제·알림을 맞출 수 있습니다. 첫 방문이면 역할(페르소나) 선택 같은 질문이 뜨기도 하는데, ‘뭘 뽑고 싶은지’에 따라 Lovable 쪽이 추천·UI 톤에 반영하려는 단계이니, 대략 골라도 괜찮습니다. 중요한 건 여기서 멈추지 않고 다음 화면으로 넘어가는 겁니다.
이렇게 2~3분 만에 Lovable 회원가입이 완료되었습니다. 이제 다음 단계로 넘어가겠습니다.
1단계에서 가입이 끝났다면, 앞의 그림처럼 화면 중앙에 채팅(프롬프트) 창이 있을 겁니다. 아래를 그대로 복사해 넣어 보세요. 이것이 ‘주문서’입니다.
사용자의 건강 고민을 설문으로 받아서 맞춤 영양제를 추천해 주는 웹 앱을 만들어줘. 신뢰감을 주는 민트 톤 디자인에 아주 깔끔한 카드 UI를 사용해 줘.
본 포스팅은 코딩 기술 구현에 초점을 맞춘 가이드이며, 생성된 결과물은 학습용 예시일 뿐 의학적 근거로 활용될 수 없음을 미리 알려드립니다.
입력 후 Enter를 치면, 아래로 작업이 올라가고 Lovable AI의 사고·빌드 과정이 쌓이며 보입니다.
작업이 끝날 때까지 걸리는 시간은 환경마다 다릅니다(저는 약 20분이 걸렸지만, 이는 컴퓨터 사양 등 다양한 요소로 달라질 수 있습니다). 작업이 완료되면 오른쪽 Preview에 완성 UI가 뜹니다.
결과물이 나오면 Preview에서 이 느낌이 맞는지 먼저 느껴 보세요. 프롬프트에 민트 톤·카드를 넣었으니 요청한 대로 반영됐는지, 카드가 설문과 결과를 잘 나누는지 체크해 봅니다. 버튼이 클릭에 반응하고, 질문에 따라 다음 화면이 바뀌는지도 확인해 보세요.
질문 문구 가독성, 한 화면에 몇 개의 항목이 보이는지 확인하세요.
결과 화면도 확인하여 사용자에게 유용한 정보를 제공하는지 확인합니다. 더 제공하면 좋을 정보나 더 효율적으로 결과를 보여줄 수는 없을지 고민해 봅니다.
어때요? 프롬프트 한 줄로 완벽하진 않아도, 이렇게 끝까지 눌러볼 수 있는 웹·앱이 나온다는 점이 놀랍지 않나요?
Lovable이 만든 앱에서 마음에 들지 않거나 다듬고 싶은 부분이 있으면, 채팅에 추가 요청하면 됩니다. 가령 아래처럼 말해 보세요.
설문 문항 구체화: “질문은 3단계로 나눠서 진행해 줘. 1단계는 나이와 성별, 2단계는 가장 고민되는 건강 문제 3개 선택, 3단계는 평소 생활 습관이야.”
결과 로직 추가: “사용자가 ‘피로’를 선택하면 비타민 B군을, ‘눈 건강’을 선택하면 루테인을 추천 결과 페이지에 보여줘. 결과 페이지에는 왜 이 영양제가 필요한지 설명도 넣어줘.”
애니메이션: “화면이 넘어갈 때 부드럽게 스르륵 나타나는 효과를 넣어줘. 훨씬 고급스러워 보이게!”
그 외에도 원하시는 대로 한국어로 요구만 하시면 됩니다. AI는 매번 같은 산출물이 나온다고 기대하긴 어렵고, 몇 번의 수정이 필요할 수 있어요. 그럼에도 코드 한 줄 모른 채 이 수준 결과물이 난다는 점이 바이브 코딩이 주는 감각입니다.
많은 AI 도구 중 Lovable이 특별한 이유는 ‘풀스택 AI 엔지니어’이기 때문입니다. 단순히 화면(Frontend)만 그리는 게 아니라, 실제로 사용자 데이터를 저장하는 데이터베이스(Backend)까지, 대화로 구축할 수 있습니다. 또한 고퀄리티한 디자인까지 제공해, 최근 바이브 코딩 분야에서도 많은 관심을 받고 있습니다.
마음에 드는 웹/앱이 완성되었다면, 이제 이 앱을 인터넷에 주소를 붙이는(배포) 단계로 갑니다.
프롬프트·UI만 뽑는 AI 툴과 달리, Lovable은 Publish(배포)까지 클릭 한 번으로 끝낼 수 있습니다. Preview 상단에 있는 [Publish] 버튼을 누르기만 하면 됩니다.
그러면 아래처럼 배포 위저드(단계형)를 거쳐 최종 배포까지 갑니다.
자동으로 URL을 생성한 후 서브도메인·공개 범위를 설정합니다. 무료 플랜은 공개를 전제로 하며, 이름과 설명이 검색·스크랩에 노출될 수 있다는 점을 기억하세요. 팀·비공개 실험이 꼭 필요하다면 이후 유료나 다른 호스팅을 비교해 보는 편이 낫습니다.
최종적으로 배포 관련 정보를 확인하고 나서 [Publish]를 누르면 배포가 완료됩니다.
배포가 끝났다면, 부여된 주소(예: https://러버블이지정한이름.lovable.app 형식)로 직접 열어 보세요. Lovable 호스팅 페이지가 정상적으로 로딩되면, 배포 성공입니다.
모바일·데스크톱과 다른 네트워크에서도 열어, 404 에러가 뜨지 않는지, 클릭 끊김이 없는지 확인하세요. 여기까지 OK면, 오늘 Lovable 바이브로 첫 URL을 손에 넣으신 겁니다.
오늘 저와 함께 Lovable로 영양제 추천 서비스를 만들어 보셨는데, 어떠셨나요? 과거에는 이런 웹 서비스를 하나 만들려면 기획자, 디자이너, 개발자가 모여 최소 몇 주는 고생해야 했습니다. 하지만 이제는 ‘생각을 논리적인 글로 표현할 줄만 안다면’ 누구나 15분 만에 서비스를 세상에 내놓을 수 있습니다.
물론 AI가 완벽하지는 않습니다. 하지만 중요한 것은 ‘시작하는 힘’입니다. 바이브 코딩은 여러분의 아이디어가 머릿속에서만 머물지 않고, 실제 주소가 있는 웹사이트로 탄생하게 도와줍니다.
여러분은 Lovable로 어떤 앱을 가장 먼저 만들어보고 싶으신가요? 인터넷 브라우저를 열고 회원가입부터 웹/앱 만들고 배포까지 30분이면 여러분도 오늘 첫 웹페이지를 완성하고 바이브 코더가 될 수 있습니다. 도전해 보세요!
이 포스트에서 소개하는 서비스는 AI 기술 체험을 위한 예시 프로젝트이며, 실제 의학적 처방을 대신할 수 없습니다.
주의: 본 포스팅에서 제작한 영양제 추천 서비스는 Lovable의 기능을 테스트하기 위한 예시입니다. 실제 영양제 복용 시에는 반드시 전문가와 상담하시기 바랍니다.
코딩에 익숙하지 않은 상태에서 Claude Pro, Cursor AI, Vercel만으로 워들 스타일의 데일리 국기 맞히기 게임(Flaglette)을 만든 과정, itch.io 배포 시행착오, ‘돌아가는 것’과 ‘재미’의 차이를 정리했다.
Claude Code, Cursor, Lovable, Bolt.new, Replit, Windsurf, v0 등 바이브 코딩 도구 7종의 유형·요금·장단점을 후기와 커뮤니티 평가를 바탕으로 정리하고, 상황별 추천 조합을 제안한다.
테크니컬 에디터 10년차, 미국 거주 운영자가 바이브 코딩을 쉽게 풀어 드립니다. 노코드와의 차이, 맨 위로 버튼 예시, 연재 시리즈로 이어지는 안내까지.