HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
⌛
정호일팀
/
🔥
호일팀 프로젝트 페이지
/
✏️
기획서
✏️

기획서

☃️
팀 프로젝트
🔥
호일팀 프로젝트 페이지
목차 보기
📝공부 인증 SNS dopen1. 서비스 소개공부에 대한 부담 없이, 잔디를 채워가는 성취감을 느껴보세요2. 기획 의도시장 분석자기개발에 대한 의지자기개발에 대한 인식 변화관련 서비스 현황3. 주요 기능 (프로젝트 추가 기능은 주황색으로 표시)4. 기술 스택5. 기능 명세서6. User Story7. 개발 문화8. 와이어프레임 & 디자인

📝공부 인증 SNS dopen

 

1. 서비스 소개

✅
주제 : 소셜 네트워크 프로젝트
  • 서비스 : 공부 인증 서비스

공부에 대한 부담 없이, 잔디를 채워가는 성취감을 느껴보세요

  • 유저가 직접 타이머와 스톱워치 기능을 통해 자신이 공부할 시간을 설정할 수 있습니다.
    • 하루 10분 단어 외우기, 하루 30분 책 읽기 등 본인의 여건에 맞추어 설정할 수 있습니다.
  • 목표 공부 시간 달성 시, 간단한 회고 글을 작성할 수 있습니다.
    • 회고를 작성하면서, 배운 내용을 간단하게 복습하는 동시에 현재 나의 감정에 대해서 돌아볼 수 있습니다
  • 하루 목표 달성 시, 잔디 캘린더에 잔디가 심어집니다.
    • 달력에 잔디를 채워가는 성취감을 느낄 수 있습니다.

2. 기획 의도

최근 MZ세대의 트렌드 문화 중 ‘갓생’이라는 키워드를 빼놓을 수 없습니다.
특히 연말, 연초라는 시기적 특수성과 맞물릴 경우 ‘자기개발’에 대한 의지는 더욱 증가할 것으로 예상됩니다.

시장 분석

자기개발에 대한 의지

MZ세대 10명 중 9명 “올해부터 갓생산다” 자기계발 의지
응답자 300명 중 91.3%(274명)가 2023년 갓생에 도전할 계획이라고 6일 밝혔다. 이는 지난해 갓생살기에 도전한 비율(75%)보다 16.3%p 증가한 수치다. 설문조사 응답자 연령은 20대(51%), 30대(27.3%), 10대 이하(12%), 40대 이상(9.7%)로 구성됐다.
도전할 갓생 분야는 공부·재테크·자격증 취득과 같은 자기계발 분야(65.3%, 복수응답)가 가장 많았다. 미라클 모닝·물 마시기와 같은 건강 분야(52.6%), 댄스동아리·베이킹 등 취미생활(44.2%)도 인기가 많은 갓생 분야였다
출처 : 문화뉴스(https://www.mhns.co.kr)
https://www.mhns.co.kr/news/articleView.html?idxno=545217

자기개발에 대한 인식 변화

‘신체 건강 관리(72.2%)’, ‘취미 배우기(68.4%)’뿐 아니라 ‘스트레스·정신 건강 관리(59.3%)‘도 자기개발이라고 생각했다. 또 최근 재테크 열풍이 불면서, MZ세대의 43.6%가 ‘재무 관리’ 또한 자기개발이라고 응답했다. 특히 MZ세대의 77.2%가 매일 지키려고 노력하는 습관(루틴)이 1개 이상 있다고 답변했다.

관련 서비스 현황

네이버 오늘일기 챌린지 - 한달만에 이용자수 45만명 증가
인스타그램 - 2022 트랜드 해시태그 #공스타그램 #오운완
챌린저스 - 누적 거래액 3천억 돌파
열품타 - 한국 뿐 아니라 해외 이용자 수 증가
 
MZ세대의 이러한 자기개발 열풍의 특징을 요약해보면
  • 소위 스펙을 올리는 데에 초점을 맞췄던 과거의 자기개발과는 달리 물 마시기, 미라클 모닝, 일기 쓰기 등 자칫 사소해 보일 수 있지만 본인의 삶을 개선해 나갈 수 있는 컨텐츠를 선호합니다.
  • 많은 시간을 투자해야 하는 컨텐츠 보다는 자투리 시간을 이용하되, 꾸준히 지속할 수 있는 자기개발을 선호합니다.
  • SNS와 결합하여 기록을 남기는 것 또한 중요하게 생각합니다.
  • 자기개발을 꾸준히 지속할 수 있게 도움을 주는 서비스를 이용합니다.
 
저희는 이러한 트렌드에 맞추어
  • 부담을 느끼지 않는 학습 환경 조성
  • 성취감 부여를 통한 지속적 학습에 대한 동기부여
  • 회고 작성을 통한 자기성찰
  • 커뮤니티 서비스를 통한 타인과의 교류
4가지 키워드에 집중하여, MZ세대의 자기개발을 돕는 서비스를 개발하고자 합니다.
 

3. 주요 기능 (프로젝트 추가 기능은 주황색으로 표시)

로그인 & 회원가입
로그인 & 회원가입
  • 서비스 자체 회원가입을 통해 로그인 할 수 있습니다.
  • 소셜 로그인을 할 수 있습니다.
  • 인증된 사용자는 게시판 포스트 작성 & 댓글 작성, 좋아요 누르기, 메시지, 타이머 & 스톱워치 사용, 하루 회고, 잔디 심기, D-Day 기능을 사용할 수 있습니다.
마이페이지
마이페이지
  • 프로필 이미지, 이름, 작성한 포스트와 댓글을 볼 수 있습니다.
  • 프로필 이미지를 수정할 수 있습니다.
  • 내가 팔로우한 사람을 볼 수 있습니다.
  • 로그아웃 할 수 있습니다.
유저페이지
유저페이지
  • 다른 유저의 정보를 조회할 수 있습니다.
  • 팔로우 & 언팔로우 기능을 사용할 수 있습니다.
  • 해당 유저의 잔디를 볼 수 있습니다.
게시판
게시판
  • 회고 & 인증 게시판, 자유 게시판, 정보 공유 게시판을 제공합니다.
  • 모든 사용자는 게시판 열람이 가능합니다.
포스트
포스트
  • 모든 사용자는 게시판의 전체 포스트 목록을 볼 수 있습니다.
    • 포스트 클릭 시 상세 포스트 내용을 볼 수 있습니다
  • 인증된 사용자는 포스트 작성 및 삭제가 가능합니다.
  • 타이머 & 스톱워치를 사용하여 공부 시간을 기록한 사용자는 하루 회고 & 인증 포스트를 작성할 수 있습니다.
좋아요
좋아요
  • 인증된 사용자는 포스트 하단의 하트 아이콘을 클릭시 좋아요 or 취소할 수 있습니다.
댓글
댓글
  • 인증된 사용자는 포스트에 댓글을 작성 or 취소할 수 있습니다.
메시지
메시지
  • 인증된 사용자는 서로에게 메시지를 보낼 수 있습니다.
  • 인증된 사용자는 메시지 내역을 확인할 수 있습니다.
타이머 & 스톱워치
타이머 & 스톱워치
  • 타이머와 스톱워치 기능을 제공합니다.
  • 전환버튼 클릭시 타이머와 스톱워치간 전환이 이루어집니다.
  • 유저가 원하는 시간을 직접 설정할 수 있습니다
잔디 심기
잔디 심기
  • 하루하루 공부한 기록을 시각적으로 보여주기 위해 잔디 심기 기능을 제공합니다.
  • 타이머 & 스톱워치를 사용하여 공부 시간을 기록한 사용자는 하루 회고를 작성한 사용자에 한하여 잔디가 심어집니다.
  • 심어진 잔디는 메인 페이지에서 확인 가능합니다.
랭킹
랭킹
  • 타이머 & 스톱워치의 사용 시간을 기준으로 랭킹을 매겨 유저를 나열한 페이지를 제공합니다.
  • 회원정보 버튼 클릭시 사용자 정보 페이지로 이동합니다.
D-Day
D-Day
  • 메인페이지에서 사용자가 설정한 D-Day를 확인할 수 있습니다.
  • D-Day가 설정되어 있지 않은 경우, 메인 페이지에서 모달창을 통해 D-Day 명과 날짜를 설정할 수 있습니다.
검색
검색
  • 필터를 통해 특정 포스트 혹은 특정 유저를 검색할 수 있습니다.
알림
알림
  • 알림 페이지를 통해 알림을 확인할 수 있습니다.
실시간 접속자 확인
실시간 접속자 확인
  • 게시판 상단에서 실시간 접속자를 확인할 수 있습니다.
 

4. 기술 스택

BASE
4
MORE
11
WORK
4
No Select0
TypeScript
TypeScript
language
React
React
library
Vite
Vite
build
npm
npm
package
axios
axios
API
Redux
Redux
stateManagement
react-query
react-query
dataFetching
react-router-dom
react-router-dom
route
storybook
storybook
test
vitest
vitest
test
Chakra UI
Chakra UI
UI library
Emotion
Emotion
style
ESLint
ESLint
codeFormat
Prettier
Prettier
codeFormat
Vercel
Vercel
deploy
Slack
Slack
co-work
Notion
Notion
co-work
Github
Github
co-work
Discord
Discord
co-work

5. 기능 명세서

주요 기능
기능
상세기능
비고
예외 처리
우선순위
로그인 & 회원가입
로그인
이메일 / 비밀번호를 입력받아validation 통과 시 로그인 성공
이메일 - /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g 비밀번호 - 8글자~20글자, 대문자 및 특수문자 포함
상
회원 가입
이메일 / 비밀번호 / 닉네임 을 입력받아 validation 통과 시 회원가입 성공
이메일 - 위 이메일 형식 비밀번호 - 8글자~20글자, 대문자 및 특수문자 포함 닉네임 - 글자 수 20자 미만 회원가입시 받아오는 token 가지고 바로 로그인처리
상
로그인
네이버 / 카카오 / 구글 등 소셜 로그인 기능 제공
셋중에 제일 쉬운거 도입 후 여건되면 다 도입
하
게시판
게시판
특정 게시판 선택하여 입장 가능
상
게시판 목록 조회
메인 페이지 & 하단 네비게이션바 게시판 탭으로 게시판 목록 조회가 가능함
상
포스트 목록 조회
원하는 게시판 선택 시 게시판에 업로드 된 포스트 목록을 보여주고, 클릭 시 해당 포스트를 보여줌
상
포스트
포스팅
유저는 각 게시판에 포스트를 업로드할 수 있음 - 글쓰기 버튼 클릭 시 포스트 작성 페이지로 이동 - 제목 / 내용 / 이미지 등을 첨부하여 글쓰기 버튼 클릭 시 해당 게시판에 포스트가 업로드 - 하단 이미지 미리보기 기능
게시판에서 글쓰기 버튼으로 포스트 작성 페이지 이동 → 포스트 작성 페이지에 업로드 하는 버튼 이름이 글쓰기 글자수 제한 300자 이미지 일단 1장제한 여건시 자동저장기능 도입 확장자 jpg jpeg png 2000x2000제한
중
포스트 삭제/수정
유저가 업로드 한 포스트의 three dot 버튼을 클릭하여 해당 포스트의 내용을 수정/삭제할 수 있음
상
포스팅
회고 게시판은 특정 템플릿을 사용하여 글 업로드
상
좋아요
좋아요
버튼 클릭 시 좋아요를 +-1 시킨다
상
댓글
댓글
유저들은 각 포스트에 댓글을 추가할 수 있음 - 포스트 하단의 input에 내용 입력 후 버튼 클릭 시 댓글 추가
상
본인이 작성한 댓글의 수정/삭제 버튼 클릭하여 해당 댓글을 수정/삭제할 수 있음
상
마이 페이지
회원 정보
내 프로필을 누르면 프로필 이미지 이메일 닉네임 비밀번호 4가지가 나온다. 이메일 제외한 3개는 수정가능
프로필 이미지 사이즈 제한 1000x1000 확장자 jpg jpeg png 닉네임, 비밀번호 validation은 회원가입과 동일
상
포스트 목록 조회
본인이 쓴 글 조회
중
댓글 목록 조회
본인이 쓴 댓글 조회
중
로그아웃
로그아웃
로그아웃시 쿠키에서 토큰 제거
상
메시지
메시지
특정 사용자와 소통한 메시지 목록 나열 및 전송하기
메시지 길이제한 필요 메시지 방에서는 바로 읽음처리 채팅처럼 보이기 위해 polling(주기적으로 데이터 refetching) 필요
중
타이머/스톱워치
타이머
타이머 설정 버튼누르면 00:00:01 ~ 23:59:59 숫자 입력. 이후 재생 버튼 누를시 타이머 시간 감소. 멈춤 버튼 누를시 시간 감소 중단
타이머 최대시간 논의필요 전환버튼 누를시 타이머와 스톱워치 간 전환
1. 멈춤 안누르고 껐을 때
상
스톱워치
재생 버튼 누르면 00:00:00부터 시간 흐름.
전환버튼 누를시 타이머와 스톱워치 간 전환. 여건이 되면 중간중간 기록하는 버튼 도입.
중
잔디 심기
잔디 심기
타이머 or 스톱워치를 이용한 사용자가 회고글을 작성하면 잔디가 심어진다.
(24 * 100 / 1) 값(백분율)을 올림하여 색상 전환 필요. 높아질수록 진해진다.색상 3~4개정도로 해서 25,50,75,100% 구간을 rgba투명도 처리 이런식으로…
중
잔디
메인페이지와 유저페이지에 잔디가 보여진다.
이번 달 기준 한달 보여주기. 12.01 ~ 12.31 여건되면 일주일, 일년 추가
중
D-Day
D-Day
D-Day 버튼 클릭 시 모달창을 통해 D-Day 날짜와 목표설정
날짜는 input date, 시작은 오늘 목표날짜는 최대 100년? 목표는 input text, 길이제한 20?
하
유저 페이지
회원 정보
프로필 이미지, 닉네임, 잔디 정보를 볼 . 수 있다. (팔로우 / 언팔로우 버튼은 추후 기능을 구현하게 된다면 추가)
프로필 이미지 사이즈 규격 필요 해당 유저와 팔로우 유무에 따라 버튼을 달리 제공해야함
상
팔로우
특정 유저를 팔로우 혹은 언팔로우 할 수 있음
해당 유저와의 팔로우 유무가 필요하다
하
검색
포스트 검색
검색창의 필터를 ‘포스트’ 로 선택 후 검색을 하면 검색어에 맞는 포스트가 나열됨
추가기능) 최신순 or 좋아요 순 정렬 기능이 필요할 수 있다
상
유저 검색
검색창의 필터를 ‘유저’ 로 선택 후 검색을 하면 검색어에 맞는 포스트가 나열된다
상
알림
알림
알림 페이지를 통해 알림(좋아요, 댓글, (팔로우))을 확인할 수 있다
라우팅 될때마다 알림 fetching or polling 필요
상
실시간 접속자 수 확인
실시간 접속자 수 확인
게시판 상단에서 실시간 접속자를 확인할 수 있다. 클릭시 사용자정보 페이지 이동
프로필 이미지, 닉네임을 가져와야 한다
상
팔로우한 유저만 보기 기능
하
랭킹
랭킹
유저들의 타이머 & 스톱워치의 사용 시간을 기준으로 랭킹을 매겨 제공한다. 11:59 이전에 회고글이 업로드 되어야 랭킹에 반영된다
랭킹은 당일 - 1일 기준이다.
하
랭킹 페이지에서 ‘회원 정보’ 버튼을 클릭 시 해당 유저 페이지로 이동한다
돋보기 버튼 클릭시 회원정보로 이동
하
다크 모드
다크 모드
프로젝트 진행할때 컬러값을 따로주지말고 colorMode 이용해서 진행한다. ⇒ 혹시라도 다크모드 적용하기 수월
중
 
 

6. User Story

사용자 분류
유저 스토리
기능
공통
모든 사용자는 메인 페이지 or 하단 네비게이터를 통하여 원하는 게시판에 접근할 수 있습니다.
게시판
공통
모든 사용자는 게시판에 접근하여 해당 게시판의 포스트 목록을 조회할 수 있습니다.
포스트
공통
모든 사용자는 포스트 목록 중에서 원하는 포스트의 상세 내용을 조회할 수 있습니다.
포스트
공통
모든 사용자는 검색 아이콘을 클릭하여 유저 필터가 활성화 되어 있다면, 사용자 목록을 검색할 수 있습니다.
검색
공통
모든 사용자는 검색 아이콘을 클릭하여 포스트 필터가 활성화 되어 있다면, 서비스에 게시되어 있는 포스트를 검색할 수 있습니다.
검색
공통
모든 사용자는 서비스 사용자의 정보(프로필 이미지, 이름, 잔디)를 볼 수 있습니다.
사용자 정보
인증된 사용자
인증된 사용자는 오늘의 공부를 인증하기 위하여 회고게시판에 글을 작성하길 원합니다
포스트
인증된 사용자
인증된 사용자는 포스트가 마음에 들어 좋아요를 누르길 원합니다
좋아요
인증된 사용자
인증된 사용자는 글이 마음에 들지 않아 댓글을 작성할 수 있길 원합니다
댓글
인증된 사용자
인증된 사용자는 본인이 작성한 댓글이 마음에 들지 않아 수정하길 원합니다
댓글
인증된 사용자
인증된 사용자는 자신을 팔로우하거나 좋아요를 눌렀단 사실을 알기 위하여 알림이 오길 원합니다
알림
인증된 사용자
인증된 사용자는 심심해서 다른 사용자에게 메시지를 보내길 원합니다
메시지
메시지 보내기
인증된 사용자
인증된 사용자는 자신에게 온 메시지가 궁금하여 확인하길 원합니다
알림
메시지
인증된 사용자
인증된 사용자는 보낸 메시지가 기억나지 않아 특정 사용자와의 메시지 대화 내역을 확인 하길 원합니다.
메시지
인증된 사용자
인증된 사용자는 다른 사용자의 게시글을 추적하기 위하여 팔로우/언팔로우 하길 원합니다
팔로우
인증된 사용자
인증된 사용자는 글 작성할때 인증샷으로 이미지 첨부하길 원합니다
포스트
인증된 사용자
인증된 사용자는 회고글을 작성할때 오늘 사용했던 타이머를 첨부하길 원합니다
포스트
인증된 사용자
인증된 사용자는 로그아웃하길 원합니다
로그아웃
인증된 사용자
인증된 사용자는 타이머를 사용하여 공부시간을 체크하길 원합니다
타이머
인증된 사용자
인증된 사용자는 프로필 이미지가 마음에 들지않아 프로필 이미지를 바꾸길 원합니다
내 정보
인증된 사용자
인증된 사용자는 자신의 비밀번호를 변경하길 원합니다
내 정보
인증된 사용자
인증된 사용자는 작성한 글이 마음에 들지 않아 삭제를 원합니다
포스트
인증된 사용자
인증된 사용자는 작성한 글에 오타가 있어 수정을 원합니다
포스트
인증된 사용자
인증된 사용자는 D-Day, 목표를 바꾸고싶어 수정을 원합니다
D-Day
인증된 사용자
인증된 사용자는 자신의 잔디가 얼마나 아름다운지 보기위하여 주,월,년 단위로 보고싶어 합니다
잔디
비인증 사용자
비인증된 사용자는 회원가입을 하길 원합니다
회원가입
비인증 사용자
비인증된 사용자는 기존에 가입된 정보로 로그인을 하길 원합니다
로그인
비인증 사용자
비인증된 사용자는 편하게 네이버나 카카오로 로그인하고 싶어합니다
로그인
 

7. 개발 문화

💻
개발 문화
 

8. 와이어프레임 & 디자인

 
notion image
Page.tsx
Fetcher.tsx
{data ⇒ Container.tsx (ViewComponent)}
YYYFetcher