galleryZ — 본문 이미지 뷰어를 처음부터 다시 만들었습니다
안녕하세요. zittme 개발팀입니다.
본문 이미지를 갤러리로 넘겨보는 기본 애드온 photoswipe 는 PhotoSwipe 4 라이브러리와 jQuery 글루 코드로 만들어져 있었습니다. 십 년 가까이 된 라이브러리라 문법도 디자인도 오래되었고, 고치고 싶은 곳이 생겨도 손을 대기 어려운 구조였습니다. 그래서 이번에 라이브러리를 걷어내고 뷰어 엔진을 처음부터 다시 썼습니다. 이름은 galleryZ 입니다.
## 무엇이 들어갔나
+ 확대 — 휠 · 더블탭 · 두 손가락 핀치, 확대 상태에서 드래그 이동
+ 스와이프로 넘기기, 아래로 끌어서 닫기
+ 썸네일 스트립 — 사진이 여러 장이면 하단에서 바로 이동
+ 슬라이드쇼 · 전체화면 · 원본 다운로드 버튼
+ 키보드 탐색 (←/→/Esc/Space) · 카운터 · 캡션
+ 모바일 뒤로가기로 뷰어만 닫힘 (히스토리 연동)
+ 잠시 가만히 두면 버튼이 사라지는 몰입 모드
- 외부 라이브러리 · jQuery 의존 · 이미지 스프라이트 에셋
화면은 다크 글래스 톤으로 새로 디자인했습니다. 아래는 실제 동작 화면입니다. 이 글의 이미지를 클릭해도 galleryZ 가 열리니, 그 자체가 데모입니다.

신선한 테마 매뉴얼의 9장 갤러리를 galleryZ 로 연 모습 — 하단이 썸네일 스트립입니다.
## 왜 직접 만들었나
라이브러리를 최신판으로 올리는 길도 있었지만, 뷰어 하나에 필요한 코드보다 훨씬 많은 것을 함께 들여와야 했습니다. 본문 스캔 규칙과 제외 규칙은 이미 애드온 쪽에 있었으니, 부족한 것은 잘 만든 뷰어 하나 뿐이었습니다. 새 엔진은 파일 두 개(스크립트 + 스타일)로 끝나고, 포인터 이벤트 기반이라 마우스 · 터치 · 펜을 한 코드로 처리합니다.
기존 사이트는 손댈 것이 없습니다. 본문을 읽는 범위, 구성요소 이미지를 거르는 규칙, 제외/포함 클래스(photoswipe-escape / photoswipe-images), 하단 캡션 표시 설정까지 구판 그대로 인식합니다.
## 제공 일정
galleryZ 는 코어 1.0.1 부터 기본 애드온으로 동봉되며, photoswipe 애드온은 같은 버전에서 코어에서 제거됩니다. zitt.me 에는 오늘부터 적용되어 있으니 아무 글의 이미지나 눌러보시면 됩니다.
개발 과정에서 나온 이야기는 앞으로도 개발노트로 종종 전하겠습니다.
// zittme dev team
댓글 0
로그인 후 댓글을 작성할 수 있습니다.