앱센터 4번째 차시 - 웹사이트 스타일 요소 분석

이번 시간에는 웹 사이트 한 개를 선정하여 스타일 요소를 분석해보려고 합니다. 저는 평소에 많이 사용하는 웹 사이트 중 유튜브 뮤직을 골라보았습니다!

1. 스타일 요소 알아내는 법

먼저 스타일 요소를 알아내는 방법은 아래와 같습니다.

1. F12로 관리자 도구 열기
2. 좌측 상단 버튼 -> 검사할 페이지 요소 선택
3. 2번의 버튼을 누른 후 원하는 요소를 클릭!
4. 요소 영역에 코드가 뜸.
5. 우측에 스타일, 계산됨 영역에서 스타일 요소를 볼 수 있음.

2. 유튜브 뮤직 스타일 요소

우선 메인 화면은 아래와 같습니다.

저는 현재 다크 모드를 사용 중이기 때문에 이에 맞춰 요소들을 하나하나 눌러가며 스타일 요소를 정리해보았습니다.

가. 색상

• 기본 배경 색상 : rgba(0, 0, 0, 0)
• 스크롤러 메뉴 버튼 색상 : rgba(255, 255, 255, 0.1)
• 스크롤바 색상 : rgb(170, 170, 170) rgba(0, 0, 0, 0)

나. 폰트

• 로고, 스크롤러 메뉴바, 사용자 아이디, 노래 및 가수 : Roboto, "Noto Naskh Arabic UI", Arial, sans-serif
• 좌측 메뉴바 : Roboto, Noto, sans-serif
• 다시 듣기 글꼴 : "YouTube Sans", Roboto, "Noto Naskh Arabic UI", Arial, sans-serif

** 폰트의 경우 찾아보니 위 세 가지 폰트들이 순서대로 우선순위를 가지고, 셋 모두 적용이 불가한 경우 기본 글꼴로 렌더링된다고 합니다. 아래 사진처럼 요소 탭에서 렌더링된 글꼴을 확인할 수 있습니다!

7. 애니메이션(Transition & Motion)

• Hover 시 : 썸네일 확대 효과 (transform: scale(1.05))
• 전환 시 : 페이드(transition: opacity 0.3s ease-in-out)
• 재생 버튼 : 클릭 시 미세한 진동 효과 (keyframes pulse 형태)

8. 스켈레톤 로딩(Skeleton Loading)

• 로딩 중 : 앨범 자리마다 회색 블록이 깜빡이며 표시
• background : linear-gradient(90deg, #2a2a2a, #3a3a3a, #2a2a2a)
• animation : shimmer 1.2s infinite linear