안내장이 더 풍부해졌습니다 — 카드 그리드 · 카운트다운 · 갤러리 · 캘린더 신규 추가

지난주 FAQ 와 체크리스트 블록을 추가한 데 이어 이번엔 4가지 새 블록을 한 번에 출시했습니다.

• 카드 그리드 — 가로 스와이프 캐러셀로 다수 카드 압축
• 카운트다운 — 행사·마감일까지 D-Day 실시간 카운트
• 갤러리 — 3열 사진 격자 + 라이트박스 확대
• 캘린더 — 사용자가 자기 캘린더 앱에 한 클릭 등록

각각 다른 운영 시나리오를 겨냥하지만, 페어로 묶어 쓰면 효과가 배가됩니다. 이번 글에서는 4가지가 무엇이고 어떻게 만드는지, 그리고 함께 쓸 때 가치가 폭발하는 조합까지 정리합니다.

왜 이 4가지를 한 번에

각 블록은 다른 페인포인트를 풉니다.

• 카드 그리드 — 연사·팀·서비스·매물 등 같은 형식의 항목 다수를 안내장 한 섹션에 압축
• 카운트다운 — 행사 임박감을 시각적으로 전달해 등록률·참여율 향상
• 갤러리 — 호텔·여행지·매물 등 시각이 핵심인 콘텐츠의 임팩트
• 캘린더 — 등록 후 일정 잊지 않도록 사용자 캘린더 앱에 자동 등록

모두 일반 텍스트·이미지 블록으로는 표현 못 하는 상호작용을 제공합니다. 카드 그리드는 스와이프, 카운트다운은 실시간 갱신, 갤러리는 라이트박스, 캘린더는 외부 앱 연동. 운영자 인터뷰에서 자주 나온 요구 4가지를 한 번에 풉니다.

카드 그리드 — 가로 스와이프 캐러셀

무엇인가

이미지·제목·본문이 들어간 카드를 여러 장 만들어 가로로 스와이프해서 보는 블록입니다. 한 카드 폭이 화면의 약 78% 라 다음 카드 끝이 살짝 보여(peek 효과) "옆에 더 있다"는 신호가 즉시 전달됩니다.

세로 안내장에 카드 6장을 그냥 쌓으면 페이지가 길어지지만, 캐러셀에 담으면 한 섹션으로 압축됩니다.

언제 쓰면 좋은가

상황	카드 내용
행사 연사 소개	사진 + 이름 + 직책 소개
호텔 부대시설	시설 사진 + 시설명 + 한 줄 설명
학원 강사 소개	강사 사진 + 이름 + 담당 과목
기업 서비스 소개	아이콘 + 서비스명 + 한 줄 설명
단체 여행 명소	명소 사진 + 명소명 + 짧은 설명

만드는 법 — 3단계

1단계 — 안내장 편집기에서 좌측 플러스 버튼에 마우스를 올려 메뉴를 펼친 뒤 ▢▢ 아이콘 클릭.

2단계 — 블록 제목(옵션) 수정. 기본값은 "카드 그리드".

3단계 — 각 카드의 이미지 업로드 + 제목 + 본문 입력. 하단 "+ 카드 추가" 로 카드 늘림.

조회 모드에서는 카드가 가로로 나열되고, 사용자가 좌우 스와이프로 다음 카드를 봅니다. 하단에 페이지 인디케이터(●○○) 가 자동 표시됩니다.

작은 팁

• 카드 1장만 있을 때: 캐러셀 비활성화, 단일 카드가 전체 폭으로 표시
• 이미지 비율: 4:3 으로 자동 크롭 (편집 시점에서 미리보기 가능 — WYSIWYG)
• 편집 모드: 가로 캐러셀이 아닌 세로 1열로 펼쳐져 모든 카드를 한눈에 비교·편집

카운트다운 — D-Day 실시간 카운트

무엇인가

미래의 행사일·마감일까지 남은 시간을 4분할 박스(일 · 시간 · 분 · 초) 로 큰 숫자로 표시하는 블록입니다. 1초마다 자동 갱신되어 임박감을 시각적으로 전달합니다.

언제 쓰면 좋은가

상황	효과
워크숍 · 세미나 일정 안내	행사 1주일 전부터 D-Day 시각화
조기등록 할인 마감	마지막 며칠 동안 강한 압박감
단체 여행 출발	출발일 임박감 + 준비물 챙기게
캠프 입소일	학부모·참가자 일정 인식
한정 상품 출시	호기심 자극 + 첫 구매 유도
신규 매장 오픈	사전 마케팅 + 오픈일 인지

만드는 법 — 3단계

1단계 — 플러스 버튼 메뉴에서 ⏱ 아이콘 클릭.

2단계 — 블록을 클릭해 활성화. 편집 필드가 펼쳐집니다.

3단계 — 목표 일시(분 단위 입력) + 종료 후 표시할 메시지(기본 "행사 종료") 입력.

미리보기는 라이브로 갱신됩니다. 운영자가 입력한 순간부터 카운트다운이 실시간 작동.

동작 디테일

• 남은 시간 계산: 사용자 브라우저 로컬 시각 기준
• 종료 시: 4분할 박스 사라지고 "행사 종료" (커스터마이즈 가능) 메시지로 전환
• 자릿수: 일은 가변(D-7, D-30), 시·분·초는 항상 2자리
• 모바일 360px 이하: 숫자 폰트 자동 축소

갤러리 — 3열 사진 그리드 + 라이트박스

무엇인가

사진 다수를 3열 정사각 격자로 인스타그램 스타일로 배치하고, 썸네일을 탭하면 전체 화면 라이트박스로 확대되는 블록입니다.

라이트박스 안에서 좌우 스와이프로 사진 간 이동, 캡션 표시, 가로 모드 시 자동 최적화, 안드로이드에서는 전체화면 모드까지 지원됩니다.

언제 쓰면 좋은가

상황	활용
호텔 안내	객실 · 부대시설 · 뷰 사진 6장에서 12장
결혼식 안내	신랑신부 스냅 + 식장 사진
매물 페이지	거실 · 침실 · 주방 · 욕실 · 외관
단체 여행	명소 · 숙소 · 식당 사진
학원 안내	강의실 · 시설 · 이벤트 사진
회사 소개	사무실 · 팀 · 제품 사진

만드는 법 — 3단계

1단계 — 플러스 버튼 메뉴에서 ▣ 아이콘 클릭.

2단계 — 사진 한 장씩 업로드. 캡션은 옵션 (라이트박스에서만 표시).

3단계 — "+ 사진 추가" 로 사진 늘림.

라이트박스 동작

• 썸네일 탭 → 해당 사진이 전체 화면으로 확대
• 좌우 스와이프 → 다음 / 이전 사진
• 가로 모드 회전 → 캡션 · 인디케이터 자동 숨김으로 이미지 영역 최대화
• ⛶ 버튼 → 안드로이드에서는 진짜 전체화면 (브라우저 chrome 사라짐)
• ✕ 또는 배경 탭 → 닫기

캘린더 — 한 클릭으로 내 일정에 등록

무엇인가

행사 정보를 입력하면 사용자가 자기 캘린더 앱에 한 번에 등록할 수 있는 블록입니다. Google · Apple · Outlook 모두 지원. iCal 표준 .ics 파일로 다운로드되거나 각 캘린더의 직접 URL 로 등록됩니다.

선택적으로 월간 캘린더 격자 모드도 지원해 다일 행사(캠프, 시리즈 행사 등)의 시각화도 가능합니다.

언제 쓰면 좋은가

상황	모드	효과
워크숍 · 세미나 1일	버튼	참가자가 캘린더에 즉시 등록
결혼식 안내장	버튼	하객이 일정 잊지 않게
학원 설명회	버튼	학부모 캘린더 등록
캠프 4박 5일	월간	4일 모두 강조된 시각화
행사 시리즈 (매주)	월간	회차 패턴이 한눈에
부동산 오픈하우스 시리즈	월간	방문 가능일 한눈에

만드는 법 — 3단계

1단계 — 플러스 버튼 메뉴에서 31 아이콘 클릭.

2단계 — 블록 클릭으로 활성화. 표시 방식(버튼 / 월간 캘린더) 토글로 선택.

3단계 — 이벤트 제목 + 시작 / 종료 일시 + 장소(옵션) + 설명(옵션) 입력. 종일 이벤트면 토글 켜기.

결과

조회 모드에서 사용자에게는:

1. 행사 요약 (제목, 일시, 장소)
2. "📅 캘린더에 추가" 큰 버튼
3. 아래 작은 글씨로 "Google · Apple · Outlook" 직접 URL 링크

월간 모드는 추가로 한 달 격자가 위에 표시되어 행사 날짜가 강조됩니다.

블록 페어링 — 함께 쓰면 효과 배가

이 4가지는 단독으로도 가치 있지만, 조합하면 더 큰 효과를 냅니다.

행사 안내장 — "임박감" + "행동 유도" 조합

1. 표지 (행사명)
2. [카운트다운] — D-3 12:34:56  ← 임박감
3. [캘린더] — 📅 내 일정에 추가   ← 행동 유도
4. 지도 + 일정표
5. [카드 그리드] — 연사 소개 5명  ← 시각적 매력
6. [FAQ]

카운트다운으로 마음 잡고, 캘린더로 잊지 않게 잠금. 강력한 조합.

호텔 안내장 — "시각적 매력" + "정보 정리" 조합

1. 표지 (호텔명)
2. [갤러리] — 객실 · 시설 · 뷰 사진 12장  ← 시각적 매력
3. 지도
4. [카드 그리드] — 부대시설 6개 (수영장, 사우나, 피트니스 등)
5. [FAQ] — Wi-Fi, 조식, 주차 등
6. [체크리스트] — 체크아웃 전 확인 사항

갤러리로 첫인상 잡고, 카드 그리드로 시설별 안내, FAQ 로 반복 문의 차단.

단체 여행 안내장 — "기대감" + "준비" 조합

1. 표지 (여행지명)
2. [카운트다운] — 출발일까지        ← 기대감
3. [캘린더] — 출발일 + 캘린더 등록   ← 행동
4. [갤러리] — 명소 사진             ← 기대감 ↑
5. 일정표
6. [체크리스트] — 출발 전 준비물 10가지
7. [FAQ] — 환전, 비자, 보험 등
8. [카드 그리드] — 가이드 + 운전기사 소개

카운트다운 + 갤러리로 기대감 키우고, 체크리스트로 준비 누락 방지.

학원 설명회 — "신뢰 구축" + "등록 유도" 조합

1. 표지 (학원명, 설명회 일시)
2. [캘린더] — 설명회 일정 등록     ← 행동
3. [카드 그리드] — 강사 5명 소개   ← 신뢰
4. [갤러리] — 강의실 · 시설 사진   ← 신뢰
5. 커리큘럼 (표)
6. [FAQ] — 수업료, 환불, 결석 보강 등
7. [체크리스트] — 등록일 가져올 서류

캘린더로 일정 잠그고, 카드 그리드 + 갤러리로 신뢰 구축.

시작하는 법

지금 안내장 편집기에 접속하시면 4가지 블록 모두 사용 가능합니다.

1. 가이드짱 안내장 목록 으로 이동
2. 기존 안내장을 열거나 새로 생성
3. 본문 좌측의 플러스 버튼 에 마우스를 올리면 펼쳐지는 메뉴 하단에 새 아이콘 4개가 보입니다:
   • ▢▢ — 카드 그리드
   • ⏱ — 카운트다운
   • ▣ — 갤러리
   • 31 — 캘린더
4. 원하는 위치에서 클릭해 삽입

다음 단계로 준비 중인 블록

이번 출시로 가이드짱의 블록 시스템은 총 15개에 이릅니다. 다음으로 검토 중인 블록은:

• 타임라인 블록 — 행사 일정 · 여행 코스를 시각적 시간순으로
• 인용 · 콜아웃 박스 — 강조 메시지 · 주의사항
• 공유 버튼 — 카톡 · SMS · 복사 한 번에
• 첨부파일 — PDF · 매뉴얼 다운로드
• 가격 비교 표 — B2B 서비스 플랜 · 매물 비교

새 블록 우선순위에 의견이 있으시면 가이드짱 안내장 내 피드백 또는 운영자 단톡방으로 알려 주세요.

관련 글

• FAQ + 체크리스트 블록 신규 추가
• 노쇼와 반복 문의를 줄이는 7가지 활용법
• 출발 D-7 체크리스트로 준비물 누락 방지
• 모바일 안내장 표지 디자인 7원칙