> ## Documentation Index
> Fetch the complete documentation index at: https://cdbd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 버튼 카드
# 버튼 카드
> **한 줄 요약** — 방문자가 한 번 누르면 다음 행동(웹 이동·전화·문자·이메일·연락처 저장)으로 바로 이어지도록 만들어 주는 카드예요.
## 이 기능이 필요한 순간
* 페이지 끝에 **"지금 예약하기 / 문의하기"** 같은 행동 유도가 필요할 때
* 모바일 명함에 **연락처 저장·통화·문자** 버튼을 묶어두고 싶을 때
* 외부 사이트(쇼핑몰·블로그·예약 페이지)로 방문자를 안내해야 할 때
***
## 버튼 카드 추가하기
에디터에서 **\[+ 카드 추가하기]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[버튼]** 카드를 골라요. 페이지에 버튼 카드가 들어가요. 오른쪽 패널에 버튼 카드 설정이 열려요.
버튼 라벨(예: `예약하기`)은 좌측 미리보기에서 버튼 위 글자를 직접 눌러 바꿀 수 있어요. 우측 패널은 **연결 / 디자인** 두 축으로 나뉘어 있어요.
***
## 연결 옵션 고르기
버튼을 눌렀을 때 어떤 행동이 일어날지 정하는 단계예요. 우측 패널의 **연결** 섹션에서 다섯 가지 중 한 가지를 골라요. 선택한 옵션에 맞춰 입력 칸이 바뀌어요.
### URL로 이동하게 하기
* **입력**: 이동할 웹 주소 한 줄
* **동작**: 버튼을 누르면 해당 주소가 새 화면에서 열려요
* **활용**: 쇼핑몰 상품 페이지, 예약 시스템, 블로그 글 등 외부 링크 안내 (여러 상품을 이미지·가격까지 함께 보여주고 싶다면 [상품 카드](/editor/card-product)가 더 잘 어울려요)
`http://`나 `www`를 앞에 붙이지 않아도 자동으로 인식해요. URL 입력 칸 아래에는 **새 창에서 열기** 체크박스가 있어요. 켜 두면 방문자가 버튼을 눌렀을 때 새 창으로 페이지가 열려요.
### 전화로 연결하기
* **입력**: 국가 코드와 전화번호
* **동작**: 모바일에서 버튼을 누르면 스마트폰의 전화 앱이 열리며 번호가 미리 채워져요
* **활용**: 매장 대표 번호, 상담 전화
### 문자를 보내게 하기
* **입력**: 수신 번호와 미리 채워질 메시지 본문
* **동작**: 모바일에서 버튼을 누르면 문자 앱이 열리고, 본문이 자동으로 채워진 상태로 발송 화면이 나타나요
* **활용**: "주문 문의 보내기", "행사 신청 메시지 보내기"
### 이메일을 보내게 하기
* **입력**: 수신 이메일, 제목, 본문
* **동작**: 버튼을 누르면 메일 앱이 열리고 제목·본문이 미리 채워져요
* **활용**: 문의 메일, 견적 요청
### 연락처를 저장하게 하기
* **입력**: 이름·휴대폰·회사·부서·직책·이메일
* **동작**: 버튼을 누르면 입력해 둔 정보가 방문자 스마트폰의 연락처에 저장돼요
* **활용**: 모바일 명함 페이지의 핵심 액션. 방문자가 명함을 한 번에 받아갈 수 있어요
> 💡 **전화·문자·연락처 저장은 모바일 라이브 페이지에서 확인하세요** — PC 미리보기에서는 동작이 다를 수 있어요. 발행 후 모바일 브라우저에서 실제 흐름을 한 번 테스트해 보세요.
***
## 디자인 다듬기
우측 패널의 **디자인** 섹션에서 버튼의 모양과 색을 정돈해요.
**모양** — 모서리 형태를 **각진 / 둥근 / 원형** 세 가지 중에서 골라요. 브랜드 톤이 정돈된 느낌이면 둥근, 손글씨 같은 부드러운 페이지면 원형이 어울려요.
**색깔** — 6가지 기본 색상과 무지개 아이콘으로 직접 고르는 커스텀 색상까지, 총 7가지 중에서 버튼 배경색을 골라요. 페이지 테마 색을 그대로 쓰면 통일감 있고, 보색을 쓰면 강조 효과가 커져요.
**버튼 크기** — 버튼 자체의 크기를 **가로** 슬라이더와 **세로** 슬라이더로 각각 조절할 수 있어요. 본문 길이나 페이지 비중에 따라 자유롭게 맞춰보세요.
**글씨** — 서체와 글씨 크기를 조절해요. 페이지 전체 서체와 같은 계열로 묶으면 흐름이 자연스러워요.
**이미지** — 버튼 안에 이미지를 함께 넣을 수 있어요.
| 유형 | 합성 방식 |
| ---------- | ------------------------ |
| **가로 버튼형** | 왼쪽에 이미지, 오른쪽에 텍스트 |
| **카드형** | 위쪽에 이미지, 아래에 텍스트 |
| **배경형** | 이미지를 배경 전체로 깔고, 그 위에 텍스트 |
**테두리·여백** — 버튼 둘레의 테두리와 카드 영역의 외부 여백을 조절해 다른 카드와 간격을 맞춰요. 카드 보드 공통 동작(배경·테두리·여백)은 [에디터 살펴보기](/editor/overview)에서도 안내하고 있어요.
***
## 활용 팁
페이지 목적에 맞춰 자주 쓰이는 조합을 소개해요.
* **모바일 명함** — 프로필 카드 아래에 **연락처 저장** 버튼과 **전화 연결** 버튼을 나란히 두면, 방문자가 명함과 통화를 한 번에 처리할 수 있어요.
* **이벤트·예약 페이지** — 페이지 끝에 큰 **URL 이동** 버튼 한 개를 두고 "지금 예약하기" 같은 행동 유도 문구를 적어요. 색은 페이지에서 가장 눈에 띄게.
* **문의 페이지** — **이메일 보내기**에 제목·본문을 미리 채워두면 방문자가 빈 화면을 채우는 부담을 덜 수 있어요.
***
## 자주 묻는 질문
**Q. URL 앞에 `https://`를 꼭 붙여야 하나요?**
A. 붙이지 않아도 인식해요. `cdbd.in`처럼 도메인만 적어도 자동으로 보정돼요.
**Q. 연락처 저장 버튼을 PC에서 눌렀는데 아무 일도 일어나지 않아요.**
A. 연락처 저장은 모바일 스마트폰을 전제로 한 동작이에요. 발행한 페이지를 모바일에서 열어 한 번 더 확인해 보세요.
**Q. 한 페이지에 버튼을 여러 개 두어도 괜찮나요?**
A. 페이지 목적에 따라 자유롭게 배치할 수 있어요. 다만 한 화면에 버튼이 너무 많으면 어느 쪽을 눌러야 할지 헷갈릴 수 있으니, 가장 중요한 행동 한두 가지만 크게 강조하는 편이 좋아요.
***
## 함께 보면 좋은 문서
* [프로필 카드](/editor/card-profile) — 프로필 카드와 함께 두면 모바일 명함이 완성돼요
* [메뉴 카드](/editor/card-menu) — 여러 링크를 한 줄 탭으로 묶고 싶을 때
* [SNS 카드](/editor/card-sns) — 인스타·카카오톡 등 6개 채널을 한 번에 보여주고 싶을 때
* [2단 카드](/editor/card-2col) — 좌우로 분할된 영역에 버튼을 넣고 싶을 때
* [상품 카드](/editor/card-product) — 여러 상품을 이미지·가격과 함께 카탈로그처럼 보여주고 싶을 때