- Published on
당신의 운동파트너! 큐피트
- Authors
- Name
- Hyo814
1. 프로젝트 개요
목표
- 운동, 패션, 식단 관리 등 사용자 맞춤화된 데이터를 제공하는 웹 애플리케이션 제작
기술 스택
- 프론트엔드: React, HTML, CSS
- 백엔드: Flask, 웹 크롤링
주요 역할
- 프론트엔드 개발 담당
- 사용자 경험(UI/UX) 최적화
- UI/UX 디자이너와 협업하여 일관된 사용자 흐름 구현
- Redux를 활용한 상태 관리 최적화
- 품질 관리
- 오류 탐색 및 해결을 통해 코드 품질 향상
주요 기능 및 구성 요소
- 메인 페이지: 직관적이고 사용자 친화적인 인터페이스 제공
- 로그인 시스템: 사용자 인증 및 권한 관리
- 고객 관리 시스템: 고객 데이터를 효율적으로 관리하고 추적
- 운동, 패션, 식단 관리 기능: 각 기능별 사용자 맞춤형 데이터 제공
2. 과제 수행 동기
- 팀 프로젝트를 통해 협업 과정을 이해
- 프로젝트를 통해 실제 서비스 제작 경험을 쌓음
- 결과물을 포트폴리오로 활용
3. 과제 선정 배경
- 장기화된 코로나로 인해 집에서 다양한 활동을 권장
- 헬스장에 가지 않고 집에서도 쉽게 운동을 접할 수 있도록 하기 위함
4. 과제 내용
- 퍼스널 운동 & 식단 추천 시스템 구축
- 키, 몸무게, 나이, 성별 입력받아 BMI 수치, 기초대사량 등의 정보를 제공
- 정보(개인정보, 날씨정보)에 따른 맞춤 운동 추천
- 웹사이트 내에서 자세를 교정해주는 기능 구현
- 마일리지 기능 구현
- 작품의 기술성
- 로그인 정보를 통해 마일리지를 얻고 운동, 패션, 식단에 대한 정보를 손쉽게 접할 수 있음
- 자세 교정 기능을 통해 동영상의 모습과 일치하는지 비교 및 판단 가능
- 제작 과정
- DB 준비 완료
- 의류 정보를 크롤링함
- React와 Flask 연동
- 영상처리 알고리즘 구현
- 서버 배포
5. 과제 수행 과정에서의 문제점 및 해결 방법
문제점
- 부트스트랩 충돌
- 프론트와 백엔드 axios 연동 불일치
- 영상 처리 속도 느림
해결 과정
- 다른 부트스트랩 라이브러리 사용
- 개발자 도구를 활용해 오류 점검 및 수정
- TensorFlow.js와 ml5를 활용하여 속도 향상
6. 추후 개선 방향
- 자세 확인 기능의 정확도 향상
- 초기 계획이었던 웹페이지와 스마트폰 앱 연동 구현
- 마일리지 추가 기준을 운동량으로 설정
- 활용 방안을 모색하여 프로젝트 완성도 향상 및 포트폴리오 제작
7. 과제 수행 후 얻을 수 있는 결과 및 효과
- 코로나 시대에 대응하여 홈트레이닝을 권장하고 도움으로써 사회에 긍정적인 영향
- 맞춤형 운동 추천을 통해 다양한 운동을 시도할 기회 제공
- 자세 교정 서비스를 통해 올바른 방법으로 운동하여 부상의 위험 감소
- 운동복, 식단 등의 외적 요소 추천으로 운동에만 집중 가능
- 마일리지 제도를 통해 운동의 즐거움 제공
- 어플과 웹사이트 연동으로 이용자 편의성 극대화
소감
- 이번 프로젝트를 통해 배운 점:
- React를 이용해 웹 페이지 서비스를 구축하는 경험을 쌓았습니다.
- 회원가입, 로그인, 로그아웃 등 사용자 인증 기능을 구현할 수 있었습니다.
- 마이페이지 기능을 설계하고 개발하는 데 자신감을 얻었습니다.
- 프론트엔드와 백엔드 간의 충돌 문제를 소통으로 해결하는 방법을 배웠습니다.
- 데이터를 기반으로 아이템(옷, 식단 등)을 화면에 나열하는 과정을 이해했습니다.
- Bootstrap을 활용해 UI의 시각적 완성도를 높이는 방법을 익혔습니다.
- 느낀 점: 이 프로젝트는 저에게 단순히 기능 구현 이상의 경험을 선사했습니다. 팀원들과의 협업 속에서 문제를 해결하고, 사용자에게 가치를 제공하는 서비스를 만들어가는 과정은 무척 뜻깊었습니다. 특히, 프론트엔드 개발자로서 한 단계 더 성장했다는 자신감을 가지게 되었고, 앞으로도 사용자 친화적이고 매력적인 웹 서비스를 만들기 위해 계속 노력하고 싶습니다.
사진 캡쳐본
