재호팀 기획서

프로젝트 개요

• 프로젝트명 : Shallenge(Share + Challenge)

• 일정 기간 동안 달성할 목표를 정하고, 인증 및 기록, 공유하는 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. 대표 색상

• 챌린저스 색상 예시 #ff3257, #ff4343, #fe6067

• 당근마켓 #ff8a3d, #ff7e36

• 트레바리 #ff7900 당첨

• 친근함, 편안함

6. 사용자 시나리오

• 가상의 사용자를 정해 이 사용자가 어떤 흐름으로 서비스를 사용할 것인지 시나리오를 정리

1. 서비스를 실행하고, 회원가입 혹은 로그인을 한다.(선택사항: 회원가입시 별도 절차 없이 로그인)

2. 로그인 후 사용자 페이지에서 목표를 설정한다.

3. 사용자 페이지에서 목표를 확인하고, 자신이 정한 날짜에 사진을 업로드 해 기록한다.

4. 다른 사용자들의 기록을 보고, 응원하기 및 댓글을 남긴다.

5. 목표를 달성하고, 기록을 공유한다.

7. 주요 기능

• 목표 설정 기능
• 기간 및 요일을 설정해서 목표를 설정 가능

• 목표 인증 기능
• 사진 업로드 기능을 통해 사진을 통한 기록 가능

• 기록 보기 기능
• 각 목표 별로 달성 퍼센트 및 남은 기간 보기 가능 / 사진 모아 보기 가능

• 기록 공유 기능
• 기록 별 실시간 공유 기능, 끝난 뒤 기록 공유 기능

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

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

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

8. 페이지 구성

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

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

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

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

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

• 목표 만들기 페이지
레퍼런스 사진





• 목표 작성 / 카테고리 선택
• 운동, 공부, 독서, 루틴(물 먹기, 기상, …), 자기계발
• 기간 선택
• 시작 / 끝 날짜 + 게이미피케이션 요소
• 보상 작성 (다른 사용자들이 어떻게 목표 및 보상을 작성하는지, 또는 달성했는지 이 페이지에서 참고할 수 있도록 보여주면 좋을 듯)

• 목표 페이지
레퍼런스 사진





• 홈이나 사용자 페이지에서 카드를 클릭하면 이동
• [ 목표 / 기간 / 보상 / 달성률 / 댓글 / 응원 수 ] 확인 가능할 수 있도록 페이지 제공
• 현재 상황 (해야 하는 일 마다 달성 여부) 한눈에 볼 수 있는 시각화 제공 (예: 막대그래프)
• 인증(파일 올리기 및 사진 촬영 기능(가능 여부 모르겠음))

• 채널 페이지
• 홈에서 채널 버튼 클릭이나 카테고리의 + 버튼 클릭하면 이동
• 해당 카테고리의 목표 카드를 볼 수 있음

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

• 404 페이지

9. 와이어 프레임

10. 기술 스택

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

• 라이브러리, 익스텐션 : Prettier, ESLint

• 상태관리 : Context API

• UI : Emotion, storybook

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