직관적인 대시보드 설계하기I 지표와 레이아웃

IMQA는 지난 4월 21일부터 3일간 코엑스에서 진행된 월드IT쇼에 참가하여 많은 관람객으로부터 뜨거운 관심과 긍정적인 평가를 받으며 성황리에 전시회를 마무리하였는데요. (월드IT쇼 전시회 이야기를 확인해 보세요😉)

전시회에서 받았던 질문 중 대시보드를 직접 제작하였는지, 제작 기간이 얼마나 걸렸는지 등 대시보드에 관한 문의가 굉장히 많았고, 사진을 찍어가시는 분들도 많았습니다. 왜 관람객들은 대시보드에 대해 관심이 많았을까요? 아마 관심을 보여주신 분들 대부분은 대시보드를 만드는 기획자 혹은 개발자일 텐데요. 이분들은 대시보드를 만드는 것이 쉽지 않다는 것을 잘 알고 있기 때문일 것입니다.

그렇다면 대시보드는 어떻게 만들어야 하고, 좋은 대시보드란 무엇일까요?

그래서 저희는 성능 모니터링 업체 SignalFx의 CTO였던 Cory Watson가 2019년 모니터링 컨퍼런스인 Monitorama에서 발표한 Dashboard Renaissance 강연 내용을 정리하여 공유하고자 합니다. 좋은 대시보드를 만들기 위해 고려해야 할 점과, 대시보드를 개선할 수 있는 다양한 방법 등 대시보드에 대한 정보를 보다 많은 분들께 전달하고자 정리했습니다.

목차는 아래와 같이 구성되어 있으며, 총 3번에 걸쳐 정리한 내용을 포스팅할 예정입니다. 첫 번째 시간에는 대시보드 개선에 대한 목표, 지표와 레이아웃에 대해 정리해 보았습니다.

*이 글은 Cory Watson – Dashboard Renaissance의 강연 내용을 번역한 글로, presentation 화면에 띄워진 이미지와 함께 내용을 정리하였습니다. 번역하는 과정에서 매끄럽지 않을 수 있으니 이해를 부탁드리며, support@imqa.io로 연락해 주시면 수정하도록 하겠습니다. (글의 모든 저작권은 Cory Watson에게 있습니다. 원본 강연은 이 링크를 참고하세요!)

목차

목표: 대시보드의 개선

1.  지표와 레이아웃

   • 사용자로부터 요건 가져오기 (Get a spec from users)
   • 개념 잡기 (Starting Concepts)
   • 포함할 항목 (What to include)
   • 하나의 화면, 다음 단계 (One Screen, More Next Steps)
   • 점진적인 깊이 (Progressive Depth)

2.  시각화

   • 인간을 해킹한다 (Hacking Humans)
   • 전주의적 처리 (Pre-attentive Processing)
   • 인식의 정확성 (Accuracy of Perception)
   • 인간은 가로를 좋아해 (Humans Like Horizons)
   • 선, 막대, 그리고 기타 (Before Lines, Bars, & etc)
   • 테이블을 잊지 마세요 (Don't Forget Tables)
   • 선 vs 열 (Line Versus Heat))
   • 영역 (Area)
   • 막대 (Bars)

3.  맥락

   • 실무자는 맥락이 필요해 (Practitioners Need Context)
   • 규모, 단위, 규범, 레이블 (Scale, Units, Norms, Labels)
   • 텍스트 (Text)
   • 목표 표시 (Mark Targets)

요약: 대시보드를 되살리는 방법

더 알고 싶다면?

"여러분은 대시보드 개선을 위해 대시보드를 마지막으로 살펴본 적이 언제인가요?"

이 질문을 듣고 저희 솔루션인 IMQA(모바일 앱 성능 모니터링 솔루션)를 오랜만에 가만히 들여다보았고, 짧지만 컸던 대시보드의 변화 과정이 생각났습니다. 저희는 처음 개발자 중심으로 대시보드를 구성하였는데요. 그러다 점점 개발자 뿐만 아니라 운영자, 고객담당자도 함께 사용하는 것을 알고 각각의 담당자가 사용하기에 편리하도록 사용자 중심으로 대시보드를 개선하고 있습니다.

이렇듯 대시보드는 목표와 목적을 잃지 않되 사용자들의 의견을 듣고 반영하는 과정을 끊임없이 반복해야 합니다.

💡목표: 대시보드의 개선

가장 먼저 이해해야 할 것

• 중요한 것은 사람이다 (Humans are what matter)
• 운영자로서의 일을 위한 UI (Often the "UI' for our work as operators)
• 우리는 아직 학습되지 않았다 (We're NOT trained to do this)
• 동료와 고객에게 미치는 영향 (Impacts on employees and customers)
• 인지 자원은 공유된다 (Cognitive resources are shared)

Cory Watson은 가장 먼저 대시보드를 개선을 목표로 했을 때, 염두 해야 할 점에 대해 강조했습니다. 사실 그가 이야기하는 것들은 우리가 잘 알고 있는 부분입니다. 그러나 그만큼 쉽게 놓치기 쉬운 부분이기도 합니다.

대시보드는 복잡한 시스템에서 사람에게 정보를 주기 위해 사용합니다. 대시보드를 이해한다는 것은 곧 시스템에서 어떤 일이 일어나고 있는지 이해하려는 것과 같다 말합니다. 그러기 위해서 우리는 대시보드에서 차트가 의미하는 것이 무엇인지, 지표는 어디서 나온 것인지 이해하기 위해 많은 자원(resource)을 사용합니다. 다시 말해 이것을 명확히 확인할 수 있다면, 우리는 더 많은 정보를 얻을 수 있겠죠.

1. 지표와 레이아웃

💡사용자로부터 요건 가져오기(Get a spec from users)

• 목적 (Purpose)
• 목표 (Goal)
• 친밀감 (Familarity)
• 필요한 맥락 (Context needed)
• 행동 (Actions)

대시보드는 보는 사람이 보기 쉽고, 어떤 목적을 달성하려고 하는지, 목표가 무엇인지 명확해야 합니다. 나아가 문제가 발생했을 때 대시보드를 확인하여 어떤 조치를 취해야 하는지 알 수 있어야 한다고 말합니다.

좋은 대시보드는 실제로 대시보드를 보는 실사용자가 해석하기 쉬워야 하며, 원인 분석에 그치는 것이 아니라 해결을 위한 다음 행동으로 이끌어야 합니다.

여기서 Cory Watson은 해결을 위한 다음 행동이 우리의 솔루션이든 경쟁사의 솔루션으로 연결하든 상관없다고 말합니다. 대시보드를 단순한 뷰 기능이 아닌 문제 해결을 위한 도구라고 보기 때문이죠.

💡개념 잡기 (Starting Concepts)

• 목표와 우선순위를 사용하자 (Use your goals and priorities)
• 그리드는 좋다! (Grids are good)

처음 대시보드를 만들 때는 백지상태일 것입니다. 당신이 생각하는 목표와 목적을 생각하며 대시보드를 제작한다면, 그 대시보드에는 목표와 우선순위가 뚜렷하게 드러날 것입니다.

중요하지 않은 대시보드는 없지만, 목표와 우선순위가 녹아있어야 한다.

Cory Watson은 이것을 강조하며 차트를 만들 때 우선순위를 녹여 화면에 배치하는 방법을 이야기합니다.

가장 중요한 것은 왼쪽 위, 덜 중요한 것은 종종 화면에서 벗어나는 경향이 있는 오른쪽 아래에 배치한다.

실제로 우리는 책을 읽거나, 모바일로 인터넷 기사를 읽을 때, 심지어 온라인 쇼핑을 할 때에도 왼쪽 위에서 오른쪽 아래로 읽어 내려가죠.

💡포함할 항목 (What to include)

• RED(Rate, Errors, Duration)와 사용량 (RED and USE)
• 선택하기 (Be choosey)
• 원인보다 증상을 선호 (Prefer symptoms to causes)
• 의미 있는 비교 (Meaningful comparisons)

대시보드에는 모든 지표와 신호, 로그, 이벤트 등을 시각화로 만들 수 없습니다.  그러기 때문에 우리는 한정된 화면(대시보드) 안에 효율적으로 배치해야 하는데요.  

더 중요한 것을 선택하고 결정하되 목표를 충족하는 지표를 포함해야 한다.

그렇다면 대시보드에 어떤 항목을 어떻게 포함시켜야 할까요?

대시보드 사용자는 문제가 발생했을 때 문제의 원인보다 지금 어떤 상황이 벌어지고 있는지 더 확인하고 싶어 합니다. 예를 들어 병원에 가서 진찰을 받을 때 우리는 질병의 원인보다 증상에 더 관심이 많습니다. 왜 발생했느냐보다 이 질병으로 인해 앞으로 어떻게 되는가가 더 궁금한 거죠. 이렇듯 대시보드에서도 특정 원인을 찾기 위한 것이 아니라면 증상, 즉 문제가 발생하여 나타난 결과를 먼저 알 수 있어야 합니다.

대시보드 차트를 배치할 때도 주의를 기울어야 합니다. 차트는 서로 가깝게 배치하면 비교되는 최적의 차트 유형이 될 수 있는데요. 이때 주의할 점은 서로 연관이 있는 정보를 비교해야 한다는 것입니다.

💡하나의 화면, 다음 단계 (One Screen, More Next Steps)

• 공통 항목의 배열 (Colocate common items)
• 사람은 3-4개의 이미지만 담는다 (Human can only keep 3 or 4 visuals in working memory)

사람은 한 번에 3~4개의 항목만 시각적으로 기억할 수 있다고 말합니다. 다시 말해, 한 화면에 모든 차트를 담을 수 없으므로 우선순위를 정하고 그 이상은 탭이나 다른 윈도우로의 이동, 스크롤 등을 통해 차트를 배치해야 하는 거죠. 모든 차트를 대시보드에 늘어놓기만 한다면, 3~4개의 항목이 아닌 1~2개의 항목도 기억하기 어려울 것입니다. 그리고 항목을 배열할 때도 상관없는 항목을 배열하는 것이 아닌 공통된, 서로 연관이 있는 항목을 배열해야 하는데요.  이렇게 각 항목마다 어울리는 차트를 적용하면 그 의미를 더욱 부각 시킬 수 있다고 말합니다.

공통 항목의 배열 설명을 돕기 위해 잠시 IMQA 대시보드를 함께 보겠습니다.

IMQA의 대시보드는 최근 30분 간의 모바일 앱 성능을 실시간으로 모니터링할 수 있고, 주요 지표는 화면 로딩시간, 응답시간, CPU, 메모리 등 자원 사용량이 있습니다.

화면 로딩시간이나 응답시간은 길어질수록 화면이 늦게 뜨고 CPU, 메모리 등 자원 사용량이 많을수록 처리하는 속도가 느려져 서로 연관성이 있는 데이터들이죠. 그래서 저희는 대시보드에 이 데이터들을 시계열 그래프로 나타내고 같은 공간에 배치를 하였습니다. 이 데이터들은 1분마다 갱신되어 거의 실시간으로 변동을 확인할 수 있습니다.

또, 상위 크래시와 네트워크 응답시간을 성능 하위 목록 차트로 만들고 나란히 배치하여 가장 많이 발생한 크래시와 가장 응답시간이 느린 URL을 한눈에 확인할 수 있도록 하였습니다. 이 부분은 저희가 대시보드를 개선할 때도 많이 고민하고 반영하고자 노력한 부분이랍니다.

💡점진적인 깊이 Progressive Depth

원전 산업분야에서 원전 관리를 위해 사용하는 계기판과 도구 등을 배치하는 데에 주로 사용되는 생태 인터페이스 디자인 (ecological interface design)이라는 개념이 있습니다.  이 개념은 상위 레벨의 지표뿐만 아니라 하위 레벨의 지표도 함께 보여주기 때문에 대시보드 배치를 이해하는 데에 도움이 되는데요.

우리는 앞서 RED(Rate, Errors, Duration)와 사용량, 상위 레벨의 지표가 중요하다는 것은 배웠습니다.  그렇다고 그것만이 중요한 것은 아닙니다.  대시보드는 아주아주 작은 것들까지 모니터링을 합니다. 그리고 그것이 가능하려면, 몇 가지 형태의 점진적인 깊이(progressive depth)를 지원해야 합니다.

이 점진적인 깊이를 활용하면 상위 레벨 지표에서 시작해서 최종적으로 사용자들이 원하는 곳으로 갈 수 있습니다. 여기서 다시 한번 Cory Watson은 강조합니다. 이곳에서 사용자가 원하는 것(문제 해결)을 지원하려면 내부 솔루션이든 경쟁사의 솔루션이든 상관없다고 말이죠.

Cory Watson이 강의 전반적으로 강조하는 점은 대시보드는 정확한 목적과 목표를 가지고 디자인되어야 하고 개선해야 한다는 것입니다. 이번 포스팅에서는 개선을 효과적으로 하기 위한 지표와 레이아웃에 대해 다루어보았습니다.

대시보드는 사용자가 문제의 증상을 발견하는 것에 그치는 것이 아닌 더 많은 것으로 연계하여 분석할 수 있도록 지원해야 합니다. Cory Watson은 이것을 대시보드의 고질적인 문제라고 표현하는데요. 대시보드에서 문제가 발생했다고 알려주지만 어떻게 해결해야 하는지는 알려주지 않는다는 것이죠. 그래서 우리는 대시보드에서 문제를 보는 것에서부터 행동으로 옮기는 것까지 가능하게 디자인해야 합니다.

다음 시간에는 훌륭한 대시보드로 개선하기 위해 시각적으로 어떻게 표현하면 좋을에 대해 알아보겠습니다.

이어지는 다음 편도 많이 기대해 주세요. 😊

• 직관적인 대시보드 설계하기 Ⅱ- 시각화

* 기획자에게 인기가 많았던 글도 함께 추천해 드립니다.

• 앱 서비스 장애편 #1 - 화면 로딩 속도