EXPERIENCE
SHabit는 Stretching Habit의 약자입니다.
SHabit은 사용자의 자세를 트래킹하여 올바르지 않은 자세를 유지할 시 경고해주고, 좋은 습관을 위해 정해진 시간마다 스트레칭을 추천하여 습관을 고치는 데에 도움을 주는 웹서비스입니다. 개인이 컴퓨터를 사용할 때 자세가 쉽게 흐트러진다는 점을 고려하여 SHabit은 개인이 사용하는 웹사이트로 개발되었습니다. 따라서 쉽고 간편하게 사용할 수 있습니다. 또한, 목표를 세워 현재 수치와 비교하며 경각심을 가질 수 있습니다.
SHabit은 사용자의 자세를 트래킹하여 올바르지 않은 자세를 유지할 시 경고해주고, 좋은 습관을 위해 정해진 시간마다 스트레칭을 추천하여 습관을 고치는 데에 도움을 주는 웹서비스입니다. 개인이 컴퓨터를 사용할 때 자세가 쉽게 흐트러진다는 점을 고려하여 SHabit은 개인이 사용하는 웹사이트로 개발되었습니다. 따라서 쉽고 간편하게 사용할 수 있습니다. 또한, 목표를 세워 현재 수치와 비교하며 경각심을 가질 수 있습니다.
Backend
- - IntelliJ IDE
- - Springboot 3.0.1
- - Spring Data JPA
- - Spring Security
- - Spring Validation
- - Spring Web
- - WebRTC
- - WebSocket
- - Redis
- - MariaDB
- - MongoDB
- - GCP - Youtube API
- - Swagger 3.0.0
- - JWT
Frontend
- - React
- - Redux Toolkit
- - Styled Components
- - TypeScript
- - SockJS-client
- - Teachable Machine
- - WebSocket
- - React-Webcam
- - Axios
- - ApexCharts
CI/CD
- - AWS EC2
- - AWS S3
- - Jenkins
- - NGINX
협업 툴
- - Gitlab
- - JIRA
- - Notion
랜딩 페이지
로그인 화면
회원 가입 화면
메인 화면
- - 메인 페이지
- - 나가기 버튼을 통해 나갈 수 있습니다.
- - 1분마다 1초씩 찍어진 영상을 이어 만든 클립을 보거나 다운로드 할 수 있습니다.
- - line graph를 통해 하루 단위로 몇퍼센트 바른 자세를 유지했는지 알 수 있습니다.
- - 프로필 사진을 클릭하여 변경할 수 있습니다.
트래킹 화면
- - 자세 트래킹
- - Teachable Machine을 사용하여 자세를 트래킹합니다.
- - webRTC의 getUserMedia()를 사용하여 user의 카메라에 접근하고 mediastream recording api를 활용하여 SHabit 사용하는 모습을 녹화합니다.
- - 좋지 않은 자세가 정해진 시간(default 3분) 이상 지속되면 경고 차원에서 크롬 알림이 뜹니다.
- - 정해진 시간(default 50분)마다 크롬 알림이 뜨고, 이를 클릭하여 스트레칭을 시작할 수 있습니다.
- - 영상은 3분, 5분, 10분 단위로 제공되며, 전 데이터를 토대로 적절한 부위(거북목, 허리, 전신)의 스트레칭 영상을 추천해줍니다.
- - 자세가 바뀔 때마다 영상을 캡처하여 DB에 저장합니다.
- - 트래킹 종료
- - 회원 정보, 마지막 접속일, 건강 문구를 확인할 수 있습니다.
- - 회원이 접속하여 올바른 자세를 취한 percentage를 바탕으로 만든 heatmap(잔디)을 확인할 수 있습니다.
자세 기록 화면
- - 자세기록 페이지
- - 상단 문구를 통해 오늘 총 몇 시간 사용했고, 몇 분 바른 자세를 유지했는지 알 수 있습니다.
- - range bar graph를 통해 사용 시각과 그때 유지한 자세를 한눈에 확인할 수 있습니다.
- - line graph를 통해 하루 단위로 몇퍼센트 바른 자세를 유지했는지 알 수 있습니다.
- - weekly와 monthly로 구분하여 한눈에 확인할 수 있습니다.
- - line graph에서 특정 날짜를 클릭하면 우측에 pie graph가 나타납니다. 해당 일에 어떤 자세를 몇퍼센트 유지했는지 쉽게 확인이 가능합니다.
- - range bar graph와 line graph는 svg, png, csv 파일로 저장 가능합니다.
나의 목표 화면
- - 나의목표 페이지
- - 목표 달성 칸에서 내가 설정한 목표(percentage, 시간)와 오늘 달성 정도를 확인할 수 있습니다.
- - 오른쪽 상단 수정 버튼을 통해 목표를 직접 설정할 수 있습니다.
- - 자세 유지 시간 칸에서는 오늘 사용한 총 시간 대비 유지한 자세를 한 눈에 확인할 수 있도록 bar graph를 제공하고있습니다.
- - 이 페이지는 오른쪽 상단 다운로드 버튼을 통해 페이지 이미지를 손쉽게 저장할 수 있습니다.
갤러리 화면
- - 갤러리
- - 트래킹을 하면서 찍은 사진들을 확인할 수 있습니다.
- - 바른 자세, 거북목 자세, 비스듬한 자세, 누운 자세별로 구분하여 볼 수 있습니다.
관리자 화면
- - 관리자 페이지
- - 관리자가 로그인하여 스트레칭 시간과 알림 시간을 변경할 수 있습니다.
- - 새로운 스트레칭 영상을 추가할 수 있습니다.
- - 새로운 건강 문구를 추가할 수 있습니다.
