배경(Problem)
1. 기존 서비스의 한계
•
기존 루틴 관리 앱은 개인 기록 중심으로 혼자서 관리해야 하므로 금방 동기 부여가 떨어집니다.
•
단순히 캘린더에 일정만 기록하여, 사회적 지지나 피드백, 소속감을 얻기 어렵습니다.
•
이와 같은 한계로 습관을 꾸준히 이어가기 힘듭니다.
2. 서비스 개발 배경
•
작심삼일로 이어지는 습관 형성 문제를 해결하고자, 단순 기록을 넘어 함께 실천하고 응원받는 구조를 통해 지속적인 동기부여를 제공하고자 합니다.
•
다른 사람들과 연결되어 있어 사회적 지지감을 얻고 “양심의 눈”을 통해 루틴을 더 오래 유지할 수 있는 서비스를 제공하고자 합니다.
3. 차별화 포인트
기존 앱 | 루틴 잇 |
개인 중심의 루틴 관리 | 그룹 기반 루틴 실천 |
단순 캘린더 기능 | 카카오 API 활용하여 톡캘린더와 연동(캘린더 + 메시지 + 푸시) |
동기 부족 | 그룹 피드백 + 인증 공유 + 랭킹 시스템 |
성취에 따른 보상 없음 | 참여율 기반 보상/페널티 시스템 |
서비스 소개(Solution)
1. 홈 대시보드, 마이페이지
•
월간 누적 점수, 출석일, 오늘 루틴 성취율, 참여 그룹 현황을 한눈에 확인 가능
•
루틴 인증 시 업로드했던 사진도 모아볼 수 있어 시각적 성취감 제공
2. 루틴 관리
•
개인 루틴: 사용자가 직접 루틴을 생성/관리, 완료 시 출석체크 자동 처리
•
그룹 루틴: 카테고리별 그룹 탐색 후 참여 가능, 실시간 채팅 기능을 통해 그룹원과 소통하며 루틴 실천
3. 랭킹 시스템
•
그룹 활동 점수를 기반으로 개인/그룹 랭킹을 제공
•
월 단위 랭킹 초기화 → 꾸준히 참여할 동기 제공
•
게임 요소를 더해 경쟁과 재미를 함께 유도
루틴 생성을 중심으로 시연을 보여드립니다!
아키텍처 및 핵심 기능
1. 시스템 구조
레이어 | 기술 스택 | 컴포넌트 및 역할 |
클라이언트 | React (웹 반응형), TypeScript | * HomeScreen, GroupScreen 등 페이지와 재사용 가능한 UI 컴포넌트 (TopNavBar, BottomTabNav)
* 사용자 상호작용 및 UI 제공 |
애플리케이션 서버 | Spring Boot 3.5.4, Java 17 | * auth, group, chat, ranking 등 10개 도메인으로 비즈니스 로직 분리
* Spring Security로 인증/인가 관리
* Spring WebSocket(STOMP)으로 실시간 채팅 처리 |
데이터 및 외부 서비스 | MySQL 8.0, Redis, Kakao API, AWS S3 | * MySQL: 영속적 데이터 저장 (루틴, 그룹, 사용자)
* Redis: JWT 토큰 및 캐싱
* Kakao API: 로그인 및 톡 캘린더 연동
* AWS S3: 이미지 파일 저장 |
2. 데이터 흐름
•
사용자 인증
사용자 브라우저/앱 → 카카오 API (OAuth2 로그인) → Spring Boot (JWT 발급) → 로컬 스토리지 (토큰 저장)
•
루틴 관리 (REST)
React (상태 변화) → Axios (REST API) → Spring Service → JPA Repository → MySQL. 성공 시 Spring → 카카오 캘린더 API 연동
•
실시간 채팅 (WebSocket)
React → @stomp/stompjs → Spring WebSocket (STOMP) → 다른 클라이언트에게 메시지 브로드캐스트
3. 핵심 기능 목록
핵심 기능 | 설명 | 사용 기술 |
Kakao OAuth 2.0 인증 | 카카오 계정을 통한 간편 로그인 및 JWT 기반 세션 관리 | Spring Security + Kakao API + Redis (Refresh Token) |
그룹 기반 소셜 루틴 | 카테고리별 그룹 탐색, 가입, 자유/의무 그룹 선택 및 공동 루틴 실천 | group 도메인 (CRUD) + MySQL |
WebSocket 실시간 채팅 | 그룹 멤버 간의 실시간 메시지 송수신 및 소통 | Spring WebSocket + STOMP 프로토콜 + chat 도메인 |
랭킹 시스템 | 그룹 활동 기록을 중심으로 개인 및 그룹의 점수를 계산하고 월별 랭킹 제공 | ranking 도메인 + Spring Scheduler (월간 초기화) |
카카오 캘린더 연동 | 개인 루틴 생성/완료 시 해당 일정을 카카오톡 캘린더에 자동 등록 | calendar 도메인 + Kakao 톡 캘린더 API |
출석 및 활동 관리 | 루틴 완료 시 출석체크 자동 인정 및 누적 출석일 추적 | userActivity 도메인 + MySQL |
AWS S3 파일 저장 | 프로필 및 루틴 인증 사진 등 이미지 파일의 안정적인 저장 및 관리 | storage 도메인 + AWS S3 (Presigned URL) |
*톡캘린더 사용 예시
활용 라이브러리 및 개발 환경
[백엔드]
기술/라이브러리 | 활용 방식 | 선택 이유 |
Spring Boot 3.5.4 & Java 17 | * 백엔드 핵심 로직 구현
* REST API 개발, 비즈니스 로직 처리, 보안 설정 | * 최신 버전으로 향상된 성능과 보안, 자동 설정의 편의성
* LTS 버전으로 안정성과 최신 언어 기능 지원 |
Spring Security + OAuth2 | * 카카오 소셜 로그인 구현 및 JWT 기반 인증/인가 처리 | * 카카오 생태계 연동을 통해 사용자 친화적인 로그인 환경을 구축 |
MySQL 8.0 | * 관계형 데이터 관리
* 사용자 정보, 게시글, 채팅방 등 트랜잭션 무결성이 중요한 데이터 저장 | * 복잡한 관계형 데이터 구조에 적합하며 트랜잭션 무결성 보장 |
Redis | * 세션 관리, 캐싱을 통한 성능 최적화, JWT 리프레시 토큰 저장 | * 캐싱 및 토큰 관리를 위해 선택 |
Spring Data JPA | * 객체 지향적으로 데이터베이스를 조작 | * 객체-관계 매핑(ORM)을 통해 SQL 작성 없이도 개발 생산성 및 유지보수성 향상 |
Srping WebSocket & STOMP | * 그룹 채팅 기능의 실시간 통신 구현 | * 실시간 채팅 기능 통합
* 메시지 브로커 프로토콜로 구조화된 메시지 처리 |
Kakao API | * 소셜 로그인, 톡캘린더 api 사용 | * 사용자 편의성 극대화 |
AWS S3 | * 프로필 이미지 등 사진 파일 저장
* Presigned URL을 활용한 보안 접근 | * 높은 안정성과 확장성을 가진 클라우드 스토리지 서비스 선택 |
[프론트엔드]
기술/라이브러리 | 활용 방식 | 선택 이유 |
React 19.1.1 & TypeScript | 사용자 인터페이스 구축 | 최신 버전으로 향상된 성능과 개발자 경험 |
Vite | 개발 서버 실행 및 프로덕션 빌드 | 빠른 개발 서버와 빌드 최적화 |
React Hooks (useState, useEffect) | 컴포넌트 내부 상태 및 사이드 이펙트 관리 | 복잡한 상태 관리 라이브러리 대신 사용하여 간결성 추구 |
Local Storage | JWT 토큰, 사용자 설정 등 클라이언트 측 데이터 저장 | 세션과 달리 지속적인 클라이언트 데이터 저장 필요 |
Tailwind CSS | 컴포넌트 스타일링 | 유틸리티 퍼스트 CSS 프레임워크로 빠른 스타일링 |
Radix UI | Headless 컴포넌트 제작 | 높은 접근성 |
Framer Motion | 페이지 전환 및 인터랙션 애니메이션 구현 | 사용자에게 매끄러운 경험 제공 |
Axios | REST API 통신 | Promise 기반의 안정적인 HTTP 클라이언트로 비동기 통신을 효율적으로 처리 |
@stomp/stompjs | WebSocket 기반의 실시간 채팅 메시지 송수신 | 백엔드의 STOMP 프로토콜과 연동하여 구조화된 메시징 가능 |
React Hook Form | 폼 상태 관리 및 유효성 검사 | 효율적인 폼 상태 관리 |
트러블 슈팅
다양한 이슈 사항들이 있었지만, 대표적으로 한 가지에 대한 문제 해결 과정을 적어보겠습니다.
[특정 유저에게 refreshToken 문제 발생]
1.
문제 상황
•
프론트엔드 담당자의 계정으로 접근할 시 일부 api 사용시 토큰이 유효함에도 불구하고 refreshToken 에러 발생
•
백엔드 담당자가 확인했을 때, 문제없이 api 작동됨
2.
해결 과정
a.
원인 파악
•
개발 배포 서버는 http로 refreshToken에서 오류가 발생하는 게 맞음
•
하지만 토큰이 유효한 상황에서 refreshToken이 호출되고 있음
b.
문제 해결
•
1차 해결 : 코드 수정 중 entity가 수정되면서 사용자 계정의 DB가 꼬여 refreshToken을 지속해서 호출함 → 데이터베이스 수정
•
2차 해결
◦
백엔드와 동일 환경에서 실행하기 위해 프론트엔드 담당자도 도커로 로컬 서버를 실행하니 정상적으로 호출됨
이 외에 각자 이슈 사항들을 공유하고 회의 시간에 다같이 확인하여 각 담당별로 정리해여 문제를 해결해나갔습니다.
팀 소개
구르다구르미
저희 팀명은 이론 기간 때 만들어진 팀에서부터 쭉 이어져 왔습니다.
여러 개체가 모여 형성되는 "구름"들이 지속적으로 "굴러가며" 끊임없이 학습하고, 팀원들과 함께 협력하여 프로 개발자로 성장하는 모습을 만들어가고자 “구르다구르미” 라는 팀명을 정하게 되었습니다.
담당 역할 | 프로젝트 리뷰 |
[프론트엔드]
워크프레임 구현,
그룹/채팅/랭킹 담당 | 외부 API와 자체 개발 API를 연동하는 과정에서 기술적인 어려움을 많이 겪었으며, aws와 s3를 처음 활용해 이해가 부족하여 많은 시행착오를 겪었습니다. 그러나 이를 통해 새로운 경험을 할 수 있어 좋았습니다. |
[프론트엔드]
비주얼 컨셉 선정,
홈/개인/마이페이지/알림 담당 | S3, 카카오 API 연동 등 익숙하지 않은 도전에 많은 시행착오도 많았지만, 함께 고민해준 팀원들 덕분에 대부분의 기능을 성공적으로 구현하며 많이 성장할 수 있었습니다. |
[백엔드]
개인루틴 CRUD, 개인루틴 유저활동, 이미지저장 S3 구축 | 이번 앱을 개발하면서 카카오 api를 활용하여 나에게 보내기를 만드는 경험을 쌓을수 있었습니다. 이미지 s3를 활용하여 어떻게 동작하는지 배울수 있었습니다. |
[백엔드]
그룹루틴(멤버관리), 알림, 유저액티비티(루틴 완료 여부), 카카오캘린더API | 실서비스가 가능한 애플리케이션을 개발해보는 경험을 얻었습니다. 단순히 기능 구현에 그치지 않고 실사용을 염두에 둔 개발 과정을 거치며 많은 생각과 성찰을 할 수 있었고, 이를 통해 한 단계 성장하는 계기가 되었습니다. |
[백엔드]
사용자 및 랭킹 시스템, 월간 회고 기능 구현,
스케줄러를 통한 자동 초기화 시스템 구축,
테스트 시나리오 작성
기획안, 회의록 등 문서화 | 서비스 기획부터 다양한 API 활용까지 배우며 성장할 수 있었고, 프로젝트 회의를 자주 진행하며 소통의 중요성을 느꼈습니다. 다들 잘 협력해주셔서 감사합니다! |
[백엔드]
인증 및 채팅 기능 구현
인프라, 자동화 파이프라인 구축 | 카카오 API를 이렇게 본격적으로 사용해본 적은 처음인데 문서를 읽는 능력이 많이 늘어난 것 같습니다. 좋은 팀원들 만나서 너무 감사했습니다! |