개요
코로나19 팬데믹 이후 일상 변화와 함께 건강에 대한 관심이 높아지며 홈 트레이닝이 새로운 운동 방식으로 자리 잡았습니다. 사람들은 헬스장을 대체할 간편한 운동 방법을 찾기 시작했고, 이를 계기로 다양한 온라인 콘텐츠와 플랫폼이 등장하며 홈 트레이닝의 인기가 급증했습니다. 그러나 기존 솔루션은 사용자의 운동 목표와 체력 수준에 맞는 개인화된 콘텐츠 부족, 운동 기록 및 성과 관리의 어려움, 꾸준한 운동을 위한 동기 부여와 커뮤니티 지원의 한계라는 문제를 안고 있었습니다. 이를 해결하기 위해 SWEATHOME은 개인 맞춤형 운동 콘텐츠와 체계적인 기록 관리 기능을 통해 홈 트레이닝의 효율성을 높이고, 초보자부터 숙련자까지 모두가 활용할 수 있는 최적화된 운동 경험과 지속적인 동기 부여를 제공합니다.
개발 기간
2024.04 ~ 2024.05 (4주)
참여 인원
2명 (프론트엔드 1명, 백엔드 1명)
주요 기능
홈 트레이닝 콘텐츠 시청
운동 시간 측정 및 기록
게이미피케이션 요소를 통한 꾸준한 운동 자극
AI 운동 코치를 통한 운동 독려
시스템 아키텍쳐
Frontend
Vue
Javascript
HTML5
CSS3
Axios
Pinia
Backend
Java
Spring Boot
MySQL
MyBatis
CI/CD
AWS
Collaboration
Gitlab
Mattermost
Figma
Notion
담당 역할
Youtube API를 활용한 영상 시청
Youtube API를 통해 가져온 운동 영상들을 시청한다
Chart.js를 활용한 운동 추이 그래프
운동 시간을 측정한 후 기록한 것을 그래프로 나타낸다
AI 운동 챗봇 구현
귀여운 컨셉의 AI 운동 코치에게 홈 트레이닝 조언을 받는다
랜덤 뽑기를 통한 캐릭터 도감
랜덤 뽑기를 통해 꾸준한 홈 트레이닝 및 운동 기록을 독려한다
Axios를 활용한 HTTP 요청 처리
HTTP 요청/응답을 처리하여 서버와 데이터를 주고받는다
Pinia를 활용한 상태 관리
상태를 관리하여 전역적으로 데이터를 공유하고 수정한다
서비스 화면
서비스 메인
메인에서 해당 서비스를 간단하게 소개합니다. 회원가입 및 로그인을 했을 때에만 영상 목록 페이지로 이동할 수 있습니다.
영상 목록 조회
Youtube API를 통해 가져온 영상들을 확인할 수 있습니다. 영상 검색 및 부위 별 조회가 가능합니다.
영상 상세 조회
영상을 시청하고 마음에 드는 영상에 좋아요를 누를 수 있습니다. 댓글을 통해 영상에 대한 평가를 남길 수 있습니다.
운동 시간 기록
캘린더에 운동 시간을 기록하고, 하단의 그래프를 통해 운동 시간 추이를 확인할 수 있습니다. 운동 기록 시 뽑기권이 제공되며, 이를 통해 도감을 채울 수 있습니다.
AI 운동 코치
귀여운 말투를 학습한 AI 운동 코치에게 꾸준히 운동을 독려받을 수 있고, 홈 트레이닝과 관련된 다양한 정보를 얻을 수 있습니다.
성과 및 배운 점
Vue의 기초 및 라이프사이클에 대한 이해
Vue의 반응형 데이터 바인딩과 디렉티브(v-if, v-for 등)를 활용하여 효율적으로 UI를 구성하고 관리하는 방법을 배웠습니다. 특히 Vue의 라이프사이클 훅(created, mounted, updated, destroyed)을 통해 컴포넌트의 생성, 업데이트, 제거 과정에서 필요한 로직을 적절히 배치할 수 있었습니다. 이를 통해 컴포넌트가 생성될 때 초기 데이터를 가져오거나, 상태가 업데이트될 때 특정 작업을 실행하는 등의 다양한 시나리오를 처리할 수 있었습니다.
Youtube API 활용
YouTube API를 활용하여 특정 키워드와 관련된 운동 영상을 검색하고 이를 서비스에 등록하는 작업을 경험했습니다. YouTube API의 검색 기능을 이용해 사용자 입력에 따라 적합한 운동 콘텐츠를 실시간으로 조회하고, 필요한 데이터를 효율적으로 가공하여 서비스에 적용하는 방법을 익혔습니다. 특히 API 응답 데이터를 처리하면서 데이터의 구조를 이해하고, 검색 결과에서 필요한 정보를 선별하여 사용자 친화적인 방식으로 제공하는 데 집중했습니다.
Axios를 활용한 요청 및 응답 처리
Axios를 이용해 RESTful API와 통신하며 데이터를 서버로 전송하거나 받아오는 과정을 경험했습니다. GET, POST, PUT, DELETE와 같은 다양한 요청 메서드를 사용하여 필요한 데이터를 효율적으로 처리할 수 있었고, 요청에 필요한 헤더 설정 및 파라미터 전달 방법도 익혔습니다. 또한, 응답 데이터를 활용하여 사용자 인터페이스를 동적으로 업데이트하는 방법과, 오류 발생 시 Axios의 인터셉터를 활용해 에러를 처리할 수 있었습니다.
Pinia를 활용한 전역 상태 관리
Vue의 상태 관리 라이브러리인 Pinia를 사용해 애플리케이션의 상태를 중앙에서 통합적으로 관리하며, 컴포넌트 간의 데이터 공유를 효율적으로 처리할 수 있었습니다. 상태를 정의하고 이를 컴포넌트에서 쉽게 액세스하거나 수정할 수 있었으며, 특히 Pinia의 모듈식 구조 덕분에 코드의 유지보수성과 가독성이 크게 향상되었습니다. 또한, 상태 변화에 따른 반응형 UI 업데이트와 Pinia의 플러그인 시스템을 활용한 로컬 스토리지 연동 및 디버깅 과정을 통해 상태 관리의 중요성을 실감할 수 있었습니다.