[서비스기획] 유튜브(YouTube) 프론트엔드(Front-end) 탐색

오늘은 유튜브(YouTube)의 웹 랜딩 페이지를 프론트엔드 요소인 HTML, CSS, JavaScript 요소로 나누어서 분석할 것이다. 글의 간결성을 위해 해당 페이지 내의 '다른 페이지 연결' 기능에 대한 논의는 제외하고 정리해보았다.

 

들어가기 전에: 유튜브 웹 랜딩 페이지 전체 화면

유튜브 랜딩페이지 화면

유튜브는 구글(Google)에서 운영 중인 동영상 플랫폼이다. 콘텐츠 제작자는 유튜브에 자신이 제작한 동영상을 업로드하고 영상 시청 전후에 나오는 동영상 광고를 통해 유튜브와 콘텐츠 제작자가 나눠 갖는 구조이다. 따라서 유튜브는 콘텐츠 시청자의 체류 시간을 늘리기 위한 시청 편의 기능을 다양하게 제공한다.

 

유튜브의 웹 랜딩 페이지는 위 이미지와 같다. 유튜브의 웹 랜딩 페이지의 다양한 요소를 HTML, CSS, JavaScript 세 요소의 관점에서 분석했다.

 

---

1. HTML 요소

유튜브 홈 화면 HTML 요소

• 유튜브의 홈화면은 동영상 플랫폼이다보니 동영상을 강조하기 위해 큰 이미지를 위주로 배열했다.
• Top bar(상단 헤더 영역)는 다양한 <button>, <icon>, <a> 요소로 구성되어 있다.
• 아래 부분의 동영상 부분은 <image>, <string>, <a>, <span> 등의 요소로 이루어져 있는데 모든 동영상의 기본 HTML 구조가 같고(추가 요소의 존재에 따라 다른 경우 있음), 동영상의 썸네일(thumbnail) 부분은 콘텐츠 제작자가 설정한 이미지로 구성된다.

유튜브 랜딩 페이지의 프론트엔드와 코드 사이의 관계에 대해 생각해보았다. 상단 헤더 영역은 다양한 코드가 적용되어 있지만 광고 배너 아래 부분인 콘텐츠 영역은 일관된 코드와 스타일이 적용되어 있음을 알 수 있었다. 일관된 스타일을 유지하는 이유는 사용자가 콘텐츠 내용(Thumbnail, 텍스트 요소)에만 집중하게끔 만들려는 의도라고 생각한다. 기획자의 의도가 개입해 만약 콘텐츠 배열의 스타일이 달랐다면 어떨까?

 

네이버 쇼핑몰 웹 랜딩 페이지

 

위와 같이 네이버 쇼핑몰 웹 랜딩 페이지 사례를 비교하면 기획자의 의도에 따라 광고 배너가 가장 큰 부분을 차지하여 사용자의 눈에 잘 띄게 만들었다. 한 페이지에 여러 콘텐츠를 다양한 스타일로 배치한 네이버 쇼핑과 달리 유튜브는 핵심 콘텐츠 요소인 '동영상'을 추천 알고리즘으로 도출된 우선 순위에 따라 같은 형식으로 보여주는 방식을 선택했다.

 

유튜브가 일관된 형식을 유지하는 이유는 코드의 유지&보수를 쉽게 하기 위해서가 아닐까 추측했다. 유튜브는 추천 알고리즘을 통한 홈 화면에 보여줄 동영상을 정하는데, 만약 콘텐츠가 많다면(as many as 네이버 쇼핑) 그만큼 추천 알고리즘이 띄워주는 콘텐츠의 가짓수가 많아져서 로딩 시간이 길어지는 이슈와 추천 알고리즘의 정확도가 떨어질 수 있기 때문에 네이버 쇼핑보다는 적은 콘텐츠를 띄워주는 것이 아닐까 생각해보기도 했다.

 

---

2. CSS 요소

(1) 동영상 부분의 CSS

동영상 부분에 적용된 CSS

1) video-title

• Color: #0F0F0F
• Font: 14px Roboto, Arial, Sans-serif
• Contrast: 19.16
• 크기: 반응형 요소로서 화면 크기에 따라 변함

2) Simple-endpoint

• Color: #606060
• Font: 12px Roboto, Arial, Sans-serif
• Margin: 0px -1.2px 0px 0px
• Padding: 0px -1.2px 0px 0px
• Contrast: 6.28
• 크기: 반응형

3) Inline-metadata-item

• Color: #606060
• Font: 12px Roboto, Arial, Sans-serif
• Contrast: 6.28
• 크기: 반응형

CSS 요소는 텍스트 색, 글씨체, 폰트 크기 등을 설정해주는 기능임을 알 수 있다.

 

---

3. JavaScript 요소

유튜브 홈페이지 Javascript 요소

이 부분에서 시간을 많이 허비했는데, 알고보니 자바스크립트 같은 경우 개발자도구 화면에서도 겉으로 드러나지 않는 요소가 많다고 한다. (이럴거면 눈에 띄는 자바스크립트 요소를 하나 찾아서 넣고 끝낼 걸 그랬다..) 일일이 코드 토글(?)을 펼쳐가면서 굳이 'javascript'라고 써진 요소를 찾았다.

 

검색 창 옆에 있는 키보드 자판 모양의 아이콘에 자바스크립트가 적용되어 있었다. 해당 아이콘을 누르면 화면 아래 작게 화상키보드가 나타난다. (아래 이미지 참조)

키보드 모양 아이콘 눌렀을 때 보이는 화면(좌)

자바스크립트가 설정된 부분을 클릭했을 때 리액션이 나타나는 특징을 갖고 있다고 배웠다. 위와 같이 키보드 모양 아이콘을 눌렀을 때 화상키보드가 화면 아래 부분에 뜨는 것이 자바스크립트가 적용된 예시라고 할 수 있다.

 

---

4. 분석하면서 든 생각

애초의 계획은 랜딩 페이지를 크게 네 가지 부분으로 나누어서 각각의 HTML, CSS, JS를 분석하려고 했으나 Top bar만 해도 요소가 다양했고, 애초에 HTML, CSS, JS에 대한 이해가 낮아서 어디까지 정리해야 하는 건지 감이 안 왔다. 유튜브 말고 랜딩 페이지가 단순한 페이지를 했다면 각 요소를 파악하는 일이 어렵지 않았을 것 같다. 일단 하면서 든 어려움을 정리해보자. 나중에 개발 지식을 쌓고 나서 본다면 좀 더 명확해질 것 같다.

 

1. Top bar도 크게 세 가지 부분으로 나뉘는데 이 부분도 정리해줘야 하나? (Start.style-scope, Center.style-scope, End.style-scope) Top bar보다 더 중요한 요소는 동영상 브라우저 영역이라고 생각했는데 Top bar 부분을 분석하는 것도 어려웠다.
2. 개발자 모드(F12 버튼 누르면 볼 수 있다)로 들어가서 해당 HTML, CSS, JS 코드를 봐도 이해할 수가 없었다. 위에 정리한 부분도 이해해서 적었다기 보다 무엇을 알고, 무엇을 모르는지 정확히 모르는 상태로 정리했다.
3. 코드를 읽을 줄 모르니 시간이 너무 오래 걸렸다. 결과적으로 해당 과제 루브릭의 '세 요소 중 하나를 선택해 실제 기능이 코드로 어떻게 구현되는지 분석하였는가?'는 작성하지 못했다. 이 부분은 HTML, CSS, JS 중 하나를 공부한 뒤에 따로 다뤄봐야겠다! (지금은 뭘 모르는지 모르는 게 문제라서 코드를 어떻게 분석해야 할지 감을 못 잡은 상태)