Openseadragon 라이브러리를 이용하여 viewer for high-resolution images 구현하는 예제와 High resolution image를 렌더링하는 간단한 개념과 함께 온라인 미술관과 박물관, 의료 시스템에서 많이 사용 되는 기술인 ‘Deep Zoom viewer’ 그 중에서도 2D 이미지에 관해 알아보겠습니다.
아래의 구글 arts & culture 페이지를 방문하면 우리가 만들고자 하는 Deep Zoom이 무엇인지 단번에 알 수 있습니다. Deep Zoom이란 굉장한 고해상도의 이미지를 웹 애플리케이션 상에서 퍼포먼스의 제한 없이 부드러운 Zoom In/Out, 그리고 Panning등을 제공할 수 있으며, 사용자가 보는 화면에 적합한 가변적인 해상도를 제공합니다. 이미지의 해상도가 디스플레이의 해상도에 비해 너무 높아 화면이 깨지는 상황을 방지하고, 항상 최적의 해상도와 화질을 제공할 수 있도록 합니다.
이러한 Deep Zoom은 흔하게 “tiles”(tiles of JPEG or PNG images) 라고 불리우는 특별한 이미지들을 필요로 합니다. 피라미드 형식으로 이루어진 이 이미지들은 낮은 해상도의 이미지와 높은 해상도의 이미지를 모두 제공합니다. 말로만 설명하면 그저 2장의 이미지를 제공하는 것 인가? 싶지만 아래 이미지를 보시면 쉽게 이해할 수 있을 것 입니다.
각각 타일 모양으로 이루어진 이미지들은 Zoom Level에 따라서 제공됩니다. Zoom Level이 0일 때는 256*256 이미지를 제공하다가 Zoom Level이 높아지면 1024*1024 이미지와 같이 여러개의 256*256 이미지들로 제공 되는 것 입니다. 하지만 이때 16장의 256 이미지들을 모두 불러오는 것이 아닌 우리가 확대한, 1024 이미지에서 하이라이트 표시 된 부분의 이미지만 화면에 표시되는 것 입니다. 이로 인해 몇만 픽셀의 이미지를 확대하는 과정에서 퍼포먼스의 제한 없이 깨끗한 이미지를 제공 받을 수 있습니다.
Deep Zoom File 이란?
소스 파일로 제공되는 Deep Zoom File들은 XML 형식을 베이스로 제공됩니다. 이 XML 파일에는 위에서 설명한 타일 이미지(Single Large Images)뿐만 아니라 Spars Images 또는 Collections 도 사용 가능합니다.
- Single Large Images
위에서 설명한 조각난 여러 장의 이미지들로 이들을 제공하는 형식들은 정해져 있습니다. 가장 대표적이며 다음 글인 Openseadragon 실습 예제에서 함께할 .dzi 파일을 예로써 설명하겠습니다.
모든 level 파일들은 확장자가 제거 된 채로 {diz 파일의 이름}+”_files”의 위치에 저장 됩니다. 그리고 타일들의 이름은 column_row.format로 저장됩니다. 예를 들어. test.dzi 파일에 png형식 이미지들을 제공한다면,
{ test_files/0_0.png, test_files/0_1.png…test_files/n_m.png } 와 같이 저장되어야 하는 것 입니다.
그렇다면 Deep Zoom File은 타일 이미지만 제공되는 것 일까요?
아닙니다! Spars Images와 Collections의 형식도 존재합니다.
- Spars Images
간단히 말해 쇼핑몰 사이트에서 볼 수 있는 상품 이미지 확대 기능을 생각해 보면 된다. 전체 이미지 중 일부를 이미지만 확대하여 보여 주는 것 이다. Spars Images 또한 피라미드 이미지 형식으로 전체 이미지에 속해 있는 내부의 타일 이미지를 불러와 보여주는 것이다.
