현주
승민
유저 페이지 및 헤더
선정 배경, 타겟
승민 대본
- 기획의도
- "STYLED"는 사용자들에게 자유로운 공간을 제공하여 자신의 OOTD(Outfit of the Day)를 자유롭게 공유하고 탐험할 수 있는 특별한 플랫폼입니다. 또한, 다양한 스타일과 트렌드에 관심을 가진 사용자들이 모여서 자유롭게 소통하고 자신의 패션을 공유할 수 있습니다.
- 위 자료와 같이 최근 패션에 대한 관심이 급증하고 있으며, 많은 사람들이 기존 소셜 미디어 플랫폼에서 자신의 패션 스타일을 자주 공유하고 있습니다. 그러나 기존의 소셜 미디어는 다양한 카테고리가 혼재되어 있어 패션이라는 카테고리 하나에 집중하기가 어렵습니다. 이러한 배경에서, 저희는 패션에 특화된 새로운 플랫폼 "STYLED"를 기획하게 되었습니다.
- 유저스토리
- 자신의 프로필 페이지에서:
- 자신이 작성한 포스트 확인
- 자신의 프로필 정보 변경
- 좋아요한 포스트 확인
- 다른 사용자의 프로필 페이지에서:
- 해당 사용자가 작성한 포스트 확인
- 사용자를 팔로우하거나 팔로우 취소
- 다른 사용자와의 메시지 창으로 이동
사용자는 다음과 같은 기능을 수행할 수 있습니다:
인혁
알림 모달 및 유저 목록 실시간 데이터 패칭
리드미 꾸미기
인혁 대본
- 실시간 사용자 정보 조회
- 유저 목록 기능을 통해 서비스에 가입된 사용자들의 프로필 이미지와 닉네임을 확인할 수 있습니다. 현재 접속 중인 사용자의 정보는 유저 목록의 우선순위에 노출되어, 실시간으로 쉽게 확인할 수 있습니다.
- 가입 여부와 상관없이 모든 사용자가 유저 목록 기능을 이용할 수 있습니다. 또한, 가입된 사용자는 자신의 프로필 정보를 목록 최상단에서 확인할 수 있습니다.
- 사용자 검색
- 사용자 닉네임을 통해 검색을 하게 되면 해당 닉네임을 포함하고 있는 모든 사용자 목록을 볼 수 있습니다.
- 사용자가 유저 목록을 클릭하게 되면 해당 사용자의 프로필 페이지로 이동하여 선택한 사용자의 더 많은 정보를 볼 수 있습니다.
- 알림조회
- 사용자는 알림을 통해 메시지, 댓글, 팔로우, 좋아요 등에 대한 정보를 실시간으로 확인할 수 있습니다. 각 알림은 알림을 보낸 사용자의 프로필 이미지, 알림 도착 시간, 읽음 여부를 표시합니다. 특히, 댓글 알림의 경우 추가된 댓글 내용을 확인할 수 있습니다. 알림은 최근 100개의 알림까지만 알림 창에서 확인이 가능합니다.
- 알림을 클릭하면 관련 페이지로 바로 이동할 수 있습니다. 메시지 알림을 클릭하면 해당 메시지를 보낸 사용자와의 대화 페이지로, 팔로우 알림을 클릭하면 해당 사용자의 프로필 페이지로 이동합니다. 댓글이나 좋아요 알림을 클릭하면 해당 댓글이나 좋아요가 달린 게시글 페이지로 이동합니다. 이렇게 알림을 통해 원하는 정보를 빠르게 찾아갈 수 있습니다.
- 알림창을 닫으면 현재까지 읽지 않은 모든 알림이 읽음으로 처리됩니다. 읽지 않은 알림은 파란 점으로 표시되며, 우선적으로 보여집니다. 다음에 알림 창을 열면 이전에 읽지 않았던 알림들이 모두 읽음 처리된 상태로 보여집니다
- 다크모드
- 화면의 맨 왼쪽 하단에 위치한 다크 모드 버튼을 클릭하면, 사용자는 현재 테마 모드에 맞춰 색상이 변경된 화면을 확인할 수 있습니다. 이 기능은 모든 페이지에서 테마 모드에 따라 화면의 색상을 사용자가 쉽게 조정할 수 있습니다.
- 로그인, 보안쪽은 안하셔도 되나요 인혁님
재웅
디자인, 공용 컴포넌트, 검색 모달, 포스트 생성
대본 기반하여 발표자료(PPT) 제작
재웅 대본
- 디자인
- 스타일드의 디자인은 OOTD 공유라는 목적에 집중하기 위해 전반적으로 심플하게 설계하였습니다. 이와 동시에 강렬한 로고를 통해 서비스의 정체성을 강조하였습니다.
- 또한 저희 스타일드는 웹앱 기반으로, 태블릿, 모바일 등의 다양한 플랫폼에서도 반응형 레이아웃을 지원하여 쾌적한 사용이 가능하도록 설계하였습니다.
- 또한 다크모드를 지원하여 사용자들로 하여금 테마에 대한 선택지를 제공해주었습니다.
- 공용컴포넌트
- 본격적인 개발에 앞서, 효율적인 작업과 일관성을 위해 전반적인 공용컴포넌트를 제작하였습니다. 요구사항을 통해 명세한 기능들을 바탕으로, 사용될 프롭들을 추상화하고 스타일을 적용해 서비스 전반적으로 일관성을 갖도록 하였습니다. 또한 각 컴포넌트에 rest props와 ref를 부착하여 용이한 확장이 가능하도록 구현하였습니다. 개인적으로 스켈레톤 컴포넌트가 가장 마음에 드네요.
- 아바타 / 뱃지 / 버튼 / 스피너 / 스켈레톤 / 드롭다운
- 포스트 작성 / 수정 기능
- 로그인한 사용자는 게시물을 작성할 수 있습니다. 게시물에는 사진과 내용, 채널이 필수적으로 포함되어야 합니다. 컴포넌트가 마운트 시 path 정보를 가져와, 게시물을 수정하는 경우라면 기존 게시물 정보를 로드하도록 하여 컴포넌트의 재사용성을 강화하였습니다.
- 포스트 / 유저 검색 기능
- 로그인 여부에 관계없이, 사용자는 키워드를 통해 서비스에 등록된 다른 사용자들과 게시물을 검색할 수 있습니다. 검색 결과를 바탕으로 사용자 혹은 포스트 상세 페이지로 이동할 수 있습니다.