Shallenge 프로젝트 기획서

프로젝트 개요

• 목적 : 일정 기간 동안 달성할 목표를 정하고, 인증 및 기록, 공유하는 SNS 웹 서비스

• 수행 기간 : 2022.06.06 ~ 2022.06.22

• 팀원 : 권내영, 김재호, 조계진, 조승희

1. 🏞선정 배경

• 대다수의 사람들이 계획을 세우고 달성하기 위해 어플리케이션을 사용하지만 잘 지키지 못한다.
• 목표를 꾸준히 지킬 수 있는 동기부여가 필요하다.
• 단순 목표를 세우는 것 보다 달성 시 나에게 주는 보상을 정함으로써 동기부여가 되게 한다.
• 또한 나와 비슷한 목표를 가진 다른 사용자들의 기록을 보며 자극 받고, 서로 응원이나 댓글을 통해 격려해 목표를 완수할 수 있도록 도와준다.

• todo app 및 habit tracker와 같이 많은 목표, 습관 서비스가 있지만, 서로 자신의 목표와 상황을 공유하는 SNS 형태는 거의 존재하지 않는다.
• 목표에 대한 내용과 기간을 금전적인 강제성 없이 스스로 정해 도전하고, 그것을 공유하는 것에도 도전만큼의 가치를 두어 개인의 목표 달성을 독려한다.
• 자신이 세운 목표와 보상을 기록함으로써 성취감을 얻을 수 있다.

• 기존의 todo app, habit tracker은 기록을 하는 것 자체에 중점을 두는데, 단순 기록을 넘어 목표를 달성할 수 있도록 장치를 만들어 목표 달성을 독려할 수 있도록 한다.

• 유사 서비스 : 마이루틴(다른 사람 루틴 볼 수 있다) / 챌린저스(목표에 참가해서 상금 획득) / 30일 챌린지(공유 기능없다)

2. 🔑키워드

목표(이하 챌린지) 공유

• 챌린지 공유를 통해 응원을 주고 받는다.

• 다른 사람의 챌린지 및 달성 기록을 보고 동기부여 받는다.

• 하나의 챌린지는 각각 하나의 기록으로 남고, 공유된다.

게이미피케이션

• gamify + -cation으로 시스템에 게임적인 요소를 추가하여 놀이라는 심리를 통해 행동에 재미를 부여하는 방식
• 사용자의 호기심을 자극할 요소(예 : 인증을 할 때마다 랜덤한 색으로 채워짐)
• 프로필의 테두리 색상 또는 뱃지가 달라진다.(테두리나 뱃지를 프로필 사진과 함께 다닐 건지)

• 챌린지 설정을 할 때, 달성 시 자신에게 줄 보상을 적는다 (예: 한 달 동안 운동하기 → 치팅데이)

3. 🎯타겟 사용자

• 자기 개발에 관심이 많고 PC, 스마트폰 사용 가능한 사람 (특히 10 ~ 30대)

• 주기적인 습관을 만들고 싶은 사람

• 챌린지 성취를 즐기는 사람

• 인스타그램을 공스타그램 또는 자기 개발용으로 사용하는 사람

4. 🔠용어 정리

• 사용자 : 서비스를 이용하는 모든 사용자

• 챌린지 : 사용자 개인이 만드는 컨텐츠로 내용, 채널(카테고리), 기간, 보상을 가짐

• 채널 : 챌린지가 분류되는 집합

• 보상 : 사용자가 챌린지 달성 시 얻고자 하는 것

5. 🎨대표 색상

• 친근함, 편안함을 주는 오렌지 베이스 색상

• 보조 색상으로는 #ffaa6d

6. 👤사용자 시나리오

• 가상의 사용자를 정해 이 사용자가 어떤 흐름으로 서비스를 사용할 것인지 시나리오를 정리
1. 서비스를 실행하고, 회원가입 혹은 로그인을 한다.
2. 로그인 후 사용자 페이지에서 챌린지를 설정한다.
3. 사용자 페이지에서 챌린지를 확인하고, 자신이 정한 날짜에 사진을 업로드 해 기록한다.
4. 다른 사용자들의 기록을 보고, 응원하기 및 댓글을 남긴다.
5. 챌린지를 달성하고, 기록을 공유한다.

7. 📃주요 기능

• 챌린지 설정 기능
• 기간 및 요일을 설정해서 챌린지를 설정 가능

• 챌린지 인증 기능
• 사진 업로드 기능을 통해 사진을 통한 기록 가능

• 기록 보기 기능
• 각 챌린지별로 달성 퍼센트 및 남은 기간 보기 가능

• 계정 공개 기능
• 자신의 기록 계정 공개 기능을 통해 다른 사람이 자신의 챌린지들과 기록들을 볼 수 있도록 공개

• 계정 팔로우, 응원하기 기능
• 다른 사용자를 팔로우하거나, 다른 사용자의 특정 챌린지를 응원하기

• 알람 기능
• 자신의 계정에 다른 사용자가 팔로우, 댓글, 응원을 하면 알림 울리기

8. 📜페이지 구성

• 홈 페이지(HomePage)
• 사용자 검색 창(헤더)
• (선택) 디바운싱으로 실시간 검색
• 검색 결과는 사용자 검색 페이지(SearchUserPage)로 이동
• 채널 목록
• 각 채널의 최신 2개씩 보여주기
• 각 채널의 더보기 버튼

• 회원가입 / 로그인 페이지(AuthPage)
• 로그인 폼 (탭 기본값)
• 이메일 / 비밀번호
• 회원가입 폼
• 이메일 / 이름 / 비밀번호 / 비밀번호 확인

• 사용자 페이지(UserProfilePage)
레퍼런스 사진

 
• 로그인한 사용자가 자신의 사용자 페이지에 접근하면 마이페이지 역할
• 프로필 사진 / 자기소개 한 줄
• 팔로잉 / 팔로워
• 챌린지 목록 (카드)
• 챌린지 제목
• 응원하기 수
• 댓글 수
• 달성률
• 챌린지 추가하기 버튼(본인만)
• 진행 중인 챌린지 / 완료된 챌린지 (탭)
• 사용자 정보 수정
• 사용자 정보 수정 페이지(EditProfilePage)로 이동

• 알림 페이지(NotificationPage)
• 자신에게 온 알림 목록 보여주기, 하단 탭에서 알림 탭 클릭하면 이동
• (예시) 사용자1님이 나를 팔로우했습니다.
• (예시) 사용자1님이 [챌린지 타이틀]에 응원했습니다.
• (예시) 사용자1님이 [챌린지 타이틀]에 댓글을 작성했습니다.

• 챌린지 만들기 페이지(CreateChallengePage)
레퍼런스 사진





• 챌린지 작성
• 채널 선택
• 시작일 선택
• 보상 작성

• 챌린지 페이지(ChallengePage)
레퍼런스 사진





• 홈이나 사용자 페이지에서 카드를 클릭하면 이동
• [ 챌린지 / 기간 / 보상 / 달성률 / 댓글 / 응원 수 ] 확인 가능할 수 있도록 페이지 제공
• 댓글은 댓글 페이지(CommentPage)로 이동
• 현재 달성 현황
• 인증(파일 올리기)

• 채널 페이지(ChallengsPage)
• 채널 종류
• 💪 운동
• ✏ 공부
• 📖 독서
• 🛌 루틴(물 먹기, 기상, …),
• ❤ 자기계발
• 홈에서 채널 버튼 클릭이나 채널의 more 버튼 클릭하면 이동
• 해당 카테고리의 챌린지 카드를 볼 수 있음

• 팔로잉 / 팔로워 페이지(FollowPage)
• 사용자 페이지에서 접근
• 탭
• 접속 중 인지 확인 가능
• 프로필 사진, 이름
 

• 404 에러 대응 페이지(NotFoundPage)

9. ⛓와이어 프레임

10. 🔩기술 스택

• 프레임워크 : React.js (TypeScript)

• 라이브러리, 익스텐션 : Prettier, ESLint, React-query, axios, react-router-dom, feather-icons

• 상태관리 : Jotai

• UI : Storybook

• 협업툴 : Git, Slack, Notion, Figma