[프로그래모] 유튜브 클론 코딩 - 📝 쇼츠 페이지 기획

이번에는 깃허브도 익히고, 팀프로젝트가 어떻게 흘러갈지 알아보는 느낌으로 간단하게 하기로 하였다.

우선 기획서부터 작성!

시험기간이라 가장 간단해보이지만 그래도 무한스크롤 기능이 있어 재밌어보이는 쇼츠 페이지를 선택했다.

바쁜 시기라 얼마나 구현할 수 있을지는 모르겠지만, 그래도 보이는 화면의 기능은 다 분석해보았다.

---

🎬 쇼츠 메인 페이지

 

• 쇼츠 화면 : 가운데 정렬
• 동영상 부분 : 추가 정보 / 프로필 박스 / 제목 / 음악 등 기타 정보
  • (제목과 웹사이트 타이틀 동일)
• 맨 오른쪽 위아래 화살표(오른쪽 정렬) : 클릭시 위 쇼츠, 아래 쇼츠로 이동 (부드럽게 구현)
• 구독 / 좋아요 버튼 : 클릭시 활성화 / 비활성화 스타일링 다르게

✔️클릭 전후 변경

 

✔️버튼 마우스 hover 스타일

---

🎬 쇼츠 상세 페이지

• ... 누를시 토글 생성
• 등장 : 오른쪽에서 왼쪽으로 애니메이션
• 퇴장 : 왼쪽에서 오른쪽으로 사라짐

---

🎬 쇼츠 댓글 페이지

• 댓글박스(핑크색) : 스크롤