개요
이 글에서는 Universal Viewer라는 오픈 소스 라이브러리를 활용하여 웹 기반의 슬라이드 생성과 공유 기능을 구현하는 방법에 대해 알아보겠습니다. Universal Viewer는 다양한 형식의 미디어 리소스를 표시하기 위해 설계된 라이브러리로, 이미지, 비디오, 오디오 등 다양한 형식의 파일을 웹 페이지에서 쉽게 표시할 수 있습니다.
Universal Viewer란?
Universal Viewer는 웹 브라우저에서 활용할 수 있는 고성능의 오픈 소스 미디어 뷰어입니다. 웹 페이지에 이미지나 비디오 등 다양한 형식의 미디어를 표시하는 데 사용될 수 있으며, 빠른 로딩 속도와 멋진 사용자 경험을 제공합니다.
슬라이드 생성 기능
Universal Viewer를 사용하여 슬라이드를 생성하는 방법은 간단합니다. 우선, 슬라이드로 사용할 이미지 파일들을 미디어 리소스로 지정합니다. 그런 다음, Universal Viewer를 초기화하고 이미지 파일들을 순차적으로 표시하도록 설정합니다. 사용자는 슬라이드를 이전 또는 다음 이미지로 넘기는 등의 조작을 할 수 있습니다.
// Universal Viewer 초기화
const viewer = new UniversalViewer({
element: document.getElementById('viewer'),
... // 뷰어 설정
});
// 이미지 파일들을 미디어 리소스로 지정
const mediaResources = [
{ type: 'image', url: 'image1.jpg' },
{ type: 'image', url: 'image2.jpg' },
{ type: 'image', url: 'image3.jpg' },
...
];
// 이미지 파일들을 슬라이드로 표시
mediaResources.forEach(resource => {
viewer.addMedia(resource);
});
// 슬라이드 조작
const prevButton = document.getElementById('prev-button');
const nextButton = document.getElementById('next-button');
prevButton.addEventListener('click', () => {
viewer.goToPreviousMedia();
});
nextButton.addEventListener('click', () => {
viewer.goToNextMedia();
});
슬라이드 공유 기능
슬라이드를 공유하는 기능을 추가하기 위해서는 현재 슬라이드의 인덱스를 URL 파라미터로 전달하는 방법을 사용할 수 있습니다. 슬라이드를 표시할 때마다 현재 인덱스를 갱신하고, 공유하기 버튼을 눌렀을 때 해당 URL을 공유할 수 있도록 구현합니다.
// 슬라이드를 표시할 때마다 현재 인덱스 갱신
viewer.on('mediaShown', (media) => {
const currentIndex = viewer.getMedias().indexOf(media);
updateUrlParam('index', currentIndex);
});
// 공유하기 버튼 클릭 시 현재 슬라이드 URL 공유
const shareButton = document.getElementById('share-button');
shareButton.addEventListener('click', () => {
const currentIndex = getCurrentIndex();
const shareUrl = new URL(window.location.href);
shareUrl.searchParams.set('index', currentIndex);
navigator.clipboard.writeText(shareUrl.toString())
.then(() => alert('공유 링크가 복사되었습니다!'))
.catch((error) => console.error('에러 발생: ', error));
});
// URL 파라미터에서 현재 인덱스 가져오기
function getCurrentIndex() {
const urlParams = new URLSearchParams(window.location.search);
return parseInt(urlParams.get('index')) || 0;
}
// URL 파라미터 업데이트
function updateUrlParam(key, value) {
const urlParams = new URLSearchParams(window.location.search);
urlParams.set(key, value);
const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
history.replaceState({}, '', newUrl);
}
마무리
이렇게 Universal Viewer를 활용하여 웹 기반의 슬라이드 생성 및 공유 기능을 구현할 수 있습니다. Universal Viewer는 다양한 미디어 형식을 표시할 수 있으므로, 이미지 또는 비디오 등을 이용한 슬라이드 쇼를 만들고 공유할 때 유용하게 사용될 수 있습니다.