- 내용 : 팀 프로젝트에 대한 전반적인 내용과 시연 영상 포함하여 제작
- 기획(프로젝트 및 팀 소개, 팀 문화, 와이어 프레임, 디자인 시안 등)
- 개발(사용 기술, 협업 방식, 개발 역할 등)
- 결과(시연 및 소개, 요구사항 구현 내용 등)
- 기타
- 시간 : 10분 내외
- 제출 : [링크] → 각 팀장에게 권한 부여 완료, 업로드 후 전체 뷰어 변경 예정
- 최종 제출 발표 자료
- 업로드 완료 후, 팀 프로젝트에 각각 링크 추가 (배포 링크도!)
기획
프로젝트 소개
- 타이틀
- 개인 자서전 공유 SNS 빅토리아(Bigtoria) — 나의 Big (s)tory
- 자신의 일대기를 기록하고 다른 사람들과 공유할 수 있는 커뮤니티 사이트
기획 배경
📒 기획 배경
Bigtoria는, 자신의 일대기를 기록하고 다른 사람들과 공유할 수 있는 커뮤니티 사이트입니다.
기존의 SNS는 단편으로 컨텐츠를 작성하고 일렬로 게시하는 것에 초점이 맞춰져 있습니다. 또한, 사용자는 일상 공유뿐만 아니라, 셀프 브랜딩, 작품 홍보 등 다양한 목적을 가지고 게시글을 작성하게 됩니다.
때문에 작성한 기록물을 인생 전체 흐름 속에서 살펴보거나, 특정 시기별로 모아서 추억해보는 일은 SNS 기능 면에서 애초에 제공이 되지 않거나, 폴더를 따로 생성하여 관리해야 하는 등 사용자의 추가적인 노력이 필요합니다.
Bigtoria는 인생스토리를 작성한다는 목적에 좀 더 초점을 맞추어, 사용자가 기록한 추억들을 한 눈에 살펴볼 수 있도록 도와줍니다.
자신이 태어난 해를 출발선으로 사용자는 그 동안 어떤 일들을 경험했고, 어떤 것들을 성장 발판으로 삼았는지 지나온 시간들을 회상할 수 있습니다.
💡 [ Problem & Solution ]
문제- SNS의 기능을 갖추고 있으면서 나의 인생 스토리를 시간 흐름에 맞게 기록할 수 있는 플랫폼이 있었으면 좋겠다.
해결- 타임라인을 도입해서 연도별로 사용자의 기록을 관리할 수 있게 한다.
- SNS기능을 통해 다른 사람의 프로필과 게시글들을 살펴볼 수 있게 한다.
주요 타겟층
스토리 → 안 넣어도 될까요?
30대 민우씨는 개발자로 취직하고 지난 5년 동안, 일상 기록과 더불어 자신의 커리어와 관련한 사건들을 Bigtoria에 남겨왔다. B씨는 어떤 일이 있었고, 무엇을 이루기 위해 노력했는지 글로 자세히 기록해두었고, 연도별로 정리된 그 동안의 발자취를 통해서 성장했다는 것을 회고할 수 있었다. 문득, 다른 사람들은 지금까지 어떤 삶을 살아가고 있는 지 궁금해졌다. 검색창을 열어 자신과 같은 이름을 가진 사람들은 없는 지 검색해보고, 랜덤으로 노출된 사람들의 프로필 중 하나를 클릭해 보았다. 마침 같은 직군으로 활동하고 있는 시니어 개발자 C의 프로필이었다. 그가 자신이 현재 고민하고 있는 것들을 미리 경험한 사람이라는 것을 알게 된 후, 이야기를 나눠보고 싶어 C의 계정을 팔로우하고 메세지을 보내보기로 했다.
<서비스 소개> 빅토리아는 '나의 거대한 스토리야'라는 뜻으로, 개인 자서전을 작성할 수 있는 사이트입니다. 프로필 페이지에 연도별로 게시글을 보여주고, SNS기능을 통해 다른 사람과 자신의 추억을 공유할 수 있습니다. <기획 배경> 기존의 SNS는 단편으로 컨텐츠를 작성하고 일렬로 게시하는 것에 초점이 맞춰져 있습니다. 또한, 사용자는 셀프 브랜딩, 작품 홍보 등 다양한 목적을 가지고 게시글을 작성하게 됩니다. Bigtoria는 개인의 일상 기록하고, 회고한다는 목적에 좀 더 초점을 맞추어, 별도의 노력 없이 사용자가 기록한 추억들을 한 눈에 살펴볼 수 있도록 도와줍니다. <주요 타겟층> 따라서, 추억을 기록으로 남기고 싶은 사람, 연도별로 각각의 기록을 정리해서 보고 싶은 사람 이런 자신의 인생 스토리를 공유하고 싶은 사람들에게 도움이 될 것이라고 생각합니다.
팀 소개
→ 팀원 이름, 사진, 팀장/팀원
팀 문화
목표 설정
스크럼, 회의 → 일지 목록 캡처
🗣️ 원활한 소통을 위한 스크럼
빅토리아의 모든 팀원들은 매일 오후 1시에 스크럼을 진행합니다.
팀원들은 슬랙과 디스코드를 기본 소통 도구로 사용합니다. 일정이 시작되는 오후 1시에 팀원들은 각자 진행상황을 공유하며 전체 일정을 확인합니다.
더불어 공통으로 정해 놓은 개발 시간에는 무조건 디스코드 팀 채널에 참여도록 하는 규칙을 만들었습니다. 발생하는 이슈에 대해서 신속하게 처리할 수 있도록 말이죠.
스크럼의 규칙은 다음과 같습니다.
1. GitHub 칸반 보드를 통해 정리한 이슈 목록과 현재 진행 상황을 공유하기
2. 신속하고, 효율적인 시간분배를 위해 5분 이내로 말하기매일 이뤄지는 스크럼은 따로 기록을 남겨둡니다.
역할 분담
😎 적극적 참여를 위한 역할 분담
프로젝트를 진행할 때에는 기능 구현뿐만 아니라 여러 역할이 필요합니다.
각자가 맡은 역할을 충실히 실행할 때, 프로젝트에 대한 이해가 더 깊어지는 것은 물론이고, 유의미한 결실을 맺을 수 있겠지요. 팀원들은 각자가 생각하는 2주 동안 필요한 역할들에 대해 이야기하고, 다음과 같이 분담하였습니다.
- 팀장 : 민우
- 전체 일정 관리 및 팀원들의 진행 사항 파악
- 스크럼 진행 + 기획서 관리 : 미현
- 스크럼 시작 알림 및 깃헙 칸반보드를 통해 진행 상황 확인
- 기획서 작성
- Git, GitHub 관리 : 충일
- Issue/PR 태그 및 템플릿 정의
- PR, merge 태스크 관리
- 서기 : 유리
- 스크럼 및 회의록 작성
- 팀 노션 관리
- GitHub Wiki 관리 : 민우, 유리, 미현
- 프로젝트 이슈 및 에러 해결 : 승준
- 현재 프로젝트 이슈 취합 및 해결방안 탐색
- 기술 스택 정리
- 멘토링 질문 목록 정리
- GitHub
- Issue, Pull Request
- Projects(칸반 보드)
- Wiki, README 작성 → 캡처
<팀 문화> 성공적인 프로젝트 완성을 위한 팀 문화 1. 원활한 소통을 위한 스크럼 모든 팀원은 매일 오후 1시에 스크럼을 갖습니다. 스크럼 규칙은 다음과 같습니다. - GitHub 칸반보드를 활용해 각자 진행 상황과 앞으로의 일정 공유 - 효율적 시간 분배를 위해 5분 이내로 말하기 2. 합리적 진행을 위한 맨데이 설정 맨데이의 의미는 다음과 같습니다. - 하루 동안 구현에 집중할 수 있는 시간 - 중간에 갖는 회의, 짧은 휴식 시간을 모두 포함한 시간 3. 적극적 참여를 위한 역할 분담 - 팀장, 문서화, 깃헙 관리, 기술 서칭으로 역할을 분담해서 팀 프로젝트를 원활히 진행.
모바일 친화적?
UI: 모바일에 친화적임
- 마치 앨범같은 앱으로써 사진이 중요한 요소인데 사진을 올리려면 핸드폰 사진을 pc로 한번 옮겨야하는 불편함이 생김.
- 모바일 환경의 접근성
와이어 프레임 설명할 때, 모바일 친화적이라는 것도 넣으면 좋을 듯? -> 자리가 없을라나요 ㅎ 모바일 친화적 - 게시글을 연도별로 보여줌 - 앨범을 본다는 느낌을 주기 위해 모바일 화면을 메인 서비스로 설정.
디자인 시안
사용한 폰트(넥슨 메이플스토리), 주요 색, 컨셉(쉽고 가벼움, 킹받게 함)
컨셉: 밝고 편안한 분위기 속에서 나의 이야기를 쉽게 기록한다. 공유한다. 메인컬러: 오렌지색 계열 -> 행복하고 활기찬 느낌 -> 밝고 에너지 넘치는 느낌
개발
사용 기술
로고 넣기
- React, TypeScript, Vite, Emotion + MUI, Axios, Context API (SWR)
- Git, GitHub, Prettier, ESLint, husky, lint-staged, Slack, Notion
개발 환경 : Vite, Prettier, ESLint, husky, lint-staged 개발 언어 : React, TypeScript, (HTML, JS, CSS) 디자인 및 UI 프레임워크: Emotion + MUI API 및 상태roq관리: Axios, SWR, Context API 협업툴: Git, GitHub,Slack, Notion
협업 방식
- 다른팀과의 소통
- 다른팀과 프로젝트 중간 점검
- 현재 모델에서 부족한점 또는 배울만한 기술을 배울수 있는 시간
협업 방식 1. 브랜치 전략 - 원본 Repository를 fork해서 사용 - origin의 develop 브랜치를 기준으로 작업 진행 - 모든 작업이 완료되면, 원본 Repository develop 브랜치로 Pull Request 작성 - 작업 브랜치 prefix를 사용해서 이름 표시 ex)feature/home-search-form-validation 2. 커밋 전략 - 제목, 본문으로 나눠서 작성 - 제목의 경우 prefix: 한글 문장 형태로 작성 ex) feature: 홈페이지 사용자 검색 유효성 추가 - 본문의 경우, 최대한 간략히 정리하고 추가적인 사항은 Pull Request에 작성. 3. 이슈 및 Pull Request 규칙 - 각각 템플릿 규칙에 맞춰 작성 - Pull Request의 경우, 최소 한 명 이상의 Approve가 있어야 Merge가 가능
개발 역할
- 미현: 사용자 목록, 사용자 검색, 알림, 스타일링
- 민우: 회원가입, 팔로우/팔로잉, 404
- 유리: 스토리 CRUD, 좋아요/댓글, 정보 변경
- 승준: 스토리북, 로그인, 배포, 스타일링, 다크모드
- 충일: 채팅, 성능 개선
이건 그대로 들어가도 될 거 같은데요:)? 하잇
개발 일정
1. 기획회의 - 주제 선정 - 스토리 보드 작성 - 기술스택 및 깃 전략 설정 2. 프로젝트 설정 - 와이어 프레임 - 컴포넌트별 기능 구현 목록 정리 - 기획서 작성 3. 1차 기능 구현 - 회원가입, 로그인 - 사용자 검색 - 스토리북 페이지 레이아웃 및 기본 기능 - 스토리 상세 페이지 레이아웃 및 좋아요, 댓글 기능 추가 - 스토리 편집 - 팔로우 목록 4. 1차 배포 - netlify로 시도 5. 2차 기능 구현 - 스토리북 및 스토리 상세 페이지 리팩토링 - 팔로우 목록 디자인 및 기능 추가 - 사용자 프로필 페이지 - 메세지 - 알림 6. 2차 배포 - vercel
핵심 기능
오호, 밑에 요구사항 넣을 거면, 이 핵심기능이랑 합쳐도 되긋네요. 근데, 여기까지 오니까 꽤 내용이 많은 거 같아서 요구사항까지 가지 않아도 될 듯. 일단 넣어보죠ㅋㅋㅋㅋ 굳:)bㅋㅋ
스토리북 - 스토리
포스트 작성 및 수정
다른 사용자의 스토리북을 볼 수 있음
사용자 검색
다른 사용자를 이름으로 검색가능
자동완성 기능
팔로우
다른 유저의 스토리에서 사용자를 팔로우 할 수 있음
나를 팔로우 한 사람을 볼 수 있음
채팅
다른 유저와 DM을 주고받을 수 있음
프로필 변경
자신의 프로필을 변경할 수 있음
알림
좋아요, 팔로우, 댓글, 메세지 알림
결과
시연 및 소개
계정 없을때: 홈 - 로그인 - 회원가입 계정 있을때: 홈 - 로그인 홈 - 메뉴 - 자신의 스토리북 - 스토리 - 스토리 작성 - 스토리 수정 홈 - 검색 - 다른 사용자의 스토리북 - 팔로우 - 스토리 - 댓글 - 좋아요 메뉴 - 내 프로필 - 수정 메뉴 - 팔로우 페이지 - 팔로잉 - 팔로워 - 프로필 - 채팅 홈 - 알림 - 알림목록 - 모두읽음 홈 - 다크모드
요구사항 구현 내용
→ 표로 정리?
기본 요구사항
- 사용자는 회원가입과 로그인을 할 수 있습니다.
- 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 사용자는 가입자 목록을 볼 수 있습니다.
- 사용자는 가입자를 이름으로 검색을 할 수 있습니다.
- 사용자는 가입자의 정보를 볼 수 있습니다.
- 사용자는 포스트 혹은 가입자를 검색할 수 있습니다.
- 인증된 사용자는 자신의 정보를 변경할 수 있습니다.
- 인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 인증된 사용자는 채널에 포스트를 남길 수 있습니다.
- 인증된 사용자는 포스트를 좋아요 할 수 있습니다.
- 인증된 사용자는 포스트에 댓글을 남길 수 있습니다.
- 인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다.
- SPA 형태로 만들어주세요.
- 엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.
기본 요구 사항에 맞춰 빅토리아가 제공하는 기능 -> 여기 그냥 동그라미 큰 거 네 개 빵빵빵 붙여놓고, (다이어그램처럼) 기본 기능 - 회원가입, 로그인 - 게시글 CRUD - 게시글 검색 유저 기능 - 나의 프로필 편집 - 커버 이미지 변경 ... 이런 식으로 해도 깔끔할 거 같아요 1. 기본 기능 - 회원가입 및 로그인을 통해 서비스 사용 가능 - 게시글 작성, 수정, 삭제 가능 - 게시글 검색 2. 유저 기능 - 나의 프로필을 편집 3. SNS 기능 - 다른 사용자의 게시글 감상 - 사용자 간 팔로우, 메세지 가능 - 게시글에 댓글, 좋아요 4. 부가적인 기능 - 다크 모드 - 실시간 사용자 확인 - 좋아요, 팔로우, 댓글, 메세지 알림 기능
보너스 요구사항
- 사용자는 현재 접속 중인 사용자를 볼 수 있습니다.
- 인증된 사용자는 다른 가입자에게 메시지를 보낼 수 있습니다.
- 인증된 사용자는 자신에게 온 메시지 목록을 확인 할 수 있습니다.
- 인증된 사용자는 특정 사용자와의 메시지 대화 내역을 확인 할 수 있습니다.
- 인증된 사용자는 프로필 이미지 변경 및 포스트를 작성할 때 이미지를 첨부할 수 있습니다. 파일 업로드를 구현해보세요.
- 다크 모드를 적용해보세요.
시행착오
기획단계: 기획이 명확해 지지 않은 상황에서 개발시작 -> 개발이 진행될 수록 추가가 필요한 기능이 많아짐 -> 일정관리 힘들어짐 기획 단계에서 서비스 컨셉 잡는 시간이 많이 소요 -> 구현해야 할 기능들에 대해 충분한 시간을 두고 설정하지 못한 채 개발 일정 시작 -> 개발 중간에 추가로 진행해야 하는 기능 구현 일정이 생김 -> 일정관리에 많은 노력이 있었다. 디자인: 확실한 디자인 설정을 하지않고 마감 몇일전부터 작업하여 변경된 사항이 많아짐 디자인 부재 -> 짧은 시간 내에 디자인 컨셉을 잡고, UI를 다듬어야 했다. 배포: 배포 과정에서 겪은 시행착오 간단히 적어주세요 -> 지금 겪고 있어요~ 404에러가 왜 뜰까요