본문 바로가기
웹개발/DIOS

[웹개발 - DIOS] DIOS 팀 프로젝트

by 오엥?은 2023. 2. 26.
반응형

🖥  DIOS 

머신러닝을 이용하여 운동 횟수를 세어주고, 기록하여 운동 습관을 만들 수 있게 도와주는 웹 서비스 

 

📌  DIOS 제작 계기

Teachable Machine 이라는 머신러닝 API 를 알게됐다. 머신러닝에 대해 전혀 모르던 나도 쉽게 사용이 가능할 만큼 쉽고 재밌는 기능이었다. 프로젝트에 꼭 사용해 보고싶어서 생각하던 중, 포즈 학습 기능을 통해 운동 자세를 학습시켜 운동 횟수를 세어주는 기능을 만들어 보고싶다는 생각이 들었다. 팀원들에게 이 아이디어를 제안했더니 흔쾌히 수락하여 프로젝트를 진행하게 되었다.
 
요즘 사람들은 매체에 '홈 트레이닝' 을 검색만 해도 알 수 있듯이, 운동을 통한 자기관리에 관심이 많다. 꾸준히 하는 사람들도 많겠지만 작심삼일로 끝나버리는 사람들도 분명 있을 것이다. 운동 뿐만이 아니라 모든 일이 그렇겠지만 꾸준히 하려면 습관으로 만드는 것이 중요하다. 

'측정되지 않는 것은 관리할 수 없다' , '꾸준한 피드백은 결국 습관 형성으로 이어진다'
운동 개수를 세는 것으로 그치지 않고, 그것을 기록하여 셀프 피드백을 할 수 있게 한다면 운동을 습관으로 만드는 과정이 훨씬 쉬울 것 같았다. 
 
그래서 DIOS 는 단순 운동을 위한 웹 서비스가 아니고 기록을 통한 운동 습관을 만들어 주는 웹 서비스이다.
 

DIOS 의 메인 문구

📌  개발환경

• IntelliJ
• Amazon AWS
• SpringBoot
• HTML, CSS, JavaScript, Java, Thymeleaf
• MariaDB, MyBatis
• GITHUB
 

📌  배포

• AWS EC2 
 

📌  기능

✔️  로그인, 회원가입, 마이페이지
    - 이메일 인증기능, 카카오 로그인 API 
    - 프로필 수정, 회원정보 수정, 비밀번호 재설정, 주문내역 확인, 게시글/문의 내역 확인
    - 회원 탈퇴
 
✔️ 운동 횟수 세기, 기록장
    - 목표 설정
    - 운동 횟수 세기 (Teachable Machine API) : 스쿼트, 런지, 팔굽혀펴기
    - 운동 횟수 기록, 사진 기록, 일기장,  달력(FullCalendar API), 날짜 별로 기록 확인
 
✔️ 쇼핑몰
    - 관리자 : 상품 등록(CKEditor API)
    - 상품 목록, 상품 분류, 상품 랜덤 추천, 상품 상세 페이지, 상품 후기, 상품 별점
    - 장바구니, 주문
 
✔️ 게시판
    - 관리자 : 공지사항, 댓글 삭제 
    - 글 작성(CKEditor API), 글 수정, 글 삭제, 댓글, 대댓글, 좋아요, 비밀댓글
    - 게시글 목록, 게시글 검색 ( 제목+내용 / 제목 / 작성자 )
 

 

📌  내가 맡은 파트

🕹 홈 페이지 
2023.02.26 - [웹개발] - [웹개발 - DIOS] 홈 페이지

 

[웹개발 - DIOS] 홈 페이지

⌦ 홈 페이지 ☑︎ 홈 페이지 홈 페이지는 길어지더라도 모든 팀원들이 만든 기능이 보여졌으면 좋겠다는 생각을 했다. 그래서 모든 기능을 다 넣었다. • 메인 문구 들어가자마자 보이는 열심

pickmeplease.tistory.com

 
🕹 운동종류 선택 / 목표 설정 페이지
2023.02.22 - [웹개발] - [웹개발 - DIOS] 운동 목표 개수 설정 페이지

 

[웹개발 - DIOS] 운동 목표 개수 설정 페이지

⌦ 목표 개수 설정 페이지 ☑︎ 운동의 종류를 선택하는 기능 - HTML - CSS body > .main > .form > .select-container > .select:hover, body > .main > .form > .select-container > .select:focus, body > .main > .form > .select-container > .s

pickmeplease.tistory.com

 
🕹 Teachable Machine 을 이용한 운동 횟수 세는 페이지
2023.02.23 - [웹개발] - [웹개발 - DIOS] Teachable Machine 를 이용한 운동 횟수 세는 페이지

 

[웹개발 - DIOS] Teachable Machine 를 이용한 운동 횟수 세는 페이지

⌦ Teachable Machine 를 이용한 운동 횟수 세는 페이지 ☑︎ Teachable Machine https://teachablemachine.withgoogle.com/ Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learni

pickmeplease.tistory.com

 
🕹 기록장 페이지
2023.02.23 - [웹개발] - [웹개발 - DIOS] 기록장 페이지

 

[웹개발 - DIOS] 기록장 페이지

⌦ 기록장 페이지 ☑︎ 운동 개수를 기록장에 기록해 주는 기능 • 목표 개수를 달성했을 때 목표 개수를 달성하면 화면이 멈추고 2초 뒤에 성공화면이 뜨면서 record(기록) 버튼과 exit(home 화면으

pickmeplease.tistory.com

 
🕹 장바구니 페이지
2023.02.24 - [웹개발] - [웹개발 - DIOS] 장바구니 페이지 (1)

 

[웹개발 - DIOS] 장바구니 페이지 (1)

⌦ 장바구니 페이지 ☑︎ 장바구니 상품 목록을 출력하는 기능 carts table 을 몇 번을 고쳤는지 모르겠다. items table 과 관련이 있기 때문에 items table 만드는 것부터 items 파트 담당 팀원과 같이 머리

pickmeplease.tistory.com

2023.02.25 - [웹개발] - [웹개발 - DIOS] 장바구니 페이지 (2)

 

[웹개발 - DIOS] 장바구니 페이지 (2)

⌦ 장바구니 페이지 ☑︎ 체크박스 기능 - JavaScript // 체크박스 전체선택 / 전체해제 function selectAll(selectAll) { const checkboxes = document.getElementsByName('select'); checkboxes.forEach((checkbox) => { checkbox.checked = se

pickmeplease.tistory.com

 
🕹 주문 페이지 / 주문 완료 페이지
2023.02.25 - [웹개발] - [웹개발 - DIOS] 주문 페이지

 

[웹개발 - DIOS] 주문 페이지

⌦ 주문 페이지 ☑︎ orders table (DB) 장바구니 페이지(2) 에서도 다루었지만 orders table 을 따로 만든 이유는 하나로 만들게 되면 주문 완료하여 지워진 상품의 레코드를 더 이상 select 하지 못하게

pickmeplease.tistory.com

2023.02.25 - [웹개발] - [웹개발 - DIOS] 주문완료 페이지

 

[웹개발 - DIOS] 주문완료 페이지

⌦ 주문완료 페이지 ☑︎ 배송지 정보와 상품 정보 출력 기능 - Controller @RequestMapping(value = "orderSuccess", method = RequestMethod.GET) public ModelAndView getOrderSuccess(@SessionAttribute(value = "user", required = false) UserE

pickmeplease.tistory.com

 
🕹 랜덤으로 상품을 추천하는 기능
2023.02.26 - [웹개발] - [웹개발 - DIOS] 랜덤으로 상품 추천하기

 

[웹개발 - DIOS] 랜덤으로 상품 추천하기

☑︎ 랜덤으로 상품을 추천하는 기능 • 쇼핑몰 상품 목록 페이지 추천 상품은 한 번에 8개씩이다. 4개의 추천 상품이 랜덤으로 뜬 다음 1.5 초 뒤에 다른 4개의 상품이 뜬다. 새로고침하면 다른 8

pickmeplease.tistory.com

 
 

📌  프로젝트를 마치며

 프로젝트를 기획하고, 파트를 나누고, 기능을 구현하고, 완성하기까지 약 2달이 걸렸다. 프로젝트는 처음이라서 서툰 부분이 많았다. 지금 생각해 보면 가장 어려웠던 부분은 DB 설계부분이었다. 프로젝트 시작 전 간단히 설계해 보고, 기능 구현 전 최종 효율적으로 설계해 놓고 시작했다고 생각했지만 막상 프로젝트가 진행되니 바꿔야할 것 투성이였다. 그래서 프로젝트를 진행하며 DB table 을 엄청 수정했다. 프로젝트를 마친 지금, 다시 정리하면서 보는 데도 바꾸고 싶은 거 투성이다. 계속 해 봐야 늘 것 같다.
 
 결국 원하는 방향으로 웹 사이트를 만들고 배포까지 했다. 팀 프로젝트라서 팀원들과 머리 맞대고 고민도 많이 하고 서로 엄청 도와줬다. 같은 목표를 향해 가는 과정에서 500 뜨면 다같이 짜증내고, 성공하면 같이 기뻐해줘서 재밌었다. 이게 팀 프로젝트의 묘미인 것 같다. 이 프로젝트를 시작으로 더 많은 기능을 만들 준비를 마쳤다.
 

 

반응형