단순하면서도 풍부하게 표현해주세요
The Outsiders 스크린 하나씩 뜯어보기
풍부한 UI 표현의 정석
The Outsiders는 러닝과 사이클링을 중심으로 한 퍼포먼스 트래킹 앱입니다. 심박수, HRV, 수면, 훈련 부하 등의 생체 데이터를 기반으로 사용자의 현재 상태와 훈련 방향을 분석해주는 서비스입니다. 단순 기록을 넘어, 데이터를 통해 회복과 강도 균형을 해석하는 데 초점을 둡니다.
이 앱은 기존 피트니스 앱의 정제된 미니멀 UI와는 다른 결을 보입니다. 색과 그라데이션을 적극적으로 활용하고, 누적 그래프와 영역 기반 시각화를 통해 데이터를 구조적으로 표현합니다. 표현은 풍부하지만 질서를 잃지 않는 설계가 특징입니다. 본 글에서는 The Outsiders 앱 스크린을 인터페이스와 비주얼을 중심으로 분석해보겠습니다.
The Outsiders
과감한 시각적 표현이 돋보이는 브랜딩The Outsiders는 대중적으로 널리 사용되는 앱은 아닙니다. 그러나 몇몇 화면만 보더라도 기존 피트니스 앱이 지향해온 단순하고 정제된 미니멀한 방향을 과감히 넘어서는 시각적 시도가 느껴집니다. 그라데이션, 강도 기반 컬러 체계, 누적 그래프 구조처럼 보다 표현적인 요소들을 적극적으로 사용하면서도, 정보의 위계와 질서를 유지한다는 점이 인상적입니다.
최근 UI 트렌드가 다시 풍부한 표현과 감각적인 레이어를 탐색하고 있는 흐름 속에서, The Outsiders는 ‘맥시멀하지만 정리된’ 인터페이스가 어떻게 가능한지를 보여주는 사례입니다. 단순함을 포기하지 않으면서도 표현의 밀도를 높이는 방법, 그 균형에 대한 힌트를 이 앱에서 읽어볼 수 있습니다.
The Outsiders The Outsiders
정체성부터 제안하는 퍼포먼스 분석형 온보딩 화면스크린 | 앱을 최초 실행했을 때 노출되는 온보딩 및 초기 설정 스크린들입니다. 브랜드 아이덴티티 소개 → 이름 입력 → 건강 데이터 연동 → 성별·생년월일 입력 → 리마인더 설정 → 첫 세션 진입으로 이어지는 흐름입니다.
특징 | 다크 모드 기반의 배경 위에 네온에 가까운 핑크를 핵심 CTA 컬러로 사용하는 구조입니다. 이는 ‘아웃사이더(Outsider)’라는 콘셉트와 어울리는 밤·러닝·스트리트 감성을 시각적으로 강화합니다. 온보딩 첫 화면은 사전적 정의(“A person who likes to spend time outside”)를 제시하면서 브랜드의 세계관을 먼저 설명합니다. 전반적으로 정보 밀도는 낮고, 한 화면에 하나의 의사결정만 배치하는 단일 과업(single-task) 구조를 유지합니다. 이는 초기 이탈을 줄이기 위한 전형적인 온보딩 전략입니다.
차별점 | 일반적인 피트니스 앱이 ‘목표 설정’부터 시작하는 것과 달리, 이 앱은 정체성부터 제안합니다. 감성적 접근을 통해 사용자를 ‘아웃사이더’라는 캐릭터로 포지셔닝하는 방식입니다.
하루의 운동 가능 상태를 색과 숫자로 압축한 투데이 화면스크린 | 온보딩과 초기 설정을 마친 뒤 진입하는 메인 ‘Today’ 화면입니다. 앱 실행 시 기본 랜딩 화면으로 보이며, 하루의 컨디션과 훈련 가능 상태를 한눈에 보여주는 구조입니다.
특징 | 상단에 숫자를 크게 배치해 정보 위계를 명확히 했습니다. 색상(초록·블루·레드 계열)을 통해 상태를 즉각적으로 구분하고, 하단에는 심박·HRV 등 핵심 지표를 카드형으로 요약 노출합니다. 복잡한 그래프 대신 작은 라인 차트와 한 줄 해석 텍스트로 정보를 압축한 구조입니다.
차별점 | 운동 리스트 중심이 아니라 ‘오늘 운동해도 되는지’ 판단하는 분석 중심 구조입니다. 여러 데이터를 하나의 점수로 통합해 의사결정을 단순화한 점이 특징입니다.
개인 기준 정상 범위를 인포그래픽으로 풀어낸 심박 상세 화면스크린 | ‘Today’ 화면에서 Wellbeing 지표 중 Heart Rate 카드를 선택했을 때 진입하는 상세 분석 화면입니다. 수면 중 심박 데이터를 기반으로 최근 추세와 정상 범위 여부를 해석해주는 세부 리포트 화면입니다.
특징 | 상단에는 현재 수치(64 bpm)를 크게 배치하고, 그 아래에 “정상 범위 내”라는 해석 문장을 붙여 수치와 의미를 동시에 제공합니다. 중단에는 7일 라인 차트를 배치해 단기 추세를 보여주고, 평균·최대·최소 값을 카드형으로 요약합니다.
수면 단계와 생체 지표를 교차 분석하는 수면 화면스크린 | ‘Today’ 화면에서 Sleep 카드를 선택했을 때 진입하는 수면 상세 분석 화면입니다. 일일 준비도 점수의 근거가 되는 수면 데이터를 깊이 있게 보여주는 구조입니다.
특징 | 상단에는 “Excellent”처럼 질적 평가를 먼저 제시하고, 그 아래에 총 수면 시간·회복 수면 시간 등을 수치로 배치합니다. 정성 평가 → 정량 데이터 순의 위계입니다. 수면 단계는 타임라인형 스택 바 그래프로 표현됩니다. REM·Core·Deep이 색으로 구분되어 시간 흐름에 따라 배치되고, 심박·HRV·호흡수 등의 라인 그래프를 오버레이로 전환해 볼 수 있습니다. 하나의 타임라인에 여러 생체 지표를 겹쳐 비교할 수 있는 구조입니다.
하단 Overview 영역에서는 Duration·Consistency·Stages 탭으로 구분해, 막대그래프와 누적 스택 차트로 장기 추세를 보여줍니다. 특히 ‘Optimal Range’ 가이드 라인을 함께 표시해 단순 기록이 아니라 기준 대비 상태를 인지하게 합니다. 전체적으로 퍼플 그라데이션을 사용해 밤·수면 맥락을 시각적으로 통일하고, 데이터는 고채도 포인트 컬러로 대비시켜 가독성을 확보했습니다.
차별점 | 장점은 비주얼 언어가 매우 일관적이라는 점입니다. 퍼플 그라데이션 배경으로 ‘밤’이라는 맥락을 직관적으로 형성하고, 수면 단계는 블루·민트·퍼플 등 명확히 구분되는 컬러 체계를 사용해 인지 부담을 줄였습니다. 색만으로도 REM·Core·Deep이 구분되기 때문에 그래프를 빠르게 읽을 수 있습니다. 또한 타임라인형 스택 바 그래프는 시간의 흐름을 직관적으로 전달하면서도, 면적 대비 정보를 효율적으로 담아냅니다. 여기에 라인 그래프를 오버레이로 전환해 보여주는 방식은 하나의 레이아웃을 유지하면서 데이터만 교체하는 구조이기 때문에 시각적 안정감을 줍니다.
그래서 뭐가 좋나요 | 상단의 “Excellent” 같은 질적 평가를 대형 타이포로 먼저 제시하는 점도 강점입니다. 사용자는 복잡한 그래프를 보기 전에 결과를 먼저 이해하고, 이후 데이터를 확인하는 흐름을 따르게 됩니다. 다만 그래프 종류가 다양해 한 화면에서 시각적 자극이 다소 많게 느껴질 수 있다는 점은 트레이드오프로 볼 수 있습니다.
주간 부하와 강도 분포를 시각 패턴으로 정리한 퍼포먼스 분석 화면스크린 | 하단 탭의 ‘Progress’를 선택했을 때 진입하는 주간·장기 훈련 분석 화면입니다. Today가 일일 컨디션이라면, 이 화면은 주 단위 누적 부하와 트레이닝 패턴을 확인하는 섹션입니다.
특징 | 상단에는 주차별 데이터를 도트 기반 미니 차트로 정리합니다. 원의 크기로 부하 강도를 표현해 수치 대신 면적 대비로 변화를 읽게 합니다. 이는 수치를 나열하기보다 ‘변화의 크기’를 시각적으로 전달하는 방식입니다. Intensity Distribution은 수평 스택 바 그래프로 구성되어 비율을 색상으로 구분합니다. Fitness 카드 영역은 소형 스파크라인을 삽입해 최근 추세를 요약합니다. 개별 그래프는 단순하지만, 카드 단위로 모듈화되어 있어 정보 구조가 명확합니다.
훈련 강도를 해석해주는 트레이닝 포커스 화면스크린 | Progress 화면에서 ‘Intensity Distribution’ 혹은 ‘Training Focus’를 선택했을 때 진입하는 트레이닝 포커스 상세 화면입니다. 최근 훈련 강도 비율을 분석하고, 부족하거나 과도한 구간을 진단해 훈련 방향을 제안하는 전략적 리포트 역할을 합니다.
특징 | 이 화면의 핵심은 ‘데이터를 누적해서 보여주는 방식’입니다. 단일 수치가 아니라 분포의 구조를 시각화하고 있습니다. 스택 바와 누적 막대그래프는 총량보다 '균형'을 읽게 만드는 그래프입니다. 이는 이 앱이 훈련의 양보다 강도 구조의 비율을 중요하게 본다는 시각적 메시지입니다.
컬러 전략도 의미가 분명합니다. Low(노랑)–High(빨강)–Anaerobic(보라)로 갈수록 채도와 대비가 강해집니다. 이는 에너지 시스템의 부담 강도를 색으로 번역한 것입니다. 색의 긴장도가 곧 신체 스트레스 강도를 상징합니다.
차별점 | 진단을 데이터 위에 얹는 것이 아니라, 데이터보다 앞에 둔다는 점입니다. “Low Aerobic Shortage”라는 문장이 그래프 위에 먼저 등장합니다. 일반 앱이 사용자가 그래프를 해석해 결론을 도출하게 한다면, 이 화면은 이미 결론을 제시하고 그래프는 그 근거로 작동합니다.
점수 경쟁이 아닌 ‘적정 상태 관리’로 전달하는 지구력 화면스크린 | Progress 탭에서 ‘Endurance Fitness’를 선택했을 때 진입하는 지구력 상세 화면입니다. 주간·누적 부하 데이터를 기반으로 현재 지구력 상태를 해석하는 섹션입니다.
특징 | 그래프 배경을 Good·Fair·Low로 먼저 나누고 그 위에 점을 올려두는 방식은, 수치 자체보다 ‘상태의 맥락’을 먼저 읽게 만드는 설계입니다. 색도 공격적이지 않습니다. 붉은 경고 대신 차분한 옐로우 톤을 사용해, 이 지표가 기록 경쟁이 아니라 기반 체력 관리임을 시각적으로 전달합니다.
기간 범위를 7일, 4주, 6달 단위로 전환한 지구력 화면스크린 | Endurance Fitness 화면에서 기간을 7일·4주·6개월로 전환하는 뷰 선택 화면입니다. 동일한 지표를 서로 다른 시간 스케일로 확장해 보는 구조입니다.
특징 | 이 화면의 핵심은 레이아웃을 바꾸지 않고 시간 축만 바꾼다는 점입니다. 그래프 구조와 색, 구간 배치는 그대로 두고, 기간만 확장됩니다. 단기에서는 점들의 미세한 변동이 보이고, 중기에서는 평균의 흐름이 보이며, 장기에서는 상승·하락 방향성이 강조됩니다. 또한 6개월 화면에서는 상승 구간은 초록, 하락 구간은 주황으로 표시해 방향성을 즉각적으로 인지하게 합니다.
운동 기록을 시간의 흐름으로 보여주는 워크아웃 화면스크린 | 하단 탭의 Workouts 화면입니다. 주·월·연 단위로 운동 기록을 확인하고, 개별 세션 히스토리까지 내려가는 구조입니다.
특징 | 상단에 선형 그래프와 막대그래프를 함께 배치해 ‘추세’와 ‘총량’을 동시에 보여줍니다. 선은 누적 흐름을, 막대는 개별 기간의 강도를 의미합니다. 사용자는 숫자를 읽기보다 패턴을 먼저 보게 됩니다. 주·월·연으로 스케일을 바꿔도 그래프 구조는 유지되어, 데이터가 아니라 리듬을 보는 느낌을 줍니다. 또한 Training Load, Duration 등 핵심 지표는 카드형으로 모듈화되어 있고, 선택된 지표는 컬러로 강조됩니다. 이는 사용자가 어떤 기준으로 운동을 보고 있는지 명확히 인지하게 합니다.
한 번의 운동을 해석하는 세션 리포트 화면스크린 | Workouts에서 개별 세션을 선택했을 때 진입하는 운동 상세 화면입니다. 한 번의 운동을 요약·해석하는 리포트 구조입니다.
특징 | 이 화면은 강도를 색으로 구조화합니다. 보라(무산소)–빨강(고강도)–노랑(저강도)로 이어지는 컬러 스펙트럼이 세션의 에너지 분포를 직관적으로 번역합니다. 다크 배경은 대비를 높이면서도 시각적 소음을 줄여, 핵심 수치와 컬러 바에 시선이 자연스럽게 모이게 합니다. 심박 그래프는 과도한 장식을 배제하고 평균선만 고정해 리듬을 읽게 만드는 구조로, 색은 강조 지점에만 제한적으로 사용됩니다.
운동 강도를 숫자가 아닌 색의 스펙트럼으로 체감하게 만드는 운동 추가 화면스크린 | Workouts 화면에서 리스트 내 + 버튼을 눌렀을 때 나타나는 운동 추가 화면입니다. 수동으로 세션을 기록하고, 강도 체감을 입력하는 단계입니다. 운동 종류와 시간뿐 아니라, 사용자의 주관적 강도(Perceived Exertion)를 함께 기록해 훈련 데이터를 보완하는 역할을 합니다.
특징 | 이 화면의 핵심은 ‘강도’를 색으로 느끼게 만든다는 점입니다. 단순한 슬라이더가 아니라, 왼쪽의 차가운 청록에서 오른쪽의 보라·핑크로 이어지는 그라데이션 스펙트럼을 사용합니다. 색의 온도와 채도가 점점 강해지면서, 물리적 강도의 상승을 시각적으로 체감하게 합니다. 숫자 없이도 위치만으로 강약을 이해할 수 있는 구조입니다. Save 버튼 역시 강도 선택에 따라 컬러가 달라지며 화면 전체의 포인트 톤과 연결됩니다.
퍼포먼스 화면과 대비되는 중립 톤의 기준 설정 프로필 화면스크린 | 프로필 탭에서 진입하는 개인 설정 및 계정 관리 화면입니다. 사용자 정보 수정, 신체 지표 설정, 앱 관련 정보 접근이 이곳에서 이루어집니다.
특징 | 상단의 프로필 이미지는 원형 그라데이션으로 처리되어 브랜드 아이덴티티를 유지하되, 자극적이지 않게 균형을 맞춥니다. 또한 Edit Photo나 Close 버튼에만 핑크 포인트를 사용해, 상호작용 가능한 요소를 명확히 드러냅니다. 전반적으로 기능적이고 차분한 분위기로, 설정 화면에 필요한 안정감을 제공합니다.
분석의 기준값을 색과 범위로 설정하게 만드는 퍼포먼스 기반 설정 화면스크린 | 프로필의 Personal & Fitness Details에서 수면 목표(Sleep Goal)와 심박 구간(Heart Rate Zones)을 설정하는 화면입니다. 분석의 기준값을 직접 조정하는 영역입니다.
특징 | 이 화면은 설정 화면이지만 여전히 ‘강도’와 ‘범위’를 색으로 표현합니다. Sleep Goal 슬라이더는 차가운 블루에서 보라로 이어지는 그라데이션을 사용해 시간의 적정 범위를 시각화합니다. Heart Rate Zones 화면은 각 구간에 고유 컬러를 부여하고, 리스트 좌측에 색 막대를 배치해 강도 체계를 유지합니다. 보라·빨강·노랑으로 이어지는 구간 색은 운동 상세 화면과 동일해, 설정과 분석이 하나의 언어로 연결됩니다.
Apple의 Fitness 앱(좌)과 The Outsiders 앱(우)마치며
The Outsiders는 복잡한 생체 데이터를 다루지만, 화면은 의외로 단순하게 읽힙니다. 숫자는 크게, 그래프는 명확하게, 색은 역할을 나눠 사용합니다. 그라데이션은 단순한 배경 효과가 아니라 상태의 온도를 전달하는 장치로 쓰이고, 스택 그래프와 스파크라인은 통계를 리듬으로 바꿉니다. 영역을 먼저 만들고 그 안에 데이터를 배치하는 방식은, 정보를 구조로 이해하게 만드는 설계입니다. 단순한 표현처럼 보이지만, 그 안에는 충분히 많은 시각적 레이어가 담겨 있습니다.
그래픽적으로 보면 애플 피트니스가 전반적으로 차분하고 정제된 톤 안에서 최소한의 색을 사용하는 반면, The Outsiders는 훨씬 표현적입니다. 그라데이션을 적극적으로 쓰고, 강도에 따라 색을 과감하게 분리하며, 그래프도 면적과 구조를 활용해 다층적으로 보여줍니다. 다만 그 표현이 산만하지 않은 이유는 색 체계와 그래프 문법을 일관되게 유지하기 때문입니다. 맥시멀한 시각 언어를 사용하면서도 질서를 잃지 않는 방식, 표현을 풍부하게 가져가고 싶다면 이 앱이 좋은 참고 사례가 될 수 있습니다.
Apple Fitness 앱에 대해 궁금하신 분들께서는 아래 글을 참고하시면 좋겠습니다.