이미지의 색상 스펙트럼 생성하기

Spectrimage의 목표는 사진 속 모든 색을 보여주는 것이었다. 대표색 몇 개가 아니라, 주황의 다양한 톤, 보라의 밝기 변화, 초록의 농도까지 함께 드러내는 시각화를 만드는 작업이다.

초기에는 median cut quantization을 썼지만, 각 색을 같은 크기의 스와치로 나누는 방식이라 빈도 정보가 사라지고 순서도 뒤섞였다. 압축에는 맞지만, 색 분포를 보여주기에는 적합하지 않았다.

다음으로는 HSL hue histogram으로 전환했다. 색상환 순서가 유지되고, 각 bin의 폭이 픽셀 수를 반영해 빈도는 잘 보였다. 하지만 5도 단위 bin이 너무 거칠어서, 같은 hue 안의 밝기 차이가 한 덩어리로 섞이며 탁한 색이 생겼다.

픽셀 단위로 정렬해 더 촘촘한 스펙트럼을 만들려 했지만, hue만으로 정렬하면 같은 hue 안에서 밝기 패턴이 교차하며 줄무늬가 생겼다. ROYGBIV 구간별로 lightness 정렬을 넣거나, degree-level grouping을 해도 경계마다 다시 어두운 색으로 돌아가는 불연속이 반복됐다.

DOM 대신 Canvas로 렌더링하고 주변 픽셀 평균으로 부드럽게 만들었지만, 1차원 순서로 2차원 정보를 압축하는 한 banding artifact는 사라지지 않았다. 결국 발상을 바꿔, 밝기 차이를 억지로 한 줄에 펴지 않고 두 번째 축으로 올렸다.

최종 설계에서는:

• x축: hue를 ROYGBIV 순으로 배치
• y축: lightness를 사용해 위로는 tint, 아래로는 shade 표현
• 막대 높이: 해당 hue의 픽셀 수

이렇게 하면 각 hue의 존재 여부, 비중, 톤 범위를 한 번에 읽을 수 있다. 결과물은 파형 같은 모습이 되며, 예시 이미지에서는 주황 영역이 높게 솟고, 초록은 얇게, 자홍은 보라 끝에 모여 보인다.

흑백 사진은 별도 처리한다. 전체 픽셀의 95% 이상이 achromatic이면 축을 바꿔, x축을 lightness로 두고 검정에서 흰색까지 60 bins로 나눠 렌더링한다. 이렇게 하면 안개 낀 풍경과 고대비 인물사진처럼 톤 특성이 다른 이미지도 서로 다른 실루엣으로 표현된다.

구현은 전부 client-side에서 돌아간다. 이미지를 숨겨진 canvas에 긴 변 300px 기준으로 축소해 그린 뒤, 모든 픽셀을 읽어 HSL로 변환한다. 색이 없는 픽셀은 achromatic bucket에 넣고, 나머지는 2도 단위 hue bin으로 분류한다.

각 hue bin 안에서는 lightness 기준으로 정렬한 뒤:

• 아래 **20%**는 shade
• 가운데 **20%**는 pure color
• 위 **20%**는 tint

를 평균내어 대표색으로 쓴다. 극단값 노이즈를 줄이기 위한 선택이다. 마지막으로 bin을 ROYGBIV 순서로 재배치하고, achromatic bin을 끝에 붙여 HTML Canvas에 그린다. 4000x3000 사진도 1초 이내에 분석된다고 설명한다.