brunch

You can make anything
by writing

C.S.Lewis

by HBsmith Jan 31. 2023

HBsmith 앱콘솔 리디자인 #2

B2B UI/UX 개선

지난 글에 앱콘솔 리디자인 #1 (B2B UI/UX 개선)에서 리서치부터 UI 구조 개선을 위한 아이디어 구상 단계에 대해 이야기를 해보았는데요. 이번 글에서는 리서치와 문제 정의, 해결 방안을 모색한 뒤의 디자인 진행의 과정을 적어보려 합니다.

테마와 컬러 선정

1. Primary Color

서비스의 Primary Color는 브랜드 대표 색상을 반영하는 경우가 많습니다. B2C라면 좀 더 고려했을 사항이지만 업무 시스템이라는 특성과 장애에 대한 표시…등과 브랜드 색상의 충돌이 고민되어 이 부분은 제외했습니다. 서비스에 맞춘 Primary Color 선정을 위해 회사의 비전과 서비스의 특장점을 적은 뒤 연상되는 단어들을 나열합니다. 그중 연관성이 높거나 제공해야 할 이미지에 가까운 단어들을 추려 선정 후 키워드 기반으로 색상의 영역을 확인해보았습니다. (형용사/단색 배색 표 참조) 서비스의 성격이 장애에 대한 사전 알림을 통해 안정적인 운영을 모토로 하며, 아직 스타트업인 만큼 신뢰감을 형성하는 톤을 고려했습니다. 또한 주요 기능들을 다루는 내부 사용자 그룹이 익숙한 google, atlassian과 같은 시스템의 색상과 유사하게 사용해주는 것이 안정적이라는 판단으로 컬러를 선정했습니다.

디자인 키워드 기반의 컬러 선정

2. Theme Color

업무 시스템의 경우는 많은 정보를 한 번에 보기 때문에 가독성이 높은 화이트 테마를 권장하는 편입니다. 다만 대시보드를 보는 고객사의 경우 관제실 벽면에 띄우는 경우도 있어 대시보드는 다크 테마로 제공했었습니다. 이 부분을 통일하기 위해 내부 사용자 그룹의 설문을 진행했습니다. 다크 테마의 선호가 약 10% 높았으며, 다크 테마를 선행 제공 후 라이트 테마에 대한 추가를 고려하는 방안을 협의했습니다.

B2B UI의 경우는 보수적 입장이 큰 편이라 생각해 라이트 테마가 선호도가 높으리라 생각했는데, 최근 다크 테마까지 제공하는 서비스의 증가와 재택근무가 기반인 HBsmith의 근무 형태도 어느 정도 사용자 그룹의 의사 결정에 영향을 주지 않았을까 하는 생각이 듭니다. 지금 이 글을 쓰고 있는 제 책상도 테이블 램프만 켜놓고 있네요 :) (다크 테마의 경우 사무실처럼 특정 조도 이상의 조명이 지속해서 켜져 있는 환경에서는 가독성 이슈가 더 부각되는 경향이 있습니다.)

라이브러리, 컴포넌트 작업

원래 있던 디자인에서 디자인 시스템이나 조직 관점의 컴포넌트 규칙을 만드는 정리를 하는 것이라면 UI를 펼쳐 분석하고, 포함된 요소와 패턴을 구분하여 정리하면 되겠지만, 앱콘솔의 경우 UI 개선과 디자인 프로세스 정립 두 가지를 동시에 해결해야 했습니다.

이 부분에 대해 어떻게 진행할지 고민하다 우선 컴포넌트 없이 컨셉 UI 안을 먼저 만들었습니다. 이미 라이브 된 서비스의 요소들에 대해 정보와 개선 방향에 대한 계획은 완료되어 그것을 기반으로 주요 페이지들의 컨셉 UI를 선정한 컬러화컬러와 테마 기반으로 디자인했습니다. 디자인이 완료된 화면으로 내부 이해관계자들과의 커뮤니케이션을 통해 빠르게 피드백을 주고받은 뒤 완성 정도에 대한 범위를 확정했습니다. 이렇게 확정된 페이지들을 펼쳐놓고, 컴포넌트 제작을 위한 패턴을 분석했습니다.

앱콘솔 주요 화면의 Concept UI Design

신규 개선을 위한 디자인의 각 부분에서 공통화할 수 있는 범위는 페이지 타이틀 영역, 검색, 컨트롤 영역, 메시지를 제공하는 모델 같은 부분이었습니다. 전체 flow를 고려한 상태가 아니기 때문에 작업을 마무리하기 전까지는 컴포넌트는 최소 단위만 작업해두고, 보완해 나가는 방식으로 진행했습니다. 컴포넌트 제작 중 최소 단위인 인풋, 버튼…등 간단하게 만들 수 있는 것들은 라이트 테마의 확장성을 고려해 2가지 버전 모두 제작해 두었습니다.
Figma Variant 기능이 막 업데이트 되었을 때라 많은 도움이 되었네요 :)

디자인을 기반으로 공통화 가능한 범위의 컴포넌트 작업 선행

이렇게 등록된 컴포넌트를 라이브러리로 만들고, 디자인 파일에 역으로 대입시키며, 파일을 리터치 하는 과정을 한 번 더 거쳤습니다. 전체 flow 상에 빠진 부분을 체크하며, 시스템 전반의 디자인을 완성해 나가는 과정을 통해 2.0 리 디자인을 진행했습니다.

아쉬운 부분도 많지만…

앱콘솔을 새롭게 개편해 나가던 작업이 이루어지는 시기에도 신규 고객사는 계속 유입되고 있었으며, 라이브 중인 서비스에 대해 A-Z까지 새로 갈아 끼워야 하는 부분은 운영과 개발 상황에서 부담이 큰일이었습니다. 이에 따라 UI 작업의 코드화 관리 부분까지 구성하여 가져가는 부분은 프로젝트가 너무 무겁고 길어지는 점에 있어서 실현이 힘들다는 현실에 부딪혔습니다. 디자인과 완성도 높은 구축을 위해 아쉬운 부분이 큰 상황이지만, 호흡을 짧게 가져가기 위한 판단이었다 생각합니다. 너무 많은 것들을 한 번에 할 수 없었기에 우선 개편을 마무리한 뒤 효율적인 작업방식에 대한 부분은 앞으로 고민해 나가려고 합니다.

B2C 관련된 경험은 많이 공유되고 찾아볼 수 있는데, 아무래도 B2B 관련된 부분들은 B2C 대비 작업자가 적거나 사업의 특성상 공개가 힘든 경우가 많아 실제 작업기를 찾아보기가 힘든 것 같습니다. B2B에도 UIUX은 복잡한 데이터와 프로세스를 위해 중요한 영역이라고 생각합니다.
B2B 제품군의 UIUX를 작업하는 입장에서 이런 고민과 과정의 경험을 공유하고자 하는 생각에 이번 개편과 관련된 글을 적어보았습니다. B2B 시장이 커지고 있는데 관련해서 많은 분들의 경험을 볼 수 있다면 좋겠습니다.

또한 새로운 모습으로 더 나아질 앱콘솔 2.0으로 고객의 서비스 운영에 더 좋은 경험과 정보를 제공할 수 있기를 바라며 글을 마칩니다.

keyword