본문으로 바로가기
← 모든 작업

DESIGN CASE / Hue.in

긴 설명 없이, 잠깐의 전환.

색으로 기분을 고르고, 짧은 사운드와 호흡 가이드를 따라가는 마음챙김 앱 설계. Apple 건강의 마음챙김 시간 기록 화면도 구성했습니다.

본인 역할
Project Strategy · Product Designer
기간·상태
2024.08 — 2024.10 · 설계·프로토타입
사용자
짧은 틈에 쉬고 싶은 사용자
책임 범위
맥락 리서치 · UX 구조 · 사운드·호흡 인터랙션 · 건강 앱 연동 UX
PRODUCT DESIGNHue.in
Be happy · 1분 30초 설정 · Figma 원본 UI감정 비주얼 탐색 · Figma 원본 UIConcentrate · 30초 설정 · Figma 원본 UI

01 / CONTEXT

해결하려던 문제.

짧게 쉬고 싶은 순간에도 감정을 입력하거나 긴 콘텐츠를 선택해야 한다면 진입 과정 자체가 부담이 됩니다. Hue.in은 기록을 시작하는 일보다 바로 경험에 들어가는 흐름을 탐색했습니다.

바이노럴 비트와 호흡

양쪽 귀에 조금 다른 주파수의 소리를 들려주는 바이노럴 비트를 사운드 콘셉트로 사용했습니다. 원형 그래픽으로 들이쉬기와 내쉬기를 안내하는 화면을 디자인했습니다.

Apple 건강 접근 권한 설계

마음챙김 시간 읽기·쓰기 권한을 요청하는 화면과 주간 기록 그래프를 디자인했습니다.

심박수 연동 구상

마음챙김 시간과 심박수를 함께 살펴보는 기능을 구상했습니다. 여기서는 건강 데이터 연동의 설계 방향으로 소개합니다.

02 / DESIGN DECISIONS

결과물 뒤의 선택.

01

글로 적는 대신 원하는 기분 고르기

Feel Free, Be happy, Concentrate 등의 선택지를 색과 형태로 구분했습니다. 원하는 기분을 고르면 시간 설정 화면으로 이동하는 설계입니다.

감정 비주얼 탐색 · Figma 원본 UIBe happy · 1분 30초 설정 · Figma 원본 UI
감정 비주얼 탐색 · Figma 원본 UI / Be happy · 1분 30초 설정 · Figma 원본 UI원본 화면 보기 ↗
02

30초부터 시작하는 시간 설정

30초·1분·1분 30초를 설정할 수 있게 했습니다. 시간 아래에 시작 버튼을 두고, 재생 중에는 원형 그래픽으로 들이쉬기와 내쉬기를 안내합니다.

Concentrate · 30초 설정 · Figma 원본 UI들이쉬기 · 원형 호흡 가이드 · Figma 원본 UI
Concentrate · 30초 설정 · Figma 원본 UI / 들이쉬기 · 원형 호흡 가이드 · Figma 원본 UI원본 화면 보기 ↗
03

기분이 달라도 같은 위치의 조작

Be happy, Destress, Concentrate, Confidence의 색과 형태는 다르게 표현하되, 시간 조절과 시작 버튼의 위치는 유지했습니다.

Destress · 1분 설정 · Figma 원본 UIConfidence · 30초 설정 · Figma 원본 UI
Destress · 1분 설정 · Figma 원본 UI / Confidence · 30초 설정 · Figma 원본 UI원본 화면 보기 ↗

03 / THE WORK

화면으로 살펴보기.

화면을 선택하면 확대됩니다. 캡션에 디자인·구현 단계를 표시했습니다.

04 / OUTCOME & REFLECTION

작업 결과.

기분 선택부터 시간 설정, 호흡 안내, 세션 종료까지의 화면을 제작했습니다. 설정에는 Apple 건강의 마음챙김 시간 접근 권한과 주간 기록을 확인하는 화면을 포함했습니다.

다음 사례

Tomo ↗

한국어에 자신 없는 여자친구가 필요한 순간에 답장을 받을 수 있도록 시작한 대화 앱 설계입니다. 음성 메시지와 알림 화면을 만들고, 빠른 응답을 유도할 시간제한과 Live Activity를 구상했습니다.