2018, 2020

WELT

‘WELT’는 벨트 형태의 웨어러블 디바이스로, 기기에서 수집된 건강 데이터를 전용 앱을 통해 제공하는 디지털 헬스(Digital Health) 제품이다. 제품 출시 2년 차에 이 프로젝트에 합류하게 되었고, 이후 해당 서비스를 포함한 모든 디자인을 총괄하게 되었다.

합류 당시, 앱은 간결하고 정돈된 스타일로 기본적인 매력을 갖추고 있었지만, 사용성과 완성도 면에서는 개선이 필요한 부분들이 많았다. 초기 버전의 디자인은 학생이 주도한 것으로 보였고, 컴포넌트의 사용 방식에 일관성이 부족했으며, 디자인 가이드 역시 마련되어 있지 않았다.

그럼에도 불구하고, 오히려 이런 점들이 내가 가진 경험을 온전히 발휘할 수 있는 기회처럼 느껴졌다. 이전까지 주로 대기업 프로젝트를 중심으로 일해왔던 나에게 이 환경은 도전적이면서도 흥미롭게 다가왔고, 그 가능성에 이끌려 합류를 결정하게 되었다.

현황 파악

우선, 기기 자체의 성능 검증이 필요했다. 앱에서 제공되는 데이터의 생성 방식과 오류 상태를 파악하기 위한 작업이었다. 하지만 당시 앱에 대해 상세히 설명해 줄 수 있는 디자이너나 기획자가 부재했고, 개발자 역시 초기 개발자가 아니었기 때문에 충분한 정보를 얻는 데 예상보다 많은 시간이 소요되었다.
이 과정을 통해 이미 시판 중인 제품임에도 불구하고 디자인 환경뿐 아니라 서비스의 작동 안정성까지 심각하게 낮은 상태라는 점을 확인하게 되었다.

데이터의 다양성 확보

앱은 일/주/월 단위로 허리둘레, 앉은 시간, 걸음 수, 이동 거리, 소모 칼로리, 그리고 이를 종합한 등급 데이터를 제공하고 있었다. 초기 앱 화면 비율이 16:9였던 것을 고려하면, 화면의 약 1/3을 차지하는 고정 정보였지만, 등급은 단 세 가지(‘최고’, ‘좋음’, ‘나쁨’)로 제한되어 있었고, 핵심 데이터인 허리둘레는 변동 폭이 큰 정보가 아니었다. 측정방법도 장력 기반의 실시간 측정 방식이 아니라, 벨트가 어느 구멍에 결착되었는지를 통해 체크하는 방식이었기 때문에, 다이어트 중이 아닌 이상, 대부분 사용자에게 동일한 등급만 반복 노출되는 상황이었다.

소모 칼로리나 이동 거리 역시 걸음 수에 기반한 파생 정보로, 스마트폰이나 다른 웨어러블 기기에서도 쉽게 제공되는 기능이었다. 결과적으로 이 제품만의 고유한 가치가 부족했고, 실제 사용자 데이터에서도 첫 주 이후 리텐션이 급격히 하락하는 현상이 나타났다. 이에 따라 ‘데이터 다양성과 차별성이 부족하다’라는 가설을 세우게 되었다.

리텐션(Retention)에 대한 시각

많은 서비스가 리텐션과 체류 시간을 핵심 지표로 여기지만, 모든 제품에 이를 동일하게 적용할 수는 없다고 생각한다. WELT의 경우, 주 1~2회, 10초 이내의 사용만으로도 충분하다고 판단했으나, 당시 이러한 관점을 충분히 설득하지 못한 점은 지금까지도 아쉬움으로 남아 있다.

그럼에도 불구하고, 최소한의 리텐션 확보는 필요했고, 핵심은 ‘데이터의 반복성과 단조로움을 해결하는 것이라고 보았다. 실행할 때마다 비슷한 데이터만 보여주는 앱은, 사용자로 하여금 앱을 다시 열 이유를 만들지 못하기 때문이다.

현실적인 개선

초기 가설을 반영해 업데이트 방향을 설정했으나, 당시 개발 리소스의 제약으로 인해 기기 안정성 개선은 어려웠고, 비교적 소극적인 ‘데이터 구성 정비’ 수준의 접근을 택할 수밖에 없었다.

등급 정보를 세분화하고, 관련 수치를 병행 표기하여 변화의 여지를 늘렸다. 불필요하거나 혼란을 주는 정보는 삭제하거나 다른 정보들과 통합했으며, 푸시 알림과 미접속 리마인드를 추가했다. 이와 함께 디자인 가이드라인과 그래픽 시스템 개선도 병행하여 진행되었다.

그래프(Graph)

의외일 수 있지만, 솔직히 가장 고민스러웠던 부분은 그래프의 표현 방식이었다.

공학계열 인력이 많았던 조직 특성상 그래프와 도표에 익숙한 사람들이 많았고, 이 때문인지 다양한 지표를 하나의 그래프에 담으려는 경향이 있었다.

하지만 "해석이 필요한 그래프는 실패한 그래프"라 생각했고, 이에 스스로 정한 원칙은 다음과 같다.

“하나의 그래프에 세 가지 이상의 정보를 담지 않는다.”

이 원칙은 지금까지도 지키고 있으며, 실제로 당시 설계한 대부분의 그래프는 평균 두 가지 정보만을 시각화했다.

정보의 양을 제한하는 대신, 각 그래프가 전달해야 할 ‘의도’를 더욱 분명하게 분리하는 방식으로 접근했다. 예를 들면 다음과 같다.

걸음 수: 하루 중 언제쯤 가장 걸음 수가 많은지 흐름에 집중

앉은 시간: 하루 중 언제 앉아 있었는지 시점에 집중

이처럼 가로축과 세로축을 기반으로 한 정량적 수치 제공 방식에서, 패턴이나 흐름에 집중한 사용자 중심적인 표현 방식으로 발전시키고자 했다.

즉, "하나의 그래프에 너무 많은 정보를 담지 않고, 주요 정보만을 추출하여 전달"하는 방향으로 바꾼 것이다.

그래프 설계만큼 고민이 컸던 건 모바일 환경 그 자체였다.

기기 해상도는 점점 발전해왔지만, 손에 쥐는 실제 화면은 여전히 반뼘 남짓. 이 작은 영역 안에 담을 수 있는 정보량엔 분명한 한계가 있었다.

간단한 리서치와 프로토타이핑을 통해, 가로 화면 안에서 효과적으로 조작 가능한 데이터 수는 약 12~14개(기준 해상도에 따라 상이)라 판단했다.

월간 데이터처럼 항목 수가 많을 경우 좌우 스크롤을 적용했고, 필요한 경우 보조 정보를 그래프 외부에 분리 제공했다.

걸음 수 – 주 단위: 시간대 흐름 파악에 초점

걸음 수 – 월 단위: 월별 변화량 비교에 집중

가이드에 대하여

2014년부터 PowerPoint 기반의 가이드를 제작해 왔으며, 대부분 100~200페이지를 쉽게 넘기는 것들이었다. 이러한 경험은 단순한 문서 작성에 그치지 않고, 설계 방향성을 정리하고 명확히 전달하는 역량으로 이어졌다.

WELT에서 처음 작성한 가이드는 대략 70페이지 분량이었고, “대부분의 작업자는 가이드를 보지 않는다”라는 경험을 바탕으로 최대한 단순한 형태를 추구했다. UI, GUI 각 하나의 가이드로 제공했고, 현재는 이마저도 Figma 내에 통합 제공하고 있다.

UI 설계자로 출발했기에 초기에는 GUI에 대한 전문성이 부족했으나, 본 프로젝트를 통해 이해도와 작성 숙련도를 크게 끌어올릴 수 있었다. 하지만 여전히 그래픽의 다양성이나 시각적 미학보다는, 정보의 흐름, 배치의 일관성, 기능성 중심으로 접근하는 태도는 그대로 유지하고 있다.

UI Guideline

GUI Guideline

인터랙션(Interaction)

헬스케어 콘텐츠는 정보 중심적 특성상 자칫 단조롭고 지루하게 느껴지기 쉽다. 이에 조작 과정에서의 반응성과 피드백 등 인터랙션 요소의 완성도를 높여, 시각적인 즐거움과 사용자의 집중도를 유도하는 방향을 택하게 됐다.

영상 관련 직종을 꿈꿨던 대학 시절 경험 덕분에 인터랙션 설계 자체는 흥미롭게 접근할 수 있었지만, 정작 인터랙션 가이드 제작 경험은 전혀 없었다.

초기에는 완성된 영상을 기준으로 각 시점의 타이밍을 체크하고, 이를 기준으로 프레임 단위로 문서화하는 방식으로 접근했다. 지금 돌이켜보면 다소 투박한 방법이었지만, 개발자와 직접 협업하며 세부 동작까지 함께 논의할 수 있었던 점은 소규모 조직만의 장점이기도 했다. 비록 실제 적용된 부분은 적었지만, 당시 리소스를 고려하면 가장 현실적인 시도였다고 생각한다.

디자이너가 할 수 있는 것

당시 가장 큰 기술적 문제는 벨트와 앱 간 연결 이슈였다. 근본적인 해결을 위해서는 하드웨어 개선이 필요했지만, 당장 디자이너가 할 수 있는 범위 내에서 접근할 방법을 고민해야 했다.

이를 위해 연결 절차 전반에 가이드를 추가하고, 테스트 과정을 UI 흐름 안에 자연스럽게 녹여 넣는 방식을 시도했다. 이 변경만으로도 연결 실패율은 약 40% 감소했다.

문제의 근본 원인은, 1회 충전으로 30일 이상 사용할 수 있다는 장점이 오히려 사용자로 하여금 배터리 상태를 인지하지 못하게 만든 데 있었다. 벨트는 배터리 정보를 전달하지 않았고, 앱도 연결 전에는 잔량을 알 수 없는 구조였다.

당시 가장 큰 기술적 문제는 벨트와 앱 간 연결 이슈였다. 근본적인 해결을 위해서는 하드웨어 개선이 필요했지만, 당장 디자이너가 할 수 있는 범위 내에서 접근할 방법을 고민해야 했다. 이를 위해 연결 절차 전반에 가이드를 추가하고, 테스트 과정을 UI 흐름 안에 자연스럽게 녹여 넣는 방식을 시도했다. 이 변경만으로도 연결 실패율은 약 40% 감소했다.

문제의 근본 원인은, 1회 충전으로 30일 이상 사용할 수 있다는 장점이 오히려 사용자로 하여금 배터리 상태를 인지하지 못하게 만든 데 있었다. 벨트는 배터리 정보를 전달하지 않았고, 앱도 연결 전에는 잔량을 알 수 없는 구조였다.

이를 보완하기 위해 연결 실패 시 애니메이션 기반 안내 화면을 제공하고, 충전 방법과 테스트 절차를 구체화하여 사용자가 앱 실행 전에도 문제를 인지할 수 있도록 설계했다.

CES 2020 전시 기획 · 디자인 · 운영

CES 2020은 회사 최초의 단독 부스 운영이었으며, 전체 전시 콘셉트와 주요 콘텐츠 기획을 총괄했다.

 앱 UI/UX를 포함해 전시장 구조, 인쇄물, 영상, 소품 등 오프라인 전시와 디지털 콘텐츠 전반을 직접 설계·제작했다.

특히 제한된 예산과 짧은 일정 안에서 다수의 실물을 제작해야 했기 때문에, 우선순위를 명확히 설정하고 유관 파트와 밀접히 협업하는 방식으로 진행했다. 직접 촬영장 대관, 장비 대여, 소품 제작, 부스 제작사 커뮤니케이션 및 현장 관리까지 담당했으며, 물리적 설치 경험이 부족했던 상황에서도 빠른 구조 이해와 도식화를 통해 일정 차질 없이 마무리할 수 있었다.

성과 측면에서는 현장 방문자 응대, 명함/브로슈어 소진율 등을 기준으로 전년 대비 약 4배 이상의 반응을 기록했으며,

이후 디자인 실무와 협업 전반에서 더욱 주도적으로 참여할 수 있는 신뢰와 입지를 쌓을 수 있었다.

WELT 2.0 - 이미지 중심의 데이터 해석 시도

WELT 2.0은 새로운 사용자 경험을 구현하고자 한 실험적인 프로젝트였다. 기존 버전이 수치와 그래프 중심으로 데이터를 전달했다면, 2.0에서는 당시 화제를 모은 MBTI 검사를 참고해 이미지와 내러티브 중심의 방식으로 전환했다.

이전 버전에서 활용한 Lottie 애니메이션에 대한 반응이 긍정적이었던 만큼, 이번에는 결과 화면뿐 아니라 데이터 해석, 화면 전환, 단계 안내 등 다양한 상황에 애니메이션을 적극 도입할 수 있었다.

다만, Lottie 특유의 플러그인 호환성 부족과 스크립트 지원의 한계로 인해, 대부분의 작업을 프레임 단위 수작업(frame-by-frame)으로 진행해야 했고 이에 따라 막대한 작업량이 발생했다. 예를 들어, 걸음 수 데이터는 5단계로 구분해 각단계별로 독립된 애니메이션을 제공했는데, 단계 하나당 제작에 약 1주일이 소요될 정도로 높은 작업 밀도가 요구됐다.

작업 효율을 높이기 위해 인턴을 단기 충원했지만, 예상보다 높은 난이도로 인해 실질적인 도움을 받긴 어려웠다. 결국 약 3개월에 걸쳐 모든 애니메이션을 직접 제작하게 되었고, 이는 단순한 시각적 효과를 넘어 수치 데이터를 정성적으로 해석하려는 실험적 접근으로 기억된다.

보행 분석 – 의료 협업을 통한 기능 확장

2.0 버전에서는 ‘보행 분석’이라는 새로운 기능이 추가됐다. 기존에는 걸음 수, 앉은 시간, 벨트 착용 시간 등을 기반으로 데이터를 산출했지만, 이번에는 걸음의 패턴과 균형을 분석해 보행 속도와 균형을 계산하고, 이를 바탕으로 근감소증 위험도를 가늠할 수 있도록 했다.

이 기능은 WELT의 주요 사용자층이 50~60대 남성이었다는 점에서 출발했으며, 기획 단계부터 고령자 보행 문제와 근감소증 관련 임상 정보를 조사해 반영했다. 실제 개발 과정에서는 의료기관과의 미팅을 통해 기능 방향성과 해석 기준을 점검했으며, 이를 통해 단순 피트니스가 아닌 의학적으로 유의미한 데이터 기반 분석 기능으로 확장될 수 있었다.

이 기능은 이후 WELT가 디지털 치료제(DTx) 영역으로 진입하는 기반이 되었고, 사용자의 건강 데이터를 의료 연계가 가능한 형태로 해석하는 UX 기획의 첫 사례가 되었다.

계획과 현실

WELT는 정말 다양한 영역을 경험할 수 있게 해준 고마운 프로젝트였다. 하지만 2.0 버전만큼은 유난히 아쉬움이 많이 남는다. 애니메이션 기반으로 데이터를 전달한다는 기획은 매우 흥미로웠고, 이후 다양한 상황과 사용자 반응을 반영해 주기적인 업데이트를 계획했지만, 실제 구현은 첫 버전에 그쳤다.

인력 부족도 있었지만, 무엇보다 회사의 전략 변화로 벨트 제품의 비중이 급격히 줄어든 것이 가장 큰 원인이었다. 그에 따라 해당 프로젝트는 더 이상의 개발 없이 멈추었고, 현재는 연구나 홍보 용도로만 제한적으로 활용되는 미완성 프로젝트로 남아 있다.

사용 툴

Illustrator

(그래픽)

Photoshop

(그래픽)

After Effects

(영상)

PowerPoint

(설계)

Sketch

(그래픽)

Zepline

(설계)

Illustrator

(그래픽)

Photoshop

(그래픽)

After Effects

(영상)

PowerPoint

(설계)

PowerPoint

(설계)

Sketch

(그래픽)

Zepline

(설계)

Create a free website with Framer, the website builder loved by startups, designers and agencies.