디자인 시스템

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

디자인 시스템을 사용하면 컴포넌트 라이브러리, 스타일링 가이드라인, 설치 지침을 한 번 정의하고 워크스페이스의 모든 프로젝트에서 재사용할 수 있습니다. 디자인 시스템이 프로젝트에 연결되면 컴포넌트, 규칙, 업데이트가 디자인 시스템 프로젝트에서 연결된 모든 프로젝트로 흐릅니다.

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

얻는 것

• UI 컴포넌트, 토큰, 스타일에 대한 중앙 집중식 source of truth
• 라이브러리의 React 컴포넌트가 연결된 모든 프로젝트에 직접 전달되어 사용 준비됨
• 원클릭 업데이트: 새 버전을 게시하면 연결된 프로젝트의 채팅에 Update available 프롬프트가 표시됨
• 모든 연결 또는 업데이트 후 Lovable이 와이어링(빌드 구성, CSS 가져오기, 테마 공급자, 의존성)을 확인하고 누락된 것을 수정하는 자동 설정 검증
• 진행 중 작업 중 준수 강제: Lovable이 raw color, 커스텀 또는 커스터마이즈된 컴포넌트, 디자인 시스템의 기타 편차를 잡음

디자인 시스템 작동 방식

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

디자인 시스템의 구성

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

1. 컴포넌트: React 컴포넌트 라이브러리
2. 스키마와 가이드라인: 머신 판독 가능한 스키마(토큰, 컴포넌트 카탈로그, 제약)와 Lovable이 모든 생성 시 읽는 렌더링된 문서
3. 설치: 설정 지침과 필수 구성

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

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

디자인 시스템 프로젝트는 특별한 .lovable 폴더를 소유합니다. 디자인 시스템을 게시하면 Lovable이 다음을 생성합니다:

• design-system.json: 토큰, 컴포넌트 카탈로그(variants, props, examples), 스택 제약을 포함한 표준화된 머신 판독 가능한 스키마. source of truth입니다.
• rules/components.md: 스키마에서 렌더링된 컴포넌트 카탈로그.
• rules/design-tokens.md: 스키마에서 렌더링된 토큰 참조.
• rules/library-guidelines.md: 스키마에서 렌더링된 스택 요구사항과 사용 규칙.
• system.md: 고수준 설치 지침과 디자인 철학. 이 파일은 게시 전반에 보존되며 Lovable이 스키마에서 재생성하지 않습니다.

프로젝트 설정의 Knowledge 탭을 통해 또는 Lovable과 직접 채팅하여 system.md를 편집할 수 있습니다. 다른 파일은 모든 게시에서 재생성됩니다.

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

프로젝트가 디자인 시스템에 연결되면 Lovable은 file-copy attach를 수행합니다:

• 디자인 시스템의 React 컴포넌트가 연결된 프로젝트의 src/design-system/<design-system-slug>/에 복사됩니다. Lovable은 거기서 컴포넌트를 가져옵니다.
• 디자인 시스템의 .lovable 지식 파일(스키마, 렌더링된 규칙, system.md)이 .lovable/rules/libraries/<design-system-slug>/에 복사됩니다. Lovable은 모든 생성 시 이를 읽습니다.
• 필요한 런타임 의존성이 연결된 프로젝트의 package.json에 병합됩니다.
• lovable.toml의 [[libraries]] 항목이 어떤 디자인 시스템이 어떤 버전에 연결되어 있는지 기록합니다.

그런 다음 컴포넌트는 연결된 프로젝트에서 평범한 로컬, 읽기 가능, 사용 가능한 React 리소스가 됩니다. 편집을 피하세요: 로컬 편집은 디자인 시스템에서 업데이트를 수락할 때 다음에 교체됩니다. 영구적인 변경이 필요하다면 관련 디자인 시스템 프로젝트에서 제안하세요.

업데이트

디자인 시스템의 새 버전을 게시하면 연결된 모든 프로젝트의 채팅에 Update available 프롬프트가 표시됩니다. 업데이트를 수락하면 Lovable이 새 버전에 대해 file-copy attach를 다시 실행합니다: 이전 디자인 시스템 파일이 제거되고, 새 파일이 복사되고, 의존성이 다시 병합되고, 설정 검증이 다시 실행됩니다. 연결된 프로젝트 자체의 코드는 그대로 유지됩니다.

설정 검증

디자인 시스템이 프로젝트에 연결된 후(프로젝트 생성 시 또는 기존 프로젝트에서) 에이전트는 디자인 시스템이 올바르게 와이어링되었는지 확인하기 위해 조용한 검증 패스를 실행합니다. 이 패스는 다음을 확인합니다:

• 빌드 파이프라인이 디자인 시스템의 소스 폴더를 픽업하고 실패하지 않는지.
• 디자인 시스템의 스타일링 진입점이 프로젝트가 스타일을 로드하는 곳마다 가져와지는지.
• 디자인 시스템이 요구하는 모든 wrapper 컴포넌트나 공급자가 적절한 범위에 배치되는지.
• 필요한 모든 의존성이 package.json에 선언되었는지.

모든 것이 올바르게 와이어링되어 있다면 검증은 채팅에 흔적을 남기지 않습니다. 누락된 것이 있다면 Lovable이 후속 생성에서 수정하고 모든 것이 제자리에 있거나 수정할 수 없는 짧은 체크리스트가 채팅에 표시될 때까지 검사를 다시 실행합니다.

준수 검사

연결된 프로젝트에서 작업하는 동안 모든 생성이 디자인 시스템 위반에 대해 스캔됩니다:

• 디자인 시스템 토큰을 사용해야 할 곳에 raw color 리터럴
• 디자인 시스템의 토큰이나 스케일을 우회하는 일회성 값
• 디자인 시스템의 기본값을 재정의하는 인라인 스타일
• 디자인 시스템에서 가져와야 할 것에 대한 로컬 컴포넌트 구현

위반이 발견되면 Lovable이 생성을 완료하기 전에 자동으로 수정을 재시도합니다.

핵심 참고 사항 및 제한

• .lovable 폴더는 디자인 시스템 프로젝트가 소유하며 연결된 프로젝트에서 편집할 수 없습니다.
• 연결된 프로젝트는 마지막으로 연결된 디자인 시스템의 버전을 기록합니다. 업데이트는 채팅 프롬프트에서 수락될 때 적용됩니다.
• Lovable 디자인 시스템은 React 컴포넌트 라이브러리와 기본적으로 작동합니다.
• 모든 프로젝트를 프로젝트 설정에서 디자인 시스템으로 전환할 수 있습니다. 프로젝트가 디자인 시스템으로 표시되면 워크스페이스의 다른 프로젝트가 연결할 수 있게 됩니다.
• 게시되지 않은 디자인 시스템은 새 프로젝트의 기반으로 사용할 수 없습니다. 먼저 게시하세요.
• 프로젝트는 한 번에 최대 하나의 디자인 시스템에 연결될 수 있습니다. 연결된 디자인 시스템 분리는 아직 지원되지 않습니다. 연결 전에 올바른 것을 선택하세요.
• 디자인 시스템 또는 관련 문서가 VPC 내에서 호스팅되는 경우 지침을 위해 어카운트 팀에 문의하세요.

디자인 시스템 만들기

[고수준 목표]

[설치 지침]

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

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

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

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

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

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

lovable.dev 프롬프트 박스의 + 드롭다운에서 Design으로 이동하여 Use a design system을 선택하고, 사용할 디자인 시스템을 선택한 다음 프롬프트를 입력합니다. Lovable이 선택한 디자인 시스템을 사용하여 새 프로젝트를 생성합니다.

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

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

1. Project settings → Design systems로 이동합니다.
2. Available 아래에서 디자인 시스템을 선택하고 Add를 클릭합니다.
3. Save를 클릭합니다.

Lovable이 디자인 시스템의 컴포넌트와 지식 파일을 프로젝트에 복사하고, 의존성을 병합하고, 설정 검증을 자동으로 실행합니다.

디자인 시스템 다듬기

디자인 시스템은 진화하도록 의도되었습니다. 초기 설정 후 .lovable 폴더의 내용과 컴포넌트 소스를 반복합니다.

1. 구조 확인
   .lovable 폴더를 열어 Lovable이 스키마와 문서를 어떻게 생성했는지 봅니다. 이러한 파일은 다음 업데이트에서 연결된 모든 프로젝트에 적용되는 것입니다.
2. 불일치 수정
   컴포넌트가 올바르게 렌더링되지 않으면 Lovable에게 수정하고 동시에 스키마를 업데이트해 달라고 요청합니다. 다시 게시하여 연결된 프로젝트에 수정을 푸시합니다.
3. 세부 정보 추가
   필요에 따라 추가 컴포넌트 문서, 토큰 정의, 또는 사용 패턴을 요청합니다. 각 게시는 버전을 올리고 연결된 프로젝트에 사용 가능한 업데이트를 알립니다.

.lovable 폴더 구조

게시할 때 Lovable이 자동으로 생성합니다.

디자인 시스템 프로젝트에서:

.lovable/
├── design-system.json          # 정식 스키마 (tokens, components, constraints)
├── system.md                   # 고수준 설치 지침, 수동 작성
└── rules/
    ├── components.md           # design-system.json에서 렌더링
    ├── design-tokens.md        # design-system.json에서 렌더링
    └── library-guidelines.md   # design-system.json에서 렌더링

연결된 프로젝트에서 디자인 시스템의 .lovable 파일은 네임스페이스가 지정된 하위 폴더에 복사됩니다:

.lovable/
└── rules/
    └── libraries/
        └── <design-system-slug>/
            ├── design-system.json
            ├── system.md
            ├── components.md
            ├── design-tokens.md
            └── library-guidelines.md

해당 컴포넌트 소스는 연결된 프로젝트의 src/design-system/<design-system-slug>/에 있으며 @/design-system/<design-system-slug>/...로 가져옵니다.

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

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

문제 해결

FAQ