Skip to main content

버튼 카드

한 줄 요약 — 방문자가 한 번 누르면 다음 행동(웹 이동·전화·문자·이메일·연락처 저장)으로 바로 이어지도록 만들어 주는 카드예요.

이 기능이 필요한 순간

  • 페이지 끝에 “지금 예약하기 / 문의하기” 같은 행동 유도가 필요할 때
  • 모바일 명함에 연락처 저장·통화·문자 버튼을 묶어두고 싶을 때
  • 외부 사이트(쇼핑몰·블로그·예약 페이지)로 방문자를 안내해야 할 때

버튼 카드 추가하기

에디터에서 [+ 카드 추가하기] 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 [버튼] 카드를 골라요. 페이지에 버튼 카드가 들어가요. 오른쪽 패널에 버튼 카드 설정이 열려요. 버튼 카드 — 색깔과 모양을 다르게 적용한 세 가지 버튼 비교 버튼 라벨(예: 예약하기)은 좌측 미리보기에서 버튼 위 글자를 직접 눌러 바꿀 수 있어요. 우측 패널은 연결 / 디자인 두 축으로 나뉘어 있어요.

연결 옵션 고르기

버튼을 눌렀을 때 어떤 행동이 일어날지 정하는 단계예요. 우측 패널의 연결 섹션에서 다섯 가지 중 한 가지를 골라요. 선택한 옵션에 맞춰 입력 칸이 바뀌어요. URL 이동 연결 옵션 — 주소 입력 칸과 옵션 패널

URL로 이동하게 하기

  • 입력: 이동할 웹 주소 한 줄
  • 동작: 버튼을 누르면 해당 주소가 새 화면에서 열려요
  • 활용: 쇼핑몰 상품 페이지, 예약 시스템, 블로그 글 등 외부 링크 안내 (여러 상품을 이미지·가격까지 함께 보여주고 싶다면 상품 카드가 더 잘 어울려요)
http://www를 앞에 붙이지 않아도 자동으로 인식해요. URL 입력 칸 아래에는 새 창에서 열기 체크박스가 있어요. 켜 두면 방문자가 버튼을 눌렀을 때 새 창으로 페이지가 열려요.

전화로 연결하기

  • 입력: 국가 코드와 전화번호
  • 동작: 모바일에서 버튼을 누르면 스마트폰의 전화 앱이 열리며 번호가 미리 채워져요
  • 활용: 매장 대표 번호, 상담 전화

문자를 보내게 하기

  • 입력: 수신 번호와 미리 채워질 메시지 본문
  • 동작: 모바일에서 버튼을 누르면 문자 앱이 열리고, 본문이 자동으로 채워진 상태로 발송 화면이 나타나요
  • 활용: “주문 문의 보내기”, “행사 신청 메시지 보내기”

이메일을 보내게 하기

  • 입력: 수신 이메일, 제목, 본문
  • 동작: 버튼을 누르면 메일 앱이 열리고 제목·본문이 미리 채워져요
  • 활용: 문의 메일, 견적 요청

연락처를 저장하게 하기

  • 입력: 이름·휴대폰·회사·부서·직책·이메일
  • 동작: 버튼을 누르면 입력해 둔 정보가 방문자 스마트폰의 연락처에 저장돼요
  • 활용: 모바일 명함 페이지의 핵심 액션. 방문자가 명함을 한 번에 받아갈 수 있어요
💡 전화·문자·연락처 저장은 모바일 라이브 페이지에서 확인하세요 — PC 미리보기에서는 동작이 다를 수 있어요. 발행 후 모바일 브라우저에서 실제 흐름을 한 번 테스트해 보세요.

디자인 다듬기

우측 패널의 디자인 섹션에서 버튼의 모양과 색을 정돈해요. 버튼 카드 디자인 패널 모양 — 모서리 형태를 각진 / 둥근 / 원형 세 가지 중에서 골라요. 브랜드 톤이 정돈된 느낌이면 둥근, 손글씨 같은 부드러운 페이지면 원형이 어울려요. 색깔 — 6가지 기본 색상과 무지개 아이콘으로 직접 고르는 커스텀 색상까지, 총 7가지 중에서 버튼 배경색을 골라요. 페이지 테마 색을 그대로 쓰면 통일감 있고, 보색을 쓰면 강조 효과가 커져요. 버튼 크기 — 버튼 자체의 크기를 가로 슬라이더와 세로 슬라이더로 각각 조절할 수 있어요. 본문 길이나 페이지 비중에 따라 자유롭게 맞춰보세요. 글씨 — 서체와 글씨 크기를 조절해요. 페이지 전체 서체와 같은 계열로 묶으면 흐름이 자연스러워요. 이미지 — 버튼 안에 이미지를 함께 넣을 수 있어요. 테두리·여백 — 버튼 둘레의 테두리와 카드 영역의 외부 여백을 조절해 다른 카드와 간격을 맞춰요. 카드 보드 공통 동작(배경·테두리·여백)은 에디터 살펴보기에서도 안내하고 있어요.

활용 팁

페이지 목적에 맞춰 자주 쓰이는 조합을 소개해요.
  • 모바일 명함 — 프로필 카드 아래에 연락처 저장 버튼과 전화 연결 버튼을 나란히 두면, 방문자가 명함과 통화를 한 번에 처리할 수 있어요.
  • 이벤트·예약 페이지 — 페이지 끝에 큰 URL 이동 버튼 한 개를 두고 “지금 예약하기” 같은 행동 유도 문구를 적어요. 색은 페이지에서 가장 눈에 띄게.
  • 문의 페이지이메일 보내기에 제목·본문을 미리 채워두면 방문자가 빈 화면을 채우는 부담을 덜 수 있어요.

자주 묻는 질문

Q. URL 앞에 https://를 꼭 붙여야 하나요? A. 붙이지 않아도 인식해요. cdbd.in처럼 도메인만 적어도 자동으로 보정돼요. Q. 연락처 저장 버튼을 PC에서 눌렀는데 아무 일도 일어나지 않아요. A. 연락처 저장은 모바일 스마트폰을 전제로 한 동작이에요. 발행한 페이지를 모바일에서 열어 한 번 더 확인해 보세요. Q. 한 페이지에 버튼을 여러 개 두어도 괜찮나요? A. 페이지 목적에 따라 자유롭게 배치할 수 있어요. 다만 한 화면에 버튼이 너무 많으면 어느 쪽을 눌러야 할지 헷갈릴 수 있으니, 가장 중요한 행동 한두 가지만 크게 강조하는 편이 좋아요.

함께 보면 좋은 문서

  • 프로필 카드 — 프로필 카드와 함께 두면 모바일 명함이 완성돼요
  • 메뉴 카드 — 여러 링크를 한 줄 탭으로 묶고 싶을 때
  • SNS 카드 — 인스타·카카오톡 등 6개 채널을 한 번에 보여주고 싶을 때
  • 2단 카드 — 좌우로 분할된 영역에 버튼을 넣고 싶을 때
  • 상품 카드 — 여러 상품을 이미지·가격과 함께 카탈로그처럼 보여주고 싶을 때