명상 호흡 앱 '숨(SUM)'의 UI를 처음부터 디자인했어요

숨 쉬는 것에만 집중하는 3분. 그 시간을 담을 명상·호흡 앱 '숨(SUM)'의 UI를 처음부터 디자인했어요. 카페 간판 같은 따뜻한 디자인과는 정반대로, 화면을 보는 것만으로 톤이 가라앉도록 깊은 다크 무드로 잡았습니다. 아래가 실제 작업물이에요.

1. 브랜드 — 숨을 닮은 오브

들이쉬고 내쉴 때 커졌다 작아지는 호흡을 빛나는 오브 하나로 압축했어요. 아쿠아→바이올렛 그라데이션으로 '차분하지만 살아있는' 느낌을 노렸습니다.

2. 핵심 화면 — 홈 & 기록

홈은 오직 호흡 오브와 숫자 하나(4·7·8 호흡법)만 남겼어요. 기록 화면은 '이번 주 마음'을 막대 그래프와 연속 일수로 보여줘, 잘하고 있다는 감각을 줍니다.

3. 디자인 시스템

색 토큰(Base/Surface/Aqua/Violet), 타입 스케일, 버튼·세그먼트 내비를 한 장으로 정리했어요. 화면이 늘어나도 같은 규칙으로 빠르게 찍어낼 수 있게.

따뜻한 브랜딩과 차가운 프로덕트 UI는 완전히 다른 근육을 쓰더라고요. 이번엔 '덜어내는' 디자인에 집중했습니다 — 뺄수록 숨이 쉬어지는 화면을 목표로.