계획 먼저, 컴포넌트별 빌드, 실제 콘텐츠 활용 등 일관된 결과를 얻는 프롬프팅 기법을 정리합니다.
프롬프팅 모범 사례
프롬프트 전에 계획하고, 컴포넌트별로 빌드하고, 실제 콘텐츠를 사용하고, 디자인 버즈워드를 적용해 일관되고 품질 높은 결과를 얻으세요.
이 플레이북은 Lovable에서 최상의 결과를 얻기 위한 가장 효과적인 기법, 전략, 원칙을 모았습니다. 프롬프팅이 처음이든 기술을 다듬을 준비가 되었든, 아이디어를 빠르고 일관되게 세련된 UI로 바꾸는 데 도움이 되는 실행 가능한 조언과 명확한 예시를 찾을 수 있습니다. 이 기법들이 제품을 만드는 전체 여정에서 어디에 놓이는지는 Lovable로 진짜 제품 만들기를, 자주 쓰는 기능에 바로 쓸 수 있는 프롬프트는 프롬프트 라이브러리를 참고하세요.
Lovable이 명확한 질문을 하도록 하기
더 나은 결과를 얻는 가장 효과적인 방법 하나는 코드를 작성하기 전에 Lovable이 빈 곳을 채우게 하는 것입니다. 원하는 기능이나 변경 사항을 밝힌 뒤 프롬프트 끝에 다음 한 줄을 덧붙이세요.
이 기능에서 제가 원하는 것과 구상하는 방식을 온전히 이해하는 데 필요한 질문을 해 주세요.Plan mode는 특히 이 방식과 잘 맞습니다.
Lovable은 집중적이고 종종 통찰력 있는 후속 질문으로 답하며, 때로는 미처 지정할 생각을 못 했던 것까지 묻습니다. 요구 사항을 미리 분명히 해 두면 나중에 생길 오해와 헛수고를 막을 수 있고, 새 기능이 왔다 갔다 하는 과정 없이 본래 의도에 더 가깝게 구현됩니다.
1단계: 기초 다지기
프롬프트 전에 계획하기
Lovable을 사용하기 전에 무엇을 빌드할지 정의하세요. 이 단계를 건너뛰는 것은 무엇을 그릴지 정하지 않고 그림을 시작하는 것과 같습니다. 펜과 종이, 음성 메모, ChatGPT 등 무엇이든 활용해 짧은 계획 시간을 갖고 다음 네 가지 질문에 답하세요.
- 이 제품이나 기능은 무엇인가
- 누구를 위한 것인가
- 왜 사용하는가
- 사용자가 취해야 할 하나의 핵심 행동은 무엇인가
스펙 문서를 쓰라는 뜻이 아닙니다. 방향을 잡으라는 뜻입니다. 모호한 아이디어는 모호한 결과를 낳고, 명확한 생각은 명확한 결과로 이어집니다.
프롬프트 예시
Gen Z 프리랜서를 겨냥한 예산 관리 앱의 원페이지 사이트를 빌드하세요. 메인 CTA는 "더 스마트하게 저축 시작하기"입니다. 큰 텍스트와 강렬한 색상으로 대담하고 표현력 있는 미감에 집중하세요.사용자 여정을 시각적으로 매핑하기
디자인은 개별 화면에 관한 것이 아닙니다. 화면 사이에서 일어나는 일에 관한 것이며, 최상의 결과는 명확하고 논리적인 흐름에서 나옵니다. 사용자가 페이지에 도착해 핵심 행동을 완료하기까지의 여정을 매핑하세요.
전환의 관점에서 생각해 보세요.
- 사용자가 처음 보는 것은 무엇인가
- 무엇이 신뢰를 쌓는가
- 무엇이 행동할 자신감을 주는가
- 그 행동은 어디로 이어지는가
hero, features, call to action로 이어지는 간단한 세 단계 스케치만으로도 프롬프트가 훨씬 효과적으로 바뀝니다.
블록을 쌓는 것이 아니라 행동을 안내하는 것입니다. 모든 섹션에는 존재할 이유가 있어야 하고, 다음 섹션으로 이어질 이유가 있어야 합니다.
먼저 디자인을 제대로 잡기
시각 언어는 마무리 레이어가 아니라 기초입니다. Lovable은 원하는 룩앤필을 일찍 알아야 합니다. 그렇지 않으면 인터페이스가 작동은 하되 느낌이 전혀 다를 수 있고, 디자인 문제는 나중에 고치는 편이 미리 정하는 것보다 훨씬 어렵습니다.
방향을 하나 고르세요. 예를 들면 다음과 같습니다.
- 차분하고 우아함
- 대담하고 파격적
- 프리미엄하고 세련됨
그런 다음 버즈워드, 톤 서술어, UI 패턴을 사용해 그 스타일을 프롬프트에 직접 담으세요. 스타터 스타일 프롬프트를 만들어 모든 섹션에서 재사용해 일관성을 지키거나, 프로젝트 지식에 저장할 수도 있습니다.
프롬프트 예시
차분하고 웰니스에서 영감을 받은 디자인을 사용하세요. 부드러운 그라데이션, 차분한 어스 톤, 둥근 모서리, 넉넉한 패딩을 씁니다. 폰트는 "Inter"입니다. 전체 톤은 부드럽고 안심되는 느낌이어야 합니다.2단계: 시스템으로 생각하기
페이지가 아닌 컴포넌트별로 프롬프팅하기
Lovable은 UI를 한 번에 전체 페이지로 만들 때보다 모듈 단위로 빌드할 때 가장 잘 작동합니다. 레고 블록을 쌓듯 프롬프트에 접근하세요. 각 블록에는 하나의 분명한 목적과 구조가 있습니다. hero 섹션, feature 그리드, testimonial 슬라이더, pricing 테이블처럼요. 하나를 빌드하고, 검토하고, 다듬은 다음 다음으로 넘어갑니다.
컴포넌트별로 프롬프팅하면 명확성과 제어력, 유연성을 얻습니다. 뭔가 어색하면 전체 페이지를 다시 프롬프팅하는 대신 그 블록만 고치면 됩니다. 컴포넌트는 처음부터 다시 쓰지 않고도 여러 페이지에서 재사용하고 변형할 수 있습니다. 전체 페이지 프롬프트는 노이즈를 주고, 섹션 기반 프롬프트는 신호를 줍니다.
프롬프트 예시
glassmorphism 효과가 있는 플로팅 메뉴 바를 만드세요. Home, Search, Music, Favorites, Add, Profile, Settings 아이콘을 넣으세요. 은은한 플로팅 애니메이션과 부드러운 hover 인터랙션을 추가하세요.실제 콘텐츠로 디자인하기
"lorem ipsum"이나 "feature 1 / feature 2" 같은 자리표시자 콘텐츠는 Lovable이 반응할 거리를 주지 못합니다. 의도를 보여 주는 가장 빠른 방법은 실제 단어를 쓰는 것입니다. 최종 카피가 준비되지 않았더라도 메시지를 반영하는 카피를 쓰세요. 명상 앱 페이지를 빌드한다면 사용자가 실제로 읽을 내용을 쓰면 됩니다.
실제 콘텐츠는 레이아웃과 간격을 더 낫게 만들 뿐 아니라 더 현명한 디자인 결정을 돕습니다. 실제 헤드라인은 한 줄이 아니라 두 줄이 필요할 수 있고, CTA는 명사보다 동사일 때 더 잘 작동할 수 있습니다. 자리표시자 텍스트는 이런 문제를 감추지만 실제 콘텐츠는 일찍 드러냅니다.
프롬프트 예시
헤드라인이 "차분하게 디자인하세요."인 Hero 섹션을 만드세요. 서브텍스트는 "Lovable로 스트레스를 구조로 바꾸세요.", CTA는 "무료로 빌드 시작하기."입니다. 넉넉한 세로 여백과 카피 중심 레이아웃을 사용하세요.아토믹하게 말하기: 버튼, 카드, 모달
UI 언어가 작고 구체적일수록 Lovable의 성능이 좋아집니다. "가입이 있는 섹션"을 요청하는 대신 "이메일 입력 필드와 둥근 CTA 버튼이 있는 폼을 추가하세요"라고 말하세요. 카드, 배지, 토글, 칩, 폼 필드, 드롭다운을 설명하세요. "제출 후 성공 토스트가 뜨는 모달"이라고 말할 수 있다면 "사용자 인터페이스"라고 말하지 마세요.
이런 아토믹 어휘는 복잡도를 단계적으로 쌓게도 해 줍니다. 카드로 시작해 배지를 더하고 hover 상태를 더합니다. 각 레이어가 앞 레이어 위에 자연스럽게 쌓이므로 프롬프트를 다시 쓰지 않고도 더 큰 제어력과 높은 완성도를 얻습니다.
프롬프트 예시
사용자 프로필 사진, 이름, 팔로우 버튼이 있는 카드를 만드세요. 인증된 사용자에게는 배지를 달고, 배지에 hover하면 툴팁이 보이게 하세요.버즈워드로 미감 조율하기
시각 스타일은 프롬프팅에서 가장 중요하면서도 가장 오해받는 부분입니다. 레이아웃을 설명하는 것만으로는 부족합니다. 분위기를 전달해야 하고, 버즈워드가 그 가장 빠른 방법입니다.
Lovable은 "minimal", "expressive", "cinematic", "playful", "premium", "developer-focused" 같은 표현을 이해합니다. 이는 겉치레가 아니라 타이포그래피, 간격, 그림자, border radius, 색상 팔레트에 실질적인 영향을 줍니다. 프롬프트 앞부분에서, 되도록 모든 섹션에서 사용하면 기본 UI 느낌을 벗어난 일관된 디자인을 얻습니다. 표현이 구체적이고 분명할수록 결과가 좋아집니다. "colorful"보다 "bold, saturated colors"가 훨씬 멀리 데려다줍니다.
스타일 방향마다 고유한 어휘가 있습니다. 20가지 스타일 방향과 키워드 전체 목록, 그리고 가장 흔한 방향에 바로 쓸 수 있는 디자인 프롬프트는 프롬프트 라이브러리의 디자인 섹션을 참고하세요.
버즈워드를 섞어 한 페이지 안에서 톤을 바꿀 수도 있습니다. hero는 "bold and disruptive"로, pricing 섹션은 "calm and reassuring"으로 갈 수 있습니다. 하나의 스타일에 갇히는 것이 아니라 의도를 가지고 디자인하는 것입니다.
프롬프트 예시
프리미엄하고 시네마틱한 느낌의 랜딩 페이지 hero를 디자인하세요. 층이 느껴지는 깊이감, 반투명 표면, 부드러운 모션 블러, 헤드라인과 배경 사이의 극적인 대비를 사용하세요.스타일에 간격, 타이포그래피, 모션을 함께 묶은 조합이 특히 잘 통합니다.
랜딩 페이지를 대담하고 파격적으로 빌드하세요. 초대형 타이포그래피, 고대비 색상, 엄격한 그리드, 아주 큰 CTA를 사용하세요.온보딩 흐름을 차분하고 유기적으로 디자인하세요. 부드러운 그라데이션, 차분한 어스 톤, 은은한 전환, 넉넉한 여백, 둥근 모서리를 가운데 정렬한 단일 컬럼에 적용하세요.스타일을 정했다면 그 키워드를 프로젝트 지식에 저장하세요. 그러면 Lovable이 매번 다시 말하지 않아도 모든 프롬프트에 디자인 방향을 적용하고, 새로 만드는 섹션도 이미 빌드한 부분과 일관성을 유지합니다.
3단계: 정밀하게 빌드하기
레이아웃에 프롬프트 패턴 사용하기
구조화되고 반복 가능한 패턴을 쓰면 프롬프트를 쓰기 쉽고 훨씬 효과적입니다. 레이아웃 레시피라고 생각하세요. 좋은 레이아웃 프롬프트는 섹션을 시각 요소로 나누고, 순서를 분명히 하고, 스타일링 방식을 정의합니다. 대부분 헤더, 콘텐츠, 액션 구조를 따르며 디자인 대상에 맞춰 조정됩니다.
개인 프롬프트 라이브러리를 만드세요. feature 그리드, testimonial 슬라이더, pricing 테이블의 기본 구조를 정해 두고 여러 페이지에서 재사용하고 변형하세요. Lovable은 구조가 잡히고 범위가 분명하며 예측 가능한 프롬프트 언어에 가장 잘 반응합니다.
프롬프트 예시
가운데 정렬한 헤드라인 아래에 가로로 나란히 놓인 카드 세 개가 있는 feature 섹션을 만드세요. 각 카드에는 위쪽에 아이콘, 그 아래 헤드라인과 짧은 설명을 넣습니다. 카드에는 부드러운 그림자를 주고 hover하면 살짝 떠오르게 하세요.URL로 비주얼 추가하기
레이아웃이 실제처럼 느껴지길 원하나요. 제품 데모나 호스팅된 클립을 URL로 넣으세요. 명확히 프롬프트하면 Lovable이 동영상 임베드를 지원합니다. 배치(hero 아래, feature 카드 안), 스타일(둥근 모서리, 자동 재생, 음소거), 맥락(왜 거기 있는지)을 프롬프트에 담으세요.
프롬프트 예시
제품 데모 영상을 임베드하세요. URL은 https://cdn.midjourney.com/video/cb84f296-92a0-4a37-a0e3-1c9c95299488/0.mp4입니다. feature 섹션 아래에 부드러운 그림자가 있는 전체 너비 카드로 배치하세요.무엇을 바꾸고 무엇을 그대로 둘지 말하기
좋은 변경 프롬프트에는 세 가지가 있습니다. 무엇을 만들지, 어디에 놓을지, 무엇은 건드리지 말아야 하는지입니다. Lovable은 빠르게 움직이므로 경계를 정해 주지 않으면 작은 요청이 이미 잘 돌아가는 부분까지 번질 수 있습니다. 가드레일을 명시하면 변경 범위가 유지됩니다.
당연해 보여도 경계를 분명히 적으세요. "orders 페이지만 변경", "기존 스타일링 유지", "login은 건드리지 말 것"처럼요.
프롬프트 예시
사용자가 상태로 필터링할 수 있도록 orders 테이블에 필터 드롭다운을 추가하세요. orders 페이지만 변경하세요. 테이블의 기존 스타일링은 유지하고 앱의 나머지는 그대로 두세요.프리뷰 툴바로 요소 지목하기
특정한 부분을 바꿔야 할 때는 다시 프롬프트하는 것보다 지목하는 편이 낫습니다. 프리뷰 툴바로 정확한 요소를 선택하고 변경 내용을 설명하세요. 프롬프트 전체를 다시 쓰다가 이미 잘 작동하는 부분을 망칠 위험을 줄일 수 있습니다. 헤드라인이나 버튼 라벨 같은 일반 텍스트는 페이지에서 직접 편집할 수 있습니다.
이런 편집은 교체가 아니라 조정으로 다루세요. CTA 버튼을 선택해 문구만 바꾸거나, 섹션의 타이포그래피는 건드리지 않고 카드 레이아웃만 손봅니다. 무엇이 바뀌고 무엇이 그대로인지 정확히 말하고, "더 좋게 만들어 줘"보다는 "교체", "업데이트", "조정" 같은 지시어를 쓰세요.
프롬프트 예시(요소를 선택한 상태)
CTA 버튼 텍스트를 "Get Started"로 바꾸고 좌우 패딩을 24px로 늘리세요. 기존 배경색과 폰트는 유지하세요.4단계: 반복하고 배포하기
백엔드를 염두에 두고 빌드하기
레이아웃 디자인은 제품 빌드의 한 부분일 뿐입니다. 프로젝트가 보기 좋은 것 이상을 하길 원한다면 실제로 어떻게 작동할지 생각해야 하며, 기본 제공 백엔드(Cloud)가 그 출발점으로 자연스럽습니다. 사용자 인증, 데이터베이스, 스토리지, Edge Function을 처리하고, Lovable은 프롬프트 단계에서부터 이런 실제 동작에 맞춰 UI를 잡아 줍니다.
백엔드를 염두에 두고 디자인할 때는 다음을 미리 생각하세요.
- 인증 로직: 사용자가 로그인했을 때와 안 했을 때 UI는 무엇을 보여야 하는가
- 동적 콘텐츠: 테이블에서 사용자 데이터, 게시물, 항목, 지표를 가져오는가
- 상태: 데이터가 비어 있거나, 아직 로딩 중이거나, 실패하면 어떻게 되는가
디자인 단계에서 작동하는 백엔드가 필요하지는 않습니다. 이미 있는 것처럼 UI를 잡아 두는 것이 레이아웃을 미래에 대비시키는 방법입니다.
프롬프트 예시
사용자가 로그인한 상태면 오른쪽 위에 프로필 이미지와 이름을 보여 주세요. 로그인하지 않았다면 "Log In" 버튼을 표시하고 인증 화면으로 이동시키세요.버전 기록으로 반복하기
완벽한 프롬프트 하나를 쓰려는 것이 아니라 빌드를 관리하는 것입니다. 각 프롬프트는 이미 존재하는 코드 위에 쌓이므로 초기 구조 결정이 시간이 갈수록 누적됩니다.
Lovable은 모든 변경을 버전 기록에 자동으로 저장하지만, 자동 저장이 자동 정리를 뜻하지는 않습니다. 의미 있는 변경을 한 번에 하나씩 하세요. hero 카피를 고치고, feature 그리드를 추가하고, 레이아웃을 조정하고, 결과를 확인한 다음 앞으로 나아갑니다. 실제 디자인 시스템은 이렇게 한 겹씩 의도를 가지고 만들어집니다.
반복을 안전하게 지켜 주는 습관이 둘 있습니다.
- 마일스톤을 북마크하세요. 레이아웃 확정, 콘텐츠 추가, 로직 연결처럼 작동하는 상태에 이를 때마다 버전을 북마크해 두면 언제든 돌아갈 정상 상태가 생깁니다.
- 위험한 변경 전에 미리 보세요. 큰 리디자인 전에 기록에서 현재 버전을 열어 두면 실험이 실패했을 때 무엇으로 돌아갈지 알 수 있습니다. 그런 다음 과감하게 프롬프트하고 자유롭게 되돌리세요.