Lovable이 빌드를 시작하기 전 세 가지 디자인 미리보기 중에서 고르고, 원하는 룩이 있다면 타이포그래피·색상·레이아웃을 직접 조정하세요.

디자인 가이던스(Design guidance) 는 Lovable이 빌드를 시작하기 전에 프로젝트의 시각적 방향을 잡도록 돕는 기능입니다. 프롬프트에 따라 Lovable은 다음 중 하나를 수행합니다.

• 세 가지 가벼운 디자인 방향을 제시하거나,
• 짧은 디자인 질문 세트를 묻거나,
• 시각적 방향이 이미 명확한 경우 곧바로 빌드를 진행합니다.

디자인 방향(Design directions) 은 시각적 접근 방식을 비교하고 선택하는 데 도움을 주고, 디자인 질문(Design questions) 은 이미 선호가 명확할 때 타이포그래피·색상·레이아웃을 조정하도록 돕습니다.

두 흐름 모두 첫 빌드부터 의도에 가까운 결과물을 얻고, 재작업 횟수를 줄이는 것을 목표로 합니다.

주요 이점

• 빌드 전에 미리 보기. 세 가지 렌더링된 미리보기를 나란히 비교한 뒤 방향을 확정합니다.
• 비주얼 아이덴티티 조정. 원하는 룩이 있다면 타이포그래피, 색상 팔레트, 레이아웃을 선택합니다.
• 처음부터 다시 하지 않고 다듬기. 전체 디자인 언어를 유지하면서 한 방향을 반복적으로 개선합니다.
• 나중에 변형도 가능. 기존 프로젝트의 특정 섹션(히어로, 내비바, 가격 카드, 푸터 등)에 대한 대안을 생성합니다.
• 빠른 반복. 더 탄탄한 시각적 토대에서 시작해 수정 왕복을 줄입니다.

디자인 방향

디자인 방향은 Lovable이 전체 빌드를 시작하기 전에 프로젝트에 대한 세 가지 서로 다른 시각적 접근을 생성합니다.

각 방향은 가벼운 HTML과 Tailwind 미리보기로 렌더링되어 레이아웃, 타이포그래피, 색상, 여백, 전체 비주얼 톤을 나란히 비교할 수 있습니다.

디자인 방향이 나타나는 경우

요청이 시각적으로 열려 있을 때 Lovable은 세 가지 디자인 방향을 보여줍니다. 예를 들어 다음과 같은 경우입니다.

• 디자인 옵션, 방향, 대안, 컨셉, 변형을 요청할 때.
• 아름답거나, 세련되거나, 잘 디자인되거나, 고급스럽거나, 시각적으로 인상적이거나, 비주얼 퀄리티가 강한 것을 요청할 때.
• 디자인을 탐색하거나 초안을 그려보거나 다양한 컨셉을 보고 싶다고 할 때.
• 색상·폰트·브랜드 참조를 지정하지 않은 채 열린 형태의 UI를 설명할 때.

세 가지 방향을 트리거하는 예시 프롬프트:

Build me a beautiful landing page for a coffee subscription
Design a polished portfolio site with a high-end feel
Create a visually impressive marketing page for a new product
Show me some design options for a portfolio site
Give me a few directions for a travel blog
Landing page for a trendy tech company
Explore some concepts for a pricing page

디자인 방향 사용 방법

Make it warmer
Improve readability
Use more whitespace
Make it feel more premium

기존 프로젝트의 디자인 방향

디자인 방향은 기존 프로젝트에서도 작동합니다. 특정 섹션이나 컴포넌트의 변형을 요청하세요. 예시:

Show me three options for the hero section
Three navbar variations
Give me three pricing card designs
Redesign the pricing page with three different concepts
Three options for the footer with a darker theme

기존 섹션의 스크린샷을 업로드하고 그것을 기반으로 한 재디자인을 요청할 수도 있습니다.

디자인 질문

디자인 질문은 Lovable이 프로젝트를 빌드하기 전에 비주얼 아이덴티티를 정의하도록 돕습니다. Lovable이 짧은 가이드 형식의 선택지를 안내합니다.

• 타이포그래피
  분위기별로 묶인 폰트 페어(헤딩 + 본문)에서 선택: 모던 테크, 에디토리얼, 크리에이티브, 라이프스타일, 테크니컬 등.
• 컬러 팔레트
  무드별로 큐레이션된 스와치에서 선택: 따뜻하고 흙빛(warm and earthy), 차분하고 시원함(cool and calm), 대담하고 선명함(bold and vibrant), 부드러운 파스텔, 프로페셔널 등.
• 레이아웃
  와이어프레임 옵션에서 선택: 히어로 그리드, 단일 칼럼, 스플릿 스크린, 사이드바, 메이슨리, 벤토 그리드, 매거진, 풀폭 섹션, 지그재그, 카드 그리드, 비대칭, 깨진 그리드, 피드, 갤러리 등.

제출하면 Lovable이 선택 결과를 이름이 명시된 폰트, 헥스 색상, 레이아웃 접근 방식이 포함된 상세 디자인 브리프로 변환하고, 이를 빌드 스펙으로 사용합니다.

디자인 질문이 나타나는 경우

비주얼 아이덴티티가 결과물에 큰 영향을 주는 프로젝트이거나, 프롬프트가 중요한 시각적 결정을 열어두었을 때 Lovable은 디자인 질문을 보여줍니다.

대표적으로 다음과 같은 경우입니다.

• 랜딩 페이지,
• 포트폴리오,
• 블로그,
• 마케팅 사이트,
• 그리고 시각적으로 표현적인 다른 화면들.

다음과 같은 프롬프트로 직접 디자인 질문을 트리거할 수도 있습니다.

Build me a portfolio site with a serif typeface
Landing page with a muted color palette
Marketing site with a split-screen layout

Lovable이 디자인 가이던스를 건너뛰는 경우

시각적 방향이 이미 명확하거나 불필요할 때 Lovable은 곧바로 빌드를 시작합니다.

다음과 같은 프롬프트가 해당합니다.

• 폰트, 색상, 브랜딩이 명시된 경우,
• 다른 제품이나 스타일을 직접 참조하는 경우,
• 클론할 URL이 포함된 경우,
• 이름이 명시된 디자인 시스템을 사용하는 경우.

또한 다음과 같은 경우에도 디자인 가이던스를 건너뜁니다.

• 대시보드, 어드민 패널, 내부 도구, 게임,
• 인증, 데이터베이스 스키마, RLS 정책, 엣지 함수 같이 UI 디자인 작업이 거의 없는 기능 요청,
• 디자인 템플릿으로 만들었거나 디자인 시스템에 연결된 프로젝트(이미 디자인이 정해져 있음).

의도적으로 디자인 가이던스를 건너뛰려면 프롬프트에 구체적인 비주얼 브리프를 직접 넣으세요.

제한사항

• 미리보기는 플레이스홀더. 생성된 미리보기는 일반 카피와 이미지 플레이스홀더를 사용합니다. 전체 빌드는 이를 앱에 맞는 콘텐츠로 교체합니다.
• 시간이 추가됩니다. 세 방향 단계는 전체 빌드 시작 전 몇 초가 더 걸립니다.
• 다듬기는 제한됨. 제출 전까지 최대 여섯 번 다듬을 수 있습니다. 한도에 도달하면 추가 다듬기가 비활성화됩니다.
• 큐레이션된 자산. 디자인 질문 흐름은 큐레이션된 폰트 페어, 팔레트, 레이아웃 세트에서 추출합니다. 커스텀 토큰·컴포넌트·가이드라인을 사용하려면 디자인 시스템을 참고하세요.
• 끄기 옵션 없음. 디자인 단계를 건너뛰려면 프롬프트에 구체적인 디자인 브리프를 작성하면 됩니다. 그러면 Lovable이 곧바로 빌드합니다.

FAQ