먼저 세계 일류 프론트엔드 프로그래머들이 구글 페이지를 어떻게 만들었는지 뜯어 봅시다.

소스보기를 눌러 내용을 보기 편한 텍스트 편집기(하일라이팅 필수)으로 엽니다. 찬찬히 뜯어봅니다.

Front-end 웹서버 최적화로 자바스크립트에 minimized가 되어있음을 볼 수 있습니다. 덧붙여 설명하자면 변수명을 짧게 줄이고 공백을 없애는 등 웹서버와 통신량을 줄여 최적화합니다. 컴파일러의 preprocessor와 같은 역할을 합니다.

조금 가독성이 떨어져서 시간이 오래걸리지만 제일 먼저 눈에 띄는 건 GET parameter들을 manipulation 하는 함수들이 보이는군요.

- - - 중 략 - - -

이미지들을 보기좋게 정리하는 로직은 양이 많은데다가 minimized가 되어있으니 번역기가 없으면 보기가 너무 어렵네요.

구글 이미지에서 브라우저 창 크기를 조절해가면서 로직을 추측해 봅니다. 원시적인 Reverse Engineering이라고도 할 수 있겠네요.

Thumbnail 알고리즘은 Joan Piedra의 jQuery Thumbs(MIT license)을 써보도록 합니다.  단, 아래의 사항을 주의합시다.

- 이미지의 사이즈를 모르는 상태 즉 openAPI 등으로 가져오는 경우는 jQuery Thumbs 소스를 수정해야합니다. -

위 캡처 사진에서 보듯이 저는 일촌 openAPI를 사용하여 대문사진을 보여주고 있는데, 구글 이미지와는 다르게 일정한 틀에 꽉찬 화면을 보여주는 것을 목표로 최적화를 진행하였습니다.

로직 중 일부는 다음과 같습니다.

가로 세로 비율이 클 경우는 큰 길이 맞춤을, 가로 세로 비율이 비슷할 경우는 작은 길이 맞춤으로 꽉 찬 이미지를 보여주도록 하였습니다.

강제로 사이즈를 조절하면 늘이기 또는 줄인 현상이 나타나는데 이러한 로직을 쓸 경우 가로, 세로 비율을 맞추면서 썸네일 이미지를 적절히 표현합니다.

끝.