프로젝트 요약
본 프로젝트는 트레이너의 회원 관리 부담을 줄이기 위해 기획되었다.
회원 : 운동·식단 사진을 업로드하면 AI 주간 리포트를 받아 볼 수 있다.
트레이너 : YOLO · LLM 기반 분석 ➔ 회원의 식단/운동 피드백 일괄 처리
실시간 수강 신청과 일정 리마인드로 양측 유저 모두 편리한 수업 진행
☞ 이를 통해 지속적인 운동 / 체계적 식단 관리를 달성한다.
- 시스템 모듈
- Frontend : React.js 기반 웹 애플리케이션, Electron으로 데스크탑 앱 확장
- Backend : Node.js, Express 기반 REST API 서버, MySQL DB 연동
- AI : YOLOv8, PyTorch, 건강관리를위한음식이미지 데이터셋,
- OpenAI API 활용 리포트 요약 생성
- Deploy : AWS EC2, RDS, S3 활용 클라우드 배포 및 스토리지 구성
공통
첫 시작 화면으로 Login을 할 수 있다.
아래의 회원가입을 누르게 되면, 이처럼 ID, PASSWORD, NAME, ROLE( 회원/트레이너) 를 선택해 간편하게 로그인할 수 있다.
회원버전
홈 화면이다. 위의 달력 3개는 스트릭으로, 운동을 가면 칸에 초록색으로 색깔이 칠해진다. 이는 깃허브의 잔디밭을 모티브로 만들어졌다. 아래의 요일 선택과 시간은 개인운동시간으로 선택을 등록/ 수정/ 삭제가 가능하도록 만들었다.
스케줄 화면이다. 자신의 트레이너명과 예약 스케줄을 확인할 수 있다.
파란색 박스 : 트레이너가 열어둔 예약할 수 있는 스케줄
초록색 박스 : 내가(회원) 예약해놓은 스케줄
빨간색 박스 : 트레이너가 관리하는 타 회원이 예약해놓은 스케줄
초록색 박스의 경우 24시간 전까지 취소가 가능하도록 만들었다.
운동기록 화면이다. 자신이 한 개인운동 / PT의 시간과 운동 내용을 짧게 기록할 수 있다. 달력의 날짜를 클릭하게 되면 '오운완' 사진도 찍어서 올릴 수 있다.
식단기록 화면이다. 달력의 날짜를 클릭하여, 트레이너가 추천한 식단을 확인할 수 있고, 식단 사진도 찍을 수 있다. 나의 하루 식사 칸에 사진이 나와 한눈에 오늘 하루의 식사를 읽을 수도 있다.
식단 사진은 분석을 통하여 칼로리와 트레이너가 추천한 식단과 얼마나 다른지도 확인할 수 있다.
운동 리포트 요약 화면이다. 운동 기록이 쌓이면 리포트가 자동으로 생성된다.
리포트가 생기게되면 위와같이 소모 칼로리, 근육 변화, 체중 변화가 보이고, 이미지로 시각화하여 직관적으로 근육량이 증가한 부위를 확인할 수 있다.
마이페이지 화면이다. 본인의 프로필을 등록할 수 있고, 나의 회원 번호 또한 알 수 있다. 후에 이 번호로 트레이너가 회원을 등록할 수 있다. 나의 트레이너 이름 또한 알 수 있으며, 운동기록 확인하기를 누르면 Record 페이지로 넘어간다.
트레이너 버전
홈 화면이다. 위에는 오늘/내일의 등록된 스케줄을 확인할 수 있다. 스케줄은 회원의 이름과 시간으로 표시된다.
달력의 날짜를 클릭하게 되면, 운동을 간 회원과 가지 않은 회원이 나타나 회원의 운동관리 역시 쉽게 체크할 수 있다. 운동 완료/미완료는 '오운완'사진의 등록 여부로 결정된다.
스케줄 화면이다. 편하게 박스를 클릭해서 PT가 가능한 시간을 열어둘 수 있다.
- 파란색 박스 : 내가(트레이너) 열어놓은 스케줄
- 주황색 박스 : 내가 열어놓은 시간대에 회원이 예약한 스케줄
주황색 박스를 클릭하면 어떤 회원이 예약하였는 지 확인할 수 있다.
운동기록 화면이다. 회원 선택란에서 회원을 선택하여, 그 회원이 어떤 운동을 했는 지기록을 확인할 수 있다.
회원 선택시 날짜, 시간, 한 운동과 세트, 반복, 중량을 볼 수 있고 회원이 남긴 메모 역시 읽을 수 있다.
식단관리 화면이다. 회원 선택을 통해 회원이 올린 아침, 점심, 저녁 식단을 확인할 수 있다.
)
아래의 식단등록 박스를 통해 회원에게 추천식단을 올릴 수도 있다.
마이페이지 화면이다. 트레이너 역시 프로필사진을 등록할 수 있다. 또한 회원에게 주어지는 회원 번호를 입력하여 쉽게 회원을 등록할 수 있고, 편하게 삭제 버튼을 눌러 삭제할 수도 있다.
1년동안의 졸업 프로젝트가 끝났다. 프론트엔드에 대해서 잘 배워보고싶어서 프론트를 담당하였는데,, 아무리 생각해도 나는 디자인은 좀 아닌 것 같다. 디자이너의 필요성을 절실하게 느꼈던 순간들이 꽤나 많았던 것 같다.
백엔드와의 연동에서 생각보다 많은 어려움을 겪었는데, 내가 원하는 것을 화면속에 잘 표현하는 것이 꽤나 어려웠다. 하지만 얻은 것도 많았다! 이번 프로젝트를 통해 백엔드, AI, 프론트엔드의 순환과 상호작용에 대해 깊은 이해를 할 수 있었다. 글이랑 영상만 보면서 공부하는 것보다 실제로 프로젝트를 통해 경험을 하는 것이 더 진실된 이해를 도와주는 것 같다.
아쉬움이 남기도 하지만, 내가 할 수 있는 선에서 최선을 다해 열심히 하였기 때문에 후회는 없다. 좋은 팀원들을 만나서 졸업 프로젝트를 성공적으로 마칠 수 있었던 것 같다.
이제 진짜 졸업프로젝트 끝!
