[javascript] Universal Viewer를 활용한 360도 가상 투어 기능

30 Nov 2023

javascript

이번 포스트에서는 Universal Viewer라는 JavaScript 라이브러리를 활용하여 360도 가상 투어 기능을 구현하는 방법을 알아보겠습니다.

Universal Viewer란?

Universal Viewer는 다양한 형식의 디지털 콘텐츠를 온라인으로 제공하기 위한 오픈 소스 뷰어입니다. 이미지, 비디오, 오디오 등 다양한 형식의 콘텐츠를 지원하며, 확대, 축소, 회전 등 다양한 기능을 제공합니다.

360도 가상 투어 기능 구현하기

Universal Viewer 라이브러리 설치하기

Universal Viewer를 사용하기 위해서는 우선 해당 라이브러리를 다운로드하여 웹 프로젝트에 추가해야 합니다. Universal Viewer의 공식 홈페이지에서 소스 코드나 CDN 링크를 얻을 수 있습니다.
360도 이미지 준비하기

360도 가상 투어를 제공하려면 먼저 360도 이미지를 준비해야 합니다. 일반적으로 별도의 카메라나 소프트웨어를 사용하여 360도 이미지를 촬영하고, 해당 이미지를 웹에서 사용할 수 있는 형식으로 변환해야 합니다.

HTML 문서에 Universal Viewer 추가하기

Universal Viewer를 사용하기 위해 HTML 문서에 해당 라이브러리를 추가해야 합니다. <script> 태그를 사용하여 Universal Viewer의 스크립트 파일을 로드하고, 필요한 CSS 파일도 <link> 태그를 사용하여 로드합니다.

<html>
  <head>
    <link rel="stylesheet" href="universalviewer.css">
  </head>
  <body>
    <div id="universalviewer"></div>
   
    <script src="universalviewer.js"></script>
    <script>
      // Universal Viewer 초기화 및 360도 이미지 설정
      var uv = new UniversalViewer({
        element: document.getElementById("universalviewer"),
        sequence: [{
          type: "image",
          url: "360image.jpg"
        }]
      });
      uv.show();
    </script>
  </body>
</html>

위 코드에서 universalviewer.css와 universalviewer.js는 Universal Viewer 라이브러리의 파일 경로로 수정되어야 합니다. 또한 sequence 속성을 사용하여 360도 이미지의 경로를 설정합니다.

간단한 스타일링 추가하기 (옵션)

Universal Viewer를 사용하면 여러 가지 스타일링 옵션을 설정할 수 있습니다. 예를 들어, 뷰어의 크기, 배경색, 버튼 스타일 등을 변경할 수 있습니다. 이를 위해 config 옵션을 사용하여 스타일링을 추가할 수 있습니다.
```
var uv = new UniversalViewer({
  element: document.getElementById("universalviewer"),
  sequence: [{
    type: "image",
    url: "360image.jpg"
  }],
  config: {
    width: "100%",
    height: "500px",
    theme: "dark"
  }
});
```
위 코드에서 width와 height 속성은 뷰어의 크기를 설정하고, theme 속성은 뷰어의 테마를 설정합니다.

결론

Universal Viewer를 활용하면 간단하게 360도 가상 투어 기능을 구현할 수 있습니다. Universal Viewer는 다양한 형식의 콘텐츠를 지원하므로, 이미지 뿐만 아니라 비디오, 오디오 등의 콘텐츠도 함께 제공할 수 있습니다.

참고 자료:

Universal Viewer 공식 홈페이지: https://universalviewer.io/
Universal Viewer GitHub 저장소: https://github.com/universalviewer/universalviewer