- 학습 시간을 기록하고 관리할 수 있는 크로스 플랫폼 애플리케이션
- React Native 기반 (Android / iOS / macOS / Windows 지원)
- STOMP + SSE 기반 실시간 그룹 채팅
- SQLite 기반 로컬 데이터 캐싱 및 오프라인 대응
혼자 공부할 때는 목표를 꾸준히 유지하기 어렵고, 스터디를 하더라도 서로의 학습량을 확인하기 어려운 경우가 많습니다.
StudyPals는 이러한 문제 상황에서 착안하여 학습 기록을 시각화하고, 스터디 그룹 단위의 공동 목표를 설정하여 함께 공부하며 동기부여를 받을 수 있도록 설계된 서비스입니다.
StudyPals는 Android, iOS, macOS, Windows 환경에서 동작하는 크로스 플랫폼 애플리케이션입니다.
| Android | iOS |
|---|---|
 |
 |
| Android 영상 원본 | iOS 영상 원본 |
| Windows | MacOS |
|---|---|
 |
 |
| Windows 영상 원본 | MacOS 영상 원본 |
아이디와 비밀번호 기반으로 계정을 생성하고, 자신의 프로필을 설정할 수 있습니다.
| 회원가입 Flow |
|---|
 |
사용자는 목표 시간과 수행 요일을 설정하여 학습 목표를 관리할 수 있습니다. 목표 시간과 목표를 수행할 요일을 지정하여 구체적인 학습 계획 수립이 가능합니다.
| 목표 생성 | 목표 수정 | 목표 삭제 |
|---|---|---|
 |
 |
 |
공부 시작과 종료 시간을 기록하여 학습 시간을 관리할 수 있습니다.
| 학습 시작 / 종료 |
|---|
 |
- 타이머 기반 학습 기록 기능
- 학습 세션 단위 공부 시간 저장
사용자의 학습 기록을 캘린더 형태로 한 눈에 확인할 수 있습니다.
| 학습 통계 화면 | 히트맵 시각화 예시(더미 데이터) |
|---|---|
 |
 |
- 월별 최소 / 최대 공부 시간을 기준으로 컬러 스케일 기반 히트맵 시각화
- 날짜별 학습량을 직관적으로 파악할 수 있는 캘린더 UI
스터디 그룹을 생성하고, 공유 목표를 설정하여 함께 공부할 수 있습니다.
| 그룹 생성 | 그룹 목표 생성 | 그룹 랭킹(더미 데이터) |
|---|---|---|
 |
 |
 |
- 그룹 단위 학습 관리
- 디바이스별 그룹 색상 커스터마이징
스터디 그룹 내에서 실시간 채팅을 통해 대화를 주고받을 수 있습니다.
| 그룹 채팅 |
|---|
 |
- STOMP 기반 WebSocket 통신
- SSE 기반 메시지 수신으로 채팅 안읽음 개수 실시간 반영
- 무한 스크롤 기반 단계적 렌더링으로 메모리 사용 최적화
- 수신한 채팅은 로컬 스토리지에 캐싱하여 네트워크 비용 절감
앱 내에서 언어를 설정할 수 있습니다.
| 언어 설정 |
|---|
 |
react-i18next라이브러리를 사용하여 구현
| 구분 | 기술 |
|---|---|
| 프론트엔드 | React Native, TypeScript |
| 내비게이션 | React Navigation |
| 로컬 데이터 관리 | AsyncStorage, EncryptedStorage, SQLite |
| 상태 관리 | TanStack Query, Zustand |
| 실시간 통신 | STOMP, SSE |
| 외부 데이터 검증 | Zod, React Hook Form |
| OTA 업데이트 | Hot Updater |
프로젝트의 기술적인 설계와 구현 과정은 Wiki에서 확인할 수 있습니다.