1. 우리 브랜드를 입히는 디자인 시스템

앞에서 슬라이드 한 편을 만들어 봤습니다. 이번에는 거기에 우리 브랜드를 입혀, 앞으로 만드는 화면마다 같은 색과 폰트가 유지되도록 만들어 보겠습니다.

1.1 우리 브랜드를 한 번에 가르치기

앞에서는 프롬프트에 "포인트 색은 테라코타", "모서리는 둥글게"처럼 제약을 적었습니다. 화면 하나면 괜찮지만, 화면이 열 개, 스무 개로 늘면 매번 같은 말을 반복해야 하고, 실수로 하나 빠뜨리면 디자인이 들쭉날쭉해집니다.

Claude Design은 이 반복을 덜어줍니다. 우리 브랜드를 한 번 가르쳐두면, 이후 만드는 모든 작업물에 자동으로 적용됩니다. 이렇게 한 서비스의 모든 화면이 함께 따르는 약속의 모음을 디자인 시스템(Design System)이라고 부릅니다.

• 색상: 메인·보조·배경·강조색을 미리 정해 둡니다.
• 타이포그래피: 제목·본문·캡션의 크기와 굵기를 일정하게 맞춥니다.
• 간격: 여백을 8px, 16px처럼 정해진 단위로 씁니다.
• 컴포넌트: 버튼·카드·입력칸의 모양을 어디서나 같게 씁니다.

실무 팀은 대개 이런 약속을 Figma 같은 도구에 정리해 둡니다. 아래는 위니브가 실제 업무에서 쓰는 디자인 시스템입니다.

1.2 따라 하기: 디자인 시스템 만들기

브랜드 자료가 있다면 Claude Design에 한 번 가르쳐두는 것으로 충분합니다. 입력창 아래 Design system 항목을 열고, 목록 오른쪽의 + 버튼을 누릅니다.

+를 누르면 Create here와 Create using Claude Code 두 가지가 나옵니다. 뒤쪽은 코드를 다루는 조금 더 복잡한 방식이라, 여기서는 위쪽의 Create here를 고릅니다.

Create here를 고르면 브랜드를 입력하는 설정 화면이 열립니다.

화면에는 코드나 Figma 파일을 연결하는 칸이 많지만 모두 선택 사항입니다. 가진 자료가 없어도 회사 이름과 소개, 원하는 분위기만 적으면 디자인 시스템이 만들어집니다. 다만 자료가 있다면 훨씬 정확하게 브랜드를 배웁니다.

모모의 정원에 예전에 만들어 둔 홈페이지가 있다고 가정하고, 그 파일을 함께 넣어 보겠습니다. 아래 버튼을 눌러 실습 자료를 다운로드해주세요.

실습 자료

압축을 풀면 모모의정원_기존홈페이지.html 파일이 나옵니다. 색과 폰트, 메뉴 카드 모양까지 갖춰진, 실제로 있을 법한 간단한 홈페이지입니다. 이 파일을 예시로 함께 넣으면 글로 적은 '따뜻한 테라코타 색', '둥근 모서리' 같은 설명보다 훨씬 정확하게 브랜드를 읽어냅니다.

넣기 전에 한 가지 준비할 것이 있습니다. 이 파일을 올릴 Link code from your computer 칸은 파일 하나가 아니라 폴더를 받습니다. 원래 코드 폴더를 통째로 연결하라고 만든 자리이기 때문입니다. 바탕화면에 폴더를 하나 만들고 그 안에 모모의정원_기존홈페이지.html을 넣어주세요. 폴더 이름은 무엇이든 괜찮습니다.

준비가 됐으면 모모의 정원을 예로 설정 화면을 이렇게 채워 봅시다.

1. Company name and blurb: 회사 이름과 한 줄 소개를 적습니다.

   모모의 정원: 동네 골목에 있는 정원 딸린 작은 카페. 메뉴판과 예약 화면, SNS 홍보 이미지를 만든다.

2. Provide examples of your design system: 가진 자료가 있으면 여기에 올립니다. 방금 만든 폴더를 Link code from your computer 칸에 끌어다 놓으세요. 자료가 없다면 이 칸은 비워 두고 넘어가도 됩니다.
3. Any other notes?: 원하는 색과 분위기를 자유롭게 적습니다.

   따뜻한 테라코타 색을 메인으로, 둥근 모서리를 많이 쓴다. 말투는 친근하고 정감 있게.

다 채웠으면 오른쪽 위 Continue to generation 버튼을 눌러 다음 단계로 넘어갑니다.

이어지는 화면에서 Generate를 누르면 생성이 시작됩니다.

생성에는 시간이 꽤 걸립니다. 자료가 많을수록 더 오래 걸리니, 탭을 열어둔 채 다른 일을 하며 기다리면 됩니다.

생성이 끝나면 별도의 편집 화면이 열리지는 않습니다. 대신 메인 채팅창의 Design system 목록에 방금 만든 모모의 정원 Design System이 추가됩니다.

정리된 자료도, 시간을 들일 여유도 없다면 굳이 이 과정을 거치지 않아도 됩니다. 채팅에 핵심만 글로 적어 알려주는 것으로도 충분합니다. 1인 창업가나 작은 가게라면 이 방법이 가장 빠릅니다.

우리 브랜드 기본 설정이야. 앞으로 이걸 지켜줘.
- 메인 색: #D97757 (테라코타)
- 보조 색: #2D2D2D, 배경 #FAFAF8
- 제목 폰트: Pretendard Bold / 본문: Pretendard Regular
- 모서리: 12px 둥글게
- 톤: 따뜻하고 신뢰감 있는

1.3 만든 브랜드로 화면 만들기

디자인 시스템을 한 번 등록해두면 프롬프트가 짧아집니다. 입력창에서 모모의 정원 Design System을 고른 뒤 아래와 같이 요청하면, Claude Design이 알아서 브랜드를 입혀 화면을 만들어 줍니다.

모모의 정원 예약 확인 화면을 만들어줘. 날짜, 인원, 메뉴 요약으로.

색이나 폰트를 한마디도 적지 않았는데도, 등록해둔 테라코타 색과 둥근 모서리가 그대로 입혀진 화면이 나옵니다. 브랜드를 한 번 가르쳐두면 이후 작업은 이렇게 내용에만 집중하면 됩니다.

잘 정리된 디자인 시스템일수록 결과의 완성도도 올라갑니다. 앞서 본 위니브의 Figma 디자인 시스템을 그대로 입혀 화면을 만들면, 색과 폰트는 물론 컴포넌트 모양까지 실제 서비스에 가깝게 나옵니다.

위니브처럼 정리된 Figma 파일이 없어도 방법은 있습니다. Figma 커뮤니티에 올라온 공개 디자인 시스템을 가져다 쓰면 됩니다. Google이 무료로 공개한 머티리얼 디자인(Material 3 Design Kit)이 대표적입니다.

1.4 따라 하기: Figma 커뮤니티에서 디자인 시스템 가져오기

Figma를 다룰 줄 몰라도 괜찮습니다. 이미 만들어진 파일을 내 계정으로 복제해 컴퓨터에 저장하는 것이 전부입니다. 무료 계정만 있으면 되니, 가입한 뒤 아래 순서를 따라오세요.

1. Figma에 로그인한 뒤 왼쪽 메뉴에서 Community를 클릭합니다.
2. 오른쪽 위 검색창에 Material 3 Design Kit을 입력합니다. 검색 결과에서 by Material Design이라고 적힌, 구글이 올린 공식 파일을 고릅니다.

3. 파일 화면에서 오른쪽 위 Open in Figma 버튼을 클릭합니다.
4. 창이 하나 뜨면 Make a copy of this file을 클릭합니다. 원본은 그대로 두고 내 계정에 복사본이 만들어집니다.

5. 복제한 파일에서 왼쪽 위 Figma 로고를 클릭하고 File의 Save local copy를 골라 컴퓨터에 저장합니다.

이렇게 저장하면 .fig 확장자를 가진 파일이 하나 생깁니다. 이 파일은 앞서 본 디자인 시스템 설정 화면의 Provide examples of your design system 중 Upload a .fig file 칸에 올리면 됩니다. 브라우저 안에서만 읽고 서버로 보내지 않는다는 안내가 칸 아래에 함께 적혀 있습니다. 머티리얼 디자인이 아니어도 괜찮으니, 커뮤니티에서 마음에 드는 것을 골라 같은 방식으로 복제해 쓰면 됩니다.

• Figma 커뮤니티: https://www.figma.com/community