피트니스 앱 The Outsiders가 미니멀 UI의 반대편에서 찾은 답
피트니스 앱 하면 떠오르는 UI가 있잖아요. 차분한 다크 배경, 최소한의 컬러, 정제된 타이포. 그게 거의 업계 표준이 됐는데, The Outsiders는 그 방향을 정면으로 거부했어요. 그라데이션을 과감하게 깔고, 네온 핑크를 CTA에 박고, 누적 그래프에 면적 기반 시각화까지 쓰거든요. 표현은 풍부한데 산만하지 않아요. 이게 어떻게 가능하냐고요?
The Outsiders는 러닝과 사이클링을 중심으로 한 퍼포먼스 트래킹 앱이에요. 심박수, HRV, 수면, 훈련 부하 같은 생체 데이터를 기반으로 현재 상태와 훈련 방향을 분석해줘요. 단순 기록이 아니라 회복과 강도의 균형을 해석하는 데 초점을 둔 서비스인데, 대중적으로 널리 알려진 앱은 아니에요. 그럼에도 UI 관점에서 짚어볼 게 많더라고요.
최근 UI 트렌드가 다시 풍부한 표현과 감각적 레이어를 탐색하고 있잖아요. '맥시멀하지만 정리된' 인터페이스가 실제로 어떻게 작동하는지, 화면 단위로 뜯어볼게요.
온보딩에서부터 "정체성"을 건다
대부분의 피트니스 앱은 온보딩을 '목표 설정'부터 시작해요. "주 몇 회 운동할 건가요?" 같은 질문이죠. The Outsiders는 달라요. 첫 화면에서 사전적 정의를 보여줘요. "A person who likes to spend time outside." 브랜드의 세계관을 먼저 설명하고, 사용자를 '아웃사이더'라는 캐릭터로 포지셔닝하는 거예요. 감성적 접근.
다크 모드 기반 배경 위에 네온에 가까운 핑크를 핵심 CTA 컬러로 사용하는 구조인데, 이게 '아웃사이더'라는 콘셉트와 딱 맞아요. 밤, 러닝, 스트리트 감성. 한 화면에 하나의 의사결정만 배치하는 단일 과업 구조를 유지해서 초기 이탈을 줄이는 전형적인 온보딩 전략을 따르면서도, 톤은 전혀 전형적이지 않죠.
'Today' 화면 — 운동 리스트가 아니라 판단 도구
Today 화면이 재밌어요. 보통 피트니스 앱의 메인 화면은 운동 리스트거든요. "오늘 뭐 했는지" 나열해주는 대시보드. The Outsiders는 질문이 달라요. "오늘 운동해도 되는지."
상단에 숫자를 크게 배치해서 정보 위계를 명확히 잡았고, 색상으로 상태를 즉각 구분해요. 초록, 블루, 레드 계열. 하단에는 심박·HRV 같은 핵심 지표를 카드형으로 요약 노출하는데, 복잡한 그래프 대신 작은 라인 차트와 한 줄 해석 텍스트로 정보를 압축했어요. 여러 데이터를 하나의 점수로 통합해서 의사결정을 단순화한 거예요.
분석 중심이라는 점. 이게 이 앱의 성격을 가장 잘 드러내는 화면이에요.
수면 데이터에 퍼플 그라데이션을 깐 이유
Heart Rate 상세 화면에서는 현재 수치(64 bpm)를 크게 배치하고, 바로 아래에 "정상 범위 내"라는 해석 문장을 붙여요. 수치와 의미를 동시에 제공하는 거죠. 7일 라인 차트로 단기 추세를 보여주고, 평균·최대·최소 값은 카드형으로 요약해요.
근데 진짜 인상적인 건 수면 상세 화면이에요. 상단에 "Excellent" 같은 질적 평가를 대형 타이포로 먼저 제시해요. 사용자는 복잡한 그래프를 보기 전에 결과를 먼저 이해하고, 이후 데이터를 확인하는 흐름을 따르게 돼요. 정성 평가 → 정량 데이터 순서의 위계.
수면 단계는 타임라인형 스택 바 그래프로 표현되는데, REM·Core·Deep이 색으로 구분되어 시간 흐름에 따라 배치되고, 심박·HRV·호흡수 라인 그래프를 오버레이로 전환해 볼 수 있어요. 하나의 레이아웃을 유지하면서 데이터만 교체하는 구조라 시각적 안정감이 있거든요.
여기서 컬러 전략이 빛나요. 전체 배경에 퍼플 그라데이션을 깔았는데, 이건 단순한 장식이 아니에요. '밤'이라는 맥락을 직관적으로 형성하는 장치예요. 수면 단계는 블루·민트·퍼플 등 명확히 구분되는 컬러 체계를 사용해서, 색만으로도 REM·Core·Deep이 구분돼요. 그래프를 빠르게 읽을 수 있는 이유가 여기에 있죠.
하단 Overview 영역에서는 Duration·Consistency·Stages 탭으로 구분해 장기 추세를 보여주는데, 'Optimal Range' 가이드 라인을 함께 표시해서 단순 기록이 아니라 기준 대비 상태를 인지하게 해요. 다만 그래프 종류가 다양해서 한 화면의 시각적 자극이 다소 많다는 점은 트레이드오프로 남아요.
훈련 데이터를 '누적 분포'로 읽게 만드는 설계
Progress 화면은 주 단위 누적 부하와 트레이닝 패턴을 확인하는 섹션이에요. 상단에 주차별 데이터를 도트 기반 미니 차트로 정리하는데, 원의 크기로 부하 강도를 표현해요. 수치 나열 대신 면적 대비로 변화를 읽게 만드는 거죠. Intensity Distribution은 수평 스택 바 그래프, Fitness 카드 영역은 소형 스파크라인을 삽입해 최근 추세를 요약해요. 개별 그래프는 단순하지만, 카드 단위로 모듈화되어 있어서 정보 구조가 명확해요.
Training Focus 상세 화면은 이 앱의 철학이 가장 잘 드러나는 곳이에요. 단일 수치가 아니라 분포의 구조를 시각화하거든요. 스택 바와 누적 막대그래프가 총량보다 '균형'을 읽게 만들어요. 이 앱이 훈련의 양보다 강도 구조의 비율을 중요하게 본다는 시각적 메시지.
컬러 전략도 명확해요. Low(노랑)에서 High(빨강), Anaerobic(보라)로 갈수록 채도와 대비가 강해져요. 에너지 시스템의 부담 강도를 색으로 번역한 거예요. 색의 긴장도가 곧 신체 스트레스 강도를 상징하는 건데, 이건 꽤 영리한 접근이더라고요. (디자이너가 운동을 많이 해본 사람 같아요.)
가장 인상적인 부분은 진단을 데이터 위가 아니라 앞에 둔다는 점이에요. "Low Aerobic Shortage"라는 문장이 그래프 위에 먼저 등장해요. 보통 앱들은 사용자가 그래프를 해석해서 결론을 도출하게 하잖아요. 이 화면은 이미 결론을 제시하고, 그래프는 그 근거로 작동해요.
7일에서 6개월까지, 레이아웃은 안 바뀐다
Endurance Fitness 화면에서 눈에 띄는 건 그래프 배경을 Good·Fair·Low로 먼저 나누고 그 위에 점을 올려두는 방식이에요. 수치 자체보다 '상태의 맥락'을 먼저 읽게 만드는 설계. 색도 공격적이지 않아요. 붉은 경고 대신 차분한 옐로우 톤을 써서, 이 지표가 기록 경쟁이 아니라 기반 체력 관리임을 시각적으로 전달해요.
7일, 4주, 6개월로 기간을 전환할 수 있는데, 핵심은 레이아웃을 바꾸지 않고 시간 축만 바꾼다는 점이에요. 그래프 구조, 색, 구간 배치는 그대로 두고 기간만 확장되거든요. 단기에서는 점들의 미세한 변동이 보이고, 중기에서는 평균의 흐름이 보이며, 장기에서는 상승·하락 방향성이 강조돼요. 6개월 화면에서는 상승 구간을 초록, 하락 구간을 주황으로 표시해 방향성을 즉각 인지하게 해요.
같은 그릇에 시간 스케일만 바꿔 담는 거죠. 사용자가 새로운 UI를 학습할 필요가 없으니까요.
운동 기록 — 숫자가 아니라 리듬을 보여준다
Workouts 화면은 상단에 선형 그래프와 막대그래프를 함께 배치해요. 선은 누적 흐름을, 막대는 개별 기간의 강도를 의미해요. 숫자를 읽기보다 패턴을 먼저 보게 되는 구조. 주·월·연으로 스케일을 바꿔도 그래프 구조가 유지되니까, 데이터가 아니라 리듬을 보는 느낌이 들어요. Training Load, Duration 같은 핵심 지표는 카드형으로 모듈화되어 있고, 선택된 지표만 컬러로 강조돼요.
개별 운동 상세 화면은 강도를 색으로 구조화해요. 보라(무산소)에서 빨강(고강도), 노랑(저강도)으로 이어지는 컬러 스펙트럼이 세션의 에너지 분포를 직관적으로 번역하는 거죠. 다크 배경이 대비를 높이면서 시각적 소음을 줄여서, 핵심 수치와 컬러 바에 시선이 자연스럽게 모여요. 심박 그래프는 과도한 장식 없이 평균선만 고정해서 리듬을 읽게 만들어요.
강도를 색의 온도로 느끼게 만드는 슬라이더
운동 추가 화면에서 Perceived Exertion(주관적 강도)을 입력하는 방식이 독특해요. 단순한 슬라이더가 아니에요. 왼쪽의 차가운 청록에서 오른쪽의 보라·핑크로 이어지는 그라데이션 스펙트럼을 써요. 색의 온도와 채도가 점점 강해지면서, 물리적 강도의 상승을 시각적으로 체감하게 만들어요. 숫자 없이도 위치만으로 강약을 이해할 수 있는 구조. Save 버튼 색도 강도 선택에 따라 달라지면서 화면 전체의 포인트 톤과 연결돼요.
이건 그냥 예쁜 게 아니에요. 기능이에요.
설정 화면까지 같은 컬러 문법을 쓴다
프로필 화면에서는 원형 그라데이션으로 브랜드 아이덴티티를 유지하되 자극적이지 않게 균형을 맞추고, Edit Photo나 Close 버튼에만 핑크 포인트를 사용해서 상호작용 가능한 요소를 명확히 드러내요.
Sleep Goal 슬라이더는 차가운 블루에서 보라로 이어지는 그라데이션을 사용해 시간의 적정 범위를 시각화하고, Heart Rate Zones 화면은 각 구간에 고유 컬러를 부여해요. 보라·빨강·노랑으로 이어지는 구간 색이 운동 상세 화면과 동일하거든요. 설정과 분석이 하나의 시각 언어로 연결되는 거예요.
맥시멀이 되려면 문법이 있어야 한다
The Outsiders를 한마디로 정리하면 이거예요. 복잡한 생체 데이터를 다루지만, 화면은 의외로 단순하게 읽힌다. 숫자는 크게, 그래프는 명확하게, 색은 역할을 나눠서 쓰거든요. 그라데이션이 단순한 배경 효과가 아니라 상태의 온도를 전달하는 장치로 작동하고, 스택 그래프와 스파크라인이 통계를 리듬으로 바꿔요.
애플 피트니스와 비교하면 차이가 선명해요. 애플이 차분하고 정제된 톤 안에서 최소한의 색을 쓰는 반면, The Outsiders는 훨씬 표현적이에요. 그라데이션을 적극적으로 깔고, 강도에 따라 색을 과감하게 분리하며, 그래프도 면적과 구조를 활용해 다층적으로 보여주거든요.
근데 그 표현이 산만하지 않은 이유가 있어요. 색 체계와 그래프 문법을 일관되게 유지하기 때문이에요. 맥시멀한 시각 언어를 사용하면서도 질서를 잃지 않는 방법. 결국 답은 문법이에요. 표현의 양이 아니라 표현의 규칙이 있느냐 없느냐. 이 앱은 그 규칙을 꽤 단단하게 가지고 있는 쪽이에요.