1. 이미지 썸네일 생성에 관해서
@river 변용훈
1 / 19

2. 이미지 더 중요해 지다.
이미지 품질 , 네트웍 트래픽
모바일 사용자
반응형 이미지
레티나 디스플레이
글로벌 서비스 고려
우리나라의 네트웍 상황은 특별한 경우다.
CDN은 비싸다
2 / 19

3. thumbnail
3 / 19

4. # 99designs
# 미리생성
PHP 웹 어플안에 이미지 처리 로직이 섞여 있다.
구조가 복잡하다.
미리 정해놓은 크기의 이미지만 가능.
출처: 99designs.com blog
4 / 19

5. # 99designs
# 변경후
이미지 처리 분리 ‑> 전용 서버 ‑> 공통으로 사용 가능
다양한 이미지 크기에 대응 가능
HDD의 효율적 사용
원보만 잘 관리하면 된다.
출처: 99designs.com blog
5 / 19

6. http://thumbor.org/
https://github.com/thumbor/thumbor
6 / 19

7. # thumbor 이미지 처리 서버
이미지 캐싱 서버
Restful URL 제공
python
tornado 웹서버 내장
http://<thumbor-server>
/300x200
/smart
/s.glbimg.com/bb/f/original/2011/03/24/picture.jpg
7 / 19

8. # 기능
# resize
http://www.google.fr/images/srpr/logo11w.png (538x190)
http://is1.ecplaza.app/unsafe/200x/www.google.fr/images/srpr/logo11w.png (200x71)
http://is1.ecplaza.app/unsafe/200x200/www.google.fr/images/srpr/logo11w.png (200x200)
8 / 19

9. # 기능
# resize
# filter
.../unsafe/filters:brightness(10):contrast(30)/http://...
.../unsafe/filters:grayscale()/http://...
.../filters:watermark(test.jpg,‑10,‑10,30)/http://...
9 / 19

10. # 기능
# resize
# filter
# facial
detect
.../unsafe/debug/smart/https://...
.../unsafe/500x100/smart/https://...
10 / 19

11. # 기능
# resize
# filter
# facial
detect
# feature
detect
.../unsafe/debug/smart/https://...
.../unsafe/300x300/smart/https://...
11 / 19

12. # 기능
# resize
# filter
# facial
detect
# feature
detect
# 이미지 최적
화
브라우저 webp 지원 여부 감지. 지원하면 webp형식으로 이
미지 생성
jpegtran, pngcrush 등을 이용한 이미지 최적화
12 / 19

13. 시스템 구성
13 / 19

14. # 저장소 storage와 result storage
expire 설정 가능
14 / 19

15. # 시스템 구성
#
supervisord
프로그램을 데몬 형태로 돌림
프로세스 모니터링
스케일링
thumbor를 가동하기 위해 사용
[program:thumbor]
command=/usr/bin/thumbor --ip=127.0.0.1 --port=800%(process_num)s
--conf=/etc/thumbor.conf
process_name=thumbor800%(process_num)s
numprocs=4
autostart=true
autorestart=true
startretries=3
stopsignal=TERM
; Output logs for each of our processes
stdout_logfile=/var/log/thumbor800%(process_num)s.stdout.log
stdout_logfile_maxbytes=1MB
stdout_logfile_backups=10
stderr_logfile=/var/log/thumbor800%(process_num)s.stderr.log
stderr_logfile_maxbytes=1MB
stderr_logfile_backups=10
15 / 19

16. # 시스템 구성
#
supervisord
# nginx
(varnish)
upstream thumbor {
server 127.0.0.1:8000;
server 127.0.0.1:8001;
server 127.0.0.1:8002;
server 127.0.0.1:8003;
}
server {
listen 80;
server_name is1.ecplaza.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header HOST $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://thumbor;
proxy_redirect off;
}
}
16 / 19

17. 보안
아무나 URL 조작을 통해서 서비스를 이용하면 안된다.
SECURITY_KEY, HMAC-SHA1
http://thumbor/unsafe/300x200/smart/path/to/image.jpg
http://thumbor/1234567890123456789012345678/300x200/smart/path/to/image.jpg
17 / 19

18. 라이브러리URL 생성 지원 목적
PHP
Phumbor
Phumbor for Laravel
Java
Pollexor
18 / 19

19. 결론
도입하고 매우 만족 ㅎㅎ
19 / 19