대표 색상 추출의 원리

사진 한 장에는 수십만 개의 픽셀이 있고, 픽셀마다 색이 다릅니다. 그런데 색상 추출 도구는 이걸 순식간에 "이 사진의 색은 이 다섯 가지"로 요약합니다. 어떻게 가능한 걸까요? 수학 기호 없이, 정리 상자에 물건을 나눠 담는 이야기로 풀어 보겠습니다.

최종 업데이트: 2026년 7월

1. 문제: 수만 가지 색을 다섯 가지로

이 문제의 정식 이름은 색상 양자화(color quantization)입니다. 원래는 1980~90년대에 색을 256가지밖에 표시하지 못하던 컴퓨터에서 사진을 보여 주기 위해 만들어진 기술입니다. 수백만 색의 사진을 256색으로 줄이되 최대한 원본처럼 보이게 해야 했으니, "어떤 색들을 남길 것인가"가 핵심이었습니다. GIF 이미지가 256색인 것도 이 기술의 흔적입니다.

오늘날 팔레트 추출은 같은 기술을 다른 목적에 씁니다. 256색까지 갈 것 없이 5~10색으로 강하게 요약하면, 그것이 곧 사진의 대표 색상 팔레트가 됩니다.

2. 색을 공간에 펼치기

모든 색은 빨강(R)·초록(G)·파랑(B) 세 숫자로 적을 수 있습니다. (이 표기가 낯설다면 색상 코드 읽는 법을 먼저 읽어 보세요.) 숫자가 세 개라는 것은 곧 3차원 공간의 좌표가 된다는 뜻입니다.

가로축을 빨강, 세로축을 초록, 깊이축을 파랑이라고 하면, 사진의 모든 픽셀을 이 정육면체 공간 안에 점으로 찍을 수 있습니다. 노을 사진이라면 주황~보라 부근에 점이 빽빽하게 몰리고, 숲 사진이라면 초록 지대에 구름처럼 점이 모입니다. 이제 문제가 이렇게 바뀝니다. "점 구름을 다섯 무리로 나누려면 어디를 자르면 될까?"

3. 미디언 컷: 절반씩 자르기

이미지 색상 추출 도구가 쓰는 방식은 미디언 컷(median cut), 직역하면 "중앙값 자르기"입니다. 절차는 의외로 단순합니다.

1. 모든 점(픽셀)을 큰 상자 하나에 담습니다.
2. 상자 안에서 점들이 가장 넓게 퍼져 있는 방향을 찾습니다. 빨강 방향으로 0부터 250까지 퍼져 있고 파랑 방향으로는 거의 비슷하다면, 자를 방향은 빨강 축입니다.
3. 그 방향을 기준으로 점을 줄 세운 뒤, 딱 절반이 되는 지점(중앙값)에서 상자를 둘로 자릅니다. 두 상자에 점이 반반씩 들어갑니다.
4. 이제 상자가 둘입니다. 그중 색이 가장 다양하게 퍼진 상자를 골라 또 절반으로 자릅니다.
5. 상자가 원하는 개수(5개면 5개)가 될 때까지 반복합니다.

"가장 퍼진 방향을 절반으로"라는 규칙 덕분에 점이 많이 몰린 색 영역은 여러 상자로 세분되고, 점이 적은 영역은 큰 상자 하나로 뭉뚱그려집니다. 사진에서 넓은 면적을 차지하는 색일수록 더 정밀하게 나뉘는, 꽤 공평한 방식입니다.

4. 각 상자의 평균이 대표색

상자가 5개가 되면, 각 상자에 담긴 픽셀들의 R·G·B를 각각 평균 내서 색 하나를 만듭니다. 이것이 그 상자의 대표색입니다. 상자에 담긴 픽셀 수를 전체로 나누면 그 색이 사진에서 차지하는 비중(%)도 나옵니다. 추출 도구에서 색마다 퍼센트가 붙어 나오는 것이 바로 이 값입니다.

여기서 중요한 성질 하나가 생깁니다. 대표색은 비슷한 색들의 평균이지, 사진 속에 실제로 존재하는 한 픽셀이 아닐 수 있다는 점입니다. 벽돌담 사진이라면 밝은 벽돌과 어두운 벽돌 사이의 중간 색이 대표로 뽑힙니다. 요약으로는 정확하지만, "저 벽돌 딱 그 색"이 필요하다면 평균이 아니라 그 지점의 픽셀을 직접 읽어야 합니다. 추출 도구에 스포이드 기능이 따로 있는 이유입니다.

5. 다른 방법: K-평균

색상 양자화에는 다른 접근도 있습니다. 가장 유명한 것이 K-평균(K-means)입니다.

1. 대표색 후보 K개를 아무 데나 찍어 둡니다.
2. 모든 픽셀을 가장 가까운 후보에 배정합니다.
3. 각 후보를 자기에게 배정된 픽셀들의 평균 위치로 옮깁니다.
4. 배정이 더 바뀌지 않을 때까지 2~3을 반복합니다.

K-평균은 점 구름의 실제 뭉침을 따라가므로 결과가 조금 더 자연스러운 경우가 많지만, 반복 계산이라 느리고 처음 후보를 어디에 찍었느냐에 따라 결과가 달라질 수 있습니다. 미디언 컷은 한 번에 결정되어 빠르고 결과가 항상 같습니다. 브라우저에서 실시간으로 슬라이더를 움직이며 색상 수를 바꾸는 용도에는 미디언 컷이 알맞습니다.

6. 추출 색이 눈과 다른 이유

추출 결과가 기대와 다를 때는 대부분 이 세 가지 중 하나입니다.

• 평균의 함정: 위에서 말했듯 대표색은 평균이라, 명암이 크게 갈리는 영역에서는 실제로 없는 중간색이 나올 수 있습니다. 특정 지점 색은 스포이드로 찍는 것이 정확합니다.
• 면적의 논리: 사람 눈은 작아도 선명한 색(빨간 우산)에 끌리지만, 알고리즘은 면적이 넓은 색(회색 하늘)을 우선합니다. 눈에 띄는 색과 많이 쓰인 색은 다릅니다. 포인트 색이 필요하면 색상 수를 8~10으로 늘리거나 그 부분만 잘라 추출해 보세요.
• 모니터와 조명: 같은 코드도 화면 설정에 따라 달라 보입니다. 코드는 같은데 느낌이 다르다면 색이 아니라 화면 문제일 수 있습니다.

7. 자주 묻는 질문

픽셀을 전부 계산하면 느리지 않나요?

그래서 실제로는 사진을 작게 줄여서 표본을 뽑습니다. 긴 변 240픽셀 정도로 줄여도 수만 개의 표본이 남아서 색 분포는 거의 그대로 유지되고, 계산은 수십 밀리초면 끝납니다. 대표색을 뽑는 데는 해상도가 높을 필요가 없습니다.

투명한 PNG는 어떻게 처리되나요?

투명한 픽셀은 색이 "없는" 자리이므로 표본에서 제외하는 것이 일반적입니다. 로고처럼 배경이 투명한 이미지도 실제 그림 부분의 색만으로 팔레트가 만들어집니다.

색상 수를 늘리면 왜 기존 색도 조금씩 바뀌나요?

상자를 더 잘게 자르면 기존 상자의 경계도 달라지기 때문입니다. 6색에서의 "파랑 상자"가 8색에서는 "하늘색 상자"와 "남색 상자"로 갈라지면서, 각 상자의 평균색이 새로 계산됩니다. 요약을 더 세밀하게 다시 한 것이라고 생각하면 됩니다.

GIF가 256색인 것과 이 기술이 관련 있나요?

네, 같은 기술입니다. GIF는 이미지마다 최대 256색의 팔레트를 내장하는 포맷이라, GIF로 저장할 때마다 색상 양자화가 일어납니다. 그라데이션이 있는 사진을 GIF로 저장하면 띠처럼 계단이 지는 것도 색이 256개로 요약되면서 생기는 현상입니다.