⌛ 프로젝트 기간 : 2023.10.9 ~ 2023.11.17 (6주)
SSAFY 9기 2학기 자율 프로젝트
갤럭시 워치를 이용한 러닝 서비스 어플리케이션입니다.
달림은 나 자신과의 경쟁에서 시작되었습니다. 러닝을 하며 나 자신과, 그리고 다른 사람과 경쟁을 하면서 성취감도 얻고 러닝에 대한 동기 부여도 얻을 수 있는 서비스입니다.
워치를 이용하여 러닝을 하고, 러닝이 끝나면 실시간으로 연동되는 데이터를 모바일에서 러닝 기록을 확인할 수 있습니다. 또한 캐릭터, 행성에 대한 커스터마이징, 지정된 날짜/시간에 대한 알림 및 실시간 러닝 랭킹 시스템 등을 통해 사용자가 꾸준히 러닝을 할 수 있도록 하였습니다.
 연제경 PM/Widget |
 최시환 Back-end |
 이은성 Front-end/Infra |
 최규호 Full-Stack/Design |
 김소연 Front-end/Design |
 박기현 WearOS |
🌕메인 페이지
| 비로그인 | 메인 | 워치 가이드 |
|---|---|---|
 |
 |
 |
| 어플을 키고 소셜 로그인(네이버, 카카오)을 통해 로그인을 할 수 있습니다. | 소셜 로그인을 성공하면 메인 페이지로 이동하게 됩니다. | 갤럭시 워치에 대한 가이드를 볼 수 있습니다. |
| 달력 | 개인정보 처리방침 |
|---|---|
 |
 |
| 서비스 출석일과 관련된 달력입니다. 출석의 경우 해당 날짜에 달리기 종료시, 출석으로 인정됩니다. | 서비스 개인정보 처리에 대한 링크로 이어지는 창이 뜹니다. 확인을 선택하면 서비스 개인정보 처리방침 페이지로 이동하게 됩니다. |
🌔차트 페이지
| 차트 메인 | 차트 메인(하단 스크롤업) | 러닝 그래프 터치 |
|---|---|---|
 |
 |
 |
| 차트 메인페이지입니다. 달력을 통해 어느 날짜에 러닝을 했는지, 이번주 기록이 어떻게 되는지 확인할 수 있습니다. | 하단 스크롤바를 위로 올리면 월별로 달린 기록을 확인할 수 있습니다. | 러닝 그래프 터치시 해당 러닝 기록을 볼 수 있습니다. |
| 차트 메인(슬라이드) | 차트 기록 | 페이스 차트 |
|---|---|---|
 |
|
 /td>
|
| 달력에 표시된 러닝 기록 선택 시, 해당 일자에 뛴 기록이 나타나게 됩니다. | 카드 선택 시, 기록의 상세보기로 이동하며 해당 뷰에서 스크롤을 통해 속도, 심박수 그래프, 같이 달린 러닝메이트도 함께 나타납니다. | 차트 기록에서 오른쪽 슬라이드를 통해 페이스 차트를 확인할 수 있습니다. |
| 페이스 차트 터치 | 페이스 차트 비교 | 러닝 메이트와 기록비교 | 심박수 차트 |
|---|---|---|---|
 |
 |
 |
 |
| 그래프를 선택하면 선택한 지점의 평균 페이스가 나타납니다. | 같이 달리기 비교 토글 터치 시 함께 달린 러닝메이트와 비교를 할 수 있습니다. | 같이 달린 러닝메이트와 달린 기록 리스트를 확인할 수 있습니다. | 페이스 차트에서 한칸 더 옆으로 이동 시 심박수 차트가 나타납니다. 해당 그래프 선택 시, 해당 지점에서의 심박수가 있는 영역에 따라 색상이 선택됩니다. |
🌓소셜 페이지
| 소셜 메인(전체) | 러닝메이트 상세보기 | 러닝메이트와 비교하기 | 러닝메이트와 친구추가 |
|---|---|---|---|
 |
 |
 |
 |
| 소셜버튼 터치시 전체 랭킹을 볼 수 있는 화면입니다. | 랭킹에 나타난 프로필 터치 시 해당 유저의 실제 프로필과 기록들을 볼 수 있습니다. 또한 등록하기 버튼을 통해 러닝메이트를 등록할 수 있습니다. | 카드 터치 시 해당 러닝 메이트와 나와의 기록을 비교할 수 있습니다. | 친구 요청 버튼을 통해 친구 요청을 보낼 수 있습니다. |
| 소셜 메인(친구) | 친구 검색 | 친구 목록 |
|---|---|---|
 |
|
 |
| 상단의 토글 바 터치 시 내가 등록한 친구들의 랭킹을 볼 수 있습니다. | 메인(친구)의 우측 상단 버튼을 통해 모달(친구 검색, 목록, 받은 요청)을 보여주며, 닉네임 검색을 통하여 유저를 조회, 요청할 수 있습니다. | 친구 목록 버튼을 터치하여 현재 나의 친구 목록을 볼 수 있습니다. |
| 친구 목록 삭제 | 받은 요청 | 받은요청 수락, 거절 |
|---|---|---|
 |
 |
 |
| 친구 목록에서 삭제 버튼을 누르게 되면 친구가 삭제가 됩니다. | 받은 요청 버튼을 클릭하여 요청받은 목록을 볼 수 있습니다. | 받은 요청을 수락,또는 거절을 할 수 있습니다. |
🌒편집 페이지
| 편집 메인(캐릭터) | 캐릭터 구매 |
|---|---|
|
|
| 편집 버튼 터치 시 기본적으로 캐릭터 선택 화면으로 이동하게 됩니다. | 구매 버튼 터치시 포인트를 사용하여 구매할 수 있습니다. |
| 편집 메인(행성) | 워치화면 미리보기 | 행성 구매 |
|---|---|---|
 |
 |
 |
| 상단의 행성 토글 터치 시 대표 행성을 지정할 수 있는 페이지로 이동합니다. | 행성에 있는 워치 버튼을 터치하면 현재 워치에서 나오는 미리 보기 화면을 볼 수 있습니다. | 잠겨있는 행성을 포인트를 통하여 구매할 수 있습니다. |
🌑프로필 페이지
| 프로필 메인 | 닉네임 변경 | 러닝 메이트 설정 |
|---|---|---|
 |
 |
 |
| 프로필 버튼을 터치 시 프로필 페이지로 이동하며, 나의 정보(레벨, 닉네임, 경험치, 대표캐릭터)를 볼 수 있습니다. | 닉네임 변경은 5글자이상, 띄어쓰기, 닉네임 중복이 발생하게 되면 변경이 불가능합니다. 그 외는 변경할 수 있습니다. | 러닝 메이트 버튼 터치 시 내가 등록한 상대의 러닝 기록을 볼 수 있고, 왼쪽 슬라이드로 러닝 기록 리스트를 볼 수 있습니다. 삭제 버튼 터치 시 내가 설정한 러닝 기록을 삭제 할 수 있습니다. |
| 워치 설정 | 운동 알림 설정 | 로그아웃 |
|---|---|---|
 |
 |
 |
| 워치 버튼 터치 시 워치 설정 페이지로 이동하며, 워치에서 발급받은 인증번호로 휴대폰이랑 워치를 연동할 수 있습니다. | 알림 버튼 터치 시 알림 설정 페이지로 이동하며, 원하는 때에 운동을 할 수 있도록, 요일과 시간을 설정하여 푸쉬 알림(FCM)을 받을 수 있습니다. | 로그아웃 버튼 클릭시 소셜 로그아웃을 진행할 수 있습니다. 네이버는 서비스 로그아웃을 진행할 수 있습니다. |
🌝위젯
| 위젯 |
|---|
 |
| 내가 운동한 날짜, 그리고 귀여운 달림 캐릭터들을 위젯으로 사용할 수 있습니다. |
-
Blender: 독창적인 3D 모델링과 커스텀 디자인을 통한 4종의 캐릭터와 5개의 행성 제작
-
Gamification: 사용자 참여 및 동기 부여를 증진시키는 게임화 요소
- CHARACTER (캐릭터): 선택 가능한 4종의 캐릭터, 각각 고유의 3단계 진화 과정을 경험
- PLANET (행성): 사용자가 5종류의 행성 중에서 선택하여 장착
- Point (포인트): 사용자의 활동에 따라 포인트 부여, 캐릭터 및 행성 구매에 사용
- FRIEND MANAGEMENT (친구 관리): 온라인 친구와의 연결, 기록 비교 및 대결 기능
- ALARM (알람): 정해진 시간에 러닝을 시작하도록 동기 부여, 일관된 운동 습관 형성 지원
-
FCM(Firebase Cloud Messaging) Push: 목표 달성 및 러닝에 대한 지속적인 관심과 참여를 유도하는 푸시 알림
-
Mobile Widget: 사용자의 모바일 홈 화면에 위젯 추가로 러닝 관련 정보 표시
-
Location Weather: 현재 위치 기반 날씨 정보를 제공하여 러닝 조건에 최적화된 환경 확인 및 악천후 대비 가능
-
Social Login (NAVER, KAKAO): 사용자의 편의성을 높이고 빠른 로그인 경험을 제공하는 네이버 및 카카오 OAuth 인증
-
React: 서비스 소개 웹 페이지 제작을 위한 라이브러리
-
React-Native: 갤럭시워치와 안드로이드 모바일 연결에 적합한 모바일 애플리케이션 프레임워크
-
TypeScript: 코드의 안정성 및 유지 보수성을 높이는 강력한 타입 시스템을 제공
-
Styled-Components (Atomic Design): React 컴포넌트에 직접 CSS 스타일을 적용하는 효율적인 방법, 코드의 가독성 및 유지 보수성 개선
-
Recoil: React 앱의 상태 관리, atom과 selector를 통해 유연하고 효과적인 상태 관리 가능
- CSR (클라이언트 사이드 렌더링) 활용: 상태 변경(예: 캐릭터, 행성)에 따른 컴포넌트 자동 업데이트로 동적인 UI 및 실시간 상호작용 지원
- SSR (서버 사이드 렌더링) 활용: 초기 상태를 서버에서 설정하고 HTML을 생성하여 클라이언트로 전송, 빠른 페이지 로드
-
Axios: 애플리케이션에서 HTTP 통신을 쉽고 효율적으로 처리
-
react-native-gifted-charts: 사용자 데이터를 시각적으로 표현하여 분석과 이해를 돕는 강력한 데이터 시각화 도구
-
Brotli 알고리즘을 활용한, 데이터 전송량 70% 압축
- 운동 시간이 증가함에 따라, 갤럭시 워치와 서버 간 데이터 전송량이 너무 많이지는 문제가 발생
- 네트워크 비용을 줄이기 위해, HTTP 생태계의 gzip, brotli 중 압축 성능이 우수한 brotli 알고리즘 적용
-
갤럭시 워치에서 제공한 운동 기록 Raw 데이터를 서버에서 필요한 형태로 가공, 저장 파이프라인 구축
- 갤럭시워치에서 제공한 운동 raw 데이터를 그대로 MongoDB로 저장하는 것은 불필요한 데이터로 인해 Disk가 낭비되는 문제가 발생
- 달림 서비스에서 운동기록을 사용하는 차트와 함께 달리기 기능에 필요한 정보만을 추출해서 저장하도록 변경
- 불필요한 데이터를 줄이고, 조회 속도를 0.3ms로 개선
-
EncryptedSharedpreferences 라이브러리
- 스마트 워치의 유저 정보를 안전하게 암호화를 통해 저장
- AES 256 알고리즘 사용
-
Room 라이브러리
- SQLite DB를 쉽고 편리하게 사용하게 해주는 라이브러리
- SQL에 문제가 생길 경우 컴파일단에서 에러 발생시키는 장점
-
기록 측정
- FusedLocationProviderClient 클래스를 이용해서 위치 정보 수집
- 가속도 센서, 자이로스코프, 자기장 센서 등의 여러 가지 종합적인 정보를 통해 예측 위치 서비스 제공
- Location 클래스를 이용해 속도 정보를 받아서 측정.
- 속도, 거리, 심박수, 발걸음을 1초마다 리스트에 저장해서 달리기 종료가 되면 모든 데이터를 MongoDB로 전송
-
GitLab: 프로젝트의 코드와 문서 관리
-
Jira: 프로젝트 일정, 이슈 및 작업 관리
- Scrum (Agile): 1주 주기의 프로젝트 스프린트와 매일 5분의 스크럼미팅을 통한 통한 긴밀한 팀 협업과 소통
-
Mattermost: 팀 내 의사소통 및 파일 공유를 지원하는 협업 도구 활용
-
Figma: 프로젝트의 UI/UX 설계 및 디자인 가이드라인 구축에 활용, 팀원 간의 효과적인 디자인 커뮤니케이션 및 일관성 있는 디자인 유지
| FrontEnd | BackEnd | Database | Infra |
|---|---|---|---|
| Node.js 18.16.1 | Java 11 | MySQL | AWS EC2 (Ubuntu 20.04 LTS) |
| React.js 18.2.0 | Spring Boot 2.7.15 | MongoDB | Docker 23.0.6 |
| react-native | Gradle 8.1.1 | Redis | Nginx 1.18.0 |
| typescript | Spring Data JPA | Jenkins 2.401.2 LTS | |
| react-native styled components | Spring Security | ||
| lombok | |||
| Oauth 2.0 | |||
| JWT |
