컴포넌트 클로닝(5) - 유튜브 뮤직 컴포넌트

music.youtube.com/

YouTube Music | 음악 세상으로 통하는 문

저는 유튜브 프리미엄을 사용 중이라 자연스럽게 유튜브 뮤직을 사용하는데요. 유튜브와 연결되기 때문에 다양한 음악을 듣는 데는 좋은 거 같습니다. 몇 년 전 처음 나왔을 때는 쓰는 게 거의 불가능할 정도로 엉망이었는데 요즘은 굉장히 많이 나아진 서비스라고 생각합니다. 최근 블로그에 컴포넌트 클로닝 컨셉으로 글을 작성하다 보니 기존에 자연스럽게 쓰던 서비스도 몇 번씩이나 다시 분석하게 되었는데, 유튜브 뮤직은 굉장히 심플해 보이지만 기본기가 탄탄하게 설계되어 있는 거 같아 분석해보게 되었습니다.

 

유튜브 뮤직의 메인 페이지는 섹션별로 한줄로 컴포넌트들이 정렬되어있고 섹션들은 Column으로 정렬되어 있습니다. 섹션의 주제에 맞게 큐레이션 된 컴포넌트가 있는데요. 컴포넌트의 종류로는 크게 아티스트, 앨범(혹은 플레이리스트), 뮤직비디오가 있습니다. 각 컴포넌트의 특징에 맞춰 썸네일의 형태라던지 아래에 나오는 텍스트의 정렬이나 정보등이 달라지게 됩니다.

 

아티스트

• 썸네일의 형태가 앨범, 뮤직비디오와 다르게 원형 형태를 가지고 있습니다.
• 텍스트 정렬이 앨범, 뮤직비디오와 다르게 중앙 정렬을 하고 있으며, 이는 다른 컴포넌트에 비해 표시해야하는 정보가 적어도 되기 때문인 것과
• 상단의 썸네일 이미지가 원형이기 때문에 적절하고 자연스러운 배치라고 생각됩니다.

앨범(혹은 플레이리스트)

• 썸네일의 형태가 1:1 비율의 정사각형이며, 이는 대부분 앨범(CD 혹은 Vinyl)의 커버가 1:1 비율이기 때문이라고 생각합니다.
• 아티스트와는 다르게 이미지 전체가 표시되어야 하기 때문에 이미지가 잘리지 않는 형태입니다.
• 텍스트 정렬은 좌측 정렬이며, 특정 플레이리스트나 앨범의 경우 제목 밑에 표시되는 정보가 길어지는 경우가 있고 정보 전달 위주의 형태를 띠기 때문이라고 생각합니다.

뮤직비디오

• 썸네일의 형태는 16:9 비율의 사각형을 가지고 있으며, 이는 가장 보편적인 영상의 비율입니다. 그리고 마우스를 올리지 않아도 가운데에 재생 버튼 아이콘이 있어서 비디오라는 걸 인지시키는 장치를 가지고 있습니다.
• 텍스트의 경우 앨범(혹은 플레이리스트)과 동일합니다.

 

하나의 섹션에 아티스트나 뮤직비디오 등 다른 컴포넌트들이 섞여있지만 지금까지 사용하면서 불편하게 생각되지 않은 이유가 교묘하게 시각적으로 정리되어서 그랬던 거 같습니다. 무심코 사용하는 서비스였는데 이론적으로 분석하니 기본기를 다시 복습하게 되었습니다.