[안드로이드/Android]Palette,Swatch를 활용해서 이미지의 테마색 가져오기

Grid형태로 데이터를 보여주는 형태의 뷰가 있습니다.

텍스트가 들어가는 부분의 배경색이 각각 사진의 분위기에 맞춰서 들어가 있는것을 확인할 수 있습니다.

글씨색또한 배경에 따라서 잘 어울리는 색으로 구성되어 있습니다.

Material Design이 소개되면서 우리는 Palette를 이용해서 동적으로 해당 이미지의 테마에 어울리는 색들을 찾을 수 있습니다.

성격급하신 분들을 위해 준비했습니다.

일단 먼저 실행해보고 싶으신분은 아래 주소에서 직접 프로젝트를 실행해보시기 바랍니다.

https://github.com/ParkSangGwon/TedPaletteSample

Palette라이브러리는 공식적으로 지원되고 있기때문에 gradle에 추가만 해주시면 됩니다.

사용방법은 아주 간단합니다.

Palette와 Palette.Swatch에 대해서만 아시면 충분합니다.

Palette 생성

Bitmap으로부터 Palette를 가져옵니다.

// Synchronously
Palette palette = Palette.from(bitmap).generate();

// Asynchronously
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {

    }
});

함수는 동기함수와 비동기함수를 사용할 수 있습니다.

동기함수는 메인쓰레드에서 성능에 영향을 미칠 수 있기때문에 백그라운드의 경우에만 사용하는것이 좋습니다.

그렇기 때문에 대부분의 경우에서 비동기 함수를 사용하는것을 추천드립니다.

Palette가 null이 올수도 있기때문에 null체크를 해서 오류를 방지해야 합니다.

Palette를 가져올때 기본적으로 16개의 색상을 이용하지만 maximumColorCount()를 통해 Palette로 이용할 색상의 개수를 지정할 수도 있습니다.

지정한 색상의 개수가 늘어날수록 Palette의 계산시간도 늘어나게 됩니다.

Swatch 생성

Swatch를 통해 Palette를 가지고 유용한 색상값들을 가져올 수 있습니다.

Swatch는 6개의 테마색을 제공합니다.

• Vibrant

• Vibrant dark

• Vibrant light

• Muted

• Muted dark

• Muted light

위에서 Palette를 가져왔다면 getXXXSwatch()함수를 통해서 각각의 Swatch를 가져올 수 있습니다.

Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();

처음에 Vibrant와 Muted라는 영어단어가 생소하게 느껴져서 네이버사전을 찾아보니 아래와 같았습니다.

네... 사실 정확히는 딱 무슨뜻인지 감이 오지는 않았습니다...

대충 느낌적인 느낌으로만 보자면 Vibrant는 메인이 될만한 진~한 색감을 가져오는것이고 Muted는 그 반대의 개념으로 이해할 수 있을것 같습니다.

실제로 Palette를 이용하시다보면 Vibrant와 VibrantDark를 많이 사용하시게 될겁니다.

Swatch또한 null로 올수 있기때문에 null체크를 해주셔야 합니다.

Swatch에서 제공하는 여러 함수중에서 3가지정도 많이쓰는 함수를 소개해 드리겠습니다.

• getRgb(): Vibrant로 하셨다면 해당 이미지의 Vibrant에 해당하는 RGB색상값을 가져옵니다.

• getTitleTextColor(): 위의 RGB색상값에 잘 어울리는 제목의 색상값을 가져옵니다.

• getBodyTextColor(): 위의 RGB색상값에 잘 어울리는 본문의 색상값을 가져옵니다.

실제로 getTitleTextColor() 사용했을때 제목이 본문보다 좀더 투명하게 나와서 제가 기대한 느낌으로 보여지지는 않았습니다.

오히려 반대로 되는게 더 맞을수도 있다는 생각이 들지만 구글형이 그렇게 만들었으니 믿고 따라가 봅니다.

Palette와 Swatch를 이용한 배경색,글씨색 변경

위의 방법으로 Palette와 Swatch를 이용한다면 아래와 같은 코드로 이미지의 테마에 맞는 배경색과 글씨색들을 지정해 줄수 있습니다.

같은 방식으로 각각 6개의 테마색과 Title,Body색을 지정해줄경우 아래와 같은 결과를 얻으실 수 있습니다.

Glide 연동

실제로 서비스중인 앱에 적용할경우 URL형식의 이미지를 가져와서 표시하는경우가 많습니다.

제가 사랑하는 Glide에 Palette를 적용하는경우는 Glide의 기본 behavior를 활용해서 구현해줍니다.

Glide Wiki

하지만 Glide Wiki문서에도 나와있듯이 이 방법은 기본적인 심플예제일뿐 추천되는 방식은 아닙니다.

RecyclerView의 ViewHolder에서 사용되는경우 Palette의 generate 시차때문에 엉뚱한 위치에 해당 색상이 지정될 위험이 있습니다.

(그럼에도 불구하고 귀찮아서 우리는 아마 이대로 사용하겠죠..) 

다음 Glide버전에는 기본적으로 Palette를 제공해줄 예정이라고 합니다.

위와같은 문제를 완벽하게 해결하고 싶은경우 Glide에서 안내하는 예제를 확인하신뒤 구현하시면 됩니다.

Palette 예제 프로젝트는 아래 주소에서 확인해보실 수 있습니다.

https://github.com/ParkSangGwon/TedPaletteSample

(내용이 유용하셨다면 Github 오른쪽위의 [Star]버튼을 눌러주시면 감사하겠습니다

저에게는 별풍선 주시는 효과가 있어요!)

Palette를 잘 활용하셔서 예쁜 화면UX/UI를 만드시기 바랍니다~

감사합니다.