[javascript] Universal Viewer를 사용한 온라인 쇼핑몰 상품 미리보기 기능

30 Nov 2023

javascript

온라인 쇼핑몰을 운영하는 경우, 고객이 제품을 구매하기 전에 상세히 살펴보고 싶어하는 경우가 많습니다. 이를 위해 상품 미리보기 기능을 제공하는 것은 매우 중요합니다. Universal Viewer는 다양한 형식의 파일을 미리보기할 수 있는 강력한 도구로, 온라인 쇼핑몰에서 상품의 이미지나 동영상을 미리보기로 제공하는 데 사용될 수 있습니다.

Universal Viewer란?

Universal Viewer는 다양한 파일 형식을 지원하여 이미지, 동영상, 문서 등을 웹에서 미리보기할 수 있도록 해주는 라이브러리입니다. 웹 페이지에 삽입하여 사용하면 사용자는 웹 브라우저에서 파일을 다운로드하거나 외부 프로그램을 사용하지 않고도 파일을 미리보기할 수 있습니다. 또한 Universal Viewer는 사용자가 확대, 축소, 회전 등 다양한 조작을 할 수 있도록 도와주는 사용자 친화적인 인터페이스를 제공합니다.

상품 미리보기 기능 구현 방법

Universal Viewer 라이브러리를 다운로드하고 웹 페이지에 포함합니다.

<script src="universalviewer.min.js"></script>
<link rel="stylesheet" type="text/css" href="uv.css"/>

상품 이미지를 웹 페이지에 삽입하고 클릭 이벤트를 등록합니다.
```
<img src="product-image.jpg" onclick="openProductPreview('product-image.jpg')">
```

클릭 이벤트 핸들러에서 Universal Viewer를 초기화하고 이미지 파일을 미리보기합니다.

function openProductPreview(imageUrl) {
  var viewer = new UniversalViewer({
    id: "product-preview",
    modules: ["ImageViewer"],
    sequence: [{
      "@context" : "http://iiif.io/api/presentation/2/context.json",
      "@id" : imageUrl,
      "metadata" : {
        "title" : {"en" : ["Product Preview"]}
      },
      "thumbnail" : {
        "@id" : imageUrl
      }
    }]
  });
  viewer.show();
}

위의 코드는 Universal Viewer를 사용하여 온라인 쇼핑몰 상품의 이미지를 클릭하면 미리보기 창이 나타나도록 구현한 예시입니다. Universal Viewer의 설정은 JSON 형식으로 제공되며, “id”는 미리보기 창의 HTML 요소의 ID를 지정하고, “modules”는 사용할 Viewer 모듈을 지정합니다. “sequence”는 미리보기할 파일의 정보를 담은 배열입니다.

정리

Universal Viewer는 온라인 쇼핑몰 상품 미리보기 기능을 구현하는 데 유용한 도구입니다. 상품 이미지나 동영상을 웹 페이지에 삽입하여 Universal Viewer를 초기화하면 고객이 제품을 더 자세히 살펴볼 수 있는 기능을 제공할 수 있습니다. Universal Viewer 라이브러리를 다운로드하여 쉽게 사용할 수 있으며, 상세한 설정을 통해 원하는 환경에 맞게 커스터마이징할 수도 있습니다.

참고: Universal Viewer 공식 홈페이지