대시보드 디자인 가이드: 원칙과 실무 예시

대시보드는 단순히 많은 데이터를 모아 두는 화면이 아니라, 사용자가 지금 무엇을 판단하고 어떤 행동을 해야 하는지 보여주는 인터페이스입니다. 먼저 사용자의 결정과 핵심 지표를 정한 뒤 우선순위에 맞춰 레이아웃과 상태를 설계해야 합니다. 배송 지연 대시보드를 예로 들어 지표 계산부터 필터와 예외 상태까지 설계하고, 매출·마케팅·IoT·프로젝트 관리·모바일 화면의 차이도 살펴보겠습니다.

1부. 대시보드 디자인이란 무엇인가?

1. 정의

대시보드(Dashboard)는 한 화면에서 여러 정보와 작업 상태를 비교하고 다음 행동을 결정할 수 있도록 구조화한 인터페이스입니다. 카드, 표, 차트가 많다고 좋은 대시보드가 되는 것은 아닙니다. 사용자가 가장 먼저 답해야 할 질문을 정하고, 그 질문에 필요한 정보만 같은 맥락으로 묶어야 합니다.

설계 전에는 누가 어떤 결정을 내리는지, 어떤 지표를 어떤 기준과 비교하는지, 화면에서 이어서 해야 할 행동이 무엇인지를 먼저 정하세요.

2. 설계 전에 정할 세 가지

1. 사용자와 결정: 누가 어떤 주기로 어떤 결정을 내리는가?
2. 핵심 지표와 기준: 현재값만 보여줄 것인가, 목표·이전 기간·상태와 비교할 것인가?
3. 다음 행동: 상세 화면 이동, 필터 변경, 담당자 지정 등 무엇을 이어서 해야 하는가?

예를 들어 운영 담당자가 매일 배송 지연을 확인한다면 총 주문 수보다 아직 도착하지 않은 지연 주문과 가장 오래 지연된 주문이 먼저 보여야 합니다. 이미 늦게 도착한 주문과 지금 조치해야 하는 주문을 섞으면 담당자가 처리 순서를 정하기 어렵습니다.

대시보드 디자인 원칙

1. 계층(Hierarchy)

가장 중요한 판단을 첫 시선에 둡니다. 상단에는 핵심 KPI와 비교 기준을 배치하고, 원인 분석에 필요한 추이와 세부 목록은 그 아래에 둡니다. 단순히 좌측 상단에 카드를 몰기보다 현황 → 원인 → 다음 행동의 흐름을 만드세요.

2. 단순성(Simplicity)

한 화면에 필요한 정보가 실제로 적은 경우가 많습니다. 같은 의미의 카드와 차트를 합치고, 상세 값은 드릴다운이나 별도 화면으로 보냅니다. 로딩·빈 상태·오류·권한 없음 상태도 기본 상태와 함께 설계해야 운영 화면이 무너지지 않습니다.

3. 일관성(Consistency)

같은 의미의 값은 같은 형식과 단위를 사용합니다. 날짜 범위, 통화, 증감률의 표현을 통일하고 성공·주의·오류 색상을 디자인 시스템의 토큰으로 관리하세요. 숫자 카드와 차트가 서로 다른 기간을 가리키면 사용자는 화면을 신뢰하기 어렵습니다.

4. 근접성(Proximity)

서로 비교해야 하는 값과 설명을 가까이 배치합니다. KPI 카드 아래에 기간과 필터를 두고, 차트의 범례와 단위를 차트 가까이에 두면 사용자가 의미를 추측할 필요가 줄어듭니다.

2부. 대시보드 디자인에서 나타나는 문제

자주 생기는 문제는 지표는 많지만 결정이 보이지 않는 경우, 기간과 필터가 불명확한 경우, 색상에만 상태를 의존하는 경우, 데이터가 없을 때 화면이 깨지는 경우입니다. 선택된 기간·마지막 업데이트 시점·적용된 필터를 표시하고, 로딩·빈 상태·오류·필터 결과 없음 상태의 문구와 행동을 미리 정하세요. 모바일에서는 중요도가 낮은 카드부터 접고 표를 상세 보기로 분리합니다.

실무 예제: 배송 지연 대시보드 설계하기

운영 담당자가 아침에 연락할 배송 건의 순서를 정한다고 가정해 보겠습니다. 다음 여섯 건은 화면 설계를 위한 예제 데이터입니다. 조회 대상은 2026년 10월 22일 배송 예정 주문이며, 현재 상태를 판단하는 기준 시각은 10월 23일 오전 9시(KST)로 고정합니다. 주문일이나 실제 도착일이 아니라 배송 예정일로 조회합니다.

1. 원본 데이터와 지표의 계산 기준 정하기

주문	지역	배송 예정 시각	실제 도착 시각	판정	현재 미완료 지연 시간
D101	서울	10/22 12:00	10/22 11:40	정시 도착	—
D102	서울	10/22 14:00	10/22 16:00	지연 후 도착	—
D103	부산	10/22 18:00	미도착	미완료 지연	15시간
D104	서울	10/22 20:00	미도착	미완료 지연	13시간
D105	부산	10/22 22:00	10/22 21:50	정시 도착	—
D106	부산	10/22 23:00	미도착	미완료 지연	10시간

이 예제의 조회 대상은 배송 예정 시각이 지난 주문입니다. 예정 시각 전에 취소된 주문은 대상에서 제외합니다. 예정 시각보다 늦게 도착했거나 기준 시각까지 도착하지 않았다면 지연 주문입니다. 도착한 주문을 분모에서 빼지 않아야 배송 성과를 같은 기준으로 비교할 수 있습니다.

• 대상 주문: 6건. 선택한 배송 예정일과 지역에 해당하는 주문입니다.
• 지연 주문: 4건, 지연율 66.7%. D102·D103·D104·D106의 4건을 전체 6건으로 나눕니다. 완료 여부와 무관하게 예정 시각을 넘겼는지를 봅니다.
• 미완료 지연: 3건. D103·D104·D106은 아직 도착하지 않아 담당자의 후속 조치가 필요합니다.
• 최장 미완료 지연: 15시간. 기준 시각에서 D103의 배송 예정 시각을 뺀 값입니다. D102의 완료된 지연 2시간은 이 카드에 포함하지 않습니다.

카드에는 계산식만 숨겨 두지 말고 짧은 설명을 붙이세요. 예를 들어 지연율 아래에는 “예정 시각을 넘긴 주문 / 대상 주문”, 미완료 지연 아래에는 “아직 도착하지 않은 주문”이라고 표시합니다. 대상 주문이 0건인 경우 지연율은 0%가 아니라 “—”로 표시하고 “조회 대상 주문 없음”이라고 설명합니다.

2. 판단에 맞춰 카드·차트·목록 배치하기

상단 첫 카드에는 미완료 지연 3건을 두고, 옆에 최장 지연 15시간과 지연율 66.7%를 배치합니다. 이 화면의 첫 질문이 “현재 누구에게 연락해야 하는가?”이기 때문입니다. 대상 주문 6건은 지연율의 근거로 함께 보여줍니다.

그 아래에는 지역별 미완료 지연을 가로 막대 차트로 보여줍니다. 서울 1건, 부산 2건을 같은 0 기준선에서 비교하면 처리할 물량이 어디에 몰려 있는지 알 수 있습니다. 여섯 주문에는 일별 추이가 없으므로 선 차트를 만들지 않습니다. 여러 날짜의 동일한 기준 시각 데이터가 쌓이면 그때 일별 미완료 지연 추이를 추가할 수 있습니다.

마지막에는 D103 → D104 → D106 순으로 정렬한 조치 목록을 둡니다. 주문 번호, 배송 예정 시각, 지연 시간, 담당자, 처리 상태와 “주문 상세” 동작이 필요합니다. 상태는 색상뿐 아니라 “미완료 지연”이라는 텍스트로도 표시합니다. 담당자가 D103을 열었을 때 연락 이력과 배송 상태를 확인할 수 있어야 숫자 확인이 실제 업무로 이어집니다.

3. 필터를 바꿨을 때 숫자가 함께 바뀌게 하기

화면 상단에는 “배송 예정일: 10월 22일”, “지역: 전체”, “기준 시각: 10월 23일 09:00 KST”를 표시합니다. 지역을 서울로 선택하면 대상 주문 3건, 지연 주문 2건, 지연율 66.7%, 미완료 지연 1건, 최장 미완료 지연 13시간으로 함께 바뀝니다. 조치 목록에는 D104만 남습니다.

목록의 “미완료 지연만 보기”는 목록 범위를 좁히는 제어로 분리합니다. 이를 켰다고 전체 대상 주문의 분모를 3건으로 바꾸면 지연율이 잘못 표시됩니다. 전역 필터와 목록 전용 필터를 시각적으로 구분하고, “지역 필터 지우기”를 제공해 전체 화면으로 쉽게 돌아가게 하세요.

4. 정상·빈 결과·오류·권한 상태 설계하기

• 정상: 전체 지역에서는 위의 네 KPI와 미완료 주문 3건을 보여줍니다. 마지막으로 성공한 조회 시각을 표시합니다.
• 로딩: 기존 카드와 표의 자리를 유지하고 “배송 현황을 불러오는 중”이라고 알립니다. 아직 읽지 못한 값을 0으로 표시하지 않습니다.
• 지연이 없는 정상 결과: 대상 주문은 있지만 모두 정시에 도착했다면 지연 0건과 지연율 0%를 보여줍니다. 조치 목록에는 “현재 조치할 지연 주문이 없습니다”라고 표시합니다.
• 조회 대상 없음: 선택한 날짜에 주문이 없다면 “선택한 배송 예정일에 주문이 없습니다”와 날짜 변경 동작을 제공합니다. 주문 자체가 없는 상태를 배송 성과가 좋은 상태와 구분합니다.
• 필터 결과 없음: 이 예제에서 제주를 선택하면 “선택한 지역에 해당하는 주문이 없습니다”와 “지역 필터 지우기”를 보여줍니다.
• 조회 오류: “배송 현황을 불러오지 못했습니다”와 “다시 시도”를 제공합니다. 이전 값을 유지한다면 “이전 조회 결과”와 해당 시각을 명시하고 최신값처럼 보여주지 않습니다.
• 권한 없음: “이 지역의 배송 정보를 볼 권한이 없습니다”와 권한 요청 경로를 보여줍니다. 주문이나 고객 정보는 노출하지 않습니다.

5. Pixso에서 화면 흐름으로 확인하기

Pixso에서 전체 지역, 서울 필터, 조회 대상 없음, 조회 오류, 권한 없음 화면을 각각 구성합니다. KPI 카드와 상태 배지를 컴포넌트로 만들고, 숫자와 설명을 바꿔도 간격이 유지되도록 오토 레이아웃을 설정하세요. 같은 화면에서 복잡한 데이터 처리를 구현하기보다, 먼저 위의 계산 결과를 각 화면에 넣어 정보와 동작을 검토합니다.

1. 전체 화면의 지역 선택을 서울 필터 화면으로 연결합니다.
2. 서울 화면의 “지역 필터 지우기”를 전체 화면으로 연결하고, D104의 “주문 상세”는 해당 주문의 상세 화면으로 연결합니다.
3. 오류 화면의 “다시 시도”는 정상 화면으로, 권한 없음 화면의 요청 동작은 권한 요청 화면으로 연결합니다.
4. 프로토타입을 공유한 뒤 검토자에게 “가장 오래 지연된 미도착 주문을 찾아 담당자에게 전달해 주세요”라고 요청합니다. 카드의 15시간, 목록 첫 행 D103, 상세 화면의 주문 번호가 일치하는지 함께 확인합니다.

화면 전환과 공유는 Pixso 프로토타입 기능으로 구성할 수 있습니다. 실제 배송 데이터 연결, 계산과 조회 권한 처리는 구현할 서비스의 몫입니다. 개발자에게는 화면과 함께 분모·분자, 시간대, 전역 필터의 적용 범위를 전달하세요.

3부. 대시보드 디자인 예시 5가지

1. 매출 대시보드

첫 번째 예시는 매출 현황 대시보드입니다. 매출액과 주문 건수, 판매량처럼 함께 판단해야 하는 지표를 가까이 배치하고, 차트로 기간별 변화를 보여줍니다. 매출 담당자에게는 목표 대비 실적이, 물류 담당자에게는 출고 현황이 먼저 필요할 수 있으므로 사용자의 역할에 맞춰 강조할 지표를 정하세요.

2. SNS 마케팅 채널 관리 대시보드

두 번째 예시는 SNS 마케팅 채널 관리 대시보드입니다. 상단에는 팔로워, 팔로잉, 댓글, 좋아요 수를 배치하고 도달 수(Reach)를 크게 강조했습니다. 공유 수와 신규 팔로워 추이는 그래프로 나눠 보여줍니다. 채널을 비교할 때는 같은 날짜 범위인지, 도달 수와 노출 수처럼 서로 다른 지표를 혼용하지 않았는지도 확인해야 합니다.

3. 스마트 홈 IoT 대시보드

세 번째는 홈 IoT 관리 대시보드입니다. 앞선 예시들이 성과를 분석하는 데 집중했다면, 이 화면은 집 안 기기의 상태를 확인하고 직접 제어하는 역할을 합니다. 기기별 카드와 가족 구성원, 전력 사용량을 구분하고, 조작 버튼은 현재 상태와 함께 보여줍니다. 기기가 연결되지 않았을 때도 켜짐·꺼짐 상태로 오해하지 않게 표시해야 합니다.

4. 프로젝트 관리 대시보드

네 번째는 프로젝트 관리·협업 도구의 대시보드입니다. 프로젝트와 작업, 멤버, 파일을 한곳에서 확인하고 최근 활동도 살펴볼 수 있습니다. 진행률만 크게 표시하기보다 기한이 지난 작업과 다음 마감일을 함께 보여주면 팀원이 우선 처리할 일을 찾는 데 도움이 됩니다.

5. 모바일 웹 대시보드

마지막은 웹사이트 분석 지표를 모바일로 보여주는 대시보드입니다. 방문자 수, 세션 수, 이탈률, 체류 시간 등을 간결한 카드와 차트로 구성했습니다. 작은 화면에서는 데스크톱의 모든 요소를 그대로 축소하지 말고, 중요한 지표를 먼저 보여준 뒤 상세 정보로 이동할 수 있게 설계하세요.

추가팁. Paico와 Pixso를 함께 사용하는 흐름

화면 구성의 초안이 필요하다면 Paico에 대상 사용자와 필요한 지표를 설명할 수 있습니다. Paico는 Pixso에 포함된 기능명이 아니라 별도로 운영되는 AI 디자인 서비스이며, 공식 사이트에서 생성한 디자인을 Pixso 디자인 파일로 가져와 편집하는 흐름을 안내합니다.

Paico에서 Pixso로 이어지는 작업 흐름

1. 대상 사용자, 핵심 지표, 날짜와 지역 필터, 필요한 화면 상태를 텍스트로 설명합니다.
2. 생성된 화면에 배송 예제의 수치와 계산 기준을 넣고 누락된 상태를 보완합니다.
3. 결과를 Pixso 디자인 파일로 가져온 뒤 컴포넌트, 반응형 레이아웃, 프로토타입 흐름을 정리합니다.
4. 팀원과 같은 파일에서 검토하고 개발에 필요한 상태와 규칙을 전달합니다.

예시 프롬프트: “배송 운영 담당자가 연락할 주문의 순서를 정하는 웹 대시보드. 상단에 미완료 지연 3건, 최장 미완료 지연 15시간, 지연율 66.7%를 표시해줘. 지역별 미완료 지연은 서울 1건·부산 2건의 가로 막대 차트로, 주문 목록은 지연 시간 내림차순으로 배치해줘. 날짜·지역 필터와 로딩, 조회 대상 없음, 오류, 권한 없음 화면도 구성해줘.”

4부. 자주 묻는 질문

Q1. 대시보드 카드와 차트는 몇 개가 적당한가요?

고정된 개수보다 사용자가 첫 화면에서 내려야 하는 결정의 수를 기준으로 정합니다. 배송 예제에서는 현재 조치할 주문을 찾는 데 필요한 KPI를 먼저 두고 지역별 물량과 상세 목록으로 연결했습니다.

Q2. 대시보드에 필요한 상태는 무엇인가요?

기본 상태 외에도 로딩, 조회 대상 없음, 조회 오류, 권한 없음, 필터 결과 없음 상태를 설계하세요. 데이터가 없는 상태와 데이터는 있지만 지연이 0건인 정상 결과도 구분해야 합니다.

Q3. Paico에서 만든 대시보드를 Pixso에서 편집할 수 있나요?

Paico는 생성한 디자인을 Pixso 디자인 파일로 가져와 편집하고 협업하는 기능을 안내합니다. 화면을 가져온 뒤에는 실제 사용할 지표와 예외 상태에 맞춰 내용과 동작을 다듬으세요.

Q4. 모바일 대시보드에서 먼저 확인할 것은 무엇인가요?

핵심 KPI, 상태 변화, 다음 행동을 이해할 수 있는지 확인합니다. 배송 예제라면 미완료 지연 수와 최장 지연을 먼저 보여주고, 주문 목록은 핵심 열만 남긴 뒤 상세 화면에서 나머지 정보를 제공합니다.

결론

대시보드 디자인의 출발점은 차트 선택이 아니라 사용자의 결정입니다. 목표와 지표의 계산 기준을 정하고 → 현황·원인·행동의 순서로 배치하고 → 필터와 예외 상태를 설계하고 → 프로토타입으로 업무 흐름을 확인하세요. 배송 예제처럼 카드의 숫자가 목록과 상세 화면까지 일치해야 담당자가 다음 행동을 판단할 수 있습니다.

Pixso에서 대시보드 설계하기