먼저 세계 일류 프론트엔드 프로그래머들이 구글 페이지를 어떻게 만들었는지 뜯어 봅시다. 소스보기를 눌러 내용을 보기 편한 텍스트 편집기(하일라이팅 필수)으로 엽니다. 찬찬히 뜯어봅니다. Front-end 웹서버 최적화로 자바스크립트에 minimized가 되어있음을 볼 수 있습니다. 덧붙여 설명하자면 변수명을 짧게 줄이고 공백을 없애는 등 웹서버와 통신량을 줄여 최적화합니다. 컴파일러의 preprocessor와 같은 역할을 합니다. 조금 가독성이 떨어져서 시간이 오래걸리지만 제일 먼저 눈에 띄는 건 GET parameter들을 manipulation 하는 함수들이 보이는군요. - - - 중 략 - - - 이미지들을 보기좋게 정리하는 로직은 양이 많은데다가 minimized가 되어있으니 번역기가 없으면 보기가 너무 어렵네요. 구글 이미지에서 브라우저 창 크기를 조절해가면서 로직을 추측해 봅니다. 원시적인 Reverse Engineering이라고도 할 수 있겠네요. Thumbnail 알고리즘은 Joan Piedra의 jQuery Thumbs(MIT license)을 써보도록 합니다. 단, 아래의 사항을 주의합시다. - 이미지의 사이즈를 모르는 상태 즉 openAPI 등으로 가져오는 경우는 jQuery Thumbs 소스를 수정해야합니다. - 위 캡처 사진에서 보듯이 저는 일촌 openAPI를 사용하여 대문사진을 보여주고 있는데, 구글 이미지와는 다르게 일정한 틀에 꽉찬 화면을 보여주는 것을 목표로 최적화를 진행하였습니다. 로직 중 일부는 다음과 같습니다. 가로 세로 비율이 클 경우는 큰 길이 맞춤을, 가로 세로 비율이 비슷할 경우는 작은 길이 맞춤으로 꽉 찬 이미지를 보여주도록 하였습니다. 강제로 사이즈를 조절하면 늘이기 또는 줄인 현상이 나타나는데 이러한 로직을 쓸 경우 가로, 세로 비율을 맞추면서 썸네일 이미지를 적절히 표현합니다. 끝.
Google Image, jQuery로 흉내내기
먼저 세계 일류 프론트엔드 프로그래머들이 구글 페이지를 어떻게 만들었는지 뜯어 봅시다.
소스보기를 눌러 내용을 보기 편한 텍스트 편집기(하일라이팅 필수)으로 엽니다. 찬찬히 뜯어봅니다.
Front-end 웹서버 최적화로 자바스크립트에 minimized가 되어있음을 볼 수 있습니다. 덧붙여 설명하자면 변수명을 짧게 줄이고 공백을 없애는 등 웹서버와 통신량을 줄여 최적화합니다. 컴파일러의 preprocessor와 같은 역할을 합니다.
조금 가독성이 떨어져서 시간이 오래걸리지만 제일 먼저 눈에 띄는 건 GET parameter들을 manipulation 하는 함수들이 보이는군요.
- - - 중 략 - - -
이미지들을 보기좋게 정리하는 로직은 양이 많은데다가 minimized가 되어있으니 번역기가 없으면 보기가 너무 어렵네요.
구글 이미지에서 브라우저 창 크기를 조절해가면서 로직을 추측해 봅니다. 원시적인 Reverse Engineering이라고도 할 수 있겠네요.
Thumbnail 알고리즘은 Joan Piedra의 jQuery Thumbs(MIT license)을 써보도록 합니다. 단, 아래의 사항을 주의합시다.
- 이미지의 사이즈를 모르는 상태 즉 openAPI 등으로 가져오는 경우는 jQuery Thumbs 소스를 수정해야합니다. -
위 캡처 사진에서 보듯이 저는 일촌 openAPI를 사용하여 대문사진을 보여주고 있는데, 구글 이미지와는 다르게 일정한 틀에 꽉찬 화면을 보여주는 것을 목표로 최적화를 진행하였습니다.
로직 중 일부는 다음과 같습니다.
가로 세로 비율이 클 경우는 큰 길이 맞춤을, 가로 세로 비율이 비슷할 경우는 작은 길이 맞춤으로 꽉 찬 이미지를 보여주도록 하였습니다.
강제로 사이즈를 조절하면 늘이기 또는 줄인 현상이 나타나는데 이러한 로직을 쓸 경우 가로, 세로 비율을 맞추면서 썸네일 이미지를 적절히 표현합니다.
끝.