[javascript] Universal Viewer를 활용한 문서 뷰어 기능 설명

30 Nov 2023

javascript

Universal Viewer는 JavaScript 기반의 오픈 소스 문서 뷰어 라이브러리로, 다양한 형식의 문서를 웹 상에서 손쉽게 볼 수 있도록 지원합니다. 이번 포스트에서는 Universal Viewer를 활용하여 어떻게 문서 뷰어 기능을 구현할 수 있는지에 대해 설명하겠습니다.

Universal Viewer 설치하기

Universal Viewer를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하고 웹 애플리케이션에 추가해야 합니다. 다음과 같은 방법으로 Universal Viewer를 설치할 수 있습니다.

Universal Viewer 홈페이지 (https://universalviewer.io/)에 접속하여 라이브러리를 다운로드합니다.
다운로드한 파일을 웹 애플리케이션의 프로젝트 폴더에 추가합니다.

문서 뷰어 구현하기

Universal Viewer를 활용하여 문서 뷰어 기능을 구현하기 위해서는 몇 가지 단계를 거쳐야 합니다.

1. HTML 마크업 작성하기

문서를 표시할 영역을 지정하기 위해 HTML 마크업을 작성해야 합니다. 예를 들어, 다음과 같은 마크업을 사용할 수 있습니다.

<div id="viewer"></div>

2. JavaScript로 문서 뷰어 초기화하기

다음 단계에서는 Universal Viewer를 초기화하는 JavaScript 코드를 작성해야 합니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

const viewerElement = document.getElementById('viewer');

const options = {
  modules: [
    'Sequence',
    'AutoComplete',
    'Thumbnails',
    'Search',
    'FullScreen'
  ],
  // 필요한 모듈을 등록합니다.
};

const manifestUri = 'https://example.com/manifest.json';

const viewer = new UV.Viewer(viewerElement, options);
viewer.set(manifestUri);

위 코드에서 modules 배열에 필요한 모듈들을 등록하고, manifestUri에는 표시할 문서의 매니페스트 주소를 설정합니다.

3. 문서 뷰어 스타일 설정하기

마지막으로 문서 뷰어의 스타일을 설정해야 합니다. Universal Viewer는 CSS 파일을 제공하므로, 해당 파일을 웹 애플리케이션에 추가하면 됩니다. 예를 들어, 다음과 같이 HTML 파일의 head 태그 안에 CSS 파일을 추가할 수 있습니다.

<head>
  <link rel="stylesheet" href="universalviewer/css/uv.css">
</head>

결론

Universal Viewer를 활용하면 문서 뷰어 기능을 손쉽게 구현할 수 있습니다. 위에서 설명한 단계를 따라가면서 웹 애플리케이션에 문서 뷰어 기능을 추가해보세요. Universal Viewer는 다양한 형식의 문서를 표시하는데 많은 도움을 줄 것입니다.

참고 자료:

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