러버블 사용법을 처음부터 배포까지 단계별로 정리한 시작 가이드입니다.
빠른 시작
첫 프롬프트부터 공유 가능한 실제 URL까지, 약 10분이면 첫 Lovable 앱을 만들어 게시합니다.
실제로 손을 움직이는 시간은 약 10분입니다. 그 안에 첫 앱을 만들어 웹에 올립니다. 설치할 것도, 설정할 것도 없습니다. 원하는 바를 설명하면 Lovable이 만들어 주고, 공유할 수 있는 실제 URL로 게시하면 됩니다.
이 가이드에서는 동네 카페를 상상한 Little Fern의 웹사이트를 만듭니다. 대화형 메뉴가 있는 홈페이지, 영업시간, 위치 섹션을 갖춘 사이트입니다. 무엇을 만들든 대신 세울 수 있는 예시이므로, 어느 단계에서든 자기 아이디어로 바꿔도 됩니다. 다 끝내고 나면 Lovable로 실제 제품 만들기에서 전체 여정을 어떻게 밟아 가는지 확인할 수 있습니다.
계정 만들기
lovable.dev로 가서 이메일, Google, GitHub, Apple 중 하나로 무료 가입합니다. 계정에는 Free 플랜의 개인 워크스페이스가 딸려 오고, 가입을 마치면 바로 빌드할 수 있는 대시보드에 도착합니다.
순서를 건너뛰어도 됩니다. 홈페이지에서 프롬프트를 먼저 입력하면, 제출할 때 Lovable이 가입을 요청하면서 입력한 프롬프트를 그대로 이어 갑니다.
앱 설명하기
프롬프트 상자("Ask Lovable to create…")는 화면 한가운데에 있고, 모든 프로젝트가 여기서 시작됩니다. 만들고 싶은 것을 평이한 말로, 어떤 언어로든 설명하세요.
아래 프롬프트를 그대로 써 보거나 자기 아이디어에 맞게 바꿔 보세요.
Build a website for Little Fern, a neighborhood cafe. Include a warm hero section with a headline and a photo, an interactive menu where visitors filter items by category (coffee, breakfast, lunch, pastries), an opening hours section, and a location section with the address and a short "find us" description. Use realistic sample content throughout. Cozy, welcoming design. Works well on mobile. No login or database yet.프롬프트의 마지막 줄이 중요합니다. 첫 버전에 로그인과 데이터베이스를 넣지 않으면 잘못될 여지가 줄고, 둘 다 나중에 프롬프트 한 번으로 추가할 수 있습니다.
첫 버전이 나타나는 모습 지켜보기
Lovable이 프로젝트를 만들고 빌드를 시작합니다. 첫 버전이 나오기까지는 몇 분이 걸리며, Lovable이 작업하는 동안 앱이 모양을 갖춰 가는 과정을 지켜볼 수 있습니다.
준비가 끝나면 에디터에 들어와 있습니다. 에디터는 두 부분으로 나뉩니다. 왼쪽은 Lovable과 대화하는 chat이고, 오른쪽은 앱이 라이브로 실행되는 preview입니다. 미리보기를 이리저리 눌러 보세요. 메뉴 필터를 써 보고, 섹션을 스크롤해 보세요.
보이는 모든 것이 실제로 동작하는 앱이며, 그 뒤의 코드는 사용자의 것입니다. 이 시점부터 모든 변경은 복원할 수 있는 버전으로 저장되므로, 다음에 무엇을 하더라도 앱이 영구히 망가지지 않습니다.
변경하기
한 번에 하나씩 변경을 요청하고 매번 미리보기를 확인하세요. 예를 들면 다음과 같습니다.
Add a "Today's specials" section between the menu and the opening hours, highlighting two menu items with a short description and price.앱이 동작하긴 하는데 그리던 모습이나 느낌과 다르다면, 그 점도 평이한 말로 이야기하세요. 다음도 아주 좋은 프롬프트입니다.
Make the whole site feel warmer and less corporate.가리켜서 다듬기
작은 시각적 변경은 설명보다 가리키기가 낫습니다. preview 툴바를 열고 바꿀 요소를 정확히 선택한 뒤 어떻게 바뀌어야 하는지 말하세요. 헤드라인이나 버튼 라벨 같은 텍스트를 바꿀 때는 Edit text inline을 써서 페이지에 직접 입력하세요. 프롬프트가 필요 없습니다.
동작 확인하기
게시하기 전에 잠깐 시간을 들여 앱을 테스트하세요. 지금 한 번 점검해 두면 링크를 처음 받은 사람에게서 오는 어리둥절한 메시지 한 차례를 줄일 수 있습니다.
- 모든 버튼과 링크를 눌러 봅니다.
- 대화형 요소를 시험합니다. 모든 카테고리로 메뉴를 필터링해 봅니다.
- preview 위쪽의 기기 토글로 Mobile view를 확인합니다. 대부분은 휴대폰으로 링크를 엽니다.
무언가 어긋나 있으면 무엇이 어디에서 잘못됐는지 Lovable에게 정확히 알려 주세요.
In the menu, clicking the pastries filter shows no items. It should show the pastry items.이것이 전체 루프입니다. 설명하고, 다듬고, 게시하기. Lovable에서 만드는 모든 앱은 아무리 야심 차더라도 이 루프의 반복입니다.
계속하기
Lovable로 실제 제품 만들기
실제 제품을 만들 준비가 됐나요? 아이디어를 다듬고, 계획하고, 루프를 돌며 빌드하고, 백엔드를 더하고, 테스트하고, 게시하고, 키워 가는 전체 여정입니다.