[javascript] PhotoSwipe의 동작 원리

22 Nov 2023

javascript

PhotoSwipe는 모바일 및 데스크톱에서 사용되는 반응형 이미지 갤러리 및 뷰어 라이브러리입니다. 이 라이브러리는 사용자가 이미지를 자유롭게 확대, 축소, 회전 등의 조작을 할 수 있도록 지원합니다. PhotoSwipe는 JavaScript로 작성되었으며, 해당 라이브러리의 동작 원리는 다음과 같습니다.

1. HTML 구조

PhotoSwipe를 사용하기 위해 필요한 최소한의 HTML 구조는 다음과 같습니다.

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="pswp__bg"></div>
  <div class="pswp__scroll-wrap">
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--share" title="Share"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>

기본적으로 PhotoSwipe는 갤러리로부터 이미지 링크, 썸네일 링크 및 캡션 정보를 읽어와 위와 같은 구조로 동적으로 생성합니다.

2. JavaScript 초기화

PhotoSwipe는 JavaScript를 사용하여 초기화해야 합니다. 다음은 사용 예시입니다.

var gallery = new PhotoSwipe( element, PhotoSwipeUI_Default, items, options );
gallery.init();

element: PhotoSwipe를 렌더링할 요소입니다. 일반적으로 document.querySelector('.pswp')와 같이 사용됩니다.
PhotoSwipeUI_Default: PhotoSwipe의 기본 사용자 인터페이스를 가리키는 클래스입니다.
items: 이미지와 썸네일, 캡션 등을 포함하는 배열입니다.
options: PhotoSwipe의 동작 옵션을 설정하는 객체입니다.

3. 사용자 조작

PhotoSwipe는 사용자 조작에 반응하여 이미지를 제어합니다. 사용자가 터치, 제스처, 키보드 등을 이용하여 이미지를 확대, 축소, 회전 등의 조작을 할 수 있습니다. 이미지의 움직임은 CSS3의 transform 속성을 이용하여 처리됩니다. 이 때문에 부드러운 애니메이션 효과를 제공할 수 있습니다.

PhotoSwipe는 사용자의 제스처를 추적하여 현재 이미지의 위치, 크기, 회전 등을 업데이트합니다. 또한 웹 브라우저의 리사이즈 이벤트에 반응하여 이미지를 적절한 크기로 조정해 줍니다.

4. 스타일링

PhotoSwipe는 일부 기본 스타일을 제공하지만, 사용자의 디자인에 맞게 커스터마이징할 수 있습니다. CSS 파일을 로드하여 PhotoSwipe UI 스타일 및 레이아웃을 변경할 수 있습니다. 또한 스타일 속성을 이용하여 특정 요소의 스타일을 직접 지정할 수도 있습니다.

참고 자료:

PhotoSwipe 공식 문서: https://photoswipe.com/documentation/getting-started.html