앞에서는 디자인 시스템이 무엇인지 살펴보았습니다. 이번에는 그 디자인 시스템을 클로드 디자인에 추가하는 방법을 알아보도록 하겠습니다. 디자인 시스템을 가지고 있지 않다고 하더라도 실습이 가능하도록 공개된 디자인 시스템을 활용하는 방법도 함께 안내하겠습니다. 디자인 시스템을 추가하는 방법은 크게 세 단계로 나뉩니다. 먼저 figma 계정을 준비하고, 디자인 시스템 자료를 마련한 다음, 클로드 디자인에 올리는 순서입니다.

1. 피그마 가입하기

실무 디자인 시스템은 대부분 figma 안에 정리되어 있습니다. 위니브 디자인 시스템도 figma 파일로 제공되고, 공개된 디자인 시스템 역시 figma에서 받는 것이 가장 빠릅니다. 그래서 먼저 figma 계정을 준비합니다. 이미 figma 계정이 있다면 이 단계는 건너뛰어도 됩니다.

1. figma.com에 접속합니다.
2. 오른쪽 위의 "Get started" 또는 "Sign up"을 누릅니다.
3. 구글 계정으로 가입하거나, 이메일과 비밀번호로 가입합니다.
4. 요금제는 무료(Starter) 플랜으로 충분합니다. 결제 정보는 필요하지 않습니다.

2. 디자인 시스템 자료 준비하기

클로드 디자인에 올릴 자료를 마련할 차례입니다. 어떤 자료를 쓰는지는 영상강의를 보는지에 따라 갈립니다.

2.1 영상강의를 보는 경우

영상강의에서는 위니브 디자인 시스템을 figma 파일로 제공합니다. 안내된 다운로드 링크에 따라 파일을 가지고 이후 3절에서 설명하는 방식으로 클로드 디자인에 올리면 됩니다. 영상강의를 보고 있지 않더라도, 아래 절차에 따라 수업을 진행할 수 있습니다.

2.2 책만 보고 따라오는 경우

영상강의 없이 책만 보는 분은, figma 커뮤니티에 공개된 디자인 시스템을 가져다 쓰면 됩니다. 구글이 무료로 공개한 머티리얼 디자인(Material Design)이 대표적입니다.

1. figma에 로그인한 뒤, 왼쪽 메뉴에서 Community로 들어갑니다.
2. 검색창에 "Material 3 Design Kit"를 입력합니다. 구글이 올린 공식 파일을 고르면 됩니다.

3. Open in Figma를 눌러 파일을 엽니다.

4. Make a copy 버튼을 눌러 내 계정으로 복제합니다.

5. 왼쪽 로고를 클릭하고 File에서 Save local copy를 눌러 내 컴퓨터에 저장합니다.

3. 클로드 디자인에 추가하기

자료가 준비됐으니, 이제 클로드 디자인에 올립니다. 오른쪽 탭에 Design Systems탭이 보입니다. 이곳에서 Create 버튼을 눌러 디자인 시스템을 추가할 수 있습니다.

Design Systems 탭으로 들어오면 아래와 같이 Upload a .fig file 버튼이 보입니다. 이 버튼을 눌러 준비한 figma 파일을 올립니다.

파일을 올리면 Attach file 버튼이 보입니다. 이 버튼을 눌러 파일을 등록합니다. 파일 등록이 마무리 되면 오른쪽 상단에 Continue to generate 버튼이 보입니다. 이 버튼을 눌러 디자인 시스템을 생성합니다. 약 10분, 파일이 많은 경우 30분까지 걸릴 수 있습니다. generate 버튼을 눌러주세요.

4. 마무리하기

이렇게 만들어진 디자인 시스템도 완벽하진 않습니다. 완성된 결과물을 하나씩 클릭해보며 원하는 대로 들어갔는지 확인해주세요. 위니브의 경우에는 미리 logo 파일을 제공합니다. 실제 업무로 사용할 분들은 해당 디자인 시스템에 좀 더 공을 들여 작성하는 것을 권합니다.

Published 버튼을 눌러서 배포해주세요. 배포를 하고 다시 메인 페이지로 오면 Design system에 추가가 된 것을 확인할 수 있습니다.