javascript 이미지 색상 추출하기

웹 개발을 하다 보면, 이미지에서 주된 색상을 추출해 텍스트나 배경 등 디자인 요소에 활용된 경우가 종종 있습니다.

 

예시 이미지

예를 들어, 서버에서 OpenAPI 목록을 제공받아 GPT와 Gemini라는 두 가지 항목을 렌더링 한다고 했을 때를 가정하고 해 보겠습니다.

서버에서는 보통 아래 데이터형식으로 보내줍니다.

[
 {
  title: 'GPT',
  logoUrl: 'https://...'
 },
 {
  title: 'Gemini',
  logoUrl: 'https://...'
 }
]

 

하지만 디자인을 구현하기 위해 이러한 색상 정보를 서버에서 매번 제공받는 것은 비용과 성능 면에서 비효율적일 수 있습니다.

이미지가 많은 사이트에서는 색상 데이터를 저장하고 관리하는 것이 번거로울 뿐만 아니라, 서버 요청이 많아질수록 성능에도 부정적인 영향을 미칠 수 있습니다. 이런 문제를 해결하고, 클라이언트 측에서 효율적으로 색상 정보를 추출하는 데 유용한 도구가 바로 JavaScript 라이브러리인 ColorThief입니다.

 

ColorThief란 무엇인가?

공식문서

ColorThief는 이미지에서 가장 지배적인 색상이나 팔레트를 추출하는 간단하고 강력한 JavaScript 라이브러리입니다. 이 라이브러리는 이미지 기반의 색상 추출 작업을 쉽게 만들어 주며, 특히 웹 애플리케이션에서 동적 색상 테마를 구성할 때 매우 유용합니다. 기본적으로 두 가지 주요 기능을 제공합니다:

1. getColor(image): 이미지에서 가장 지배적인 색상을 추출합니다. 결과는 [R, G, B] 형식의 배열로 반환됩니다.
2. getPalette(image, colorCount = 10): 이미지에서 지정된 수의 색상 팔레트를 추출합니다. 여러 개의 [R, G, B] 배열을 포함한 2차원 배열로 반환됩니다.

 

ColorThief 사용 예시

아래는 ColorThief를 사용하여 이미지에서 색상을 추출하는 기본적인 방법입니다.

이 예제에서는 이미지를 로드한 후, ColorThief의 getColor 메서드를 사용하여 지배적인 색상을 추출하고 있습니다.

 

여기서 getColor 메서드는 이미지가 로드된 후 호출되어야 하며, 결과로 [R, G, B] 형식의 배열을 반환합니다.

 

TypeScript에서 ColorThief 사용할 때에는 declare 파일을 생성해 주어야 합니다.

colorthief 라이브러리에서 타입스크립트를 공식적으로 지원하지 않기 때문에 직접 파일을 추가해 주어야 합니다.

ColorThief를 사용하는 기본적인 방법은 아래와 같습니다. 

이슈: https://github.com/lokesh/color-thief/issues/188

 

 

React에서 ColorThief 사용 예시

React에서 ColorThief를 사용하여 이미지 색상을 추출할 때, 이미지가 로드된 후에만 색상을 가져올 수 있으므로 이를 처리하는 컴포넌트를 만들어보겠습니다.

 

1. 먼저, 이미지를 주소를 prop으로 받고, 색상만을 반환하는 함수를 만들어보겠습니다.

 

 

이 함수는 이미지 객체를 생성하고, 로드가 완료되면 ColorThief를 사용하여 색상을 추출합니다. Promise를 사용하여 비동기적으로 동작하며, 이미지가 로드된 후 색상을 반환합니다.

 

2. 다음으로, ImageColorThief 컴포넌트를 만들어서 텍스트나 다른 요소에 이 색상을 적용할 수 있도록 하겠습니다.

 

이 컴포넌트는 이미지 URL을 받아 getImageColorThief 함수를 호출하여 색상을 추출하고, 추출된 색상을 자식 컴포넌트에 스타일로 적용합니다. React.cloneElement를 사용한 이유는 자식 요소에 동적으로 스타일을 추가하기 위해서입니다.

 

3. 마지막으로, 이 컴포넌트를 사용하는 방법입니다.

 

이 예제에서는 이미지가 로드된 후, 해당 이미지의 주요 색상으로 텍스트의 색상을 동적으로 설정합니다.

 

결과물

 

ColorThief는 이미지에서 주요 색상을 추출하여 동적으로 웹 페이지의 스타일을 조정할 때 매우 유용한 도구입니다. 특히, 서버 비용을 줄이고, 클라이언트 측에서 빠르고 효과적으로 디자인 작업을 수행할 수 있다는 점에서 큰 장점을 가지고 있습니다.

그러나, 이미지를 로드할 때 발생할 수 있는 CORS 문제나 비동기 처리와 같은 기술적 이슈를 잘 관리해야 하며, 이러한 상황을 대비한 코드를 작성하는 것이 중요합니다. 또한, 프로젝트의 요구 사항에 따라 성능 최적화와 대체 도구의 사용 가능성도 고려해야 합니다.