Claude에서 디자인 시스템 설정하기

디자인 시스템은 Claude에게 여러분의 브랜드를 알려줍니다. 설정을 마치고 조직과 공유하면, 팀이 Claude로 만드는 프레젠테이션, 디자인, 프로토타입이 여러분의 색상, 타이포그래피, 컴포넌트를 기반으로 시작될 수 있습니다.

1. 디자인 시스템이란

디자인 시스템은 회사의 디자인 결정을 한 번 정리하여, 사람과 소프트웨어 모두 재사용할 수 있는 형태로 만든 것입니다. Claude에서는 다음과 같은 주요 구성 요소로 이루어져 있습니다:

2. Claude가 여러분의 디자인 시스템을 갖추면 달라지는 점

Claude는 별도의 설정 없이도 프롬프트만으로 훌륭한 프레젠테이션이나 화면을 만들 수 있습니다. 하지만 여러분의 브랜드를 본 적이 없기 때문에 자체 기본값을 사용하게 되고, 그 결과물은 여러분의 회사처럼 보이지 않습니다.

디자인 시스템이 있으면 Claude는 여러분의 색상과 타이포그래피를 사용하며, 디자인 시스템에 포함되어 있다면 팀의 실제 컴포넌트도 사용합니다.

Claude는 프레젠테이션, 디자인, 프로토타입을 만들 때 여러분의 디자인 시스템을 사용합니다. 색상, 타이포그래피 스타일, 폰트는 이 모든 것에 적용되며, 디자인과 프로토타입은 실제 컴포넌트도 사용할 수 있습니다. 디자인에서 Claude가 어떤 컴포넌트를 사용했는지 확인하려면 디자인의 해당 부분을 선택하세요. 윤곽선이 다른 색으로 표시되고, Layers 목록에 이름이 나타납니다.

3. 시작하기 전에

• 디자인 시스템은 Pro, Max, Team, Enterprise 플랜에서 베타로 제공됩니다. Free 플랜에서는 사용할 수 없습니다.
• Team 및 Enterprise 플랜에서는 소유자가 Organization settings > Artifacts에서 Design systems 템플릿을 제어합니다. Enterprise에서는 처음에 꺼져 있는 상태로 시작됩니다. 아래에 설명된 위치에서 Design system이 보이지 않는다면, 이 설정을 가장 먼저 확인해야 합니다.
• 접근 권한이 있는 사람은 누구나 디자인 시스템을 만들고, 사용하고, 특정 사람과 공유할 수 있습니다. 조직 전체와 공유하거나 기본값으로 설정하려면 조직의 소유자가 필요합니다(7단계).
• 팀에 이미 독립형 Claude Design(claude.ai/design)에 디자인 시스템이 있다면, 다시 만들지 않고 그대로 가져올 수 있습니다. 아래의 독립형 Claude Design에서 마이그레이션하기를 참조하세요.

4. 디자인 시스템 만들기

새로 시작하기

디자인 시스템은 모든 대화의 메시지 입력란에서 시작하거나 설정에서 시작할 수 있습니다.

메시지 입력란에서: + 메뉴를 열고 Design system을 선택한 다음 New design system을 선택하세요. 두 가지 선택지가 제공됩니다:

• Using Claude는 새 대화 옆에 빈 디자인 시스템을 열어주며, 여기서 브랜드 파일을 업로드하거나, 연결된 도구에서 가져오거나, 브랜드를 설명할 수 있습니다.
• Using Claude Code는 이미 코드 저장소에 존재하는 디자인 시스템을 위한 것입니다. Claude Code가 저장소의 토큰과 컴포넌트를 읽습니다.

설정에서: Settings > Design systems에는 사용할 수 있는 디자인 시스템 목록이 표시되며 New design system 버튼이 있습니다.

디자인 시스템 자체도 하나의 아티팩트입니다. 열고, 편집하고, 공유할 수 있는 페이지이며, 다른 작업물과 함께 Artifacts 페이지에 표시됩니다.

채워 넣을 방법 선택하기

새 디자인 시스템은 Not sure where to start?라는 질문과 함께 빈 페이지로 열리며, 채워 넣는 각 방법에 대한 카드가 표시됩니다. 카드를 선택하면 Claude가 페이지 옆 대화에서 시작합니다. Upload brand files를 사용하는 경우, 먼저 파일을 추가한 다음 Create design system을 선택합니다.

GitHub에서 동기화하기

색상, 타이포그래피, 컴포넌트가 이미 코드에 존재하는 경우 이 방법을 사용하세요. Claude는 어떤 저장소를 읽을지, 무엇을 가져올지 물어봅니다. 코드를 읽고 페이지를 채우며, 저장소는 변경하지 않도록 설계되어 있습니다.

• 색상, 타이포그래피 스타일, 간격, 모서리 반경, 폰트, 로고, 문서가 가져와집니다.
• 컴포넌트는 여러분이 선택합니다. Claude는 찾은 컴포넌트 목록을 보여주고 어떤 것을 포함할지 물어봅니다. 컴포넌트를 가져오려면 Claude가 프로젝트의 빌드를 실행해야 하므로, 먼저 여러분에게 물어봅니다.
• 인터페이스 코드가 있는 폴더를 Claude에게 알려주면, 전체 저장소보다 적은 양을 읽게 됩니다.
• 나중에 다시 동기화할 수 있습니다. 변경된 값은 업데이트되고, 새로운 값은 추가되며, 사용 노트, 개요 텍스트, 폰트, 에셋은 그대로 유지됩니다. 코드에서 더 이상 정의되지 않는 토큰이 있으면 Claude가 이를 나열하고 제거하기 전에 물어봅니다.

커넥터에서 구축하기

브랜드가 디자인 도구, 공유 드라이브, 또는 Claude에 연결한 위키에 보관되어 있는 경우 이 방법을 사용하세요. Claude는 어떤 커넥터에 브랜드나 디자인 작업물이 있는지 확인하고, 찾은 내용을 알려준 다음 이를 기반으로 구축할 것을 제안합니다.

연결된 것이 없다면, Claude는 브랜드에 대해 몇 가지 간단한 질문을 하고 답변을 바탕으로 초안을 작성합니다.

브랜드 파일 업로드하기

브랜드가 로고, 폰트, 가이드라인 PDF, 토큰 파일, 또는 완성된 슬라이드나 화면 몇 개와 같은 파일로 보관되어 있는 경우 이 방법을 사용하세요. Claude는 추가한 파일을 읽고 이를 바탕으로 디자인 시스템의 첫 초안을 작성합니다.

• 완성된 프레젠테이션이나 제품 스크린샷처럼 브랜드가 실제로 사용된 모습을 보여주는 파일은 가이드라인 PDF만 있을 때보다 Claude에게 더 많은 참고 자료가 됩니다.
• 첫 초안은 의도적으로 작게 만들어집니다. 그런 다음 Claude는 이 정도면 충분한지, 아니면 더 발전시킬지 물어봅니다.
• Claude는 파일에 나타나지 않는 값을 채우기 전에 먼저 물어보도록 설계되어 있습니다.

독립형 Claude Design에서 마이그레이션하기

팀이 독립형 Claude Design(claude.ai/design)에서 디자인 시스템을 만들었다면, 다시 만들지 않고 Claude로 가져올 수 있습니다. 마이그레이션되기 전까지는 Settings > Design systems에 Standalone 태그가 표시되며, Claude는 대화에서 이를 사용할 수 없습니다.

한 번의 마이그레이션으로 조직 전체가 처리되므로, 한 사람이 모두를 위해 진행하면 되며, 그 사람이 소유자일 필요는 없습니다. 마이그레이션은 Artifacts 페이지에서 시작합니다. 원본은 변경되지 않습니다.

마이그레이션된 각 디자인 시스템에는 한 단계가 남아 있습니다. 디자인 시스템의 소유자가 이를 열고 Finish setting up을 선택한 다음 요청을 Claude에게 보냅니다. 요청이 복사되었다는 메시지가 표시되면, 이를 Claude와의 대화에 붙여넣고 전송하세요. 그러면 Claude가 파일을 재구성하여 각 섹션을 미리 보고 페이지에서 편집할 수 있게 됩니다. 그 전까지도 Claude에게 변경을 요청할 수 있습니다.

독립형 버전은 종료될 예정입니다. 종료 날짜, 공유되는 항목, 디자인 시스템을 마이그레이션할 수 없을 때 해야 할 일에 대해서는 마이그레이션에 관한 고객센터 문서를 참조하세요.

5. 페이지 살펴보고 Claude를 위한 노트 남기기

디자인 시스템 페이지는 팀이 이를 검토하고 편집하는 곳이며, Claude에게 사용 방법을 알려주는 사용 노트를 남기는 곳이기도 합니다.

페이지

개요 텍스트, 토큰 값, 노트, 폰트, 에셋은 페이지에서 바로 편집할 수 있습니다. 테마를 추가하거나 컴포넌트의 코드를 변경하려면 페이지 옆 대화에서 Claude에게 요청하세요.

사용 노트

디자인 시스템을 검토하면서 Claude를 위한 사용 노트를 남길 수 있습니다. 노트는 Claude에게 색상, 타이포그래피 스타일, 컴포넌트를 어떻게 사용해야 하는지, 그리고 언제 사용하지 말아야 하는지 알려줍니다. Claude는 해당 컴포넌트로 작업을 만들기 전에 그 컴포넌트의 노트를 읽습니다.

6. Claude가 작업을 만들 때 이를 사용하는 방식

각 요청에 대해 Claude는 먼저 개요를 읽은 다음, 작업에 필요한 디자인 시스템의 부분만 읽습니다.

조직에 기본 디자인 시스템이 있으면 Claude는 묻지 않고 이를 사용합니다. 디자인 시스템은 있지만 기본값이 없으면 Claude는 어떤 것을 사용할지 물어봅니다.

7. 조직과 공유하기

처음에는 새 디자인 시스템을 본인만 사용할 수 있습니다. 특정 사람들과 공유할 수 있으며, 조직의 소유자는 모든 사람과 공유하고 기본값으로 설정할 수 있습니다.

단계별 안내

1. 먼저 직접 사용해 보세요: 디자인 시스템에 내용이 저장되는 즉시 + > Design system 메뉴에 표시됩니다. 브랜드에 대해 아무 말도 하지 않고 일반적인 프레젠테이션을 요청해 보세요. 프레젠테이션이 여러분의 회사처럼 보인다면 디자인 시스템이 제대로 작동하는 것입니다.
2. 검토해야 할 사람들과 공유하세요: 디자인 시스템 페이지 상단의 Share를 선택하고 초대하세요. 초대받은 사람의 + > Design system 메뉴에 Shared with you 아래로 표시됩니다. 변경할 수 있어야 하는 사람에게는 편집 권한을 부여하세요.
3. 조직의 소유자가 모든 사람과 공유하도록 하세요: 먼저 Share에서 소유자를 초대하고 Owner 권한을 부여하세요. 그런 다음 소유자가 Share에서 대상을 Anyone at [your organization]으로 설정하고 확인합니다. 그 후에는 디자인 시스템이 모든 팀원의 메뉴에 표시됩니다.
4. 원한다면 기본값으로 설정하세요: 모든 사람과 공유된 후, 조직의 소유자가 Share에서 Default design system을 켜거나, Settings > Design systems에서 해당 항목 옆의 Set as default를 선택합니다. 조직당 기본값은 하나이며, 새로운 기본값을 설정하면 기존 것을 대체합니다.

모든 디자인 시스템을 한곳에서 보기

Settings > Design systems에는 본인의 디자인 시스템, 본인과 공유된 디자인 시스템, 조직과 공유된 디자인 시스템이 나열됩니다. + > Design system 메뉴 하단의 Manage design systems를 선택해도 같은 페이지가 열립니다.

• Usable by 열에는 각 디자인 시스템을 누가 사용할 수 있는지 표시되며, 기본값에는 Default 배지가 붙습니다.
• 아직 독립형 Claude Design에 있는 디자인 시스템에는 Standalone 태그가 붙습니다.
• 본인의 디자인 시스템은 행 메뉴에서 열기, 공유, 이름 변경, 삭제할 수 있습니다.

Team 및 Enterprise 조직의 소유자는 Organization settings > Artifacts에서 조직과 공유된 모든 디자인 시스템도 볼 수 있으며, 그곳에서 기본값을 설정하거나 제거할 수 있습니다.

8. 일상적으로 사용하기

팀원들이 보는 화면

디자인 시스템이 모든 사람과 공유되면, 모든 팀원의 + > Design system 메뉴에 표시됩니다. 기본값으로 설정되면, 프레젠테이션이나 디자인을 시작할 때 이미 선택되어 있습니다.

기본값은 같은 기기에서 이미 선택한 디자인 시스템을 대체하지 않습니다. 대화에서 디자인 시스템을 사용하지 않으려면 모든 체크박스를 해제하세요. 그러면 메시지 입력란 아래의 칩에 No design system이 표시됩니다.

최신 상태로 유지하기

디자인 시스템은 몇 가지 방법으로 업데이트할 수 있습니다:

• 작은 변경: 페이지를 편집하세요. 값, 개요 텍스트, 노트는 작업하는 대로 저장됩니다.
• 큰 변경: 페이지 옆 대화에서 Claude에게 요청하세요. 테마를 추가하거나 컴포넌트를 변경하는 방법입니다.
• 코드에서 가져온 디자인 시스템: 코드를 변경한 다음 GitHub에서 다시 동기화하세요. 노트와 페이지 편집 내용은 유지됩니다.
• 이미 만든 프레젠테이션과 디자인: 각각은 만들어질 당시의 디자인 시스템 사본을 자체적으로 보관합니다. Claude에게 업데이트를 요청하세요.

문제 해결

추가 자료

• Claude로 슬라이드와 프레젠테이션 만들기와 프로토타입과 UX를 위한 Claude 사용하기에서 디자인 시스템이 실제로 사용되는 모습을 볼 수 있습니다.
• 프레젠테이션과 디자인을 공유하고 편집하는 방법은 Claude 아티팩트에서 팀과 협업하기를 참조하세요.
• Claude Design의 디자인 시스템과 독립형 Claude Design에서 마이그레이션하기에 대한 자세한 내용은 고객센터를 방문하세요. 소유자는 Artifacts 관리자 가이드에서 조직 설정을 확인할 수 있습니다.