실버라이트 2에서 가능 눈에 들어오는 기능이 바로 DeepZoom이죠. 지난번 8회 훈스닷넷 정기세미나에서 DeepZoom 데모를 보셨습니다. 특히 공도님의 데모에서는 몇 분 만에 뚝딱 만들었던 기억이 나네요. 우리도 한번 해보죠.
DeepZoom 강좌 1. Deep Zoom Composer를 이용하여 SeeDragon이미지(.sdi) 만들기
DeepZoom 강좌 2. 실버라이트의 <MultiScaleImage> 컨트롤 사용
DeepZoom 강좌 3. Deep Zoom 마우스로 컨트롤 하기
DeepZoom 강좌 4. Deep Zoom 마우스 컨트롤 코드 살펴보기
DeepZoom 강좌 1. Deep Zoom Composer를 이용하여 .sdi 파일 만들기
Deep Zoom을 사용한 데모를 만들기 위해서 우선 큰이미지를 찾다가 적당한 것을 발견했습니다. 바로 Silverlight 2 Developer Poster. 게다가 훈스닷넷 자유게시판에 깜지님이 벌써 올려주셨네요. 우선 여기에서 JPG로 된 Silverlight 2 Developer Poster를 다운로드 받으세요. JPG 파일이 5.8MB 용량에 6750x4200 크기입니다. 다른 이미지 뷰어로 보면 문제 없지만 Deep Zoom으로 실버라이트 응용프로그램을 만들어서 보면 효과적일 것 같습니다. 이미 만들어서 웹에 올려져 있네요. 그래도 한번 만들어 보죠.
우선 Deep Zoom Composer를 이용해서 .sdi (SeaDragon Image)파일들을 만들어야 합니다. Deep Zoom Composer는 여기에서 다운로드 하셔서 설치하세요.
우선 Deep Zoom Composer를 실행해서 New Project를 눌러 "SilverlightDeveoperPoster" 라는 프로젝트를 만듭니다.
Import 탭에서 "Add Image.." 버튼을 누릅니다. 파일 선택 대화상자에서 아까 다운받은 "Silverlight2PosterMIX08.jpg"파일을 선택합니다. 그러면 Import Progress 대화상자가 뜨면서 이미지를 로딩합니다. 우리는 하나의 큰 이미지를 이용할 것이기 때문에 이미지 Import는 마치고 Compose 탭으로 이동하겠습니다. 만약 다른 이미지를 사용하시려면 여기서 이미지를 Import 해주세요.
Compose 탭에서는 가져온 이미지를 배치합니다. 줌인 해서 이미지를 배치하기도 하고 옆으로 나란히 배치하기도 합니다. 우리는 하나의 이미지를 전체 배경으로 놓을 것입니다. 오른쪽의 All Images에서 아까 가져온 이미지를 드래그해서 가운데에 놓습니다. 그리고 돋보기 모양의 "Fit to Screen"을 눌러서 스크린 전체에 꽉 채웁니다.
이제 Export 할 차례입니다. Export 탭으로 이동해서 오른쪽 Setting. Name에 "Silverlight2DeloperPoster"라고 입력하고 Export 버튼을 누릅니다.
끝났습니다. 결과물을 한번 살펴보도록 하지요. 어떻게 만들어져 있을까? Export 한 폴더를 찾아서 이동합니다. "silverlight2deloperposter" 폴더로 이동해 보겠습니다. 1,2,3,4... 이름의 폴더에 사진들이 들어 있는데요. 이 사진들을 보시면 '아!' 하는 깨달음이 오실꺼에요.
Deep Zoom 설명할 때 큰 이미지를 필요한 만큼만 가져온다고 설명을 하는데 이 그림 조각들을 보면 이해가 가실껍니다. 작은 이미지 조각들이 있고 그 용량을 보면 많아야 40KB이고 대부분 20KB 정도 입니다. 이런 작은 조각 그림들을 적당한 시기에 빠르게 로딩해서 보여주는 것이 기술이겠지요.
이제 Deep Zoom Composer 작업은 끝났습니다. "silverlight2deloperposter"의 위치는 잘 기억해 주세요. 다음 강좌로 넘어가겠습니다.
참고자료.
Deep Zoom Composer의 더 자세한 사용법은
Deep Zoom Composer User Guide 를 참조하시기 바랍니다.
오일석