1. 복잡한 정보를 한눈에

마지막 프로젝트는 데이터 대시보드입니다. 랜딩 페이지가 '여백이 넉넉한' 디자인이라면, 대시보드는 정반대로 정보가 빽빽한 디자인입니다. 많은 정보를 좁은 공간에 담으면서도 한눈에 파악되게 만드는 것이 핵심 도전입니다.

대시보드는 디자인 난이도가 높습니다. 정보가 많을수록 어수선해지기 쉽기 때문입니다. 그래서 지금까지 배운 위계·일관성·시각화가 총동원됩니다.

예제: "하루심기" 운영팀용 관리 대시보드

2. 정보 위계 설계하기

대시보드의 성패는 무엇을 가장 크게 보여줄지 정하는 데 달려 있습니다. 모든 정보가 똑같이 크면, 아무것도 눈에 들어오지 않습니다.

"하루심기" 운영 대시보드를 만들어줘.
- 상단: 핵심 지표 카드 4개 (총 사용자, 오늘 활성 사용자, 신규 가입, 평균 습관 달성률) — 큰 숫자 + 전일 대비 증감
- 중간: 왼쪽에 주간 활성 사용자 꺾은선 차트, 오른쪽에 습관 종류별 분포 도넛 차트
- 하단: 최근 가입자 목록 표 (이름·가입일·상태)
- 왼쪽: 사이드바 내비게이션
정보가 많지만 어수선하지 않게, 명확한 위계로.

3. 레이아웃 — 그리드로 정렬하기

빽빽한 화면일수록 격자(그리드) 에 맞춰 정렬해야 정돈돼 보입니다.

모든 카드와 차트를 격자에 맞춰 정렬해줘.
- 카드 사이 간격을 일정하게
- 카드 높이를 줄 맞춰 통일
- 사이드바 너비 고정, 본문 영역은 유연하게

4. 데이터 시각화 고르기

같은 데이터도 어떤 차트로 보여주느냐에 따라 전달력이 달라집니다. 목적에 맞게 고르세요.

주간 추이는 꺾은선으로, 습관 종류별 비율은 도넛으로,
요일별 활동량 비교는 막대그래프로 바꿔줘.
색은 브랜드 초록 계열의 농담으로 구분해줘.

엑셀 데이터가 있다면 3장에서 배운 대로 XLSX 파일을 올려 바로 차트로 만들 수 있습니다.

5. 색은 절제해서

빽빽한 화면에서 색을 남발하면 정신없어집니다. 대시보드의 색 원칙입니다.

• 기본은 무채색(흰·회·검)으로 차분하게
• 포인트 색은 강조에만 (중요 지표, 경고, 액션 버튼)
• 의미 있는 색만 (증가=초록, 감소=빨강처럼 약속된 색)

전체적으로 색을 절제해줘.
배경과 카드는 무채색으로, 포인트 초록은 핵심 지표와 버튼에만.
증감은 초록(증가)/빨강(감소)으로 통일.

6. 다양한 상태 챙기기

대시보드도 데이터 상황에 따라 달라져야 합니다.

다음 상태들도 보여줘.
- 데이터 로딩 중: 카드 자리에 스켈레톤(뼈대) 표시
- 데이터 없음: "표시할 데이터가 없어요" 안내
- 차트에 마우스 올렸을 때: 정확한 수치 툴팁

7. 점검과 내보내기

점검 목록:

• 가장 중요한 지표가 가장 먼저 눈에 들어오는가?
• 모든 요소가 그리드에 정렬돼 있는가?
• 차트가 데이터 성격에 맞게 선택됐는가?
• 색이 절제돼 있고, 증감 색이 일관되는가?
• 로딩·빈 데이터 상태가 있는가?

완성하면 운영팀과 공유 URL로 공유하거나, 실제 도구로 만들 거라면 Claude Code 핸드오프로 넘깁니다.

8. 직접 해보기

1. 관심 주제의 대시보드를 정합니다(개인 가계부, 운동 기록, 동아리 운영 등).
2. 핵심 지표 카드 + 차트 2종 + 목록 표 구조로 만듭니다.
3. 정보 위계(중요한 것을 크게)와 그리드 정렬을 적용합니다.
4. 색을 절제하고, 로딩·빈 상태를 추가합니다.
5. 점검 목록을 모두 통과시킨 뒤 내보냅니다.

9. 정리하며 — 세 프로젝트를 마치며

• 대시보드는 빽빽한 정보를 한눈에 만드는 도전이며, 위계·정렬·시각화·절제가 핵심이다.
• 세 프로젝트(랜딩·온보딩·대시보드)는 각각 여백형 / 흐름형 / 밀도형 디자인을 대표한다.
• 공통 원칙은 같다: 목표를 정하고 → 구조를 잡고 → 다듬고 → 직접 검증하고 → 내보낸다.

이제 여러분은 Claude Design으로 대부분의 화면을 처음부터 끝까지 만들 수 있습니다. 다음 장에서 책을 마무리하며, 한계와 앞으로의 이야기를 나눕니다.