다음 코어 업데이트 10월 20일(화) D-43 코어는 매월 셋째 주 화요일 공식 자료는 월 1회 (베타 자료 1~2주) 코어 릴리즈 자료 릴리즈
개발노트

galleryZ — 본문 이미지 뷰어를 처음부터 다시 만들었습니다

zittme 2026.09.02 11:57 조회 수 57 추천 수 0
zittme ~ dev-note

$ zittme release --preview 1.0.1

galleryZ — 본문 이미지 뷰어를 처음부터 다시 만들었습니다

photoswipe 애드온을 대체하는 자체 엔진. 외부 라이브러리 0, 더 매끄러운 제스처, 더 깔끔한 화면.

addon1.0.1no-dependency

안녕하세요. zittme 개발팀입니다.

본문 이미지를 갤러리로 넘겨보는 기본 애드온 photoswipe 는 PhotoSwipe 4 라이브러리와 jQuery 글루 코드로 만들어져 있었습니다. 십 년 가까이 된 라이브러리라 문법도 디자인도 오래되었고, 고치고 싶은 곳이 생겨도 손을 대기 어려운 구조였습니다. 그래서 이번에 라이브러리를 걷어내고 뷰어 엔진을 처음부터 다시 썼습니다. 이름은 galleryZ 입니다.

## 무엇이 들어갔나

+ 확대 — 휠 · 더블탭 · 두 손가락 핀치, 확대 상태에서 드래그 이동

+ 스와이프로 넘기기, 아래로 끌어서 닫기

+ 썸네일 스트립 — 사진이 여러 장이면 하단에서 바로 이동

+ 슬라이드쇼 · 전체화면 · 원본 다운로드 버튼

+ 키보드 탐색 (←/→/Esc/Space) · 카운터 · 캡션

+ 모바일 뒤로가기로 뷰어만 닫힘 (히스토리 연동)

+ 잠시 가만히 두면 버튼이 사라지는 몰입 모드

- 외부 라이브러리 · jQuery 의존 · 이미지 스프라이트 에셋

화면은 다크 글래스 톤으로 새로 디자인했습니다. 아래는 실제 동작 화면입니다. 이 글의 이미지를 클릭해도 galleryZ 가 열리니, 그 자체가 데모입니다.

galleryZ 뷰어

신선한 테마 매뉴얼의 9장 갤러리를 galleryZ 로 연 모습 — 하단이 썸네일 스트립입니다.

## 왜 직접 만들었나

라이브러리를 최신판으로 올리는 길도 있었지만, 뷰어 하나에 필요한 코드보다 훨씬 많은 것을 함께 들여와야 했습니다. 본문 스캔 규칙과 제외 규칙은 이미 애드온 쪽에 있었으니, 부족한 것은 잘 만든 뷰어 하나 뿐이었습니다. 새 엔진은 파일 두 개(스크립트 + 스타일)로 끝나고, 포인터 이벤트 기반이라 마우스 · 터치 · 펜을 한 코드로 처리합니다.

기존 사이트는 손댈 것이 없습니다. 본문을 읽는 범위, 구성요소 이미지를 거르는 규칙, 제외/포함 클래스(photoswipe-escape / photoswipe-images), 하단 캡션 표시 설정까지 구판 그대로 인식합니다.

주소로 갤러리 열기

주소 끝에 #gz-3 처럼 붙이면 그 페이지의 3번째 이미지가 열린 채로 공유됩니다. 위 캡처도 이 딥링크로 찍었습니다.

## 제공 일정

galleryZ 는 코어 1.0.1 부터 기본 애드온으로 동봉되며, photoswipe 애드온은 같은 버전에서 코어에서 제거됩니다. zitt.me 에는 오늘부터 적용되어 있으니 아무 글의 이미지나 눌러보시면 됩니다.

개발 과정에서 나온 이야기는 앞으로도 개발노트로 종종 전하겠습니다.

// zittme dev team

Profile
zittme

zittme 공식 개발팀입니다.

zittme의 오픈소스에 많은 참여 부탁드립니다.

댓글 0

번호 제목 글쓴이 날짜 조회 수
27 개발노트 editorZ — CKEditor 없이, 코어에 딱 맞는 새 에디터editorZ — CKEditor 없이, 코어에 딱 맞는 새 에디터 zittme 5일 전 67
26 개발노트 galleryZ — 본문 이미지 뷰어를 처음부터 다시 만들었습니다galleryZ — 본문 이미지 뷰어를 처음부터 다시 만들었습니다 zittme 5일 전 57
25 개발노트 [Beta-0.0.1] 코어 내 전문가/스토어(+바로설치) 서비스 탑재[Beta-0.0.1] 코어 내 전문가/스토어(+바로설치) 서비스 탑재 zittme 26.08.04 90
24 개발노트 [Beta-0.0.1] 관리자 화면 설정 내 관리자 GNB 위치 조정 기능 탑재[Beta-0.0.1] 관리자 화면 설정 내 관리자 GNB 위치 조정 기능 탑재 zittme 26.08.04 92
23 개발노트 [Beta-0.0.1] 코어 내 메일 발송 스킨 개선[Beta-0.0.1] 코어 내 메일 발송 스킨 개선 +1 zittme 26.08.03 76
22 개발노트 [Beta-0.0.1] 회원모듈 내 본인인증 사용시, 나이 기준 회원그룹 편입 기능[Beta-0.0.1] 회원모듈 내 본인인증 사용시, 나이 기준 회원그룹 편입 기능 +2 zittme 26.08.03 76
21 개발노트 코어 관리자 페이지 내 전문가(서드파티) 노출 + 서드파티를 위한 정책 안내코어 관리자 페이지 내 전문가(서드파티) 노출 + 서드파티를 위한 정책 안내 zittme 26.08.01 87
20 개발노트 [Beta-0.0.1] 기본 에디터 개선 및 파일업로더 디자인 개선[Beta-0.0.1] 기본 에디터 개선 및 파일업로더 디자인 개선 zittme 26.07.31 95
19 개발노트 [공식 모듈] 이제 누구나 쇼핑몰을 쉽게 구축하는 시대! 커머스 공식 모듈 지원![공식 모듈] 이제 누구나 쇼핑몰을 쉽게 구축하는 시대! 커머스 공식 모듈 지원! zittme 26.07.31 76
18 개발노트 [공식 모듈] 짓미 페이를 따로 떼어낸 이유, 그리고 작동 원리[공식 모듈] 짓미 페이를 따로 떼어낸 이유, 그리고 작동 원리 zittme 26.07.30 82
17 개발노트 [공식 모듈] 짓미 예약 모듈 공식 자료 제공[공식 모듈] 짓미 예약 모듈 공식 자료 제공 zittme 26.07.30 80
16 개발노트 [공식 모듈] 짓미 페이 모듈 공식 자료 제공[공식 모듈] 짓미 페이 모듈 공식 자료 제공 zittme 26.07.30 75
15 개발노트 [공식 모듈] 짓미 비즈챗 모듈 공식 자료 제공[공식 모듈] 짓미 비즈챗 모듈 공식 자료 제공 zittme 26.07.29 94
14 개발노트 [Beta-0.0.1] 404 에러 페이지 디자인 개선 + 향후 방향성[Beta-0.0.1] 404 에러 페이지 디자인 개선 + 향후 방향성 zittme 26.07.28 68
13 개발노트 [Beta-0.0.1] 본인인증 기능 탑재 + 성인인증 게이트의 추가[Beta-0.0.1] 본인인증 기능 탑재 + 성인인증 게이트의 추가 +1 zittme 26.07.28 72
12 개발노트 [Beta-0.0.1] 회원 모듈 내 본인인증 기능 탑재[Beta-0.0.1] 회원 모듈 내 본인인증 기능 탑재 zittme 26.07.28 57
11 개발노트 [Beta-0.0.1] 사용자페이지 내 관리바 기능 추가(개발완료)[Beta-0.0.1] 사용자페이지 내 관리바 기능 추가(개발완료) +1 zittme 26.07.27 83
10 개발노트 [Beta-0.0.1] 레이아웃 상세 설정 개발자/사용자 편의성 개선(개발완료)[Beta-0.0.1] 레이아웃 상세 설정 개발자/사용자 편의성 개선(개발완료) +1 zittme 26.07.27 80
9 개발노트 [Beta-0.0.1] 페이지메이커(컨텐츠페이지) 모듈 개발 현황 1차[Beta-0.0.1] 페이지메이커(컨텐츠페이지) 모듈 개발 현황 1차 +2 zittme 26.07.25 100
8 개발노트 [Beta-0.0.1] 페이지메이커 모듈 기본 탑재[Beta-0.0.1] 페이지메이커 모듈 기본 탑재 zittme 26.07.24 51