버튼 카드
한 줄 요약 — 방문자가 한 번 누르면 다음 행동(웹 이동·같은 페이지의 다른 카드로 이동·전화·문자·이메일·카카오톡 공유·연락처 저장)으로 바로 이어지도록 만들어 주는 카드예요.
이 기능이 필요한 순간
- 페이지 끝에 “지금 예약하기 / 문의하기” 같은 행동 유도가 필요할 때
- 모바일 명함에 연락처 저장·통화·문자 버튼을 묶어두고 싶을 때
- 외부 사이트(쇼핑몰·블로그·예약 페이지)로 방문자를 안내해야 할 때
- 긴 페이지 상단에 목차 버튼을 두고 원하는 섹션 카드로 바로 내려가게 하고 싶을 때
버튼 카드 추가하기
에디터에서 [+ 카드 추가하기] 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 [버튼] 카드를 골라요. 페이지에 버튼 카드가 들어가요. 오른쪽 패널에 버튼 카드 설정이 열려요.
예약하기)은 좌측 미리보기에서 버튼 위 글자를 직접 눌러 바꿀 수 있어요. 우측 패널은 연결 / 디자인 두 축으로 나뉘어 있어요.
연결 옵션 고르기
버튼을 눌렀을 때 어떤 행동이 일어날지 정하는 단계예요. 우측 패널의 연결 섹션에서 일곱 가지 중 한 가지를 골라요. 선택한 옵션에 맞춰 입력 칸이 바뀌어요.
URL로 이동하게 하기
- 입력: 이동할 웹 주소 한 줄
- 동작: 버튼을 누르면 해당 주소가 새 화면에서 열려요
- 활용: 쇼핑몰 상품 페이지, 예약 시스템, 블로그 글 등 외부 링크 안내 (여러 상품을 이미지·가격까지 함께 보여주고 싶다면 상품 카드가 더 잘 어울려요)
http://나 www를 앞에 붙이지 않아도 자동으로 인식해요. URL 입력 칸 아래에는 새 창에서 열기 체크박스가 있어요. 켜 두면 방문자가 버튼을 눌렀을 때 새 창으로 페이지가 열려요.
같은 페이지 안의 특정 카드로 이동하게 하기
- 입력: (원페이지) 이동할 카드 한 장 · (멀티페이지) 이동할 페이지 번호 + 그 페이지 안의 카드 한 장
- 동작: 방문자가 버튼을 누르면 페이지가 스크롤되면서 지정한 카드가 화면 최상단에 오게 자리를 잡아요. 일반 웹의 앵커 링크와 같은 흐름이에요.
- 활용: 상단의 큰 배너 버튼에서 아래쪽 상세 갤러리로 바로 내려가게 하기, 목차형 페이지에서 각 섹션 카드로 이동하게 하기, 멀티페이지의 표지에서 특정 페이지의 상품 카드로 데려가기.
💡 카드 이름을 미리 정리해 두면 편해요 — 목록에는 카드 보드에 표시되는 카드명이 그대로 뜨기 때문에, 여러 카드 중에서 어느 카드로 이동시킬지 헷갈리지 않으려면 카드 보드에서 각 카드의 연필 아이콘으로 이름을 미리 손봐 두면 좋아요. 💡 원페이지 · 멀티페이지 어디에서든 새 창 옵션은 나타나지 않아요 — 같은 페이지 안에서 이동하는 동작이라 새 창을 여는 개념이 없어요.
전화로 연결하기
- 입력: 국가 코드와 전화번호
- 동작: 모바일에서 버튼을 누르면 스마트폰의 전화 앱이 열리며 번호가 미리 채워져요
- 활용: 매장 대표 번호, 상담 전화
문자를 보내게 하기
- 입력: 수신 번호와 미리 채워질 메시지 본문
- 동작: 모바일에서 버튼을 누르면 문자 앱이 열리고, 본문이 자동으로 채워진 상태로 발송 화면이 나타나요
- 활용: “주문 문의 보내기”, “행사 신청 메시지 보내기”
이메일을 보내게 하기
- 입력: 수신 이메일, 제목, 본문
- 동작: 버튼을 누르면 메일 앱이 열리고 제목·본문이 미리 채워져요
- 활용: 문의 메일, 견적 요청
카카오톡으로 이 페이지 공유하게 하기
- 입력: 없음 — 옵션을 고르면 별도 입력 칸이 나타나지 않아요
- 동작: 방문자가 버튼을 누르면 카카오톡 공유 화면이 열려 지금 보고 있는 페이지 링크를 지인·채팅방에 바로 보낼 수 있어요
- 활용: 이벤트 페이지·초대장·캠페인 페이지 등 페이지 자체를 확산시키고 싶을 때. 버튼 라벨은 “친구에게 공유하기”처럼 행동을 짧게 안내하는 문구가 잘 맞아요
💡 모바일 라이브 페이지에서 확인하세요 — 카카오톡 앱이 설치된 스마트폰에서 열어야 공유 화면이 뜨는 흐름이라, PC 미리보기에서는 동작이 다를 수 있어요. 발행 후 모바일 브라우저에서 실제 흐름을 한 번 테스트해 보세요.
연락처를 저장하게 하기
- 입력: 이름·휴대폰·회사·부서·직책·이메일
- 동작: 버튼을 누르면 입력해 둔 정보가 방문자 스마트폰의 연락처에 저장돼요
- 활용: 모바일 명함 페이지의 핵심 액션. 방문자가 명함을 한 번에 받아갈 수 있어요
💡 전화·문자·연락처 저장은 모바일 라이브 페이지에서 확인하세요 — PC 미리보기에서는 동작이 다를 수 있어요. 발행 후 모바일 브라우저에서 실제 흐름을 한 번 테스트해 보세요. (카카오톡 공유도 같은 이유로 모바일에서 확인해 주세요.)
디자인 다듬기
우측 패널의 디자인 섹션에서 버튼의 모양과 색을 정돈해요.
테두리·여백 — 버튼 둘레의 테두리와 카드 영역의 외부 여백을 조절해 다른 카드와 간격을 맞춰요. 카드 보드 공통 동작(배경·테두리·여백)은 에디터 살펴보기에서도 안내하고 있어요.
활용 팁
페이지 목적에 맞춰 자주 쓰이는 조합을 소개해요.- 모바일 명함 — 프로필 카드 아래에 연락처 저장 버튼과 전화 연결 버튼을 나란히 두면, 방문자가 명함과 통화를 한 번에 처리할 수 있어요.
- 이벤트·예약 페이지 — 페이지 끝에 큰 URL 이동 버튼 한 개를 두고 “지금 예약하기” 같은 행동 유도 문구를 적어요. 색은 페이지에서 가장 눈에 띄게.
- 문의 페이지 — 이메일 보내기에 제목·본문을 미리 채워두면 방문자가 빈 화면을 채우는 부담을 덜 수 있어요.
- 긴 원페이지의 목차 — 페이지 상단에 여러 버튼을 나열하고 각각 선택 카드로 이동하기를 걸어두면, 방문자가 원하는 섹션 카드로 한 번에 내려갈 수 있어요. 웹 페이지 상단의 앵커 목차와 같은 흐름이에요.
- 멀티페이지 표지에서 상세로 — 첫 페이지 커버에 선택 카드로 이동하기 버튼 두세 개를 두고 각각 다른 페이지의 상품·소개 카드로 연결하면, 방문자가 관심 있는 주제로 바로 진입할 수 있어요.
- 바이럴 페이지의 공유 유도 — 페이지 끝에 카카오톡 공유하기 버튼을 두고 “친구에게 알려주세요” 같은 라벨을 붙이면, 페이지 자체가 다른 채팅방으로 자연스럽게 퍼져 나가요.
자주 묻는 질문
Q. URL 앞에https://를 꼭 붙여야 하나요?
A. 붙이지 않아도 인식해요. cdbd.in처럼 도메인만 적어도 자동으로 보정돼요.
Q. 연락처 저장 버튼을 PC에서 눌렀는데 아무 일도 일어나지 않아요.
A. 연락처 저장은 모바일 스마트폰을 전제로 한 동작이에요. 발행한 페이지를 모바일에서 열어 한 번 더 확인해 보세요.
Q. 한 페이지에 버튼을 여러 개 두어도 괜찮나요?
A. 페이지 목적에 따라 자유롭게 배치할 수 있어요. 다만 한 화면에 버튼이 너무 많으면 어느 쪽을 눌러야 할지 헷갈릴 수 있으니, 가장 중요한 행동 한두 가지만 크게 강조하는 편이 좋아요.
Q. 선택 카드로 이동하기가 다른 카드(텍스트·이미지·2단 등)의 링크 연결 메뉴에도 있나요?
A. 네. 링크 연결 메뉴가 있는 카드는 모두 같은 여섯 가지 옵션을 공유해요. 예를 들어 이미지 카드나 2단 카드의 링크 연결에서도 [선택 카드로 이동하기] 를 골라 같은 방식으로 카드를 지정할 수 있어요.
Q. 카드 목록에 카드 이름이 아니라 다른 이름이 뜨는데요?
A. 목록에는 카드 보드에 표시되는 이름이 그대로 나타나요. 이름을 알아보기 쉽게 바꾸려면 카드 보드의 카드 행에 있는 연필 아이콘을 눌러 이름을 편집해 주세요.
Q. 선택 카드로 이동할 때도 새 창에서 열 수 있나요?
A. 같은 페이지 안에서 이동하는 동작이라 새 창 옵션은 나타나지 않아요. 완전히 다른 페이지·사이트로 보내야 한다면 URL로 이동하기를 골라 주세요.