프롬프팅 모범 사례

프롬프트 전에 계획하고, 컴포넌트별로 빌드하고, 실제 콘텐츠를 사용하고, 디자인 버즈워드를 적용하여 일관되고 고품질의 결과를 얻으세요.

이 플레이북은 Lovable에서 최상의 결과를 얻기 위한 가장 효과적인 기법, 전략 및 원칙을 모았습니다. 프롬프팅이 처음이든 기술을 다듬을 준비가 되었든, 아이디어를 빠르고 일관되게 세련된 UI로 전환하는 데 도움이 되는 실행 가능한 조언과 명확한 예시를 찾을 수 있습니다.

Lovable이 명확한 질문을 하도록 하기

Lovable에서 더 나은 결과를 얻는 가장 효과적인 방법 중 하나는 코드를 작성하기 전에 AI가 빈 부분을 채우도록 하는 것입니다. 원하는 기능이나 변경 사항을 설명한 후 프롬프트 끝에 다음과 같은 줄을 추가하세요:

"이 기능에서 내가 원하는 것과 구상하는 방식을 완전히 이해하기 위해 필요한 질문을 해주세요."

이 접근 방식에는 Plan mode를 사용하는 것이 좋습니다.

Lovable은 집중적이고 종종 통찰력 있는 후속 질문으로 응답합니다. 때로는 지정하지 않았을 질문도 합니다. 이 과정은 요구 사항을 미리 명확히 하고 나중에 오해나 헛된 노력을 방지합니다.

이 방식으로 프롬프팅을 시도해 본 적이 없다면 시도해 보세요: 새로운 기능이 진정한 의도에 더 가깝게 구현되고 왔다 갔다하는 과정이 줄어드는 것을 알게 될 것입니다.

1단계: 기초 다지기

1. 프롬프트 전에 계획하기

Lovable을 사용하기 전에 무엇을 빌드할지 정의하세요. 이 단계를 건너뛰는 것은 무엇을 그릴지 결정하지 않고 그림을 시작하는 것과 같습니다. 빠른 계획 세션을 사용하세요 — 펜과 종이, 음성 메모, ChatGPT 등 무엇이든 — 다음 네 가지 질문에 답하세요:

• 이 제품이나 기능은 무엇인가?
• 누구를 위한 것인가?
• 왜 사용할 것인가?
• 사용자가 취해야 할 하나의 핵심 행동은 무엇인가?

스펙 문서를 작성하는 것이 아닙니다. 방향을 설정하는 것입니다. 생각이 일치할수록 프롬프트가 더 날카로워집니다. 모호한 아이디어는 모호한 결과를 만듭니다. 명확한 생각은 명확한 결과로 이어집니다.

프롬프트 예시

Gen Z 프리랜서를 타겟으로 한 예산 관리 앱의 원페이지 사이트를 빌드하세요. 메인 CTA는 "더 스마트하게 저축 시작하기"여야 합니다. 큰 텍스트와 강렬한 색상으로 대담하고 표현력 있는 미학에 집중하세요.

2. 사용자 여정을 시각적으로 매핑하기

디자인은 개별 화면에 관한 것이 아닙니다 — 화면 사이에서 일어나는 일에 관한 것입니다. Lovable에서 최상의 결과는 명확하고 논리적인 흐름에서 나옵니다. 사용자가 페이지에 도착해서 핵심 행동을 완료할 때까지의 여정을 매핑하세요.

전환 관점에서 생각하세요:

• 사용자가 처음 보는 것은 무엇인가?
• 무엇이 신뢰를 쌓는가?
• 무엇이 행동할 자신감을 주는가?
• 그 행동은 어디로 이어지는가?

"블록을 쌓는 것이 아닙니다. 행동을 안내하는 것입니다. 모든 섹션은 존재할 이유가 있어야 하고 — 다음 섹션으로 이어질 이유가 있어야 합니다."

3. 먼저 디자인을 제대로 잡기

시각적 언어는 마무리 레이어가 아니라 기초입니다. Lovable은 원하는 룩앤필을 일찍 알아야 합니다. 그렇지 않으면 인터페이스가 작동하지만 완전히 잘못된 느낌이 들 수 있습니다. 나중에 디자인 문제를 수정하지 마세요. 미리 결정하세요.

방향을 선택하세요, 예를 들어:

• 차분하고 우아함
• 대담하고 파괴적
• 프리미엄하고 세련됨

그런 다음 버즈워드, 톤 설명자 및 UI 패턴을 사용하여 해당 스타일을 프롬프트에 직접 입력하세요. "스타터 스타일 프롬프트"를 만들고 일관성을 위해 모든 섹션에서 재사용할 수도 있습니다.

"좋은 디자인으로 프롬프팅하는 것이 아닙니다. 좋은 디자인에서 프롬프팅하는 것입니다."

프롬프트 예시

차분하고 웰니스에서 영감을 받은 디자인을 사용하세요. 부드러운 그라데이션, 차분한 어스 톤, 둥근 모서리, 넉넉한 패딩. 폰트는 "Inter"입니다. 전체적인 톤은 부드럽고 안심되는 느낌이어야 합니다.

2단계: 시스템으로 생각하기

4. 페이지가 아닌 컴포넌트별로 프롬프팅

Lovable은 UI를 한 번에 전체 페이지가 아닌 모듈식 부품으로 빌드할 때 가장 잘 작동합니다. 전체 랜딩 페이지를 생성해 달라고 요청하는 것은 레시피를 블렌더에 넣는 것과 같습니다. 무언가는 얻겠지만 사용할 수는 없습니다.

대신 레고 블록으로 빌드하듯이 프롬프트에 접근하세요. 각 블록에는 하나의 명확한 목적과 구조가 있어야 합니다: hero 섹션, feature 그리드, testimonial 슬라이더, pricing 테이블. 하나를 빌드하고, 검토하고, 다듬은 다음, 다음으로 이동하세요.

컴포넌트별로 프롬프팅하면 명확성, 제어력 및 유연성을 얻습니다. 무언가가 제대로 보이지 않으면 전체 페이지를 다시 프롬프팅하는 대신 해당 블록만 수정할 수 있습니다. 이는 또한 여러 페이지에 걸쳐 디자인 사고를 확장하는 데 도움이 됩니다 — 컴포넌트는 처음부터 다시 작성하지 않고도 재사용하고 적응할 수 있습니다.

"전체 페이지 프롬프트는 노이즈를 제공합니다. 섹션 기반 프롬프트는 신호를 제공합니다."

프롬프트 예시

glassmorphism 효과가 있는 플로팅 메뉴 바를 만드세요. Home, Search, Music, Favorites, Add, Profile, Settings 아이콘을 포함하세요. 부드러운 플로팅 애니메이션과 smooth hover 인터랙션을 추가하세요.

5. 실제 콘텐츠로 디자인하기

Lovable은 "lorem ipsum"이나 "feature 1 / feature 2"와 같은 플레이스홀더 콘텐츠와 잘 작동하지 않습니다. 모델은 구조와 의도에 반응하도록 훈련되었으며 — 의도를 보여주는 가장 빠른 방법은 실제 단어를 사용하는 것입니다.

최종 카피가 준비되지 않았더라도 메시지를 반영하는 카피를 사용하세요. 명상 앱용 페이지를 빌드한다면 사용자가 실제로 읽을 내용을 작성하세요. 가짜로 만들지 마세요.

이것은 Lovable이 더 나은 레이아웃과 간격을 생성하는 데 도움이 될 뿐만 아니라 — 더 현명한 디자인 결정을 내리는 데 도움이 됩니다. 실제 헤드라인은 한 줄이 아닌 두 줄이 필요할 수 있습니다. CTA는 명사보다 동사일 때 더 잘 작동할 수 있습니다. 플레이스홀더 텍스트는 이러한 문제를 숨깁니다. 실제 콘텐츠는 일찍 드러냅니다.

"디자인은 제약을 좋아합니다. 실제 콘텐츠는 올바른 제약을 만듭니다."

프롬프트 예시

헤드라인이 있는 Hero 섹션: "차분하게 디자인하세요." 서브텍스트: "Lovable로 스트레스를 구조로 전환하세요." CTA: "무료로 빌드 시작하기." 넉넉한 세로 간격으로 카피 중심 레이아웃을 사용하세요.

6. 아토믹하게 말하기: 버튼, 카드, 모달

Lovable은 아톰 단위로 생각합니다. UI 언어가 작고 구체적일수록 더 잘 수행됩니다. "가입이 있는 섹션"을 요청하는 대신 "이메일 입력 필드와 둥근 CTA 버튼이 있는 폼을 추가하세요"라고 말하세요. 이러한 아토믹 지침은 네이티브 패턴으로 해석됩니다.

시스템처럼 생각하세요. 카드, 배지, 토글, 칩, 폼 필드, 드롭다운 등을 설명하세요. "제출 후 성공 토스트가 있는 모달"이라고 말할 수 있을 때 "사용자 인터페이스"라고 말하지 마세요.

이 아토믹 어휘는 또한 복잡성을 점진적으로 레이어링할 수 있게 합니다. 카드로 시작하세요. 그런 다음 배지를 추가하세요. 그런 다음 hover 상태를 추가하세요. 각 레이어는 마지막 것 위에 자연스럽게 빌드됩니다. 이것은 프롬프트를 다시 작성하지 않고도 더 많은 제어력과 더 높은 피델리티 출력을 제공합니다.

"부품이 작을수록 응답이 더 스마트해집니다."

프롬프트 예시

사용자 프로필 사진, 이름, 팔로우 버튼이 있는 카드를 만드세요. 인증된 사용자를 위한 배지를 추가하고, 배지 위에 hover할 때 툴팁을 표시하세요.

7. 버즈워드를 사용하여 미학 조정하기

시각적 스타일은 Lovable에서 프롬프팅의 가장 중요하고 가장 오해받는 부분 중 하나입니다. 레이아웃을 설명하는 것만으로는 충분하지 않습니다. 바이브에 대해 도구를 안내해야 합니다. 버즈워드가 그렇게 하는 가장 빠른 방법입니다.

Lovable은 "minimal," "expressive," "cinematic," "playful," "premium," "developer-focused"와 같은 용어를 이해합니다. 이것들은 허풍이 아닙니다 — 타이포그래피, 간격, 그림자, border radius 및 색상 팔레트에 영향을 미치는 프롬프트 가능한 파라미터입니다.

프롬프트 초반에 이러한 단어를 사용하세요. 더 좋은 것은 모든 섹션에 포함하는 것입니다. 전반적으로 일관된 디자인을 얻고 무서운 "기본 UI" 룩을 피할 수 있습니다.

버즈워드를 믹스 앤 매치하여 톤을 발전시킬 수도 있습니다. 페이지는 hero에서 "bold and disruptive"로 시작하고 pricing 섹션에서 "calm and reassuring"이 될 수 있습니다. 하나의 스타일에 갇혀 있지 않습니다 — 의도를 가지고 디자인하는 것입니다.

"디자인은 구조만이 아닙니다. 톤입니다. 버즈워드가 그것을 정의합니다."

프롬프트 예시

프리미엄하고 시네마틱하게 느껴지는 랜딩 페이지 hero를 디자인하세요. 레이어드 깊이, 반투명 표면, 부드러운 모션 블러, 헤드라인과 배경 사이의 드라마틱한 대비를 사용하세요.

3단계: 정밀하게 빌드하기

8. 레이아웃에 프롬프트 패턴 사용하기

프롬프트는 구조화되고 반복 가능한 패턴을 사용할 때 작성하기 쉽고 훨씬 더 효과적입니다. 레이아웃 레시피라고 생각하세요. 매번 처음부터 레이아웃을 설명하려고 하는 대신 일관된 리듬을 사용하여 설명하세요.

좋은 레이아웃 프롬프트는 섹션을 시각적 부분으로 나누고, 순서를 명확히 하고, 스타일링 방법을 정의합니다. 대부분의 패턴은 "header → content → action" 구조를 따르지만, 디자인하는 것에 따라 해당 흐름을 커스터마이즈할 수 있습니다.

개인 프롬프트 라이브러리를 빌드하기 시작하세요. 예를 들어, feature 그리드, testimonial 슬라이더 또는 pricing 테이블에 대한 기본 구조를 작성하세요. 다른 페이지에 맞게 약간의 수정으로 이러한 패턴을 재사용하고 리믹스하세요.

이것은 경직되는 것이 아닙니다. 효율적인 것입니다. Lovable은 구조화되고, 범위가 지정되고, 예측 가능한 프롬프트 언어에 가장 잘 응답합니다. 프롬프트 패턴은 당신을 더 빠르게 하고 화면 전반에 걸쳐 출력을 더 일관되게 만듭니다.

프롬프트 예시

중앙 정렬된 헤드라인과 가로로 정렬된 세 개의 카드가 뒤따르는 feature 섹션을 만드세요. 각 카드에는 상단에 아이콘, 헤드라인, 짧은 설명이 포함됩니다. 카드에는 부드러운 그림자가 있어야 하고 hover 시 올라와야 합니다.

9. URL을 통해 비주얼 추가하기

레이아웃을 실제처럼 느끼게 하고 싶으신가요? URL을 사용하여 제품 데모, Midjourney 생성 클립 또는 튜토리얼 비디오를 넣으세요. Lovable은 명확하게 프롬프트하면 비디오 임베드를 지원합니다.

배치(예: hero 아래 또는 feature 카드 내부), 스타일(예: 둥근 모서리, 자동 재생, 음소거) 및 컨텍스트(왜 거기에 있는지)에 대해 프롬프트하세요.

프롬프트 예시

Midjourney의 제품 데모 비디오를 임베드하세요. 이 URL을 사용하세요: https://cdn.midjourney.com/video/cb84f296-92a0-4a37-a0e3-1c9c95299488/0.mp4. feature 섹션 아래에 부드러운 그림자가 있는 전체 너비 카드에 배치하세요.

10. Edit 버튼으로 컨텍스트 레이어링하기

Edit 버튼은 Lovable에서 가장 강력한 기능 중 하나입니다 — 하지만 제대로 사용할 때만 그렇습니다. 무언가를 변경해야 할 때 전체 프롬프트를 다시 작성하는 대신, edit 기능을 사용하여 특정 레이어나 요소에 집중하세요. 이를 통해 이미 작동하는 것을 방해하지 않고 빠르게 반복할 수 있습니다.

edit를 디자인 오버라이드라고 생각하세요. 대체가 아닙니다 — 조정입니다. 예를 들어, CTA 버튼을 선택하고 카피만 변경하거나, 전체 섹션의 타이포그래피에 영향을 주지 않고 카드 레이아웃을 조정할 수 있습니다.

이것은 프로젝트를 깔끔하고 모듈식으로 유지합니다. 프롬프트 부풀림을 피하고, 더 빨리 이동하고, 이미 괜찮았던 것을 망가뜨릴 위험을 줄입니다. 편집은 또한 매번 처음부터 시작하지 않기 때문에 실험할 자신감을 더 줍니다.

편집할 때 언어를 정확하게 사용하세요. 무엇을 변경하고 싶은지와 무엇이 동일하게 유지되어야 하는지 정확히 말하세요. "이것을 더 좋게 만들어"와 같은 일반적인 표현 대신 "replace," "update," "adjust"와 같은 방향을 사용하세요.

프롬프트 예시 (edit 내)

CTA 버튼 텍스트를 "시작하기"로 변경하고 가로 패딩을 24px로 늘리세요. 기존 배경색과 폰트는 유지하세요.

4단계: 반복하고 배포하기

11. Lovable Cloud를 염두에 두고 빌드하기

레이아웃을 디자인하는 것은 제품을 빌드하는 것의 일부일 뿐입니다. Lovable 프로젝트가 단순히 보기 좋은 것 이상을 하기를 원한다면, 실제로 어떻게 작동할지 생각해야 합니다 — 그리고 우리의 내장된 Cloud가 시작하기 좋은 곳입니다.

Cloud는 사용자 인증, 데이터베이스, 스토리지, 심지어 edge functions까지 처리합니다 — 모두 모던 frontend와 잘 어울리는 방식으로. 그리고 Lovable은 프롬프트에서 바로 이러한 실제 동작에 맞게 UI를 형성할 수 있게 합니다.

Cloud를 염두에 두고 디자인할 때 다음을 예상하세요:

• Auth 로직 — 사용자가 로그인했을 때와 로그아웃했을 때 UI가 무엇을 보여야 하는가?
• 동적 콘텐츠 — 테이블에서 사용자 데이터, 게시물, 항목 또는 메트릭을 가져오고 있는가?
• 상태 — 데이터가 비어 있거나 아직 로딩 중이거나 실패하면 어떻게 되는가?

이러한 초기 사고는 더 스마트한 섹션을 프롬프트하는 데 도움이 되고 나중에 개발을 더 원활하게 만듭니다.

프롬프트 예시

사용자가 Cloud를 통해 로그인한 경우 오른쪽 상단에 프로필 이미지와 이름을 표시하세요. 그렇지 않은 경우 "로그인" 버튼을 표시하고 auth 화면으로 라우팅하세요.

팁: 디자인 중에 작동하는 backend가 필요하지 않습니다 — 하지만 이미 있는 것처럼 UI를 형성하는 것이 레이아웃을 미래에 대비하는 방법입니다.

12. 버전 관리는 친구입니다

Lovable은 변경 사항을 자동 저장하지만, 그렇다고 생각 없이 빠르게 이동해야 한다는 의미는 아닙니다. 무엇을 변경했고 왜 변경했는지 추적하지 않으면 노이즈만 만드는 것이고 — 빠르게 통제력을 잃을 것입니다.

좋은 버전 관리는 파일 이름을 지정하는 것이 아닙니다. 반복 단위로 생각하는 것입니다. 한 번에 하나의 의미 있는 변경을 하세요. hero 카피를 업데이트하세요. feature 그리드를 추가하세요. 레이아웃을 조정하세요. 결과를 확인하세요. 그런 다음 앞으로 나아가세요.

이것이 실제 디자인 시스템이 빌드되는 방식입니다 — 의도를 가지고 레이어별로.

Lovable이 백그라운드에서 버전을 관리하더라도 자신만의 시스템을 채택하세요:

• 마일스톤으로 생각하세요 (예: 레이아웃 잠금, 콘텐츠 추가, 로직 연결)
• 프롬프트에 노트를 사용하세요 (예: "CTA 텍스트 변경 및 카드 간격 조정")
• 주요 변경 전에 미리 보고, 위험한 도약을 하려면 복제하세요

"자동 저장이 자동 정리를 의미하지는 않습니다. 의도적으로 빌드하세요. 인식을 가지고 반복하세요."

프롬프트 습관

주요 변경을 하기 전에 현재 버전을 복제하고 레이블을 지정하세요. 작은 비용, 큰 안전망.