디자인 도구로 프로젝트 커스터마이징하기

디자인 도구를 사용하여 테마를 적용 및 커스터마이징하고, UI 요소를 수정하고, 프로젝트 전체에서 일관된 브랜딩을 유지하세요.

디자인 도구는 상위 수준 테마부터 상세한 시각적 편집까지 프로젝트를 시각적으로 커스터마이징하는 데 필요한 모든 것을 모았습니다. 테마를 통해 프로젝트의 전체적인 룩을 관리하거나 Visual Edits를 사용하여 코드를 작성하거나 크레딧을 사용하지 않고 빠르고 대상화된 변경을 할 수 있습니다.

디자인 도구에 액세스하려면 Preview 옆의 + 버튼에서 Design 뷰로 이동하세요.

디자인 도구를 사용하는 이유

디자인 도구는 디자이너, 마케터 및 비기술 팀원 모두가 시각적으로 디자인을 변경하고, 브랜드를 유지하고, 더 빠르게 이동할 수 있도록 합니다.

주요 이점

• 일관된 브랜딩: 브랜드 아이덴티티를 반영하는 공유 테마 적용
• 더 빠른 반복: 레이아웃과 텍스트를 시각적으로 업데이트—코드나 프롬프트 불필요
• 접근 가능한 편집: 비기술 사용자가 자신 있게 디자인 변경 가능
• 실시간 미리보기: 게시하기 전에 모든 시각적 변경을 실시간으로 확인

일반적인 사용 사례

• 여러 프로젝트에서 브랜드 일관성을 유지하는 디자이너
• 브랜드 가이드라인을 벗어나지 않고 새 캠페인 페이지를 출시하는 마케터
• 레이아웃과 카피를 직접 다듬는 프로덕트 매니저
• 공유 비주얼 스타일로 프로토타입과 변형을 빠르게 빌드하는 팀

테마

테마는 프로젝트의 핵심 스타일 시스템—색상, 폰트, 간격, 테두리 반경—을 정의하여 브랜드 아이덴티티의 기초를 형성합니다.

주요 기능

• 적용: 내장된 Lovable 템플릿에서 선택하거나 커스텀 테마 적용
• 생성: 현재 프로젝트에서 테마 생성
• 가져오기: 커스텀 CSS 파일(예: index.css 또는 globals.css)을 업로드하여 테마로 변환
• 커스터마이징: UI에서 직접 색상, 타이포그래피 및 간격 편집
• 공유: 테마는 워크스페이스의 모든 멤버에게 제공
• 미리보기: 적용하기 전에 변경 사항을 실시간으로 테스트

비주얼 편집

Visual Edit 모드를 사용하면 페이지에서 바로 프로젝트를 시각적으로 변경할 수 있습니다. 레이아웃과 간격을 완전히 제어하면서 빠르고 직관적인 조정을 위해 설계되었습니다.

주요 기능

• ⌘ Command(Mac) 또는 ⊞ Win(Windows)를 누른 상태에서 요소 다중 선택하여 일괄 편집
• 정렬 및 위치 지정을 위한 레이아웃 컨트롤
• 컨테이너의 개별 측면에서 마진과 패딩 조정
• 사이드바에서 직접 텍스트, 색상 및 폰트 편집
• 줄 바꿈 및 인라인 스타일링이 있는 향상된 텍스트 포맷팅
• 파일을 업로드하거나 이미지 URL을 추가하여 이미지 교체
• 프롬프트로 이미지를 편집하여 AI 이미지 생성

빠른 시작

1. Preview 옆의 + 버튼에서 Design 뷰를 엽니다.

2. 왼쪽 패널에서 테마와 Visual Edit 탭 사이를 전환하여 프로젝트 디자인 작업을 합니다.

   • 테마로 이동하여 테마를 선택하거나 직접 만들고 프로젝트에 적용합니다.
   • Visual Edits로 이동하여 실시간 미리보기에서 요소를 선택하고 시각적으로 편집합니다.

   Visual Edits에 빠르게 액세스하려면 프롬프트 상자의 Visual Edits 바로가기를 사용하세요.

3. 결과에 만족하면 미리보기 및 저장합니다.