주제
Bigtoria - 자서전 공유 SNS
핵심기능
기록: 사용자가 올린 스토리를 연혁으로 한 눈에 볼 수 있다.
공유: 커뮤니티 안에서 다른 사람의 스토리를 볼 수 있고, 교류가 가능하다.
기획 배경 및 동기
Bigtoria는, 나의 일대기를 기록하고 다른 사람들과 공유하는 커뮤니티 사이트다.
기존 sns의 경우, 단편으로 컨텐츠를 작성하고 게시하는 것에 초점이 맞춰져 있다. 게시글들은 격자 혹은 일렬로 나열되어 보여지며 일상 공유뿐만 아니라, 셀프 브랜딩, 작품 홍보 등 사용자가 다양한 목적을 가지고 게시글을 작성하게 된다.
때문에 자신의 스토리를 인생 전체 흐름 속에서 살펴보거나, 특정 시기에 일어난 일들을 모아서 추억해보는 일은 sns 기능 면에서 애초에 제공이 되지 않거나, 폴더를 따로 생성하여 관리해야 하는 등 사용자의 추가적인 노력이 필요하다.
Bigtoria는 인생스토리를 작성한다는 목적에 좀 더 초점을 맞추어, 사용자가 기록한 추억들을 한 눈에 살펴볼 수 있도록 도와준다.
자신이 태어난 해를 출발선으로 사용자는 그 동안 어떤 경험들을 가졌었고, 어떤 것들을 성장 발판으로 삼았는지 지나온 시간들을 회상할 수 있다.
[ Problem & Solution ]
문제 sns의 기능을 갖추고 있으면서 나의 인생 스토리를 시간 흐름에 맞게 기록할 수 있는 플랫폼이 있었으면 좋겠다.해결 타임라인을 도입해서 연도별로 사용자의 기록을 관리할 수 있게 한다. 그리고 sns기능을 통해 다른 사람의 프로필과 인생스토리를 살펴볼 수 있게 한다.기획 의도 간단 정리
- 기존 sns의 경우, 개별 게시글들을 격자형태로 혹은 일렬로 보여준다.
- 단편으로 컨텐츠를 작성하고 게시하는 것에 초점이 맞춰져 있기 때문에 지나온 시간 전체를 흐름에 따라서 추억하는 것에는 어렵다. 혹은 추가적인 노력이 든다.
- 기록한 게시글들을 시간 순서에 따라 한 눈에 보고 싶다.
- 일상공유를 넘어서 나의 일대기를 표현하는 수단이 있었으면 좋겠다.
- 나의 발자취를 밟아가면서 어떤 경험들을 가졌고, 어떤 것을 배웠고, 어떻게 성장했는 지 확인하고 싶다.
- 이름 : footprints?
- 이런 나의 경험들을 공유하고, 다른 사람들의 이야기를 들어보고 싶다
주요 타겟층
역사를 잊은 민족에게 미래는 없다
- 일상 혹은 추억하고 싶은 사건들을 기록으로 남기고 싶은 사람
- 타임라인과 같이 연도별로 자신의 기록을 정리하고 보여주고 싶은 사람
- 다른 사람들의 인생 스토리를 찾아보고, 교류하고 싶은 사람
스토리 보드(시나리오)
30대 B씨는 개발자로 취직하고 지난 5년 동안, 일상 기록과 더불어 자신의 커리어와 관련한 사건들을 Bigtoria에 남겨왔다.
B씨는 어떤 일이 있었고, 무엇을 이루기 위해 노력했는지, 어떤 점이 힘들었는지 글로 자세히 기록해두고, 연도별로 정리된 자신의 발자취를 보면서 얼만큼 성장 했는지 느낀다.
문득, 다른 사람들은 지금까지 어떤 삶을 살아가고 있는 지 궁금해졌다.
검색창을 열어 자신과 같은 이름을 가진 사람들은 없는 지 검색해보고, 랜덤으로 노출된 사람들의 프로필 중에 하나를 골라 들어가 보았다.
마침 같은 직군으로 활동하고 있는 시니어 개발자 C의 프로필을 알게 되었고 현재 고민하고 있는 부분들을 미리 경험해 온 사람이라는 것을 알게 되었다. 이야기를 나눠보고 싶어 C의 계정을 팔로우하고 메세지을 보내보기로 했다.
사용 시나리오
시나리오
- 민우는 Bigtoria 메인페이지에 접속하자마자 다양한 사람들의 프로필 사진들을 볼 수 있었다.
- 민우는 근육맨의 프로필 페이지로 들어가서, 간단한 자기 소개와 함께 태어난 연도부터 지금까지의 타임라인을 볼 수 있었다.
- 2010년 섹션에 올라와 있는 이미지를 하나 클릭하니, 2010년 밴쿠버 올림픽을 관람했었다는 글을 확인할 수 있었다.
- 민우는 흥미가 생겨 회원가입을 하고 자신의 스토리를 작성해보려고 한다.
- 사진과 함께 오늘부터 Bigtoria을 시작한다는 간단한 글을 남겼다. 내 스토리 페이지에서 1997에 태어났다는 문구와 2023년 타임라인에 방금 작성한 게시글을 확인할 수 있었다.
- 민우는 다시 근육맨을 검색해서 프로필 페이지로 이동했다. 팔로우 버튼을 누르고 2010년 밴쿠버 올림픽 앞에서 찍은 사진에 좋아요 버튼을 클릭했다.
- 스포츠를 좋아하는 민우는 공통의 관심사가 있는 근육맨에게 메세지를 보내보기로 한다. 얼마 후, 민우는 알림탭을 통해서 근육맨이 보낸 답장을 확인할 수 있었다.
- 민우는 알림탭을 통해서 자신이 방금 작성한 게시글에 근육맨이 달은 댓글을 확인할 수 있었다.
각자 작성한 글
- 일본에서 일한지 5년째인 34세 xx, 앨범을 켜보니 한국에서 찍은 사진들이 뜬다. 하지만 그곳이 어디였고 무엇을 했는지는 기억나지 않고 막연한 회상에 빠진다. 언젠가 다시 한국으로 이직할때 일본에서의 추억과 감정을 기록하기 위해 나만의 스토리를 작성한다.
- 새롭게 미용공부를 배우고자 하는 10대 후반의 한 소녀. 학원을 등록하고, 커리큘럼에 따라서 이제 다음주에 시작이다! 매일은 아니어도 미용공부의 여정을 쭉 기록하고 싶다. 오늘은 무엇을 배웠고, 어떤 점이 어려웠고,
오늘로 3년째 되어 이제 미용사가 되었다. 3년 동안의 이력을 한 눈에 돌아보니, 때로는 재밌었고, 때로는 힘들었지만 성실히 노력해왔다는 생각이 든다.
- 승준: 29살 신승준, 어떻게 살아왔는지 회상을 하고 싶은데 앨범을 뒤져보려고 하니 잘 보이지 않는다. 온라인으로 내 인생을 기록해둘만한 곳은 없을까? 인스타, 페이스북은 너무 부담스러운데… 일기장 앱은 왠지 매일 써야 될 것 같다. 그러면 이 서비스를 이용해봐야겠다.
- 일단 접속하면 로그인을 안해도 다른 사람들이 어떻게 자신의 스토리를 썼는지 볼 수 있구나
- 관심이 가는 프로필들을 뒤져본다.
- 오 이 사람은 이렇게 사용했구나. 나도 작성해볼까?
- 로그인을 해야 되는구나 회원가입을 하자
- 직군, 나이, 거주지 정도는 넣어줘야 하는구나
- 출발시점은 내가 태어난 날이네. 이게 기본 스토리로 들어가 있구나.
- 지금 다 적기에는 사진도 찾아야되고 귀찮기도 하니 2022년 개발자로 전환하기로 마음먹고 코드를 작성했던 사진과 함께 스토리 1개를 작성해야겠다.
- 대학교 졸업을 앞둔 20대 A. 대학생활 전반을 돌아보고 기억에 남는 일들을 사진과 글로 한 곳에 기록하고 싶다. 대학교 이전과 이후의 삶도 비교해보면서 얼마나 성장했는지 한눈에 보고 싶다. 그리고 정리한 추억과 경험들을 지인들과 함께 공유하고 이야기해보고 싶다!
기능 구현
- 햄버거 메뉴
- 회원가입 / 로그인 → (승준)
- 아이디(이메일)와 이름을 통해 회원가입할 수 있다.
- 회원가입시 추가 정보(출생연도/성별/직업)를 입력할 수 있다.
- 아이디(이메일)을 통해 로그인할 수 있다.
- Bigtoria
- Story를 생성, 수정, 삭제할 수 있다.
- Story생성시 연도/제목/이미지/내용을 저장할 수 있다.
- 자신의 StoryBook을 볼 수 있다.
- 다른 사용자의 StoryBook을 볼 수 있다.
- 상세한 Story를 볼 수 있다.
- 댓글을 생성/수정/삭제할 수 있다.
[Story 생성] → 유리, 승준(이미지)
[Story 보기] → 승준
- 사용자 검색 → 미현
- 사용자의 (출생연도/직업)에 따라 다른 사용자의 프로필을 검색할 수 있다.
- 다크모드 → 충일
- 버튼을 누르면 다크모드로 전환할 수 있다.
- 유저정보 → (민우)
- 해당 유저의 StoryBook을 볼 수 있다.
- 알림 → (유리, 미현)
- 헤더바에 페이지로 알림을 확인할 수 있다.
- 나에게 메세지가 왔을때 알림이 온다.
- 나의 Story에 좋아요나 댓글이 달리면 알림이 온다.
나를 팔로우하거나 팔로우한 사람 게시글이 올라오면 알림이 온다.
- 메세지 → 충일
- 상대방에게 메세지를 보낼 수 있다.
- 예외처리 → 민우
- 잘못된 접근시 에러 페이지가 뜬다(ex_404 Not Found)
component
- 회원가입 로그인
- 연도별 정리된 스토리들
- 나만의 스토리 작성
- 유저 목록
- 유저 상세 정보
page
- 전체 유저목록
- 팔로우 목록
- 알림을 보는 페이지
- 로그인
- 회원가입
- 특정 사람의 스토리 전체 연혁
- 특정 사람의 특정 스토리 하나를 보는 페이지
- 하나의 스토리를 작성하는 페이지
- 404 Not Found 페이지
button
- 햄버거
- 로그인
- 로그아웃
- 스토리 구경하러 가기
- 팔로우 목록
- 내 스토리
- 댓글
- 삭제
- 추가
- 수정
- 알림
- 메시지
- 게시글
- 알림 삭제(x)
- 회원가입
- 포스트 추가(mini(추가), full(저장))
- 사용자 검색
- 다크모드
- 팔로우 추가(삭제)
- 좋아요(명칭)
input
- 에디터 페이지
- 캘린더 연도
- 제목
- 이미지 첨부
- 글 내용
- 댓글 입력
- 로그인
- 아이디
- 비밀번호
- 회원가입
- 이름
- 아이디
- 비밀번호
- 비밀번호 확인
- 추가정보
- 출생연도
- 성별
- 직업
Img component
- 사용자 프로필 이미지
- 게시글 이미지
content
- 타이틀
- 프로필 전체 목록
- 승준의 스토리
- 스토리 구경하기
- 내 스토리
- 팔로우 목록
- 로그아웃/로그인
- 로그인
- 회원가입
- 추가 정보
- 스토리 제목
- 스토리 추가
- 알림
- 팔로우 목록
- 페이지 별
- 로그인
- 회원가입 안내 문구
- 사용자 프로필
- 이름
- 직업
- 간이 설명
- 스토리 연혁
- 연도
- 스토리 추가 페이지
- 연도
- 제목
- 이미지
- 내용
- 스토리 상세 페이지
- 글 내용
- 날짜
- 댓글 내용
- 알림
- 알림 정보
div
- StoryBook 로고(누르면 홈(사용자 목록)으로)
기술 스택
- Vite
- React
- TypeScript
- Emotion + MUI + Emotion reset
- Axios
- Context API