DC143C'

이미지 색상에 반응하는 컨테이너 구현하기

개요

유저에게 색다른 경험을 주는 UI/UX에 관심이 많은 저에게, 요새 최대 관심사는 애플 뮤직 앱입니다.

퇴근길 버스에서 음악을 들으며 집에 가는 동안, 업계 최고의 디자이너와 개발자들이 구현해낸 멋진 인터렉션과 UX 디자인을 보며 많은 영감을 받고 있습니다.

그래도 감탄만 할 수는 없겠죠, 이번에는 직접 만들어보자는 생각이 들었습니다.

애플 뮤직 UI 디자인 분석

제가 분석한 애플 뮤직의 전반적인 UI 디자인의 지향점은 특색 없음 입니다.

마냥 단조롭다는 뜻이 아니라, 아티스트들이 저마다 자신의 음악 세계를 표현하기 위해 만들어낸 앨범 커버를 수용해야 하는 앱의 특성 상, 앱 자체가 너무 튀는 포인트 컬러 테마나 화려한 인터렉션을 지니면 아티스트들의 의도를 온전히 표현할수 없기 때문으로 보입니다.

마치 예술 작품을 걸어두는 갤러리 같은 느낌을 상상하셔도 좋을 듯 합니다.

인사동 갤러리
출처-한국화랑협회

인사동이던 압구정 외곽이던, 그림을 판매하는 갤러리들의 인테리어는 모두 무채색이나 깔끔한 가구 배치로 방문객들에게 갤러리가 아닌 작품이 주인공이라는 느낌을 받게끔 합니다.

애플의 디자이너도 비슷한 생각을 가지고 있는 것 같습니다.

애플 뮤직 앱 앨범 커버 반응형 컨테이너
출처-애플 뮤직 앱

애플 뮤직의 UI 테마 역시 아티스트들의 앨범 커버가 돋보이기 위해 화이트/블랙의 모던한 컬러를 기반으로, 거기에 최대한 화려함을 덜어낸 미니멀 디자인을 보여줍니다.

하지만, 마냥 미니멀하기만 하면 앱이 너무 심심해보이거나, 오히려 아티스트들의 앨범 커버가 돋보이지 않을 수 있습니다.

앨범 커버 반응형 컨테이너

이에 애플이 제안한 해결 방법은 아래와 같습니다.

추천 포스트