# 도란도란 (외국인을 위한 한국어 학습 애플리케이션)
팀노션 첨부 예정
## 목차
## 프로젝트 소개💼
- 프로젝트 기간 : 2024-08-19 ~ 24.10.11
## 서비스 소개
## 주요 기능
- AI 기반의 튜터와 함께 학습하며, 맞춤형 학습 가이드를 제공받을 수 있습니다. 학습 진행 상황에 따라 개인별 피드백을 실시간으로 제공합니다.
- AI가 생성한 이미지를 활용한 학습 콘텐츠를 제공합니다. 3가지 유형의 퀴즈를 통해 재미있고 효과적인 학습을 할 수 있습니다.
- 상점에서 다양한 아이템을 구매하여 캐릭터를 커스터마이징할 수 있습니다. 옷장 기능을 통해 획득한 아이템을 자유롭게 관리하고 적용할 수 있습니다.
- 학습 활동을 통해 다양한 재화를 획득하고, 경험치를 쌓아 캐릭터를 성장시킬 수 있습니다. 재화를 통해 학습의 동기부여를 높이고, 다양한 보상을 제공합니다.
- 학습 성과에 따라 사용자 간 랭킹을 확인할 수 있습니다. 자신의 랭킹을 올리기 위해 더욱 적극적인 학습을 유도합니다.
- 사용자의 학습 수준에 따라 티어가 설정됩니다. 상위 티어로 올라갈수록 더 많은 혜택과 도전 과제가 제공됩니다.
## 동작 영상
| 로그인 | 상점 |
|:---:|:---:|
|  |  |
| 마이페이지 | 랭킹 |
|:---:|:---:|
|  |  |
움짤 추가 예정
## 기술 스택
### - Backend
<div align=center>
<img src="<https://img.shields.io/badge/java-007396?style=for-the-badge&logo=java&logoColor=white>">
<img src="<https://img.shields.io/badge/spring-6DB33F?style=for-the-badge&logo=spring&logoColor=white>">
<img src="<https://img.shields.io/badge/springboot-6DB33F?style=for-the-badge&logo=springboot&logoColor=white>">
<img src="<https://img.shields.io/badge/mysql-4479A1?style=for-the-badge&logo=mysql&logoColor=white>">
<img src="<https://img.shields.io/badge/Security-6DB33F?style=for-the-badge&logo=springsecurity&logoColor=white>">
<img src="<https://img.shields.io/badge/Batch-6DB33F?style=for-the-badge&logo=&logoColor=white>">
<img src="<https://img.shields.io/badge/Redis-FF4438?style=for-the-badge&logo=redis&logoColor=white>">
<img src="<https://img.shields.io/badge/Kafka-231F20?style=for-the-badge&logo=apachekafka&logoColor=white>">
</div>
### - Frontend
<div align=center>
<img src="<https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black>">
<img src="<https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=&logoColor=black>">
<img src="<https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black>">
<img src="<https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white>">
<img src="<https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white>">
<img src="<https://img.shields.io/badge/redux-764ABC?style=for-the-badge&logo=redux&logoColor=white>">
<img src="<https://img.shields.io/badge/tailwind> css-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white">
</div>
### - Infrastructure
<div align=center>
<img src="<https://img.shields.io/badge/docker-2496ED?style=for-the-badge&logo=docker&logoColor=white>">
<img src="<https://img.shields.io/badge/aws-FF9900?style=for-the-badge&logo=amazon&logoColor=white>">
<img src="<https://img.shields.io/badge/jenkins-D24939?style=for-the-badge&logo=jenkins&logoColor=white>">
<img src="<https://img.shields.io/badge/go-00ADD8?style=for-the-badge&logo=go&logoColor=white>">
</div>
### - ETC
<div align=center>
<img src="<https://img.shields.io/badge/gitlab-FC6D26?style=for-the-badge&logo=gitlab&logoColor=white>">
<img src="<https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white>">
<img src="<https://img.shields.io/badge/gerrit-232F3E?style=for-the-badge&logo=googlenews&logoColor=white>">
</div>
## 아키텍쳐 구조도
## 기대효과
- **개인 맞춤형 학습**
AI 기반 튜터가 학습자의 수준에 맞춘 맞춤형 학습 가이드와 실시간 피드백을 제공해 학습 효율성을 높입니다.
- **학습 동기부여**
재화와 경험치 시스템, 캐릭터 커스터마이징 등으로 학습자들이 더 적극적으로 학습에 참여하게 하고, 성취감을 느낄 수 있습니다.
- **경쟁을 통한 성취감 강화**
랭킹 시스템과 티어 제도로 학습자들이 경쟁하며 학습 성과를 높이고, 더 많은 혜택과 도전 과제를 통해 지속적인 동기부여를 얻을 수 있습니다.
## 개발 환경
### BE
- Java 17
- Spring Boot 3.3.4
- MySQL 8.0
- Redis 6.2
- Kafka
- Spring Security (User Service)
- Spring Batch (Rank Service)
- Spring Data JPA
- Spring AI
### FE
- HTML5/CSS3/JavaScript
- React 18
- Next.js 14
- Redux Toolkit
- Tailwind CSS
### Infra
- Google Cloud Platform
- BunnyCDN
- Docker
- Kubernetes
- Jenkins
- Go
### Collaboration
- GitLab
- Gerrit
- Jira
## 팀원 및 역할
<table>
<tr>
<td align="center"><a href="<https://github.com/DaftenP>">박지용</a></td>
<td align="center"><a href="<https://github.com/picel>">김상범</a></td>
<td align="center"><a href="<https://github.com/hsusj996>">김세진</a></td>
<td align="center"><a href="<https://github.com/dbdbais>">이강우</a></td>
<td align="center"><a href="<https://github.com/everev1>">김지환</a></td>
<td align="center"><a href="<https://github.com/there2989>">노재훈</a></td>
<td align="center"><a href="<https://github.com/kdhn97>">김동현</a></td>
</tr>
<tr>
<td align="center"><a href="<https://github.com/DaftenP>"><img src="<https://avatars.githubusercontent.com/u/80443975?v=4>" width="100px;" alt=""/><sub></sub></a></td>
<td align="center"><a href="<https://github.com/picel>"><img src="<https://avatars.githubusercontent.com/u/30901178?v=4>" width="100px;" alt=""/><sub></sub></a></td>
<td align="center"><a href="<https://github.com/hsusj996>"><img src="<https://avatars.githubusercontent.com/u/84006404?v=4>" width="100px;" alt=""/><sub></sub></a></td>
<td align="center"><a href="<https://github.com/dbdbais>"><img src="<https://avatars.githubusercontent.com/u/99540674?v=4>" width="100px;" alt=""/><sub></sub></a></td>
<td align="center"><a href="<https://github.com/everev1>"><img src="<https://avatars.githubusercontent.com/u/156268564?v=4>" width="100px;" alt=""/><sub></sub></a></td>
<td align="center"><a href="<https://github.com/there2989>"><img src="<https://avatars.githubusercontent.com/u/156268473?v=4>" width="100px;" alt=""/><sub></sub></a></td>
<td align="center"><a href="<https://github.com/kdhn97>"><img src="<https://avatars.githubusercontent.com/u/139952024?v=4>" width="100px;" alt=""/><sub></sub></a></td>
</tr>
<tr>
<td align="center"><b>PM, Backend</b></td>
<td align="center"><b>Infra, Backend</b></td>
<td align="center"><b>Backend</b></td>
<td align="center"><b>Backend</b></td>
<td align="center"><b>Frontend</b></td>
<td align="center"><b>Frontend</b></td>
<td align="center"><b>Frontend</b></td>
</tr>
</table>
## 역할 분담
- ****Backend**
-** 박지용
**-** 김상범
**- Gerrit / Jenkins 설정, CI/CD 파이프라인 설계/구축/관리
- Gerrit 가이드 문서 작성, clone/push 자동화 스크립트 개발, 개발자 교육, 이슈 대응
- Kubernetes 클러스터 구축 (1 Master, 2 Worker)
- BunnyCDN AI 이미지 생성 도구 자동화
- Go 언어로 BFF 작성
- Prometheus/Grafana 모니터링 시스템 구축
- 포팅 스크립트 (bash shell) 작성
-** 김세진
**- AI tutor Micro Service 구현 (Spring Boot)
- Ranking Mircro Service 구현 (Spring Boot)
- Spring AI 기반 LLM 기능 개발
- 리그 시스템 설계 및 배치 스케줄러 구현 (Spring Boot)
-** 이강우
- JWT 토큰과 Redis를 이용한 회원가입, 로그인 인증 구현 **(Spring Boot)**
- 상점 기능, 아이템 착용 기능 및 로그 구현 **(Spring Boot)**
- Kafka Consumer, Producer를 통한 데이터 일관성 유지 **(Spring Boot)**
- 데일리 미션 및 스케줄러 구현 **(Spring Boot)**
- SMTP 이용한 이메일 인증 구현 **(Spring Boot)**
**
- **Frontend**
-** 노재훈
**- next-intl을 활용한 다국어 웹사이트 구현
- Redux toolkit 구조 도입
- JWT 토큰 인증 구현
- UX/UI 작업 및 목업 제작
- 프로젝트 로고 제작
- 메인 페이지, 상점 페이지 제작
- AI Tutor 서비스 구현
-** 김동현
- Next PWA 설정
- 로그인, 회원가입 구현
- 프로필 페이지 구현
- 옷장 페이지 구현
**-** 김지환
**-** 랭킹 페이지 구현
- 학습 페이지 구현
- 퀴즈 페이지 구현
- 상점 페이지 디자인
- 퀴즈 정답 처리(POST 요청, 로컬 저장소)
**## 회고
- **박지용**
- **김상범**
이번 프로젝트는 기존 진행했던 프로젝트들 대비 기술 스택, 그리고 infrastructure에서 많은 변화가 있었습니다.
기존의 지식과 경험을 통해서, 그리고 컨설턴트님과 코치님들의 지도 하에 익숙하지 않은 설계에서도 슬기롭게 대처 할 수 있었습니다.
그러나 이번 프로젝트에서는 신기술, 그리고 새로운 설계를 도입하는 것에 집중 한 나머지, 업무 효율성 면에서 아쉬움이 많이 느껴졌습니다.
이후 프로젝트에서는 업무 효율성을 보다 향상시키는 것을 중점적으로 프로젝트를 진행 해 보고 싶습니다.
- **김세진**
- **이강우**
- **노재훈**
이전 프로젝트에서 하지 못했던 일반 고객으로 대상으로 한 서비스를 만들어보았습니다.
접근성을 높이기 위해 PWA를 활용하여 웹앱을 만들어 보았는데, 앱 사용자들을 위한 UX/UI를 구상하는게 신선한 작업이였습니다.
Next.js를 채용해 직관적인 페이지 기반 라우팅을 사용하였고, CSR과 SSR을 섞어 작업하였는데
생각보다 사용자와 상호작용하는 서비스가 많은 프로젝트라 CSR의 비중이 높아진게 아쉬웠습니다.
그 외에 언어 학습 어플리케이션인 만큼 STT, TTS를 구현하여 모바일 기기와의 연동도 구현해보았지만,
시간에 비해 구현한 내용이 너무 적어 업무적으로 아쉬움이 많았던 프로젝트였습니다.
- ****김동현******
이번 프로젝트에서는 처음 사용해보는 기술들이 많아 어려움이 있었습니다.
Next 14에 PWA를 적용하는데 예시가 적어서 찾는데 어려움이 있었지만 팀원들과 함께 소통하며
공식문서를 찾아봐서 대처할 수 있었습니다. Redux와 Tailwind도 온라인 강의를 들으며
팀원들과 코드 리뷰하여 빠르게 공부할 수 있었습니다.
처음 사용해보는 기술들을 7주 간 공부하며 실제로 프로젝트에 적용한 결과,
앞으로도 다양한 기술들을 학습하는데 어려움이 없을 것 같습니다.
**- **김지환****
프로젝트가 무사히 마무리 되어 기쁩니다. Next.js와 tailwind css 이전과 다른 기술스택을 사용하였습니다.
Next는 처음사용하는 프레임워크였지만 React 기반 문법이라 적응하는데 큰 어려움이 없었습니다.
tailwindss는 팀원간의코드를 리뷰하거나 급히 수정할 때 장점이 돋보였습니다.
className에 바로 스타일을 명시하여 각 요소에 적용된 CSS를 직관적으로 파악할 수 있었습니다.
컴포넌트 설계에서 많은 고민을 했고 재사용성을 항상 생각하며 페이지를 구현했습니다.
페이지 구성 방식과 컴포넌트의 디테일 적인 부분을 상세히 알려준 팀원들에게 감사함을 느낍니다.
모두들 7주간 고생많으셨습니다!!