AI/BI에서 아름다운 대시보드 디자인하기

소개

모든 기업은 로고, 색상, 글꼴, 톤앤매너를 통해 자사가 지향하는 가치를 반영하는 브랜드 아이덴티티를 가지고 있습니다. Rivian 및 Wineshipping과 같이 가장 잘 알려진 고객사들은 마케팅, 슬라이드 데크, 웹사이트, 제품 등 모든 영역에서 이러한 아이덴티티를 일관되게 적용하고 있습니다. 이러한 일관성이 바로 고객 및 파트너와의 신뢰를 쌓는 비결입니다.

대시보드는 비즈니스 팀이 의사 결정권자 및 외부 파트너와 데이터를 공유하는 중요한 매체입니다. 대시보드 작성자는 사용자가 데이터를 이해하고 핵심 인사이트를 도출할 수 있도록 이 경험을 설계합니다. 대시보드가 신뢰할 수 있고 전문적으로 보이려면 작성자는 대시보드가 통일감 있고 브랜드 이미지에 부합하도록 만들어야 합니다. 대시보드 테마를 사용하면 개별 대시보드의 디자인과 느낌을 원하는 비전에 맞게 업데이트할 수 있습니다.

워크스페이스 테마는 워크스페이스 내의 모든 대시보드에 일관된 테마를 적용하여 이를 한 단계 더 발전시킵니다. 대시보드는 이 테마를 자동으로 상속받습니다. 물론 필요에 따라 로컬에서 이를 확장하거나 수정할 수도 있습니다. 이 게시물에서는 몇 가지 디자인 모범 사례를 살펴보고 브랜드를 반영하는 맞춤형 테마를 만들어 보겠습니다.

가상의 기업인 Wanderbrick의 브랜드 가이드라인을 예시로 사용하여 대시보드를 만들어 보겠습니다.

함께 따라 해보고 싶으신가요? Wanderbricks는 모든 Databricks 워크스페이스에서 샘플 데이터 세트를 제공하는 가상의 여행 및 환대 서비스 기업입니다. 각 섹션에 있는 Genie Code 프롬프트를 사용하여 대시보드를 처음부터 다시 만들거나, 내용을 읽으면서 여러분의 대시보드에 아이디어를 적용해 볼 수 있습니다. 먼저 새 대시보드를 열고 이 프롬프트를 입력해 보세요. 이 프롬프트는 우리가 계속해서 사용할 차원(dimension)과 측정값(measure)이 포함된 samples.wanderbricks 스키마를 기반으로 로컬 메트릭 뷰를 생성합니다.

#1 — 최종 사용자의 요구 사항에 맞게 레이아웃 구성하기

그리드 설정하기

대시보드의 목적에 따라 그리드 레이아웃의 열 개수를 결정해야 합니다. AI/BI는 필요에 따라 3열, 4열 또는 6열로 세분화할 수 있는 유연한 12열 그리드를 제공합니다. 위젯이 많은 조밀하고 기술적인 대시보드는 6열 레이아웃을 사용하여 더 많은 위젯을 한눈에 보여주는 것이 좋습니다. 반면, 임원용 대시보드는 인지 부하를 줄이기 위해 3열 레이아웃을 사용할 수 있습니다.

계층 구조 만들기

대시보드를 볼 때 사람의 눈은 글을 읽기 전에 가장 중요한 정보를 찾기 위해 자연스럽게 훑어봅니다. 대시보드 디자인에 따라 시선은 대시보드 전체에서 F자 패턴 또는 Z자 패턴 중 하나를 따르게 됩니다.

이미지와 시각화 자료가 많은 대시보드의 경우, 시선은 시각적 레이아웃을 가로질러 자연스럽게 Z자 패턴을 따릅니다. 왼쪽 상단의 제목과 필터에서 시작하여 대각선 아래로 이동한 후 오른쪽 하단의 상세 시각화 및 표에 도달합니다.

텍스트나 표가 더 많은 대시보드의 경우 F자 패턴이 나타날 수 있습니다. 시선이 첫 번째 행을 완전히 스캔한 다음 왼쪽 아래로 이동합니다. 두 패턴 모두 원칙은 동일합니다. 가장 중요한 정보를 시선이 가장 먼저 머무는 곳에 배치하는 것입니다.

크기 조절을 통한 강조

대시보드의 모든 요소가 같은 크기라면 아무것도 눈에 띄지 않습니다. 사용자는 어디에 먼저 집중해야 할지 알려주는 시각적 단서가 필요합니다. 가장 중요한 메트릭과 주요 시각화 자료를 더 크게 만들고 보조 요소를 배경으로 물러나게 하여 명확한 계층 구조를 설정하세요.

이 원칙을 Wanderbricks 대시보드에 적용해 보세요. 첫 번째 프롬프트는 방금 다룬 계층 구조에 따라 임원용 개요 페이지를 빌드하고, 두 번째 프롬프트는 동일한 원칙이 다른 대상에게 어떻게 적용되는지 보여주기 위해 더 조밀한 기술 페이지를 추가합니다.

#2 — 톤앤매너와 가독성을 고려한 글꼴 선택

대시보드의 글꼴을 선택하는 것은 미적인 결정인 동시에 기능적인 결정이기도 합니다. 브랜드 아이덴티티와 대상 독자를 모두 고려하여 글꼴을 선택해야 합니다. 기술적인 성향의 독자는 Space Grotesk와 같이 표현력이 풍부한 글꼴을 선호할 수 있는 반면, 임원용 대시보드는 Arial과 같이 더 친숙하고 보수적인 글꼴이 적합합니다. 목표는 단순히 스타일을 꾸미는 것이 아니라 톤앤매너를 설정하는 것입니다.

대시보드는 정보 밀도가 높은 경향이 있으므로 가독성이 최우선입니다. 시각적 피로를 줄여주는 산세리프(sans-serif) 글꼴을 권장합니다. AI/BI는 기본적으로 Arial, Tahoma, Verdana를 포함하여 기본적으로 제공되는 몇 가지 웹 안전 산세리프 옵션을 지원합니다.

자신만의 글꼴을 사용하려면 이제 대시보드에 로컬 글꼴을 추가할 수 있습니다. 이는 일관성을 위해 대시보드를 내부 도구에 임베드할 때 특히 유용합니다. 이 대시보드에서는 로컬 글꼴을 사용하고 Space Grotesk로 설정하겠습니다.

가독성을 확보하려면 위젯 배경과 높은 대비를 유지하는 글꼴 색상을 선택하세요. Adobe 색상 대비 검사기와 같은 접근성 도구를 사용하여 확인해 보세요. 라이트 모드에서는 순수 검은색(#000000)을 사용하면 밝은 배경(#FFFFFF)에서 너무 강하게 느껴질 수 있으므로 피하는 것이 좋습니다. 라이트 모드에서는 #EBEBEB 배경에 #08141A와 같이 약간 부드러운 톤을 사용하면 종종 더 편안한 읽기 경험을 제공합니다. 다크 모드에서는 과도한 대비를 피하기 위해 #08141A 배경에 #EBEBEB를 사용하는 것이 좋습니다.

AI/BI는 Genie Code로 적용할 수 있는 일련의 웹 안전 및 오픈 소스 글꼴을 지원합니다. 브랜드 글꼴의 경우 설정(Settings) > 글꼴(Font) > 로컬 글꼴 사용(Use local font) 아래의 로컬 글꼴 옵션을 사용하세요. 오픈 소스 옵션으로 시작하고 글꼴 색상을 설정하려면 이 프롬프트를 사용해 보세요.

#3 — UI 색상 정의하기

60-30-10 규칙은 균형 잡히고 시각적으로 조화로운 디자인을 만들기 위한 색채 이론의 기본 원칙입니다. 디자이너들은 집 안의 방 색상을 선택하는 것부터 새로운 회사의 브랜딩을 구축하는 것까지 다양한 맥락에서 이 규칙을 사용합니다. 이 디자인 규칙은 세 가지 색상 카테고리로 색상 팔레트를 정의하는 데 도움이 되며, 전체적인 디자인에서 각 색상이 사용되어야 하는 적절한 비율의 균형을 제공합니다.

• 60%는 주조색(dominant color)으로 대시보드의 전체적인 톤을 정의하며, 캔버스, 위젯, 테두리의 배경색이 됩니다.
• 30%는 보조색(secondary color)으로 대비를 통해 배경을 돋보이게 해줍니다. 대시보드에서는 글꼴 색상과 데이터 시각화 팔레트에 사용됩니다.
• 10%는 강조색(accent color)으로, 필요한 곳으로 시선을 끄는 역할을 합니다. 대시보드에서 필터, 탭, 버튼과 같은 대화형 요소를 강조할 때 이 색상을 사용하세요.

아래에서는 이 원칙을 적용하여 대시보드에 어울리는 아름다운 색상을 선택하는 방법을 살펴보겠습니다.

무채색 배경색

배경색을 무채색에 가깝게 유지하면 의도치 않은 편향을 주지 않으면서 데이터 시각화 색상이 정보를 정확하게 전달할 수 있습니다. 라이트 모드의 경우 위젯 배경은 화이트(#FCFCFD)에 가깝게 유지하고, 캔버스 배경은 이보다 약간 어두운 색상(#EBEBEB)을 사용하세요. 이렇게 하면 시선을 분산시키지 않으면서도 영역을 구분할 수 있습니다. 대비가 미묘할 때 대시보드는 고립된 요소들의 격자가 아니라 하나의 유기적인 전체로 보입니다. 테두리 색상을 위젯 배경과 일치하도록 설정하면 특히 조밀한 레이아웃에서 시각적 복잡함을 줄일 수 있습니다.

위젯별 맞춤 설정

특정 위젯을 강조하여 돋보이게 하려면 해당 위젯의 테마 속성을 재정의할 수 있습니다. 위젯 스타일 설정에서 배경 및 테두리 색상을 #1F354B로 업데이트하세요. 또한 높은 대비를 확보하기 위해 글꼴 색상을 #EBEBEB로 업데이트하세요.

선명한 선택 색상

선택 색상은 필터, 탭, 버튼과 같은 대화형 요소를 강조하는 데 사용됩니다. 텍스트 및 배경색과 쉽게 구별되는 색상을 선택하세요. 브랜드 색상을 사용하여 쉽게 도출할 수 있습니다. Adobe Color에서 브랜드 색상인 #15AFDD를 기본 색상으로 사용하고 색상 조화를 '정사각형(square)'으로 설정하여 #DE7914 및 #3A7689와 같은 선택 색상을 도출해 볼 수 있습니다. 파란색 계열(예: #2272B4)을 선택하는 것은 대개 안전한 선택입니다. 이는 웹의 대화형 링크와 연관된 하이퍼링크 색상과 유사하기 때문입니다.

다크 모드

모든 AI/BI 테마는 라이트 모드와 다크 모드를 모두 지원합니다. 라이트/다크 모드 토글을 전환하여 두 모드를 모두 설정하세요. 라이트 모드를 설정하려면 캔버스 배경에 브랜드 색상인 #1E343F를 사용하고 위젯 배경에 #08141A를 사용할 수 있습니다. 라이트 모드에서는 높은 대비를 제공하므로 위젯에 더 밝은 색상을 사용하는 것이 보통 권장됩니다. 가독성을 높이기 위해 글꼴 색상으로는 #E8EFF1을 사용하겠습니다.

Wanderbricks 대시보드에 60-30-10 원칙을 적용해 보세요. 이 프롬프트는 무채색 캔버스 및 위젯 배경을 설정하고, 테두리를 위젯 색상과 일치시켜 숨기며, 대화형 요소에 보완적인 파란색을 추가합니다.

#4 — 나만의 시각화 팔레트 구축하기

라이트 모드와 다크 모드 모두에 대한 인터페이스 색상이 설정되었으므로, 마지막 단계는 시각화 팔레트를 선택하는 것입니다.

균형 잡힌 데이터 시각화 팔레트는 대시보드 전체를 하나로 묶어주고 생동감을 불어넣어 줍니다. 팔레트에 브랜드 색상을 포함할 수 있지만, 시각화에 그대로 사용하기 어려울 수 있으므로 조정이 필요합니다. 전 세계 인구의 약 4.5%가 어떤 형태로든 색맹을 겪고 있으므로, 색약/색맹 친화적인 팔레트를 디자인하는 것이 중요합니다. 업계 표준 팔레트를 사용해 보고 싶다면 colorbrewer를 확인해 보시는 것을 추천합니다. 나만의 팔레트를 디자인할 때 고려해야 할 몇 가지 주요 사항은 다음과 같습니다.

1. 사용 사례에 따라 팔레트에는 5~9개의 색상이 포함되어야 합니다. 이 대시보드에서는 Adobe Color를 사용하여 5가지 색상의 팔레트를 만들어 보겠습니다.
2. 라이트 모드와 다크 모드 모두에서 색상이 잘 구별되어야 하므로 극도로 밝거나 극도로 어두운 색상은 피하세요.
3. 적록 색맹이 흔하므로 팔레트에서 이 색상들이 서로 이웃하지 않도록 하세요.

맞춤형 Databricks 시각화 팔레트를 만들기 위해 Adobe Color에서 브랜드 색상(#15AFDD)으로 시작합니다. '정사각형(square)' 색상 조화를 적용하여 색상환에서 균등한 간격을 두고 배치된 4가지 추가 색상(#83DE14, #DE7914, #BE14DE, #3A7689)을 도출합니다. 그런 다음 Adobe Color에서 몇 가지를 더 미세 조정할 수 있습니다.

• 색조 변경: 개별 색상 헥스(hex) 코드를 클릭하고 색조 슬라이더를 서서히 이동합니다.
• 밝기 조절: 색상 헥스 코드를 클릭하고 밝기 슬라이더를 조정하여 팔레트 색상의 밝기를 조절합니다. 목표는 색상, 특히 인접한 색상 쌍이 서로 명확히 구별되도록 하는 것입니다.
• Adobe Color의 색맹 검사기에서 도출된 색상을 테스트하여 제2색맹(Deuteranopia), 제1색맹(Protanopia), 제3색맹(Tritanopia)을 포함한 일반적인 조건에서 팔레트가 어떻게 보이는지 시뮬레이션해 보세요.
• AI/BI에서 테스트: 라이트 모드와 다크 모드 모두에서 실제 대시보드를 대상으로 테스트해 보세요.

최종적으로 완성된 색상 팔레트는 #15AFDD, #2375A8, #52A870, #C85070, #C89930입니다.

팔레트가 접근성 검사를 통과하면 이를 적용하여 차트에 생동감을 불어넣어 보세요. 이 팔레트는 Adobe Color의 색맹 시뮬레이터를 거쳐 라이트 모드와 다크 모드 모두에서 테스트한 후 최종 결정한 팔레트입니다.

결론

따로 보면 작아 보이는 디자인 결정들이 모이면 큰 차이를 만듭니다. 일관된 글꼴, 의도된 색상 팔레트, 독자가 쉽게 읽을 수 있도록 구성된 레이아웃이 그렇습니다. 이들이 한데 어우러져 대시보드를 사람들이 신뢰할 수 있는 결과물로 변화시킵니다. 워크스페이스 테마는 이러한 디자인을 조직 전체로 확장하는 데 도움을 주므로, 훌륭한 디자인 관행이 모든 대시보드의 출발점이 됩니다.

직접 살펴보고 싶으시다면 우리가 함께 살펴본 대시보드를 여기에서 확인하실 수 있습니다. 아직 AI/BI 대시보드를 사용하고 있지 않으시다면, 이 기능은 Databricks에 기본적으로 내장되어 제공됩니다.

아이디어나 피드백이 있으신가요? 저희에게 공유해 주세요.

직접 살펴볼 수 있도록 대시보드 다운로드하기

(이 글은 AI의 도움을 받아 번역되었습니다. 원문이 궁금하시다면 여기를 클릭해 주세요)