diff --git a/README.md b/README.md
index e215bc4..22e5be2 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,532 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+# ⭐ 팀 소개
-## Getting Started
+> **서비스명** : **조각조각** ⏰
-First, run the development server:
+‘조각조각’은 자투리 시간이라는 ’작은 조각‘들을 모아 하나의 큰 퍼즐인 ‘나만의 시간‘을 만들어낸다는 의미를 담았습니다. 특히, 시계를 표현하는 의성어인 ’째깍째깍‘과 유사한 초성을 이용하여, ’시간‘이라는 컨셉에 더욱 충실할 수 있도록 했습니다.
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+> **팀명** : **C-nergy 시너지** 💛
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+C팀 + energy의 합성어로, C팀의 모든 팀원들이 각자의 에너지를 가지고 함께 함으로써 결국 최고의 시너지를 만들어가겠다는 의미를 담았습니다 😊
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+> **R&R분배**
-## Learn More
+| **분야** | **이름** | **포지션** |
+| --- | --- | --- |
+| ⚡️기획 | 한나영 | PM, 서비스 기획 - 데스크 리서치, 유저리서치, 아이데이션, 와이어프레임, 기능명세서, 화면명세서 |
+| ⚡️기획 | 신예진 | 서비스 기획 - 데스크 리서치, 유저 리서치, 아이데이션, 와이어프레임, 페르소나 및 CJM, 화면명세서 |
+| ⚡️기획 | 홍가연 | 서비스 기획 - 기획 리드, 데스크 리서치, 유저 리서치, 아이데이션, 와이어프레임, 기능명세서, 화면명세서 |
+| 🎨디자인 | 최은정 | 프로덕트 디자인 - 브랜딩디자인, UXUI디자인, 그래픽디자인 |
+| 💻프론트엔드 | 공예영 | UI 및 기능 구현, PR CI 구축 |
+| 💻프론트엔드 | 황동준 | 프론트엔드 리드, UI 및 기능 구현, ncp 배포 및 CI/CD 구축 |
+| 💻백엔드 | 전호영 | DB 및 API 구축, 서버 배포 ,네이버 클로바 추천 시스템 구현, 인프라 구축 |
+| 💻백엔드 | 한성민 | 개발 리드, DB 설계 및 API 구현, OpenAI 추천 시스템 구현, 서버 배포 |
-To learn more about Next.js, take a look at the following resources:
+# 🌟 서비스 개요
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+> **서비스 소개**
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+⏰ ‘조각조각’은 **일상 속에서 발생하는 자투리 시간을 의미 있게 활용할 수 있도록 돕는 개인 맞춤형 활동 추천 서비스**입니다.
-## Deploy on Vercel
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+**`세부 기능`**
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- 사용자의 자투리 시간과 상황(온·오프라인 여부, 위치 등)을 기반으로 다양한 카테고리(자기개발/엔터테인먼크/휴식/문화예술/건강/소셜)별 활동 추천 리스트를 제공합니다.
+- 사용자가 활용한 자투리 시간은 ‘시간 조각’으로 시각화해 아카이빙할 수 있으며, 자투리 시간을 온전한 ‘내 시간’으로 만들고 그 효능감을 인식할 수 있도록 돕습니다.
+
+
+> **서비스 차별성**
+>
+
+‘조각조각’은 일상 속에서 **불규칙하고 갑작스럽게 발생해 버려지기 쉬운 ‘자투리 시간’을 유의미한 활동으로 전환할 수 있도록** 돕습니다. 사용자의 시간 활용을 지원하는 일정 관리/루틴 관리 서비스와 같이 단순 생산성 향상과 시간 관리 가이드라인 제공을 목표로 하지 않는다는 점에서 차별화됩니다.
+
+특히 추천 카테고리의 다양화와 사용자 아카이빙 기록 시각화를 통해 재미 요소를 추가했으며, AI 기반의 추천 엔진(OpenAI, Clova AI)을 활용해 온/오프라인별 확장된 사용자 맞춤형 콘텐츠를 제공할 수 있습니다.
+
+
+> **목표 사용자**
+>
+
+‘조각조각’의 주요 목표 사용자는 **자투리 시간이 자주 발생하고, 시간을 의미있게 또는 다양한 방식으로 활용하고자 하는 니즈**가 있는 사람입니다.
+
+**`주요 타겟`**
+
+- 출퇴근 시간이나 학업 중 자투리 시간이 빈번히 발생하는 사람
+- 시간의 효율적인 활용 및 성취감을 중시하는 자기개발 니즈가 강한 사람
+- 반복적인 일상에서 벗어나 색다른/즐거운 활동을 경험하고 싶은 사람
+
+# 🤔 문제 인식(Problem)
+
+## 서비스 개발 동기
+
+‘하루 중에 버려지는 시간이 너무 많다 …’ 이런 생각 드신 적 있으신가요?
+
+배차 간격이 긴 버스를 기다릴 때, 갑자기 수업이 휴강 되었을 때, 약속 시간에 일찍 도착했을 때 … 무언가 새롭게 하기엔 애매한 것 같고, 멍하니 보내기엔 왠지 아까운 그 시간!
+
+>💡 팀 시너지는 우리의 일상에서 **누구에게나 발생할 수 있는 자투리 시간의 활용 한계와 아쉬움에 주목해**,
+> **모든 사람들이 자신만의 의미있는 자투리 시간을 만들 수 있는 방법**을 찾아 ‘조각조각’ 서비스를 고안하게 되었습니다.
+
+
+## 서비스 목적 및 필요성
+
+‘조각조각’은 자투리 시간을 가볍지만 의미 있게 활용할 수 있는 방법을 제안해, **자투리 시간 활용에 대한 니즈와 페인포인트를 충족**합니다.
+- 사용자의 시간과 상황, 취향을 반영한 개인화된 추천으로 `자투리 시간`을 `온전한 ‘내 시간'`으로 만들 수 있도록 돕습니다.
+- 사용자가 자투리 시간에 대한 인식을 `버려지는 시간`, `애매한 시간`이 아닌 `’무엇이든 가볍게 시도해볼 수 있는 시간’`으로 전환할 수 있도록 만듭니다.
+
+> **1️⃣ 시간의 효율적 활용에 대한 니즈 확산**
+
+💡 **시간을 효율적으로, 잘 활용할 수 있는 방법을 제안하는 시의성 있는 서비스**
+
+시간의 가치를 중요하게 생각하는 사회적 동향과 함께, 24시간을 효율적으로 쓰고 싶어하는 니즈가 사회적으로 확산 되고 있습니다.
+
+- 2024 트렌드 코리아 키워드로도 선정된 ‘분초사회’는 시간이 중요성이 매우 강조되는 사회로, 시간의 효율성을 극대화하기 위해 분초(分秒)를 다투며 산다는 의미입니다. 이처럼 현대사회에서 시간의 중요성이 높아지면서 ‘시성비’라는 용어도 등장할 만큼 시간의 ‘가성비’를 중시하는 현상이 일어나고 있습니다.
+- CJ ENM의 디지털마케팅 기업 메조미디어의 조사에 따르면 현대사회 사람들은 ‘현대사회에서 시간은 가장 큰 자원(82%)’이라고 생각하며 ‘남들보다 24시간을 효율적으로 써야 나의 가치를 더 높일 수 있다’고 답했습니다. **이는 시간의 가치를 무엇보다 중요하게 생각한다는 결과로, 시간을 효율적으로 사용하고자 하는 니즈가 사회적으로 퍼져있음을 확인할 수 있습니다.**
+
+출처: [분초사회](https://terms.naver.com/entry.naver?docId=6712649&cid=43667&categoryId=43667), [이명진 가자 내 시간은 '가장 큰 자원'... 시간 아끼는 '초단축 소비' 트렌드 대세](https://www.banronbodo.com/news/articleView.html?idxno=23135)
+
+> **2️⃣ 일상에서 빈번히 발생하는 자투리 시간에 대한 아쉬움**
+
+💡**매일 의미없이 버려지는 자투리 시간에 대한 아쉬움과 피로감을 해결할 수 있는 서비스**
+
+
+우리의 24시간 중 자투리 시간은 얼마나 발생하고 있을까요?
+
+2019년 취업사이트 게임잡 설문 결과, 성인남녀의 자투리 시간은 **하루 평균 2시간 반(147분)** 에 달한 것으로 나타났습니다. 직장인은 하루 평균 127분, 대학생은 160분의 자투리 시간이 발생하며, **2명 중 1명(44.9%)은 '매일 발생하는 자투리 시간이 아깝다'** 고 답변했습니다.
+
+자체적으로 진행한 유저리서치에서도 20대 성인남녀가 **자투리 시간이 ‘버려지는 시간’ 또는 ‘무언가를 하기엔 짧고 애매한 시간’으로 여겨지며, 그 시간이 아깝다고 느낀다**고 답변했습니다. 특히 직장인의 경우, 출퇴근 과정에서 발생하는 **자투리 시간의 반복성과 긴 시간에 불편함**을 표하고 있었습니다.
+
+- '자투리시간 사용 행태 및 불편 사항'에 관한 설문조사 결과, 20대 설문 응답자가 자투리 시간 발생에 대해 약 80%가 불편함을 느끼고 있다고 답변했으며 그에 대한 이유는 버려지는 시간의 아까움(71.6%), 짧고 애매한 시간으로 무엇을 할지 고민 됨(58.1%)이 상위 응답으로 나타났습니다.
+- 경기·인천 통학·통근 인구 153만 명 중 90% 이상(141만 명)이 서울로 이동하고 있으며(2020년 인구주택총조사), 직장인들이 출퇴근을 위해 하루에 소요하는 시간은 평균 1시간 24분으로 밝혀졌습니다(2022년 잡코리아 조사). 이러한 직장인들에게 출퇴근 길에 느끼는 피로도를 점수로 환산(*100점 만점 기준)하게 한 결과, 경기권은 74점, 서울과 지방은 71점을 보이며 직장인의 출퇴근 피로도의 심각성을 확인할 수 있었습니다. 이들에게 피로감을 느끼는 이유에 대해 복수응답으로 꼽아보게 한 결과로는 “오늘도 어김없이 출근이라는 현실 때문에 스트레스를 받는다”는 의견이 63%로 가장 높은 비율을 차지함이 드러났습니다.
+
+출처: [메트로신문 성인남녀 '하루 2시간여 자투리 시간'에 하는 것 톱5… 10명 중 8명은 '온라인 활동'](https://www.metroseoul.co.kr/article/2019102900083), [윤화정 기자 직장인 출퇴근 소요시간 평균 '1시간 24분'](http://www.worktoday.co.kr/news/articleView.html?idxno=26284)
+
+> **3️⃣ 반복되는 일상 속 새로운 활동에 대한 니즈**
+
+💡**남는 시간을 성취감 있게, 재미있게! 사용자에게 가치 있는 시간을 만들어 주는 서비스**
+
+그렇다면, 사용자는 자투리 시간에 **어떤 활동**을 하고 싶을까요?
+
+유저리서치 결과, 20대 설문 응답자들은 자투리 시간을 의미있게 만들기 위해 중요하게 생각하는 가치로 **습관 형성, 성취감, 재미있는 경험, 새로운 학습/지식 습득**을 꼽았습니다. 시간을 가치 있게 사용하고 싶어하는 성향이 반영되어 성취감을 느낄 수 있는 활동을 선호하는 것으로 판단됩니다. 실제로 통학 및 출퇴근 시간을 활용해 학습 앱으로 공부하며 체계적으로 시간을 관리하고, 자신만의 학업 경쟁력을 높이는 ‘틈새 학습 앱’이 인기를 끈다는 점에서도 그 니즈를 확인할 수 있었습니다.
+
+한편, Z세대를 중심으로 **일상적 상황에서 벗어난 재미있는 경험을 추구**하는 경향도 나타나고 있습니다. 낭만을 쫓는 ‘굳이 데이’, ‘도파민’ 등의 용어가 활발하게 쓰이며 색다르고 다양한 삶의 경험을 영위하고자 하는 니즈가 확산되고 있습니다.
+
+- '자투리시간 사용 행태 및 불편 사항'에 관한 설문조사 결과, 20대 설문 응답자의 92% 이상이 ‘자투리 시간을 의미있게 보내고 싶다’고 답했으며, ‘자투리 시간을 의미있게 만들기 위해 중요하다고 생각하는 가치’에 대해 습관 형성(57.3%), 성취감(50.6%), 재미있는 경험(46.1%), 새로운 학습/지식 습득(37.1%) 순으로 응답했습니다.
+- 프로통학러들 사이에서 통학시간에 틈새 학습 앱으로 공부하며 체계적으로 시간을 관리하고, 자신만의 학업 경쟁력을 높이는 학습법이 각광받고 있습니다. 이러한 흐름에 발맞춰 YBM인강, 똑똑보카, 오르조 등 교육업계 서비스에서도 하루 30분 이상 도로에서 시간을 소모하는 통학러(통학생)들을 위해 언제, 어디서나 편하게 자투리 시간을 활용해 공부할 수 있는 학습 앱을 속속 선보이고 있습니다.
+- Z세대 사이에서 ‘도파민’이 큰 화두입니다. 도파민은 스트레스를 완화해주고 기쁨을 느끼게 하는 우리 몸에 필수적인 호르몬입니다. 이에 따라 몰입이나 성취를 통해 느리지만 자연스럽게 도파민을 얻는 방식이 최근 떠오르고 있습니다. 더불어 최근 Z세대 사이 ‘낭만’이라는 단어가 자주 사용됩니다. 도파민을 추구하며 ‘낭만’이라는 이름으로 긍정적으로 색다른 경험들을 쫓고 다양한 삶의 경험을 영위하고 있습니다.
+
+출처: [이준문 기자 ‘프로통학러’ 학습 경쟁력 높이는 ‘틈새 학습 앱’ 각광](http://m.newstap.co.kr/news/articleView.html?idxno=204208), [캐릿이 4년 간 분석한 Z세대의 새로운 특징 ‘MZBTI 3.0’](https://www.careet.net/1293)
+
+# 👥 사용자 **(User)**
+
+## 유저 리서치
+
+### Survey
+
+> 데스크 리서치를 통한 문제 인식과 배경 조사를 기반으로 96명에게 ‘자투리 시간 활용 행태 및 불편함’에 대한 설문 조사를 진행하였습니다.
+
+
+**1️⃣ 자투리 시간 발생 현황 및 사용 행태**
+
+사람들이 자투리 시간을 어떻게 활용하고 있는 지 알아보았습니다.
+
+
+
+
+- 응답자의 85% 이상이 자투리 시간이 자주 발생한다고 답변했으며, 주로 대중교통을 이용하거나 주요 일정의 휴식 시간에서 발생.
+- 압도적인 수치로 소셜 미디어 및 음악 감상/영상 시청이 높은 편이었으며 이 외에도 책, 뉴스, 게임 등을 통해 자투리 시간을 활용하고 있음.
+ - 해당 활동으로 자투리 시간을 활용하는 이유로는 간편함, 높은 접근성, 생산성, 습관적, 휴식 등을 꼽았으며 어떤 일을 하기 애매한 시간이라 흘려보낸다는 답변도 많았음.
+
+⇒ 자투리 시간이 **애매한 시간이라는 인식**으로, 대부분 **간편하고 접근성이 높은** 휴대폰을 통한 활동을 한다는 것을 확인할 수 있었음.
+
+**2️⃣ 자투리 시간에서 느끼는 불편함**
+
+자투리 시간 발생 시 어떤 불편함을 느끼는 지 알아보았습니다.
+
+
+
+- 자투리 시간 발생에 대해 약 80%가 불편함을 느끼고 있다고 응답
+ - 이에 대한 이유로는 버려지는 시간의 아까움, 짧고 애매한 시간으로 무엇을 할 지 고민 됨, 과도한 핸드폰 사용량, 지루함 등을 이유로 꼽음
+
+⇒ 대부분의 사람들은 버려지는 시간을 아까워하지만 ‘자투리 시간’이 애매하다는 인식으로 어떤 일을 해야 할 지 모르고 있음.
+
+**3️⃣ 자투리 시간 활용 시 주요 가치**
+
+자투리 시간 활용에서 가장 중요하게 느끼는 것이 무엇인지 알아보았습니다.
+
+
+
+- 응답자의 92% 이상이 자투리 시간을 의미있게 보내고 싶다는 니즈가 있음
+- 자투리 시간 활용에서 중요하게 생각하는 것은 습관 형성, 성취감, 재미있는 경험 등
+
+### In-Depth Interview
+
+> 시행 기간: 2024.10.10 ~ 10.13 총 4일간
+>
+> 대상자: 자투리 시간을 의미있게 보내고 싶은 응답자&자투리 시간 활용에 불편함을 느끼는 응답자 중 5명
+
+In-Depth Interview를 진행하기에 앞서, 인터뷰이들의 자투리 행태를 보다 면밀히 파악하기 위해
+자투리 시간 활용에 대한 자가 기록 연구를 부탁했습니다.
+
+> 🖊️ **[자가 기록 연구 내용]**
+>
+> 자투리 시간이 발생할 때마다 해당 폼을 통해 활용 행태를 적도록 함.
+>
+> 유의미한 정보 수집을 위해 최소 하루 이상의 자가 기록을 진행할 수 있도록 하였으며, 구글폼의 주어진 양식을 통해 제출할 수 있도록 하여 사용자의 기록 편의성을 높일 수 있게 함.
+> - **자투리 시간 사용 전 :** 자투리 시간이 발생한 상황 (발생 이유/현재 시각/장소/발생한 자투리 시간)
+> - **자투리 시간 사용 후 :** 자투리 시간 사용 행태 (사용 방법/이유/감정)
+
+자가 기록 연구와 서베이 응답을 기반으로 각 인터뷰이 별로 30분 내외의 심층 인터뷰를 진행하였고,
+유사한 응답을 묶어 Affinity Diagram을 진행하였습니다.
+
+
+
+1. 자투리 시간에 대한 인식
+ ⇒ 대부분의 인터뷰이들은 자투리 시간을 ‘애매하게 남는 시간’, ‘아까운 시간’, ‘예상치 못하게 발생하는 시간’이라고 인식하고 있었음. 이로 인해 해당 시간에 무엇을 하면 좋을 지 모르겠다고 응답함.
+
+2. 자투리 시간을 보내는 행태
+ ⇒ 유의미한 일을 하고 싶다고 생각하지만 막상 자투리 시간이 다가오면 습관적으로 핸드폰을 키거나 무의미하게 흘려보내게 된다고 답해주었음.
+
+3. 자투리 시간을 보내는 것에 대한 아쉬움
+ ⇒ 모든 응답자가 하고자 하는 일을 못하고 의미없이 릴스, SNS 등 내가 ‘목적’으로 하지 않은 일을 하게 될 때 아쉬움, 나에 대한 부정적인 감정, 회의감 등을 느끼게 됨.
+
+4. 자투리 시간에 대한 니즈
+ ⇒ 사용자마다 어떤 방식으로 자투리 시간을 보내고 싶은 지는 상이했음. 자기개발, 독서, 스트레칭, 일정 관리 등. 하고 싶은 행위는 모두 달랐지만 근본적으로 자신이 유의미하다고 여기는 가치 및 목적에 대한 행위를 통해 시간을 낭비하지 않고 알차게 보내기를 바람.
+
+ +) 유튜브/릴스가 이미 재미와 흥미를 제공하고 있지만 이에 대한 행위에 부정적 감정을 느끼는 이유는 ‘목적'이 없는, 나의 선택이 들어가지 않은 알고리즘에 의한 콘텐츠 소비이기에 의미가 없음.
+
+5. 서비스 기능 관련
+ ⇒ 자투리 시간을 활용할 수 있는 활동을 추천 받는다면 본인에게 그 행위가 얼마나 유의미하고 매력적으로 다가올 지 중요할 것 같다고 응답. 또한 ‘자투리 시간’인만큼 부담스럽고 제약이 있는 활동 보다는 가볍고 편안한 활동을 원한다고 응답함.
+
+## 서비스 목표 타겟 정의
+
+> 앞선 유저 리서치를 바탕으로, 자투리 시간에 대한 인식과 사용 니즈에 기반하여 서비스 목표 타겟을 정의하였습니다.
+
+1) 자투리 시간이 ’무엇을 하기에는 애매하게 남는 시간‘이라는 인식
+
+ → 무엇을 할 지 모르고 그냥 습관적으로 흘려보내게 되는 사람들이 대부분.
+
+ → 결국 나의 의지가 담기지 못한 채 ‘목적성’을 잃고 흘려보내기 때문에 유의미한 활용이 어려움.
+2) ‘자투리 시간’인 만큼 부담스럽고 거창한 활동보다 가볍고 접근성이 높은 활동에 대한 니즈 존재
+
+
+> ❗**예상치 못하게 발생하는 자투리 시간을 무의미하게 흘려보내지 않고**
+> **가볍고 다양한 활동을 통해 ‘나만의 시간’으로 만들어가고 싶은 사람들**
+
+
+
+## Persona & Journey Map
+
+> 유저리서치 내용 및 인사이트를 바탕으로 서비스를 사용하는 메인 페르소나를 도출하였습니다.
+>
+
+
+
+
+
+## 👩💻 서비스(Service)
+
+### 서비스 카테고리
+
+> AI 기반 자투리 시간 활용 방향 추천 플랫폼
+
+### 타겟특화 포인트
+
+> 👥 자투리 시간을 유의미하게 보내고 싶은 사람을 대상으로, 자투리 시간에 적합한 온라인/오프라인 활동을 `개인 맞춤형으로 추천`함으로써 자투리 시간을 `온전한 ‘내 시간’`으로 만들어갈 수 있도록 함
+
+### 사용자에게 제공하는 혜택
+
+- **`인식의 전환`** : 자투리 시간을 ‘무엇인가를 제대로 하기에 애매한 시간’이 아닌 ‘무엇이든 가볍게 시도해볼 수 있는 시간’으로 인식을 전환시킨다.
+- **`‘나의’`** : **추천 온보딩**을 통해 오로지 ‘나의’ 자투리 시간을 만들어 갈 수 있도록 한다.
+- **`부담없는`** : 부담 없이 일상 속에서 자투리 시간을 유의미하게 보낼 수 있는 **활동을 추천**해준다.
+- **`쌓아가는`** : 활용한 자투리 시간을 **아카이빙**을 통해 쌓아가며 효능감/성취감을 느낄 수 있도록 한다.
+
+### 서비스 플로우
+
+> **IA**
+
+
+> **전체 서비스 플로우**
+>
+
+
+
+> **기능별 세부 플로우**
+>
+
+**`로그인 플로우`**
+
+
+
+**`메인홈 - 추천 플로우`**
+
+
+
+**`아카이빙 플로우`**
+
+
+
+**`마이페이지 플로우`**
+
+
+
+### **서비스 포인트 (참신성, 차별성 등)**
+
+> **유사 서비스 분석**
+
+| 서비스명 | 서비스 유형 | 메인 기능 및 특성 | 사용 목적 |
+|-------------------|-------------------------|-------------------------------------------------------------------------------------------------------|---------------------------------------------------|
+| **오늘 뭐할지 GetGPT** | AI 추천 | ChatGPT형 AI 추천 서비스
- 하루 할 일 추천 GPT
- 프롬프트 작성 필요
- 기본 질문 존재
- 아카이빙 불가능 | GPT와의 대화를 통해 하루 할 일 추천 가능 |
+| **투두메이트** | 시간 활용 지원 (일정 관리) | 할 일 및 목표 리스트 생성
- 우선순위 설정
- 일정 알림 기능
- 완료 체크를 통한 성취감 제공 | 일정 관리 및 효율적 시간 분배를 통한 생산성 향상 |
+| **마이루틴** | 시간 활용 지원 (루틴 관리) | 개인 맞춤형 루틴 설정 및 계획
- 알림을 통한 지속적 습관 형성
- 활동 기록 및 성과 시각화 | 습관 형성 및 시간 관리 개선을 통해 생산성 향상, 목표 달성 도움 |
+| **조각조각** | 시간 활용 지원 및 AI 활용 추천 | 자투리 시간 활용 방법 추천
- 추천 활동 유형/카테고리의 다양성
- 아카이빙을 통한 시간 사용 분석 및 효용성 향상 | 버려지는 자투리 시간을 유의미한 활동으로 전환 |
+
+
+> 💫 **참신성 & 차별성**
+>
+>- 자투리 시간에 대한 인식 변화를 통한 사회적 임팩트 부여
+ > - 무엇인가를 제대로 하기에 애매한 시간 → 무엇이든 가볍게 시도해볼 수 있는 시간
+>- 온라인 활동 추천
+ > - 사용자가 입력한 추천 온보딩 데이터를 기반으로 다양한 활동 추천
+> - 모든 사용자가 쉽게 접근할 수 있는 온라인 활동을 추천함으로써 시공간적 제약을 최소화하여 자투리 시간을 활용할 수 있도록 함
+>- 오프라인 추천
+ > - 사용자 위치를 기반으로 방문 장소까지 구체적인 추천
+> - 사용자가 일상 속에서 쉽게 지나쳤던 장소 혹은 숨겨진 장소들을 재발견할 수 있도록 함으로써 지역 사회를 활성화
+
+### 핵심 기능
+
+| **기능** | **설명** |
+|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **추천 온보딩** | 활동 추천을 위해 진행하는 온보딩으로, 사용자가 현재 상황에 따라 올바른 추천을 받을 수 있도록 합니다.
- **시간 선택**: 현재 사용할 수 있는 자투리 시간을 선택합니다. (10분 이상)
- **온라인/오프라인 선택**: 현재 사용자가 위치하고 있는 공간이 실내인지 실외인지 선택합니다.
- **활동 키워드 선택**: 사용자가 선호하는 활동의 형태를 선택합니다. |
+| **활동 추천** | 앞선 온보딩을 기반으로 사용자에게 맞는 활동을 추천합니다.
- **온라인 활동**: 사용자의 휴대폰을 통해 할 수 있는 온라인 활동 추천
- **오프라인 활동**: 사용자의 현재 위치를 기반으로 할 수 있는 오프라인 활동 추천
사용자는 각 주제 별로 추천되는 5개의 활동 중 원하는 활동을 선택합니다.
만약 오프라인 활동에서 특정 장소 선택 시, 해당 장소의 위치 링크를 연결합니다. |
+| **아카이빙** | 사용자가 해당 활동을 끝내고 나면, 해당 기록이 저장됩니다.
저장된 기록은 트리맵 형태의 ‘활동 키워드’와 캘린더 형태의 ‘활동 캘린더’로 확인할 수 있습니다. |
+
+
+
+### 서비스 비즈니스 모델
+오프라인 추천 시 매장과 제휴
+
+제휴 매장을 오프라인 추천해줌으로써 비즈니스 모델 구현한다.
+
+1. 오프라인 매장과의 제휴 체결한다.
+2. 해당 매장이 사용자의 온보딩 정보와 부합하는 경우, 오프라인 활동에서 추천한다.
+
+> 💵 **수익구조**
+> 매장 → 조각조각 : 제휴 광고 수수료 제공
+> 조각조각 → 사용자 : 제휴 매장의 광고를 맞춤형으로 제공
+
+> 📌 **기대효과**
+> 매장 : 사용자 데이터를 바탕으로 한 개인화 된 추천을 통해 맞춤형 광고 가능
+> 사용자 : 현재 접근 가능한 맞춤형 매장을 추천 받을 수 있음
+
+
+
+
+
+
+## 🎨 디자인 (Design)
+
+### 로고 및 디자인 시스템
+
+> **디자인 컨셉**
+
+> ⏰
+> **조각조각의 디자인 컨셉**
+> 조각조각은 우리가 일상 속에서 모을 수 있는 자투리 시간을 **‘시간 조각’** 이라고 정의합니다.
+> 조각조각은 우리가 평소에 흘려보내던 일상 속의 자투리 시간을 색다르게 활용하게 함으로써
+> ‘시간 조각’을 모으는 경험을 제공합니다. 조각조각 내에서의 시간 조각은 엔터테인먼트, 소셜, 건강,
+> 자기개발, 문화 / 예술, 휴식 크게 6개 종류로 나뉩니다. 각각의 조각들은 분야에 맞게 형상화 되어있습니다. (ex: 휴식은 머그컵이라는 오브제로 형상화)
+>
+> **형상화된 시간 조각을 찾고, 모으고, 쌓고, 보면서 조금 더 색다르고 의미있는 시간을 찾길 도와줍니다.**
+
+
+
+
+
+
+
+> ❔**왜 도트에서 clay 질감의 3d 그래픽으로 전환하게 되었나요?**
+>
+> 기존 도트 그래픽이 가진 문제점을 해결하고자 했습니다.
+> 1. 사각형, 각진 그래픽으로 인해 동적인 느낌이 부족해 보인다는 점
+> 2. 단순히 도트 그래픽으로는 서비스 GUI를 완성도 있게 보여줄 수 없다는 한계점
+> 3. 도트 그래픽과 UI 컴포넌트의 조합 및 비중 설정을 잘못하게 될 시 서비스가 어수선하게 보일 수 있다는 리스크
+> 4. 초기 기획했던 가볍고 마치 간식을 꺼내 먹는 듯한 느낌을 추구하는 서비스 무드보다는 게임/게이미피케이션 서비스 무드에 가깝게 느껴지는 문제점
+>
+> → **서비스 무드와 콘텐츠 성격, 높은 디자인적 완성도 측면을 고려하여** 그래픽 디자인을 변경하였습니다.
+
+> ❔**그렇다면 왜 clay 질감의 3d 그래픽인가요?**
+>
+> UI 요소나 컨텐츠가 많이 들어가지 않는 조각조각의 서비스 특성상 그래픽을 좀 더 다이나믹하게 보여줄 수 있는 그래픽이 필요하다고 판단했습니다.
+> 단순 도트 그래픽으로는 화면 요소를 입체감 있게, 그리고 동적으로 보이게 구성하기가 어렵기 때문에 대안으로 다양한 3d 그래픽을 시도하게 되었습니다.
+> 여러 대안 중 질감이 덜 들어가는 clay 질감의 그래픽이 가장 가벼운 느낌을 주었고, 서비스 무드와 매치하는 요소로 판단하여 clay 질감을 활용하게 되었습니다.
+
+
+### 화면 디자인
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+# 💻 개발(Development)
+
+> **Github URL:** [https://github.com/KUSITMS-30th-TEAM-C](https://github.com/KUSITMS-30th-TEAM-C)
+>
+> **배포 URL:** [https://cnergy.kro.kr/](https://cnergy.kro.kr/)
+
+## 개발 환경과 사용 기술 스택
+
+### ❇️ 프론트엔드 기술 스택 및 선정 이유
+
+- **Next.js 14**:
+ - **서버 사이드 렌더링(SSR)** 및 **정적 사이트 생성(SSG)** 지원으로 SEO 향상과 빠른 페이지 로딩 제공.
+ - **Full-stack 기능** 제공으로 API 라우팅과 프론트엔드를 통합할 수 있어 효율적인 개발 가능.
+ - **Edge Functions**와 같은 최신 성능 최적화 기능을 활용할 수 있음.
+- **React 18**:
+ - **Concurrent Mode**를 통해 성능을 향상하고, 대규모 애플리케이션에서 더욱 부드러운 UI 렌더링.
+ - 최신 **Hook 기반 API**로 코드 간결성 및 상태 관리 향상.
+ - 커뮤니티와 생태계가 매우 크고, 다양한 서드파티 라이브러리와의 호환성이 좋음.
+- **Tailwind CSS**:
+ - **유틸리티 우선 CSS 프레임워크**로, 빠르게 일관된 스타일링 가능.
+ - 클래스 단위로 CSS를 관리하기 때문에 유지보수성이 높고, 불필요한 CSS 코드 생성을 최소화.
+ - 커스텀 디자인을 쉽게 적용하면서도 **반응형 디자인**을 유연하게 구현할 수 있음.
+- **eslint - airbnb**:
+ - **코드 스타일 일관성**을 유지하고, **버그를 예방**하기 위해 AirBnB 스타일 가이드를 활용한 Linting 도구.
+ - 코드 품질 향상과 팀 간 협업 시 일관된 코딩 스타일을 유지.
+- **Prettier**:
+ - **자동 코드 포매팅**을 통해 코드 스타일을 일관되게 유지.
+ - 개발자의 생산성 향상과 코드 리뷰 시 시각적 노이즈를 줄일 수 있음.
+- **Storybook**:
+ - **UI 컴포넌트 개발 및 테스트 도구**로, 컴포넌트 단위 개발을 효율적으로 진행.
+ - **디자인 시스템**을 관리하고, 컴포넌트 간의 재사용성을 높임.
+- **TanStack Query & ContextAPI**:
+ - 효율적인 비동기 처리를 위해 사용
+- **CI/CD (GitHub Actions, NCP, Docker)**:
+ - **GitHub Actions**: 코드 변경 시 자동화된 빌드, 테스트, 배포 파이프라인을 설정하여 개발 프로세스의 효율성 증대.
+ - **NCP (Naver Cloud Platform)**: 안정적인 인프라 제공 및 한국 지역 기반 서비스 운영 시 유리.
+ - **Docker**: 개발 환경을 컨테이너화하여 일관성 있는 환경에서 애플리케이션 배포 가능.
+- **Zustand**:
+ - **가벼운 상태 관리 라이브러리**로, Redux보다 간단하고 코드가 간결해지며, 리액티브한 글로벌 상태 관리에 적합.
+
+### ❇️ 백엔드 기술 스택 및 선정 이유
+
+- **Java 17**
+ - LTS(Long-Term Support) 버전으로 2029년 9월까지 지원합니다.
+ - 최신 LTS 버전인 JDK21을 바로 사용하는 것보다 그 전 LTS 버전인 JDK 17을 사용하여 추후 JDK 21로 마이그레이션시 영향을 줄일 수 있기 때문입니다.
+ - Spring Boot 3.0부터는 JDK 17 이상부터 지원하므로 JDK17을 사용하였습니다.
+- **Spring Boot 3.3.4**
+ - 이번 프로젝트에서는 WebSocket을 이용한 채팅 기능을 서비스에 도입하지는 않았지만, Spring Boot 3.3 버전에서 제공하는 WebSocket의 가상 스레드 지원을 활용하여 동시성을 효율적으로 처리할 수 있는 점을 고려해 사용했습니다.
+- **Spring Data JPA**
+ - SQL을 직접 작성하지 않고 객체지향적인 코드로 데이터베이스를 다루기 위해서 JPA를 사용하고, Spring 프레임워크에서 JPA를 쉽게 사용할 수 있는 모듈인 Spring Data JPA를 지원하기 때문에 사용하였습니다.
+- **MySQL 8.x**
+ - 5 버전에 비해 향상된 성능, 강화된 보안 기능, 공간 데이터 처리 등을 사용하기 위해 사용했습니다.
+- **Docker**
+ - 개발 및 배포 환경을 쉽게 컨테이너화하기 위해 사용했습니다.
+- **Github Actions**
+ - Github와 하나로 통일된 환경에서 CI를 수행하기 위해 사용했습니다.
+- **Naver Cloud Platform**
+ - 한국에서 만든 클라우드 서비스로 서버, AI 등 프로젝트에 필요한 서비스를 사용했습니다.
+- **Sentry**
+ - 에러 로그 모니터링과 중앙집중적 에러 로그 관리를 위해 사용했습니다.
+- **Swagger**
+ - 클라이언트, 서버 간 API 명세서 용도로 사용했습니다.
+- **OpenAI**
+ - OpenAI는 다양한 온라인 활동 추천을 제공하는 데 강점이 있습니다. 이를 통해 사용자의 관심사에 맞는 폭넓고 창의적인 추천을 만들어 더 다양한 활동 선택지를 제공할 수 있어 사용하게 되었습니다.
+- **RabbitMQ**
+ - RabbitMQ의 “Delayed Message Exchange Plugin”을 활용하여, 종료 로직을 특정 시간만큼 지연된 메시지로 전달하는 방식으로 구현했습니다.
+ - 비동기적으로 종료 작업을 처리하여 주요 트랜잭션과 분리할 수 있는 장점이 있어 사용했습니다.
+
+## 🟩 NCP 사용 스택
+
+- **Server**
+ - 백엔드 배포 서버로 사용했습니다.
+ - 프론트엔드 배포 서버로 사용했습니다.
+- **VPC**
+ - 클라우드 내 전용 네트워크를 확보하기 위해 VPC를 사용했습니다.
+ - 현재 프론트엔드와 백엔드가 하나의 VPC내 다른 Subnet으로 구성되어있습니다.
+ - 추후 백엔드 Subnet을 Private으로 설정해 외부접근을 제한하고, 프론트엔드 서버를 통해서만 접근할 수 있도록해 보안을 강화할 예정입니다.
+- **Container Registry**
+ - 백엔드 및 프론트엔드 모두 Docker를 사용해 배포를 진행합니다. Public Registry에 이미지를 저장할 경우, 민감한 정보들을 관리하기 어렵기에 사설 Registry인 NCP Container Registry를 사용했습니다.
+ - Container Registry 의 경우 레지스트리에 등록된 이미지의 취약점을 분석해 정보를 제공해줍니다. 이를 통해 컨테이너의 취약점을 제거해 컨테이너를 더욱 안전하게 사용할 수 있습니다.
+- **Naver Clova Studio**
+ - 한국 사람들이 가장 많이 사용하는 검색엔진의 데이터를 활용하여 개발되었기 때문에, 한국 사용자에게 활동을 추천하는 프로젝트에 적합하다 판단해 사용합니다.
+ - 사용자에게 현재 상황과 취향을 입력받아 활동 추천 시 Clova AI를 사용합니다.
+ - 모델을 튜닝하여 사용자에게 다양한 활동을 추천합니다.
+- **NAVER Object Storage**
+ - 오브젝트 스토리지 버킷을 NCP CDN과 연결하여 CDN 서버에서 빠르고 효율적으로 이미지 제공
+
+
+## 🏛️ 시스템 아키텍처
+
+
+
+## 🧱 ERD
+
+
+
+## 🌊 개발부터 배포까지의 워크플로우
+
+> **1. 개발 단계**
+>
+- Git을 사용한 버전 관리
+- 브랜치 전략 적용 (Git-flow)
+- Pull Request를 통한 코드 리뷰
+ - reviewer의 approve 없이 dev 브랜치에 push 불가
+
+> **2. CI (지속적 통합) 구축**
+>
+- GitHub Actions 사용
+- 자동 빌드 및 테스트 실행
+- Docker 이미지 빌드 및 Registry 푸시
+
+> **3. 배포 준비**
+>
+- Docker Compose 를 통해 배포(SpringBoot, Redis, Rabbit MQ)
+
+> **4. 배포 프로세스**
+>
+1. CI/CD 파이프라인에서 새 Docker 이미지 빌드 및 푸시
+2. 운영 서버에서 최신 이미지 pull
+3. Docker Compose로 서비스 업데이트
+
+> **5. 모니터링 및 로깅 (Sentry 중심)**
+>
+- Sentry 대시보드 모니터링
+- 실시간 에러 추적
+- Grafana와 Prometheus를 활용한 서버 모니터링
+
+## 💻 프론트 - 비동기 데이터 페칭 최적화 및 이미지 로딩 성능 향상
+
+### **AsyncBoundary+tanstack-query를 이용한 데이터 페칭**
+
+- tanstack-query를 이용한 데이터 캐싱
+- SSR환경에서 사용 가능한 Suspense 구현
+- AsyncBoundary를 통한 비동기 데이터페칭 에러/로딩 상태 선언적 관리
+- AsyncBoundaryWithQuery 구현 : tanstack-query의 useQueryErrorResetBoundary를 활용하여 데이터 페칭 중 오류 발생 시 데이터 리페치
+- querykey가 바뀔때마다 컴포넌트 깜빡임(fallback 노출) 이슈
+ - useTransition 훅을 활용하여 상태 업데이트를 UI 렌더링보다 지연시킴으로써 데이터 페칭 중 발생하는 깜빡임을 방지
+
+### **NCP CDN과 Next.js Image태그를 이용한 빠른 이미지 로딩**
+
+- NCP 오브젝트 스토리지와 연동하여 정적 리소스의 캐싱 및 전달을 효율적으로 수행
+- **자동 최적화**: 브라우저와 디바이스에 맞는 해상도와 크기로 이미지를 자동 변환
+- **레이아웃 시프트 방지**: 이미지의 고정된 크기를 제공하여 CLS(Cumulative Layout Shift) 이슈 방지
+
+## 💻 백엔드 - 아키텍처 설계: 도메인 주도 설계(DDD) 적용
+
+- 도메인을 중심으로 아키텍처를 설계하여 비즈니스 로직을 명확하게 분리하였습니다.
+- 표현, 응용, 도메인, 인프라스트럭처 계층으로 분리하여 각 계층의 책임을 명확히 정의하고, 역할에 맞는 책임 분담을 실현하였습니다.
+- 의존 역전 원칙(DIP)을 적용하여 상위 계층이 하위 계층에 의존하지 않도록 하여, 계층 간의 결합도를 최소화하고 유연하고 확장 가능한 구조를 구현하였습니다.
+- 외부 모듈의 영향을 최소화하기 위해 도메인 모델에 JPA를 직접 결합하지 않고, POJO 객체를 사용하여 도메인의 순수성을 유지하였습니다. JPA 엔티티는 인프라 계층에서만 관리하여 도메인과 인프라를 명확하게 분리하였습니다.
+- 조회는 DAO를 활용하여 CQRS 패턴을 적용, 데이터 조회와 변경을 명확히 분리하여 각 책임을 독립적으로 처리하고 성능과 유지보수성을 향상시켰습니다.