도도섀 아카이브
유튜브 뮤직 랜딩 페이지 프론트엔드 탐색(HTML, CSS, JavaScript) 본문
프론트엔드 탐색하기 :
분석해보고 싶은 웹 기반 서비스를 하나 선택해, 해당 서비스의 랜딩 페이지 내용을 다음과 같이 나누어 분석해 봅니다.
사람마다 성향이 다르겠지만, 나는 뭔가를 할 때 음악을 들으면 집중이 잘 되는 타입이다. 학습 콘텐츠의 동영상 강의를 듣는 시간을 제외하고, 부트캠프 기간 동안 컴퓨터에서 유튜브 뮤직은 항상 실행되고 있었다. 지금 글을 작성하는 지금도 음악을 듣고 있다. 사용자의 청취 패턴을 분석하여 추천 플레이리스트를 다양하게 뽑아주고, 끌리는 한 곡을 재생하면 자동으로 그에 맞는 적절한 음악을 채워 플레이리스트를 채워줘서 직접 재생 목록을 관리하지 않아도 된다는 장점이 있어 음악을 스트리밍 할 때 거의 유튜브 뮤직을 사용한다. 오늘은 몰입 학습 시간에서 공부한 웹 기반 서비스와 프론트엔드 개념을 활용하여 유튜브 뮤직의 웹사이트를 분석해 보겠다.
YouTube Music
music.youtube.com
위 사진은 첨부한 유튜브 뮤직 URL로 접속하면 바로 만날 수 있는 화면이다. 유튜브 뮤직은 알고리즘 기반으로 음악과 플레이리스트를 추천해 주기 때문에 사람마다 보여지는 화면은 각자 다를 수 있으니 참고하자.
-HTML(Hypertext Markup Language)
먼저, 화면을 구성하고 있는 HTML 요소들이 어떻게 배치되어 있는지 구조를 파악해 보겠다. HTML의 역할은 콘텐츠의 레이아웃을 제어하고, 웹 페이지의 디자인을 위한 기본적인 구조를 제공한다.
HTML 문서의 기본 구조는 다음과 같이 구성된다.
유튜브 뮤직의 HTML 문서는 어떤 구조를 가지고 있을까? 껍데기부터 시작하여 안쪽까지 살펴보자.
1. <html> ... </html>
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시
<html> : HTML 문서의 시작 부분을 태그로 정의하고, root 요소를 정의하는 영역이다.
- lang="ko-KR" : 요소 내 사용하는 언어(스크린리더의 기본 문자셋)를 '한국어'로 설정
- dir="ltr" : 요소의 쓰기 방향을 ltr(왼쪽>오른쪽)으로 설정
- class="..." : HTML의 특정 요소에 효과를 주기 위해 클래스명 정의(여기서 클래스 대신 아이디(id)를 사용하면 한 요소의 한 가지 스타일링만 가능하다.)
- style="..." : HTML 요소의 기본 스타일 정의(대충 해석해 보자면 웹페이지의 제목(title) 라인의 높이를 1.3, 몸통(body) 라인의 높이를 1.6으로 설정했다는 것 같다.)
</html> : HTML 문서의 끝 부분을 태그로 정의
2. <head> ... </head>
위 화면은 처음 화면에서 접어놓았던 <head> 태그를 펼친 것이다. <head> 태그 영역은 HTML 문서 영역에서 머리부 영역에 해당하고, 메타데이터를 정의하는 곳이다. 메타데이터란 HTML 문서에 대한 정보(data)로 웹 브라우저에서 직접적으로 표현되지 않는 정보를 의미하는데, 이러한 데이터는 <title>, <style>, <meta>, <link>, <script>, <base> 태그 등을 이용해서 표현 가능하다. 위 화면에서는 <script>, <base>, <link>, <meta>를 사용했음을 확인할 수 있다.
- <script> : 데이터와 실행 가능한 코드를 문서를 포함할 때 사용, 보통 자바스크립트 코드와 함께 사용한다.
- <base> : 문서의 모든 상대 주소에 대한 기본 URL과 target 속성 값을 정의할 때 사용한다. 하나의 문서에는 최대 하나만 존재 가능하고, 반드시 <head> 요소 내에 위치해야 한다. 여기서는 href 속성을 명시한 것을 확인 가능하다.
- <link> : 문서와 외부 소스 사이의 관계를 정의할 때 사용한다. 역시 <head> 요소 내부에만 위치 가능하나, <base> 요소와 달리 개수의 제한이 없다. 주로 외부 스타일 시트를 연결할 때 사용한다.
- <meta> : 메타데이터를 정의할 때 사용한다. 위에 설명한 기존 요소와 같은 메타데이터에 관련한 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공하기 위해 사용한다. 역시 <head> 요소 내부에만 위치 가능하다. 사진에서 <meta name="viewport" ...>를 확인할 수 있는데, 이는 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트를 제어 가능하도록 name 속성에 뷰 포트 속성 값을 정의한 것이다.
3. <body> ... <body>
다음으로는 몸체부 영역에 해당하는 <body> 태그의 내용을 자세히 확인해 보겠다. <body> 태그는 브라우저를 통해 화면에 직접적으로 보이는 내용, 콘텐츠를 정의한 영역이다. 과제의 처음에 첨부했던 만날 수 있는 화면을 정의하는 영역이라고 생각하면 되겠다.
- <noscript> : 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의하기 위해 사용, <head> 요소에도 위치 가능하나, <link> <meta> <style> 요소만을 콘텐츠로 포함할 수 있다. 여기에 포함된 콘텐츠는 사용자가 스크립트 사용을 비활성화하였거나 지원하지 않는 경우 표시된다.
- <iron-iconset-svg> : 스크린 리더의 'on-demand announcement'가 필요한 기능에 'a11y'를 추가하기 위한 싱글톤 요소이다. (정확히 무슨 뜻인지는 모르겠다.)
- <ytmusic-app> : 전체 페이지 레이아웃(웹페이지의 상단 내비게이션 바, 그 안에 있는 버튼들, 음악 재생 시 하단에 나타나는 재생 관련 버튼 등)의 아이디, 클래스, 스타일 등을 정의한다.
- <iron-iconset-svg> : 웹페이지에서 레이아웃에 적용되는 아이콘 이미지의 구성 요소를 정의한다. svg는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.
-CSS(Cascading Style Sheets)
CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. 각 요소들의 스타일을 지정하는 역할을 한다. 간단히 설명하자면 웹페이지를 꾸며 '모양과 느낌'을 처리하기 위해 사용하는 언어라고 보면 되겠다.
CSS는 개발자 도구의 'styles' 탭에서 확인할 수 있다. 여기서 다양한 레이아웃들의 크기와 사용 폰트, 배경 색, 마진 등의 다양한 디자인 요소를 파악할 수 있다. 사진의 우측 상단의 스크롤 바의 크기가 보이는가? 유튜브 뮤직의 웹페이지 구조는 사실 단순하다고 생각했는데, 어지러울 정도로 엄청나게 많은 요소들이 존재하고 있었다... 생각해 보면 웹페이지의 절반 이상을 콘텐츠 이미지로 차지하고 있으므로 CSS가 복잡한 것이 당연한 것 같다.
-JS(JavaScript)
마지막으로 자바스크립트에 대해 살펴보겠다. 지금가지 HTML로 웹의 내용을 정의하고, CSS로 웹 디자인을 정의했다. 자바스크립트는 어떤 역할을 가지고 있을까? 자바스크립트는 객체 기반의 웹페이지의 동작(인터랙션)을 구현할 수 있는 스크립트 언어이다. 특징으로는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 또한, 객체 지향형과 함수형 프로그래밍을 모두 표현 가능하다. '상호 작용을 증가'하는 것이 자바스크립트의 주 역할이라고 볼 수 있다. 자바스크립트를 사용하면 복잡한 기능을 처리할 수 있다. 이제 유튜브 뮤직 웹페이지에서 자바스크립트를 어떻게 활용하고 있는지 알아보겠다.
먼저, 개발자 도구의 [Settings] - [Preferences] - [Debugger] 메뉴에서 자바스크립트 활성화 유무를 설정할 수 있다.
자바스크립트를 비활성화하면 웹 페이지가 어떻게 될까?
위 화면은 자바스크립트를 비활성화한 상태의 유튜브 뮤직 웹 페이지이다. 과제를 작성하면서 새로고침을 눌러 처음 페이지와 달라져 이 점은 감안해주기 바란다. 사실 자바스크립트를 활성화했을 때와 비교했을 때 어떤 차이점이 있는지는 확인할 수 없었다.
그렇다면 여기서 버튼을 클릭하면 어떻게 될까?
자바스크립트가 활성화 된 상태에서 위 '>' 버튼을 클릭하면 더 다양한 콘텐츠를 확인 가능하나, 비활성화된 상태에서는 아무 변화도 일어나지 않았다. 이밖에도 보이는 모든 버튼을 클릭했을 때 제대로 작동하지 않고, 콘텐츠를 클릭한 경우 검은색 화면으로 넘어가 제공하는 기능들을 정상적으로 이용할 수 없었다. 결론적으로 유튜브 뮤직 웹 페이지는 모든 인터랙션을 자바스크립트로 처리한 것을 확인할 수 있었다. 기능들을 온전히 사용하기 위해서는 반드시 자바스크립트를 활성화한 상태로 사용해야 한다.
사실 프론트엔드 구성요소에 대해서는 깊게 다뤄본 적이 없고 대략적인 용어의 개념만 알고 있는 상태였는데, 과제를 통해 좀 더 명확하게 알 수 있게 된 것 같다.
[코드스테이츠 PMB 11기_W7D1]
[참고자료]
'PM > Assignment' 카테고리의 다른 글
| 카카오톡 채널 API 맛보기 (Open API) (0) | 2022.04.27 |
|---|---|
| 앱의 유형이 헷갈리시나요? (모바일 웹, 웹 앱, 하이브리드 앱, 네이티브 앱) (0) | 2022.04.27 |
| Kaggle 데이터 시각화 실습해보기 (2) | 2022.04.22 |
| 도도카트 린 분석하기 (0) | 2022.04.21 |
| 올웨이즈의 지표를 확인해보자 (Google Analytics) (0) | 2022.04.20 |
