명상 앱 UI를 디자인하며 배운 것: 뺄수록 숨이 쉬어진다

숨 쉬는 것에만 집중하는 3분. 그 시간을 담는 명상·호흡 앱 '숨(SUM)'의 UI를 처음부터 디자인해봤습니다. 결과물 먼저 보여드리고 뒷얘기 할게요.

브랜드의 중심은 이 오브 하나입니다. 들이쉬면 커지고 내쉬면 작아지는 호흡을 빛나는 구 하나로 압축했어요. 아쿠아에서 바이올렛으로 넘어가는 그라데이션은 '차분한데 죽어있진 않은' 느낌을 찾다가 나온 답입니다.

홈 화면에는 호흡 오브랑 숫자 하나(4·7·8 호흡법)만 있습니다. 버튼도 메뉴도 설명도 지웠어요. 기록 화면은 이번 주 명상을 막대와 연속 일수로 보여줘서 잘하고 있다는 감각만 남겼습니다.

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

이번 작업에서 제일 어려웠던 건 덜어내기였습니다. 디자인은 보통 뭘 넣을지 고민하는 일인데 이번엔 내내 뭘 뺄지만 생각했어요. 홈에서 요소를 하나씩 지워보면서 "이거 없어도 되나?"를 계속 물었습니다. 지우고, 하루 써보고, 아쉬우면 되돌리고. 결국 오브랑 숫자만 남았는데 처음엔 너무 허전한가 싶었어요. 근데 실제로 4·7·8 호흡을 따라 해보니까 그 비어 있음이 편하더라고요. 화면이 조용해질수록 숨이 잘 쉬어졌습니다.

어둡게 잡은 이유도 비슷합니다. 명상 앱은 화면을 오래 보는 앱이 아니라 화면에서 눈을 떼게 만드는 앱이라고 생각했어요. 쨍한 색은 아무리 예뻐도 각성을 부르니까, 깊은 다크 배경에 오브 하나만 은은하게 빛나게 뒀습니다. 자기 전에 켜도 눈이 안 부시게요.

직전에 따뜻한 톤의 카페 브랜딩 작업을 봐서 그런가, 이런 차가운 프로덕트 UI는 완전히 다른 근육을 쓰는 기분이었습니다. 채우는 디자인과 비우는 디자인. 둘 다 해봐야 한다는 걸 이번에 배웠어요.

화면을 잘 만든다는 게 꼭 화려하게 채우는 건 아니더라고요. 때로는 아무것도 안 하게 두는 게 제일 친절한 디자인입니다. 사용자가 3분 동안 화면이 아니라 자기 호흡에만 집중했다면, 이 UI는 제 몫을 다한 겁니다.

사족 하나. 4·7·8 호흡법은 4초 들이쉬고 7초 참고 8초 내쉬는 방식인데, 시안 검증한다고 오브 애니메이션 따라 며칠 호흡하다 보니 잠드는 게 진짜 빨라졌습니다. 앱 디자인하다가 수면의 질이 좋아진 건 예상 못 한 부수입이었어요. 다음엔 세션이 끝난 뒤의 여운 화면, 그러니까 명상 끝나고 바로 홈으로 튕기지 않고 잠깐 머무는 화면을 다듬어보고 싶습니다. 끝나는 순간까지 조용한 앱이 목표라서요.

참고로 이건 UI 디자인 스터디 성격의 개인 작업입니다. 실제 앱으로 개발할지는 미정인데, 이 글 반응을 보고 정하려고요. 만들어지면 제일 먼저 쓰고 싶다는 분이 계시다면 그게 개발 착수의 신호가 되겠죠.