간결함의 미학
이번 변경된 화면 구성은 기존의 항목들과 새로움을 잘 버무렸습니다.
<컴팩트하고 좀 더 쉽고 간편하게!> 새로운 캐치프레이즈 아래 모두의 의견이 담긴 간결한 디자인으로 고안했습니다.
좋은 아이디어를 치열하게 담아내다.
전 직원을 대상으로 브레인스토밍(Brainstorming)과 디자인씽킹(Design thinking) 단계를 거치며 이전에 시행한 적 없었던 아이디어 공모전을 진행 할 정도로, 아이디어를 모으는 데에 주력을 다했습니다. 많은 레퍼런스(reference)들을 함께 보며 차트에 대한 고민도 많이 했던 시간이었습니다.
‘사용자가 무엇을 원하는가, 어떻게 행동하는가’ 는 좋은 디자인으로 가는 가장 중요한 정보가 됩니다. 또, 현장에 나가 직접 고객들을 마주하고 사용하는 엔지니어들과도 제품을 사용할 때 필요한 점, 아쉬웠던 점, 추가되면 좋을 점 등의 의견을 많이 나눴습니다.
이전 버전의 Real-time 화면은 아이템 항목만 다를 뿐, 동일한 차트들의 반복으로 지루함을 유발하고 나열식의 차트로 결과를 사용자가 직접 분석을 해야 했습니다. 빠르게 변화하는 시대적 흐름에서 사용자들은 ‘So What’을 보고 받길 원하며, 직관적으로 내가 관리하는 DB상태를 판단하고 싶어 합니다.
업데이트된 최신 버전은 좀 더 동적이고 명확한 서비스를 제공합니다. 아이템 박스에서 인스턴스의 개수에 따라 차트 넓이가 바뀌고, 값이 채워지는 경험에서 ‘다수 개의 인스턴스를 분석하고 모니터링하는 툴’의 유연한 확장성을 느낄 수 있습니다.
Intergrated Board (CPU+MEM) 차트는 이번에 새롭게 선보인 차트입니다. 개별적인 인스턴스에 해당하는 DB의 상태의 추이와 현재의 상태를 파악하기에 적합합니다. 주요차트 6개를 기본메뉴로 배치하여 필요한 정보들을 선별하여 전달받을 수 있으며, 사용자에 따라 주요차트를 변경하여 사용 가능합니다.
‘셀파’ 새 옷을 입다.
셀파의 브랜드 컬러는 파랑, 초록, 주황(Blue, Green, Orange) 3가지로, 상태를 직관적으로 알려주는 Gauge 차트의 맥(脈)이 이어져있습니다.
컬러를 적용할 때에 서비스를 제공하는 브랜드의 고유 컬러를 함께 생각하면서 베리에이션(variation)하는 시간을 가집니다.
메인컬러(main color)는 ‘셀파’가 서비스를 제공하는 제품의 특성을 고려하여 Blue계열을 사용 하였습니다. 시원한 느낌과 고요하고 냉철함을 자아내는 이미지를 전달합니다.
보조색(secondary color)은 메인컬러(main color)와 유사색으로 안정적이고 조화로운 느낌을 느낄 수 있으며, 강조색(Point color)은 주색의 보색으로 생동감있고 활동적인 느낌으로 강조할 UI에 적절하게 사용합니다.
브랜드 컬러를 염두해두고 전반적인 제품 느낌을 만들어낸다면, 차트의 지표컬러들이나 범례컬러는 차트의 인터렉션(Interaction)과 더불어 제품의 역동적인 느낌을 더해줍니다.
인스턴스의 개수가 많을 수밖에 없는 경우와, 차트 지표들이 많을 때에는 그만큼 색이 늘어나게 되어 의도 하지 않는 색 조합이 될 때도 종종 있습니다만, 최대한 그렇게 되지 않도록 기준을 잡고 색 정의를 하게 됩니다.
Long Running Session Count 와 같은 차트의 경우 사용자에게 의미를 명확하게 전달하고 예측 가능한 방법으로 의도적인 색상을 사용 합니다.
‘셀파’는 2가지의 Mode(Dark,Light)를 제공하고 있습니다. 다크모드(Dark mode)는 배경색을 어둡게 하고 글자를 밝게 한 사용자환경(UI) 디자인입니다. 몇 년 사이 주요 IT기업이 어두운 배경을 자사 서비스에 적용 하면서, 다크모드(Dark mode)가 또 다른 표준으로 자리잡고 있습니다. 이번 V5 업데이트에서는 다크모드(Dark mode)를 표준으로 자리잡게 하여 최신 트렌드를 반영함과 동시에 차트가 좀더 명확하게 눈에 들어오도록 색상 보정 작업도 함께 진행 하였습니다.
마치며
이번 V5 에서 업데이트된 디자인 리뷰였습니다. 호흡이 짧은 IT업계에서 더 가독성 있는 화면으로 다가가기 위해 앞으로도 기민하게 움직이겠습니다.
참고사이트
https://brunch.co.kr/@rightbrain/83
https://material.io/design/color/applying-color-to-ui.html#sheets-and-surfaces
https://spectrum.adobe.com/page/color/#Semantic-colors
https://www.hankyung.com/it/article/2020100923051
