타인과 비교하는 삶에서 벗어나, 나의 바른 습관에 집중할 수 있는 환경을 만들어주는 웹 애플리케이션 "바른생활" 입니다
이와 같은 다양한 장치를 통해 현대인의 습관 형성을 돕습니다.
- 숏폼의 등장으로 한 가지 일을 꾸준히 하지 못하게 됨
- SNS로 인해 타인의 삶을 신경쓰느라 정작 본인의 삶에 집중하지 못하는 경우가 많음
- 꾸준히 습관을 유지하는 피로함을 즐거움으로 바꿀 수 있는 수단 필요
- 건강한 습관을 만들고 싶은 사람
- 어떤 습관을 설정해야 할지 잘 모르는 사람
- 자신의 습관을 타인과 비교하거나 비교당하고 싶지 않은 사람
- 혼자 습관을 유지하기에 의지가 부족한 사람
- 본인의 습관 실천 내역을 기록 및 요약하고 싶은 사람
 |
 |
 |
 |
|---|---|---|---|
| 로딩 화면 | 메인 화면 | 알림 화면 | 프로필 화면 |
- 사용자 스트릭
- 각 날짜마다 주어진 해빗 스트릭 중 하나라도 수행하면 채워짐
- 달성한 습관의 갯수에 따라 색상 차이가 존재
- 해빗 스트릭
- 각 해빗마다 별개의 스트릭이 존재
- 해빗을 선택하면 달성한 날짜와 달성하지 못한 날짜, 스트릭 수, 달성 비율 확인 가능
 |
 |
 |
 |
|---|---|---|---|
| 해빗 목록 화면 | 해빗 트래커 리스트 화면 | 해빗 트래커 완료 화면 | 해빗 편집 화면 |
- 사용자가 초기에 한 달을 기준으로 습관 3개, 포인트로 구매하여 최대 7개까지 설정 가능
- 사용자들이 선호하는 습관 카테고리를 추천해주며, 습관 이름과 날짜를 설정하여 등록
- 등록된 해빗 트래커는 해당 날짜에 실천한 내용과 사진을 추가하여 완료
- 한 달이 끝나면, 사용자가 한 달간 어떤 습관을 실천했는지 요약 및 정리(리캡)
 |
 |
 |
 |
|---|---|---|---|
| 상품 구매 목록 화면 | 랜덤 포인트 수령 화면 | 스트릭 및 나무 상품 구매 화면 | 스트릭 리커버리 구매 화면 |
- 스트릭 유지할 경우 기본 포인트 제공
- 여러 개의 해빗 달성, 일정 기간 스트릭 유지할 경우 등 추가 포인트 부여
- 포인트 획득시 자동으로 잔고에 쌓이지 않고 나무에 열매가 열리는 형태로 적립되며, 사용자가 열매를 수확하는 방식으로 획득 가능
- 아이템 구매에 사용 가능
- “스트릭 복구” : 미 수행 후 하루가 지나 기본적인 추가 스트릭 유지가 불가할 때 과거 스트릭을 복구할 수 있음
- “추가 해빗” : 해빗 트래커의 기본 습관 개수는 3개 → 최대 7개까지 확장 가능
- “스트릭 테마” : 랜덤으로 스트릭 테마 색상 변경 가능
 |
 |
 |
 |
|---|---|---|---|
| 사용자 리포트 화면 | 리포트 상호작용 화면 | 리캡 목록 화면 | 리캡 상세화면 |
- 한 달 주기로 스트릭 전체 기록, 이번 달 최장 스트릭, 이번 달 가장 많이 기록한 습관 등 습관 달성 내용을 그래프 등의 시각적 도구로 요약
- 가장 많이 기록한 습관의 내용과 사진 등은 요약하여 표시
- 지난 리캡 기록은 추후 재열람 가능
- 과열된 경쟁 사회에서 자신에게 집중할 수 있는 환경 제공
- 포인트, 아이템 등의 게이미피케이션 도구를 통해 서비스 장기 이용 및 꾸준한 습관 유지
- 습관을 유지하면 일상적인 활동이 자동화되어 시간과 에너지를 절약할 수 있음. 일상적인 작업을 효율적으로 처리하고 더 많은 일을 해낼 수 있게 함
- 일정한 습관을 만들면 특정 목표를 달성하기 더 쉬워지며 이상은 예측 가능하고 안정적이게 되기 때문에 스트레스가 감소
- 다른 앱(피트니스 등) / 스마트 워치와 연동하여 달성 여부 자동 체크
- 사용자의 습관 패턴을 파악해 주로 달성하는 시간에 습관 달성 권장 알림
- 애플리케이션 사용자들의 데이터 분석을 통하여 개인화된 사용자에게 습관 추천
- 습관 내역을 제공하여 전문가에게 습관 코칭
| Profile |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| Name | 김형진 | 유현지 | 장수민 | 전영빈 | 신종욱 | 곽희웅 |
| Position | Frontend | Frontend | Part Leader & Frontend | Backend & Infra | Part Leader & Backend | Team Leader & Backend |
- 유현지
- syncfusion 라이브러리 사용한 사용자 활동 내역 통계
- 사용자 월별 활동 요약 "리캡" 기능 제작
- FCM을 사용한 포그라운드/백그라운드 기능 적용(FE)
- kakao/google OAuth 인증/인가(Access Token, Refresh Token) 적용
- Figma 목업 최종 검수
- 중간 발표, 최종 발표 자료 제작
- 최종 발표 진행
- 서기
- 김형진
- 월별 해빗 달성률에 따른 스트릭 페이지 구현
- Three.js를 이용해 3D나무 모델을 이용한 사용자 인터랙션 페이지 구현
- 해빗 달성에 따른 리워드를 통한 아이템 및 나무 모델 성장
- 게이미피케이션 요소 설계 및 페이지 구현
- UCC 제작
- 장수민
- 프론트엔드 구조 설계 및 구축
- Next.js 렌더링 전략(ISR) 수립 및 적용
- Storybook 활용 제안 및 컴포넌트 테스트 용이하도록 설계
- UI 컴포넌트 설계 및 구현
- 여러 폼에서 발생하는 데이터 유지와 흐름 파악에 강점이 있는 useFunnel 구현 및 활용
- 선언적으로 모달, 바텀시트, 토스트 메시지를 제어할 수 있는 useOverlay 구현 및 활용
- FCP와 LCP, CLS 위주로 성능을 개선하고 최초 웹 컨텐츠 렌더링 속도를 1.8초에서 0.8초로 단축
- 폰트로 인한 CLS 지표 악화를 막기 위해 Next.js의 로컬 폰트 캐싱 기능 활용
- 지연 로딩을 적극적으로 사용하여 처음 로딩하는 번들링한 JavaScript의 크기를 줄여 통신 비용을 절감
- 전영빈
- 스트릭 서비스 구현
- 백엔드 보일러플레이트 및 컨벤션 문서 작성
- 인프라 구축
- Jenkins CI/CD Pipeline 구축
- Multi Staging과 cache를 이용한 빌드 최적화
- 신종욱
- Gamification 요소 기획 및 구현
- JWT와 Spring security를 활용한 인증/인가
- Spring security를 활용한 구글 및 카카오 소셜 로그인 구현
- 추천 서버 IaC 작성
- 코사인 유사도를 활용한 추천 기능
- 사용자 기능
- 곽희웅
- 팀의 전체 일정 관리(PM)
- 실시간 해빗 랭킹을 산정하기 위한 ELK+Kafka 서버 구축
- 해빗 데이터 생성 및 해빗, 해빗 트래커 관련 API 구현
- 리캡 관련 API 구현
- 특정 상황마다 사용자를 위해 FCM을 통한 실시간 알림 구현