전체 프로젝트

FYL / 독립 제품 / 2026

다음 한 번을 위해.

점진적 과부하는 더 쉽게 기록하고, 꾸준함은 함께 나눌 수 있도록.

FYL 둘러보기
담당
프로덕트 디자인·풀스택 개발
범위
앱·웹·백엔드·출시
플랫폼
iOS · Android · 웹 · Apple Watch
핵심 흐름을 담은 모바일 UI. 예시 운동 데이터를 사용했습니다.

01 / 출발점

노력을 눈에 보이게. 꾸준함을 함께 나누게.

기술과 AI로 점진적 과부하를 더 쉽게 기록하고, 재미있게 동기를 얻고, 사람들과 나눌 수 있을까? 이 질문에서 시작해 반복해서 쓸 수 있는 운동 계획과 실시간 기록, 세션 사이에 쌓이는 변화를 연결하는 FYL을 만들었습니다.

출시한 제품의 중심에는 운동의 흐름이 있습니다. 다음에 무엇을 할지 알고, 실제로 한 운동을 기록하고, 다시 돌아올 이유를 찾는 것. 루틴과 개인 기록, 친구와의 연속 운동, 리그가 그 순간들을 연결합니다.

  1. 운동 전

    계획을 다시 만들 필요 없이 다음 운동이 명확하게.

  2. 세트 사이

    중량과 횟수, 휴식 시간을 손이 닿는 곳에.

  3. 시간이 지나면

    이해할 수 있는 변화와 함께 나눌 수 있는 꾸준함.

02 / 운동 기록

작은 동작을, 계속 반복하니까.

세트 행은 운동 중 가장 자주 돌아오는 부분입니다. 이전 기록으로 빈 입력값을 채우고, 중량과 횟수를 바로 조절하고, 세트를 완료하면 휴식 타이머가 시작됩니다. 이 동작들을 한곳에 모았습니다.

아래에서 세트 값을 바꾸고 완료해 보세요. 볼륨이 함께 바뀝니다. 예시 데이터를 사용해 핵심 상호작용을 보여 주는 케이스 스터디 데모입니다.

인터랙티브 데모 · 예시 데이터
푸시 데이
볼륨200kg
완료1/ 4

바벨 벤치 프레스

W2010✓
1
2
3

세트 기록해 보기

같은 정보 구조, 두 가지 환경.

03 / 디자인 결정

시선을 위한 시스템.

로고 디자인 / 스케치북에서 앱 아이콘까지

‘Forge’를 형태로 풀어내기.

Forge Your Lift를 어떤 모습으로 표현할 수 있을지 종이 위에서 탐색했습니다. 망치와 운동하는 사람, 동물 마스코트, F를 결합한 모루까지. 다양한 연필 스케치에서 녹색 마커 시안으로 발전시켰고, 모루 형태는 최종 아이콘으로 이어졌습니다.

Forge Your Lift라는 제목 아래 망치, 운동하는 사람, 글자, F 모양 모루를 연필로 그린 스케치북.
01 / 아이디어 탐색도구와 인물, 글자, 모루 실루엣으로 이름을 풀어낸 초기 연필 스케치입니다.사진 크게 보기 ↗
동물 마스코트, F 모양 모루 앱 아이콘, 망치를 든 인물을 녹색 마커로 그린 스케치북.
02 / 색상으로 비교둥근 사각형 안의 F 모양 모루를 포함해 세 가지 방향을 녹색 마커로 비교했습니다.사진 크게 보기 ↗
녹색 배경 위에 흰색과 연녹색의 F 모양 모루가 있는 최종 FYL 앱 아이콘.
03 / 최종 로고F 모양 모루와 녹색 배경을 유지하면서 손으로 그린 아이디어를 간결한 기하학적 형태로 다듬었습니다.
  1. 01

    한 화면에 하나의 중심 행동.

    Home은 오늘 할 일을, Workout은 운동 계획을 맡도록 나눴습니다. 계획 화면에서 서로 경쟁하던 시작 버튼과 중복 통계를 덜어냈습니다.

  2. 02

    숫자가 이야기를 하도록.

    데이터에는 Geist Mono를, 읽는 글에는 Spline Sans를 썼습니다. 화면별 스타일 대신 공통 타이포그래피 역할을 적용하고, 검사 스크립트로 일관성을 유지했습니다.

  3. 03

    피드백에는 목적을.

    녹색은 행동과 성취, 호박색은 휴식과 시간에 사용합니다. 세트 완료와 개인 기록, 운동 요약에는 피드백을 주고, 모션 감소 설정도 지원합니다.

운동과 세트, 시작 버튼이 있는 FYL 루틴 화면.
세트와 휴식 목표를 저장해 운동 전에 계획을 준비합니다.
벤치 프레스 세트를 조작하는 FYL 다크 모드 기록 화면.
진행 중인 운동의 시간, 볼륨, 세트 조작을 모았습니다.
세트 완료 후 휴식 카운트다운이 표시된 FYL 운동 화면.
운동 화면에서 호박색 카운트다운으로 회복 시간을 확인합니다.
시간, 볼륨, 세트 수와 공유 설정을 보여 주는 FYL 요약 화면.
저장 전에 세션을 정리하고, 공유 범위는 운동자가 선택합니다.

04 / 성장과 사람들

기록이 쌓이면, 변화가 보이도록.

기록은 다시 읽을 수 있을 때 의미가 있습니다. FYL은 볼륨 추이, 개인 기록, 추정 1RM과 근육별 운동량을 경험 안으로 가져옵니다. 웹 대시보드에서는 긴 기간의 변화를 더 넓게 볼 수 있습니다.

운영 중인 FYL 웹 앱에서 녹화했습니다. 제품 성장 지표가 아닌 운동 기록입니다.

05 / 기기를 넘어서

같은 운동, 더 작은 화면.

Apple Watch는 네이티브 컴패니언 앱으로 만들었습니다. 휴대폰의 루틴을 손목으로 보내고, HealthKit 운동 세션과 함께 세트를 기록하고, 끝난 운동을 다시 휴대폰으로 보내 저장합니다.

Watch는 진행 중인 운동에 집중하고, 계정 처리와 공통 저장 경로는 휴대폰이 맡습니다.

벤치 프레스 세트를 조작하는 FYL 다크 모드 기록 화면.

휴대폰

루틴 + 단위완료한 운동휴대폰에서 Supabase로 저장
운동 시간, 심박수, 칼로리, 세트 진행 상황을 보여 주는 FYL Apple Watch 앱.

Apple Watch

컴패니언 앱의 데이터 전달 과정을 표현한 애니메이션입니다.

06 / 확장

작동하게 만드는 것은 시작에 불과했습니다.

규모를 키우는 일은 예상보다 어려웠습니다. 캐싱을 추가하고 Supabase와 Vercel의 인프라를 활용하기 시작했습니다. 앱에서 자주 다시 보는 데이터와 CDN에 캐싱할 수 있는 공개 콘텐츠를 나누는 것이 중요했습니다.

앱 / 쿼리 캐시Supabase / 원본 데이터
공개 페이지 / CDN공개 운동 카탈로그

앱 데이터 재사용

TanStack Query로 공통 캐시를 둡니다. 일정 시간 데이터를 최신 상태로 보고, 창에 다시 포커스가 갔다고 바로 재요청하지 않습니다.

전송량 줄이기

운동 목록은 화면에 필요한 필드만 요청합니다. 전체 설명은 상세 화면에서 불러오고, 검색과 필터는 불러온 목록에서 처리합니다.

공개 페이지 캐싱

공개 운동 페이지는 CDN과 stale-while-revalidate를 활용합니다. 개인 운동 데이터는 인증된 경로로 처리합니다.

07 / 출시와 회고

출시했고, 계속 배웁니다.

  • App Store 출시
  • Google Play 출시
  • 웹 + 네이티브 Watch 앱

성능도 제품의 일부입니다.

캐싱과 작은 데이터 전송량, 서비스 인프라도 앱의 반응성을 만드는 요소였습니다. 제품을 만드는 동안 확장성에도 신경 써야 했습니다.

리디자인에는 지킬 수 있는 규칙이 필요합니다.

색상만으로는 화면들이 하나가 되지 않았습니다. 공통 타이포그래피와 행동 패턴, 자동 검사를 통해 유지할 수 있는 시각 시스템을 만들었습니다.

FYL

루틴을 준비하고, 한 세트 더. 그렇게 조금씩.

FYL은 기본 기록 기능을 무료로 제공하며, 선택형 Pro 기능과 함께 운영 중입니다.

다음 프로젝트Pallav Panigrahi