Cloud Computing On Demand

웹 사이트를 만들때 가장 많이 손이 가는 부분이 어딜까요? 아마도 동일한 원본 이미지를 가지고 다양한 사이즈로 변조하는 작업에 많은 공수가 들어가실 겁니다. 이는 비단 이미지에 대한 변조 공수 뿐만 아니라 이후 유지보수와 관리의 관점에서도 많은 이슈를 낳곤 합니다. 반응형 웹 시대에 미디어 쿼리를 이용하여 뷰포트에 맞는 이미지를 내려주는 것은 필수이다보니 손을 놓고 있을 수도 없는 계륵(?)처럼 느껴지시는 분도 많을 것 같습니다. 물론 아카마이(Akamai)와 같은 컨텐츠 전송 네트워크 사업자에서 제공하는 Front End Optimization 기술을 이용하면 편리하게 실시간 변환이 가능하지만 간단하게 소규모로 서비스를 기획하는 단계에서는 이 역시 쉬운 선택이 되기는 힘듭니다.

오늘 소개해 드리는 TinyPNG 라는 서비스는 API 기반으로 실시간 PNG/JPG 이미지에 대한 가공을 제공하는 곳으로 HTTP 기반의 웹 서비스이다보니 사용하기도 편리하고 비용도 그리 비싸지 않아 연동에 대한 설계만 잘 해두면 쏠쏠하게 이용해볼 수 있는 서비스가 될 것 같습니다. 첫 500개의 이미지 변환에 대해서는 별도 비용이 발생하지 않고 간단히 HTTP 기본 인증 (Basic Authentication) 으로 구성되어 curl 명령만으로도 쉽게 테스트 해보실 수 있습니다. 이마저 번거로운 분들을 위해 간단히 계정을 만들어 시험을 해봤습니다.

귀엽게 생긴 곰 녀석(?)이 맥북을 들고 작업하는 모습이 인상적인 TinyPNG 의 첫 페이지 입니다. 화면의 하늘색 박스에 이름과 이메일 주소만 넣으면 바로 API Key 를 발급받을 수 있는 링크를 메일로 전송해줍니다. 메일로 전달받은 링크를 클릭하면 인증이 완료되며 API Key 와 무료로 사용할 수 있는 이미지 갯수 등이 표시된 페이지로 연결됩니다. 물론 상용으로 등록하고 싶은 분들을 위해 결제정보를 입력할 수 있는 화면도 친절하게 연결되어 있습니다.

화면 가운데 커다랗게 표시된 API Key 는 Basic Authentication 방식의 해싱 값으로 사용될 데이터입니다. ID / PWD 를 이용하지 않고 바로 해싱된 값이 있다는 것은 그냥 헤더에 해당 값이 들어가면 된다는 이야기와 동일하겠죠? 이제 간단하게 curl 을 이용해서 변환을 테스트 해보겠습니다. 왠지 JPEG 는 스펙상 사이즈 조절 등이 쉬울 것 같아 일부러 PNG 파일을 하나 받아서 테스트를 해봤습니다. 잡스옹, 저의 모르모트가 되어주실거죠? ㅇ9응??)

https://api.tinify.com/shrink 주소로 변환할 파일을 업로딩 하면 TinyPNG 에서 파일을 변조한 뒤 변환된 정보와 다운로드 받을 수 있는 경로정보를 JSON 형태의 응답으로 받게 됩니다. 이유는 알 수 없지만 첫번째 리사이즈 시도의 결과물은 두번째 리사이즈 파일과 용량도 동일하고 모든 조건이 같았는데 이상하게 열리지 않더군요. PNG 헤더 등을 점검하는 것은 다소 귀찮아 다시 curl 을 통해 동일한 용량의 동일한 파일을 다운로드 받아 정상적으로 용량이 작게 변경된 것을 확인했습니다. 글을 적으면서 보니 첫번째 시도는 129942 바이트로 JSON 에 기술된 129526 바이트보다 큰 파일이 저장 되었네요. 다시 디렉토리 조회를 해보면 129526 바이트의 정상적인 파일이 내려온 것이 확인됩니다. API 이용시 2차 검증용으로 용량에 대한 확인을 하면 확실할 것 같네요!

단순히 용량을 줄이는 것 이외에 사이즈의 조절 (Crop 등) 에 관한 여러가지 API 옵션이 제공되고 있으며 API 호출시 JSON 형태로 구성하여 Body 영역에 전달하면 됩니다. GET 요청을 하면서 Body 에 정보를 담아 보내는 것이 표준에는 어긋나는 것 같습니다만 일단 TinyPNG 에서는 정상적으로 응답하고 있으니 참고하시기 바랍니다! 이미지 변조가 많은 계절, TInyPNG 등의 서비스로 간단한 이미지 변환은 쉽게 해보시는 것도 관리, 유지보수를 위한 좋은 선택이 될 것 같네요!

최근 멀티 폼팩터 디바이스들이 사용자들에 의해 사용되면서 웹 사이트 개발, 서비스 하는 분들의 고민이 참 많습니다. 웹 사이트는 결국 사용자 브라우저 입장에서는 HTML 과 CSS 그리고 여러가지의 Resource File 로 구성된 집합체입니다. 웹 사이트를 제대로 최적화하기 위해서는 내 서비스가 가지고 있는 약점이 무엇이고 어떻게 개선할 수 있을지를 찾아내는 것이 중요하다 하겠습니다.

슬라이드 쉐어에서 발견한 자바까페(JavaCafe) 김흥래 님이 정리해서 올려주신 슬라이드 자료는 (13회 자바 개발자 컨퍼런스에서 사용된 자료인 것 같습니다) 그동안 본 자료들 중에서도 가장 쉽고 임팩트 있게 설명해주신 자료라 생각되어 공유해 봅니다. 슬라이드만 공유되어 있어서 실제 세션 발표하시면서 해주셨을 이야기가 없다는게 조금 아쉬운 부분이네요! 웹 관련 개발 업무를 하시는 분들은 필독하시고 사이사이에 간략히 설명된 내용들을 찾고 공부하실 필요가 있습니다! 

개인적인 친분은 없지만 자료 공유해주신 김흥래님께 감사인사를 드립니다 ^^