이미지 갤러리
한 줄 메이슨리 갤러리 + 전체화면 뷰어
마운트 태그 안에 img 태그만 넣으면 반응형 메이슨리 갤러리가 됩니다. 이미지를 누르면 내장 전체화면 뷰어가 열리고(←/→ 이동, Esc 닫기, alt 캡션), 열 수(data-columns)와 간격(data-gap)을 바꿀 수 있습니다. 원본 img 태그는 문서에 그대로 남아 SEO, no-JS 폴백도 유지됩니다. 라이트박스 위젯이 이미 페이지에 있는 이미지에 붙는 것이라면, 갤러리는 이미지 묶음의 배치까지 맡습니다. BootSignal 구독에 포함됩니다(월 $20 또는 연 $200, 모든 위젯, 도메인 1개, 도메인은 대시보드에서 추가). 구독 중에는 이미지 작성량 제한이 없습니다.
데모
미리보기%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)가 사이트의 다른 위젯도 함께 동작시킵니다. 위젯 표시에는 활성 구독이 필요합니다.
요금
요금은 BootSignal 구독 하나로 끝납니다: 월 $20 또는 연 $200(2개월 무료). 구독하면 모든 위젯을 등록 도메인 1개에서 쓸 수 있고, 도메인이 더 필요하면 대시보드에서 추가할 수 있습니다. 이미지 작성(쓰기)에는 활성 구독이 필요하고, 구독 중에는 건당 과금 없이 무제한이며, 방문자의 읽기는 항상 무료입니다. 구독, 결제는 accounts.mrlatte.net 계정 허브에서 관리합니다. 요금제 자세히 보기 →
설치 가이드
실제로 쓰는 플랫폼에 맞춘 단계별 안내입니다.