바이브코딩 하는법: Lovable로 웹페이지 하나 만드는 순서

코딩을 한 줄도 몰라도, 원하는 웹페이지를 문장으로 설명하면 Lovable이 실제로 작동하는 페이지를 만들어 줍니다. 이 글은 Lovable 화면을 기준으로, 계정을 만드는 순간부터 완성된 페이지를 실제 주소로 열어 보는 순간까지 손으로 하는 순서만 정리했습니다. 바이브코딩이 정확히 어떤 방식인지 먼저 알고 싶다면 바이브코딩이란? 코딩 안 배운 사람이 오늘 하나 만들어 보기 를 먼저 봐도 좋습니다. 여기서는 곧바로 손을 움직이는 부분만 다룹니다.

시작 전에 준비할 것

설치할 프로그램은 없습니다. 웹 브라우저만 있으면 됩니다. 대신 계정은 있어야 합니다. 이메일, Google, GitHub, Apple 계정 중 하나로 가입하면 되고 신용카드는 필요 없습니다.

무료로 시작할 수 있지만, 완전히 무제한은 아닙니다. Lovable 공식 요금제 페이지 기준(2026년 9월 확인)으로 무료 플랜은 하루 5개(월 최대 30개)의 빌드 크레딧과 매달 20개의 Cloud 크레딧을 줍니다. 웹페이지를 한 번 만들거나 수정 요청을 보낼 때마다 이 크레딧이 줄어든다고 보면 됩니다. 이 수치는 서비스 정책에 따라 바뀔 수 있으니, 실제 가입 시점의 요금제 페이지에서 다시 한번 확인하는 것이 안전합니다.

Lovable에서 새 작업을 시작하는 곳

lovable.dev에 접속해 로그인하면 홈 화면 한가운데에 “무엇을 만들지 물어보는” 프롬프트 입력창이 바로 보입니다. 별도로 ‘새 프로젝트 만들기’ 버튼을 찾아 헤맬 필요가 없습니다. 모든 프로젝트는 이 입력창에 원하는 것을 적는 순간 시작됩니다.

처음 넣을 프롬프트, 어디에 뭐라고 쓰면 되는지

방금 본 그 입력창에 만들고 싶은 웹페이지를 문장으로 풀어 씁니다. 한국어로 써도 됩니다. 처음 쓸 때는 막연하게 “카페 홈페이지 만들어줘”보다, 어떤 구역이 있고 각 구역에 무엇이 들어가는지까지 적어 주는 편이 결과가 훨씬 잘 나옵니다. 예를 들면 이런 식입니다.

작은 베이커리를 소개하는 웹페이지를 만들어줘.
- 위쪽에는 가게 이름과 대표 빵 사진을 크게 넣어줘
- 그 아래에 대표 메뉴 3~4개를 사진, 이름, 가격과 함께 보여줘
- 맨 아래에는 위치, 영업시간, 인스타그램 링크를 넣어줘
- 전체적으로 따뜻하고 아늑한 느낌으로 만들어줘

이렇게 구역별로 나눠서 설명하면 Lovable이 각 구역을 순서대로 배치합니다. 처음부터 완벽한 문장일 필요는 없습니다. 일단 보내고, 나온 결과를 보면서 고쳐 나가는 방식이 이 도구의 기본 사용법입니다.

프롬프트를 보내면 이런 화면이 나타납니다

프롬프트를 보내면 화면이 두 영역으로 나뉜 편집 화면으로 넘어갑니다. 왼쪽은 방금 보낸 요청과 앞으로 이어질 대화가 쌓이는 채팅 영역이고, 오른쪽은 지금 만들어진 페이지가 실제로 작동하는 상태로 보이는 미리보기 영역입니다.

여기서 확인해야 할 정상 결과는 하나입니다. 오른쪽 미리보기에 방금 설명한 구역들(제목과 사진, 메뉴 목록, 하단 정보)이 실제로 화면에 배치되어 있고, 스크롤이나 클릭 같은 기본 동작이 되는 페이지가 떠 있어야 합니다. 코드가 어떻게 생겼는지는 몰라도 되고, 오른쪽 화면만 보면 됩니다.

결과가 이상할 때: 다시 요청하는 법

처음 결과가 원하던 것과 다르게 나오는 일은 흔합니다. 이때는 새로 시작할 필요 없이, 왼쪽 채팅창에 이어서 요청하면 됩니다. Lovable의 채팅은 한 번 보내고 끝나는 것이 아니라 계속 이어지는 대화이기 때문입니다.

재요청할 때는 “뭐가 문제인지”와 “어떻게 바뀌었으면 하는지”를 같이 적는 편이 한 번에 고쳐질 확률이 높습니다.

메뉴 섹션이 안 보여요. 사진 아래, 위치 정보 위에 메뉴 3~4개를 다시 넣어주세요.

막연하게 “다시 해줘”라고만 보내면 어느 부분을 어떻게 고쳐야 할지 판단할 정보가 부족해서 원하는 방향과 다르게 다시 나올 수 있습니다.

한 가지 더 막힐 수 있는 지점은 크레딧입니다. 무료 플랜의 하루치 빌드 크레딧을 다 쓰면 그날은 더 이상 새로 만들거나 고칠 수 없습니다. 이때는 다음 날까지 기다리거나, 계속 작업하려면 유료 플랜으로 올려야 합니다. 재요청을 여러 번 반복하기 전에 프롬프트를 한 번 더 구체적으로 다듬어서 보내는 편이 크레딧을 아끼는 방법입니다.

다 됐는지 확인하기: 미리보기, 모바일 화면, 공개 주소

페이지가 마음에 들면 세 가지를 확인합니다.

먼저 미리보기 화면 위쪽에 있는 기기 전환 버튼으로 데스크톱, 태블릿, 모바일 화면을 각각 눌러 봅니다. 컴퓨터 화면에서는 괜찮아 보여도 휴대폰 화면에서는 글자나 사진이 어긋나 보이는 경우가 있어서, 실제로 방문자 대부분이 볼 화면인 모바일 기준으로 한 번은 꼭 확인하는 것이 좋습니다.

그 다음, 편집 화면 오른쪽 위에 있는 Publish 버튼을 누릅니다. 이 버튼은 Share 버튼 옆에 있고, 화면이 좁으면 글자 없이 아이콘만 보일 수 있습니다. 버튼을 누르면 대화상자가 열리면서 기본 보안 검사를 하고, 공개될 주소를 보여 줍니다. 기본 주소는 [내가 정한 이름].lovable.app 형태입니다. 이 주소를 그대로 쓰거나 원하는 이름으로 바꾼 뒤 Publish를 다시 누르면 배포가 진행됩니다.

배포가 끝나면 실제 링크가 표시됩니다. 이 링크를 새 탭이나 휴대폰 브라우저로 직접 열어서, 편집 화면이 아닌 진짜 공개된 웹페이지로 잘 뜨는지 확인하면 완료입니다. 이후에 내용을 더 고치고 싶으면 채팅에서 계속 수정한 다음, 같은 Publish 버튼을 다시 눌러 바뀐 내용을 반영하면 됩니다.

다음으로 할 일

여기까지 하면 문장 몇 줄로 시작해서 실제 주소로 열리는 웹페이지 하나를 만든 것입니다. 처음 결과가 완벽하지 않아도 괜찮습니다. 채팅에서 계속 구체적으로 요청하며 다듬어 가는 것이 바이브코딩의 기본적인 작업 방식입니다.