JSPARK

지난 주 금요일에 있었던 미래 웹 기술 포럼 에서 찍은 100장의 사진을 DeepZoomPix에 올려보았습니다.
많은 양의 사진들을 쉽게 확대해서 볼 수 있는 Deep Zoom을 체험해 보세요 (우측 상단의 전체화면 보턴!)

 

http://deepzoompix.com/Album.aspx?alias=jspark&album=2.

오늘 오전에 부분 일식 은 잘 보셨나요? 저는 실제로 보지는 못하고, 나중에 온라인을 통해 사진으로 봤네요. 아래는 Deep Moon 이라고 이름 붙여진, Silverlight 의 Deep Zoom 기술을 이용해서 많은 양의 달과 관련한 사진을 조합해서 만들어진 애플리케이션 입니다.

 

http://www.shoothill.com/deepmoon/

 

이전에 포스팅한 마이클 잭슨 딥줌 모자이크 이미지와 더불어서 사진들을 이용해서 모자이크를 하는 데 있어서 Deep Zoom 기술이 많이 활용되고 있네요. 기념 사이트 등에 활용하면 좋을 듯... :)

추가 - 지구인의 달착륙 기념으로 아폴로 우주선 관련 사진이 Photosynth 에 올라간 것들이 있군요. 역시나 WOW 입니다.
http://photosynth.net/view.aspx?cid=edbec7b3-6d03-48f5-8c37-a0c3ec49cae4

언젠가 라이오 프로에서 영어에 익숙하지 않은 분이 발음으로 ‘미카엘 작손’(?) 이 얼마 전에 세상을 떠났습니다. 이 분의 사진들을 만장 이상 모은 사이트가 Silverlight DeepZoom 기술로 런칭 되어서 소개합니다. 사진들이 아주 고화질은 아니지만 조금씩 보시다 보면 시간 가는 줄 모를 수도… 

 

http://www.msn.michaeljackson.shoothill.com/

 

PS. 기술은 단지 도구 일뿐 그 도구를 어떤 컨텐츠로 어떻게 응용하는지가 중요한 것 같네요.(참고로 만장은 가로 세로 길이를 가지고 계산 해봤다는…)

http://deepzoompix.com/

 

사용자가 올린 사진을 DeepZoom 형태로 볼 수 있었던 Live Lab의 PhotoZoom 서비스가 DeepZoomPix라는 형태로 업그레이드 되었습니다. 사진을 보는 여러 가지 모드들이 있으니 여러 장의 사진을 올려서 친구들과 공유하고 싶을 때 요긴하게 사용할 수 있을 것 같습니다. 레이아웃을 변경해서 보는 것은 매우 wow 하며, show 형태로 보는 것도 멍하게 있을 때 좋을 것 같고요 :)

Deep Zoom 기술을 통해서 Silverlight 가 가진 가능성들을 확인한 분들도 있을 것 같습니다. 그리고 이 같은 Deep Zoom 기술을 내 서비스에 적용해 보고 싶다는 생각을 하시는 분들도 많을 것 같고요.

 

Deep Zoom 과 관련한 것을 구현 하기 위해서는 어떤 것들을 보아야 하는지, 해당하는 세션 및 문서 들을 좀 정리해 보았습니다. 이 외에도 아시는 관련 자료가 있다면 댓 글 등으로 알려주시면 추가 하도록 하겠습니다.

 

Deep Zoom : Silverlight in MSDN Library
:한글 문서이며, Deep Zoom 과 관련한 기본 내용

http://msdn.microsoft.com/ko-kr/library/cc645050(VS.95).aspx

 

Deep Zoom - Quickstarts in Silverlight.net
:Deep Zoom을 처음 만들어 보기 위한 내용

http://silverlight.net/quickstarts/deepzoom.aspx

 

GETTING STARTED WITH THE DEEPZOOM COMPOSER
:Deep Zoom Composer를 이용하는 방법 설명 영상

http://silverlight.net/learn/learnvideo.aspx?video=66662

 

GETTING STARTED WITH MULTISCALEIMAGE
:멀티스케일 이미지에 대한 이해

http://silverlight.net/learn/learnvideo.aspx?video=66663

 

HARD ROCK: BEHIND THE MUSIC WITH DEEP ZOOM
:하드락 카페에서 Deep Zoom을 구현한 사례 설명

http://silverlight.net/learn/learnvideo.aspx?video=43773

 

Deep Zoom++ : Build Dynamic Deep Zoom Applications with Open Source
:오픈 소스로 동적 Deep Zoom 애플리케이션 만들기 영상

http://videos.visitmix.com/MIX09/C07F

 

Jellyfish Deep Zoom
:Deep Zoom Composing을 자동화하기 위한 오픈 소스 프로젝트

http://jellyfishdz.codeplex.com/

작년 MIX08 발표에서 가장 인상에 강하게 남았던 것은 Hardrockcafe 사이트의 고화질 사진들을 DeepZoom 으로 볼 수 있게 구현한 Hard Rock Memorabilia가 아니었나 생각 합니다. 이번 MIX09 에서 발표 된 것 중에 가장 인상에 남는 것은 무엇이었을까요? (아쉽게도 성인 용이어서 키 노트에는 간단히 언급만 되었지만) 제가 보기에는 아래 플레이보이 잡지 온라인 버전 이라고 생각을 합니다.

 

어릴 때 플레이보이를 포함한 성인 잡지는 소년 들에게 야릇한 환상을 주었다고 생각 합니다. 제 중학교 시절에만 해도 쉬는 시간에 친구 자리에 우루루 몰려가서 무엇인가를 보던 기억이 새록새록 나는 것 같네요. 시간이 흐른 걸 실감케 하듯이 이번 MIX09 에서는 1954년부터 2006년까지의 무려 53 권의 플레이보이 잡지를 온라인에서 모두 무료로 감상 할 수 있도록 하고 있습니다.

 

플레이보이 잡지 온라인 보러 가기

 

 

 

(왼편  – 표지 별로 나열, 오른편 – 표지 선택 시에 나오는 화면)

 

하드락 카페에서 구현 된 딥줌이 Silverlight로 사진을 감상하는데 최적화 된 기술이었다면, 이번 플레이보이에 구현된 딥줌은 잡지나 신문과 같은 매체를 보는데 최적화 된 기술이라고 생각 합니다. 기존에 잡지를 온라인에서 서비스할 때 단순히 사진으로 구성되어서 한 장, 한 장 확대하며 보는 수준이 아니라, 실버라이트 기술과 함께 멋진 네비게이션 UX 만들어서 실제 잡지를 보는 느낌을 주고 있습니다.

 

플레이보이 온라인을 보시면 기존의 실버라이트 딥줌으로 구성된 사진을 볼 때와 다르게 마우스의 휠은 확대 축소가 아닌 화면의 상하를 이동하는 용도로 쓰입니다. 바로 일반적인 인터넷을 브라우징 할때와 동일하게 말이죠. 딥줌에서처럼 사진을 확대할 때 마우스 휠로 확대하고, 원하는 위치로 마우스를 드래그 앤 드랍하는 것이 아니기 때문에 이런 경우에는 훨씬 더 편리하게 잡지의 내용 들을 보실 수 있습니다.

 

  

 

(왼편 – 화면을 가장 확대한 모습, 오른편 – 현재 위치의 링크를 복사)

 

그리고 마우스 왼편 클릭의 기능의 단순화 부분도 볼만 한데요, 클릭하는 횟수에 따라서 잡지를 양면을 펼친 화면에서 한쪽 화면으로 그리고 더욱 확대되는 형태로 화면 UI가 자연스럽게 변경 되는 것이 실제 사람 눈으로 책을 펼치고 읽어 들어가는 착각을 느끼게 할 정도 입니다. 물론 마우스 드래그 앤 드랍 기능 역시 직관적으로 다른 페이지로 이동할 수 있게 하고, 아래 쪽의 네비게이션 바를 통해서 페이지 단위로 빠른 이동도 가능 합니다. 또한, 링크 버튼을 통해서 현재 보는 위치의 정보를 외부에 그대로 전달할 수도 있답니다.(이 기능 역시 주목할만한...)

 

끝으로 왼편상단에는 현재 몇 년도, 어떤 달 잡지인지 그리고 몇 번째 페이지인지를 나타내주고 있으며, 우측 상단에는 해당 월의 목차 보기와 더불어 강력한 검색기능을 제공 하고 있습니다. 검색을 하면 해당하는 문구가 있는 잡지의 위치를 검색해주고, 클릭하면 바로 그 위치로 이동 할 수 있는데요, 기존 딥줌이 고화질 이미지에 대해서 검색 부분은 간단히 태그 정도로 처리했던 것에서 한층 더 나아가 본문의 글자들과 검색이 가능하게 되어서 사용자가 찾고자 하는 내용들을 바로 바로 검색할 수 있게 해줍니다.

 

 

 

(왼편 – 목차 보기, 오른편 – 검색한 결과를 보여주기)

 

위의 편리한 네비게이션 방식과 이처럼 멋진(?) 컨텐츠가 합쳐져서 저는 한참 동안 모니터 화면을 바라볼 수 밖에 없었답니다. 요즘 인터넷 상에는 손 쉽게 구할 수 있는 성인용 영상 자료들도 많이 있지만, 잡지 만이 갖고 있는 매력과 예전의 향수를 온라인 상에서 다시금 일깨워준 이 실버라이트 애플리케이션에 깊은 찬사를 보냅니다. 참, 성인이 아니신 분은 나중에 … ㅎ

저는 지하철로 퇴근을 하지는 않지만, 가끔 퇴근 후 지하철을 타고 약속 장소로 가거나 할때 지하철에서 석간 신문을 보곤 합니다. 사람들로 북적거리는 지하철에서 선반(?) 위에 놓여있는 신문 하나가 굉장히 지루함이나 피곤함을 달래 줄 때가 있지요. ㅎ

 

오늘 말씀 드리려고 하는 것은 실버라이트 딥줌 기술로 서비스를 하고 있는 석간 CITY 신문의 온라인 페이지 입니다. 아래 스크린 샷을 보시면 확인을 하실 수가 있으며, 딥줌의 특징 처럼 많은 양의 고화질 사진들을 한눈에 보고, 쉽게 확대 축소가 가능합니다.

 

http://www.clubcity.kr/news/photo.asp

 

이 서비스는 각각의 사진들을 일일이 컴포저를 통해서 딥줌 가능 컨텐츠를 생성하는 것이 아니라, 서버쪽의 서비스를 통해서 자동화 했다고 하며, 특정 사진을 일정 크기 이상 확대했을때 그 사진에 대한 설명(ISO감도 같은)도 나오게 되는 점도 눈여겨 볼 만합니다. (위 사진은 조금 지난 영화지만, 아내가 결혼했다 기자 간담회 사진인 듯 하네요)

 

참, 위 서비스는 실버라이트 MVP 분도 속한 더블가이에서 만들었고요, 암튼 새로운 기술이 나오고 그것이 시장에 채택에 되기 까지는 시간이 필요한데요, 실버라이트 기술에 있어서 그런 시간의 간격이 더 줄어들고 있는 느낌입니다.

Silverlight에서 이미지를 확대하는 기술인 딥줌 기술을 다양하게 적용하는 사례가 많이 있는데요, 이번에는 제목 처럼 좀 더 생동감 있는 형태로 구현한 Deep Zoom 사례를 소개하려고 합니다.

가까운 이웃나라 일본의 사진 앨범 사이트에서 구축한 사례이며, 마우스가 사진들 위에 올라갔을때 제목에 쓴 것처럼 살아 숨쉬는 Deep Zoom을 보실 수가 있습니다.



여기를 클릭하시면 직접 가서 보실 수 있습니다.(본래 사이트는 여기)

또한 Slide Show 기능이 있어서 한장씩 자동으로 넘어가면서 보는 것이나 Theme List 를 통해서 원하는 사진만을 Highlight 해주는 기능들은 Deep Zoom을 잘 활용한 사례라고 생각이 됩니다. Hardrock 카페 사례에서 처럼 확대했을때 그 사진에 대한 간단한 설명이 나오는 것도 눈여겨 볼만하고요. 살아 숨쉬다(?) 보니 실제 네비게이션 부분에서 조금 정신없는 감도 없지 않아 있네요.

끝으로 무엇을 만들던지 간에 컨텐츠가 좋으면 그 결과물이 훨씬 더 빛을 발하는 것 같습니다. 앞으로 좋은 컨텐츠(예를 들면 멋진 사진들 혹은 고화질 음반 커버 등) 들을 가지고도 다양하고 멋진 Deep Zoom 결과물들이 나오면 좋겠습니다.

Silverlight Showcase에 새로 올라온 사이트들을 보다가 좀 아니다 싶은 것들 중에서 간혹 굉장히 인상적인 것들을 발견할 때도 있습니다. 지금 소개하려고 하는 Darimeya라는 사이트는 그 인상적인 것 중의 하나인데요, 사실 쓰인 기술들이 새롭다 싶은 것들은 없지만, 기존에 알려진 Silverlight 기술들을 굉장히 적절하게 사용하고 있습니다. 또한 디자인 감각(?)도 있는 것 같다는 생각이 드는데요, 새소리로 이루어진 배경음악부터가 예사롭지가 않은 사이트 입니다.

쇼핑몰이기 때문에 메뉴 중에 Shop을 선택하시면 위의 스크린샷에서 처럼 여성용 옷들이 나오게 되는데요, 우선 좌우의 화살표를 이용한 네비게이션 용 애니메이션이 굉장히 부드럽게 구현이 되어져 있으며, 왼쪽 윗부분의 검색도 첫글자만 입력을 해도 해당하는 옷만 나온다던지 하는 편리함을 제공합니다.

그리고 몇번 소개해 드린 Silverlight 딥줌 기술이 옷에 구현이 잘 되어져 있습니다. 쇼핑몰에 딥줌 기술이 국내에도 머지않아 구현될 것으로 생각하는데요, 여기에서는 그렇게 약간 소심하게 딥줌 기술을 구현했습니다.(왜 소심한지는 실제로 한번 보시길 추천) 구매 버튼을 누르면 장바구니로 이동되는데요, 장비구니 구성도 좋은 것 같으며 실제 구매는 Live계정과 연동되어 있습니다.

추가로 Book을 선택하시면 많이 보셨을 수도 있는 책 넘기기 효과가 구현되어져 있는데요, 간단하지만 관심을 끌 수 있게 되어 있고요, 그 외에 각 메뉴들을 이동할 때마다 나오는 아기자기한 애니메이션 들이 뭐랄까 클릭하는 재미를 느끼게 하는 것 같습니다. 사이트가 기능보다는 외관에 조금 치중된 느낌도 조금 들긴 하지만, 재미있는 사이트라고 생각이 되어 소개를 합니다.

2008년 MIX 행사에서 HardRock Cafe Memorabilia 사이트가 소개 되면서 Silverlight 2 기술에 포함된 DeepZoom 기술에 사람들이 굉장히 많은 관심을 가지게 되었습니다.

국내에도 DeepZoom을 적용해서 재미있는 사례를 만들어 본것도 많이 있는 것 같은데, 괜찮은 DeepZoom 사례들을 정리해보았습니다.(현재 정식 버전에서 작동되지 않는 것들은 뺐습니다.)

1. RENAULT - http://www.laguna-coupe.com/silverlight
 
자동차 사이트로서 고화질 자동차 사진들에 Deepzoom 을 효과적으로 적용했습니다. 특히나 사진을 약간 특이한 형태(ex.꽈배기)로 배치 한 후에 사용하는 것은 사진이나 문서들을 특별한 형태로 모으거나 하는 용도 등에 활용되면 보는 이로 하여금 흥미를 끌 수 있을 것 같습니다.

2. MSCUI - http://www.mscui.com/PatientJourneyDemonstrator/SecondaryCare.htm
 
MSCUI라는 병원용 애플리케이션 Showcase 중에 Secondary Care 부분에서 Exercise test results 라는 부분에서 환자들의 차트를 Deepzoom으로 보는 것이 비지니스 애플리케이션에서의 가능성을 보여주는 것 같습니다. (부분별로 확대)

3. PHOTOZOOM - http://photozoom.mslivelabs.com/
 
MSLIVELAB에서 하고 있는 Photozoom이라는 서비스로서 DeepZoom 이미지를 만드는 것을 서버측에서 서비스로 제공하며, 한장만 가능한 것이 아니라 여러 장을 동시에 볼 수 있도록 하는 것을 원활하게 구현했습니다. 본인의 Live ID로 사진을 올려서 DeepZoom 적용된 상태로 게시판등에 올릴 수도 있답니다.

4. VERTIGO - http://www.vertigo.com/deepzoom.aspx
 

Hardrock카페 Deepzoom 페이지를 만들었던 Vertigo에서 만든 사이트인데요. 이미지들을 2차원 뿐만 아니라 3차원으로 구성해서 DeepZoom 가능하도록 하는 것을 보여줍니다. 2차원은 자료의 분량에 따라서 공간상의 제약이 있을 것이기 때문에 3차원으로 구성하는 것도 경우에 따라서 의미가 있을 것으로 생각 합니다.(3차원은 앞으로 더 발전되면 좋을 것 같음. 현재는 약간 아쉽)

5. Kelly Blue Book - http://www.kbb.com/kbb/PerfectCarFinder/PhotoEdition.aspx
 
물건을 많이 판매하는 온라인 쇼핑몰에서 관심을 가질 만한 DeepZoom 구현 사례이며, 많은 사진을 한눈에 그리고 쉽게 분류해서 볼 수 있도록 한 자동차 판매 쇼핑몰 사이트 입니다. DeepZoom의 Business 사례 적용을 굉장히 잘했다고 생각 합니다. (중고차는 자세히 봐야...)

6. Obama Headlines - http://bigpicture.vertigo.com/obama/

오바마 미국 대통령 당선자의 당선 기사를 모아서 서비스를 하고 있는데요, 역시 Hardrock 카페 Deepzoom 페이지를 만든 Vertigo에서 만들어서 그런지 특별한 효과가 없이도 전체적으로 깔끔한 잘 만들어진 느낌이 드네요. 우리나라 신문도 4개(?) 있는데 꼭 한번 찾아보세요.

7. DocZoom - http://www.webhardservice.com/DocZoomSite/DocZoomSiteMain.aspx
 
이건 국내 적용 사이트 인데요, 문서들을 DeepZoom 기술을 이용해서 보는데, 솔루션 형태로 잘 만들어졌고, 속도도 빨라서, 추후에 이같은 형태가 PDF나 PPT 혹은 XPS 뷰어를 경우에 따라서 어느정도 대체할 수 있을 것도 같다는 느낌도 듭니다. 비지니스 가능성이 높아 보이구요.

8. SayTopic - http://www.saytopic.com/
  
제 블로그에도 가끔씩 좋은 댓글 올려주시는 이과장님 이 운영하는 사이트 인데요,사진을 올리면 DeepZoom 이 적용되며, 이미 올라가있는 고화질의 사진들을 DeepZoom 기술로 구경하는 재미가 있답니다.(사진도 최고예요)

9. DeepView Lite - http://hugeflow.com/zbxe/?mid=deepview_lite
 
Silverlight Expert 회사인 HugeFlow의 웰메이드 DeepZoom 뷰어 입니다. 이름은 DeepView Lite! 위 샘플은 지금은 없어진 대한민국 국보 1호의 옛날 모습을 딥줌을 통해서 보는...

혹시 제가 놓친 멋~진 DeepZoom 적용 사이트가 더 있다면 댓글로 알려주시면 감사하겠습니다.