관리자를 위한 차트 디자인 | 프로덕트 디자이너 Ashanti

클라썸 플랫폼 안에서 사용자들의 활동 내역, 요금 정보 등 다양한 숫자를 한눈에 볼 수 있는 것, 바로 차트죠. 최근 클라썸을 사용하는 관리자분들이 더 많은 정보를 직관적으로 파악할 수 있도록 차트 디자인을 개선했어요.

관리자를 위한 차트를 디자인하며 어떤 점을 고려했는지, 참여자를 위한 차트를 디자인할 때와는 어떤 점이 달랐는지 클라썸의 화면을 만들어 나가는 Product Designer, Ashanti가 디자인 개선 이야기를 들려드립니다.

안녕하세요. 클라썸의 Product Designer인 Ashanti예요. 클라썸에서 관리자를 위한 차트를 디자인에 대해 새로운 차트 디자인이 왜 필요했는지, 그 과정에서 얻은 인사이트는 무엇이었는지 공유해볼게요.

관리자를 위한 차트 디자인, 왜 시작했을까요?

클라썸에는 관리자가 기관 내 환경을 설정하는 관리자 전용 페이지인 관리 콘솔이 있어요. 관리자는 이곳에서 기관과 공간, 구성원 현황을 살피고, 이용 중인 요금제 정보를 확인하며, 보안을 위한 설정을 하는 등 다양한 관리 업무를 할 수 있습니다.

이때 구성원 수나 콘텐츠 재생 시간처럼 일정한 기간 산출된 일련의 수치를 차트로 보여준다면 관리자에게 더욱 직관적으로 정보를 제공할 수 있어요. 기존에도 클라썸 관리자가 보는 차트 컴포넌트가 있었지만, 개선해보면 좋을 두 가지 포인트가 있었어요.

• 하나, 컴포넌트의 확장성이 떨어져 대응할 수 있는 케이스가 제한적이었어요. 기존의 차트 컴포넌트는 관리자가 구성원들의 댓글, 반응과 같은 활동 내용을 모아보는 통계 화면에서 사용되었어요. 이 화면에서는 구성원의 행동 데이터 수치를 그대로 보여주기만 하면 되기 때문에, 이상치를 표시하거나 더 많은 메시지를 전달하기에 어려움이 있었어요.

• 둘, 기존 차트는 디자인 시스템 개편 전에 사용하던 컴포넌트로 만들어졌어요. 때문에 그대로 적용할 경우 화면마다 색상이나 모양이 제각각인 컴포넌트가 적용되어 통일성이 떨어진다는 우려가 있었어요.

두 가지 이유로, 확장성이 높아 앞으로도 다양하게 사용할 수 있으면서 개편된 디자인 시스템에 부합하는 차트 컴포넌트를 새로 디자인하기로 했습니다.

차트 디자인은 크게 아래의 세 단계를 거쳤습니다. 한 단계씩 살펴볼까요?

1단계. 차트를 보는 사용자 이해하기

가장 먼저 한 일은 사용자(관리자)가 차트를 보는 상황을 살펴보며 사용자의 니즈를 파악하는 것입니다.

요금 정보와 관련된 차트를 누가 볼까요? 대체로 학교에서는 선생님, 교수님, 교직원, 기업에서는 교육 담당자와 같이 클라썸을 관리하는 분들이 보세요. 사용자를 이해하기 위해 고객을 직접 만나는 빈도가 높은 비즈니스 조직의 동료들과 많은 대화를 나누었어요.

저는 주로 영업이나 고객 성공을 담당하는 동료들과 자주 이야기를 나누는데, 고객들의 문의 사항과 Pain Point를 듣다 보면 훨씬 구체적인 상황을 그려볼 수 있기 때문이에요. 동료와의 대화를 통해 관리자가 관리 콘솔에서 보는 차트는 의사결정의 근거로 활용될 때가 많다는 사실을 알게 되었어요.

특히 요금 정보에 대한 차트는 현 상황에 대해 정확하게 알려주는 것은 물론이고, 사용자의 기대를 벗어난 상황일 경우 빠르게 인지시키는 것이 중요하다는 것을 이해할 수 있었어요. 예를 들어, 계약된 내용을 초과해 추가 요금이 부과되는 경우라면 관리자가 상태를 인지하고 바로 조치할 수 있어야 해요.

클라썸에서는 디자이너들이 다른 직군의 동료들과 의견을 나누는 모습을 자주 볼 수 있어요. 특히 고객 지향적 의사결정을 위해 인터뷰나 디자인 잼을 통해 고객과 가장 가까이에 있는 동료들의 다양한 의견을 들으려 노력한답니다.

2단계. 차트 디자인 원칙 정의하기

차트를 보는 사용자를 이해했다면 이제 무엇을 중점적으로 디자인할지 원칙을 정할 차례예요.

이 과정에서는 제품의 특성이 많이 반영되었어요. 클라썸 프로덕트가 재미있는 이유 중 하나는 다루는 기능에 따라 우선 고려하는 사용자가 달라진다는 점입니다. 클라썸 사용자들은 역할에 따라 크게 관리자와 참여자로 나눌 수 있어요. 관리자는 기관을 관리하거나 교육을 운영하는 사람, 참여자는 학습에 참여하는 사람이에요. 역할마다 특성이나 주요 행동이 다르므로 똑같은 ‘차트’를 만들더라도, 디자인 목표가 달라져요.

관리자를 주 사용자로 두는 경우, 차트 데이터를 바탕으로 각 참여자와 공간에 대한 관리가 이루어지기 때문에 차트를 보는 사용자들의 목적이 뚜렷하고, 적극적인 편이에요. 그래서 정확한 데이터를 통해 현재 상황을 한눈에 인지할 수 있도록 해야 해요. 이를 위해 심미성보다는 데이터의 이상치에 대한 시인성을 높여 상황을 해결할 수 있는 행동을 유도하는 것에 집중했어요.

반면, 참여자를 주 사용자로 두는 경우, 차트 데이터를 통해 본인의 활동 현황을 파악해요. 모든 구성원의 활동 추이를 주기적으로 확인하는 관리자와 비교해 본다면 차트에 대한 필요성을 덜 느끼고, 수동적인 편이에요. 참여자에게는 심미성을 바탕으로 차트에 대한 호감도를 높이는 시도를 해볼 수 있어요.

클라썸 프로덕트의 관리자와 참여자의 상대적 특징을 정리해봤어요.

3단계. 차트 UI 디자인하기

이제 차트의 종류부터 모양, 색상, 범례, x축/y축, 보조선 등 차트의 구성 요소들을 결정하고, UI를 디자인해요. 차트는 다른 디자인 컴포넌트에 비해 구현에 제약이 많은 편이에요. 개발자가 라이브러리를 활용할지, 직접 구현할지에 따라 커스텀 영역이 다르기 때문이에요. 또 화려한 시각적 효과에는 예상보다 개발 리소스가 많이 들어갈 수 있어요. 그래서 저는 아래 두 가지 방법을 추천해요.

1. 차트가 많이 사용되는 서비스의 디자인 시스템을 레퍼런스 삼아 살펴보고

2. 차트의 구현 가능성에 대해 실제 개발하는 팀원과 수시로 대화를 나눠요.

다양한 형태의 차트를 접해보면서 우리 프로덕트에 적합한 차트 형태의 레퍼런스를 취합하고 이를 개발하는 동료와 함께 보면서 구현 방향성에 관해 이야기하는 시간을 가졌어요. 라이브러리를 활용할 것인지, 어느 정도로 커스텀할 수 있을지 미리 확인하면 좋아요.

개발자와 구현 가능성을 확인했으면 이제는 실제로 차트를 디자인할 차례예요. 차트는 종류와 형태에 따라 그 자체로 정보를 전달하기도 해요. 그래서 차트 UI를 디자인할 때는 차트의 종류별 특징과 차트를 구성하는 요소도 고려해야 해요. 지금부터 하나씩 소개해 볼게요.

1) 차트의 종류

차트는 종류에 따라 서로 다른 사용성과 특징을 가집니다. 이를 고려해 데이터의 내용과 정보를 가장 잘 나타낼 수 있는 차트 종류를 선택했어요.

막대 차트나 선 차트는 주로 단일 항목이나 여러 항목의 데이터를 비교할 때 사용해요. 그중에서도 세로 막대 차트는 시간의 경과에 따라 데이터의 변화를 보여주기에 적절하고, 가로 막대 차트는 항목의 레이블이 길거나, 항목의 개수가 가변적인 경우에 유용해요. 선 차트는 특정 기간의 테이터 추세를 보여주기에 적절해요.

파이 차트와 도넛 차트는 비슷하게 생겼지만, 미세한 사용성의 차이가 있습니다. 파이 차트는 원의 중심까지 색상이 차 있어 너비 비교에 유리하기 때문에 항목이 5개 이상인 경우에 유용해요. 반면 도넛 차트는 카테고리가 2~4개인 경우나 차트 중간에 텍스트 요소가 필요할 때 사용해요.

클라썸의 관리 페이지에서는 구성원 수나 콘텐츠 재생 시간을 보여주는 차트에서는 관리자들이 일간 또는 월간 추세를 확인하는 행동이 중요하므로 선 차트를 사용했어요. 그리고 도넛 차트를 사용해 계약 수치 대비 사용된 수치의 비율을 가시적으로 나타내고 차트 중간에 정확한 수치를 기재해 현재 상황을 빠르고 정확하게 파악하도록 했어요.

2) 차트의 구성요소

(1) 모양

차트의 큰 특징 중 하나는 시각적인 모습 그대로 데이터로서의 의미를 지닌다는 점이에요. 예를 들어 막대의 높이나 면적도 차트의 의미를 해석하는 데 영향을 줄 수 있습니다.
그래서 막대의 두께나 Radius 값 같은 세부 요소도 신경 썼어요. 차트의 심미성보다는 정확도가 중요시되는 B2B 프로덕트의 특성상 R값을 아주 작게 주거나 주지 않기로 했습니다. 또한, 그림자 같은 효과는 정보를 담고 있지 않기 때문에 사용하지 않기로 했습니다.

(2) 배치

항목을 배치할 때도 사용자의 시선을 고려했어요. 주목도가 높은 곳에 중요도가 높은 항목을 배치하는 거죠. 파이 차트의 경우, 시계처럼 12시부터 시계 방향으로 읽을 확률이 높아요.
그러므로 가장 넓은 항목을 강조하기 위해서는 1번과 같이 12시를 기준으로 면적이 가장 넓은 항목을 오른쪽에 배치했습니다. 그리고 2번과 같이 12시를 기준으로 왼쪽에 시계 반대 방향으로 면적이 넓은 순서대로 배치하면 가장 중요도가 낮은 항목이 제일 주목도가 낮은 아래쪽에 위치하게 돼요.

(3) 컬러

차트의 데이터는 시간의 흐름에 따라 변화하는 특성이 있기 때문에 최소한의 컬러 색상을 사용했습니다. 이때 색상들이 고유하게 갖고 있는 느낌과 분위기를 고려했어요.

검은색은 정적이고, 신뢰감을 주기 때문에 텍스트나 아이콘에서 많이 사용해요. 반면, 검정 이외의 색상은 동적인 느낌을 주기 때문에 상황에 따른 가변적인 상태를 보여주기에 적절해요. 파란색은 보수적인 분위기, 밝은 색상은 명랑한 분위기를 나타내는 것처럼요. 하지만 빨간색이나 붉은색 계열은 손실이나 비상 상황을 강하게 연상시키는 색상이니 사용자에게 긴장감을 주고 적극적인 행동을 유도해야 할 때 사용해야 효과적이에요. 저는 사용자들의 기대를 벗어난 상황일 경우에 문제 상황을 빠르게 인지하도록 빨간색을 사용했어요.

또한 도넛형 차트의 경우, 다양한 범례 색상이 사용되는 케이스를 대비해서 범용 차트 컬러를 10가지 정도 뽑아 놓는다면 좀 더 확장성 있는 디자인을 할 수 있겠죠?

(4) 툴팁

툴팁을 활용하면 차트 읽기가 훨씬 쉬워집니다. 사용자가 y축까지 시선을 옮길 필요 없이 구체적인 수치를 바로 읽을 수 있기 때문이에요. 이때 그래프의 확장성을 고려해 항목이 많아지는 경우를 대비하여 각 항목의 색상까지 함께 보여주도록 구성했습니다.

차트 디자인 컴포넌트 과정을 돌아보며…

이렇게 완성된 새로운 차트 디자인 컴포넌트는 현재 관리 콘솔에 적용되어 관리자에게 정보를 제공하고 있습니다. 또한 주요 차트 3종(막대, 선, 도넛)과 색상의 가이드를 만들어서 화면을 디자인할 때 활발히 사용하고 있어요. 지금도 볼 때마다 뿌듯해요!

그렇다면 기존의 차트 디자인 컴포넌트에 비해 어떤 부분이 개선되었을까요?

하나, 컴포넌트의 확장성이 높아졌어요.

보여주고자 하는 데이터의 특성에 맞게 차트의 구성요소를 활용할 수 있게 되었어요. 이상치를 표시하여 사용자의 행동을 유도할 수도 있고, 툴팁을 활용해 구체적인 정보를 확인할 수도 있어요.

둘, 최신 버전의 디자인 시스템을 적용하여 다른 화면과 통일성을 높였어요.

사용자가 프로덕트를 사용하며 겪을 수 있는 혼란스러움을 최소화하고, 클라썸 어디서든 동일한 디자인 경험을 할 수 있게 되었어요.

마지막으로 이번 차트 디자인 과정을 통해 배운 것은 아래와 같아요.

• B2B에서 고객 접점의 인사이트를 얻기 위해 고객과 직접 만나는 동료와의 활발한 커뮤니케이션이 얼마나 중요한지 다시금 느꼈어요.

• 사용자의 특성을 이해하고, 이를 제품의 디자인 원칙으로 녹여내는 과정의 중요성을 느꼈어요.

• 차트 컴포넌트에 대한 이해도를 높였고, 특히 확장성을 위해 고려할 요소를 배웠어요.

Ashanti의 관리자를 위한 차트 디자인 이야기, 재미있게 읽으셨나요?

다음 아티클에서는 클라썸의 프로덕트 디자이너 Dana가 User Testing 이야기를 들려드릴 예정이에요. 클라썸의 User Testing이 어떻게 진행되는지 궁금하시다면 다음 아티클을 기대해 주세요!

💌 클라썸은 사용성과 심미성을 모두 고려해 사용자 경험을 설계하는 프로덕트 디자이너 동료를 찾고 있어요. 높은 기준을 추구하는 동료들과 함께 성장해 나갈 분은 아래 공고를 확인해 주세요.

프로덕트(UX/UI) 디자이너 지원하기