운동을 RPG처럼! 게임화 피트니스 웹앱 HELLGATER를 소개합니다. 운동할수록 캐릭터가 레벨업하고, 164개 운동을 스킬로 해금하며, 25주 커리큘럼을 게임 맵처럼 탐험하는 서비스입니다.
- 개발 형태: 1인 풀스택 개발
- 기술 스택: React + Node.js + PostgreSQL
- 라이브 데모: https://hellgater-web-kr.fly.dev
운동, 왜 늘 작심삼일로 끝날까?
헬스장 3개월 끊고 두 번 가본 적, 누구나 있습니다. 의지가 약해서가 아닙니다. 운동은 ‘오늘 한 만큼’이 눈에 보이지 않기 때문입니다. 레벨도, 점수도, 보상도 없으니 재미가 붙기 전에 지칩니다.
HELLGATER는 여기서 출발했습니다. 게임에서 캐릭터를 키우듯, 내 몸을 키우면 어떨까?
무엇을 위한 앱인가 — 목적
운동의 모든 순간을 눈에 보이는 성장으로 바꿉니다. 스쿼트 한 세트가 경험치가 되고, 꾸준함이 등급이 되고, 새 운동이 해금할 스킬이 됩니다. ‘운동해야 한다’는 부담을 ‘오늘도 레벨업하고 싶다’는 즐거움으로 바꾸는 것이 목적입니다.
무엇을 목표로 하는가 — 목표
- 지속: 일일 퀘스트·연속 출석·등급 시스템으로 ‘내일도 하고 싶게’ 만들기
- 방향: 25주 커리큘럼 맵으로 초보도 길을 잃지 않게
- 성장 실감: 1RM 자동 계산과 부위별 레벨로 어제보다 강해진 나를 숫자로 확인
- 올바른 자세: AI 영상 폼 분석으로 다치지 않고 제대로
이런 분께 추천합니다 — 적정 사용자
- 운동이 늘 작심삼일로 끝나 동기부여가 절실한 분
- 헬스장에 가도 뭘 어떻게 해야 할지 막막한 초보
- 혼자 하면 지루해서 게임처럼 재미가 필요한 분
- 레벨업·업적·랭킹 같은 성취감에 반응하는 분
- 운동 기록을 체계적으로 쌓고 데이터로 보고 싶은 홈트·헬스족
게임을 끄듯 멈추지 마세요. 운동을 게임처럼 켜는 순간, 꾸준함은 따라옵니다.
주요 기능
🎮 RPG 캐릭터 육성
레벨, 경험치, 등급 시스템으로 성장을 시각화합니다.
- 운동할수록 캐릭터 레벨 상승
- 7개 부위별 독립 레벨 (어깨/가슴/등/팔/복근/힙/다리)
- Bronze ~ Challenger 7단계 등급
- 일일 퀘스트 & 연속 출석 보상
기술 구현 — 상대적 강도 기반 EXP 계산 공식, 1RM 대비 무게로 공정한 경험치 부여, 레벨업 시 DB 트랜잭션 처리.
💪 운동 기록 & 분석
1RM을 자동 계산하고 스마트 무게를 추천합니다.
- 부위별 운동 선택 인터페이스
- 세트/횟수/무게 직관적 입력
- Epley 공식 기반 1RM 자동 계산
- 성별/체중 기반 스마트 무게 추천
- 운동 히스토리 & 통계 그래프
기술 구현 — React Query로 실시간 동기화, 운동별 표준 무게 비율 데이터, 트랜잭션으로 기록 + EXP 동시 처리.
🌳 스킬트리 시스템
164개 운동을 스킬로 해금하고 마스터합니다.
- 등급별 스킬 배치 (Bronze~Challenger)
- 부위별 스킬트리 분리
- 164개 3D 클레이 아트 아이콘
- 자세 인증 마크 시스템
- 스킬 해금 조건 & 마스터리 레벨
기술 구현 — Canvas 기반 트리 시각화, 선행 스킬 의존성 그래프, 이미지 Lazy Loading 최적화.
🗺️ 맵 탐험 (커리큘럼)
25주 운동 교육 과정을 게임처럼 진행합니다.
- 5속성 대륙: 무속성/땅/불/바람/물
- 챕터별 스테이지 순차 진행
- 운동생리학 기반 콘텐츠
- 마스코트 바알시불과 함께 여정
- 스테이지 클리어 보상
기술 구현 — SVG 기반 인터랙티브 맵, CSS 애니메이션(나무, 물결), 진행도 기반 노드 잠금/해금.
📹 AI 영상 폼 분석
운동 영상을 업로드하면 자세를 분석해 피드백합니다.
- 운동 영상 업로드
- AI 기반 자세 정확도 평가
- 바벨/덤벨 궤적 시각화
- 개선 포인트 피드백
기술 구현 — Supabase Storage 영상 저장, 분석 결과 JSON 저장, Canvas 궤적 시각화.
🏆 퀘스트 & 업적
일일/주간 퀘스트와 연속 출석 보상으로 동기를 부여합니다.
- 일일/주간 퀘스트 시스템
- 퀘스트 완료 시 EXP/포인트 보상
- 연속 출석 스트릭 보너스
- 업적 배지 수집
기술 구현 — 자정 기준 일일 퀘스트 리셋, 트랜잭션으로 퀘스트+보상 원자적 처리, Race Condition 방지.
💎 포인트 & 상점
포인트 충전, 아이템 구매, 프로그램 구독을 지원합니다.
- 포인트 충전 (결제 연동)
- 신규 가입 웰컴 포인트
- 운동 완료 시 포인트 적립
- 상점 아이템 구매
- 트레이너 프로그램 구독
기술 구현 — 결제 콜백 처리(성공/실패), 포인트 트랜잭션 로그, 관리자 포인트 조정 기능.
기술 스택
React, Node.js, PostgreSQL 기반 풀스택 아키텍처입니다.
| 구분 | 기술 |
|---|---|
| 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 |
스크린샷 갤러리
로그인
프로필
5속성 대륙 — 땅 / 불 / 바람 / 물
스테이지 — 무속성 / 땅 / 불 콘텐츠
운동 히스토리
리더보드
상점
프로그램
설정
운동을 게임처럼, HELLGATER. 직접 만져보고 싶다면 라이브 데모에서 확인해 보세요.
- GitHub: github.com/ggoomter/hellgater
- 개발: 배성원 (ggoomter@gmail.com)