1. 왜 브랜드를 '가르쳐야' 하나

지금까지 우리는 매번 프롬프트에 "포인트 색은 #D97757", "폰트는 Pretendard"처럼 제약을 적어 넣었습니다. 화면 하나를 만들 때는 괜찮지만, 화면이 열 개, 스무 개가 되면 매번 같은 말을 반복하는 것은 번거롭고, 실수로 색을 빠뜨리면 디자인이 들쭉날쭉해집니다.

Claude Design의 강력한 기능 중 하나가 여기서 빛납니다. 우리 브랜드를 한 번 가르쳐두면, 이후 만드는 모든 작업물에 자동으로 적용됩니다. 매번 색과 폰트를 말하지 않아도, Claude가 알아서 우리 옷을 입혀줍니다.

2. 브랜드를 가르치는 세 가지 방법

Claude Design은 다음 자료들로 브랜드를 학습합니다.

2.1 코드 저장소 연결하기

이미 서비스를 운영 중이라면 가장 정확한 방법입니다. 회사의 코드 저장소(repository) 를 연결하면, Claude가 실제로 쓰이고 있는 컴포넌트·색상·간격·폰트를 읽어냅니다.

• 가장 큰 장점: 실제 제품과 어긋나지 않는 디자인
• 새 화면이 기존 버튼·카드 스타일을 그대로 재사용
• 코드를 몰라도 됩니다. 연결만 해두면 Claude가 알아서 분석합니다.

2.2 디자인 파일 업로드하기

아직 코드가 없거나 디자인 단계라면, 기존 디자인 파일이나 가이드를 올립니다.

• 브랜드 가이드 문서(색상·폰트·로고 규칙)
• 기존 시안 이미지
• 스타일이 정리된 자료

2.3 직접 지정하기

자료가 마땅치 않다면, 핵심 요소만 직접 알려줘도 됩니다.

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

3. 디자인 시스템이란 무엇인가

'브랜드를 가르친다'는 것은 결국 디자인 시스템(Design System) 을 만드는 일입니다. 디자인 시스템이란, 한 서비스의 모든 화면이 공유하는 약속의 모음입니다.

• 색상 팔레트: 메인·보조·배경·강조·경고색이 정해져 있음
• 타이포그래피: 제목·소제목·본문·캡션의 크기와 굵기가 일정함
• 간격 규칙: 여백이 8px·16px·24px처럼 일정한 단위를 따름
• 컴포넌트: 버튼·카드·입력칸의 모양이 어디서나 같음

이 약속이 있으면 화면이 백 개여도 한 사람이 만든 듯한 통일감이 생깁니다. 약속이 없으면, 페이지마다 버튼 색이 다른 '누더기 디자인'이 됩니다.

4. 브랜드가 적용되면 달라지는 것

브랜드를 등록한 뒤 새 화면을 만들어보면 차이가 분명합니다.

이제 프롬프트는 이렇게 짧아집니다.

설정 화면을 만들어줘. 알림, 계정, 결제 섹션으로.

색이나 폰트를 말하지 않았는데도, 등록된 브랜드가 입혀진 채로 나옵니다.

5. 직접 해보기

1. 좋아하는 브랜드(또는 가상의 내 브랜드) 하나를 정해, 색 2~3개 + 폰트 + 톤을 글로 정리합니다.
2. 그 내용을 Claude Design에 "앞으로 이 브랜드를 지켜줘"라고 등록합니다.
3. 색·폰트를 말하지 않고 서로 다른 화면 두 개(예: 로그인 화면, 설정 화면)를 만들어 봅니다.
4. 두 화면이 같은 브랜드처럼 보이는지 확인합니다.

6. 정리하며

• 브랜드를 한 번 가르치면, 이후 모든 작업에 자동으로 적용된다.
• 가르치는 방법은 코드 저장소 연결 · 디자인 파일 업로드 · 직접 지정 세 가지다.
• 브랜드를 가르치는 일은 곧 디자인 시스템(색·타이포·간격·컴포넌트의 약속)을 세우는 일이다.
• 추출 품질은 자료 품질에 달려 있으니, 등록 후 직접 검토하자.

다음 장에서는 이 디자인 시스템을 일관되게 유지하고 확장하는 실전 요령을 다룹니다.