갤러리 카드
갤러리 카드는 여러 장의 사진을 한 번에 보여줄 때 사용해요. 쇼핑몰 상품 사진, 부동산 매물 사진, 포트폴리오 이미지 등 다수의 사진으로 정보를 전달해야 할 때 특히 유용하답니다.💡 상품을 가격·구매 버튼과 함께 진열하고 싶다면? — 사진만 모아 보여주는 갤러리 대신 상품 카드를 써 보세요. 상품 페이지 주소만 붙여 넣으면 이미지·상품명·가격·구매 버튼이 자동으로 한 칸 안에 묶여요.
1. 이미지 추가하기
갤러리 카드를 추가한 뒤 우측 패널의 이미지 목록에 있는 + 버튼을 눌러 이미지를 추가해요. 최대 15장까지 한 갤러리에 담을 수 있어요. 추가 방법은 일반 이미지 카드와 동일해요.- 내 이미지 (직접 업로드): 클릭 또는 끌어다 놓기로 업로드 (1장당 최대 10MB)
- 이미지 검색: Pexels 무료 사진 검색
- GIF 검색: Giphy GIF 검색
2. 갤러리 레이아웃 선택하기
유형 영역에서 이미지를 어떻게 보여줄지 레이아웃을 선택해요. 콘텐츠 성격에 맞는 방식을 골라 보세요.- 나열하기: 이미지들을 위아래로 일렬 배치 — 큰 사진을 하나씩 차근차근 보여주고 싶을 때
- 넘겨보기 (슬라이드): 좌우로 넘기는 슬라이드 형태. 내비게이션 화살표·지표를 숨길 수 있고, 1~4초 간격으로 자동 슬라이드 설정도 가능해요.
- 그리드: 2단·3단·4단 바둑판 배열 — 한 화면에서 여러 이미지를 비교·탐색하게 하고 싶을 때
3. 간격 조절하기
이미지 사이의 간격을 슬라이더로 조절해서 빽빽한 느낌부터 여유로운 배치까지 자유롭게 표현할 수 있어요.4. 🎨 이미지 모양 꾸미기
4.1 비율 선택하기
원본, 1:1, 가로, 세로 비율 중 원하는 형태를 선택할 수 있어요. 비율을 통일하면 갤러리 전체가 정돈된 인상을 줘요.4.2 모서리 모양 설정하기
각진 모서리 또는 둥근 모서리 중 선택할 수 있어요.4.3 확대 보기 설정하기
방문자가 갤러리 속 이미지를 눌렀을 때 크게 볼 수 있도록 해주는 기능이에요. 이미지 모양 섹션 안의 확대 보기에서 켜고 끌 수 있어요.
갤러리의 확대 화면은 사진첩처럼 넘겨볼 수 있어요. 누른 이미지부터 시작해서, 갤러리에 담긴 이미지들을 그 자리에서 순서대로 넘겨볼 수 있답니다.
PC에서는 좌우 ‹ › 화살표 버튼과 하단 지표(●○○○○)가 함께 나타나요.
- 첫 번째 이미지에서는 이전(‹) 버튼이, 마지막 이미지에서는 다음(›) 버튼이 사라져요. 끝까지 가면 처음으로 되돌아가지 않고 거기서 멈춰요.
- 모바일에서는 두 손가락으로 오므렸다 펴는 핀치 동작으로 더 크게 확대해서 볼 수 있어요.
- 닫을 때는 이미지 바깥 어두운 영역을 누르거나 오른쪽 위 ✕ 버튼을 누르면 돼요.
- 원페이지·멀티페이지 뷰어 모두 같은 방식으로 동작해요.
⚠️ 링크를 함께 걸었다면 링크가 우선이에요 — 링크 연결이 설정된 갤러리는 이미지를 눌렀을 때 확대 화면 대신 연결된 곳으로 이동해요.
4.4 테두리·여백 추가하기
이미지에 테두리를 더하거나 카드 외부 여백을 조절해서 다른 카드와의 시각적 분리감을 만들 수 있어요.💡 활용 팁:
- 그리드는 메뉴/상품 한눈에 보기 좋아요 — 위 스크린샷처럼 3단 그리드는 이벤트 라인업·갤러리 모음에 어울려요.
- 나열하기는 한 장씩 큰 화면으로 강조하고 싶을 때 좋아요.
- 슬라이드 + 자동 넘김은 이벤트 홍보·신제품 소개에 효과적 — 방문자가 별도 조작 없이 모든 이미지를 자연스럽게 보게 돼요.