Colin's Blog
[javascript] Universal Viewer를 활용한 메모 및 주석 추가 기능

개요

Universal Viewer는 대량의 디지털 콘텐츠를 웹 브라우저에서 손쉽게 볼 수 있도록 도와주는 오픈 소스 뷰어입니다. 이 뷰어를 활용하여 이미지나 동영상 등 다양한 형식의 콘텐츠를 보여줄 수 있습니다. 이번에는 Universal Viewer를 활용하여 메모 및 주석을 추가하는 기능을 개발하는 방법에 대해 알아보겠습니다.

준비물

단계별 구현

1. Universal Viewer 라이브러리 설치

Universal Viewer를 사용하기 위해 먼저 해당 라이브러리를 다운로드하고 HTML 문서에 추가해야 합니다. 다음은 CDN을 통해 Universal Viewer 라이브러리를 추가하는 예시입니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/universalviewer/2.11.1/uv.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/universalviewer/2.11.1/uv.min.css">

2. 이미지 콘텐츠 불러오기

Universal Viewer는 다양한 형식의 콘텐츠를 지원하지만, 이번 예제에서는 이미지를 기준으로 설명하겠습니다. 이미지 콘텐츠를 로드하기 위해 <canvas> 태그를 사용합니다.

<canvas id="canvas"></canvas>

3. Universal Viewer 설정

Universal Viewer를 초기화하고 콘텐츠를 지정하기 위해 JavaScript 코드를 작성합니다.

var manifestUri = 'http://example.com/manifest.json'; // 콘텐츠 정보를 담은 JSON 파일의 URI
var canvas = document.getElementById('canvas');
var viewer = UniversalViewer(canvas);

viewer.load(manifestUri);

4. 메모 및 주석 기능 추가

메모 및 주석을 추가하기 위해 Universal Viewer에 내장된 Annotorious 플러그인을 사용할 수 있습니다. Annotorious 플러그인은 이미지 위에 주석 및 메모를 추가하고 관리하는 기능을 제공합니다. Annotorious 플러그인을 추가하기 위해 다음 코드를 JavaScript 파일에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/annotorious-universalviewer@3.0.1/dist/annotorious-universalviewer.min.js"></script>

5. 메모 및 주석 저장

Annotorious 플러그인을 사용하여 메모나 주석을 추가하면, 해당 정보는 JSON 형식으로 저장됩니다. 필요한 경우 서버에 저장 및 관리하는 로직을 추가하여 사용자의 작성 내용을 영구적으로 보존할 수 있습니다.

결론

Universal Viewer를 활용하여 메모 및 주석 추가 기능을 구현하는 방법을 알아보았습니다. Universal Viewer와 Annotorious 플러그인의 조합을 통해 사용자들이 콘텐츠에 메모나 주석을 추가할 수 있는 풍부한 경험을 제공할 수 있습니다. 이러한 기능은 온라인 교육 플랫폼이나 디지털 아카이브 등 다양한 분야에서 유용하게 활용될 수 있습니다.

Universal Viewer 공식 홈페이지 Annotorious 플러그인 GitHub 저장소

© 2018 Colin. All rights reserved.