kb — Kukhwan Park

팀에서 유일한 디자이너로서 사용자의 문제를 파악하고 제품을 통해 해결하기 위한 노력을 기울였습니다. 또한 머신러닝 엔지니어와 협력하여 사용자에게 어떤 정보를 어떤 형태로 전달하면 좋을지 논의했습니다. 정보를 취합하여 프로토타입을 제작했고 이를 바탕으로 예비 사용자, 머신러닝 엔지니어의 의견을 취합하여 제품을 개선시키는 과정을 반복했습니다. 최종적으로 최적의 정보 전달 방식을 고려한 제품을 제작하였습니다.

Timeline
20년4월 ~ 20년 10월
Team Size
8명
Target User
자산관리 담당자
My Role
리서치
인포메이션 아키텍처
유저 익스피리언스
비주얼 디자인

Design Challenges

복잡한 엑셀 파일로 업무를 진행하던 사용자를 위해 다양한 데이터를 웹 서비스로 익숙하게 다룰 수 있도록 제공해야 했습니다. 또한 작은 화면안에 다양한 정보를 효율적으로 담아내야했습니다. 뿐만아니라 인사이트를 주는 데이터는 정보 시각화를 통해 효과적으로 강조해야 했습니다.
이 제품또한 머신러닝 기술에 기반하는 만큼 머신러닝에 익숙하지 않은 사용자에게 머신러닝을 도입함으로써 얻는 이득이 무엇인지 제품으로써 설득해야 했습니다. 이를 위해 어떤 정보를 어떻게 보여줘야 효과적일지를 고민했습니다.

So What’s the Problem?

여신금융업(캐피탈)에서 차량을 빌려주고 수익을 얻는 자동차 리스 사업은 총 시장 규모가 13조가 넘는 큰 시장입니다. 차량의 미래 가치를 예측하여 차량 이용료 및 수익을 산정하는 것이 사업의 핵심이나 그 정확도가 떨어지는 문제가 있습니다. 예측 방식이 기존 중고차 사업자들의 예측값의 평균을 산출하는 단순한 방식이기 때문입니다. 저희는 차량의 잔존가치를 보다 정확히 예측할 수 있는 머신러닝 기술을 도입할 것을 완성된 제품의 형태로 제안하고자 했습니다.

Identifying Users

크게 두 가지 유형의 사용자가 존재합니다. 잔존가치 산정 등 대부분의 실무를 담당하는 자산관리 담당자와 사업의 목표 설정 및 현황을 파악하는 관리자가 있습니다.

Primary Users

기업의 자산관리 담당자로서 자산의 현황 파악, 운영, 계획을 담당하는 실무자입니다. 다양한 데이터를 엑셀을 통해 취합, 관리합니다. 축적된 데이터를 바탕으로 자산 계획을 수립합니다. 주로 제품을 사용하게될 사용자입니다.

Goal: 효율적인 기업 자산관리, KPI에 맞게 운영
Needs: 자산관리 효율화
Must: KPI 달성

Secondary Users

기업의 관리자로서 자산관리 현황을 주기적으로 파악합니다. 세부적인 영역으로 나눈 KPI를 관리합니다. 실무자가 전달하는 보고를 취합하여 타 부서와 소통합니다.

Goal: 효율적인 기업 자산관리, KPI에 맞게 운영

Needs: 자산관리 효율화

Must: KPI 달성

Market Opportunites

새로운 시장인만큼 보다 상세한 리서치를 통해 어떤 기회가 있고 어떤 위험이 있는지 구체화했습니다. 빠르게 변화하는 시장의 특징을 놓치지 않기 위해 노력했습니다.

Legacy Software: 기존의 서버 모니터링 서비스에 머신러닝 모니터링 서비스를 Add-on으로 추가한 형태가 대부분입니다. 머신러닝 모델 관리에 최적화되어있지 않고 머신러닝 엔지니어에게 불친절한 환경입니다.
Value Leakage: 머신러닝 모델 도입이 시작되고 있으나 아직 초보적인 수준이며 모델의 배포도 1회성에 그치고 있습니다. 지속적으로 변화하는 데이터에 맞추어 머신러닝 모델 또한 지속적으로 관리해야 정확한 인사이트를 도출할 수 있습니다.

High-Level Goals

다양한 리서치를 종합해 세개의 주요 목표를 정할 수 있었습니다. 이 목표는 제품 설계 및 개발에 있어 최우선 목표로 삼았습니다.

쉬운 모델 관리: 기존 모니터링 서비스와 유사한 익숙한 인터페이스, 비 전문가도 사용 가능
빠른 이상 대응: 이상, 성능 저하 발생시 빠른 알림
정확한 모델 상태 분석: 머신러닝 엔지니어에게 도움이 되는 정보 제공

Interactions

머신러닝 엔지니어는 수집된 데이터를 분석하여 머신러닝 모델을 만들고 모델을 개선하여 최종 배포합니다. 배포된 모델은 서버에 올라가 여러 인사이트를 전달합니다. 하지만 모델을 관리하지 않으면 모델의 성능은 저하될 수 밖에 없습니다. 최신의 데이터 환경에 맞는 업데이트가 지속적으로 필요합니다. 모델관리 파이프라인이 체계적으로 정착하면 모델 관리 담당자와 머신러닝 엔지니어는

모델의 실시간 상태를 한 눈에 확인할 수 있습니다.
모델에 이상 발생시 즉각 알림을 받을 수 있습니다.
모델 이상 발생 내역을 확인할 수 있습니다.
모델의 성능을 추적할 수 있습니다.

Execution

이상탐지를 목표로하는 모니터링 서비스인 만큼 명확한 정보전달이 무엇보다 중요했습니다. 이를 위해 시각적으로 체계적인 구분이 가능하도록 구성하기 위해 노력했습니다. 다른 도메인에서 모니터링 서비스를 어떻게 구성하는지 또한 탐구했습니다.

Color Theme

명확한 정보 전달을 위해 최소한의 색상만 사용하려 노력했습니다. 뿐만아니라 신뢰할 수 있고 전문적이어 보이는 인상을 주기위해 노력했습니다. 기본적으로 데이터는 검정으로 정상은 teal로 경고는 red로 간결하게 구분했습니다.

UI Framework

모든 사용자는 데스크탑 환경 심지어는 대형 디스플레이 환경에 모니터링 서비스를 띄워둡니다. 역시 SaaS로서 데스크탑 브라우저 환경에 맞는 프레임워크를 사용했습니다.

Anatomy of UI

미리 작성한 User Flow에 따라 Low-Fidelity 제품을 제작했습니다. 핵심은 머신러닝의 흐름(Preprocessing, Modeling, Deploying)을 직관적으로 따를 수 있으면서 언제든지 원하는 위치로 이동할 수 있는 유연함을 갖추는 것 이었습니다. 최적의 인터페이스 요소를 탐구하여 배치하고 실제 작동하도록 만들어 다양한 상황에서의 흐름을 직접 따라가보며 수정하는 작업을 반복했습니다. 팀원들도 Low-Fidelity 제품을 테스트하며 문제가 없는지 검증했고 검증이 끝난 후 사용자용 수준의 인터페이스 제작을 진행했습니다.

Global Navigation + Titled Section제품 인터페이스의 핵심이 되는 위치입니다. 머신러닝의 흐름을 직관적으로 따를 수 있으면서 언제든지 원하는 위치로 이동할 수 있는 유연함을 갖춘 Navigation을 배치했습니다. 좌에서 우로 머신러닝 과정 순서에 따라 버튼을 배치해 진행에 따른 Progress를 직관적으로 확인할 수 있도록 했습니다. 또한 언제나 최상단에 위치하는 Navigation 덕에 각 과정에서 원하는 과정으로 손쉽게 이동할 수 있도록 했습니다.

과정이 비선형적이고 전문 용어가 많이 등장하는 제품의 특성상 Titled Section을 통해 사용자의 위치를 명확히 알려주는 것이 중요하다 판단하였습니다. 아이콘과 가장 큰 텍스트로 사용자의 위치를 명확하게 알림과 동시에 Breadcrumbs를 배치하여 각 메뉴 내부에서의 위치 또한 확인하고 이동할 수 있도록 했습니다.

Card View카드를 사용하면 매장 진열대를 둘러보듯 콘텐츠를 탐색할 수 있습니다. 카드는 빠르게 스캔할 수 있고 포함된 정보의 개요를 쉽게 파악할 수 있습니다. 또한 유연성이 뛰어나 반응형 디자인에 적합합니다. 콘텐츠는 모든 화면에 맞게 재정렬할 수 있어 시각적 언어를 구현하고 다양한 디바이스 유형에서 경험을 통합할 수 있습니다.

DAG (Directred Acyclic Graph)‘쉽고 직관적인’이라는 제품의 키워드를 담은 핵심 인터페이스입니다. 코드라인 인터페이스를 도식화하여 인터페이스로 풀어낸 것으로 사용자는 데이터, 오퍼레이터, 알고리즘 등 추상적인 개념을 직관적인 시각 요소로 확인하며 편집할 수 있습니다. 각 요소를 드래그 앤 드롭하여 이동할 수 있고 노드를 통해 연결하며 유기적인 관계를 설정할 수 있습니다. 노드의 연결 후에는 애니메이션과 함께 결과물을 같은 방식으로 제시하여 추가 가공을 할 수 있도록 하였습니다.

Data Visualization ‘쉽고 직관적인’이라는 제품의 키워드를 담은 핵심 인터페이스입니다. 코드라인 인터페이스를 도식화하여 인터페이스로 풀어낸 것으로 사용자는 데이터, 오퍼레이터, 알고리즘 등 추상적인 개념을 직관적인 시각 요소로 확인하며 편집할 수 있습니다. 각 요소를 드래그 앤 드롭하여 이동할 수 있고 노드를 통해 연결하며 유기적인 관계를 설정할 수 있습니다. 노드의 연결 후에는 애니메이션과 함께 결과물을 같은 방식으로 제시하여 추가 가공을 할 수 있도록 하였습니다.

Outcomes

저희가 연구하고 가정했던 문제는 실제로 많은 기업에서 발생하고 있었습니다. 제품은 다양한 분야의 기업에서 다양한 문제를 해결하는데 사용되었습니다. 특정 제품의 판매 수요를 예측하거나 서비스 매칭 시간을 단축시키는 등 큰 스케일의 문제를 해결하는데 저희 제품이 역할을 할 수 있었습니다. 물론 문제 해결에 머신러닝이라는 기술이 핵심에 있었지만 그 문제를 해결하는 과정에서 제품의 역할은 컸습니다. 아직 머신러닝에 익숙하지 않은 이해관계자와 의사결정권자의 문제해결, 과정의 이해, 결과의 이해에 있어 시각적으로 구성된 저희 제품은 많은 도움을 줄 수 있었습니다.

어려운 문제를 간결하게 해결해주는 제품은 이 세상에 많습니다. 하지만 이러한 스케일과 복잡도를 가진 제품은 그렇게 많지 않습니다. 더구나 기업을 대상으로 하는 제품, 데스크탑 화면에서 작동하는 제품의 디자인 사례는 많지 않습니다. 애자일하게 움직이는 작은 팀 덕분에 다양한 문제를 빠르게 해결하고 제품으로 구현할 수 있었습니다.