[javascript] Universal Viewer를 사용한 이벤트 및 전시회 가상 투어 기능

30 Nov 2023

javascript

이벤트 및 전시회는 온라인 상에서 가상 투어를 통해 사용자들에게 전시물과 이벤트를 소개하는 인터랙티브한 경험을 제공합니다. 이를 구현하기 위해 Universal Viewer라는 JavaScript 라이브러리를 활용할 수 있습니다. 이 블로그 포스트에서는 Universal Viewer를 사용하여 이벤트 및 전시회 가상 투어 기능을 구현하는 방법에 대해 알아보겠습니다.

Universal Viewer란 무엇인가요?

Universal Viewer는 웹 기반 디지털 콘텐츠 뷰어로, 다양한 형식의 미디어 파일을 표시하고 탐색할 수 있도록 도와줍니다. 이미지, 동영상, 오디오, PDF 등 다양한 형식의 콘텐츠를 지원하며, 강력한 확대/축소 기능과 인터랙티브한 탐색 기능을 제공합니다.

Universal Viewer를 이용한 가상 투어 구현 방법

Universal Viewer 라이브러리 가져오기 Universal Viewer를 사용하기 위해 먼저 해당 라이브러리를 웹 페이지에 추가해야 합니다. <script> 태그를 사용하여 다음과 같이 라이브러리를 가져올 수 있습니다.
```
<script src="universalviewer.min.js"></script>
```
가상 투어 이미지 구성 Universal Viewer는 가상 투어를 위해 여러 이미지를 사용하여 슬라이드 쇼 형태로 보여줍니다. 따라서 가상 투어에 사용할 이미지들을 준비해야 합니다. 이미지는 하나의 폴더에 저장되어 있어야 하며, <img> 태그를 사용하여 페이지에 추가합니다.
```
<img class="uv" alt="Image 1" src="images/image1.jpg" />
<img class="uv" alt="Image 2" src="images/image2.jpg" />
<img class="uv" alt="Image 3" src="images/image3.jpg" />
```
Universal Viewer 초기화 및 설정 Universal Viewer를 초기화하고 추가적인 설정을 할 수 있습니다. 초기화는 JavaScript 코드를 사용하여 다음과 같이 수행할 수 있습니다.
```
var uv = new UniversalViewer({
  sequences: [{
    id: "tour",
    type: "image",
    label: "Virtual Tour",
    canvases: [
      { label: "Image 1", url: "images/image1.jpg" },
      { label: "Image 2", url: "images/image2.jpg" },
      { label: "Image 3", url: "images/image3.jpg" }
    ]
  }],
  rootSequence: "tour",
  showAnnotation: false,
  showDropDown: false,
  showFullScreen: false
});

uv.attachTo(".uv");
```
위의 코드에서 sequences 배열에는 가상 투어에 사용할 이미지들의 정보를 입력합니다. 각 이미지는 label과 url로 구성된 객체로 표현되며, canvases 배열에 순서대로 추가합니다. rootSequence는 가상 투어의 루트 시퀀스를 지정하고, showAnnotation, showDropDown, showFullScreen 등의 옵션은 필요에 따라 설정할 수 있습니다.
가상 투어 실행 Universal Viewer 설정이 완료되면 가상 투어를 실행할 준비가 된 것입니다. 이제 웹 페이지에서 Universal Viewer를 보여주기 위해 HTML 요소에 해당 클래스를 추가하고, 실행하고자 하는 시점에서 uv.show() 메서드를 호출합니다.
```
<div class="uv"></div>
<button onclick="uv.show()">Start Virtual Tour</button>
```
위의 예제에서는 <div> 요소에 uv 클래스를 추가하여 Universal Viewer를 표시하고, Start Virtual Tour라벨의 버튼을 클릭하여 가상 투어를 시작할 수 있습니다.

마무리

Universal Viewer를 사용하여 이벤트 및 전시회 가상 투어 기능을 구현하는 방법에 대해 알아보았습니다. Universal Viewer는 다양한 형식의 콘텐츠를 효과적으로 표시하고 탐색할 수 있도록 도와주므로, 이를 활용하여 사용자들에게 멋진 가상 투어 경험을 제공할 수 있습니다.

더 많은 정보를 원하실 경우 Universal Viewer 공식 문서를 참조해보세요.

Universal Viewer 공식 문서