디자인 시스템

Lovable에서 재사용 가능한 디자인 시스템을 만들어 엔터프라이즈 프로젝트 전체에서 React 컴포넌트 라이브러리, 스타일링 가이드라인 및 설정을 표준화하세요.

디자인 시스템을 사용하면 컴포넌트 라이브러리, 스타일링 가이드라인 및 설치 지침을 한 번 정의하고 워크스페이스의 모든 프로젝트에서 재사용할 수 있습니다. 프로젝트 시작 시 파일을 복사하는 템플릿과 달리, 디자인 시스템은 각 프로젝트 생성 중에 Lovable이 읽고 적용하는 지속적인 지침을 제공합니다.

Lovable에서 디자인 시스템은 전용 프로젝트로 생성됩니다. 이 프로젝트는 디자인 시스템의 진실의 소스 역할을 하며 워크스페이스의 다른 프로젝트에 연결할 수 있습니다.

얻을 수 있는 것

• UI 컴포넌트와 스타일을 위한 중앙화된 진실의 소스
• 연결된 모든 프로젝트에 업데이트 자동 전파
• 생성 중 명확하고 시행 가능한 디자인 및 코드 가이드라인

디자인 시스템 작동 방식

Lovable의 디자인 시스템은 컴포넌트, 스타일 및 설정 지침이 프로젝트 전체에 적용되는 방식을 정의합니다. 디자인 시스템은 일반 Lovable 프로젝트이며 다른 프로젝트처럼 열고 편집할 수 있습니다.

디자인 시스템의 구성 요소

Lovable의 디자인 시스템은 세 가지 핵심 부분을 결합합니다:

1. 컴포넌트: React 컴포넌트 라이브러리(공개 또는 비공개 npm 패키지)
2. 가이드라인: 스타일 규칙, 사용 패턴 및 컴포넌트 사양
3. 설치: 설정 지침 및 필요한 구성

이미 이러한 것들이 있다면 Lovable에서 디자인 시스템 프로젝트를 만들고 기존 자료를 참조할 수 있습니다. 문서가 흩어져 있거나 불완전한 경우 Lovable 내에서 직접 디자인 시스템을 만들고 개선할 수 있습니다.

디자인 시스템 프로젝트와 .lovable 폴더

디자인 시스템 프로젝트는 특별한 .lovable 폴더를 소유합니다. 이 폴더에는 연결된 프로젝트에서 코드를 생성할 때 Lovable이 사용하는 지침이 포함됩니다:

• system.md: 연결된 프로젝트에 항상 로드되는 핵심 설치 지침 및 상위 수준 가이드라인
• rules/: 프로젝트 생성 중 Lovable이 참조할 수 있는 컴포넌트 사양, 가이드라인 및 패턴이 있는 개별 Markdown 파일

디자인 시스템이 프로젝트에 적용되는 방식

프로젝트가 디자인 시스템에 연결되면 Lovable은 디자인 시스템의 .lovable 폴더 내용을 읽고 프로젝트 생성 중에 해당 규칙을 적용합니다.

디자인 시스템 프로젝트에 대한 업데이트는 다음에 Lovable이 코드를 생성할 때 연결된 모든 프로젝트에서 선택됩니다.

주요 참고 사항 및 제한 사항

• .lovable 폴더는 디자인 시스템 프로젝트가 소유하며 연결된 프로젝트에서 편집할 수 없습니다.
• 디자인 시스템에 대한 업데이트는 다음 생성 시 연결된 모든 프로젝트에 자동으로 적용됩니다.
• 디자인 시스템은 아직 버전 관리되지 않습니다. 워크플로우에 이것이 필요하면 계정 팀에 문의하세요.
• MCP 서버나 패키지에 필요한 모든 것이 포함되어 있으면 설치 전용 디자인 시스템을 만들 수 있습니다.
• 디자인 시스템은 React 컴포넌트 라이브러리와 네이티브하게 작동합니다.
• 모든 프로젝트는 프로젝트 설정에서 디자인 시스템으로 변환할 수 있습니다. 프로젝트가 디자인 시스템으로 표시되면 워크스페이스의 다른 프로젝트가 연결할 수 있게 됩니다.
• 디자인 시스템이나 관련 문서가 VPC 내에 호스팅되어 있으면 계정 팀에 가이드를 요청하세요.

디자인 시스템 만들기

액세스 준비 (비공개 패키지만 해당)

컴포넌트 라이브러리나 패키지가 비공개인 경우 워크스페이스 설정 → 빌드 시크릿으로 이동하여 필요한 빌드 시크릿(예: npm 토큰)을 추가하세요.

디자인 시스템 프로젝트 만들기

lovable.dev 프롬프트 상자의 + 드롭다운에서 디자인 시스템으로 이동하고 디자인 시스템 만들기를 선택하세요.

이렇게 하면 새 디자인 시스템 프로젝트가 생성됩니다. Lovable이 프로젝트에 이름을 할당하며, 프로젝트 설정에서 변경할 수 있습니다.

디자인 시스템에 의미 있는 이름을 지정하세요. 이 이름은 나중에 프로젝트에 디자인 시스템을 연결할 때 사용됩니다.

Lovable과 채팅하여 디자인 시스템 구성

두 가지 주요 방법으로 디자인 시스템을 설정할 수 있습니다.

옵션 A: 기존 React 라이브러리 자동 가져오기

디자인 시스템이 React 컴포넌트로 구현된 경우 채팅에서 저장소 또는 문서 URL을 공유하세요.

• 공개인 경우 Lovable이 자동으로 가져옵니다
• 비공개인 경우 Lovable이 구성한 시크릿을 사용하여 가져옵니다

컴포넌트를 가져오는 것 외에도 Lovable에게 해당 컴포넌트를 올바르게 사용하는 방법을 알려줘야 합니다. 이 가이드는 다음에서 올 수 있습니다:

• 기존 문서 사이트 또는 저장소
• 가져온 PDF, Markdown 파일 또는 스크린샷
• 디자인 시스템 문서를 노출하는 MCP 서버
• 채팅에서 제공하는 직접 지침

기존 라이브러리를 가져올 때 가이드 질문을 무시하고 URL을 입력하세요.

옵션 B: 구조화된 지침으로 디자인 시스템 빌드

문서가 흩어져 있거나 불완전한 경우 Lovable을 명시적으로 안내하여 디자인 시스템을 빌드하세요. 이 접근 방식을 통해:

• PDF, Markdown 파일, 스크린샷 및 기타 자산 가져오기
• 컴포넌트, 패턴, 토큰 및 스타일링 가이드라인 정의
• 설치 및 설정 지침 작성
• 연결된 프로젝트 전체에서 동적으로 업데이트

권장 프롬프트 구조

[상위 수준 목표]

[설치 지침]

[시스템 설정을 위한 기타 컨텍스트, 예: 기술 스택 및 제약 조건]

[컴포넌트 라이브러리 요청]

[더 많은 컨텍스트를 위한 문서, 사이트, PDF, MCP 링크. Lovable은 웹사이트를 크롤링할 수 있으므로 여기에 넓은 컨텍스트를 포함하세요.]

첫 번째 실행 후 Lovable은 작동하는 디자인 시스템 프로젝트를 생성합니다. 예: https://design-system-demo.lovable.app/

프로젝트에 디자인 시스템 연결하기

각 프로젝트의 설정에서 어떤 디자인 시스템이 연결되어 있거나 연결 가능한지 확인할 수 있습니다.

프로젝트에 여러 디자인 시스템을 연결할 수 있습니다. 연결된 디자인 시스템의 순서는 Agent가 프로젝트 생성 중에 우선순위를 정하는 방식을 결정합니다. 프로젝트 설정에서 연결된 디자인 시스템을 재정렬할 수 있습니다.

프로젝트 설정에서 언제든지 연결된 디자인 시스템을 제거할 수 있습니다. 제거된 디자인 시스템은 해당 프로젝트의 향후 생성에 더 이상 적용되지 않습니다.

새 프로젝트에 디자인 시스템 연결하기

lovable.dev 프롬프트 상자의 + 드롭다운에서 디자인 시스템으로 이동하고 사용 가능한 목록에서 디자인 시스템을 선택한 다음 프롬프트를 입력하세요. Lovable이 선택한 디자인 시스템을 사용하여 새 프로젝트를 생성합니다.

기존 프로젝트에 디자인 시스템 연결하기

기존 프로젝트에 디자인 시스템을 연결하려면 아래 단계를 따르세요:

1. 프로젝트 설정 → 디자인 시스템으로 이동합니다.
2. 사용 가능 아래에서 디자인 시스템을 선택하고 추가를 클릭합니다.
3. 저장을 클릭합니다.

디자인 시스템 개선하기

디자인 시스템은 진화하도록 설계되었습니다. 초기 설정 후 .lovable 폴더의 내용을 반복합니다.

1. 구조 확인
   .lovable 폴더를 열어 Lovable이 디자인 시스템을 어떻게 해석했는지 확인하세요. 이러한 파일이 연결된 모든 프로젝트에 적용되는 것입니다.
2. 불일치 수정
   컴포넌트가 올바르게 렌더링되지 않으면 Lovable에게 수정하고 동시에 .lovable 폴더를 업데이트하도록 요청하세요.
3. 세부 사항 추가
   필요에 따라 추가 컴포넌트 문서, 토큰 정의 또는 사용 패턴을 요청하세요.

.lovable 폴더 구조

Lovable은 보통 이것을 자동으로 생성하지만, 구조를 이해하면 디버깅에 도움이 됩니다. 예상치 못한 동작을 발견하면 이 구조가 일반적으로 따르고 있는지 확인하세요.

.lovable/
├── system.md (최대 ~500줄)
│   ├── 설치 지침 (10줄)
│   │   - 비공개 패키지 설정
│   │   - 환경 변수
│   │   - 샘플 .npmrc
│   ├── 자산 링크 (폰트, 아이콘 등)
│   ├── 디렉토리 가이드 (20줄)
│   │   - 어떤 파일이 있는지
│   │   - 언제 참조해야 하는지
│   └── 일반 가이드라인 (나머지 줄)
│       - 코드 패턴
│       - 디자인 원칙
│       - 의사결정 트리
└── rules/
    ├── components/
    │   ├── button.md
    │   ├── input.md
    │   └── modal.md
    ├── patterns/
    │   ├── forms.md
    │   └── navigation.md
    └── styling/
        ├── colors.md
        └── typography.md

MCP 서버로 외부 디자인 시스템 문서 가져오기

MCP 서버를 사용하여 npm 패키지와 별도로 저장된 디자인 시스템 문서를 가져올 수 있습니다. 자세한 내용은 개인 커넥터(MCP 서버)로 도구와 통합하기를 참조하세요.

템플릿과 디자인 시스템 중 선택하기

템플릿은 시작점으로 사용되는 전체 프로젝트 복사본입니다.

다음의 경우 템플릿을 사용하세요:

• 복잡한 설정이 필요한 경우 (여러 패키지, 커스텀 구성)
• 프레임워크 변형이 필요한 경우 (React, Vue, Vite)
• 재생성하지 않아야 하는 무거운 보일러플레이트가 있는 경우

다음의 경우 디자인 시스템을 사용하세요:

• 지속적인 가이드와 일관성을 원하는 경우
• 패턴과 컴포넌트가 시간이 지남에 따라 진화하는 경우
• 업데이트가 자동으로 전파되어야 하는 경우

권장 접근 방식:

• 초기 프로젝트 스캐폴딩에는 템플릿 사용
• 지속적인 UI 및 디자인 규칙에는 디자인 시스템 사용

문제 해결

FAQ