About

이 프로젝트는 머신러닝에 익숙하지 않은 사용자에게 보다 쉬운 머신러닝 실험 환경을 제공하는 B2B SaaS(Software as a Service)입니다. 복잡한 코드 기반 데이터 실험 환경을 직관적인 GUI로 제공합니다.

My Contribution

팀에서 유일한 디자이너로서 기획자 및 머신러닝 엔지니어, 개발자와 긴밀히 협력했습니다. 머신러닝 엔지니어와 협력하여 복잡한 기존 머신러닝 환경을 파악하고 이를 효과적으로 개선하기 위한 방안을 기획자와 함께 설계했습니다.

이를 바탕으로 프로토타입을 제작하고 머신러닝 엔지니어의 피드백을 수집했습니다. 최종적으로 제품의 GUI를 제작하고 제품의 홍보를 위한 웹사이트를 구축했습니다. 초기 버전 배포 후 로드맵에 따라 제품 기능 확장에 따른 GUI를 제작했습니다.

Timeline
17년 05월 ~ 19년 8월
Team Size
8명
Target User
데이터 전문가
My Role
리서치
인포메이션 아키텍처
유저 익스피리언스
비주얼 디자인

Design Challenges

시장에 머신러닝이 보편화 되지 않은 시점이었기에 많은 가정을 가지고 제품 설계에 임해야 했습니다. ‘머신러닝에 익숙하지 않은 사람들이 머신러닝을 시도하는 상황’을 가정했지만 실제로 이러한 시도 및 어려움이 있는지 확신할 수 없었습니다. 시장을 다방면으로 조사하여 머신러닝에 대해 전혀 모르는 비전문가와 머신러닝을 사업에 적용중인 데이터 사이언티스트, 두 개의 주요 사용자 층을 확인할 수 있었습니다.

복잡한 코드 기반 머신러닝 환경을 직관적인 GUI 환경으로 옮기는 과정은 가장 큰 도전이었습니다. 먼저 머신러닝 과정이 어떤 구조인지 이해하고 이를 도식화한 후 GUI로 옮기는 과정을 거쳤습니다. 코드라인 인터페이스를 그래픽 유저 인터페이스로 옮기는 과정으로, 가장 적합한 인터페이스를 탐구하고 적용하였습니다. 유사한 사례가 드물어 원점에서 인터페이스의 개발 원리를 살피고 기능을 구현하는데 가장 적합하다고 판단한 인터페이스를 적용했습니다. 마지막으로 머신러닝 과정과 결과에서 표현이 필요한 다양한 데이터 지표를 가장 적합한 방식으로 시각화하였습니다.

So What’s the Problem?

많은 기업들이 다양하고 방대한 양의 데이터를 축적중입니다. 데이터를 축적, 관리하는 인력을 두기도 합니다. 많은 시간과 비용을 들여 데이터를 축적하는 이유는 축적된 데이터를 분석하여 비즈니스 인사이트를 얻기 위함일 것입니다.

하지만 ‘효과적으로 데이터를 분석’하는 기업은 많지 않습니다. 과학적이고 효율적인 데이터 분석을 위해서 머신러닝은 필수 조건이나 머신러닝의 진입 장벽은 높습니다. 데이터 전처리, 모델 학습, 모델 평가, 모델 배포로 이어지는 머신러닝 파이프라인은 일반적인 데이터 관리자에게 너무나 어려운 과정입니다. 머신러닝을 위해서는 데이터 사이언스와 컴퓨터 사이언스에 대한 지식, 코드라인 인터페이스에 대한 익숙함이 모두 필요하지만 이를 모두 갖춘 인력은 흔치 않습니다.

Identifying Users

시장 리서치와 예비 사용자 인터뷰를 통해 사용자를 두 개의 분류로 나눌 수 있었습니다. 각 사용자 분류는 머신러닝에 대한 전문성, CLI 인터페이스에 대한 친숙도를 기준으로 진행했습니다. 사용자를 분류한 후 각 사용자에 대한 정의를 구체화하였습니다.

Primary Users

기업의 데이터 담당자로서 전통적인 통계학, 수학 관련 배경을 가지고 있거나 관련 전공이 아닌 사용자 층입니다. 데이터 분석가, 데이터 사이언티스트, 데이터 엔지니어 등 다양한 직책명을 가지고 있습니다. 공통적으로 코드라인 인터페이스에 익숙하지 않습니다. 기업의 데이터를 축적 및 분석하고 관련 부서에 인사이트를 전달하는 것을 목표로 합니다.

Goal: 기업의 데이터를 분석하여 관련 부서에 KPI 및 인사이트를 전달하는 것
Needs: 기업의 데이터 취합, 분석 과정의 과학화, 효율화
Must: 데이터의 보안 및 정확도

Secondary Users

머신러닝 엔지니어로서 Primary Users 보다 머신러닝에 대한 이해가 높고 코드라인 인터페이스 사용에 친숙합니다. 컴퓨터 사이언스 또는 데이터 사이언스 배경을 가지고 전문적인 머신러닝 업무를 수행합니다. 업무 수행에 있어 큰 문제점은 없지만 Primary Users에게 머신러닝 교육을 진행하는데 어려움을 가지고 있습니다.

Goal: 비 전문가에게 효율적으로 머신러닝 교육
Needs: 쉽고 직관적인 머신러닝 교육 툴
Must: 데이터의 보안 및 정확도

Market Oppertunites

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

Legacy Software: 머신러닝 과정을 보다 쉽게 만들어주는 소프트웨어가 소수 있으나 머신러닝 전문가, CLI 환경에 익숙한 사용자가 사용할 수 있는 수준, 초심자가 사용하기 어려운 환경
Value Leakage: 머신러닝을 통해 데이터 분석의 효율화, 보다 과학적인 인사이트 도출을 통해 비즈니스 기회를 창출할 수 있으나 도입 자체에 어려움을 겪어 시도조차 못하고 있음
Rising Competition: 머신러닝 엔지니어의 시장 연봉은 날이갈수록 높아지고 있고 (높은 비용), 잘 교육된 인력을 구하기도 매우 어려움 (리스크)

High-Level Goals

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

쉬운 데이터 분석: 비 전문가도 접근 가능한 쉬운 인터페이스, 적합한 머신러닝 알고리즘 자동 선택 (Auto ML), 결과 데이터 시각화
빠른 데이터 분석: 최적의 결과값을 위한 알고리즘 조합 자동화 (Auto ML)
정확한 데이터 분석: 전통적인 통계학 기반 분석 (수기) —> 머신러닝 기반 분석

Interactions

데이터를 수집하여 분석하고 인사이트를 도출하는 과정은 매우 복잡하고 반복적인 일입니다. 머신러닝은 이를 간단하고 빠르게 해결할 수 있는 기술이지만 기술을 도입하는데 있어 진입장벽이 높습니다. 저희는 이 진입장벽을 간단하고 직관적인 인터페이스로 낮춰줄 수 있다고 생각했고 이를 제품으로 풀어내기 시작했습니다. 기존의 사용자는

수집된 데이터의 기록 방식이 기록자와 기록 시점에 따라 제각각이라 이를 통일하기 위해 엑셀에서 단순 작업을 반복해야 했습니다.
머신러닝에 대한 이해가 전혀 없는 대부분의 경우 일차원적인 데이터 경향성을 가지고 부정확한 인사이트를 도출해야 했습니다. (물론 이 과정에서 숫자로 가득한 엑셀 표를 뚫어져라 바라봐야 했습니다.)
머신러닝을 시도하더라도 모델을 만들기 위한 적합한 알고리즘을 선택 및 조합하는데 반복 작업이 요구되었습니다. 알고리즘 하나를 적용해 모델을 만들어 평가해보고, 다른 알고리즘을 적용해 모델을 만들어 평가하여 비교하는 끝 없는 반복을 진행해야 했습니다. (쉽게말해 요리에서 가장 좋은 레시피를 발견할 때 까지 처음부터 요리를 반복하는 과정이라 보면 됩니다.)

이러한 비효율을 극적으로 해결하기 위해서는 앱으로 배달음식을 주문하는 것 만큼 사용이 쉬워야 한다고 생각했습니다. 저희는 머신러닝 과정을 Preprocessing, Modeling, Deploying 세 단계로 간소화하여 구분하고 각 단계에 맞는 가장 간단한 인터페이스를 고안했습니다. 사용자는

데이터를 전처리하는데 있어 원하는 기능을 드래그 앤 드롭으로 이어 붙이기만 하면 됩니다.
모델링 또한 마찬가지로 추천하는 알고리즘 또는 원하는 알고리즘을 전처리한 데이터에 드래그 앤 드롭으로 붙여주면 됩니다.
이후 과정은 모두 자동이며 배포는 API 코드를 복사하여 자신의 시스템에 붙여넣기만 하면 완성입니다.

Execution

저희 제품은 어려운 일을 쉽게 만들어주는 친근한 제품인 동시에 복잡한 데이터를 다루는 전문적인 제품입니다. 상충되는 두가지 주제를 시각적으로 잘 조화해야 했습니다. 저희 팀은 오랜 논의 끝에 전자에 무게를 조금 더 두기로 했습니다. 친근한 인상이 머신러닝에 벽을 느끼는 Primary Users에게 심리적 안심을 줌과 동시에 새로운을 줄 수 있다고 판단했습니다.

Color Theme

친근하면서 전문적인 인상을 주는 색상을 찾기 위해 많은 시도를 했습니다. ‘친근’과 ‘전문’을 모두 아우르는 단어는 ‘신뢰’라고 생각했습니다. 신뢰감을 줄 수 있는 색상을 탐구했고 전통적으로 신뢰를 주는 색상으로 많이 쓰인 파란색을 주요 색상으로 선택했습니다.

색상의 개수도 고려의 대상이었습니다. 넓은 데스크탑 환경에서 사용할 제품이었기에 너무 튀거나 많은 수의 색상은 부적절하다고 판단했습니다. 주요 색상과 이를 보조할 수 있는 색상 그리고 경고의 역할을 하는 색상 등 다섯개 이하의 색상을 사용했습니다.

주요 색상을 보조하는 색상으로 teal을 배색해 자칫 차가워 보일 수 있는 파란색의 이미지를 보완했습니다. 파란색과 어울리면서도 친근하면서 새로운 느낌을 줄 수 있다 판단했습니다. 경고의 역할을 하는 빨강, 노랑 색상도 채도를 낮춰 친근한 이미지를 줄 수 있도록 했습니다.

UI Framework

혼자서 디자인 업무를 모두 처리해야하는 만큼 첫 제품에 디자인 시스템까지 만들기는 무리라는 판단을 했습니다. 이에 잘 만들어진 데스크탑 용 UI Framework를 찾아보았고 디자인 편집과 개발 모두 용이한 Semantic UI를 선택했습니다.
기본적으로 가이드 라인을 따라 디자인과 개발 속도에 문제가 없게끔했고, 데이터 시각화나 노드 인터페이스 등 특수 기능은 커스텀 제작하여 대응했습니다.

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

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

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