HELLGATER — 운동을 RPG처럼! 게임화 피트니스 웹앱 개발기

Q: 운동, 왜 늘 작심삼일로 끝날까?

운동이 작심삼일로 끝나는 핵심 이유는 '오늘 한 만큼'이 눈에 보이지 않기 때문입니다. 레벨도, 점수도, 보상도 없으니 재미가 붙기 전에 지칩니다.

Q: 무엇을 위한 앱인가 — 목적?

HELLGATER의 목적은 운동의 모든 순간을 눈에 보이는 성장으로 바꾸는 것입니다. 스쿼트 한 세트가 경험치가 되고, 꾸준함이 등급이 되고, 새 운동이 해금할 스킬이 됩니다.

Q: 무엇을 목표로 하는가 — 목표?

HELLGATER는 지속·방향·성장 실감·안전한 자세라는 4가지 목표를 시스템으로 구현합니다.

Q: 🎮 RPG 캐릭터 육성?

레벨, 경험치, 등급 시스템으로 운동 성장을 수치화합니다. 7개 부위(어깨/가슴/등/팔/복근/힙/다리)가 각각 독립적으로 레벨업하며, Bronze부터 Challenger까지 7단계 등급으로 실력을 구분합니다.

운동, 왜 늘 작심삼일로 끝날까?
무엇을 위한 앱인가 — 목적
무엇을 목표로 하는가 — 목표
이런 분께 추천합니다 — 적정 사용자
주요 기능
🎮 RPG 캐릭터 육성
💪 운동 기록 & 분석
🌳 스킬트리 시스템
🗺️ 맵 탐험 (커리큘럼)
📹 AI 영상 폼 분석
🏆 퀘스트 & 업적
💎 포인트 & 상점
기술 스택
스크린샷 갤러리
HELLGATER 체크리스트 — 지금 확인할 것

운동, 왜 늘 작심삼일로 끝날까?

운동이 작심삼일로 끝나는 핵심 이유는 ‘오늘 한 만큼’이 눈에 보이지 않기 때문입니다. 레벨도, 점수도, 보상도 없으니 재미가 붙기 전에 지칩니다. HELLGATER는 이 지점에서 출발한 게임화 피트니스 웹앱으로, 게임에서 캐릭터를 키우듯 내 몸을 키우는 경험을 제공합니다.

운동을 RPG처럼! 게임화 피트니스 웹앱 HELLGATER를 소개합니다. 운동할수록 캐릭터가 레벨업하고, 164개 운동을 스킬로 해금하며, 25주 커리큘럼을 게임 맵처럼 탐험하는 서비스입니다.

개발 형태: 1인 풀스택 개발
기술 스택: React + Node.js + PostgreSQL
라이브 데모: https://hellgater-web-kr.fly.dev

무엇을 위한 앱인가 — 목적

HELLGATER의 목적은 운동의 모든 순간을 눈에 보이는 성장으로 바꾸는 것입니다. 스쿼트 한 세트가 경험치가 되고, 꾸준함이 등급이 되고, 새 운동이 해금할 스킬이 됩니다. ‘운동해야 한다’는 부담을 ‘오늘도 레벨업하고 싶다’는 즐거움으로 전환합니다.

무엇을 목표로 하는가 — 목표

HELLGATER는 지속·방향·성장 실감·안전한 자세라는 4가지 목표를 시스템으로 구현합니다.

지속: 일일 퀘스트·연속 출석·등급 시스템으로 ‘내일도 하고 싶게’ 만들기
방향: 25주 커리큘럼 맵으로 초보도 길을 잃지 않게
성장 실감: 1RM 자동 계산과 부위별 레벨로 어제보다 강해진 나를 숫자로 확인
올바른 자세: AI 영상 폼 분석으로 다치지 않고 제대로

이런 분께 추천합니다 — 적정 사용자

HELLGATER는 동기부여가 필요한 초보자부터 데이터 기반 관리를 원하는 헬스족까지 모두를 대상으로 합니다.

운동이 늘 작심삼일로 끝나 동기부여가 절실한 분
헬스장에 가도 뭘 어떻게 해야 할지 막막한 초보
혼자 하면 지루해서 게임처럼 재미가 필요한 분
레벨업·업적·랭킹 같은 성취감에 반응하는 분
운동 기록을 체계적으로 쌓고 데이터로 보고 싶은 홈트·헬스족

게임을 끄듯 멈추지 마세요. 운동을 게임처럼 켜는 순간, 꾸준함은 따라옵니다.

주요 기능

HELLGATER는 캐릭터 육성·기록 분석·스킬트리·맵 탐험·AI 폼 분석·퀘스트·상점까지 7개 핵심 기능으로 구성됩니다. 아래 표로 전체 구조를 먼저 확인하세요.

기능	핵심 내용	적용 기술
RPG 캐릭터 육성	7개 부위별 레벨, Bronze~Challenger 7단계 등급	상대적 강도 기반 EXP 계산, DB 트랜잭션
운동 기록 & 분석	Epley 공식 기반 1RM 자동 계산, 스마트 무게 추천	React Query 실시간 동기화
스킬트리 시스템	164개 운동을 등급별·부위별 스킬로 해금	Canvas 트리 시각화, Lazy Loading
맵 탐험(커리큘럼)	5속성 대륙, 25주 운동생리학 기반 콘텐츠	SVG 인터랙티브 맵, 진행도 기반 잠금
AI 영상 폼 분석	영상 업로드 후 자세 정확도 평가·궤적 시각화	Supabase Storage, Canvas 궤적 시각화
퀘스트 & 업적	일일/주간 퀘스트, 연속 출석 스트릭 보너스	자정 리셋, Race Condition 방지 트랜잭션
포인트 & 상점	포인트 충전·적립, 아이템 구매, 프로그램 구독	결제 콜백 처리, 포인트 트랜잭션 로그

🎮 RPG 캐릭터 육성

레벨, 경험치, 등급 시스템으로 운동 성장을 수치화합니다. 7개 부위(어깨/가슴/등/팔/복근/힙/다리)가 각각 독립적으로 레벨업하며, Bronze부터 Challenger까지 7단계 등급으로 실력을 구분합니다.

운동할수록 캐릭터 레벨 상승
7개 부위별 독립 레벨 (어깨/가슴/등/팔/복근/힙/다리)
Bronze ~ Challenger 7단계 등급
일일 퀘스트 & 연속 출석 보상

기술 구현 — 상대적 강도 기반 EXP 계산 공식, 1RM 대비 무게로 공정한 경험치 부여, 레벨업 시 DB 트랜잭션 처리.

💪 운동 기록 & 분석

Epley 공식으로 1RM을 자동 계산하고, 성별·체중 기반으로 스마트 무게를 추천합니다. 세트/횟수/무게를 입력하면 실시간으로 통계 그래프에 반영됩니다.

부위별 운동 선택 인터페이스
세트/횟수/무게 직관적 입력
Epley 공식 기반 1RM 자동 계산
성별/체중 기반 스마트 무게 추천
운동 히스토리 & 통계 그래프

기술 구현 — React Query로 실시간 동기화, 운동별 표준 무게 비율 데이터, 트랜잭션으로 기록 + EXP 동시 처리.

🌳 스킬트리 시스템

164개 운동을 스킬 형태로 해금하고 마스터하는 시스템입니다. 등급별·부위별로 스킬트리가 분리되어 있고, 164개 3D 클레이 아트 아이콘과 자세 인증 마크로 시각적 성취감을 제공합니다.

등급별 스킬 배치 (Bronze~Challenger)
부위별 스킬트리 분리
164개 3D 클레이 아트 아이콘
자세 인증 마크 시스템
스킬 해금 조건 & 마스터리 레벨

기술 구현 — Canvas 기반 트리 시각화, 선행 스킬 의존성 그래프, 이미지 Lazy Loading 최적화.

🗺️ 맵 탐험 (커리큘럼)

25주 운동 교육 과정을 게임 맵처럼 진행하는 기능입니다. 무속성/땅/불/바람/물, 5속성 대륙을 챕터별 스테이지 순으로 클리어하며 운동생리학 기반 콘텐츠를 학습합니다.

5속성 대륙: 무속성/땅/불/바람/물
챕터별 스테이지 순차 진행
운동생리학 기반 콘텐츠
마스코트 바알시불과 함께 여정
스테이지 클리어 보상

기술 구현 — SVG 기반 인터랙티브 맵, CSS 애니메이션(나무, 물결), 진행도 기반 노드 잠금/해금.

📹 AI 영상 폼 분석

운동 영상을 업로드하면 AI가 자세 정확도를 평가하고 바벨/덤벨 궤적을 시각화해 피드백합니다. 부상 없이 올바른 자세로 운동할 수 있도록 개선 포인트를 구체적으로 제시합니다.

운동 영상 업로드
AI 기반 자세 정확도 평가
바벨/덤벨 궤적 시각화
개선 포인트 피드백

기술 구현 — Supabase Storage 영상 저장, 분석 결과 JSON 저장, Canvas 궤적 시각화.

🏆 퀘스트 & 업적

일일/주간 퀘스트와 연속 출석 스트릭 보너스로 매일 접속할 동기를 부여합니다. 퀘스트를 완료하면 EXP와 포인트가 보상으로 지급되고, 업적 배지를 수집할 수 있습니다.

일일/주간 퀘스트 시스템
퀘스트 완료 시 EXP/포인트 보상
연속 출석 스트릭 보너스
업적 배지 수집

기술 구현 — 자정 기준 일일 퀘스트 리셋, 트랜잭션으로 퀘스트+보상 원자적 처리, Race Condition 방지.

💎 포인트 & 상점

포인트 충전·적립·구매·구독까지 결제 연동 경제 시스템입니다. 신규 가입 시 웰컴 포인트가 지급되고, 운동을 완료할 때마다 포인트가 쌓여 상점 아이템 구매나 트레이너 프로그램 구독에 사용됩니다.

포인트 충전 (결제 연동)
신규 가입 웰컴 포인트
운동 완료 시 포인트 적립
상점 아이템 구매
트레이너 프로그램 구독

기술 구현 — 결제 콜백 처리(성공/실패), 포인트 트랜잭션 로그, 관리자 포인트 조정 기능.

기술 스택

HELLGATER는 React 18 + Node.js 20 + PostgreSQL 기반의 풀스택 아키텍처로 구축되었습니다. 프론트엔드는 TypeScript와 Redux Toolkit, 백엔드는 Prisma ORM과 JWT 인증을 사용합니다.

구분	기술
Frontend	React 18, TypeScript, Vite, Redux Toolkit, React Query, Tailwind CSS, Framer Motion
Backend	Node.js 20, Express, Prisma ORM, PostgreSQL, JWT Auth, Zod
Infrastructure	Docker, Fly.io, Supabase, GitHub Actions