개인 피트니스 웹사이트

Next.js 15, Tailwind CSS, Framer Motion, Recharts로 구축된 계정이 필요 없는 무료 개인 피트니스 추적기입니다.

데모 링크

개요

• 역할: 풀스택 개발자 & UI/UX 디자이너
• 기술 스택: Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Recharts, Vitest, Playwright
• 핵심 결과: 데이터베이스 구축 비용이 전혀 없는 100% 서버리스 형태의 프라이빗 클라이언트 사이드 데이터 아키텍처
• 요약: 맞춤형 운동 계획, 칼로리 목표 설정, 진행 상황 추적 및 영양 기록을 제공하는 계정이 필요 없는 무료 개인 피트니스 플랫폼입니다. 불필요하게 무거운 상용 유틸리티를 우회하여 개인적으로 사용하기 위해 제작되었으며, 계정 생성 없이 모든 데이터를 사용자의 브라우저 로컬 스토리지에만 안전하게 저장합니다.

문제 정의

• 도전 과제: 상용 피트니스 플랫폼들은 맞춤형 일일 목표 설정, 다량 영양소 비율 분석, 운동 기록 등 필수적인 추적 기능을 유료 구독 장벽 뒤에 가두어 두고 있습니다.
• 대상 사용자: 상용 추적기를 대체할 수 있는 깔끔하고 개인정보를 존중하며 완전히 무료인 대안을 통해, 주로 개인적인 일상 사용을 위해 구축되었습니다.
• 제약 조건: 백엔드 데이터베이스 없이 운동 계획, 활성 로그, 맞춤 식품과 같은 관계형 구조를 저장하기 위해서는 신뢰할 수 있는 클라이언트 사이드 직렬화 스키마가 필요했습니다.

접근 방식 및 결정

• 아키텍처: 초기 레이아웃의 서버 사이드 생성과 동적인 클라이언트 사이드 상태 훅을 위해 Next.js App Router를 활용하는 로컬 퍼스트 React SPA 패턴을 적용했습니다.
• 주요 결정: 외부 데이터베이스를 통합하는 대신, 8개의 독립된 브라우저 로컬 스토리지 키를 개별 관계형 스키마 테이블처럼 활용했습니다.
• 트레이드오프: 완전하고 즉각적인 개인정보 보호와 호스팅 유지 관리 비용 제로(수동 JSON 내보내기/가져오기 백업 기능 제공)를 위해 기기 간 네이티브 동기화 기능을 절충했습니다.
• 데이터 흐름: 사용자 상호작용 -> React 훅 상태 -> localStorage 동기화 -> 동적 UI 레이아웃 업데이트 및 Recharts 시각화.

핵심 결과 및 영향

• 결과: 제 개인의 운동 및 영양 워크플로우에 정확히 맞춘 완전히 개인화된 일상 유틸리티입니다.
• 비교: 주류 상용 추적기들의 유료 구독 장벽, 회원 가입 절차, 높은 구독 비용을 피할 수 있습니다.
• 영향: 일상적인 개인 용도로 상용 칼로리 및 운동 추적기를 완전히 대체하여 모든 건강 지표를 온전히 로컬에 유지하고 있습니다.

기술적 심층 분석

• 주목할 만한 세부 사항: Next.js에서 SSR 불일치 및 하이드레이션 오류를 방지하기 위해 localStorage의 직렬화된 데이터를 안전하게 파싱하는 커스텀 React 훅을 구현했습니다.
• 검증: Playwright E2E 테스트를 사용하여 다양한 뷰포트 크기에서 UI 흐름과 반응형 레이아웃을 검증했습니다.
• 최적화: 초기 페이지 번들 크기를 가볍게 유지하고 높은 Google PageSpeed 점수를 확보하기 위해, 무거운 Recharts 차트 모듈을 지연 로딩(Lazy loading)했습니다.
• 코드 품질: 엄격 모드(Strict-mode) TypeScript 컴파일, 경로 기반 모듈 앨리어싱(Alias), 그리고 모듈식 레이아웃 아키텍처를 적용했습니다.

회고

• 개선 방향: 향후 버전에서는 타사 서버에 개인 건강 지표를 저장하지 않고도 기기 간 동기화가 가능하도록 WebRTC 피어 투 피어(P2P) 데이터 동기화를 구현할 계획입니다.
• 성공 요인: Tailwind v4와 shadcn/ui를 사용하여 네이티브 앱처럼 느껴지는 아름답고 반응형인 다크 테마 대시보드를 제공했습니다.
• 교훈: 레이아웃 스키마가 변경될 때 영구적인 브라우저 상태 패턴을 처리하고 클라이언트 사이드 데이터 마이그레이션 전략을 수립하는 데 대한 이해를 깊이 넓혔습니다.

나의 기여

• 풀스택 개발: Next.js 15를 사용하여 온보딩 설문지, 개인화된 계획 계산, 칼로리 로그 추적 및 맞춤형 영양 입력 폼을 구축했습니다.
• UI/UX 디자인: 다크 테마 사용자 인터페이스, 반응형 그리드, 대화형 대시보드 카드, 그리고 유연한 Framer Motion 애니메이션을 설계했습니다.
• 아키텍처 및 성능: localStorage 키 전략, 데이터 검증 래퍼(Wrapper), 그리고 최적화된 차트 렌더링 파이프라인을 설계했습니다.

프로젝트 아키텍처

이 애플리케이션은 Next.js 15를 기반으로 구축된 현대적이고 클라이언트 중심적인 모듈러 아키텍처를 따릅니다.

• 계층형 구조: 데이터 추적 로직(커스텀 훅)과 시각적 프레젠테이션 컴포넌트를 분리했습니다.
• 기능 모듈: 온보딩, 운동, 영양 추적 및 진행 차트와 같은 기능별로 논리적으로 구성했습니다.
• 상태 관리: 커스텀 래퍼를 사용하여 React 상태 훅을 브라우저 스토리지 계층과 반응형으로 동기화했습니다.
• 리팩토링 및 개선: 성능 및 핵심 웹 바이탈(Core Web Vitals)을 최적화하기 위해 무거운 차트 라이브러리에 동적 임포트(Dynamic Import)를 적용했습니다.

데모 미리보기

• 대시보드 뷰: 일일 칼로리 섭취량 개요, 진행 중인 운동 계획 체크리스트, 주간 진행 상황 시각화 차트.
• 운동 플래너: 맞춤 루틴 생성기 및 프로그램 선택기.
• Calorie Tracker: 맞춤 추가 식품 리스트가 포함된 다량 영양소 추적기.

호스팅 안내:
라이브 애플리케이션은 Vercel에 배포되어 있으며, pfwfm.vercel.app에서 가입 없이 즉시 이용할 수 있습니다.