[javascript] Universal Viewer를 활용한 플리퍼북/매거진 뷰어 기능

30 Nov 2023

javascript

플리퍼북이나 매거진 형식으로 브라우저에서 콘텐츠를 시각적으로 표시하고자 할 때 Universal Viewer를 활용할 수 있습니다. Universal Viewer는 웹 기반의 이미지, 비디오, 오디오 등을 효과적으로 보여주는 오픈 소스 라이브러리입니다.

Universal Viewer 기본 설정

Universal Viewer를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드하거나 웹에서 불러와야 합니다. 다운로드 후 HTML 문서 내에 다음과 같이 스크립트 파일을 추가합니다.

<script src="universal-viewer.min.js"></script>

또한, 뷰어를 표시할 영역을 지정해야합니다. 이를 위해 HTML 문서 내에 <div> 태그를 추가하고 해당 태그의 id를 지정합니다.

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

플리퍼북/매거진 뷰어 설정

Universal Viewer를 활용하여 플리퍼북/매거진 뷰어를 구현하려면 다음과 같은 설정을 추가해야 합니다.

var viewer = new UniversalViewer({
    id: "viewer",
    manifestUri: "manifest.json",
    modules: [
        "BookToPdf",
        "IIIFMetadata",
        "Toolbar",
        "FullscreenToggle",
        "Options",
        "RelatedCanvas",
        "MoreInfo",
        "Attribution"
    ]
});

id: 뷰어를 표시할 <div> 태그의 id입니다.
manifestUri: 플리퍼북/매거진의 메타데이터를 담은 manifest.json 파일의 경로입니다.
modules: 뷰어에 추가될 모듈의 리스트입니다. 위 예시에서는 플리퍼북/매거진 뷰어에 여러 기능을 추가하기 위해 다양한 모듈을 추가하였습니다. 필요한 모듈 목록에서 제거하거나 추가하여 원하는 기능을 구현할 수 있습니다.

플리퍼북/매거진 데이터 구성

플리퍼북/매거진의 메타데이터는 manifest.json 파일에 정의되어야 합니다. manifest.json 파일 내에는 플리퍼북/매거진의 페이지 구성, 이미지 경로 등의 정보를 포함해야 합니다. 예시로, 다음과 같이 manifest.json 파일을 구성할 수 있습니다.

{
    "@context": "http://iiif.io/api/presentation/2/context.json",
    "@type": "sc:Manifest",
    "@id": "https://example.com/manifest",
    "label": "플리퍼북 예시",
    "sequences": [
        {
            "@type": "sc:Sequence",
            "canvases": [
                {
                    "@type": "sc:Canvas",
                    "label": "커버",
                    "width": 800,
                    "height": 600,
                    "images": [
                        {
                            "@type": "oa:Annotation",
                            "motivation": "sc:painting",
                            "resource": {
                                "@type": "dctypes:Image",
                                "format": "image/jpeg",
                                "service": {
                                    "@context": "http://iiif.io/api/image/2/context.json",
                                    "@id": "https://example.com/image1",
                                    "profile": "http://iiif.io/api/image/2/level1.json"
                                },
                                "width": 800,
                                "height": 600
                            }
                        }
                    ]
                },
                {
                    "@type": "sc:Canvas",
                    "label": "내용 페이지 1",
                    "width": 800,
                    "height": 600,
                    "images": [
                        {
                            "@type": "oa:Annotation",
                            "motivation": "sc:painting",
                            "resource": {
                                "@type": "dctypes:Image",
                                "format": "image/jpeg",
                                "service": {
                                    "@context": "http://iiif.io/api/image/2/context.json",
                                    "@id": "https://example.com/image2",
                                    "profile": "http://iiif.io/api/image/2/level1.json"
                                },
                                "width": 800,
                                "height": 600
                            }
                        }
                    ]
                },
                {
                    "@type": "sc:Canvas",
                    "label": "내용 페이지 2",
                    "width": 800,
                    "height": 600,
                    "images": [
                        {
                            "@type": "oa:Annotation",
                            "motivation": "sc:painting",
                            "resource": {
                                "@type": "dctypes:Image",
                                "format": "image/jpeg",
                                "service": {
                                    "@context": "http://iiif.io/api/image/2/context.json",
                                    "@id": "https://example.com/image3",
                                    "profile": "http://iiif.io/api/image/2/level1.json"
                                },
                                "width": 800,
                                "height": 600
                            }
                        }
                    ]
                },
                // ... 추가 페이지
            ]
        }
    ]
}

위 예시에서는 3개의 캔버스로 구성된 플리퍼북을 표현하고 있습니다. 각 캔버스는 레이블, 크기, 이미지 경로 등의 정보를 포함합니다. 원하는 만큼 캔버스를 추가하여 페이지를 구성할 수 있습니다.

마무리

위의 예시를 참고하여 Universal Viewer를 활용한 플리퍼북/매거진 뷰어 기능을 구현할 수 있습니다. Universal Viewer는 다양한 기능과 확장성을 제공하므로, 원하는 형식의 콘텐츠를 시각적으로 표현하고자 할 때 유용한 도구입니다.

참고 자료

Universal Viewer 공식 문서: https://universalviewer.io/
IIIF(International Image Interoperability Framework) 공식 사이트: https://iiif.io/