[Clone YouTube] 배경 및 분석

1. 배경

3월에 개발자로의 전향을 시작하여 5개월이 지났다.

국비지원 학원에 들어가기 전까지는 JS로 달력, 계산기, to-do 리스트 등의 간단한 프로그램을 만들어 보았다. 이후, 국비지원 학원에 들어가 6월 말에는 자바 콘솔 프로젝트로 도서 관리 시스템을, 7월 마지막주에는 팀 프로젝트로 학사 관리 프로그램을 제작했다.

학원에 들어가기 전에 만든 프로그램들은 단순한 기능을 가진 프로그램들이고, 학원에서 진행한 프로그램들은 불가피하게 현재는 잘 사용하지 않는 스택을 사용하여 만들었기 때문에(Java Swing과 같은..) 포트폴리오를 만들기에는 적합하지 않다고 생각되었다.

두 번의 소중한 협업 기회 중 하나를 포트폴리오에 쓰지 못하는 것은 아쉽지만 학원 수료 전에 취업하는 것을 목표로 하고 있기 때문에, 아쉬워할 시간을 아껴 개인 프로젝트를 진행해야 할 필요성을 느꼈다.

 

 

2. 목표

포트폴리오에 올릴 만한 첫 번째 프로젝트로 유튜브 클론 페이지를 선택한 이유는, 다음과 같은 목표를 성취할 수 있을 것이라 판단했기 때문이다.

 - 기존의 웹페이지를 클론함으로써 웹페이지의 디자인 시안에 맞추어 뷰를 제작하는 능력을 습득 가능하며, 이 과정에서 Html, CSS, JavaScript, React JS의 사용법을 더 깊게 공부할 수 있다.

 - 우선은 서버에서 데이터를 받아왔다는 전제를 두고 화면을 구성하는 것을 목표로 삼되, 최종적으로 백엔드를 지망하게 된다면, 실제로 서버를 이용해 동영상 관리 및 회원 관리 기능을 추가하고자 한다.

 

 

3. 유튜브 분석

아무래도 한 번에 유튜브의 모든 기능을 완벽하게 분석하기는 어려워 보이고, 완벽하게 분석한 뒤에 페이지를 만들어 나가려면 작업이 더 미뤄질 것 같은 생각이 들어 우선은 메인 페이지부터 구성해 나가기로 했다.

메인 페이지는 크게 세 개의 컴포넌트로 나눌 수 있을 것 같다. 최상단과 왼쪽의 바, 그리고 센터의 메인 페이지이다. 두 개의 바는 스크롤과 무관하게 현재 위치에 고정적으로 나타낼 것이다.

 

각 컴포넌트는 위와 같이 다시 세분화될 수 있다.

 

먼저 위의 메인 페이지를 구성하는 것부터 시작해 보려고 한다.