일을 시작하기 직전, 부스트️⚡️를 얻고 싶다면?
나의 시선을 뺏는 많은 콘텐츠 속에서 내가 원하는 영상만 켜고
영상을 본 뒤 나의 워크스페이스로 바로 이동하세요!
개발 기간 : ~2021-01-16
어제 하루 조회수가 가장 높았던 영상 등 3가지 영상을 소개합니다. 사용자는 매일 새로운 영상을 배너에서 확인할 수 있습니다. 일정 타이밍이 지나면 배너가 자동으로 넘어가고, 사용자는 버튼을 통해 옆으로 넘길 수 있습니다.
모티브가 추천하는 동기 부여 영상 10개를 확인할 수 있습니다. 한 화면에서 영상을 3개씩 확인할 수 있으며, 좌우 버튼을 통해 영상을 넘겨가며 확인할 수 있습니다.
사용자별로 큐레이션 된 동기부여 영상들이 카테고리별로 제공됩니다. 영상에 마우스 호버 시 미리보기 gif가 재생됩니다. 사용자는영상 썸네일 우측 상단의 저장 버튼을 통해 쉽게 영상을 저장할 수 있습니다. 영상 하단의 태그 클릭 시, 클릭한 태그에 해당하는 영상을 모아보는 category 페이지로 이동합니다.
main, category, mymotiiv로 이동할 수 있으며, 로그인을 하지 않은 상태일 경우에는 우측 상단의 로그인 버튼을 누르면 로그인 창을 볼 수 있습니다. 로그인을 했을 경우 프로필 이미지 사진이 보이게 되며, 해당 사진을 클릭 시 자신의 프로필 모달창을 확인할 수 있습니다.
카테고리를 선택할 경우 해당 카테고리의 영상들이 필터링되어 제공됩니다. 상단 GNB와 함께 위치를 고정시켜 사용자는 언제든 다른 카테고리를 선택하거나 다른 곳으로 쉽게 이동할 수 있습니다. 카테고리를 호버 했을 경우와 클릭 했을 경우 변화를 주어 사용자는 카테고리를 클릭하는 행위를 자연스럽게 느낄 수 있습니다.
최신순, 좋아요순, 저장순, 조회순을 클릭하면 각 기준에 맞게 영상이 정렬됩니다. 사용자가 부드럽고 자연스럽게 정렬 모달을 펼치고 접을 수 있도록 애니메이션이 적용되어 있습니다.
영상 하단의 태그 클릭 시, 클릭한 태그에 해당하는 영상들이 필터링되어 제공됩니다.
사용자가 클릭한 영상을 시청하고 영상과 관련된 정보를 확인할 수 있습니다.
해당 영상을 좋아요/저장 하여 mymotiiv 페이지에서 확인할 수 있고, 해당 영상의 링크를 공유할 수 있습니다.
오른쪽에 관련된 영상이 제공됩니다. 브라우저의 너비가 일정 너비 이하로 좁아질 경우 오른쪽의 영상들은 아래로 위치가 변동됩니다.
사용자가 동기부여 영상을 보고 바로 업무에 착수할 수 있도록 본인이 자주 방문하는 워크스페이스를 추가, 수정, 삭제할 수 있는 공간입니다. 링크를 입력할 경우 해당 링크가 유효한지 검사를 거친 후 워크스페이스가 추가되며, 해당 url의 파비콘이 함께 추가됩니다.
토글 버튼을 활성화할 경우 모티브의 모든 뷰에서 바로 워크스페이스로 접근할 수 있도록 하는 플로팅 버튼이 나타나게 됩니다. 플로팅 버튼에 대해서는 아래 항목에서 자세하게 설명합니다.
토글버튼을 활성화할 경우 모든 뷰에서 볼 수 있는 플로팅 버튼입니다. 가로형 버튼을 호버할 경우 원 모양으로 버튼이 변하며, 해당 상태의 버튼을 클릭할 경우 워크스페이스가 나타납니다. 이때, 매끄러운 사용자 경험을 위해 워크스페이스의 개수에 따라 각각 다른 애니메이션이 적용되어 있습니다.
로그인한 유저들은 모티브의 다크모드를 사용할 수 있습니다. GNB의 프로필 모달창에서 토글 버튼으로 다크모드 활성화가 가능합니다. 단순 1:1 색상 대응이 아닌, 각 뷰에 최적화된 색 조합에 맞춰 작업해 사용자들은 다크모드에서도 정보를 효율적으로 확인할 수 있습니다.
사용자의 프로필 이미지, 이름, 직군, 관심사를 수정할 수 있습니다.
카카오 계정으로 소셜 로그인이 가능합니다. 만약 회원가입 이력이 없을 경우 카카오 로그인 이후 바로 회원가입을 위한 추가 정보 선택 화면으로 이동합니다.
motiiv의 기능에 대해 더 자세한 설명이 보고 싶다면?
🎩 김우영 | 🐧 김정재 |
---|---|
![]() |
![]() |
- API 및 명세서 작성:
- 유저, 워크스페이스, 관리자, 섹션 관련: 김우영
- 동영상 관련: 김정재
- README 작성: 김우영
- 배포, SSL 인증서 연결 및 Github Actions을 통한 자동화: 김우영
- 자동 테스트 환경 구축: 김우영
- 동영상 데이터 크롤링: 김우영