유아이볼 uibowl 파트너, UX 분석 대시보드 소개

Jul 14. 2025

안녕하세요, 유아이볼의 인턴 디자이너 권예인입니다. 이번에 유아이볼 파트너를 위한 B2B SaaS 서비스, 대시보드를 오픈했습니다! 이 대시보드는 단순히 데이터를 보여주는 것을 넘어, 디자이너와 기획자가 ‘어디서부터 개선을 시작할지’를 직관적으로 파악할 수 있도록 도와주는 B2B SaaS 툴이에요. 우리 서비스의 UX 흐름을 빠르게 파악하고, 실질적인 개선 힌트를 얻을 수 있어요.

왜 B2B 대시보드를 만들게 되었나요?

디자이너와 기획자에게 가장 큰 고민 중 하나는 “무엇을, 왜 먼저 고쳐야 할까?”라고 생각합니다. 특히 리소스가 제한된 스타트업과 중소기업에서는 내부 지표만으로는 우리 서비스의 현재 상태는 알 수 있어도, 업계 평균이나 경쟁사와의 비교 기준이 없어 “우리가 잘하고 있는지, 어디가 부족한지”를 객관적으로 판단하기가 어렵습니다.

또한 단일 지표 몇 가지만 개선해서는 UX 전체를 발전시키기 어렵기 때문에, 시장 전반의 성장 방향과 우리 서비스의 위치를 꾸준히 모니터링해야 하는 어려움이 존재했어요. 이 두 가지 고민—객관적인 비교 기준의 부재와 지속적인 시장 모니터링의 어려움—을 해결하기 위해, 정량·정성 데이터를 한 곳에서 비교 분석할 수 있는 B2B UX 대시보드를 기획하게 되었습니다.

설계부터 출시까지의 여정

기획부터 설계, 그리고 출시까지의 여정을 공유드리려 해요.

아래 타임라인 이미지처럼, 약 3개월 동안 총 7단계로 진행되었습니다.

1. PRD 문서 작성과 데이터 스코핑, 가설 수립

먼저 문제 정의, 목표, 주요 사용자 등 프로젝트의 방향성을 명확하기 하기 위한 PRD 문서를 작성하며 프로젝트의 뼈대를 세웠습니다. Google Analytics 기반 유아이볼 내부 데이터를 살펴보며, 클릭 수, 저장 수, 평균 체류 시간 등 어떤 데이터를 제공해야 기업에서 유용할지를 데이터 활용 계획을 작성해보았습니다.

이를 바탕으로, 유아이볼이 제공할 수 있는 기능과 조합을 다양하게 도출하며 아래와 같은 가설을 세웠습니다.

주요 가설

고객은 내부 데이터만으로는 UX 성과를 개선하기 어렵다고 느낄 것이다.

고객은 경쟁사 및 시장 데이터와의 비교를 통해 개선 포인트를 찾고 싶어 할 것이다.

2. 고객 인터뷰 진행

실제 고객의 니즈를 확인하기 위해 스타트업 디자이너, 기획자, 대표, UX 연구원 등 5인을 대상으로 인터뷰를 진행했습니다. 특히 서비스 개선 경험에서 겪은 어려움, 경쟁사 분석 방식, 대시보드 MVP에 대한 기대치 및 피드백을 중심으로 깊이 있게 질문했습니다. 그 결과 “계속 같은 화면만 보니 생각이 갇히는 느낌이다” 페인포인트를와 “단순 진단을 넘어 구체적 설명이 필요하다”는 등 니즈를 확인할 수 있었습니다.

3. 인터뷰 기반 MVP 기능 정의

앞선 가설과 인터뷰 결과를 바탕으로, 1차 출시에 담을 핵심 MVP 기능을 다음과 같이 정의했습니다.

자사 서비스 성과 진단

자사 UX 패턴별 성과 진단

유아이볼의 패턴 인사이트 제공

사용자 피드백 시각화

4. 기능명세서 작성

개발팀과의 원활한 협업을 위해 기능에 대한 동작 방식과 정책을 기능명세서로 정리했습니다.

각 지표가 어디에서 생성되고 어떤 방식으로 계산되는지를 명확히 문서화했습니다. 예를 들어, 날짜 선택 컴포넌트인 데이트피커는 단순히 넣기만 하는 것이 아니라 “디폴트는 최근 30일”과 같은 정책을 명시하고, 패턴 성과 진단에서는 몇개의 패턴을, 어떻게 노출할 것인지를 고민하고, 이외에도 로그인 인증 처리 방식, 권한이 없는 사용자가 접근했을 때의 흐름 등 MVP에 포함된 기능 뿐만 아니라 전체 여정에 필요한 기능을 파악할 수 있도록 작성했습니다.

5. 와이어프레임 & UI 디자인 (정책 재검토 재수정)

사용자 플로우 중심의 와이어프레임을 설계하고, 국내외 레퍼런스를 참고하며 세 가지 화면을 설계했습니다.

세 가지 화면:

기업 고객용 대시보드 (실제 사용 인터페이스)

관리자 어드민 (Uibowl 내부 운영용)

랜딩 페이지 (모바일‧웹 반응형)

이 과정에서 기존 다크 모드에서 숫자·그래프 가독성이 뛰어난 화이트 모드로 전환하고, 누락된 정책이나 케이스를 하나씩 점검하며 보완했습니다. 또한 데이터가 없는 경우의 화면, 이해를 위한 가이드 툴팁을 함께 노출, 그래프의 상승/하락을 보여줄 때의 컬러 변화를 통한 시각적 구분, 텍스트 명칭의 직관성, 그리고 디자인 일관성을 유지하기 위한 버튼 스타일, 텍스트 크기 등을 통일하며 신경 썼어요.