오늘은 이미지에서 주요 색상을 추출하는 방법에 대해 알아보며 이를 라이브러리화하는 과정을 소개하려고 합니다. 그 과정에서 겪었던 어려움과 노하우 등을 공유하고자 합니다.

video


시작은 단순한 아이디어였습니다.

처음에는 그저 “이미지에서 색상을 뽑아낼 수 있으면 편하겠다. 그리고 그 이미지의 키 컬러를 뽑아내면 좋겠다.” 라는 생각으로 시작했습니다.

이미지에서 색상을 추출하는 사이트는 많았지만, 대부분 스포이드로 해당 픽셀의 컬러값을 가져오거나 그렇지 않으면 이미지 내에 있는 색상들을 전부 가져오는 것들이 대부분이였습니다.

첫 번째 도전: 성능 최적화

가장 먼저 부딪힌 문제는 성능이었습니다. 처음에는 모든 픽셀을 분석했는데, 큰 이미지를 처리할 때마다 성능이 떨어지는 문제가 있었습니다.

해결책: 픽셀 샘플링

  • 모든 픽셀을 분석하는 대신 일정 간격으로 픽셀을 샘플링하는 방식을 도입했습니다.
  • 사용자가 샘플링 비율을 조절할 수 있게 성능과 정확도의 균형을 맞출 수 있도록 했습니다.

두 번째 도전: 다양한 환경 지원

하나의 라이브러리로 브라우저와 Node.js 환경을 모두 지원하고 싶었는데, 이미지 처리 방식이 완전히 달랐습니다.

해결책: 어댑터 패턴

  • 브라우저용과 Node.js용 어댑터를 별도로 만들어 환경별 차이를 추상화했습니다.
  • 덕분에 코어 로직은 환경에 상관없이 일관되게 유지할 수 있었습니다.

세 번째 도전: 색상 정확도

K-means 알고리즘을 사용해 색상을 군집화했는데, 때때로 결과가 일관성이 없었습니다.

해결책: 다중 실행과 결과 안정화

  • 알고리즘을 여러 번 실행하고 결과를 평균 내는 방식을 도입했습니다.
  • 색상 유사성을 판단하는 CIEDE2000 알고리즘을 적용해 비슷한 색상을 병합했습니다.

네 번째 도전: 타입 안정성

Javascript로 시작했다가 타입 관련 버그로 고생했습니다.

해결책: Typescript 도입

  • Typescript로 전환하면서 많은 잠재적 버그를 사전에 잡을 수 있었습니다.
  • 코드의 가독성과 유지보수성도 크게 향상되었습니다.

겪은 점

  • 성능은 처음부터 고려하기: 나중에 최적화를 하려면 전체 구조를 뜯어고쳐야 할 수도 있습니다.
  • 확장성을 염두해두기: 처음부터 다양한 환경을 고려하면 나중에 수고를 덜 수 있습니다.

결론

Image-Colors 라이브러리를 만들면서 많은 것을 배웠습니다.

기술적인 도전을 겪으면서 성장할 수 있는 기회가 되었습니다.