안녕하세요, 오프팀의 최종 발표를 맡게 된 이채연입니다.
SNS 프로젝트로 티엠아이 호머스라는 소셜 네트워크 서비스에 대해 설명하겠습니다.
>>>>>>>>>>>>>>>>>>>>>>>>>>
목차는 다음과 같습니다. 첫 번째로 팀원들 소개와 팀 문화, 두 번째로는 프로젝트에 대한 소개, 그리고 핵심 기능에 대해 설명 드리고 마지막으로 시연 영상을 보여드리겠습니다.
>>>>>>>>>>>>>>>>>>>>>>>>>>>
오프 팀은 팀장 김다은, 테크리더 정동환, 팀원1 우창욱, 디자인 담당 신동호, 스크럼 및 서기 담당 이채연으로 구성되어 있습니다.
저희는 페이지별로 기능을 세분화 하여 역할을 분담하였고, 팀원 별 구현한 기능은 기재된 바와 같습니다.
>>>>>>>>>>>>>>>>>>>>>>>>>>>
다음으로는 저희 팀의 문화에 대해 말씀드리겠습니다.
저희 팀은 하루에 두 번 오픈 스크럼과 클로즈 스크럼을 진행하였습니다. 오픈 스크럼 때에는 자신이 구현한 기능이나 공유가 필요한 상황에 대해 이야기 하고, 오늘 하루 동안 해야할 일을 정리합니다. 그것을 토대로 남은 task를 정리합니다. 클로즈 스크럼 때에는 목표로 한 일을 했는지, 추가로 무엇을 할 것인지에 대해 팀원들과 공유합니다.
페이지별로 기능을 세분화하여 역할분담을 한 뒤 간트차트를 이용해 개발 일정과 목표를 추산하였고, 더 정확한 일정관리를 위해 각자가 맡은 기능 개발에 드는 맨데이를 산정하여 협업을 진행하였습니다.
또한 본격적인 개발에 앞서서 회원가입, 글작성, 글검색 기능을 함께 스터디 하는 시간을 가져서 개발 경험 뿐만 아니라 학습적인 요소도 가져가고자 하였습니다.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
티엠아이 호머스에 대한 소개하겠습니다. 티엠아이 호머스라는 이름은 투머치인포메이션이라는 TMI와 통신에 사용된 비둘기를 일컫는 호머스를 합쳐서 만들어졌습니다. 자신의 tmi를 마음껏 이야기 할 수 있는 공간이 있으면 좋겠다는 생각으로 컨셉을 잡게 되었고, 익명으로 글 쓰는 것이 익숙하지 않은 사람들을 위해 ‘뉴스기사를 작성하는 기자’라는 컨셉을 추가하여 글을 작성하는 데에 거부감을 줄이고자 하였습니다.
여러 SNS가 있지만 티엠아이 호머스에서는 tmi를 주력으로 다루며, tmi를 유쾌하고 즐길 수 있도록 제목에 기사에서 자주 쓰이는 템플릿을 달 수 있습니다.
티엠아이 호머스의 타켓층으로는 자신의 tmi를 추억하고 기록으로 남기고 싶은 사람, 작고 소소한 일상에서도 즐거움과 의미를 찾는 사람, 다른 사람의 tmi를 찾아보고 웃고 싶은 사람입니다.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
프로젝트에 대해 말씀드리겠습니다.
저희는 깃헙 이슈를 이용하여 기능을 개발하기 전에 이슈를 생성하고 칸반보드를 활용하여 어떤 팀원이 어떤 일을 하고 있는지 파악할 수 있게 하였습니다. 그리고 깃헙플로우 전략을 사용하여, 특정 기능을 개발할 때마다 약속된 이름으로 생성된 브랜치에서 개발을 한 뒤 main에 push하였습니다. 풀리퀘스트가 올라오면 두 명의 approve가 있어야 머지 가능합니다. 스쿼시 머지 방법을 이용해 브랜치의 여러 커밋을 하나로 합쳐서 깔끔하도록 했습니다. 깃허브 액션을 이용해 PR이 작성될때와 main 브랜치에 sub 브랜치가 머지될 때 빌드 테스트를 진행하였습니다.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
다음으로는 개발 스택에 대해 말씀드리겠습니다. 리액트 프로젝트를 비트를 이용해 생성하였고, 타입스크립트를 이용해서 오류 줄이고 개발자 경험 향상 시키고자 하였습니다. 코드의 일관성을 위해 프리티어와 이에스린트, 일관성을 강제하는 허스키와 린트 스테이지드를 사용하였고, 스타일링은 테일윈드와 데이지유아이를 이용했습니다. 컴포넌트 관리는 스토리북을 사용했고, 라이브러리는 tanstack(탠스택) query , 리액트 훅 폼, 리액트 라우터가 있으며 협업툴은 깃과 깃헙, 소통은 슬랙과 노션에서 이루어졌습니다. 배포는 크로마틱과 버셀을 이용했습니다
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
티엠아이 호머스의 와이어프레임과 디자인은 다음과 같습니다. 뉴스기사라는 컨셉에 기반하여 홈 화면에서는 빠르게 최신 tmi와 인기 tmi를 볼 수 있게 하였고, 누구나 글을 손쉽고 빠르게 작성할 수 있도록 글 쓰기 버튼의 접근성을 높게 만들었습니다.
디자인은 통신에 활용된 비둘기인 호머스에서 착안하여, 비둘기의 색상 팔레트를 메인 컬러로 정했고, 동글동글한 폰트를 이용하여 타인의 tmi가 귀엽고 유쾌하게 느껴지도록 의도하였습니다.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
티엠아이 호머스의 핵심기능은 다음과 같습니다.
- 낙관적 업데이트
- 기존에는 서버의 응답을 기다린 후 사용자에게 결과를 제공했습니다. 사용자의 만약 사용자의 인터넷 환경이 안좋거나 서버가 느릴 경우 사용자에게 느리게 피드백을 전달할 가능성이 있습니다. 이를 보완하기 위해 낙관적 업데이트를 적용했습니다.
- 낙관적 업데이트란 서버의 응답을 받기 전 사용자의 행동에 대한 결과를 미리 반영하는 것을 의미합니다.
- 프로필 페이지에서 이미지 변경 기능에 낙관적 업데이트를 성공적으로 적용하였습니다. 실제 배포 환경에서의 테스트 결과, 이미지 업데이트 시간이 수 천 밀리초에서 수 십 밀리초로 단축되었습니다. 이러한 개선으로 인해 더 나은 사용자 경험(UX)을 제공할 수 있습니다.
- 팔로우 기능에도 낙관적 업데이트를 적용하였습니다. 기존에는 Fast 3G 네트워크 환경에서 600ms의 대기 시간 후에 서버 응답을 통해 팔로우 성공 여부를 사용자에게 알렸습니다. 하지만 낙관적 업데이트 적용 후엔 0.7ms의 대기 시간만에 팔로우 성공 여부를 사용자에게 바로 보여줄 수 있게 되었습니다.
- 메시지, 토스트 기능
- 기능 토스트는 사용자에게 중요한 정보를 간결하게 제공하며, 모달 창은 사용자에게 추가 정보나 작업을 수행할수있는 기회를 제공합니다. 이로 인해 사용자 경험을 유익하게 만들어, 서비스의 전반적인 사용자 만족도를 향상시키는데 기여하였습니다.
- 토스트 메시지를 선언적인 방법으로 사용하기 위해 Context API를 사용했습니다. 조건문 또는 상태에 의존하지 않고 하위 컴포넌트에서 토스트 컴포넌트를 생성하여 제어할 수 있게하였습니다.
- 무한 스크롤
- 게시글 페이지에서 더 나은 UX를 위해 최신 및 구독한 탭에 무한 스크롤 기능을 성공적으로 적용하였습니다. 사용자들은 페이지를 리로드 하지 않고 아래로 스크롤하면 계속 새로운 게시글을 볼 수 있습니다.
마지막으로 티엠아이 호머스의 시연영상을 보여드리겠습니다.
처음 시작 페이지
로그인을 하지 않은 상태로 게시글 목록과 게시글을 확인할 수 있습니다. 로그인이 필요한 활동을 클릭하면 로그인 페이지로 이동합니다.
회원가입 ⇒ 자동 로그인
로그인
홈 화면에서 인기글과 최신글을 볼 수 있습니다. 각 게시물을 클릭하면 게시물 상세 화면으로 이동합니다.
상세 페이지에서는 글에 대한 좋아요를 누를 수 있고, 취소를 할 수 있습니다. 또한 댓글을 달거나 삭제할 수도 있습니다.
글 작성자 혹은 댓글 작성자를 누르면 해당 유저의 프로필로 이동합니다.
유저가 작성한 글과 좋아요 누른 글 목록을 볼 수 있고, 팔로우와 팔로우 취소를 할 수 있습니다.
게시글 화면에서는 최신글, 인기글, 자신이 구독한 사람의 글들을 볼 수 있습니다.
글을 작성할 수 있습니다. 글 작성 시 제목의 말머리를 설정할 수 있습니다.
사진을 첨부하고 미리 보거나, 첨부했던 사진을 삭제할 수 있습니다.
또한 자신이 작성한 글을 수정할 수 있습니다. 혹은 삭제도 가능합니다.
누군가 나의 글에 댓글을 달거나 좋아요를 누르면 알림이 실시간으로 오게 됩니다. 알림은 알림 페이지에서 확인할 수 있으며, 각 알림을 누르면 해당 페이지로 이동합니다.
마이페이지에서는 사용자 정보를 수정하거나 로그아웃을 할 수 있습니다.
다크모드