러버블 첫 프로젝트 시작하기

오늘의 목표: 화면이 실제로 나타나는 순간까지 가기

이제 드디어 러버블을 열 차례입니다. 앞 장들에서 우리는 조금 돌아왔습니다. 바로 만들 수 있는 도구를 앞에 두고도 아이디어를 고르고, 외부 AI로 기획서를 만들고, 종이에 화면을 그려보고, 프롬프트까지 다듬었습니다. 조금 답답했을 수도 있습니다.

하지만 이 준비가 있었기 때문에 오늘은 훨씬 덜 헤맬 수 있습니다. 러버블 안에서 "음, 뭘 만들지?"부터 고민하지 않을 겁니다. 우리는 이미 만들 대상을 정했고, 첫 프롬프트도 준비했습니다. 러버블은 이제 회의 상대가 아니라 구현 담당자입니다.

이번 장의 목표는 단순합니다. 회원가입을 하고, 대시보드에 들어가고, 새 프로젝트를 시작하고, 첫 프롬프트를 입력해서 실제 웹페이지가 화면에 나타나는 경험을 하는 것입니다. 코드를 읽을 필요도 없고, 버튼 하나를 만들기 위해 HTML이 뭔지 알 필요도 없습니다. 일단 "내가 말한 웹페이지가 진짜 화면으로 생겼다"는 감각을 얻는 것이 가장 중요합니다.

러버블 공식 FAQ에서도 프로젝트 생성은 대시보드의 메시지 입력창에 만들고 싶은 것을 설명하는 방식으로 시작한다고 안내합니다. 다만 동시에 "작게 시작하고 점진적으로 쌓아가라"고 강조합니다.¹ 오늘 우리는 이 원칙을 그대로 따릅니다. 거창한 플랫폼이 아니라, 프리랜서가 잠재 고객에게 자신의 서비스를 소개하고 문의를 받을 수 있는 단일 랜딩 페이지부터 만들겠습니다.

회원가입부터 대시보드까지

브라우저를 열고 lovable.dev에 접속합니다. 가입 방식은 시점과 계정 상태에 따라 조금씩 보일 수 있지만, 보통 Google 계정, GitHub 계정, 이메일 가입 중 하나를 선택할 수 있습니다. 초보자라면 Google 계정으로 시작하는 것이 가장 편합니다. 비밀번호를 새로 기억하지 않아도 되고, 로그인 과정도 빠릅니다.

가입이 끝나면 러버블의 대시보드로 이동합니다. 대시보드는 앞으로 여러분의 프로젝트들이 쌓이는 작업실입니다. 처음 들어가면 비어 있거나, 예시 프로젝트나 템플릿이 보일 수 있습니다. 당황하지 않아도 됩니다. 우리가 찾을 것은 단 하나입니다. "무엇을 만들고 싶은지 입력하는 메시지 창"입니다.

러버블은 전통적인 웹 제작 도구처럼 먼저 파일을 만들고, 폴더를 만들고, 서버를 설정하는 방식으로 시작하지 않습니다. 대시보드의 입력창에 "이런 웹사이트를 만들어줘"라고 쓰는 순간 프로젝트가 시작됩니다. 이 점이 낯설지만, 동시에 러버블의 가장 큰 매력입니다.

가입 직후에는 바로 프롬프트를 넣고 싶어집니다. 하지만 여기서 3분만 멈추세요. 무료 사용자라면 특히 더 그렇습니다. 하루에 쓸 수 있는 크레딧이 넉넉하지 않기 때문에, 첫 프롬프트가 애매하면 그날의 작업량이 순식간에 사라질 수 있습니다. "일단 만들어보고 고치자"는 생각은 유료 개발 도구에서는 괜찮을 수 있지만, 크레딧 기반 도구에서는 꽤 비싼 습관입니다.

새 프로젝트를 만들기 전에 10분 점검하기

러버블에 첫 문장을 입력하기 전에, 책상 위에 준비 문서 3개가 있다고 상상해 봅시다. 하나는 기획서, 하나는 화면 스케치, 하나는 최종 프롬프트입니다. 실제로 종이에 있든, Notion에 있든, Google Docs에 있든 상관없습니다. 중요한 것은 러버블을 열고 나서 생각하지 않는 것입니다.

첫 프로젝트를 시작하기 전에는 다음 네 가지를 확인합니다.

• 이 웹페이지가 누구를 위한 것인지 한 문장으로 말할 수 있는가

• 사용자가 페이지에서 해야 할 핵심 행동이 하나로 정리되어 있는가

• 포함할 섹션과 제외할 기능이 명확한가

• 첫 버전에서 데이터베이스, 로그인, 결제 같은 복잡한 기능을 빼기로 결정했는가

예를 들어 오늘 만들 프로젝트는 이렇게 정리할 수 있습니다.

"1인 프리랜서 컨설턴트가 자신의 서비스를 소개하고, 잠재 고객이 상담 문의를 남기도록 유도하는 단일 랜딩 페이지."

이 한 문장이 선명하면 러버블도 덜 헤맵니다. 반대로 "멋진 홈페이지 만들어줘"라고 입력하면 러버블은 여러분의 업종, 고객, 분위기, 버튼 목적, 문의 방식, 서비스 가격대까지 모두 추측해야 합니다. AI가 추측하기 시작하면 결과물은 그럴듯하지만 내 사업과는 묘하게 어긋납니다. 그리고 그 어긋남을 고치느라 크레딧을 씁니다.

무료 사용자 기준으로는 하루 작업량도 미리 정해두는 것이 좋습니다. 오늘은 첫 생성 1회, 큰 수정 1회, 작은 점검 1회 정도만 한다고 생각하세요. 마음이 급해져서 색상, 문구, 섹션 순서, 폼 항목, 모바일 디자인을 각각 따로따로 요청하면 하루치 크레딧이 금방 바닥납니다.

오늘의 권장 루틴은 이렇습니다. 먼저 첫 프롬프트로 전체 랜딩 페이지의 초안을 만듭니다. 그다음 미리보기에서 요구사항과 맞는지 확인합니다. 마지막으로 수정할 내용을 바로 입력하지 말고, 유지할 것과 고칠 것을 나눠 메모합니다. 실제 수정 프롬프트는 그 메모를 바탕으로 한 번에 정리해서 보냅니다.

프로젝트 이름 정하기

첫 프로젝트 이름은 생각보다 중요합니다. 프로젝트가 하나일 때는 아무 이름이나 붙여도 괜찮아 보이지만, 나중에 포트폴리오, 예약 페이지, 견적 요청 페이지, 디지털 상품 랜딩 페이지를 여러 개 만들기 시작하면 이름이 엉키기 쉽습니다.

프로젝트 이름은 "무엇을 위한 페이지인지"가 보이도록 정합니다. 예를 들어 오늘 프로젝트라면 freelance-service-landing 또는 consulting-landing-page처럼 붙일 수 있습니다. 한글 이름이 편하다면 프리랜서-서비스-랜딩도 괜찮습니다. 다만 나중에 도메인이나 공유 링크, 파일 정리까지 생각한다면 영어 소문자와 하이픈을 쓰는 방식이 깔끔합니다.

러버블에서는 프로젝트 설정에서 이름 변경도 가능합니다. 공식 FAQ에서는 에디터 왼쪽 위의 프로젝트 이름을 클릭해 설정으로 들어갈 수 있고, 그곳에서 프로젝트 이름 변경 같은 설정을 할 수 있다고 안내합니다.² 그러니 처음 이름을 완벽하게 지으려고 너무 오래 고민할 필요는 없습니다. 다만 test, new project, my app처럼 나중에 봤을 때 아무 의미 없는 이름은 피하세요.

오늘은 다음 이름을 추천합니다.

freelance-service-landing

이 이름은 화려하지 않지만 정확합니다. "프리랜서 서비스 소개 랜딩 페이지"라는 목적이 바로 드러납니다. 사업형 웹사이트를 만들 때는 감성적인 이름보다 관리하기 쉬운 이름이 더 유용할 때가 많습니다.

첫 프롬프트 입력하기

이제 대시보드의 입력창에 첫 프롬프트를 넣겠습니다. 여기서 중요한 점은 "처음부터 완성품을 기대하지 않는 것"입니다. 첫 생성 결과물은 초안입니다. 디자이너가 첫 시안을 보여주는 것과 비슷합니다. 마음에 드는 부분도 있고, 어색한 부분도 있을 겁니다. 정상입니다.

아래 프롬프트는 그대로 복사해서 사용할 수 있도록 작성했습니다. 다만 본인의 업종에 맞게 서비스명, 대상 고객, 서비스 항목은 바꿔도 좋습니다. 처음 연습할 때는 너무 많이 바꾸지 말고, 구조를 유지한 채 문구만 바꾸는 것을 추천합니다.

프리랜서 서비스 소개용 단일 랜딩 페이지를 만들어주세요.

프로젝트 목적:
1인 프리랜서가 자신의 전문 서비스를 소개하고, 잠재 고객이 상담 문의를 남기도록 유도하는 웹페이지입니다.

대상 사용자:
소규모 사업자, 1인 기업, 초기 스타트업 대표처럼 외부 전문가의 도움이 필요하지만 아직 큰 예산을 쓰기 어려운 사람들입니다.

서비스 예시:
- 브랜드 메시지 정리
- 랜딩 페이지 기획
- 상세페이지 문구 작성
- 고객 문의 전환 개선 컨설팅

페이지 구성:
1. 상단 내비게이션
   - 왼쪽에는 서비스명 "ClearLaunch Studio"를 표시
   - 오른쪽에는 "서비스", "진행 방식", "후기", "문의" 메뉴를 배치
   - 문의 버튼은 눈에 띄는 CTA 버튼으로 표시

2. 히어로 섹션
   - 큰 제목: "좋은 서비스가 더 잘 팔리도록, 첫 문장부터 다시 설계합니다"
   - 설명 문구: "프리랜서와 소규모 사업자를 위한 랜딩 페이지 기획·문구·전환 개선 컨설팅"
   - 주요 버튼: "무료 상담 문의하기"
   - 보조 버튼: "서비스 보기"
   - 오른쪽에는 노트북 화면 또는 문서 작업을 연상시키는 카드형 비주얼을 배치

3. 문제 공감 섹션
   - 고객이 흔히 겪는 문제 3가지를 카드로 보여주세요.
   - 예: "무엇을 강조해야 할지 모르겠어요", "방문자는 있는데 문의가 없어요", "내 서비스 설명이 너무 장황해요"

4. 서비스 소개 섹션
   - 3개의 서비스 카드로 구성해주세요.
   - 각 카드에는 서비스명, 짧은 설명, 추천 대상이 들어가야 합니다.
   - 서비스명은 "랜딩 페이지 기획", "세일즈 카피 점검", "문의 전환 개선"으로 해주세요.

5. 진행 방식 섹션
   - 4단계 프로세스로 보여주세요.
   - "상담 신청 → 현재 페이지 진단 → 개선안 제안 → 적용 및 피드백" 순서입니다.

6. 후기 섹션
   - 실제 고객 후기처럼 보이는 더미 후기 2개를 넣어주세요.
   - 과장된 표현보다 현실적이고 신뢰감 있는 문장으로 작성해주세요.

7. 문의 섹션
   - 간단한 문의 폼을 만들어주세요.
   - 필드: 이름, 이메일, 현재 운영 중인 웹사이트 주소, 문의 내용
   - 제출 버튼 문구: "상담 요청 보내기"
   - 실제 데이터 저장 기능은 아직 만들지 말고, 제출 후 "문의가 접수된 것처럼 보이는 확인 메시지"만 표시해주세요.

디자인 방향:
- 신뢰감 있고 차분한 분위기
- 흰색 배경 중심
- 포인트 컬러는 딥 블루 계열
- 둥근 카드, 넉넉한 여백, 부드러운 그림자 사용
- 폰트는 깔끔한 산세리프 느낌
- 모바일에서도 자연스럽게 보이도록 반응형으로 구성

범위 제한:
- 로그인 기능은 만들지 마세요.
- 결제 기능은 만들지 마세요.
- 데이터베이스 연결은 하지 마세요.
- 블로그, 관리자 페이지, 회원가입 페이지는 만들지 마세요.
- 이번 버전은 단일 랜딩 페이지만 만듭니다.

완성 후 미리보기에서 바로 확인할 수 있도록 샘플 문구와 더미 콘텐츠를 포함해 주세요.

이 프롬프트에는 초보자가 자주 빠뜨리는 중요한 요소가 들어 있습니다. 목적, 대상 사용자, 페이지 구성, 디자인 방향, 제외할 기능입니다. 특히 "범위 제한"이 중요합니다. 러버블이 좋은 의도로 로그인이나 데이터 저장 구조를 붙여버리면 프로젝트가 갑자기 복잡해질 수 있습니다. 첫 프로젝트에서는 그런 친절함이 오히려 부담입니다.

프롬프트를 입력하고 실행하면 러버블이 페이지를 생성하기 시작합니다. 화면 한쪽에는 코드나 작업 과정이 보이고, 다른 쪽에는 미리보기 화면이 나타날 수 있습니다. 지금 코드가 보인다고 겁먹지 마세요. 오늘 여러분이 볼 것은 코드가 아니라 결과 화면입니다.

생성 중에는 아무것도 누르지 않기

생성이 시작되면 잠시 기다립니다. 초보자가 흔히 하는 실수 중 하나가 결과가 나오기 전에 다른 요청을 또 보내는 것입니다. "아, 버튼 색상도 말해야 했는데", "문의 폼에 전화번호도 넣어야 하나?", "이미지 분위기를 더 말해야 하나?" 같은 생각이 떠오를 수 있습니다.

하지만 생성 중에는 멈추세요. 러버블이 첫 초안을 완성할 때까지 기다리는 것이 좋습니다. 중간에 추가 요청을 던지면 맥락이 꼬이거나, 크레딧을 불필요하게 사용할 수 있습니다.

첫 결과가 나온 뒤에 판단해도 늦지 않습니다. 어차피 첫 버전은 최종본이 아닙니다. 오늘의 목표는 완벽한 랜딩 페이지가 아니라 "작동하는 첫 화면"입니다.

생성이 끝나면 미리보기를 클릭해 페이지를 살펴봅니다. 가능하다면 브라우저 창을 크게 열어서 데스크톱 화면을 보고, 그다음 모바일 폭으로 줄여보세요. 러버블은 반응형 구성을 해주지만, 실제로 작은 화면에서 문구가 너무 길거나 버튼이 답답해 보이는 경우가 있습니다.

미리보기에서 무엇을 봐야 할까

처음 생성된 페이지를 보면 디자인부터 눈에 들어옵니다. "예쁜가?", "내 취향인가?"를 먼저 판단하게 됩니다. 물론 중요합니다. 하지만 첫 검토에서는 취향보다 요구사항이 먼저입니다. 예쁜데 목적이 빗나간 페이지는 사업에 도움이 되지 않습니다.

미리보기에서는 페이지, 메뉴, 섹션, 버튼, 폼을 순서대로 확인합니다. 마치 부동산 집 보러 갔을 때 벽지 색깔보다 수도, 전기, 구조를 먼저 보는 것과 비슷합니다.

다음 체크리스트를 보며 하나씩 확인해 보세요.

• 페이지가 단일 랜딩 페이지로 구성되어 있는가

• 상단 메뉴에 서비스, 진행 방식, 후기, 문의 항목이 있는가

• 히어로 섹션의 제목과 설명이 프리랜서 서비스 소개 목적에 맞는가

• 주요 CTA 버튼이 "무료 상담 문의하기"처럼 행동을 유도하는 문구인가

• 문제 공감 섹션이 고객의 고민을 현실적으로 보여주는가

• 서비스 카드 3개가 요청한 서비스명과 설명을 포함하는가

• 진행 방식이 4단계로 자연스럽게 이어지는가

• 후기 섹션이 너무 과장되지 않고 신뢰감 있게 보이는가

• 문의 폼에 이름, 이메일, 웹사이트 주소, 문의 내용 필드가 있는가

• 제출 후 확인 메시지가 표시되는가

• 모바일 화면에서 글자가 잘리고 버튼이 겹치지 않는가

이 체크리스트를 보며 "됐다" 또는 "안 됐다"만 표시하지 말고, 간단한 메모를 남기는 것이 좋습니다. 예를 들어 "히어로 제목 좋음", "후기 문구가 너무 광고 같음", "문의 폼에 웹사이트 주소 필드 없음", "모바일에서 카드 여백 좁음"처럼 적습니다.

여기서 중요한 것은 즉시 수정 요청을 보내지 않는 것입니다. 검토하면서 하나 발견할 때마다 바로 프롬프트를 보내면 수정이 산만해지고 크레딧도 많이 씁니다. 먼저 전체를 둘러보고, 수정할 내용을 모아야 합니다.

마음에 안 들어도 바로 갈아엎지 않기

첫 결과물이 마음에 들지 않을 수 있습니다. 생각보다 평범할 수도 있고, 색감이 기대와 다를 수도 있고, 문구가 어색할 수도 있습니다. 이때 가장 위험한 프롬프트가 있습니다.

마음에 안 들어. 처음부터 다시 더 예쁘게 만들어줘.

이 문장은 시원해 보이지만, 크레딧을 아끼는 관점에서는 매우 위험합니다. 러버블은 무엇이 마음에 들지 않는지 모르기 때문에 전체를 다시 해석합니다. 그러면 괜찮았던 구조까지 바뀔 수 있습니다. 메뉴가 사라지거나, 문의 폼 필드가 달라지거나, 섹션 순서가 엉킬 수 있습니다. 다시 말해 "디자인만 고치고 싶었는데 집 구조까지 다시 짓는" 상황이 생깁니다.

초보자는 결과물을 두 덩어리로 나눠야 합니다. 유지할 것과 고칠 것.

유지할 것은 절대 가볍게 보지 마세요. 첫 결과물에서 마음에 드는 부분이 하나라도 있다면 그것은 자산입니다. 예를 들어 섹션 순서가 괜찮다, 문의 폼이 제대로 있다, 모바일 반응형이 나쁘지 않다, 서비스 카드 구성이 마음에 든다 같은 요소는 유지해야 합니다.

고칠 것은 구체적으로 적습니다. "별로다"가 아니라 "히어로 섹션의 배경이 너무 밋밋하다", "CTA 버튼 색상이 눈에 띄지 않는다", "후기 문구가 너무 인위적이다", "서비스 카드의 설명이 너무 길다"처럼 적어야 합니다.

이렇게 분류하면 다음 수정 프롬프트가 훨씬 좋아집니다.

유지할 것과 고칠 것 분류표

검토가 끝나면 아래 형식으로 메모를 정리합니다. 복잡한 문서가 아니라 간단한 표면 충분합니다.

이제야 수정 프롬프트를 보낼 준비가 된 것입니다. 만약 오늘의 크레딧이 부족하다면 여기서 멈춰도 됩니다. 중요한 건 프로젝트가 이미 생성되었다는 사실입니다. 내일 다시 들어와서 이 메모를 바탕으로 수정하면 됩니다.

러버블에는 프로젝트 히스토리를 확인하고 이전 버전을 미리 보거나 되돌릴 수 있는 기능도 안내되어 있습니다.³ 그래서 수정이 무조건 두려운 것은 아닙니다. 다만 초보자일수록 되돌리기 기능을 믿고 막 바꾸기보다, 한 번에 바꿀 범위를 작게 잡는 편이 안전합니다.

첫 수정 프롬프트 예시

첫 결과물을 확인한 뒤, 다음과 같이 수정 요청을 보낼 수 있습니다. 핵심은 "유지할 것"을 먼저 말하고, "고칠 것"을 제한적으로 지시하는 것입니다.

현재 페이지의 전체 섹션 순서와 문의 폼 기능은 유지해주세요.
로그인, 결제, 데이터베이스 기능은 추가하지 마세요.

다음 부분만 개선해주세요.

1. 히어로 섹션을 더 신뢰감 있고 전문적으로 보이게 다듬어주세요.
   - 배경에 아주 은은한 딥 블루 그라데이션을 추가
   - 오른쪽 카드형 비주얼을 더 세련된 문서/컨설팅 대시보드 느낌으로 개선
   - 제목과 설명의 줄 간격을 더 보기 좋게 조정

2. CTA 버튼이 더 잘 보이도록 개선해주세요.
   - "무료 상담 문의하기" 버튼을 딥 블루 배경과 흰색 글자로 표시
   - 버튼 주변 여백을 넉넉하게 조정
   - hover 효과를 부드럽게 추가

3. 후기 섹션 문구를 더 현실적이고 신뢰감 있게 바꿔주세요.
   - 너무 과장된 마케팅 표현은 피해주세요.
   - 실제 소규모 사업자가 말할 법한 자연스러운 문장으로 작성해주세요.

4. 모바일 화면에서 카드 사이 간격과 폰트 크기를 조금 더 읽기 좋게 조정해주세요.

기존에 잘 작동하는 문의 폼과 섹션 구성은 깨지지 않도록 주의해주세요.

이런 식으로 요청하면 러버블이 전체 페이지를 새로 갈아엎기보다, 현재 결과물에서 필요한 부분을 중심으로 개선할 가능성이 높아집니다. 러버블 공식 문서에서도 좋은 결과를 위해 명확하고 구체적으로 요청하고, 한 번에 하나의 기능에 집중하며, 점진적으로 만드는 방식을 권장합니다.⁴

프로젝트 안에서 길을 잃지 않는 법

처음 러버블 에디터에 들어가면 낯선 버튼과 패널이 많아 보일 수 있습니다. 하지만 오늘 반드시 알아야 할 것은 많지 않습니다. 대략 세 영역만 기억하면 됩니다.

첫째, 채팅 또는 프롬프트 입력 영역입니다. 여기에서 러버블에게 작업을 요청합니다. 큰 구조 변경, 섹션 추가, 기능 추가처럼 AI가 코드를 수정해야 하는 작업은 보통 이곳에서 진행합니다.

둘째, 미리보기 영역입니다. 여러분이 실제로 확인해야 할 화면입니다. 사용자가 보게 될 웹페이지가 여기 나타납니다. 코드를 몰라도 이 화면을 보고 "메뉴가 있는지", "버튼이 작동하는지", "모바일에서 보기 좋은지"를 판단할 수 있습니다.

셋째, 프로젝트 설정입니다. 프로젝트 이름 변경, 공유, 배포, 접근 설정 같은 관리 기능은 설정 쪽에서 다룹니다. 공식 FAQ에 따르면 프로젝트 이름 왼쪽 위 영역에서 설정으로 들어갈 수 있고, 프로젝트 이름 변경이나 삭제 같은 작업도 설정에서 찾을 수 있습니다.²

오늘은 이 세 가지만 알아도 충분합니다. 나머지 기능은 필요할 때 배우면 됩니다. 처음부터 모든 메뉴를 이해하려고 하면 정작 중요한 첫 페이지 만들기를 시작하지 못합니다.

무료 사용자에게 맞는 오늘의 종료 지점

무료 사용자라면 "오늘 어디까지 하고 멈출 것인가"를 정하는 습관이 중요합니다. 러버블은 재미있습니다. 한 번 화면이 만들어지면 욕심이 생깁니다. "예약 기능도 붙여볼까?", "결제도 되면 좋겠다", "관리자 페이지도 있으면 멋지겠다"라는 생각이 자연스럽게 이어집니다.

하지만 첫 프로젝트의 종료 지점은 명확해야 합니다.

오늘은 랜딩 페이지 초안이 생성되고, 미리보기에서 주요 섹션이 확인되고, 수정할 내용이 메모되면 성공입니다. 여기에 첫 수정까지 한 번 적용했다면 아주 잘한 것입니다. 배포, 도메인 연결, 데이터 저장, Supabase 연동은 뒤 장에서 다룰 주제입니다. 지금 모든 것을 해결하려고 하지 마세요.

특히 문의 폼은 오늘 "제출되는 것처럼 보이는 확인 메시지"까지만 만들었습니다. 실제로 고객 문의를 저장하거나 이메일로 받으려면 데이터 저장 또는 외부 서비스 연결이 필요합니다. 그 단계는 조금 더 신중해야 합니다. 초보자가 첫날부터 백엔드와 인증, 이메일 발송까지 붙이려 하면 오류가 늘고, 오류를 고치느라 크레딧이 빠르게 줄어듭니다.

첫날의 목표는 고객에게 보여줄 수 있는 형태의 껍데기, 즉 프론트 화면을 만드는 것입니다. 껍데기라는 표현이 가볍게 들릴 수 있지만, 사업 검증에서는 이 화면만으로도 많은 일을 할 수 있습니다. 지인에게 보여주고 반응을 물어볼 수 있고, 문구가 이해되는지 테스트할 수 있고, 내 서비스가 한눈에 설명되는지 확인할 수 있습니다.

첫 프로젝트가 만들어졌다면 이미 절반은 넘었다

러버블을 처음 쓰는 사람에게 가장 큰 장벽은 기술이 아닙니다. "내가 이런 걸 해도 되나?"라는 심리적 장벽입니다. 개발자는 뭔가 특별한 사람들이고, 웹사이트는 코드를 배운 다음에나 만들 수 있는 것처럼 느껴집니다.

하지만 오늘 여러분은 프롬프트 하나로 첫 웹페이지를 화면에 띄웠습니다. 완벽하지 않아도 괜찮습니다. 오히려 완벽하지 않아서 좋습니다. 이제 고칠 수 있는 대상이 생겼기 때문입니다. 머릿속 아이디어는 수정할 수 없습니다. 하지만 화면에 나타난 페이지는 고칠 수 있습니다.

앞으로의 작업은 이 첫 결과물을 조금씩 다듬는 과정입니다. 다음 장에서는 작은 수정에 매번 프롬프트를 쓰지 않고, Visual Editor로 텍스트나 색상 같은 가벼운 변경을 처리하는 방법을 살펴봅니다. 러버블 공식 FAQ에서도 텍스트나 색상은 Visual Edits로 수정할 수 있다고 안내합니다.⁵ 이 기능을 잘 쓰면 "버튼 문구 하나 바꾸자고 크레딧을 써야 하나?"라는 아쉬움을 줄일 수 있습니다.

오늘은 여기까지면 충분합니다. 프로젝트가 생겼고, 첫 화면이 나타났고, 무엇을 유지하고 무엇을 고칠지 구분할 수 있게 되었습니다. 이제 여러분은 더 이상 "러버블을 써보고 싶은 사람"이 아닙니다. 이미 첫 프로젝트를 시작한 사람입니다.

참고

¹Lovable FAQ - Create first project

²Lovable FAQ - Project settings and rename project

³Lovable FAQ - Project history and revert

⁴Lovable Documentation - Prompting best practices

⁵Lovable FAQ - Visual Edits