대시보드 어떻게 제작하면 좋을까? 사례로 보는 대시보드 인터랙티브 기능
매일 아침 출근하면 매출 현황부터 확인하고, 주간 회의 때마다 지표를 띄워 함께 살펴보는데요. 이렇게 업무에서 늘 마주하는 대시보드이지만, 막상 열어 보면 숫자와 차트가 화면을 빼곡히 채우고 있어 어디부터 봐야 할지 막막했던 적 있으신가요?
대시보드(Dash Board)는 여러 정보를 한 화면에 모아 전체 흐름을 한눈에 보여주는 도구입니다. 매출, 고객 수, 지역별 현황처럼 흩어져 있던 데이터를 한곳에 모아 보여주기 때문에 보고서를 하나하나 열어 볼 필요가 없습니다. 하지만 같은 대시보드를 보더라도 사용자마다 궁금한 것은 모두 다릅니다. 누군가는 “우리 지역만 따로 볼 수 없을까?”를, 누군가는 “이 막대는 정확히 어떤 수치를 의미하지?”를 궁금해합니다.
그래서 업무용 대시보드를 만들 때는 차트의 종류만큼, 보는 사람이 화면을 어떻게 다룰 수 있게 할지도 함께 고민해야 하는데요. 이 간극을 좁혀 주는 것이 바로 대시보드의 인터랙티브 기능입니다. 인터랙티브 기능은 크게 두 갈래로 나눌 수 있습니다. 조건을 고르거나 이름을 검색해 볼 데이터를 정하는 ‘필터 기능’과 보고 있는 데이터를 더 자세히 보여주는 ’하이라이팅 기능’입니다.
오늘은 필터링과 검색, 하이라이팅과 툴팁까지 인터랙티브 기능이 실제 대시보드에서 어떻게 작동하는지 사례를 통해 살펴보겠습니다.
1. 조건을 고르면 전체가 바뀌는 ‘필터링’
첫 번째로 살펴볼 인터랙티브 기능은 필터링(Filtering)입니다. 필터링은 국가, 연도, 유형 같은 조건을 골라 대시보드에 남길 데이터의 범위를 좁히는 기능인데요. 엑셀에서 원하는 항목만 걸러 보는 필터와 비슷하지만, 대시보드에서는 조건 하나를 바꾸면 시각화의 수치, 차트, 순위 등 데이터가 동시에 바뀐다는 점이 다릅니다. 덕분에 대시보드 한 화면이 조건에 따라 여러 장의 보고서 역할을 할 수 있습니다.
첫 번째 사례는 영국 싱크탱크 채텀하우스(Chatham House)가 운영하는 전 세계 천연자원 교역 데이터 대시보드입니다. 화면 상단에는 수출국, 수입국, 품목, 연도, 단위를 고르는 필터가 있고, 그 아래로 교역 흐름 지도와 총교역액, 연도별 추이 그래프, 교역 순위가 이어집니다. 지도 위 곡선 하나하나가 국가 간 교역 흐름을 뜻해요.
2024년 전체 국가를 기준으로 보면 교역 흐름은 22,881개, 총교역액은 7.2조 달러에 이릅니다. 가장 큰 흐름은 캐나다에서 미국으로 향하는 교역이죠. 그렇다면 수입국 필터를 ‘대한민국’으로 바꾸면 어떻게 될까요?
필터 창 안에는 국가별, 지역별 그룹을 나눈 탭과 검색창이 함께 있어 ‘Korea’처럼 이름 일부만 입력해도 바로 고를 수 있습니다. 대한민국을 선택하면 지도의 선이 한국으로 모이고, 총교역액은 2,490억 달러로 바뀝니다. 아래 세부 차트를 통해 교역 순위 1위는 중국이 차지한 것을 알 수 있습니다. 뒤이어 가장 빠르게 증가하고, 줄어드는 교역 국가를 함께 볼 수 있는 점도 눈에 띕니다. 필터 하나를 바꿨을 뿐인데 화면 전체가 ‘한국의 교역 보고서’가 된 것이죠.
위 사례처럼 대시보드를 제작할 때 모든 패널을 하나의 필터에 연결하는 것의 중요성을 알 수 있습니다. 패널마다 필터가 따로 있다면 지도는 한국 기준인데 순위는 전 세계 기준인 식으로 화면이 어긋나, 보는 사람이 숫자를 잘못 읽기 쉬운데요. 대시보드를 설계할 때는 ‘이 필터를 바꾸면 어떤 패널이 함께 바뀌어야 하는가’를 먼저 정하고, 기준이 같은 패널은 하나의 필터에 묶어 보세요!
앞선 사례가 드롭다운으로 조건을 골랐다면, 이번에는 체크박스 하나로 비교하는 대시보드입니다. 두 번째 사례는 파리의 에어비앤비 숙소 현황을 보여주는 대시보드입니다. 화면 왼쪽에는 숙소 위치를 점으로 찍은 파리 지도가 있고, 오른쪽에는 조건에 맞는 숙소 수를 보여주는 카운터와 함께 객실 유형, 예약 활동, 허가 여부, 단기 임대, 호스트당 숙소 수까지 5개 패널이 이어집니다. 눈여겨볼 부분은 각 패널 제목 옆에 붙은 ‘~만 보기’ 체크박스인데요!
기본 화면은 단기 임대 숙소만 보도록 설정되어 있는데요. 예약 활동(Activity) 패널을 보면 평균 예약 일수는 71박, 1박 요금은 223유로, 연 평균 수입은 17,289유로인데요. 패널 아래 예약 일수 분포 막대그래프에서는 지난 1년간 예약이 0박인 구간의 막대가 가장 높게 솟아 있습니다. 숙소는 많지만 실제로 손님을 거의 받지 않는 숙소도 많다는 뜻이죠.
이제 예약 활동 패널 옆의 ‘최근 자주 예약된 숙소만 보기’를 체크해 볼까요? 여기서 ‘최근’은 최근 6개월 안에 리뷰가 달린 숙소를, ‘자주’는 1년에 120박 넘게 예약된 것으로 추정되는 숙소를 뜻해요. 체크하자마자 숙소 수는 15,556개로 줄고, 분포 그래프에서는 0~120박 구간의 막대가 모두 사라집니다. 남은 막대 가운데 241박 이상 구간이 가장 높습니다. 숫자도 크게 달라집니다. 평균 예약 일수는 71박에서 211박으로, 1박 요금은 223유로에서 249유로로, 연 평균 수입은 17,289유로에서 53,501유로로 3배 넘게 늘어납니다.
위 사례를 통해 대시보드에 켜고 끄는 필터를 관련 패널 바로 옆에 두는 것의 효과를 알 수 있는데요! 체크박스가 예약 활동 패널 제목 옆에 있어 별도의 설명 없이도 무엇을 거르는 필터인지 바로 알 수 있고, 체크 한 번으로 전과 후를 오가며 비교할 수 있습니다. 신규/기존 고객, 온라인/오프라인처럼 둘 중 하나를 켜고 끄는 조건이 있는 데이터라면 사용 편의를 생각해 해당 차트 옆에 체크박스를 배치하는 것을 고려해 볼 수 있습니다.
살펴본 두 사례 모두 필터 하나가 여러 패널을 한꺼번에 움직이도록 설계되어 있었는데요. 다만 필터의 생김새는 조건의 성격에 따라 달랐습니다. 국가처럼 선택지가 많은 조건은 검색이 가능한 드롭다운으로, ‘자주 예약된 숙소만’처럼 켜고 끄는 조건은 체크박스로 설계했습니다. 여러분의 대시보드에 필터를 넣을 때도 조건의 성격에 맞는 모양을 먼저 골라 보세요!
2. 사용자가 직접 찾아보는 ‘검색’
대시보드에서 활용할 수 있는 두 번째 인터랙티브 기능은 검색(Search)입니다. 검색은 항목이 수백 개일 때 목록을 일일이 뒤지지 않고, 이름을 입력해 원하는 대상의 대시보드로 바로 이동하는 기능입니다. 필터링이 ‘조건으로 범위를 좁힌다’라면, 검색은 ‘대상 하나를 콕 집어 출발점으로 삼는다’라는 점에서 차이가 있습니다.
서울시가 운영하는 서울 실시간 도시 데이터 대시보드입니다. 주요 장소 121곳의 실시간 인구, 상권, 도로 소통, 대중교통, 날씨·환경, 문화 행사 정보를 모아 보여주는 대시보드인데요. 첫 화면에는 121곳의 목록과 장소 검색창이 있고, 장소를 고르면 왼쪽에는 실시간 인구·상권·대중교통 정보가, 오른쪽에는 인구 밀집도와 도로 소통 상황을 색으로 표시한 지도가 나타납니다.
검색창에 ‘여의도’를 입력해 볼까요? 자동완성 목록에 ‘여의도(발달상권)’와 ‘여의도한강공원(공원)’이 뜨는데, 이름 옆에 ‘약간 붐빔’, ‘여유’ 같은 혼잡도가 함께 표시됩니다.
‘여의도’를 선택하면 대시보드 전체가 여의도 기준으로 바뀌는데요. 확인 시점의 실시간 인구는 15만 5천~16만 명, 인기 시간대는 오후 5시, 가장 많은 연령대는 30대(27.2%)였습니다. 최근 10분 카드 매출은 380~390만 원, 결제 금액 상위 업종은 병원, 할인점/슈퍼마켓, 기타 요식 순입니다. 이 밖에도 기온, 주차 가능 면수, 전기차 충전소 현황까지 같은 화면에 함께 표시됩니다. 검색 한 번으로 ‘지금 여의도에 누가 얼마나 있고, 어디에 돈을 쓰고 있는지’가 한 화면에서 확인할 수 있습니다.
위 사례처럼 자동완성 목록에 핵심 지표를 함께 보여주면 검색 결과가 일종의 ‘미리보기’ 역할을 하기 때문에, 보는 사람은 대시보드를 열기 전에 정보를 먼저 알 수 있습니다. 매장, 상품, 고객사를 검색하는 대시보드라면 자동완성 옆에 매출 증감이나 재고 상태처럼 가장 먼저 궁금해할 지표를 배지 형태로 보여주는 것도 고려할 수 있습니다.
서울 실시간 도시 데이터가 ‘지금 이 순간’을 보여준다면, 위 시각화는 ‘수십 년의 변화’를 같은 틀로 보여줍니다. 전 세계 국가의 산림 면적, 산림 손실, 화재 정보를 담은 글로벌 네이처 워치(Global Nature Watch)의 대시보드입니다. 화면 상단에는 국가 선택창과 요약 문장이 그 아래로 요약, 토지 피복, 산림 변화, 화재, 기후 차트가 이어지는데요!
국가 선택창에 ‘Korea’를 입력하면 North Korea와 South Korea가 자동완성으로 뜹니다. South Korea를 선택하면 요약 문장과 위젯이 모두 한국 기준으로 바뀌고, 하위 지역 선택창과 ‘토지 이용(Land Use)’ 탭이 새로 생기는데요. 검색한 나라에 맞춰 세부 지역을 한 번 더 골라 좁혀 보는 식으로 탐색을 이어갈 수 있습니다.
요약 문장 속 숫자를 비교해 볼까요? 2020년 전 세계 자연림은 35 Gha(글로벌 헥타르)로 육지의 27%였지만, 한국은 47Gha로 국토의 47%를 차지했습니다. 2025년 한 해 동안 잃은 자연림은 전 세계 23Mha, 한국 83Kha였어요. 한국은 국토의 절반 가까이가 자연림인 나라라는 점이 같은 틀 안에서 바로 비교되는 거죠. 아래 위젯의 제목도 ‘한국의 수목 피복 손실’, ‘한국의 주간 화재 경보’처럼 바뀌어 내가 검색한 나라의 정보를 확인할 수 있습니다.
위 시각화처럼 검색한 대상에 맞춰 수치가 바뀌고, 요약 문장을 넣으면 사용자는 차트를 하나하나 읽기 전에 핵심 숫자를 문장으로 접하게 됩니다. 이를 통해 데이터에 익숙하지 않은 사람도 흐름을 놓치지 않을 수 있습니다. 대시보드 상단에 같은 문장 틀을 만들고 필터·검색 값에 연결해 보세요! 자동완성과 요약 문장을 함께 설계하면 검색 이후의 탐색까지 자연스럽게 이어질 수 있습니다.
3. 정보를 더 자세히 보여주는 ‘하이라이팅’과 ‘툴팁’
마지막으로 살펴볼 기능은 하이라이팅(Highlighting)과 툴팁(Tooltip)입니다. 하이라이팅은 가리키거나 클릭한 대상만 강조하고 나머지를 흐리게 하는 기능이고, 툴팁은 마우스를 올린 자리에 세부 수치를 작은 상자로 띄우는 기능입니다. 필터 기능이 ‘무엇을 볼지’ 정한다면, 하이라이팅 기능은 ‘보고 있는 것을 얼마나 자세히 볼지’ 정한다고 할 수 있습니다.
위 시각화는 미국 선거 예측 대시보드입니다. 예측시장 폴리마켓(Polymarket)의 거래 데이터로 2028년 대선과 2026년 중간선거 확률을 실시간으로 보여주는데요. 한 화면에 대선 후보별 확률 트리맵, 정당별 승리 확률 추이, 선거 일정 캘린더, 중간선거 지도가 담겨 있습니다.
2028년 대선 후보별 우승 확률 트리맵을 자세히 볼까요? 트리맵(Treemap)은 전체를 사각형으로 나누고, 각 칸의 크기로 값을 비교하는 차트예요. 여기서는 칸 하나가 후보 한 명을, 칸의 크기가 우승 확률을, 색이 소속 정당을 뜻합니다. 가장 큰 칸은 빨간색 공화당 밴스(JD Vance) 18.9%이고, 파란색 민주당 뉴섬(Gavin Newsom) 16.4%, 공화당 루비오(Marco Rubio)가 뒤를 잇고 있습니다. 후보 36명의 확률 차이가 숫자를 읽지 않아도 칸의 크기만으로 한눈에 비교할 수 있죠.
칸에 마우스를 올리면 그 칸이 밝게 강조되고, 툴팁에 후보의 풀네임과 소속 정당, 확률이 나타나는데요. 툴팁 아래에는 ‘클릭하면 차트를 볼 수 있다’는 안내도 함께 있어요. 실제로 칸을 클릭하면 오른쪽에 그 후보의 상세 패널이 열리고, 실시간 확률 차트가 나타납니다.
만약 후보 36명의 이름과 확률을 모두 크게 적었다면 화면은 글자로 가득 찼을 텐데요. 위 시각화에서는 큰 칸에서 이름과 숫자를 크게 보여주고 작은 칸은 툴팁에 맡긴 덕분에 사용자가 필요한 순간에 정확한 값을 확인할 수 있습니다. 대시보드에서 툴팁을 활용할 때는 자세한 내용은 클릭하면 볼 수 있다는 안내를 함께 넣어 보세요!
위 시각화는 경기도 일자리 상황판 대시보드입니다. 경기도 31개 시군의 인구, 고용, 산업, 채용 지표를 한 화면에 모아 보여주는 공공 대시보드인데요! 왼쪽에는 경기도 시군 지도가, 오른쪽에는 주민등록 인구, 경제활동인구 구조, 고용률·실업률, 고용보험 피보험자 수, 실업급여 수급 자격 인정자 수, 채용 정보 등이 배치되어 있습니다.
위 대시보드는 지도에는 하이라이팅 기능을, 차트에는 툴팁 기능을 활용했는데요! 지도에서 시군에 마우스를 올리면 그 지역만 밝게 강조되고, 클릭하면 대시보드 전체가 그 지역 기준으로 바뀝니다. 반면 차트 위에 마우스를 올리면 툴팁으로 정확한 값이 나타나는데요. 지표마다 붙은 ‘AI 해석’ 버튼을 누르면 지표의 뜻과 요약도 확인할 수 있어, GRDP처럼 낯선 용어가 나와도 화면을 벗어나지 않고 이해할 수 있습니다.
특히 세부 차트에서 툴팁 기능을 활용해 피보험자 수와 함께 전년 동월 대비 증감률을 함께 보여주는데요! 단순히 몇 명이라는 숫자만으로는 많은지 적은지 판단하기 어렵지만, 1년 전보다 몇 프로 늘었다는 정보가 함께 있어 ‘꾸준히 늘고 있다’ 혹은 ‘줄고 있다’는 흐름을 함께 읽을 수 있었습니다.
툴팁에 값만 있으면 ‘이 값이 많은 거야, 적은 거야?’라는 질문이 남지만, 비중이나 증감률이 함께 있으면 사용자가 ‘얼마’와 ‘어느 정도’를 동시에 판단할 수 있습니다. 하이라이팅으로 시선을 모으고, 툴팁으로 정확한 값을 사용자에게 보여줄 수 있습니다. 대시보드에서 화면을 복잡하게 만들지 않으면서 담을 수 있는 정보를 늘려 주는 두 가지 기능을 잊지 마세요!
에디터의 한마디
지금까지 필터링, 검색, 하이라이팅과 툴팁까지 세 가지 인터랙티브 기능을 사례로 함께 살펴보았습니다. 내가 원하는 조건을 고르고, 궁금한 대상을 찾고, 필요한 순간에 수치를 확인할 수 있으니 훨씬 편하게 느껴졌는데요!
여러분은 어떤 사례가 가장 인상 깊으셨나요? 개인적으로는 Inside Airbnb 사례가 가장 인상 깊었는데요. 패널 제목 옆 체크박스 하나로, 파리에서 자주 예약되는 숙소의 연 평균 수입이 전체 평균의 3배가 넘는다는 사실을 확인할 수 있었습니다. 만든 사람이 비교표를 따로 준비하지 않았는데도, 질문에 대한 답을 찾을 수 있었습니다. 이처럼 좋은 대시보드는 기능을 많이 넣는 것이 아니라, 보는 사람이 던질 질문을 먼저 떠올리는 데서 시작된다는 것을 느낄 수 있는 사례였습니다.
오늘 살펴본 필터링 기능, 검색 기능, 하이라이팅과 툴팁 기능은 따로 쓰이기보다 한 대시보드 안에서 함께 쓰일 때가 많은데요. 사용자에 맞춰 조건을 고르고, 대상을 찾고, 숫자를 확인하는 흐름이 끊기지 않도록 연결하는 것이 중요합니다. 대시보드를 기획할 때는 넣을 차트 목록보다 사용하는 사람이 알고 싶어하는 정보의 목록을 먼저 적어 보세요. 그 질문에 답하는 인터랙션 하나가 여러 장의 보고서를 대신하는 대시보드를 만들어 줄 거예요!
<참고 자료>
- Chatham House, “resourcetrade.earth“
- Inside Airbnb, “Paris“
- 서울특별시, “서울 실시간 도시데이터“, 서울 열린데이터광장
- Global Nature Watch, “Global Dashboard“
- PizzINT, “Election Hub”
- 경기도일자리상황판
Editor. 진젤리
