Thumbor - open source imaging service

 

 

Thumbor는 오픈소스 on demand 이미징 서비스입니다.

주 기능은 이미지 크롭, 리사이징, 필터링등인데요, thumbor는 이름에서 유추할 수 있듯 썸네일을 만들어주는 서비스에서 시작했습니다.

그 이후에 여러가지 부가기능들이 추가되어 이미지에 관한 다양한 처리를 할 수 있는 서비스로 발전했습니다. 현재 github에서 스타 8000개가 넘는 꽤 유명한 이미지 관련 오픈소스입니다.

 

 

thumbor 한번 써봅시다.

 

1. 설치

pip install thumbor

끝입니다! thumbor는 파이썬으로 내부 코드가 이루어져있어서 pip로 간단하게 서버에 설치가 가능합니다.

 

저는 서버에 따로 올리지 않고 로컬에서 테스트하고싶었는데요, 로컬에는 간단하게 docker로 설치가 가능합니다.

docker run -d -p 7777:80 minimalcompact/thumbor

끝입니다! 아주 쉽네요. 저는 로컬에서 8888 포트번호로 다른 컨테이너를 띄워놓고 사용중이라 7777 포트를 사용했습니다.

 

 

2.기능

thumbor에는 다양한 기능이 많은데요, 대부분 url로 쉽게 사용이 가능합니다.

인코딩된 이미지 url을 path에 넣어주기만 하면 됩니다.

저는 이렇게 생긴 귀여운 수달 사진으로 테스트를 해보았습니다.

 

(search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20160208_266%2Fkidho369_1454926782350UfVr7_JPEG%2F740_c241ee990d614af3b59b8156095a305d.jpg&type=b400)

1) resize

 

가장 기본 기능인 resize를 해보겠습니다.

아래의 url에서 unsafe 자리에는 사실 보안을 위한 hmac가 들어가는 자리입니다. 하지만 지금은 로컬에서 테스트중이므로 생략하고 unsafe 모드로 실행을 하겠습니다. 

hmac 다음에는 resize하고싶은 크기(px), 인코딩이 된 이미지의 uri를 넣어주면 끝입니다.

http://localhost:7777/unsafe/100x100/https%3A%2F%2Fsearch.pstatic.net%2Fcommon%2F%3Fsrc%3Dhttp%253A%252F%252Fcafefiles.naver.net%252F20160208_266%252Fkidho369_1454926782350UfVr7_JPEG%252F740_c241ee990d614af3b59b8156095a305d.jpg%26type%3Db400

기본적으로 위처럼 ?x? 이렇게 가로 세로 사이즈를 넣어주는데요, 가로 또는 세로 사이즈를 생략하면 비율에 맞춰 이미지를 resize해줍니다.

100x100 사이즈로 resize를 하니 이미지의 양 옆부분이 잘려 나갔습니다. thumbor는 이미지를 resize를 할 때 먼저 지정한 사이즈와 같은 비율로 이미지를 crop합니다. 

 

thumbor가 이미지를 crop하는 알고리즘에 대해서는 여기에서 확인할 수 있습니다.

 

thumbor의 알고리즘이 아무리 좋다고 해도 이미지에 따라서 엉뚱한 곳을 crop할 수도 있는데요, 이럴 때는 alignment 값을 직접 줄 수도 있습니다. [left, center, right] 중에 하나로 가로 정렬, [top, middle, bottom]중에 하나로 세로 정렬을 선택합니다.

http://localhost:7777/unsafe/100x100/left/top/https%3A%2F%2Fsearch.pstatic.net%2Fcommon%2F%3Fsrc%3Dhttp%253A%252F%252Fcafefiles.naver.net%252F20160208_266%252Fkidho369_1454926782350UfVr7_JPEG%252F740_c241ee990d614af3b59b8156095a305d.jpg%26type%3Db400

해달 얼굴이 잘리지않고 잘 나왔네요. 짝짝짝

이렇게 직접 alignment 기준을 줄 수도 있지만 thumbor는 직접 사물이나 얼굴을 detect해서 이미지를 crop하는 기능도 가지고 있습니다. 그 기능은 아래에서 살펴보겠습니다.

 

2) detector

thumbor에서 재미있는점은 기준점을 알려주거나 좌표를 따로 찍어주지않아도 detector를 이용해서 주어진 이미지의 중요한 부분을 인식할 수 있다는 것입니다.

기본 설정에서는 detector 기능이 해제되어있는데요, config 파일만 수정하면 간단하게 활성화시킬 수 있습니다. 

 

아래처럼 thumbor-config 커맨드로 config 파일을 만들 수 있습니다. 저는 로컬에서 docker을 실행시켰기 때문에 docker bash 안에서 작업을 해주었습니다. 

❯ docker ps
CONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS              PORTS                            NAMES
daee9680cb6c        minimalcompact/thumbor   "/docker-entrypoint.…"   13 minutes ago      Up 13 minutes       8888/tcp, 0.0.0.0:7777->80/tcp   admiring_banzai


❯ docker exec -it admiring_banzai bash
root@daee9680cb6c:~# thumbor-config > ./thumbor.conf

그리고 config 파일에서 DETECTORS 변수를 찾아 주석을 해제하고 아래처럼 detector 요소를 넣어줍니다.

DETECTORS = [
    'thumbor.detectors.face_detector',
    'thumbor.detectors.feature_detector',
]

저는 face와 object detector를 넣었는데요 외에도 주로 얼굴인식과 관련된 여러가지 detector가 더 있습니다.

 

이 두 detector는 상호 배타적으로, face_detector가 얼굴을 찾았다면 feature_detector는 작동하지않습니다.

 

detector가 작동하게 하는 법 또한 간단합니다.

아래처럼 url에 smart라는 키워드를 포함해주면 됩니다.

 

이번에는 얼굴인식이 잘되나 보기 위해 인간 사진을 넣어보았습니다.

http://localhost:7777/unsafe/300x200/smart/https%3A%2F%2Fgithub.com%2Fthumbor%2Fthumbor%2Fraw%2Fmaster%2Fexample.jpg

 

이래서는 detect가 잘 되었는지 확인을 할 수 가 없는데요, url에 debug 키워드를 추가해주면 눈으로 확인이 가능합니다.

http://localhost:7777/unsafe/debug/300x200/smart/https%3A%2F%2Fgithub.com%2Fthumbor%2Fthumbor%2Fraw%2Fmaster%2Fexample.jpg

 

 

얼굴이 잘 detect 되고있네요

 

http://localhost:7777/unsafe/debug/400x400/smart/https%3A%2F%2Fwww.nectarsleep.com%2Fwp-content%2Fuploads%2F2018%2F02%2FStrange-Human-Body-Facts.jpg

이렇게 좀 복잡한 사진으로도 테스트를 해보았는데 이상한 부분을 detect하고있었습니다.

피사체가 여러개인 사진에서는 정확도가 높지않은 것 같아요. 

 

 

3. 반전

http://localhost:7777/unsafe/-0x-0/https%3A%2F%2Fsearch.pstatic.net%2Fcommon%2F%3Fsrc%3Dhttp%253A%252F%252Fcafefiles.naver.net%252F20160208_266%252Fkidho369_1454926782350UfVr7_JPEG%252F740_c241ee990d614af3b59b8156095a305d.jpg%26type%3Db400

가로, 혹은 세로 사이즈에 - 기호를 붙이면 좌우 혹은 상하 반전도 가능합니다.

 

4. crop

http://localhost:7777/unsafe/10x10:200x200/https%3A%2F%2Fsearch.pstatic.net%2Fcommon%2F%3Fsrc%3Dhttp%253A%252F%252Fcafefiles.naver.net%252F20160208_266%252Fkidho369_1454926782350UfVr7_JPEG%252F740_c241ee990d614af3b59b8156095a305d.jpg%26type%3Db400

이렇게 왼쪽 위 모서리, 오른쪽 아래 모서리의 좌표를 지정해주면 사용자가 지정한 위치, 크기로 crop이 가능합니다.

 

5. filter

 

이미지 크기 조절 외에 다양한 필터들도 제공합니다.

http://localhost:7777/unsafe/filters:blur(7)/https%3A%2F%2Fsearch.pstatic.net%2Fcommon%2F%3Fsrc%3Dhttp%253A%252F%252Fcafefiles.naver.net%252F20160208_266%252Fkidho369_1454926782350UfVr7_JPEG%252F740_c241ee990d614af3b59b8156095a305d.jpg%26type%3Db400

 

 

http://localhost:7777/unsafe/filters:blur(7):contrast(40)/https%3A%2F%2Fsearch.pstatic.net%2Fcommon%2F%3Fsrc%3Dhttp%253A%252F%252Fcafefiles.naver.net%252F20160208_266%252Fkidho369_1454926782350UfVr7_JPEG%252F740_c241ee990d614af3b59b8156095a305d.jpg%26type%3Db400

이렇게 콜론으로 구분하면 여러가지 필터를 같이 사용하는 것 또한 가능합니다. thumbor는 주어진 filter들을 순차적으로 적용해서 결과물을 만들어냅니다.

 

 

 

3. 장단점

저희 회사에서는 내부적으로 이미지 resizing을 할 때 imgproxy라는 go lang 오픈소스를 사용하는데요,

마침 어떤 친절한 개발자가 imgproxy와 그 외에 비슷한 서비스들을 비교해놓은 표가 있었습니다.

 

gist.github.com/DarthSim/9d971d2859f3714a29cf8ce094b3fc55

imgproxy vs alternatives benchmark

 

이 사람 실험에 따르면 thumbor는 imgproxy에 비해서 처리속도나 메모리 누수면에서는 뒤지고 있었습니다. 하지만 필터나 detection 등 더 다양한 기능들을 제공한다는 장점도 있습니다. 또 내부 소스 코드가 요즘 유행하는 언어인 python이라는 점도 큰 장점이라고 생각 되네요. 저도 이렇게 간단하게나마 thumbor를 사용해보니 사용하기도 굉장히 쉽고 기능이 다양해서 프로젝트에 활용하려고 한다면 쉽게 적용 할 수 있을 것 같습니다.