Image Pyramid

Introduction

아주 오래 전 플렉스와 실버라이트가 난리를 쳤을 때 난 플렉스를 공부 했었다.

그 때 훈스닷넷에서 하는 실버라이트 세미나를 갔었는데(왜 플랙스 세미나를 안가고...) 그 때 발표자(?)가 발표를 했던게 실버라이트의 이미지 피라미드였다.

그 때.. 난 "아 참 조쿠나~" 라고 생각 해놨다가 꽤 오랜 시간이 지난 지금 생각이 났다. ㅋㅋㅋ

Fundamental

고용량의 큰 이미지가 있다. 이 이미지를 브라우저에서 본다고 하자.

그러면 실제로 화면에 보여지는 이미지의 영역은 얼마 안될 것이다.

하지만 큰 이미지를 한번에 가져오기 때문에 네트워크 낭비가 심하다.

이 문제를 해결하기 위해서 이미지를 잘게 자른 후 화면(브라우저)에 보이는 영역만 불러오는 것이다!

이것 저것 찾아보니까 이미지 피라미드에 대한 문서들이 있었다.

이미지 저장 시에 참고한 그림는 아래와 같다. 아래 그림에 영감을 받아서 만들어 보았다.

Project

데모 : http://antop.nerv.kr/image.pyramid/

데이터베이스가 서버에는 MySQL이고, 샘플은 Derby 이다.

이 ERD가 자바에서는 아래 그림과 같이 클래스 구조를 가진다. ORM!

jQuery Plugin

이미지를 저장하는 부분보다 보여주는 부분이 더 개발 비율이 많다. 화면에 보여주는데 사용한 제이쿼리 플러그인은 아래와 같다.

jQuery Form Plugin - AJAX 로 폼 전송이나 파일 업로드를 할 수 있는 플러그인

jQuery Upload File - jQuery Form Plugin 을 이용하여 파일 업로드를 하는데 상태바를 지원해준다.

jQuery Mouse Wheel Plugin - 마우스 휠이 굴러가는 이벤트를 감지할 수 있게 해준다.

jQuery Schedule - 스케쥴링을 가능하게 하는 해준다. (Quartz 같은거...)

jQuery Dragscrollable (jQuery 홈페이지 개편되면서 플러그인 링크 죽음) - 마우스를 끌면 화면을 스크롤 해줌.

perfect-scrollbar : 가상 스크롤바를 달아준다.

Element Onscreen Visibility - 선택한 태그(selector)가 화면에 보이고 있는 태그인지를 판별한다.

이제 힘들어서 못쓰겠네 후.... 알아서 ㄱㄱ 질문은 받음 -_-/

↑ 이클립스 프로젝트 소스 파일 (메이븐)

↑ WAR 파일 (7-zip 분할)

Brain to Blog