[javascript] PhotoSwipe를 이용한 이미지 공유 기능 구현 방법

22 Nov 2023

javascript

이미지 공유 기능은 웹 애플리케이션에서 사용자들이 사진을 다른 사용자들과 공유할 수 있도록 하는 중요한 기능입니다. PhotoSwipe는 JavaScript 라이브러리로써 이미지 갤러리를 만들고, 이미지를 확대/축소하고, 스와이프로 이미지를 전환할 수 있는 기능을 제공합니다. 이제 PhotoSwipe를 사용하여 이미지 공유 기능을 구현하는 방법을 알아보겠습니다.

PhotoSwipe 라이브러리 설치하기

PhotoSwipe를 사용하기 위해서는 먼저 라이브러리를 프로젝트에 설치해야 합니다. 다음 명령을 사용하여 PhotoSwipe를 설치할 수 있습니다.

npm install photoswipe --save

PhotoSwipe 초기화하기

PhotoSwipe를 사용하기 위해 라이브러리를 초기화해야 합니다. 아래 코드는 초기화하는 기본적인 내용입니다.

import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';

// HTML 엘리먼트를 가져와서 PhotoSwipe가 동작할 수 있도록 설정합니다.
const galleryElement = document.querySelector('.pswp-gallery');
const items = []; // 이미지 목록을 가져와서 items 배열에 추가합니다.

// PhotoSwipe를 초기화합니다.
const gallery = new PhotoSwipe(galleryElement, PhotoSwipeUI_Default, items, { ...options });

// 이미지를 클릭했을 때 PhotoSwipe를 열기 위한 이벤트 핸들러를 추가합니다.
galleryElement.addEventListener('click', (e) => {
  e.preventDefault();

  const index = Array.from(galleryElement.querySelectorAll('a')).indexOf(e.target);
  gallery.init();
  gallery.goTo(index);
});

위 코드에서 galleryElement는 이미지 갤러리가 나타날 HTML 엘리먼트를 선택합니다. items 배열에는 이미지들의 정보를 담아야 합니다. 원하는 경우 options 객체에 PhotoSwipe 설정 옵션들을 추가할 수 있습니다.

이미지 공유 기능 추가하기

이미지 공유 기능을 추가하려면 이미지 클릭 이벤트 핸들러에 공유 기능을 구현하는 코드를 추가해야 합니다. 다음은 예시 코드입니다.

// 이미지를 클릭했을 때 PhotoSwipe를 열기 위한 이벤트 핸들러를 추가합니다.
galleryElement.addEventListener('click', (e) => {
  e.preventDefault();

  const index = Array.from(galleryElement.querySelectorAll('a')).indexOf(e.target);
  gallery.init();
  gallery.goTo(index);

  // 이미지를 공유할 수 있는 URL을 생성합니다.
  const imageUrl = items[index].src;
  const shareUrl = `http://example.com/share?image=${encodeURIComponent(imageUrl)}`;

  // 공유 기능을 실행할 수 있는 팝업 창을 엽니다.
  window.open(shareUrl, '_blank', 'width=600,height=400');
});

위 코드에서 shareUrl은 이미지를 공유할 URL을 생성하는 부분입니다. 외부 사이트의 API를 사용할 수도 있고, 간단한 웹 애플리케이션에서는 자체적으로 URL을 생성할 수 있습니다. window.open() 메서드를 사용하여 공유 기능을 실행할 수 있는 팝업 창을 엽니다.

이제 PhotoSwipe를 사용하여 이미지 공유 기능을 구현하는 방법을 알아보았습니다. PhotoSwipe는 강력하고 다양한 기능을 제공하므로, 필요에 따라 자세한 문서나 예제 코드를 참고하시기 바랍니다.

참고 자료

PhotoSwipe 공식 문서: https://photoswipe.com/documentation/getting-started.html
PhotoSwipe GitHub 저장소: https://github.com/dimsemenov/PhotoSwipe
PhotoSwipe 예제 코드: https://photoswipe.com/documentation/examples.html