썸네일의 대표 색상을 이용해 동적으로 배경 그라디언트 만드는 방법 (color-thief.js)

최근 음악이나 OTT처럼 컨텐츠를 제공하는 앱에서는 썸네일(이미지)에 따라 배경색이나 배경 그라데이션이 변경되는 디자인을 쉽게 볼 수 있습니다.썸네일(대표 이미지)에 따라 배경색이 자동으로 달라지는 UI는 일반적으로 "동적 색상(Dynamic Color)" 또는 "다이내믹 컬러(Dynamic Color)" UI라고 부릅니다. 구글의 Material Design 3 디자인 시스템에서 이 개념이 널리 알려졌으며, 사용자의 배경화면이나 콘텐츠(예: 썸네일 이미지)에서 주요 색상을 추출해 앱 전체의 UI 색상 테마에 반영하는 방식을 의미합니다. 이 기능은 다음과 같은 원리로 구현할 수 있습니다. color-thief나 Vibrant.js 같은 라이브러리를 사용해서 썸네일의 대표 색상을 추출추출한 색상을 바탕으..