이미지에서 색상 팔레트 뽑아내기, 알고리즘 한 번 제대로 파헤쳐보자

"이 사진 색감 너무 예쁜데, 그대로 가져다 쓰고 싶다"

디자인 작업하다 보면 한 번쯤 이런 생각 해보셨을 거예요. 어떤 사진을 보면 색감이 정말 마음에 드는데, 그 색들을 정확히 뽑아내서 내 프로젝트에 쓰고 싶다는 마음이요. Adobe Color나 Coolors 같은 도구들이 이미 이런 기능을 제공하고 있긴 하죠. 그런데 이게 "내부적으로는 어떻게 동작할까?"를 궁금해해본 적 있으신가요?

Amanda Hinton이라는 개발자가 자기 블로그에 이미지에서 색상 팔레트를 추출하는 알고리즘을 직접 구현하고 그 과정을 차근차근 풀어쓴 글을 올렸습니다. 단순 라이브러리 사용기가 아니라, 알고리즘 선택의 트레이드오프부터 실제 결과물 비교까지 다루고 있어서 한 번 따라가볼 만한 내용이에요.

가장 단순한 접근: 빈도수 세기

처음 떠올릴 수 있는 방법은 굉장히 간단합니다. 이미지의 모든 픽셀을 훑으면서 어떤 색이 가장 자주 등장하는지 세는 거예요. 그리고 빈도가 높은 순서대로 N개를 뽑으면 그게 팔레트가 되겠죠.

그런데 이게 잘 안 됩니다. 왜냐면 디지털 이미지에서 "같은 색"이라는 게 거의 없거든요. 우리 눈에는 똑같은 하늘색으로 보여도, 픽셀 단위로 보면 (135, 206, 235), (135, 207, 234), (134, 206, 235)처럼 미묘하게 다 달라요. 그래서 단순히 빈도수만 세면 사실상 모든 픽셀이 "고유한 색"이 되어버려서 의미 있는 팔레트가 안 나옵니다.

양자화(quantization)로 색을 묶어보자

그래서 보통 쓰는 트릭이 색상 양자화라는 기법이에요. 이게 뭐냐면, 비슷한 색들을 하나의 그룹으로 묶어서 "대표 색"으로 치환하는 거예요. 예를 들어 RGB 값을 16의 배수로 반올림하면 (255×255×255)개나 되던 색 공간이 갑자기 (16×16×16) = 4096개로 확 줄어들죠. 그러면 빈도수 세기가 의미 있어집니다.

하지만 이런 균일 격자 방식은 한계가 있어요. 어떤 이미지에는 빨간색 계열만 잔뜩 있는데 격자는 색공간 전체에 균등하게 깔리니까, 정작 빨간색 안에서의 미묘한 차이는 다 뭉개져 버리거든요. 그래서 더 똑똑한 방법이 필요해지죠.

K-Means 클러스터링: 데이터에 맞춰 색을 묶기

조금 더 정교한 접근이 K-Means 클러스터링입니다. 머신러닝 입문 단원에서 한 번쯤 보셨을 그 알고리즘이요. 이게 뭐냐면, "내가 K개의 그룹을 원해"라고 정해주면, 데이터 분포에 맞춰서 K개의 중심점을 알아서 찾아주는 방법이에요.

동작 방식이 의외로 직관적이에요. 먼저 K개의 점을 색공간에 랜덤으로 뿌립니다. 그다음 모든 픽셀에 대해 "가장 가까운 중심점이 누구야?"를 묻고, 거기에 소속시켜요. 그러면 K개의 그룹이 만들어지죠. 각 그룹의 평균 위치를 계산해서 중심점을 그쪽으로 옮기고, 다시 픽셀들을 재배정합니다. 이 과정을 중심점이 더 이상 움직이지 않을 때까지 반복하면, 그 K개 중심점이 바로 우리가 원하는 대표 색이 되는 거예요.

K-Means의 장점은 이미지마다 색 분포가 달라도 거기에 맞춰서 적응한다는 거예요. 빨간 노을 사진이면 빨강~주황 영역에 중심점들이 몰려서 미묘한 그라데이션을 잡아내고, 숲 사진이면 초록 계열에서 다양한 톤을 추출하죠.

색공간(color space)이 결정적이다

여기서 한 가지 주의할 점이 있어요. RGB 색공간에서 "가까운 색"이라고 해서 사람 눈에도 가까워 보이는 건 아니라는 사실입니다. RGB는 디스플레이가 빛을 내는 방식에 맞춰 설계된 거지, 인간의 시각 인지를 반영한 게 아니거든요.

그래서 좋은 팔레트 추출 도구들은 보통 LAB 색공간이나 HSL로 변환해서 거리 계산을 해요. 특히 LAB은 "인지적으로 균일(perceptually uniform)"하도록 설계돼서, 두 색의 LAB 거리가 가까우면 사람도 비슷하게 느낍니다. 같은 알고리즘이라도 색공간만 바꿔도 결과 팔레트의 품질이 확연히 달라져요.

비슷한 도구들과의 비교

JavaScript 생태계에서는 color-thief라는 라이브러리가 가장 유명한데, 이건 Median Cut이라는 또 다른 알고리즘을 씁니다. 색공간을 큰 박스 하나로 시작해서, 가장 변화가 큰 축을 따라 절반으로 자르기를 K번 반복하는 방식이에요. K-Means보다 빠르지만, 결과가 항상 안정적이지는 않다는 단점이 있죠.

Python에서는 colorthief나 Pillow + scikit-learn 조합이 흔하고, 모바일에서는 Android의 Palette API가 비슷한 일을 합니다.

한국 개발자에게는 어떻게 쓸 수 있을까

쇼핑몰 상세 페이지에서 상품 이미지에 맞는 배경색을 자동으로 정해주거나, 음악 앱에서 앨범 커버에 어울리는 그라데이션을 만들 때 이런 알고리즘이 유용해요. 실제로 Spotify, Apple Music 같은 서비스가 이런 기법을 광범위하게 활용하고 있고요. 사이드 프로젝트로 만들어볼 만한 주제로도 딱 좋습니다. 알고리즘 자체는 80줄 정도면 짤 수 있고, 시각적인 결과물이 바로 나오니까 학습 동기 부여도 잘 되거든요.

마무리

이미지에서 색을 뽑는 일은 "단순한 계산"처럼 보이지만, 양자화·클러스터링·색공간이라는 세 가지 결정이 결과를 완전히 바꿉니다. 라이브러리를 그냥 갖다 쓰는 것과, 내부 동작을 이해하고 튜닝할 줄 아는 것 사이의 차이는 생각보다 크죠.

여러분이라면 K-Means와 Median Cut 중 어떤 알고리즘을 먼저 시도해보고 싶으신가요? 그리고 추출한 팔레트의 "좋다/나쁘다"는 어떤 기준으로 평가할 수 있을까요?