Portfolio · Mobile UI

데이터가 아니라
동기를 디자인한다

피트니스 트래킹 앱 UX는 숫자를 보여주는 대신, 사용자가 내일 다시 앱을 열게 만드는 동기부여 요소를 중심으로 설계한 모바일 UI 프로젝트입니다.

Mobile UIInteractionGamificationFigmaDark Mode
기획 · 설계 단계
9:41●●●
좋은 아침!
오늘도 목표를 향해 달려봐요
🔥
14Day Streak
🏆
⚡
🔒
Daily Quest · 물 8잔 마시기
Problem · Solution

피트니스 앱은 왜 지워지는가

스토어 평균 피트니스 앱은 설치 후 7일 안에 60%가 삭제됩니다. 숫자만 보여주기 때문입니다.

!현재의 문제

  • 숫자 나열만 있어 성취감이 보이지 않음
  • 목표 설정이 개인화되지 않음
  • 연속 기록이 끊기면 돌아올 명분 없음
  • 밤에도 눈부신 밝은 UI

✓이 프로젝트의 접근

  • 스트릭·배지·일일 퀘스트로 성취 가시화
  • 연속 기록 끊김에 대한 복귀 유도 톤
  • 데이터 시각화는 의사결정을 도와줄 때만 노출
  • OLED-safe 다크모드 우선, 라이트 모드 토글
Key Deliverables

디자인 산출물

UT 검증을 마친 하이피델리티 프로토타입과 디자인 시스템.

🎮

게이미피케이션 시스템

스트릭·배지·레벨·일일 퀘스트 로직과 UI 패턴 세트.

📊

데이터 시각화

활동·심박·수면 차트 컴포넌트, 의미 중심 색상 팔레트.

✨

마이크로 인터랙션

탭 피드백·로딩·축하 애니메이션 Lottie 에셋 + 타이밍 가이드.

🌙

다크 모드 시스템

OLED-safe 블랙 우선, 라이트 모드 대응 토큰 자동 변환.

♿

접근성

색약 대응 색상·VoiceOver/TalkBack 레이블·44×44pt 터치 영역.

🧪

사용자 테스트

8명 UT 후 이탈 구간 분석 및 개선안 리포트 포함.

Process

작업 프로세스

리서치 → 스토리 → 와이어 → 하이파이 → 테스트.

Phase 1 · Now

사용자 리서치

운동 습관이 무너진 사람 10명 심층 인터뷰, 심리적 장벽 매핑.

Phase 2

스토리보드 · 와이어

오늘의 해빗 루프 스토리보드, 핵심 12개 화면 와이어프레임.

Phase 3

하이피델리티 & 인터랙션

Figma 프로토타입, 마이크로 인터랙션 Lottie, 다크모드 시스템화.

Phase 4

UT · 디자인 핸드오프

8명 UT 2회, 개발팀 핸드오프 명세, 최종 디자인 시스템 전달.

다른 디자인 프로젝트도 살펴보세요

피트니스 앱 UX는 junetapa 디자인 포트폴리오의 일부입니다.

디자인 포트폴리오 전체 보기 프로젝트 문의