일을 시작하는 순간, motiiv
<aside>
💡 일을 시작하기 직전, 부스트️⚡️를 얻고 싶다면?
나의 시선을 뺏는 많은 콘텐츠 속에서 내가 원하는 영상만 켜고
영상을 본 뒤 나의 워크스페이스로 바로 이동하세요!
- 전체 Task 중 네이버 소셜 로그인 제외하고 모두 구현 완료했습니다.
- 모티브의 모든 뷰는 반응형으로 작업되어 있고, 다크모드🌙 적용이 가능합니다.
</aside>
✅ main
- main 뷰 전체 디자인 시안
- 상단 배너
어제 하루 조회수가 가장 높았던 영상 등 3가지 영상을 소개합니다. 사용자는 매일 새로운 영상을 배너에서 확인할 수 있습니다.
일정 타이밍이 지나면 배너가 자동으로 넘어가고, 사용자는 버튼을 통해 옆으로 넘길 수 있습니다.
- motiiv top10
모티브가 추천하는 동기 부여 영상 10개를 확인할 수 있습니다.
한 화면에서 영상을 3개씩 확인할 수 있으며, 좌우 버튼을 통해 영상을 넘겨가며 확인할 수 있습니다.
- 하단 영상 섹션(6개)
사용자별로 큐레이션 된 동기부여 영상들이 카테고리별로 제공됩니다. 영상에 마우스 호버 시 미리보기 gif가 재생됩니다.
사용자는 영상 썸네일 우측 상단의 저장 버튼을 통해 쉽게 영상을 저장할 수 있습니다.
영상 하단의 태그 클릭 시, 클릭한 태그에 해당하는 영상을 모아보는 category 페이지로 이동합니다.
- GNB
main, category, mymotiiv로 이동할 수 있으며, 로그인을 하지 않은 상태일 경우에는 우측 상단의 로그인 버튼을 누르면 로그인 창을 볼 수 있습니다.
로그인을 했을 경우 프로필 이미지 사진이 보이게 되며, 해당 사진을 클릭 시 자신의 프로필 모달창을 확인할 수 있습니다.
✅ category
- category뷰 전체 디자인 시안
- 왼쪽 카테고리 선택 영역
카테고리를 선택할 경우 해당 카테고리의 영상들이 필터링되어 제공됩니다.
상단 GNB와 함께 위치를 고정시켜 사용자는 언제든 다른 카테고리를 선택하거나 다른 곳으로 쉽게 이동할 수 있습니다.
카테고리를 호버 했을 경우와 클릭 했을 경우 변화를 주어 사용자는 카테고리를 클릭하는 행위를 자연스럽게 느낄 수 있습니다.
- 오른쪽 정렬 모달창
최신순, 좋아요순, 저장순, 조회순을 클릭하면 각 기준에 맞게 영상이 정렬됩니다.
사용자가 부드럽고 자연스럽게 정렬 모달을 펼치고 접을 수 있도록 애니메이션이 적용되어 있습니다.