주제
Bigtoria - 자서전 공유 SNS "이건 나의 Big (s)tory 야"
핵심기능
기록
: 사용자가 올린 자신의 스토리를 연혁으로 한 눈에 볼 수 있다.
공유
: 커뮤니티 안에서 다른 사람의 스토리를 볼 수 있고, 교류가 가능하다.
기획 배경 및 동기
Bigtoria는, 자신의 일대기를 기록하고 다른 사람들과 공유할 수 있는 커뮤니티 사이트입니다.
기존의 SNS는 단편으로 컨텐츠를 작성하고 게시하는 것에 초점이 맞춰져 있습니다. 게시글들은 격자 혹은 일렬로 나열되어 보여지며 사용자는 일상 공유뿐만 아니라, 셀프 브랜딩, 작품 홍보 등 다양한 목적을 가지고 게시글을 작성하게 됩니다.
때문에 작성한 기록물을 인생 전체 흐름 속에서 살펴보거나, 특정 시기별로 모아서 추억해보는 일은 SNS 기능 면에서 애초에 제공이 되지 않거나, 폴더를 따로 생성하여 관리해야 하는 등 사용자의 추가적인 노력이 필요합니다.
Bigtoria는 인생스토리를 작성한다는 목적에 좀 더 초점을 맞추어, 사용자가 기록한 추억들을 한 눈에 살펴볼 수 있도록 도와줍니다.
자신이 태어난 해를 출발선으로 사용자는 그 동안 어떤 경험들을 가졌었고, 어떤 것들을 성장 발판으로 삼았는지 지나온 시간들을 회상할 수 있습니다.
[ Problem & Solution ]
문제
SNS의 기능을 갖추고 있으면서 나의 인생 스토리를 시간 흐름에 맞게 기록할 수 있는 플랫폼이 있었으면 좋겠다.해결
- 타임라인을 도입해서 연도별로 사용자의 기록을 관리할 수 있게 한다.
- SNS기능을 통해 다른 사람의 프로필과 게시글들을 살펴볼 수 있게 한다.
주요 타겟층
- 일상 혹은 추억하고 싶은 사건들을 기록으로 남기고 싶은 사람
- 타임라인과 같이 연도별로 자신의 기록을 정리하고 보여주고 싶은 사람
- 다른 사람들의 인생 스토리를 찾아보고, 교류하고 싶은 사람
스토리 보드
30대 B씨는 개발자로 취직하고 지난 5년 동안, 일상 기록과 더불어 자신의 커리어와 관련한 사건들을 Bigtoria에 남겨왔다. B씨는 어떤 일이 있었고, 무엇을 이루기 위해 노력했는지 글로 자세히 기록해두었고, 연도별로 정리된 그 동안의 발자취를 통해서 성장했다는 것을 회고할 수 있었다. 문득, 다른 사람들은 지금까지 어떤 삶을 살아가고 있는 지 궁금해졌다. 검색창을 열어 자신과 같은 이름을 가진 사람들은 없는 지 검색해보고, 랜덤으로 노출된 사람들의 프로필 중 하나를 클릭해 보았다. 마침 같은 직군으로 활동하고 있는 시니어 개발자 C의 프로필이었다. 그가 자신이 현재 고민하고 있는 것들을 미리 경험한 사람이라는 것을 알게 된 후, 이야기를 나눠보고 싶어 C의 계정을 팔로우하고 메세지을 보내보기로 했다.
기능 구현
Storybook
: 게시글 타임라인
Story
: 게시글 하나
기능 | 구현 내용 | 세부사항 | 담당 |
햄버거 메뉴 | 사용자는 햄버거 버튼을 클릭하면, 메뉴화면을 볼 수 있다. | - 슬라이드 애니메이션 | 충일 |
회원가입 / 로그인 | 사용자는 회원가입을 할 수 있다 | - 아이디(이메일)
- 비밀번호
- 이름
- 출생연도
- 직업 | 민우 |
ㅤ | 사용자는 로그인할 수 있다. | - 아이디(이메일)
- 비밀번호 | 승준 |
사용자 프로필 편집 | 사용자는 자신의 프로필을 편집할 수 있다. | - 이름
- 직업
- 프로필 이미지 | 유리 |
Bigtoria | 인증된 사용자는 Story 를 생성할 수 있다. | - 날짜
- 제목
- 이미지
- 글 내용 | 유리 |
ㅤ | 인증된 사용자는 Story 를 수정할 수 있다. | ㅤ | 유리 |
ㅤ | 인증된 사용자는 Story 를 삭제할 수 있다. | ㅤ | 유리 |
ㅤ | 사용자는 Story 상세 내용을 볼 수 있다. | ㅤ | 유리 |
프로필 전체 목록/ 사용자 검색 | 사용자는 다른 사용자들의 프로필 목록을 볼 수 있다. | - 프로필 노출 전략
1. 랜덤 사용자 목록 | 미현 |
ㅤ | 사용자는 다른 사용자의 프로필을 검색할 수 있다. | - 검색 키워드 : 이름
1. 직업, 출생연도 키워드 적용(추가 구현사항) | 미현 |
유저 정보 | 사용자는 내 Storybook 을 볼 수 있다. | ㅤ | 승준 |
ㅤ | 사용자는 다른 사용자의 Storybook 을 볼 수 있다. | ㅤ | 승준 |
다크모드 | 사용자는 버튼을 누르면 다크모드로 전환할 수 있다. | ㅤ | 충일 |
알림 | 인증된 사용자는 헤더바에서 알림을 확인할 수 있다. | ㅤ | 미현 |
ㅤ | 인증된 사용자는 알림을 통해 메세지가 왔음을 알 수 있다. | ㅤ | 미현 |
ㅤ | 인증된 사용자는 알림을 통해 자신의 게시글에 좋아요 혹은 댓글이 달렸음을 알 수 있다. | ㅤ | 미현 |
팔로우 목록 | 사용자는 팔로우(내가 팔로우하는 사람) 목록을 보여줄 수 있다. | ㅤ | 민우 |
ㅤ | 사용자는 팔로워(나를 팔로우하는 사람) 목록을 볼 수 있다. | ㅤ | 민우 |
메세지 | 인증된 사용자는 다른 사용자에게 메세지를 보낼 수 있다. | ㅤ | 충일 |
예외처리 | 사용자는 잘못된 접근 시 에러 페이지를 볼 수 있다. | ㅤ | 민우 |
컴포넌트별 분류
category | component | category | component |
logo | [div] : Bigtoria 로고 | Image | - 사용자 프로필 이미지
- 게시글 이미지 |
page | - 프로필 목록 페이지
- 팔로우 목록
- 알림 페이지
- 로그인
- 회원가입
- Storybook(사용자의 타임라인 페이지)
- Story 상세 페이지
- Story 작성페이지
- 404 Not found | content(text) | [페이지 타이틀]
- 프로필 전체 목록
- 승준의 스토리
- 스토리 구경하기
- 내 스토리
- 팔로우 목록
- 로그아웃/로그인
- 회원가입
- 로그인
- 추가 정보
- 스토리 제목
- 스토리 추가
- 알림 |
button | [햄버거]
- 로그인
- 로그아웃
- 스토리 구경하기(프로필 전체 목록)
- 팔로우 목록 보기
- 내 스토리 | ㅤ | [로그인 페이지]
- 회원가입 안내 문구 |
ㅤ | [댓글] / Story상세 페이지
- 추가
- 삭제
- 수정 | ㅤ | [프로필 전체 목록]
- 사용자 이름
- 사용자 직업
- 사용자 간이 설명 |
ㅤ | [알림] / 알림페이지
- 메시지 탭
- 게시글 탭
- 알림 삭제 | ㅤ | [Storybook 페이지(타임라인)]
- 사용자 이름
- 직업
- 연도 |
ㅤ | [회원가입] / 회원가입페이지
- 회원가입 | ㅤ | [Story 작성 페이지]
- 연도
- 제목
- 이미지
- 내용 |
ㅤ | [Story]
- Story 추가(mini) / 내 Storybook 페이지
- Story 추가(full) / Story 작성 페이지 | ㅤ | [Story 상세 페이지]
- 글 내용
- 작성 날짜
- 댓글 내용 |
ㅤ | [사용자 검색] / 프로필 목록 페이지
- 사용자 검색 | ㅤ | [알림 페이지]
- 알림 정보 |
ㅤ | [다크모드]
- 다크모드 | ㅤ | ㅤ |
ㅤ | [팔로우] / 사용자 Storybook페이지, 팔로우 목록 페이지
- 팔로우 추가
- 팔로우 삭제 | ㅤ | ㅤ |
ㅤ | [좋아요] / Story 상세 페이지
- 좋아요 | ㅤ | ㅤ |
input | [Story] / Story 작성페이지
- 캘린더 연도
- 제목
- 이미지
- 글 내용 | ㅤ | ㅤ |
ㅤ | [댓글]
- 댓글 입력 | ㅤ | ㅤ |
ㅤ | [로그인]
- 아이디(이메일)
- 비밀번호 | ㅤ | ㅤ |
ㅤ | [회원가입]
- 이름
- 아이디(이메일)
- 비밀번호
- 비밀번호 확인
- 출생연도
- 직업 | ㅤ | ㅤ |
기술 스택
- Vite
- React
- TypeScript
- Emotion + MUI
- normalize css
- Axios
- Context API
📒 👀 ✍ 🛠️ 🌠