이미지 갤러리
한 줄 메이슨리 갤러리 + 전체화면 뷰어
마운트 태그 안에 img 태그만 넣으면 반응형 메이슨리 갤러리가 됩니다. 이미지를 누르면 내장 전체화면 뷰어가 열리고(←/→ 이동·Esc 닫기·alt 캡션), 열 수(data-columns)와 간격(data-gap)을 바꿀 수 있습니다. 원본 img 태그는 문서에 그대로 남아 SEO·no-JS 폴백도 유지됩니다. 라이트박스 위젯이 이미 페이지에 있는 이미지에 붙는 것이라면, 갤러리는 이미지 묶음의 배치까지 맡습니다. 사이트별 정액 구독, 월 1 또는 년 10 크래딧 (공유 크래딧 결제). 구독 중에는 이미지 작성량 제한이 없습니다.
데모
미리보기%27%2F%3E%3Ccircle%20cx%3D%27296%27%20cy%3D%2784%27%20r%3D%2732%27%20fill%3D%27%23fff7ed%27%20opacity%3D%27.92%27%2F%3E%3Cpath%20d%3D%27M0%20196%20Q100%20150%20200%20186%20T400%20172%20V260%20H0Z%27%20fill%3D%27%235b21b6%27%20opacity%3D%27.5%27%2F%3E%3Cpath%20d%3D%27M0%20226%20Q120%20192%20240%20216%20T400%20206%20V260%20H0Z%27%20fill%3D%27%234c1d95%27%20opacity%3D%27.82%27%2F%3E%3C%2Fsvg%3E)
%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%27120%27%20r%3D%2730%27%20fill%3D%27%23fef9c3%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27145%27%20width%3D%27400%27%20height%3D%27115%27%20fill%3D%27%230ea5e9%27%20opacity%3D%27.35%27%2F%3E%3Cellipse%20cx%3D%27200%27%20cy%3D%27150%27%20rx%3D%2746%27%20ry%3D%277%27%20fill%3D%27%23fef9c3%27%20opacity%3D%27.6%27%2F%3E%3C%2Fsvg%3E)
%27%2F%3E%3Ccircle%20cx%3D%27320%27%20cy%3D%2766%27%20r%3D%2726%27%20fill%3D%27%23fde68a%27%20opacity%3D%27.9%27%2F%3E%3Cpath%20d%3D%27M60%20230%20L90%20120%20L120%20230Z%27%20fill%3D%27%23166534%27%2F%3E%3Cpath%20d%3D%27M150%20235%20L190%2095%20L230%20235Z%27%20fill%3D%27%2314532d%27%2F%3E%3Cpath%20d%3D%27M250%20232%20L285%20130%20L320%20232Z%27%20fill%3D%27%23166534%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27224%27%20width%3D%27400%27%20height%3D%2736%27%20fill%3D%27%23065f46%27%2F%3E%3C%2Fsvg%3E)
%27%2F%3E%3Ccircle%20cx%3D%2770%27%20cy%3D%2754%27%20r%3D%2722%27%20fill%3D%27%23fde68a%27%20opacity%3D%27.85%27%2F%3E%3Cg%20fill%3D%27%23312e81%27%3E%3Crect%20x%3D%2740%27%20y%3D%27120%27%20width%3D%2744%27%20height%3D%2780%27%2F%3E%3Crect%20x%3D%2796%27%20y%3D%2790%27%20width%3D%2740%27%20height%3D%27110%27%2F%3E%3Crect%20x%3D%27150%27%20y%3D%27110%27%20width%3D%2748%27%20height%3D%2790%27%2F%3E%3Crect%20x%3D%27210%27%20y%3D%2770%27%20width%3D%2742%27%20height%3D%27130%27%2F%3E%3Crect%20x%3D%27266%27%20y%3D%27104%27%20width%3D%2746%27%20height%3D%2796%27%2F%3E%3Crect%20x%3D%27324%27%20y%3D%27128%27%20width%3D%2744%27%20height%3D%2772%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23fbbf24%27%20opacity%3D%27.85%27%3E%3Crect%20x%3D%27106%27%20y%3D%27104%27%20width%3D%276%27%20height%3D%276%27%2F%3E%3Crect%20x%3D%27120%27%20y%3D%27104%27%20width%3D%276%27%20height%3D%276%27%2F%3E%3Crect%20x%3D%27222%27%20y%3D%2790%27%20width%3D%276%27%20height%3D%276%27%2F%3E%3Crect%20x%3D%27236%27%20y%3D%27112%27%20width%3D%276%27%20height%3D%276%27%2F%3E%3Crect%20x%3D%27278%27%20y%3D%27120%27%20width%3D%276%27%20height%3D%276%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
%27%2F%3E%3Cpath%20d%3D%27M0%20200%20L110%2090%20L180%20200Z%27%20fill%3D%27%23e0f2fe%27%2F%3E%3Cpath%20d%3D%27M110%2090%20L150%20130%20L128%20148%20L96%20128Z%27%20fill%3D%27%23fff%27%2F%3E%3Cpath%20d%3D%27M150%20210%20L270%2070%20L400%20210Z%27%20fill%3D%27%23bae6fd%27%2F%3E%3Cpath%20d%3D%27M270%2070%20L318%20116%20L286%20140%20L246%20116Z%27%20fill%3D%27%23fff%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27196%27%20width%3D%27400%27%20height%3D%2764%27%20fill%3D%27%231d4ed8%27%20opacity%3D%27.35%27%2F%3E%3C%2Fsvg%3E)
%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%2766%27%20r%3D%2724%27%20fill%3D%27%23fde68a%27%2F%3E%3Cpath%20d%3D%27M0%20150%20Q140%20120%20400%20150%20V260%20H0Z%27%20fill%3D%27%234ade80%27%2F%3E%3Cpath%20d%3D%27M0%20190%20Q160%20165%20400%20190%20V260%20H0Z%27%20fill%3D%27%2316a34a%27%20opacity%3D%27.85%27%2F%3E%3C%2Fsvg%3E)
넣어둔 <img> 태그로 메이슨리 배치 · 클릭하면 내장 전체화면 뷰어
연동 설정
같은 로더(bootsignal.js)가 사이트의 다른 위젯도 함께 동작시킵니다. 위젯 표시에는 활성 구독이 필요합니다.
요금
요금은 사이트별 정액 구독입니다: 월 1 · 년 10 크래딧(연간 ≈ 두 달 무료). 이미지 작성(쓰기)에는 활성 구독이 필요하며, 구독 중에는 건당 차감 없이 무제한입니다. 결제는 공유 크래딧으로 하고(accounts.mrlatte.net 충전), 자동 갱신은 대시보드에서 끌 수 있습니다. 요금제 자세히 보기 →