[javascript] Universal Viewer를 통해 웹 사이트의 이미지 갤러리 생성하기

30 Nov 2023

javascript

이미지 갤러리는 웹 사이트에서 사진을 보여주기 위해 많이 사용되는 기능 중 하나입니다. Universal Viewer는 다양한 이미지 포맷을 지원하며, 사용자가 이미지를 확대 및 축소하고 상세 정보를 확인할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 Universal Viewer를 사용하여 웹 사이트에 이미지 갤러리를 생성하는 방법을 알아보겠습니다.

Universal Viewer란 무엇인가요?

Universal Viewer는 많은 웹 사이트에서 이미지 뷰어로 사용되는 오픈 소스 도구입니다. 사용자가 여러 종류의 이미지를 볼 수 있도록 하며, 이미지 갤러리, 원격 이미지 서비스, 동영상 등 다양한 기능을 제공합니다. 이러한 기능을 통해 웹 사이트에 다양한 종류의 미디어 콘텐츠를 효과적으로 보여줄 수 있습니다.

Universal Viewer 설치하기

Universal Viewer를 웹 사이트에 설치하는 방법은 다음과 같습니다.

Universal Viewer의 공식 GitHub 저장소에서 최신 버전의 소스 코드를 내려받습니다.
다운로드한 소스 코드를 웹 사이트의 원하는 위치에 저장합니다.
소스 코드를 웹 페이지의 HTML 파일에 추가합니다.

아래는 Universal Viewer 설치를 위한 HTML 코드의 예입니다.

<!DOCTYPE html>
<html>
<head>
    <title>My Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="universialviewer.min.css">
    <script src="universalviewer.min.js"></script>
</head>
<body>
    <div id="uv"></div>

    <script type="text/javascript">
        var uv = new UniversalViewer({
            manifestUri: "path/to/manifest.json",
            root: "uv",
        });
    </script>
</body>
</html>

위의 코드에서 universialviewer.min.css와 universalviewer.min.js 파일은 Universal Viewer의 스타일 및 스크립트 파일이며, 실제 파일의 경로로 수정해야 합니다. 또한 manifestUri는 이미지가 포함된 JSON 매니페스트 파일의 경로를 나타냅니다.

Universal Viewer로 이미지 갤러리 생성하기

Universal Viewer를 사용하여 이미지 갤러리를 생성하기 위해서는 매니페스트 파일을 작성해야 합니다. 매니페스트 파일은 이미지 파일을 서술하고 구성하는 정보를 포함하고 있습니다. 예를 들어, 매니페스트 파일은 이미지 파일의 URL, 크기, 제목, 설명 등의 정보를 포함할 수 있습니다.

아래는 매니페스트 파일의 예입니다.

{
    "sequences": [{
        "canvases": [{
            "label": "Image 1",
            "width": 800,
            "height": 600,
            "images": [{
                "metadata": [{
                    "label": "Title",
                    "value": "Image 1"
                }],
                "resource": {
                    "service": {
                        "profile": "http://iiif.io/api/image/2/profiles/level2.json",
                        "path": "path/to/image1.jpg",
                        "width": 800,
                        "height": 600
                    }
                }
            }]
        }, {
            "label": "Image 2",
            "width": 1024,
            "height": 768,
            "images": [{
                "metadata": [{
                    "label": "Title",
                    "value": "Image 2"
                }],
                "resource": {
                    "service": {
                        "profile": "http://iiif.io/api/image/2/profiles/level2.json",
                        "path": "path/to/image2.jpg",
                        "width": 1024,
                        "height": 768
                    }
                }
            }]
        }]
    }]
}

매니페스트 파일을 생성한 후, HTML 파일에서 해당 파일의 경로를 manifestUri에 설정해주면 Universal Viewer를 통해 이미지 갤러리를 확인할 수 있습니다.

결론

Universal Viewer를 활용하여 웹 사이트에 이미지 갤러리를 생성하는 방법에 대해 알아보았습니다. Universal Viewer는 다양한 종류의 이미지를 효과적으로 보여주며, 사용자에게 편리한 기능을 제공합니다. 이미지 갤러리를 통해 웹 사이트의 사용자들에게 다양한 미디어 콘텐츠를 제공하여 사용자 경험을 향상시킬 수 있습니다.