1. 일관성, 좋은 디자인의 보이지 않는 뼈대

사용자는 "이 서비스 디자인이 일관돼서 좋다"고 의식적으로 말하지 않습니다. 하지만 일관성이 깨지면 금방 알아챕니다. 버튼이 페이지마다 다르고, 같은 '취소'인데 어디선 회색 어디선 빨강이면, 사용자는 무의식적으로 "어수선하다", "신뢰가 안 간다"고 느낍니다.

일관성은 좋은 디자인의 보이지 않는 뼈대입니다. 이번 장에서는 Claude Design으로 만든 화면들의 일관성을 지키고, 디자인 시스템을 키워 가는 법을 다룹니다.

2. 컴포넌트 단위로 생각하기

일관성을 지키는 핵심 비결은 화면을 '그림'이 아니라 부품(컴포넌트)의 조합으로 보는 것입니다.

화면마다 버튼을 새로 그리는 대신, "우리 기본 버튼"을 한 번 정해두고 어디서나 그것을 씁니다. Claude에게도 이렇게 부품 중심으로 요청하면 일관성이 올라갑니다.

우리 기본 버튼 스타일을 먼저 정하자.
- 채움 버튼(primary): 테라코타 배경, 흰 글씨, 모서리 12px
- 외곽선 버튼(secondary): 투명 배경, 테라코타 테두리·글씨
앞으로 버튼은 이 두 종류만 써줘.

3. 같은 부품, 다른 상태

좋은 컴포넌트에는 여러 상태(state) 가 있습니다. 버튼 하나에도 기본·마우스 올림(hover)·눌림·비활성(disabled) 상태가 있어야 실제로 쓸 만합니다.

버튼의 상태별 모습을 모두 보여줘.
- 기본
- 마우스 올렸을 때 (조금 어둡게)
- 비활성화 (회색, 클릭 안 됨)
- 로딩 중 (스피너 표시)

상태를 빠짐없이 정의해두면, 나중에 개발로 넘길 때(7장)도 혼란이 없습니다.

4. 시스템을 한눈에 — 스타일 가이드 만들기

디자인 시스템이 자리 잡았다면, 그것을 한 화면에 모아 정리해두면 좋습니다. 이를 흔히 스타일 가이드 또는 디자인 토큰 시트라고 부릅니다.

지금까지 정한 우리 디자인 시스템을 한 페이지에 정리해줘.
- 색상 팔레트 (이름·색상 칩·HEX 코드)
- 타이포그래피 (제목/본문/캡션 예시)
- 버튼 종류와 상태
- 카드·입력칸 예시
한눈에 보는 스타일 가이드 형태로.

이 한 장이 있으면 팀원 누구나 같은 기준으로 디자인할 수 있고, 새 멤버에게 브랜드를 설명하기도 쉽습니다.

5. 일관성을 깨지 않고 확장하기

서비스가 자라면 새로운 요소가 필요해집니다. 이때 기존 시스템을 존중하며 확장하는 것이 중요합니다.

• ✅ "기존 색 팔레트 안에서 경고용 색 하나만 추가해줘"
• ✅ "지금 카드 스타일을 변형해서, 이미지가 큰 버전을 만들어줘"
• ❌ "이번 화면은 완전히 다른 느낌으로 화려하게" (시스템이 무너짐)

새 요소를 더할 때는 "기존 시스템과 어울리게"라는 조건을 항상 붙이세요. Claude는 등록된 브랜드를 기준으로 자연스럽게 녹여줍니다.

6. 직접 해보기

1. 앞 장에서 등록한 브랜드로, 우리 기본 버튼 2종(채움·외곽선)을 상태별(기본·hover·비활성)로 만들어 봅니다.
2. 그동안 만든 색·폰트·버튼·카드를 한 장의 스타일 가이드로 정리해 달라고 요청합니다.
3. 그 시스템 위에서 새 화면(예: 알림 목록)을 만들되, "기존 시스템과 어울리게"라는 조건을 붙입니다.
4. 새 화면이 기존 화면들과 같은 가족처럼 보이는지 확인합니다.

7. 정리하며

• 일관성은 좋은 디자인의 보이지 않는 뼈대다.
• 화면을 부품(컴포넌트)의 조합으로 보고, 같은 부품을 재사용한다.
• 버튼 하나에도 여러 상태를 정의해두면 실전과 개발 연결이 매끄럽다.
• 디자인 시스템은 스타일 가이드 한 장으로 모아두면 공유·확장이 쉽다.
• 확장할 때는 "기존 시스템과 어울리게"를 잊지 말자.

여기까지가 브랜드와 디자인 시스템입니다. 다음 장(6장)에서는 정적인 화면을 넘어 실제로 작동하는 인터랙티브 프로토타입과 프레젠테이션을 만듭니다.