# 에디터에 데이터 적용하기
Source: https://cdbd.mintlify.app/data/editor-data
# 에디터에 데이터 적용하기
[데이터 관리하기](/data/management)에서 입력한 고객 정보(이름, 포인트, 이미지 등)를 에디터 카드에 연결하는 방법이에요. 이 작업을 거쳐야 각 개별 URL에서 고객별 맞춤 내용이 실제로 표시돼요.
![에디터 화면]()
***
## 1. ⊕ 아이콘으로 텍스트에 데이터 삽입하기
텍스트 내용을 고객별 데이터로 채우려면 **주황색 ⊕ 아이콘**을 사용해요. 텍스트 카드뿐만 아니라 버튼 텍스트, 프로필 이름·소개글 등 텍스트를 직접 편집하는 모든 영역에서 사용할 수 있어요.
### 순서
1. 에디터에서 데이터를 넣고 싶은 **카드를 선택**해요.
2. 폰 미리보기에서 텍스트 영역을 클릭해 **편집 모드로 진입**해요.
3. 데이터를 삽입할 **위치에 커서**를 놓아요.
4. 카드 오른쪽에 나타나는 **주황색 ⊕ 아이콘**을 클릭해요.
5. 목록에서 연결할 \*\*데이터 열(그룹)\*\*을 선택해요.
6. 커서 위치에 **주황색 데이터 태그**가 삽입돼요.
| 삽입 전 텍스트 | 삽입 후 텍스트 |
| -------- | --------------- |
| `안녕하세요!` | `안녕하세요, [이름]님!` |
> 💡 **주황색 태그**는 에디터 화면에서는 열 이름으로 표시되지만, 실제 개별 URL로 접속하면 해당 고객의 데이터 값으로 자동 치환돼요.
***
## 2. 이미지에 데이터 적용하기
이미지 카드에 고객별 이미지를 연결할 수 있어요. 이미지 데이터 적용은 두 단계로 이루어져요.
### 2.1 데이터 관리에서 이미지 열 준비하기
먼저 [데이터 관리하기](/data/management)에서 이미지를 연결할 열의 **🖼️ 아이콘**을 클릭해 이미지 연결 작업을 완료해야 해요.
→ [개별 이미지 적용하기](/data/individual-image)에서 이미지 등록 방법을 자세히 볼 수 있어요.
### 2.2 에디터에서 이미지 카드에 데이터 적용하기
![이미지 카드 패널]()
이미지 데이터가 준비되면 에디터에서 이미지 카드를 선택하고 데이터 태그를 연결해요.
1. 에디터에서 **이미지 카드**를 선택해요.
2. 폰 미리보기에서 이미지 영역을 클릭해 **편집 모드로 진입**해요.
3. 카드 오른쪽에 나타나는 **주황색 ⊕ 아이콘**을 클릭해요.
4. 목록에서 이미지가 연결된 **데이터 열**을 선택해요.
5. 개별 URL마다 해당 고객의 이미지가 자동으로 표시돼요.
***
## 3. 링크 URL에 데이터 삽입하기
버튼, 이미지, 텍스트, 갤러리 등 **링크가 있는 카드**에서는 연결 URL에도 데이터 태그를 넣을 수 있어요. URL에 고객 ID나 이름을 포함시켜 개인화된 랜딩 페이지로 연결할 때 유용해요.
![버튼 카드 — 링크 연결 패널]()
1. 카드를 선택하고 우측 패널의 **\[링크 연결]** 섹션을 열어요.
2. URL 입력 필드를 클릭해요.
3. 필드 옆의 **⊕ 아이콘**을 클릭하거나, 직접 `[열 이름]` 형식으로 태그를 입력해요.
| 삽입 예시 | 결과 |
| --------------------------------------- | ----------------------------------------- |
| `https://cdbd.in/event/[이름]` | `https://cdbd.in/event/김재인` |
| `https://myshop.com/coupon?code=[쿠폰코드]` | `https://myshop.com/coupon?code=SUMMER30` |
***
## 4. 프로필 카드에 데이터 적용하기
![프로필 카드 패널]()
프로필 카드의 **이름**과 **소개글**에 데이터를 연결하면 고객별 프로필 페이지를 만들 수 있어요.
1. 에디터에서 **프로필 카드**를 선택해요.
2. 폰 미리보기에서 **이름 또는 소개글 텍스트 영역**을 클릭해요.
3. 커서 위치에 ⊕ 아이콘이 나타나면 클릭해 데이터 열을 선택해요.
***
## 5. 페이지 제목에 데이터 적용하기
에디터 카드보드 상단의 **페이지 제목**에도 데이터 태그를 넣을 수 있어요.
1. 에디터 카드보드 상단의 **제목 입력 영역**을 클릭해요.
2. ⊕ 아이콘이 나타나면 클릭해 데이터 열을 선택해요.
***
## 6. 적용 가능한 모든 영역
| 카드 / 영역 | 적용 위치 | 방법 |
| ---------- | ----------- | ------------------------------- |
| **텍스트 카드** | 텍스트 내용 전체 | ⊕ 아이콘 (폰 미리보기에서 편집) |
| **텍스트 카드** | 링크 연결 URL | ⊕ 아이콘 또는 `[열 이름]` 직접 입력 (우측 패널) |
| **버튼 카드** | 버튼 텍스트 | ⊕ 아이콘 (폰 미리보기에서 편집) |
| **버튼 카드** | 링크 연결 URL | ⊕ 아이콘 또는 `[열 이름]` 직접 입력 (우측 패널) |
| **이미지 카드** | 이미지 소스 | 데이터 관리 이미지 열 연결 후 ⊕ 아이콘 |
| **이미지 카드** | 링크 연결 URL | ⊕ 아이콘 또는 `[열 이름]` 직접 입력 (우측 패널) |
| **갤러리 카드** | 링크 연결 URL | ⊕ 아이콘 또는 `[열 이름]` 직접 입력 (우측 패널) |
| **2단 카드** | 각 칸의 텍스트 내용 | ⊕ 아이콘 (폰 미리보기에서 편집) |
| **2단 카드** | 링크 연결 URL | ⊕ 아이콘 또는 `[열 이름]` 직접 입력 (우측 패널) |
| **프로필 카드** | 이름 | ⊕ 아이콘 (폰 미리보기에서 편집) |
| **프로필 카드** | 소개글 | ⊕ 아이콘 (폰 미리보기에서 편집) |
| **페이지 제목** | 제목 텍스트 | ⊕ 아이콘 (카드보드 상단 제목 영역) |
***
## 7. 대체어 활용하기
데이터 관리 화면에서 **대체어**를 설정해 두면, 특정 고객의 데이터가 없을 때 기본값이 표시돼요.
예를 들어 이름 열의 대체어를 `고객`으로 설정하면:
* 이름 데이터가 있는 경우: `김재인님 안녕하세요!`
* 이름 데이터가 없는 경우: `고객님 안녕하세요!`
***
## 8. 개별 URL에서 결과 확인하기
에디터 작업이 완료되면 [변경사항 게시 → 개별 URL 생성](/data/management#6-개별-url-생성하기) 후, 생성된 개별 URL 중 하나로 접속해 데이터가 올바르게 표시되는지 확인해 보세요.
> 💡 **팁**: 전체 발송 전에 1\~2개 URL로 미리 확인하는 습관을 들이면 오류를 예방할 수 있어요.
# 개별 이미지 적용하기
Source: https://cdbd.mintlify.app/data/individual-image
# 개별 이미지 적용하기
> **한 줄 요약** — 고객마다 다른 사진이 표시되는 페이지를 만들고 싶을 때, 데이터 관리하기에서 이미지를 등록하고 에디터의 이미지 카드에 적용하는 방법을 안내해요.
## 이 기능이 필요한 순간
* 고객마다 다른 프로필 사진이나 상품 이미지를 보여주고 싶을 때
* 이름·포인트 같은 글자뿐 아니라 **이미지까지 한 사람씩 다르게** 넣고 싶을 때
* 한 페이지로 여러 사람에게 각자 다른 이미지가 담긴 링크를 보내고 싶을 때
## 개별 이미지가 무엇인가요?
개별 이미지는 **고객마다 서로 다른 이미지**를 페이지에 표시하는 기능이에요. 예를 들어 고객별 프로필 사진이나 맞춤 쿠폰 이미지를 한 사람씩 다르게 보여줄 수 있어요.
별도의 메뉴가 따로 있는 것은 아니에요. [데이터 관리하기](/data/management) 안에 있는 **"이미지 연결하기"** 기능을 사용해요. 데이터 표의 한 열을 이미지와 연결해 두면, 고객마다 발급된 개별 URL에서 그 고객의 이미지가 자동으로 표시돼요.
## 사용 방법
개별 이미지 적용은 두 단계로 나뉘어요. 먼저 **데이터 관리하기**에서 이미지를 등록하고(1\~5단계), 그다음 **에디터**에서 이미지 카드에 적용해요(6단계).
### 1단계. 데이터 관리하기 열기
내 페이지 목록에서 원하는 페이지 카드에 마우스를 올려요. 썸네일 오른쪽 위의 **⋯ 버튼**을 눌러요. 열린 메뉴에서 **\[데이터 관리하기]** 를 선택해 보세요.
![내 페이지 ⋯ 메뉴에서 데이터 관리하기 선택]()
데이터 관리 화면이 처음이라면 **\[데이터 생성하기]** 버튼을 눌러 데이터 표를 만들어요.
> ⚠️ **주의** — 이 기능은 **URL을 만든(게시한) 페이지**에서 사용할 수 있어요. 평생 무료(FREE) URL을 사용 중인 페이지는 데이터를 만들 수 없어요. 이때는 해당 페이지를 복제한 뒤 복제본에서 시작해 보세요.
### 2단계. 이미지를 담을 열 만들기
이미지는 데이터 표의 **한 열**에 담아요. 좌측 위의 **\[데이터 추가 ▾]** 버튼을 눌러요. 메뉴에서 **\[열 추가]** 를 선택하면 새 열이 만들어져요.
![데이터 추가 드롭다운에서 열 추가 선택]()
새로 만든 열의 이름 부분을 누르면 원하는 이름(예: `프로필 사진`)으로 바꿀 수 있어요.
### 3단계. 이미지 연결하기 열기
이미지를 담을 열의 헤더에는 아이콘 세 개가 있어요. 그중 **가운데 이미지 아이콘(🖼️)** 을 누르면 **"이미지 연결하기"** 창이 열려요.
![이미지 연결하기 — 연결 방법 선택 창]()
연결 방법은 **파일 업로드** 와 **URL로 연결** 중에서 고를 수 있어요. 다음 단계에서 자세히 살펴볼게요.
### 4단계. 연결 방법 고르고 이미지 등록하기
두 가지 방법은 아래와 같이 동작해요. 가지고 있는 이미지 형태에 맞는 방법을 골라 보세요.
| 연결 방법 | 이렇게 동작해요 | 이런 점이 좋아요 |
| ----------- | ---------------------------------- | --------------------------- |
| **파일 업로드** | 데이터 값과 같은 파일명의 이미지를 올리면 자동으로 짝지어져요 | 내 컴퓨터에 있는 이미지를 바로 사용할 수 있어요 |
| **URL로 연결** | 데이터 칸에 이미지 주소(URL)를 입력해 연결해요 | 데이터를 수정하면 이미지도 자동으로 다시 연결돼요 |
#### 방법 1. 파일 업로드
"이미지 연결하기" 창에서 **\[파일 업로드]** 를 선택해요. 그다음 **\[계속하기]** 를 누르면 업로드 화면이 나와요.
![이미지 파일 업로드 화면]()
*\[계속하기]를 누르면 나타나는 이미지 파일 업로드 화면이에요.*
1. 데이터 값과 **똑같은 파일명**으로 이미지 파일을 준비해요. 예를 들어 데이터 값이 `김재인`이면 파일명은 `김재인.png` 처럼 맞춰요.
2. 업로드 영역을 누르거나 파일을 끌어와 이미지를 올려요. 이미지 한 장은 최대 10MB까지 올릴 수 있어요.
3. **\[연결하기]** 를 누르면 파일명과 데이터 값이 같은 항목끼리 이미지가 연결돼요.
> ⚠️ **주의** — 데이터 값과 파일명이 정확히 같아야 연결돼요. 데이터를 나중에 수정하면 이미지를 다시 올려야 해요.
#### 방법 2. URL로 연결
데이터 칸에 이미지 주소(URL)를 직접 입력하는 방법이에요. 먼저 연결할 열의 각 칸에 이미지 URL을 입력해요.
![데이터 칸에 이미지 URL을 입력한 표]()
*각 데이터 칸에 이미지 주소를 입력한 모습이에요.*
그다음 열 헤더의 이미지 아이콘(🖼️)을 눌러요. "이미지 연결하기" 창에서 **\[URL로 연결]** 을 선택해요. **\[계속하기]** 를 누르면 안내 화면이 나와요.
![URL로 연결하기 안내 화면]()
*\[계속하기]를 누르면 나타나는 URL 안내 화면이에요.*
이때 사용할 수 있는 URL과 사용할 수 없는 URL이 정해져 있어요.
| 사용할 수 있어요 | 사용할 수 없어요 |
| ---------------------------------------------------------- | -------------------------------------- |
| 웹에서 이미지 파일만 바로 열리는 주소 (예: `https://example.com/image.png`) | 이미지가 포함된 일반 웹페이지 주소 / 로그인이나 권한이 필요한 주소 |
안내를 확인했다면 **\[연결하기]** 를 눌러요.
![이미지 연결 완료 안내]()
*\[연결하기]를 누른 결과 화면이에요. "데이터에 이미지가 연결되었습니다" 안내가 표시되고, 해당 열의 이미지 아이콘이 보라색으로 바뀌어요.*
### 5단계. 변경사항 저장하기
이미지를 연결한 뒤에는 화면 오른쪽 위의 **\[변경사항 저장하기]** 버튼을 꼭 눌러야 저장돼요. 저장하지 않으면 연결한 내용이 사라져요.
![변경사항이 저장된 데이터 표]()
### 6단계. 에디터에서 이미지 카드에 적용하기
이미지 등록을 마쳤다면, 이제 에디터에서 이미지 카드에 연결할 차례예요. 데이터 관리 화면 위쪽의 **\[에디터 바로가기]** 를 눌러 에디터로 이동해 보세요.
![에디터의 이미지 카드]()
에디터에서는 아래 순서로 적용해요.
1. 에디터에서 **이미지 카드**를 선택해요.
2. 폰 미리보기에서 이미지 영역을 눌러 편집 상태로 들어가요.
3. 카드 오른쪽에 나타나는 **주황색 ⊕ 아이콘**을 눌러요.
4. 목록에서 이미지가 연결된 **데이터 열**을 선택해요.
이렇게 하면 고객마다 발급된 개별 URL에서 그 고객의 이미지가 자동으로 표시돼요. 텍스트나 링크에 데이터를 넣는 방법은 [에디터에 데이터 적용하기](/data/editor-data)에서 더 자세히 볼 수 있어요.
## 개별 이미지는 어디에 적용할 수 있나요?
개별 이미지는 **이미지 카드**에 적용할 수 있어요. 이미지 카드에 데이터 열을 연결하면, 고객마다 다른 사진이 그 자리에 표시돼요.
텍스트 카드나 버튼 같은 다른 카드에는 이미지 데이터를 넣을 수 없어요. 대신 이름·포인트 같은 **글자 데이터**나 **링크 주소 데이터**를 넣을 수 있어요. 글자와 링크를 개인화하는 방법은 [에디터에 데이터 적용하기](/data/editor-data)를 참고해 보세요.
## 자주 묻는 질문
**Q. 파일 업로드와 URL로 연결 중 무엇을 골라야 하나요?**
A. 이미지 파일이 내 컴퓨터에 있다면 파일 업로드가 편해요. 이미지가 이미 웹에 올라가 있고 주소가 있다면 URL로 연결이 편해요. URL 방식은 데이터를 수정해도 이미지가 자동으로 다시 연결되는 장점이 있어요.
**Q. 이미지를 올렸는데 연결되지 않아요.**
A. 파일 업로드 방식은 데이터 값과 파일명이 정확히 같아야 연결돼요. URL 방식은 이미지 파일만 바로 열리는 주소인지 확인해 보세요. 일반 웹페이지 주소나 로그인이 필요한 주소는 연결되지 않아요.
**Q. 데이터를 수정하면 이미지도 다시 등록해야 하나요?**
A. 파일 업로드 방식은 데이터를 수정하면 이미지를 다시 올려야 해요. URL로 연결한 경우에는 데이터(주소)를 수정하면 이미지가 자동으로 다시 연결돼요.
**Q. 이미지 파일 용량 제한이 있나요?**
A. 파일 업로드 방식에서는 이미지 한 장당 최대 10MB까지 올릴 수 있어요.
## 함께 보면 좋은 문서
* [데이터 관리하기](/data/management)
* [에디터에 데이터 적용하기](/data/editor-data)
* [이미지 카드](/editor/card-image)
# 데이터 관리하기
Source: https://cdbd.mintlify.app/data/management
# 데이터 관리하기
데이터 관리하기는 **고객마다 다른 이름, 포인트, 혜택 정보가 표시되는 개인화 페이지**를 대량으로 만들 수 있는 기능이에요. 청첩장, 고객 초대장, 멤버십 안내처럼 받는 사람마다 내용이 달라야 하는 상황에 특히 유용해요.
각 고객에게 고유한 URL을 발급해 해당 링크로 접속하면 그 고객의 이름과 정보가 자동으로 표시돼요.
***
## 1. 진입하기
내 페이지 목록에서 원하는 페이지 카드에 마우스를 올린 뒤, 썸네일 오른쪽 상단의 **⋯ 버튼**을 클릭해 메뉴를 열어요.
![내 페이지 ⋯ 메뉴]()
메뉴에서 **\[데이터 관리하기]** 를 선택하면 데이터 관리 화면으로 이동해요.
> ⚠️ **평생 무료(FREE) URL을 사용 중인 페이지는 데이터를 생성할 수 없어요.** 데이터를 활용하려면 해당 페이지를 **복제**한 뒤 복제본에서 시작하세요.
***
## 2. 처음 시작하기
처음 데이터 관리 화면을 열면 아래와 같은 안내 화면이 표시돼요.
![데이터 관리 안내 화면]()
**\[데이터 생성하기]** 버튼을 클릭하면 데이터 입력 테이블이 만들어져요.
***
## 3. 데이터 테이블 살펴보기
데이터 생성 후에는 스프레드시트 형태의 테이블이 나타나요.
![데이터 테이블]()
| 항목 | 설명 |
| ----------------- | ------------------------------------- |
| **구분** | 각 행의 순서 번호예요 |
| **열 이름** (ex. 이름) | 데이터 항목의 제목이에요. 클릭해서 원하는 이름으로 바꿀 수 있어요 |
| **대체어** | 해당 열의 값이 비어 있을 때 대신 표시할 기본값이에요 |
| **데이터 행** | 개별 고객의 실제 데이터를 입력하는 행이에요 |
### 열 헤더 아이콘
각 열 헤더 오른쪽에는 아이콘 세 개가 있어요.
| 아이콘 | 기능 |
| ------------ | ---------------------------------------------------- |
| ↑ (데이터 업로드) | 해당 열에 엑셀 파일로 데이터를 대량 업로드해요 |
| 🖼️ (이미지 연결) | 해당 열의 데이터를 이미지와 연결해요. [자세한 내용은 아래](#이미지-연결하기)를 참고하세요 |
| 🗑️ (삭제) | 열을 삭제해요 |
***
## 4. 데이터 추가하기
### 행·열·엑셀 추가
좌측 상단의 **\[데이터 추가 ▾]** 버튼을 클릭하면 세 가지 옵션이 나타나요.
![데이터 추가 드롭다운]()
| 옵션 | 설명 |
| ---------- | ------------------------------------- |
| **행 추가** | 새 고객 정보 행을 하나씩 추가해요 |
| **열 추가** | 새 데이터 항목(열)을 추가해요. 예: 포인트, 등급, 쿠폰금액 등 |
| **엑셀로 추가** | `.xlsx` 파일을 업로드해 데이터를 한 번에 가져와요 |
> 💡 **팁**: 데이터가 많다면 엑셀로 미리 정리한 뒤 업로드하는 방법이 가장 빠르고 편해요.
***
### 이미지 연결하기
열 헤더의 **🖼️ 아이콘**을 클릭하면 해당 열의 데이터를 이미지와 연결할 수 있어요. 이미지 데이터를 활용하면 고객별 프로필 사진, 상품 이미지 등을 개인화 페이지에 자동으로 표시할 수 있어요.
연결 방법은 **파일 업로드**와 **URL로 연결** 두 가지예요. 이미지를 등록하는 방법부터 에디터에 적용하는 방법까지 한 번에 살펴보려면 아래 문서를 참고하세요.
→ [개별 이미지 적용하기](/data/individual-image)
***
## 5. 변경사항 저장하기
데이터를 입력하거나 수정한 뒤에는 반드시 화면 오른쪽 상단의 **\[변경사항 저장하기]** 버튼을 클릭해야 저장돼요. 저장하지 않으면 입력한 내용이 사라져요.
***
## 6. 개별 URL 생성하기
데이터가 준비되면 **개별 URL 생성하기** 기능으로 각 고객마다 고유한 링크를 만들 수 있어요.
> ℹ️ **개별 URL 생성은 유료 기능이에요.** 페이지에 URL이 게시된 상태여야 하고, 크레딧이 필요해요.
### 6.1 데이터 지정하기
개별 URL 생성 시 URL의 끝 부분에 어떤 데이터 열의 값을 사용할지 지정해요.
![데이터 지정하기 모달]()
* 드롭다운에서 URL 끝에 붙을 데이터 열을 선택해요 (예: 이름 → `https://cdbd.in/계정/이름`)
* 특수문자는 포함할 수 없고, 공백은 자동으로 하이픈(-)으로 변환돼요
* **\[데이터 편집하러 가기]** 버튼으로 데이터를 먼저 수정할 수 있어요
### 6.2 이용 기간 및 크레딧 확인
**\[계속하기]** 를 클릭하면 이용 기간 선택과 크레딧 차감 안내가 표시돼요.
![URL 생성하기 — 크레딧 선택]()
| 이용 기간 | 크레딧 (50% 할인 이벤트 기준) |
| ----- | ------------------- |
| 1개월 | 60 C |
| 2개월 | 100 C |
| 12개월 | 500 C |
* **CdBd 배너 유지** 옵션을 선택하면 20% 추가 할인이 적용돼요
* **\[URL 생성하기]** 를 클릭하면 크레딧이 차감되고 개별 URL이 생성돼요
***
## 7. 버전 히스토리
화면 오른쪽 상단의 **🕐 (클락) 아이콘**을 클릭하면 지금까지 생성한 개별 URL의 이력을 확인할 수 있어요. 언제 URL을 생성했고 언제 만료되는지 한눈에 파악할 수 있어요.
***
## 8. 에디터 바로가기
화면 상단의 **\[에디터 바로가기]** 버튼을 클릭하면 이 페이지의 에디터로 바로 이동해요. 에디터에서 데이터 항목을 카드 텍스트와 연결하는 작업을 할 수 있어요. → [에디터에 데이터 적용하기](/data/editor-data)
> 💡 **활용 팁**: 고객별 이름과 특별 혜택 정보가 담긴 초대장이나 쿠폰 페이지에 데이터를 연결하면, 한 번의 작업으로 수백 명에게 각자의 정보가 담긴 맞춤 링크를 보낼 수 있어요.
# 개별 URL 통계 확인하기
Source: https://cdbd.mintlify.app/data/url-stats
# 개별 URL 통계 확인하기
개별 URL을 생성한 뒤에는 각 고객이 링크를 실제로 열었는지, 어떤 행동을 했는지 통계로 확인할 수 있어요. 통계를 통해 캠페인 효과를 측정하고, 다음 발송 전략을 개선할 수 있어요.
***
## 1. 통계 페이지 접근하기
내 페이지에서 확인하고 싶은 페이지 카드에 마우스를 올리면 **\[통계보기]** 버튼이 나타나요. 클릭하면 통계 페이지로 이동해요.
![통계 페이지 — 페이지뷰 & 클릭 탭]()
상단에는 **URL 생성 날짜**와 \*\*URL 만료 날짜(남은 일수)\*\*가 표시돼요. 멀티페이지의 경우 **페이지 수**도 함께 표시돼요.
***
## 2. 통계 페이지 구성
통계 페이지는 왼쪽 탭에서 원하는 항목을 선택해 확인할 수 있어요.
| 탭 | 내용 |
| ------------- | ----------------------------- |
| **페이지뷰 & 클릭** | 전체 방문자 수, 클릭수, 클릭률과 날짜별 추이 차트 |
| **제출된 답변** | 질문과 답변(QnA) 카드에 제출된 응답 내용 |
| **예약 현황** | 예약 카드를 통해 접수된 예약 목록 |
| **구독 현황** | 페이지 구독자 현황 |
***
## 3. 페이지뷰 & 클릭 탭
기본으로 선택된 탭이에요. 방문자 현황과 링크 클릭 성과를 한눈에 볼 수 있어요.
### 기간 설정
오른쪽 상단에서 통계 범위를 조절할 수 있어요.
* **최근 7일** / **최근 14일** / **최근 30일** 중 선택
* 시작일과 종료일을 직접 입력해 원하는 기간을 지정할 수도 있어요
### 통계 요약
| 지표 | 설명 |
| ----------------------- | ------------------------------ |
| **방문자 수** (또는 **페이지뷰**) | 선택 기간 내 총 방문 수 |
| **1페이지당 뷰** | 방문자 1명이 본 평균 페이지 수 (멀티페이지만 표시) |
| **클릭수** | 페이지 내 링크·버튼 클릭 횟수 |
| **클릭률** | 방문자 중 클릭이 발생한 비율 |
요약 카드 아래에는 **날짜별 방문자 추이 차트**가 표시돼요. 멀티페이지(여러 페이지로 구성된 페이지)인 경우 **페이지별 뷰 차트**도 함께 나타나요.
### 링크별 클릭
아래 **링크별 클릭** 섹션에서는 어떤 버튼이나 링크가 가장 많이 클릭됐는지 순위별로 확인할 수 있어요. 각 항목에는 카드 유형, 페이지 번호(멀티페이지), 연결 URL, 클릭 횟수, 클릭률이 표시돼요.
**\[통계 다운로드]** 버튼으로 조회한 데이터를 엑셀 파일로 저장할 수 있어요.
***
## 4. 개별 URL 요약 (개별 URL이 있는 경우)
개별 URL을 생성한 페이지의 경우, 통계 페이지 하단에 **개별 URL 요약** 섹션이 추가로 표시돼요.
| 항목 | 설명 |
| ------------ | ---------------------- |
| **총 URL 개수** | 생성된 개별 URL의 전체 수 |
| **활용률** | 전체 URL 중 실제 방문이 발생한 비율 |
| **URL 목록** | 각 URL별 페이지뷰, 클릭수, 클릭률 |
목록에서 **\[통계 상세]** 버튼을 클릭하면 해당 개별 URL 하나의 상세 통계(페이지뷰, 클릭 내역)를 볼 수 있어요.
> 💡 **활용 팁**: 활용률이 낮다면 고객에게 발송한 메시지가 실제로 열리지 않고 있다는 신호예요. 발송 채널(문자, 카카오톡, 이메일)이나 메시지 문구를 바꿔보는 것을 고려해 보세요.
***
## 5. 제출된 답변 탭
페이지에 **질문과 답변(QnA) 카드**가 있고 고객이 답변을 제출한 경우, 이 탭에서 응답 내용을 확인할 수 있어요.
![제출된 답변 — 카드 목록]()
### 카드 목록
QnA 카드마다 카드 이름과 총 답변 수가 표시돼요. 카드를 클릭하면 상세 화면으로 이동해요.
> ℹ️ 페이지에 질문과 답변 카드가 없으면 "이 페이지에는 질문과 답변 카드가 없어요" 메시지가 나타나요.
### 상세 보기
카드를 클릭하면 질문별 응답 통계를 확인할 수 있어요.
![제출된 답변 — 상세 보기]()
| 항목 | 설명 |
| ---------- | ------------------------ |
| **카드 이름** | QnA 카드의 제목 |
| **질문 수** | 해당 카드의 총 질문 개수 |
| **답변 수** | 제출된 총 답변 수 |
| **질문별 응답** | 각 질문에 대한 선택 항목별 응답 수와 비율 |
* **객관식** 질문: 각 보기별 선택 횟수와 백분율이 표시돼요.
* **주관식** 질문: 텍스트 입력 답변 목록이 표시돼요.
* 상단의 \*\*\[질문 목록]\*\*을 클릭하면 카드 목록으로 돌아가요.
* **\[답변 다운로드]** 버튼으로 전체 응답 데이터를 엑셀 파일로 저장할 수 있어요.
***
## 6. 예약 현황 탭
페이지에 **예약 카드**가 있고 고객이 예약을 접수한 경우, 이 탭에서 예약 목록과 방문 체크 현황을 확인할 수 있어요.
![예약 현황 — 카드 목록]()
### 카드 목록
예약 카드마다 카드 이름과 총 예약 수가 표시돼요. 카드를 클릭하면 상세 예약 목록으로 이동해요.
> ℹ️ 페이지에 예약 카드가 없으면 "이 페이지에는 예약 카드가 없어요" 메시지가 나타나요.
### 상세 보기
카드를 클릭하면 접수된 예약 항목별 상세 내용을 확인하고 관리할 수 있어요.
| 기능 | 설명 |
| ------------- | ------------------------------------- |
| **방문 체크 URL** | 상단에 표시된 URL로 호스트가 QR 스캔 페이지에 접속해요 |
| **방문 상태** | 각 예약의 방문 완료·미완료 상태가 목록에 표시돼요 |
| **방문 상태 필터** | 방문 완료/미완료만 모아볼 수 있어요 |
| **예약 취소** | 각 행에서 제작자가 직접 예약을 취소할 수 있어요 |
| **일괄 처리** | 여러 예약을 선택해 방문 상태 변경 또는 일괄 취소를 할 수 있어요 |
* \*\*\[예약 목록]\*\*을 클릭하면 카드 목록으로 돌아가요.
* **\[예약 다운로드]** 버튼으로 방문 상태가 포함된 예약 데이터를 엑셀 파일로 저장할 수 있어요.
***
## 7. 구독 현황 탭
페이지에서 구독 기능을 사용한 경우, 이 탭에서 구독자 현황을 확인할 수 있어요.
![구독 현황]()
| 항목 | 설명 |
| --------- | ------------- |
| **구독자 수** | 현재까지 구독한 총 인원 |
| **구분** | 구독 순서 번호 |
| **구독 일시** | 구독한 날짜와 시간 |
| **구독자** | 구독자 식별 정보 |
* **\[현황 다운로드]** 버튼으로 구독자 목록을 엑셀 파일로 저장할 수 있어요.
* 구독자가 없으면 "이 페이지에는 구독자가 없어요" 메시지가 나타나요.
***
## 8. 통계 데이터 다운로드
각 탭 화면에서 다운로드 버튼을 누르면 해당 데이터를 엑셀 파일로 저장할 수 있어요.
| 탭 | 다운로드 버튼 | 내용 |
| --------- | ---------- | ------------------------ |
| 페이지뷰 & 클릭 | \[통계 다운로드] | 기간별 방문수, 클릭수, 링크별 클릭 데이터 |
| 제출된 답변 | \[답변 다운로드] | 각 질문의 응답 목록 |
| 예약 현황 | \[예약 다운로드] | 예약자 목록, 상세 정보, 방문 상태 |
| 구독 현황 | \[현황 다운로드] | 구독자 목록과 구독 일시 |
> 💡 **팁**: 캠페인이 종료된 뒤에도 통계 데이터는 엑셀로 백업해 두면 향후 분석이나 보고서 작성에 활용할 수 있어요.
# 2단 카드
Source: https://cdbd.mintlify.app/editor/card-2col
# 2단 카드
> **한 줄 요약** — 화면을 좌우로 나누어 두 가지 콘텐츠를 한 줄에 보여주는 카드예요. **양쪽 영역에 서로 다른 디자인과 링크를 따로 걸 수 있어서**, 비교·이중 안내·이중 행동 유도에 강해요.
![2단 카드 — 에디터에서 '텍스트 + 이미지' 카드를 선택한 화면]()
***
## 이 기능이 필요한 순간
* 한 줄에 **두 가지 정보**를 나란히 담고 싶을 때 (한/영 병기, 비포/애프터, 메뉴 비교)
* 왼쪽엔 설명, 오른쪽엔 **행동 유도 버튼**을 두어 방문자의 즉각적인 행동을 끌어내고 싶을 때
* 좌측 이미지·우측 이미지를 **각각 다른 링크**로 연결해 누를 수 있는 상품 카드처럼 쓰고 싶을 때
* 페이지 길이를 줄이면서도 **시각적 위계**(좌·우 비율)를 만들고 싶을 때
***
## 2단 카드 종류
카드 추가 창의 **2단 카드** 섹션에서 아래 6가지 조합 중 원하는 것을 선택할 수 있어요.
| # | 카드 이름 | 좌측 | 우측 | 대표 활용 |
| - | --------- | --- | --- | -------------------- |
| 1 | 텍스트 + 텍스트 | 텍스트 | 텍스트 | 한/영 병기, 비교, 좌우 정보 정리 |
| 2 | 텍스트 + 이미지 | 텍스트 | 이미지 | 제품·서비스 소개, 팀원 소개 |
| 3 | 텍스트 + 버튼 | 텍스트 | 버튼 | 혜택 설명 + 행동 유도 버튼 |
| 4 | 이미지 + 이미지 | 이미지 | 이미지 | 제품 비교, 메뉴 카탈로그 |
| 5 | 이미지 + 버튼 | 이미지 | 버튼 | 상품 사진 + 구매 버튼 |
| 6 | 버튼 + 버튼 | 버튼 | 버튼 | 주요 행동 유도 2개 병렬 |
***
## 우측 패널 살펴보기 — "레이아웃" 탭과 "디자인" 탭
2단 카드를 선택하면 에디터 오른쪽 패널 상단에 **두 개의 탭**이 보여요.
![2단 카드의 우측 패널 — '레이아웃' 탭이 기본으로 열린 모습]()
| 탭 | 무엇을 하는 곳인가요? |
| ------------- | -------------------------------------------------------------------- |
| **레이아웃** (기본) | 좌·우 영역에 어떤 내용을 넣을지(구성), 그리고 **카드 전체의 모양** — 비율·간격·세로 정렬·카드 디자인을 정해요. |
| **디자인** | 좌·우 영역을 **하나씩 골라서** 그 안의 글꼴·이미지 모양·버튼 색 같은 세부 디자인과 **링크**를 따로 걸어요. |
> 💡 **단독 카드(텍스트/이미지/버튼 단독)와 다른 점** — 단독 카드는 탭 없이 한 화면에 모든 옵션이 펼쳐져요. 2단 카드는 양쪽을 각각 꾸며야 하니까, 헷갈리지 않도록 탭으로 나누어 두었어요.
***
## 1. 텍스트 + 텍스트
![텍스트 + 텍스트 — 한국어 소개와 영문 소개를 좌우로 나란히 배치한 예시]()
두 개의 독립적인 텍스트 영역을 나란히 배치하는 조합이에요.
**이런 상황에 딱 맞아요**
* **한/영 이중 언어** — 왼쪽에 한국어, 오른쪽에 영어로 같은 내용을 나란히 표시
* **비교·대조** — 서비스 이용 전/후, 일반 방식 vs CdBd 방식처럼 두 상태를 한눈에 비교
* **정보 + 설명** — 왼쪽에 핵심 수치(예: "3초 만에 완성")를, 오른쪽에 부연 설명을 배치
* **FAQ 스타일** — 왼쪽에 질문, 오른쪽에 간결한 답변
**설정하기**
각 텍스트 영역은 단독 텍스트 카드와 **같은 옵션**(서체·크기·굵기·색상·정렬·줄 간격)을 가져요. 다만 진입 경로가 달라요 — 오른쪽 패널의 **"디자인" 탭 → "구성요소"에서 왼쪽 텍스트 또는 오른쪽 텍스트를 골라** 각각 따로 꾸며 주세요. 왼쪽과 오른쪽의 폰트 크기를 다르게 설정하면 정보의 위계를 자연스럽게 표현할 수 있어요.
**양쪽에 다른 링크 걸기**
왼쪽 텍스트는 "공지사항" 페이지, 오른쪽 텍스트는 "이벤트" 페이지로 연결하는 식으로 각각 다른 링크를 걸 수 있어요. 거는 방법은 아래 **"디자인" 탭으로 좌·우에 따로 꾸미고 링크 걸기** 섹션을 참고하세요.
> 💡 **팁**: 비율을 **좌 40 : 우 60**으로 조절하면 왼쪽에 짧은 핵심 키워드, 오른쪽에 상세 설명을 담기 좋아요.
***
## 2. 텍스트 + 이미지
![텍스트 + 이미지 — 서비스 소개 텍스트(좌)와 대표 이미지(우)를 나란히 배치한 예시]()
왼쪽 텍스트로 정보를 전달하고, 오른쪽 이미지로 시각적 인상을 주는 조합이에요. 2단 카드 중 가장 많이 활용되는 형태예요.
**이런 상황에 딱 맞아요**
* **제품·서비스 소개** — 왼쪽에 이름·특징·가격, 오른쪽에 제품 사진
* **팀원 소개** — 왼쪽에 이름·직책·한 줄 소개, 오른쪽에 프로필 사진
* **이벤트 안내** — 왼쪽에 행사명·일정·장소, 오른쪽에 포스터 이미지
* **메뉴 소개** — 왼쪽에 메뉴명·설명·가격, 오른쪽에 음식 사진
**설정하기**
1. 카드 추가 창에서 **텍스트 + 이미지** 선택
2. **"레이아웃" 탭**의 "구성"에서 왼쪽 텍스트와 오른쪽 이미지를 차례로 입력
3. **"디자인" 탭**으로 이동해 "구성요소"에서 **텍스트** 선택 → 글꼴·크기·색상을 조정
4. 다시 "구성요소"에서 **이미지** 선택 → 비율(원본·1:1·가로·세로)·크기·모양을 조정
5. "레이아웃" 탭의 **비율** 슬라이더로 좌우 공간 비율 조정 (기본값 1:1)
6. **정렬**로 양쪽 영역의 세로 위치를 상·중·하 중 선택
**양쪽에 따로 링크 걸기**
이미지를 누르면 상세 페이지로 가게 하고, 텍스트는 별도의 카탈로그 페이지로 보내고 싶다면 — "디자인" 탭의 구성요소에서 **이미지**와 **텍스트**를 차례로 선택해 각각 다른 URL을 걸어 주세요.
> 💡 **팁**: 세로로 긴 프로필 사진은 비율을 **텍스트 60 : 이미지 40**으로 설정하면 이미지가 잘리지 않고 균형 있게 표시돼요. 가로형 대표 이미지라면 반대로 **텍스트 40 : 이미지 60**을 써보세요.
***
## 3. 텍스트 + 버튼
![텍스트 + 버튼 — 왼쪽에 혜택 설명, 오른쪽에 행동 유도 버튼을 배치한 예시]()
왼쪽에서 정보를 전달하고, 오른쪽 버튼으로 즉시 행동을 유도하는 조합이에요.
**이런 상황에 딱 맞아요**
* **서비스 가입 유도** — "지금 무료로 시작하세요" 텍스트 + "무료 시작하기" 버튼
* **이벤트 참여 안내** — 이벤트 간략 설명 + "지금 신청하기" 버튼
* **혜택 강조** — "첫 방문 고객 10% 할인" 텍스트 + "할인 쿠폰 받기" 버튼
* **문의 유도** — 연락처 안내 텍스트 + "바로 문의하기" 버튼
**설정하기**
1. 카드 추가 창에서 **텍스트 + 버튼** 선택
2. "레이아웃" 탭의 **구성**에서 왼쪽 텍스트에 행동 유도 메시지 입력, 오른쪽 버튼에 라벨 입력
3. "디자인" 탭의 **구성요소**에서 **버튼** 선택 → 모양·색상을 브랜드에 맞게 조정 + **링크 연결**에 이동할 주소 입력
4. 필요하면 "구성요소"에서 **텍스트**도 선택해 보조 링크(예: 자세히 보기 페이지)를 함께 걸 수 있어요
> 💡 **팁**: 텍스트를 **좌 65 : 버튼 35** 비율로 설정하면 설명이 충분히 보이면서도 버튼이 옆에서 시선을 끌어요. 버튼에 배경색을 넣어 강조하면 더 많은 방문자가 눌러요.
***
## 4. 이미지 + 이미지
![이미지 + 이미지 — 메뉴 두 가지를 나란히 배치한 예시]()
두 개의 이미지를 나란히 보여주는 조합이에요. 시각적 비교나 카탈로그 형식으로 많이 쓰여요.
**이런 상황에 딱 맞아요**
* **비포/애프터 비교** — 시술 전·후, 리모델링 전·후 비교 사진
* **메뉴·상품 카탈로그** — 2가지 메뉴 또는 상품을 나란히 소개
* **포트폴리오** — 작업물 2개를 나란히 배치해 작업 범위 보여주기
* **공간 소개** — 카페 실내 전경 2컷, 룸 종류 비교
**설정하기**
1. 카드 추가 창에서 **이미지 + 이미지** 선택
2. "레이아웃" 탭의 **구성**에서 왼쪽·오른쪽 이미지 영역에 각각 이미지 업로드
3. "디자인" 탭의 **구성요소**에서 왼쪽 이미지 선택 → 비율·모양 조정
4. 다시 **구성요소**에서 오른쪽 이미지 선택 → 비율·모양을 왼쪽과 통일하면 깔끔해 보여요
5. "레이아웃" 탭의 **간격** 슬라이더로 두 이미지 사이 여백 조정
**양쪽 이미지에 각각 다른 링크 걸기 (누를 수 있는 상품 카드)**
이미지를 누르면 상품 상세 페이지로 가게 하고 싶다면, 두 이미지에 각각 다른 URL을 연결해 주세요.
1. "디자인" 탭으로 이동
2. **구성요소**에서 첫 번째 옵션(왼쪽 이미지) 선택
3. 패널 아래쪽 **링크 연결** 섹션에서 링크 타입을 고르고 주소 입력
4. 다시 **구성요소**에서 두 번째 옵션(오른쪽 이미지) 선택 → 같은 방식으로 다른 URL 입력
> 💡 **팁**: 두 이미지의 비율을 **1:1(정사각형)** 로 통일하면 어떤 사진을 올려도 균형 잡힌 배치가 돼요. 동일 종류 조합이라 "구성요소" 선택 메뉴에 **"이미지"라는 라벨이 두 번** 보이는데, 위쪽 옵션이 왼쪽 이미지, 아래쪽 옵션이 오른쪽 이미지예요. 헷갈리면 한쪽을 고른 뒤 모양이나 크기를 살짝 바꿔 보면, 미리보기에서 어느 쪽 이미지가 영향을 받는지 확인할 수 있어요.
***
## 5. 이미지 + 버튼
![이미지 + 버튼 — 제품 이미지(좌)와 구매 버튼(우)을 나란히 배치한 예시]()
왼쪽 이미지로 시각적 관심을 끌고, 오른쪽 버튼으로 즉시 행동을 유도하는 조합이에요.
**이런 상황에 딱 맞아요**
* **상품 구매 유도** — 제품 사진 + "지금 구매하기" 버튼 (여러 상품을 한 번에 진열하고 싶다면 [상품 카드](/editor/card-product)가 더 편해요)
* **예약 연결** — 공간·서비스 사진 + "예약하기" 버튼
* **팔로우 유도** — SNS 대표 이미지 + "팔로우하기" 버튼
* **다운로드 안내** — 앱/자료 미리보기 이미지 + "다운로드" 버튼
**설정하기**
1. 카드 추가 창에서 **이미지 + 버튼** 선택
2. "레이아웃" 탭의 **구성**에서 왼쪽 이미지를 업로드하고, 오른쪽 버튼에 라벨 입력
3. "디자인" 탭의 **구성요소**에서 **이미지** 선택 → 모양·정렬 조정
4. **구성요소**에서 **버튼** 선택 → 모양·색상 조정 + **링크 연결**에 구매·예약 주소 입력
5. 이미지에도 별도 상세보기 링크를 걸고 싶다면, 이미지 구성요소를 선택한 상태에서 **링크 연결**에 주소를 추가로 입력
> 💡 **팁**: 이미지를 **원형(Circle)** 으로 설정하면 아이콘처럼 보여서 SNS 계정 소개에 잘 어울려요. 버튼 카드형(상단 이미지+하단 텍스트) 대신 이 조합을 쓰면 이미지 크기를 더 유연하게 조절할 수 있어요.
***
## 6. 버튼 + 버튼
![버튼 + 버튼 — '예약하기'와 '문의하기' 버튼을 나란히 배치한 예시]()
두 개의 주요 행동 유도 버튼을 한 줄에 나란히 보여주는 조합이에요.
**이런 상황에 딱 맞아요**
* **이중 행동 유도 버튼** — "예약하기" + "문의하기", "지금 주문" + "메뉴 보기"
* **연락 채널 2개** — "전화하기" + "카카오톡 채널"
* **SNS 2개** — "인스타그램" + "유튜브" 링크 버튼
* **다운로드 옵션** — "iOS 다운로드" + "Android 다운로드"
**설정하기**
1. 카드 추가 창에서 **버튼 + 버튼** 선택
2. "레이아웃" 탭의 **구성**에서 왼쪽·오른쪽 각 버튼에 라벨 입력
3. "디자인" 탭의 **구성요소**에서 왼쪽 버튼 선택 → 모양·색상 조정 + **링크 연결**에 주소 입력 (예: 예약 페이지)
4. 다시 **구성요소**에서 오른쪽 버튼 선택 → 같은 방식으로 다른 주소 입력 (예: 문의 페이지)
5. 비율을 **1:1**로 유지하면 대등한 선택지임을 시각적으로 전달할 수 있어요
> 💡 **팁**: "구성요소" 선택 메뉴에 **"버튼"이 두 번** 나타나는데, 위쪽이 왼쪽 버튼, 아래쪽이 오른쪽 버튼이에요. 헷갈리면 한쪽을 고른 뒤 색이나 모양을 살짝 바꿔 보면, 미리보기에서 어느 쪽 버튼이 영향을 받는지 확인할 수 있어요. 왼쪽 버튼은 브랜드 포인트 컬러, 오른쪽 버튼은 테두리만 있는 라인 스타일로 설정하면 중요한 버튼이 자연스럽게 먼저 눈에 들어와요.
***
## 공통 설정
아래 항목은 "레이아웃" 탭에서 한 번에 설정해요. 모든 조합에 공통으로 적용돼요.
### 비율 조절하기
좌우 영역의 너비 비율을 슬라이더로 자유롭게 조정할 수 있어요. 한쪽 콘텐츠가 많을 때는 해당 쪽에 더 많은 공간을 주세요.
| 설정값 | 느낌 |
| -------- | ---------------------- |
| 1:1 (기본) | 양쪽 대등, 균형 있어 보임 |
| 4:6 | 오른쪽 강조 (이미지나 버튼을 더 크게) |
| 6:4 | 왼쪽 강조 (텍스트 설명을 더 넓게) |
| 3:7 | 한쪽을 크게 강조할 때 |
### 간격 설정하기
좌우 영역 사이의 공백 크기를 슬라이더로 조절해요. 기본값은 `16`이에요.
* 간격을 **0**으로 설정하면 두 콘텐츠가 경계 없이 붙어 보여요
* 간격을 크게 주면 두 영역이 시각적으로 분리돼 독립적인 느낌이 나요
### 정렬 설정하기
좌우 콘텐츠의 세로 정렬 방식을 선택해요.
* **상단 정렬** — 양쪽이 위에서 함께 시작 (가장 일반적)
* **중앙 정렬** — 높이가 다를 때 가운데를 맞춰 균형 있게 보임
* **하단 정렬** — 양쪽이 아래에서 함께 끝남
### 카드 디자인 꾸미기
전체 카드의 배경 색상, 테두리, 모서리, 여백은 "레이아웃" 탭 아래쪽의 **카드 디자인** 섹션에서 설정해요.
* **배경**: 카드 전체의 배경색 또는 배경 이미지
* **테두리**: 두께와 색상으로 카드 테두리 강조
* **모서리**: 각진 모양 또는 둥근 모양
* **내부여백**: 카드 안쪽, 콘텐츠와 카드 경계 사이의 공간
* **외부여백**: 이 카드와 위아래 카드 사이의 공간
> 💡 카드 **한 장 전체**를 꾸미는 곳이에요. 좌·우 영역을 따로 꾸미는 "디자인" 탭의 **구성요소**와는 다른 곳이라는 걸 기억해 주세요.
***
## "디자인" 탭으로 좌·우에 따로 꾸미고 링크 걸기
2단 카드의 가장 큰 장점은 **양쪽 영역을 따로 디자인하고 따로 링크 걸 수 있다**는 점이에요. 카드 한 장에 두 가지 행동을 담을 수 있어요.
![디자인 탭 — 맨 위 '구성요소' 선택 메뉴에서 왼쪽 또는 오른쪽 영역을 골라 따로 꾸며요]()
### 1단계. "디자인" 탭으로 이동하기
2단 카드를 선택한 뒤 우측 패널 상단에서 **"디자인"** 탭을 눌러 주세요. 패널 내용이 바뀌면서 맨 위에 **"구성요소"** 라는 줄이 보여요.
### 2단계. 꾸미고 싶은 영역 고르기
"구성요소" 옆의 선택 메뉴(눌렀을 때 옵션이 아래로 펼쳐지는 메뉴)를 누르면 **정확히 두 개**의 옵션이 펼쳐져요. 위쪽 옵션이 **왼쪽 영역**, 아래쪽 옵션이 **오른쪽 영역**이에요.
![구성요소 펼침 메뉴 — '텍스트'와 '이미지' 두 옵션이 펼쳐진 모습]()
* 텍스트 + 이미지 → "텍스트" / "이미지"
* 텍스트 + 텍스트 → "텍스트" / "텍스트" (라벨이 두 번 같음)
* 이미지 + 이미지 → "이미지" / "이미지"
* 버튼 + 버튼 → "버튼" / "버튼"
* 텍스트 + 버튼 → "텍스트" / "버튼"
* 이미지 + 버튼 → "이미지" / "버튼"
> 💡 동일 종류 조합(예: 텍스트 + 텍스트)에서는 같은 라벨이 두 번 보여서 헷갈릴 수 있어요. 한쪽을 고른 뒤 색·크기 같은 값을 살짝 바꿔 보면, 미리보기에서 어느 쪽 영역이 영향을 받는지 확인할 수 있어요. "카드 전체"를 한 번에 고르는 옵션은 없어요 — 항상 좌·우 둘 중 하나를 골라요.
### 3단계. 선택한 영역의 디자인 다듬기
구성요소를 선택하면 그 아래쪽에 **해당 영역의 디자인 옵션**이 펼쳐져요. 예를 들어 "이미지"를 고르면 아래처럼 비율·크기·모양 같은 이미지 옵션이 나타나요.
![이미지 구성요소를 선택했을 때 — 패널이 이미지용 옵션(비율·크기·모양·정렬)으로 바뀐 모습]()
* **텍스트**를 골랐다면 — 서체·스타일·단락·정렬·줄간격
* **이미지**를 골랐다면 — 비율(원본·1:1·가로·세로)·크기·모양(각진·둥근·원형·아치·구름·꽃·반짝이·마름모)·정렬
* **버튼**을 골랐다면 — 모양·색상·버튼 텍스트
옵션 셋은 단독 카드(텍스트·이미지·버튼)와 같지만, **2단 카드에서는 좌·우를 하나씩 골라가며** 따로 꾸민다는 점만 달라요.
### 4단계. 선택한 영역에 링크 걸기
같은 패널 아래쪽에 **"링크 연결"** 섹션이 있어요. 여기서 지금 선택된 구성요소에만 적용되는 링크를 설정해요.
![링크 연결 섹션 — 링크 타입 펼침 메뉴, 입력 필드, '새 창에서 열기' 켜고 끄는 스위치로 구성]()
상단의 펼침 메뉴(눌렀을 때 옵션이 아래로 펼쳐지는 메뉴)를 누르면 **링크 타입 5종**이 펼쳐져요.
![링크 타입 펼침 메뉴 — URL 열기 / 전화하기 / 문자 보내기 / 이메일 보내기 / 연락처 저장하기]()
| 링크 타입 | 동작 |
| ------------ | ------------------------------------------------------- |
| **URL 열기** | 입력한 웹주소로 이동 (기본값) |
| **전화하기** | 모바일에서 전화 앱을 자동으로 열어 입력한 번호로 연결 |
| **문자 보내기** | 모바일에서 문자 작성 화면을 열어 입력한 번호로 보내기 |
| **이메일 보내기** | 메일 앱을 열어 입력한 이메일 주소로 작성 시작 |
| **연락처 저장하기** | 연락처를 저장할 수 있는 선택지예요. 실제 저장 방식은 방문자의 기기·앱에 따라 달라질 수 있어요. |
타입을 고른 뒤, 그 아래 입력 칸에 주소·전화번호·이메일 같은 값을 적어 주세요. **URL 열기** 타입에서는 그 아래에 **"새 창에서 열기"** 라는 켜고 끄는 스위치가 보여요. 외부 사이트를 새 탭으로 열고 싶을 때 켜 주세요.
### 5단계. 반대쪽 영역에도 링크 걸기 (선택)
다시 위쪽으로 올라가 "구성요소"에서 반대쪽 옵션을 선택하면, 그 영역의 디자인과 링크를 똑같이 따로 설정할 수 있어요. 아래는 반대쪽(이미지) 영역을 골랐을 때 "링크 연결" 섹션이 다시 비어 있는 모습이에요.
![반대쪽 영역(이미지)을 골랐을 때 — 링크 연결 섹션이 비어 있어 새로 입력할 수 있는 상태]()
이렇게 **양쪽에 서로 다른 링크**(예: 좌 = 전화하기, 우 = URL 열기)를 동시에 걸 수 있다는 점이 2단 카드의 강점이에요.
> 💡 **활용 예시**
>
> * 메뉴 카탈로그: 왼쪽 메뉴 사진은 메뉴 A 상세 페이지, 오른쪽 메뉴 사진은 메뉴 B 상세 페이지
> * 이중 연락 채널: 왼쪽 버튼은 "전화하기"(매장 전화), 오른쪽 버튼은 "URL 열기"(카카오톡 채널 링크)
> * 한/영 안내: 왼쪽 텍스트는 한국어 공지 페이지, 오른쪽 텍스트는 영어 공지 페이지
설정한 내용은 페이지 데이터에 자동으로 저장되고, 공유 URL을 발행해야 방문자에게 보이는 뷰어에 반영돼요.
***
## 자주 묻는 질문
**Q. 좌·우에 서로 다른 링크 타입(예: 왼쪽 = 전화하기, 오른쪽 = URL 열기)을 동시에 걸 수 있나요?**
A. 네, 가능해요. "디자인" 탭의 "구성요소"로 한쪽 영역을 골라 링크 타입과 값을 입력한 뒤, 다시 다른 쪽 영역을 골라 별도의 타입을 설정하면 돼요. 영역마다 독립적이에요.
**Q. "구성요소" 선택 메뉴에 "카드 전체" 옵션이 없는데, 카드 전체에 하나의 링크만 걸 수도 있나요?**
A. 2단 카드의 "디자인" 탭에서는 좌·우 영역 두 개만 고를 수 있어요. 한쪽에만 링크를 걸고 다른 쪽은 비워 두면, 사실상 그 영역만 링크가 작동해요.
**Q. "디자인" 탭에서 본 옵션들이 단독 텍스트·이미지·버튼 카드의 옵션과 똑같아 보여요. 같은 건가요?**
A. 네, 옵션 셋은 같아요. 단독 카드는 옵션이 한 화면에 펼쳐져 있고, 2단 카드는 좌·우를 각각 골라가며 따로 적용한다는 점만 달라요.
**Q. 양쪽 콘텐츠 높이가 다르면 어떻게 보이나요?**
A. "레이아웃" 탭의 **정렬** 옵션에서 상단·중앙·하단 중 하나를 골라 어느 쪽 기준으로 맞출지 정할 수 있어요. 중앙 정렬이 가장 균형 있게 보이는 경우가 많아요.
***
## 함께 보면 좋은 문서
* [텍스트 카드](/editor/card-text) — 좌·우 텍스트 영역의 옵션과 동일한 단독 카드
* [이미지 카드](/editor/card-image) — 좌·우 이미지 영역의 옵션과 동일한 단독 카드
* [버튼 카드](/editor/card-button) — 좌·우 버튼 영역의 옵션과 동일한 단독 카드
* [상품 카드](/editor/card-product) — 외부 상품 URL 한 줄로 이미지·가격·구매 버튼을 자동으로 묶고 싶을 때
* [페이지 테마](/editor/page-theme) — 페이지 전체 색상·서체를 한 번에 통일
* [갤러리 카드](/editor/card-gallery) — 같은 종류(이미지) 여러 장을 한 줄에 보여주고 싶을 때
# 버튼 카드
Source: https://cdbd.mintlify.app/editor/card-button
# 버튼 카드
> **한 줄 요약** — 방문자가 한 번 누르면 다음 행동(웹 이동·전화·문자·이메일·연락처 저장)으로 바로 이어지도록 만들어 주는 카드예요.
## 이 기능이 필요한 순간
* 페이지 끝에 **"지금 예약하기 / 문의하기"** 같은 행동 유도가 필요할 때
* 모바일 명함에 **연락처 저장·통화·문자** 버튼을 묶어두고 싶을 때
* 외부 사이트(쇼핑몰·블로그·예약 페이지)로 방문자를 안내해야 할 때
***
## 버튼 카드 추가하기
에디터에서 **\[+ 카드 추가하기]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[버튼]** 카드를 골라요. 페이지에 버튼 카드가 들어가요. 오른쪽 패널에 버튼 카드 설정이 열려요.
![버튼 카드 — 색깔과 모양을 다르게 적용한 세 가지 버튼 비교]()
버튼 라벨(예: `예약하기`)은 좌측 미리보기에서 버튼 위 글자를 직접 눌러 바꿀 수 있어요. 우측 패널은 **연결 / 디자인** 두 축으로 나뉘어 있어요.
***
## 연결 옵션 고르기
버튼을 눌렀을 때 어떤 행동이 일어날지 정하는 단계예요. 우측 패널의 **연결** 섹션에서 다섯 가지 중 한 가지를 골라요. 선택한 옵션에 맞춰 입력 칸이 바뀌어요.
![URL 이동 연결 옵션 — 주소 입력 칸과 옵션 패널]()
### 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) — 여러 상품을 이미지·가격과 함께 카탈로그처럼 보여주고 싶을 때
# 코드 카드
Source: https://cdbd.mintlify.app/editor/card-code
# 코드 카드
> **한 줄 요약** — 코드 카드는 인스타·유튜브·구글 폼 같은 외부 서비스의 코드를 붙여 넣어, 그 결과 화면을 CdBd 페이지 안에 그대로 보여 주는 카드예요.
코드 카드는 HTML·iframe·임베드 코드를 직접 페이지에 삽입할 수 있는 카드예요. CdBd가 기본으로 지원하지 않는 외부 위젯(인스타그램 게시물·구글 폼·외부 웹페이지·맞춤 신청 배너 등)을 자유롭게 추가할 때 사용해요. 마케팅·영업 페이지에서 외부 도구와 연동할 때 가장 강력한 카드예요.
> 💡 **잠깐, 처음 보는 단어가 있어요?**
>
> * **HTML** — 웹페이지의 모양과 내용을 정해 주는 코드예요. 외부 서비스가 알아서 만들어 주니 직접 작성하지 않아도 돼요.
> * **iframe** — 외부 페이지를 내 페이지 안에 작은 창으로 끼워 보여 주는 코드예요. 인스타 게시물·유튜브 영상·구글 폼이 모두 이 방식으로 들어가요.
> * **임베드(embed)** — "끼워 넣다"는 뜻이에요. 외부 콘텐츠를 페이지 안에 넣는 행위를 통틀어 이렇게 불러요.
![코드 카드 — 외부 웹페이지 iframe + 커스텀 신청 배너 동시 표시]()
## 이 기능이 필요한 순간
* **외부 폼이나 예약 위젯을 페이지 안에서 바로 작성·예약**받고 싶을 때 (구글 폼·캘린들리 등)
* **인스타·틱톡·유튜브 쇼츠 같은 SNS 게시물을 페이지 안에서 바로 보여 주고** 싶을 때
* **CdBd 기본 카드로는 만들기 어려운 그라데이션 배경·맞춤 신청 배너·진행 바**를 직접 디자인하고 싶을 때
## 1. HTML 코드 입력하기
우측 패널의 **HTML 코드** 입력칸에 코드를 붙여 넣거나 직접 작성하면 폰 미리보기에 즉시 반영돼요. 입력칸 우측 하단의 **확장 아이콘**(⛶)을 눌러 큰 화면에서 작업할 수 있어요.
> ⚠️ 외부 사이트 임베드는 해당 사이트가 **iframe 임베드를 허용**해야 작동해요. 일부 사이트(네이버, 카카오 등)는 보안 정책상 iframe을 차단해 둬요. 이때는 임베드 코드 대신 [버튼 카드](/editor/card-button)·[위치 안내 카드](/editor/card-map)로 대체해 보세요.
***
## 2. 자주 쓰는 코드 붙여 넣기
### 📷 인스타그램 게시물 넣기
**준비**: 인스타그램에서 보여줄 **게시물 페이지의 URL**만 알면 돼요. (예: `https://www.instagram.com/p/CxYz123abc/`)
```html theme={null}
```
🔧 **이렇게 수정하세요** — **딱 한 곳만** 바꾸면 끝이에요.
* `게시물ID` → 인스타 게시물 URL의 `/p/`와 `/` 사이 문자열. 예) URL이 `https://www.instagram.com/p/CxYz123abc/`라면 `CxYz123abc` 부분.
* `height="700"` → 세로 크기(px). 캡션이 긴 게시물은 `800`\~`900`까지 늘리세요.
게시물의 사진·캡션·좋아요·"View profile" 버튼이 그대로 페이지에 표시돼요. **하나의 게시물**을 강조하고 싶을 때 좋아요 (예: 신제품 출시 포스트, 행사 후기).
![인스타그램 게시물 임베드 미리보기 — @cdbdmag 게시물이 그대로 표시됨]()
> 💡 인스타그램이 공식 안내하는 "퍼가기" 버튼의 코드는 `` + `
```
🔧 **이렇게 수정하세요** — 한 곳만 본인 예약 페이지 주소로 바꾸면 끝이에요.
* `https://calendly.com/내계정/30min` → 본인 캘린들리 예약 페이지 URL. 캘린들리 대시보드의 이벤트에서 "공유" 버튼을 눌러 나오는 URL을 그대로 붙여 넣어 주세요. (예: `https://calendly.com/cdbd-team/intro-30`)
* `height:700px` → 위젯 세로 크기. 예약 단계가 많아 잘려 보이면 `800px`\~`900px`까지 늘리세요.
상담·시연 예약을 받을 때 활용해요. Calendly 외에 Google Calendar Appointment Schedule·Zoho Bookings 등 다른 예약 도구도 같은 구조의 임베드 코드를 제공하니, **위 URL 한 곳만 본인 예약 페이지 주소로** 바꾸면 돼요.
> ⚠️ **위 `
```
🔧 **이렇게 수정하세요** — 직접 작성하지 말고 **X에서 받은 임베드 코드를 그대로** 붙여 넣어 주세요. 트윗 텍스트·작성자·날짜는 자동으로 채워져요.
> 💡 스레드(Threads) 게시물도 같은 방식이에요. 게시물 → **(•••) → "임베드"** → 코드 복사 후 붙여 넣기. 스크립트 주소가 `https://www.threads.net/embed.js`로 다른 점만 차이.
### 🎵 틱톡 영상 넣기
**준비**: 틱톡 영상의 URL에서 **영상 ID**(긴 숫자)만 알면 돼요. 영상 URL이 `https://www.tiktok.com/@계정/video/{영상ID}` 형태이고, 끝의 숫자가 영상 ID예요.
```html theme={null}
```
🔧 **이렇게 수정하세요** — **딱 한 곳만** 바꾸면 끝이에요.
* `영상ID` → 틱톡 영상 URL 끝의 긴 숫자 (예: `6718335390845095173`)
* `height="700"` → 세로 크기(px). 영상 비율이 길거나 캡션이 풍부하면 `800`까지 늘리세요.
![틱톡 영상 임베드 미리보기 — 영상 카드가 그대로 표시됨]()
> 💡 틱톡이 공식 안내하는 임베드 코드는 `` + `
```
🔧 **이렇게 수정하세요** — 두 군데만 본인 값으로 바꾸면 끝이에요.
* `_xyzabc` → 본인 카카오톡 채널 공개 ID (밑줄 포함)
* `여기에_JavaScript_키_붙여넣기` → Kakao Developers에서 발급받은 JavaScript 키
🎨 **버튼 모양 바꾸기** (선택)
* `data-title="consult"` → `"add"`로 바꾸면 **"채널 추가하기"** 버튼이 돼요
* `data-color="yellow"` → `"mono"`로 바꾸면 흑백 톤
* `data-shape="pc"` → `"rounded"`로 바꾸면 모서리가 둥근 버튼
* `data-size="large"` → `"small"`로 바꾸면 작은 버튼
> ⚠️ **CdBd 코드 카드에서 작동하지 않을 수도 있어요** — 카카오톡 채널 버튼은 카카오 SDK(`kakao.min.js`)가 페이지에서 실행돼야 작동해요. CdBd 코드 카드는 외부 스크립트 실행이 제한되어 버튼이 빈 화면으로 보일 수 있어요. 이때는 [버튼 카드](/editor/card-button)에 카카오톡 오픈채팅 URL(`https://open.kakao.com/o/...`)을 직접 연결하는 방법을 권장해요.
> 💡 미리보기 이미지는 준비 중이에요. JS키·도메인 등록 셋업이 완료되면 캡처해 추가할 예정입니다.
### 📍 매장 위치 안내하기
매장·행사장 위치를 큰 지도로 보여줄 때. [위치안내 카드](/editor/card-map)보다 자유롭게 꾸미고 싶을 때 코드 카드를 써요.
**방법 1. 카카오맵 — 지도 퍼가기** (가장 깔끔)
준비: [카카오맵](https://map.kakao.com) → 매장/주소 검색 → 우측 메뉴 **지도 퍼가기 → "내장 지도 만들기"** → 코드 복사
```html theme={null}
```
🔧 **이렇게 수정하세요** — 카카오맵에서 받은 코드를 통째로 붙여 넣고, **딱 한 곳만** 조정하세요.
* `"mapHeight" : "360"` → 지도 세로 크기(px). 모바일에선 `"280"`\~`"360"`이 보기 좋아요.
`mapWidth`는 `"100%"` 그대로 두면 카드 폭에 자동으로 맞춰져요. `timestamp`·`key`는 카카오맵이 자동 발급하니 수정하지 않는 편이 좋아요.
> ⚠️ **방법 1이 안 보일 수 있어요** — 카카오맵 퍼가기 코드도 외부 스크립트(`roughmapLoader.js`)가 실행돼야 지도를 그려요. CdBd 코드 카드에서는 지도가 안 뜰 수 있으니, 그럴 때는 아래 **방법 2 (길찾기 버튼)** 으로 대체해 보세요. 길찾기 버튼은 단순 링크라 항상 잘 작동해요.
**방법 2. 네이버 지도 / 카카오맵 — 길찾기 버튼**
네이버 지도는 iframe 임베드를 막아둬서, **길찾기 링크 버튼**이 가장 확실해요.
```html theme={null}
📍 네이버 지도로 길찾기
```
🔧 **이렇게 수정하세요**
* `우리매장이름` → 매장명 또는 주소(한글 그대로 넣어도 대부분 작동). 예: `홍대카페CdBd`
* 카카오맵용으로 바꾸려면 URL을 `https://map.kakao.com/link/search/매장이름`으로, 배경색 `background:#FEE500`(노랑) + 글자색 `color:#000;`으로 바꿔 보세요.
![네이버 지도 길찾기 버튼 미리보기 — 초록색 CTA 버튼이 표시됨]()
> 💡 같은 페이지에 **카카오맵 임베드(방법 1) + 네이버 길찾기 버튼(방법 2)** 을 함께 두면 카카오·네이버 사용자 모두 편하게 길을 찾을 수 있어요.
### 📄 구글 드라이브 PDF·슬라이드 보여주기
메뉴판·소개서·세일즈덱·포트폴리오 PDF를 페이지 안에서 미리보기로 띄울 때 좋아요.
**준비 (PDF)** — 구글 드라이브에서 파일 우클릭 → **공유** → "링크가 있는 모든 사용자"로 설정 → 링크 복사. 보통 이렇게 생겼어요.
`https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz/view?usp=sharing`
**구글 드라이브 PDF**
```html theme={null}
```
🔧 **이렇게 수정하세요** — 두 가지만 확인하면 돼요.
* `FILE_ID` → 공유 링크의 `/d/`와 `/view` 사이의 긴 문자열 (위 예시에서 `1AbCdEfGhIjKlMnOpQrStUvWxYz` 부분)
* **링크 끝의 `/view`를 `/preview`로 반드시 바꾸기** — `/view`로 두면 임베드가 동작하지 않아요. 이게 가장 자주 빠뜨리는 부분이에요.
* `height="600"` → 세로 크기(px). PDF가 길면 `800`\~`1000`까지 늘리세요.
**구글 슬라이드**
준비: 구글 슬라이드 → **파일 → 웹에 게시 → 임베드** 탭 → 자동 재생/슬라이드 시간 설정 → "게시" → iframe 코드 복사
```html theme={null}
```
🔧 **이렇게 수정하세요** — 구글 슬라이드 "웹에 게시"에서 받은 코드를 **통째로** 붙여 넣어 주세요. `width="960"`처럼 고정 폭으로 나오면 **`width="100%"`로만 바꾸면** 모바일에서도 깔끔해요.
> ⚠️ 회사 내부용·권한 제한 파일은 임베드해도 방문자가 못 봐요. 공유 권한이 **"링크가 있는 모든 사용자 — 뷰어"** 인지 꼭 확인해 보세요.
> 💡 미리보기 이미지는 준비 중이에요. 곧 추가될 예정입니다.
### 🎧 음악·팟캐스트 들려주기
팟캐스트 에피소드·매장 BGM 플레이리스트·자체 제작 음원을 페이지에 띄울 때 써요.
**스포티파이**
준비: Spotify → 곡/앨범/팟캐스트/에피소드 → **(•••) → 공유 → 임베드 코드 복사**
```html theme={null}
```
🔧 **이렇게 수정하세요** — Spotify 공식 임베드 코드를 **그대로** 붙여 넣으면 끝이에요. URL의 `embed/episode/...` 부분은 자료 종류에 따라 자동으로 달라져요.
* 곡 한 곡 → `embed/track/...`
* 앨범 → `embed/album/...`
* 팟캐스트 채널 전체 → `embed/show/...`
* `height="232"` → `352`로 늘리면 큰 카드 형태가 돼요.
**사운드클라우드**
준비: SoundCloud 트랙 → **공유 → 임베드 → 코드 복사**
```html theme={null}
```
🔧 **이렇게 수정하세요** — SoundCloud 공식 임베드를 그대로 붙여넣되, URL 끝의 옵션 몇 개만 조정하면 분위기가 달라져요. (각 옵션은 `&` 기호로 구분돼요)
* `color=%23ff5500` → 플레이어 강조 색. `%23000000` = 검정, `%2300C896` = 민트. (`%23`이 `#` 기호예요)
* `auto_play=false` → `true`로 바꾸면 자동 재생 (모바일 브라우저는 정책상 막아둘 수 있어요)
* `show_comments=true` → `false`로 두면 댓글 숨김 (깔끔)
* `height="166"` → `300`으로 키우면 큰 시각형 플레이어
> 💡 매장 BGM처럼 자동으로 흐르게 하고 싶다면 `auto_play=true`로 시도해 보세요. PC에선 보통 동작하지만 모바일은 차단될 수 있으니, 컨트롤러를 노출해 방문자가 직접 누르도록 안내하면 안전해요.
![스포티파이 임베드 미리보기 — 트랙 플레이어가 카드에 표시됨]()
### 🎁 신청 배너 직접 만들기
CdBd 기본 카드(버튼·이미지)로는 표현이 어려운 **그라디언트 배경·아이콘·강조 박스**를 자유롭게 만들 수 있어요. 위 스크린샷 하단의 보라색 배너처럼요.
```html theme={null}
```
🔧 **이렇게 수정하세요** — 위 코드를 그대로 붙여 넣고, 본인 캠페인에 맞춰 **5곳만** 바꾸면 돼요.
* `#667eea` / `#764ba2` → 배너 배경 그라디언트의 **시작색·끝색**. 브랜드 색 두 가지를 넣으면 자연스러워요. (어울리는 두 색을 찾고 싶다면 [coolors.co/gradient](https://coolors.co/gradient) 추천)
* `🎁 얼리버드 특별 혜택` → **큰 제목** (이모지 + 한 줄 카피)
* `5월 31일까지 신청 시 50% 할인` → **부제** (조건·기한·혜택)
* `https://example.com/signup` → 버튼이 연결될 **신청·구매 페이지 URL**
* `지금 신청하기 →` → **버튼 안 문구**
🎨 **느낌 바꾸기** (선택)
* `border-radius: 12px` → `0`이면 각진 박스, `24px`이면 더 부드럽게 둥근 박스
* `padding: 32px 24px` → 첫 숫자는 위·아래 여백, 둘째 숫자는 좌·우 여백. 더 풍성하게 보이려면 `48px 32px`
* 버튼 안 `color: #764ba2` 값을 위쪽 그라디언트 끝색과 같게 두면 통일감이 좋아요
![커스텀 HTML CTA 배너 미리보기 — 보라 그라디언트 배경의 "지금 신청하기" 배너]()
***
## 3. 그 외 외부 도구 살펴보기
| 도구 | 활용 |
| ------------------------------ | ---------------------------------------- |
| **Tally / Typeform** | 더 멋진 폼 디자인이 필요할 때 (구글 폼 대체) |
| **Google Maps Embed (iframe)** | 해외 매장·국내 외 위치 안내가 필요할 때 |
| **Vimeo / Loom** | 유튜브 외 영상 플랫폼 |
| **Notion 페이지 (공개)** | 가격표·FAQ 페이지 그대로 가져오기 |
| **카카오톡 Sharer / 인스타 DM 링크 버튼** | 공유·메시지 버튼 커스터마이징 (`https://ig.me/m/계정명`) |
| **AdSense / Naver Ads** | 광고 배너 |
| **Mailchimp / Stibee 폼** | 뉴스레터 구독 폼 |
| **Tawk.to / Channel.io** | 라이브 채팅 위젯 (페이지 전체에 떠 있는 채팅 버튼) |
| **Figma / Canva 공유 임베드** | 디자인·포스터 미리보기 |
| **Lottie 애니메이션** | 가벼운 인터랙티브 일러스트 |
## 4. 카드 디자인 다듬기
**카드 디자인** 섹션에서 코드 카드의 배경·테두리·모서리·내부여백·외부여백을 조절할 수 있어요. 임베드된 외부 콘텐츠가 페이지 톤과 자연스럽게 어울리도록 카드 자체에 부드러운 배경색·둥근 모서리를 줘 보세요.
## 5. 안전하게 쓰기
* ✅ **신뢰할 수 있는 출처의 코드만** — 검증되지 않은 스크립트는 보안 위험
* ✅ **모바일에서 잘 보이는지** 미리보기로 꼭 확인 — `width: 100%`, `height` 명시 권장
* ✅ **iframe 차단 사이트** 회피 — 네이버·카카오 본문 페이지는 임베드 차단됨
* ✅ **외부 스크립트 무거우면 페이지 속도 저하** — 한 페이지에 너무 많은 임베드는 피하기
* ✅ **HTTPS 페이지에는 HTTPS 임베드만** — `http://` 임베드는 차단되거나 보안 경고
> 💡 **활용 팁**: 외부 도구 공급사가 제공하는 임베드 코드는 보통 그대로 붙여 넣으면 작동해요. 안 보일 때는 ① 코드 안에 `width`/`height`가 있는지, ② 출처 사이트가 iframe을 허용하는지, ③ HTTPS인지 순서로 확인해 보세요.
# 카드 디자인
Source: https://cdbd.mintlify.app/editor/card-design
# 카드 디자인
> **한 줄 요약** — 카드 한 장씩 배경·테두리·모서리·여백을 따로 꾸며서, 강조하고 싶은 카드만 다르게 보이게 만드는 기능이에요.
## 이 기능이 필요한 순간
* 특정 카드 하나만 눈에 띄게 강조하고 싶을 때 (예약하기·구매하기처럼 사용자가 누르면 좋은 강조 버튼이 있는 카드 등)
* 페이지 전체 분위기와 다른 카드를 한두 장 섞고 싶을 때
* 섹션 사이에 시각적인 호흡(빈 간격)을 주고 싶을 때
> 💡 **페이지 테마와의 차이** — [페이지 테마](/editor/page-theme)는 페이지 전체에 한 번에 적용되는 디자인이에요. 카드 디자인은 **카드 한 장씩** 따로 꾸미는 기능이에요. 전체 분위기를 통일하고 싶으면 페이지 테마를 사용해 보세요. 특정 카드만 다르게 보이게 하고 싶으면 카드 디자인을 사용해 보세요.
***
## 카드 디자인 패널 열기
꾸미고 싶은 카드를 선택해 보세요. 에디터 오른쪽 패널 아래쪽에 **"카드 디자인"** 섹션이 접힌 상태로 보여요. 헤더를 한번 누르면 펼쳐져요.
![카드 디자인 패널 — 배경·테두리·모서리·내부여백·외부여백 설정]()
패널은 위에서부터 다섯 가지 영역으로 나뉘어 있어요.
* **배경** — 카드 안쪽 색이나 이미지
* **테두리** — 카드 둘레의 선
* **모서리** — 카드 모서리 모양
* **내부여백** — 카드 안쪽 콘텐츠와 카드 가장자리 사이 간격
* **외부여백** — 이 카드와 위·아래 카드 사이 간격
차례대로 살펴볼게요.
***
## 배경 설정하기
배경은 세 가지 방식으로 설정할 수 있어요.
* **미리 준비된 색상**에서 고르기
* **직접 색상을 입력**하기
* **배경 이미지** 넣기
### 미리 준비된 색상에서 고르기
배경 영역 위쪽에는 미리 준비된 색상 10개가 동그라미로 배열되어 있어요. 그중 하나를 누르면 카드 배경에 바로 적용돼요. 맨 처음 체크무늬 아이콘은 **배경 없음(투명)** 이에요.
![미리 준비된 색상 10개 — 베이지·크림·연회색·연핑크·살몬·민트·라벤더·다크 틸·다크 네이비]()
색상을 누르면 아래 미리보기처럼 카드 배경에 적용돼요.
![살몬 색상이 적용된 카드 미리보기]()
### 직접 색상 입력하기
미리 준비된 색상 아래의 **무지개 아이콘**을 누르면 색상 선택 창이 열려요. 브랜드 컬러처럼 정확한 색이 필요할 때 활용해 보세요.
![색상 선택 창 — Hex·R·G·B·A 직접 입력]()
* **Hex** — `#FFC0AD`처럼 색을 문자와 숫자로 적는 값이에요
* **R / G / B** — 빨강·초록·파랑의 양을 0\~255 사이로 적어요
* **A** — 색의 투명도예요. 100이면 완전 불투명, 0이면 완전히 비쳐요
색상 값을 모르면 위쪽 색·명도 캔버스에서 원하는 색을 직접 눌러도 돼요.
### 배경 이미지 넣기
무지개 아이콘 옆 **이미지 아이콘**을 누르면 **"이미지 추가하기"** 창이 열려요.
![이미지 추가하기 창 — 내 이미지 / 이미지 검색 / GIF 검색 탭]()
창은 세 개의 탭으로 나뉘어 있어요.
* **내 이미지** — 직접 촬영하거나 갖고 있는 이미지를 올려서 사용해요. 한 장당 **최대 10MB**까지 올릴 수 있어요.
* **이미지 검색** — 무료 이미지 라이브러리에서 키워드로 검색해 가져올 수 있어요.
* **GIF 검색** — 짧게 움직이는 이미지(GIF)를 검색해서 적용할 수 있어요.
이미지를 고르고 오른쪽 위 **"적용하기"** 버튼을 누르면 카드 배경으로 들어가요.
#### 배경 이미지 밝기 4단계 고르기
이미지를 적용하면 배경 영역에 **밝기 선택 버튼**이 새로 나타나요. 같은 이미지라도 분위기와 글자 가독성을 한 번에 조절할 수 있어요.
| 옵션 | 효과 | 어울리는 상황 |
| ------- | ----------------- | ------------------------ |
| **원본** | 이미지를 그대로 보여줘요 | 이미지 자체가 주인공일 때 |
| **어둡게** | 이미지 위에 어두운 막을 덮어요 | 위에 밝은 글자를 올릴 때 |
| **밝게** | 이미지 위에 밝은 막을 덮어요 | 위에 어두운 글자를 올릴 때 |
| **흐리게** | 이미지를 부드럽게 흐려요 | 텍스트가 많아 배경은 분위기만 잡고 싶을 때 |
![원본 적용 — 이미지 그대로]()
*원본 — 이미지를 그대로 보여줘요*
![어둡게 적용 — 이미지 위에 어두운 막]()
*어둡게 — 글자를 흰색으로 올릴 때 유용해요*
![밝게 적용 — 이미지 위에 밝은 막]()
*밝게 — 글자를 어두운 색으로 올릴 때 유용해요*
![흐리게 적용 — 이미지가 부드럽게 흐려진 모습]()
*흐리게 — 텍스트가 많을 때 가독성을 확보해요*
***
## 테두리 두르기
테두리는 카드 둘레에 선을 둘러서 배경과 카드를 또렷하게 구분해 줘요. **두께**와 **색상**을 따로 조절할 수 있어요.
* **두께 막대** — 값을 좌우로 끌어서 정하는 막대예요. 0부터 4까지 1씩 늘어나요. **0이면 테두리가 사라져 무테 상태**가 돼요.
* **숫자 입력 칸** — 막대 옆 숫자 칸에 값을 직접 적어도 똑같이 적용돼요.
* **색상 원** — 오른쪽 끝의 동그란 원을 누르면 색상 선택 창이 열려요. 위 "직접 색상 입력하기"와 같은 방식(Hex·R·G·B·A)으로 색을 정해요.
![테두리 색상 선택 창 — Hex·R·G·B·A 직접 입력]()
*테두리 색상은 이 창에서 고르고, 두께는 위쪽 막대에서 0\~4 사이로 조절해요.*
***
## 모서리 고르기
모서리는 **각진**과 **둥근** 두 가지 중에서 골라요.
![모서리 "각진" 적용 — 직각 모서리]()
*각진 — 카드 모서리를 직각으로 보여줘요*
![모서리 "둥근" 적용 — 부드러운 곡선 모서리]()
*둥근 — 카드 모서리를 둥글게 보여줘요*
| 옵션 | 설명 |
| ------ | ----------------- |
| **각진** | 카드 모서리를 직각으로 보여줘요 |
| **둥근** | 카드 모서리를 둥글게 보여줘요 |
***
## 내부 여백 조절하기
여백은 카드 안팎의 빈 공간이에요. **내부여백**은 카드 안쪽 콘텐츠와 카드 가장자리 사이의 간격이에요. 글이 답답해 보이면 내부여백을 늘려서 콘텐츠 주변에 여유 공간을 만들 수 있어요.
### 네 면을 한꺼번에 조절하기
내부여백은 처음 펼친 상태에서 막대 하나로 보여요. 이 막대는 카드의 **상·하·좌·우 네 면을 동시에** 같은 값으로 조절해요.
* 막대 범위는 **0부터 40까지**, 2씩 늘어나요. (0, 2, 4, 6, ..., 38, 40)
* 막대를 끝까지 밀어도 **40이 최대**예요. 더 큰 여백은 줄 수 없어요.
* 막대 옆 숫자 입력 칸에 직접 값을 적어도 똑같이 적용돼요.
![내부여백 0 — 콘텐츠가 카드 가장자리까지 닿음]()
*값이 0일 때 — 콘텐츠가 카드 가장자리까지 닿아요*
![내부여백 40 — 콘텐츠 주변에 여유 공간]()
*값이 40일 때 — 콘텐츠 주변에 여유 공간이 생겨요*
### 위·아래·왼쪽·오른쪽을 따로 조절하기
막대 오른쪽 끝의 **∨ 아이콘**을 누르면 막대가 네 줄로 펼쳐져요. **상 / 하 / 좌 / 우** 네 면을 각각 다른 값으로 조절할 수 있어요.
![내부여백 펼친 모습 — 상·하·좌·우 네 개의 막대로 분리]()
*펼치면 네 면이 따로 조절돼요*
각 줄도 똑같이 0부터 40까지, 2씩 늘어나요. 펼친 순간에는 직전 일괄 값이 네 줄에 그대로 복사돼 있어요. 바꾸고 싶은 면만 골라서 손대면 돼요.
예를 들면 이렇게 쓸 수 있어요.
* **본문 텍스트가 많은 카드** — 좌·우만 살짝 늘려요
* **이미지를 가득 채우고 싶은 카드** — 좌·우는 0으로 두고 상·하만 약간 띄워요
* **강조 버튼이 들어간 카드** — 상·하를 넉넉히 늘려요
> 💡 **펼친 다음에는 따로 조절돼요** — 한번 펼치면 네 면을 따로 손대게 돼요. 다시 네 면을 똑같이 맞추고 싶으면 같은 값을 네 칸에 직접 다시 입력해 주세요.
***
## 외부 여백 조절하기
**외부여백**은 이 카드와 위·아래 카드 사이의 간격이에요. 섹션을 시각적으로 끊고 싶을 때 활용해 보세요.
### 위·아래를 한꺼번에 조절하기
외부여백도 처음에는 막대 하나로 보여요. 이 막대는 카드의 **위·아래 간격을 동시에** 같은 값으로 조절해요.
* 막대 범위는 내부여백과 똑같이 **0부터 40까지**, 2씩 늘어나요.
* 막대 옆 숫자 입력 칸에 직접 값을 적어도 똑같이 적용돼요.
![외부여백 0 — 위·아래 카드와 붙어 있는 모습]()
*값이 0일 때 — 위·아래 카드와 자연스럽게 이어져요*
![외부여백 40 — 위·아래에 넓은 빈 공간]()
*값이 40일 때 — 위·아래에 넉넉한 빈 공간이 생겨요*
### 위와 아래를 따로 조절하기
외부여백도 오른쪽 끝의 **∨ 아이콘**을 누르면 막대가 펼쳐져요. **상**과 **하** 두 줄로 나뉘어서 위쪽 간격과 아래쪽 간격을 따로 조절할 수 있어요.
![외부여백 펼친 모습 — 상·하 두 개의 막대로 분리]()
*펼치면 위·아래가 따로 조절돼요*
내부여백과 달리 외부여백에는 **좌·우 옵션이 없어요.** 카드의 가로 폭은 페이지 폭에 맞춰져 있어서, 양옆 간격은 따로 조절할 수 없게 되어 있어요.
예를 들면 이렇게 쓸 수 있어요.
* **새 섹션이 시작되는 카드** — **상**만 넉넉히 늘려요
* **섹션의 마지막 카드** — **하**만 늘려요
* **본문 카드 사이** — 0\~4 정도로 가볍게 두면 흐름이 끊기지 않아요
***
## 카드 디자인을 깔끔하게 쓰는 방법
* **강조할 카드 한두 장에만 변화를 줘 보세요.** 나머지는 투명 배경으로 두면 시선이 자연스럽게 모여요.
* **외부여백으로 섹션을 나눠 보세요.** 페이지가 빽빽하다면 섹션 시작 카드의 외부여백 **상**을 늘려 보세요.
* **글자가 안 보이면 흐리게가 도움이 돼요.** 배경 이미지 위에 텍스트가 많을 때 **흐리게**를 써 보세요.
* **페이지 테마부터 정해 보세요.** [페이지 테마](/editor/page-theme)로 전체 분위기를 먼저 통일하면, 강조할 카드만 카드 디자인으로 손대는 흐름이 자연스러워요.
***
## 자주 묻는 질문
**Q. 카드 디자인을 적용할 수 있는 카드 개수에 한도가 있나요?**
A. 따로 한도가 없어요. 페이지에 있는 모든 카드에 각각 다른 카드 디자인을 적용해도 괜찮아요.
**Q. 배경 이미지는 얼마나 큰 파일까지 올릴 수 있나요?**
A. 한 장당 최대 10MB까지 올릴 수 있어요. 그보다 큰 파일은 다른 도구로 용량을 줄인 다음 다시 올려 주세요.
**Q. 여백을 40보다 더 크게 줄 수는 없나요?**
A. 막대의 최댓값은 40이에요. 현재 카드 디자인 패널에서는 40보다 큰 여백을 직접 줄 수 없어요.
**Q. 내부여백을 펼친 뒤 다시 한 값으로 통일하고 싶어요.**
A. 네 칸(또는 외부여백은 두 칸)에 같은 값을 직접 입력해 주세요. 펼친 상태에서는 자동으로 다시 묶이지 않아요.
**Q. 테두리를 안 보이게 하고 싶어요.**
A. 테두리 두께를 **0**으로 두면 테두리가 사라져요. 색상은 그대로 남아 있지만 두께가 0이라 화면에는 보이지 않아요.
***
## 함께 보면 좋은 문서
* [페이지 테마](/editor/page-theme) — 페이지 전체 분위기를 한 번에 통일하고 싶을 때
* [에디터 살펴보기](/editor/overview) — 에디터의 기본 사용법
# 구분선 카드
Source: https://cdbd.mintlify.app/editor/card-divider
# 구분선 카드
> **한 줄 요약** — 카드와 카드 사이에 가로 선을 넣어서 섹션 경계를 또렷하게 보여주는 카드예요.
## 이 기능이 필요한 순간
* 카드가 많이 쌓인 페이지에서 **섹션 사이 경계가 흐려진다고** 느낄 때
* 청첩장이나 이벤트 초대장처럼 **장식 요소**가 필요할 때 (물결선이 어울려요)
* 메뉴판·가격표처럼 **항목 사이 구분**이 필요한 페이지를 만들 때
***
## 구분선 카드 추가하고 설정 살펴보기
에디터에서 **\[+ 카드 추가]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[구분선]** 카드를 고르면 카드가 페이지에 들어가고, 오른쪽 패널에 구분선 설정이 열려요.
![구분선 카드 설정 — 좌측 미리보기에 실선·굵은 점선·얇은 점선·물결선이 페이지 안에서 어떻게 보이는지 확인할 수 있어요]()
설정은 크게 네 가지예요. 차례대로 살펴볼게요.
***
## 모양 고르기
CdBd 구분선은 네 가지 모양을 지원해요. 페이지 톤과 콘텐츠 분위기에 맞춰 골라보세요.
| 모양 | 어울리는 분위기 |
| --------- | ---------------------------------------- |
| **실선** | 가장 기본적인 구분선이에요. 깔끔하고 정돈된 인상을 줘요 |
| **굵은 점선** | 조금 더 가벼운 분위기예요. 일정이나 체크리스트 사이 구분에 어울려요 |
| **얇은 점선** | 섬세하고 부드러운 느낌이에요. 상품 정보나 옵션 사이를 구분할 때 좋아요 |
| **물결선** | 손글씨 같은 따뜻한 인상이에요. 청첩장이나 축하 페이지에 잘 어울려요 |
***
## 굵기와 색깔 조절하기
**굵기**는 우측 패널의 **구분선** 슬라이더로 조절해요. 범위는 **0\~4**이며 **0.5 단위로 움직여요**. 더 섬세하게 맞추고 싶다면 1·2·3·4뿐 아니라 0.5·1.5·2.5처럼 가운데 값도 활용해 보세요.
* 0에 가까울수록 얇고 섬세한 선이 돼요
* 4에 가까울수록 굵고 또렷한 강조선이 돼요
**색깔**은 슬라이더 옆의 색상 원을 눌러 자유롭게 바꿀 수 있어요. 페이지 테마와 같은 색을 쓰면 자연스럽고, 보색을 쓰면 강조 효과가 커져요.
> ⚠️ **흰색을 고를 때 주의해 주세요** — 배경이 흰색인 페이지에서 흰색 구분선을 고르면 선이 보이지 않아요. 페이지 배경과 다른 색을 선택해 주세요.
***
## 상하 여백 조절하기
**상하여백** 슬라이더로 구분선 위·아래 공간을 **0\~4 단계**로 조절해요. 카드와 카드 사이의 호흡을 결정하는 값이에요.
* 정보가 빽빽한 페이지에서는 여백을 크게 잡아 숨통을 트여주세요
* 미니멀하게 정돈된 페이지에서는 여백을 작게 둬도 깔끔해요
추가로, 우측 패널의 **카드 디자인** 섹션을 펼치면 구분선 자체가 아닌 **카드 영역의 배경·테두리·외부 여백**을 따로 조정할 수 있어요. 좌우 여백을 줘서 구분선이 본문 폭과 다르게 보이도록 만드는 식이에요.
구분선 카드에는 **레이어 추가** 섹션도 있어요. 섹션을 펼치면 **\[+ 레이어 추가]** 버튼이 보이고, 누르면 추가할 수 있는 옵션이 열려요.
***
## 활용 팁
기본 조합 몇 가지를 소개해요. 페이지 분위기에 맞춰 응용해 보세요.
* **실선 + 얇은 굵기 + 옅은 회색** — 가장 무난한 섹션 구분이에요
* **물결선 + 브랜드 컬러** — 청첩장이나 이벤트 초대장의 우아한 포인트가 돼요
* **얇은 점선 + 굵기 2** — 메뉴판이나 가격표에서 항목 구분에 어울려요
* **굵은 실선 + 강조 색** — 페이지 상단 헤더와 본문을 분리할 때 좋아요
***
## 자주 묻는 질문
**Q. 구분선 굵기를 0.5처럼 소수로 맞출 수 있나요?**
A. 네, 굵기 슬라이더는 0\~4 범위에서 0.5 단위로 움직여요. 1과 2 사이가 너무 차이 난다고 느낄 때 1.5로 두면 자연스러워요.
**Q. 어느 모양을 골라야 할지 모르겠어요.**
A. 무난한 선택은 **실선**이에요. 톤이 부드러운 페이지(청첩장·축하 카드)라면 **물결선**, 정보 목록이 많다면 **얇은 점선**을 권장해요.
**Q. 페이지 한 곳에 구분선을 너무 많이 넣어도 괜찮나요?**
A. 시각적으로 분주해질 수 있어요. 구분선은 정말 영역을 나눠야 하는 곳에만 한두 개 넣는 편을 권장해요.
***
## 함께 보면 좋은 문서
* [텍스트 카드](/editor/card-text) — 섹션 제목 텍스트 카드 뒤에 구분선을 두면 영역 구분이 더 또렷해져요
* [에디터 기본](/editor/overview) — 카드 추가·정렬 등 에디터의 기본 사용법을 함께 확인해 보세요
# 갤러리 카드
Source: https://cdbd.mintlify.app/editor/card-gallery
# 갤러리 카드
갤러리 카드는 여러 장의 사진을 한 번에 보여줄 때 사용해요. 쇼핑몰 상품 사진, 부동산 매물 사진, 포트폴리오 이미지 등 다수의 사진으로 정보를 전달해야 할 때 특히 유용하답니다.
> 💡 **상품을 가격·구매 버튼과 함께 진열하고 싶다면?** — 사진만 모아 보여주는 갤러리 대신 [상품 카드](/editor/card-product)를 써 보세요. 상품 페이지 주소만 붙여 넣으면 이미지·상품명·가격·구매 버튼이 자동으로 한 칸 안에 묶여요.
![갤러리 카드 — 그리드 레이아웃(상단)과 나열하기 레이아웃(하단) 비교]()
## 1. 이미지 추가하기
갤러리 카드를 추가한 뒤 우측 패널의 **이미지 목록**에 있는 **+** 버튼을 눌러 이미지를 추가해요. 최대 **15장**까지 한 갤러리에 담을 수 있어요.
추가 방법은 일반 이미지 카드와 동일해요.
* **내 이미지 (직접 업로드)**: 클릭 또는 끌어다 놓기로 업로드 (1장당 최대 10MB)
* **이미지 검색**: Pexels 무료 사진 검색
* **GIF 검색**: Giphy GIF 검색
추가한 이미지는 순서 변경, 복사, 개별 편집, 삭제가 모두 가능해요.
## 2. 갤러리 레이아웃 선택하기
**유형** 영역에서 이미지를 어떻게 보여줄지 레이아웃을 선택해요. 콘텐츠 성격에 맞는 방식을 골라 보세요.
* **나열하기**: 이미지들을 위아래로 일렬 배치 — 큰 사진을 하나씩 차근차근 보여주고 싶을 때
* **넘겨보기 (슬라이드)**: 좌우로 넘기는 슬라이드 형태. 내비게이션 화살표·지표를 숨길 수 있고, 1\~4초 간격으로 자동 슬라이드 설정도 가능해요.
* **그리드**: 2단·3단·4단 바둑판 배열 — 한 화면에서 여러 이미지를 비교·탐색하게 하고 싶을 때
## 3. 간격 조절하기
이미지 사이의 간격을 슬라이더로 조절해서 빽빽한 느낌부터 여유로운 배치까지 자유롭게 표현할 수 있어요.
## 4. 🎨 이미지 모양 꾸미기
### 4.1 비율 선택하기
원본, 1:1, 가로, 세로 비율 중 원하는 형태를 선택할 수 있어요. 비율을 통일하면 갤러리 전체가 정돈된 인상을 줘요.
### 4.2 모서리 모양 설정하기
각진 모서리 또는 둥근 모서리 중 선택할 수 있어요.
### 4.3 테두리·여백 추가하기
이미지에 테두리를 더하거나 카드 외부 여백을 조절해서 다른 카드와의 시각적 분리감을 만들 수 있어요.
> 💡 **활용 팁**:
>
> * **그리드**는 메뉴/상품 한눈에 보기 좋아요 — 위 스크린샷처럼 3단 그리드는 이벤트 라인업·갤러리 모음에 어울려요.
> * **나열하기**는 한 장씩 큰 화면으로 강조하고 싶을 때 좋아요.
> * **슬라이드 + 자동 넘김**은 이벤트 홍보·신제품 소개에 효과적 — 방문자가 별도 조작 없이 모든 이미지를 자연스럽게 보게 돼요.
# 이미지 카드
Source: https://cdbd.mintlify.app/editor/card-image
# 이미지 카드
이미지 카드는 사진이나 그림을 페이지에 추가해서 시각적인 매력을 높여주는 도구예요. 단순한 이미지 삽입을 넘어, 링크를 연결해서 방문자를 원하는 곳으로 유도하는 배너로도 활용할 수 있답니다.
![이미지 카드 — 외부여백 없음(상단)과 외부여백 있음(하단) 비교]()
## 1. 이미지 추가하기
페이지에 이미지 카드를 추가한 뒤, 폰 미리보기의 **이미지 업로드하기** 버튼을 누르면 **이미지 추가하기** 창이 열려요. 다음 세 가지 방법으로 이미지를 가져올 수 있어요.
* **내 이미지 (직접 업로드)**: 파일을 끌어다 놓거나 영역을 클릭해서 업로드할 수 있어요. 이미지 1장당 최대 10MB.
* **이미지 검색**: Pexels의 고품질 무료 사진을 검색해서 바로 삽입할 수 있어요.
* **GIF 검색**: Giphy의 GIF를 검색해서 움직이는 이미지로 활용할 수 있어요.
업로드한 이미지는 **내 이미지** 라이브러리에 저장돼서 다른 카드에서도 재사용할 수 있어요. 자주 쓰는 이미지는 **즐겨찾기**에 추가해두면 빠르게 찾을 수 있고, 필요 없어진 이미지는 **휴지통**에서 복원하거나 영구 삭제할 수 있어요.
## 2. 이미지 관리하기
이미지를 선택한 뒤 다음 작업을 할 수 있어요.
* **이름 설정**: 이미지마다 이름을 붙여두면 라이브러리에서 찾기 편해요.
* **변형**: 좌우 반전, 회전으로 방향 조정.
* **복사 / 다운로드 / 삭제**: 라이브러리 안에서 동일 이미지 복제, 컴퓨터로 다운로드, 휴지통으로 이동.
## 3. 🎨 이미지 디자인 꾸미기
### 3.1 비율 선택하기
업로드한 이미지의 가로세로 비율을 선택할 수 있어요.
* **원본**: 업로드한 이미지 비율 그대로 표시
* **1:1**: 정사각형
* **가로**: 가로형 (4:3 등)
* **세로**: 세로형 (3:4 등)
### 3.2 크기 조절하기
슬라이더로 카드 영역 안에서 이미지가 차지하는 크기를 조절할 수 있어요.
### 3.3 모양 변경하기
이미지의 모서리 모양을 선택해요.
* **각진 모양**: 직각 모서리
* **둥근 모양**: 라운드 모서리
* **원형 / 그 외**: 모양 옵션에서 추가 선택
### 3.4 정렬하기
이미지를 카드 안에서 **왼쪽 / 가운데 / 오른쪽** 중 원하는 위치로 정렬할 수 있어요.
## 4. 이미지에 링크 걸기
**링크 연결** 섹션에서 이미지를 탭했을 때 이동할 URL을 설정할 수 있어요. URL 열기 외에도 전화 연결, 이메일, 페이지 이동 등 다양한 연결 방식을 지원해요. 제품 페이지나 예약 링크로 연결하면 클릭 유도 효과가 뛰어난 배너로 활용할 수 있답니다.
## 5. 카드 디자인 (배경·테두리·여백)
**카드 디자인** 섹션을 펼치면 이미지 카드 자체의 시각 요소를 다듬을 수 있어요.
* **배경**: 카드 배경색·이미지 지정
* **테두리**: 두께·색상으로 카드 경계 강조
* **모서리**: 카드의 모서리 둥글기 (각진 / 둥근)
* **내부여백 (Padding)**: 카드 안쪽, 이미지와 카드 경계 사이 공간
* **외부여백 (Margin)**: 카드와 카드 사이 공간
> 💡 **외부여백 활용 팁**: 위 스크린샷처럼 첫 번째 이미지는 외부여백 `0`으로 설정하면 화면을 가득 채우는 풀-블리드(full-bleed) 표지처럼 보이고, 두 번째 이미지는 외부여백을 `24` 정도로 주면 다음 콘텐츠와 시각적으로 분리돼요. 카드 성격에 따라 자연스럽게 강·약을 만들 수 있답니다.
## 6. 레이어 추가하기
**레이어 추가** 섹션에서는 이미지 위에 텍스트, 도형, 아이콘 등을 겹쳐 배치할 수 있어요. 이벤트 포스터처럼 이미지 위에 행사명·날짜·태그를 얹을 때 유용해요.
> 💡 **활용 팁**: 이미지에 링크를 걸면 클릭 가능한 배너가 돼요. 이벤트 포스터, 제품 사진에 구매 페이지 링크를 연결해 보세요. 외부여백을 적절히 조절하면 한 페이지 안에서 시각적 리듬도 만들 수 있어요. (상품 사진 + 상품명 + 가격 + 구매 버튼을 함께 묶고 싶다면 [상품 카드](/editor/card-product)를 활용해 보세요.)
## 고객마다 다른 이미지를 보여주고 싶다면
이미지 카드에는 고객마다 서로 다른 사진을 표시할 수도 있어요. 데이터 관리하기에서 이미지를 등록한 뒤 이미지 카드에 적용하면, 개별 URL마다 그 고객의 이미지가 자동으로 표시돼요. 자세한 방법은 [개별 이미지 적용하기](/data/individual-image)를 참고해 보세요.
# 위치 안내 카드
Source: https://cdbd.mintlify.app/editor/card-map
# 위치 안내 카드
> **한 줄 요약** — 매장·행사장의 지도를 페이지 안에 직접 보여주고, 방문자가 한 번에 길찾기까지 갈 수 있게 해주는 카드예요.
## 이 기능이 필요한 순간
* **오프라인 매장**의 방문 안내 페이지를 만들 때 (카페·식당·스튜디오)
* **결혼식·세미나·팝업 스토어**처럼 일회성 행사 초대장을 만들 때
* 주소만 알려주는 대신 **지도와 길찾기 버튼**을 한 카드로 묶어 안내하고 싶을 때
***
## 위치 안내 카드 설정하기
에디터에서 **\[+ 카드 추가하기]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[위치 안내]** 카드를 고르면 카드가 페이지에 들어가고, 오른쪽 패널에 위치 안내 설정이 열려요.
![위치 안내 카드 — 구글맵으로 강남역 사거리를 표시한 화면과 우측 설정 패널]()
설정은 크게 **종류 / 주소 / 구성 / 지도 모양 / 주소 텍스트 / 버튼 디자인** 순서로 정리돼 있어요.
***
## 지도 종류 고르기 — 구글맵 vs 네이버맵
CdBd는 **구글맵**과 **네이버맵** 두 가지를 모두 지원해요. 우측 패널의 **종류** 항목에서 언제든 바꿀 수 있어요.
| 지도 | 어울리는 상황 |
| -------- | ------------------------------------------------------------------------------------ |
| **네이버맵** | 국내 방문자가 대부분인 매장·맛집·강의실. 국내 주소 정확도가 높고, 모바일에서 길찾기 버튼을 누르면 네이버 지도 앱이 자동으로 열리는 흐름에 익숙해요 |
| **구글맵** | 외국인 방문이 많은 호텔·관광지·국제 행사. 영문 표기와 해외 주소 검색에 강해요 |
국내 / 해외 방문자가 섞이는 페이지라면 한 페이지에 두 카드를 함께 두고, 각각 다른 지도로 안내하는 방법도 좋아요.
***
## 주소 입력하기
**주소** 검색창에 장소명이나 주소를 입력하면 자동완성 후보가 나타나요. 후보를 눌러요. 위·경도와 정식 주소가 자동으로 채워져요. 지도에 핀이 표시돼요.
검색은 다음 형태가 모두 가능해요.
* **장소명**: 강남역, 광화문빌딩, 스타벅스 시청점
* **도로명 주소**: 서울 강남구 테헤란로 152
* **지번 주소**: 서울 강남구 역삼동 737
* **건물명**: 강남파이낸스센터, 코엑스
***
## 구성 — 주소 텍스트와 버튼 켜고 끄기
**구성** 영역에서 카드에 무엇을 함께 보여줄지 선택해요.
* **주소 표시** — 지도 아래에 텍스트 주소를 함께 보여줄지 토글로 정해요. 한국어가 약한 방문자에게도 도움이 되니 가급적 켜두는 편을 권장해요.
* **버튼** — "오시는 길" 같은 길찾기 버튼을 보여줄지 토글로 정해요. 모바일에서 버튼을 누르면 지도 앱이 열려요.
***
## 지도 모양 다듬기
**지도 모양** 영역에서 지도의 비율과 모서리를 정돈해요.
* **비율** — **1:1** (정사각형) 또는 **가로** 중에서 골라요. 페이지 흐름에 맞춰 카드 높이가 달라져요.
* **모서리** — **원형 / 각진 / 둥근** 중에서 골라요. 지도 카드는 보통 **둥근 모서리**가 다른 카드와 잘 어울려요.
***
## 주소 텍스트와 버튼 디자인 정리하기
**주소 텍스트** 섹션에서 지도 아래 표시되는 주소 글씨의 서체·크기·굵기·색상을 다듬을 수 있어요. (주소 표시 토글이 켜져 있을 때만 활성화돼요.)
**버튼 디자인** 섹션에서는 길찾기 버튼의 모양·색상·텍스트를 바꿀 수 있어요. 기본 문구는 자유롭게 수정할 수 있으니, 페이지 톤에 맞춰 "오시는 길", "찾아오시는 길", "지도 보기" 같은 표현으로 바꿔보세요.
***
## 활용 팁
* **국내 매장 안내** — 네이버맵 + 주소 표시 켬 + 길찾기 버튼 켬. 국내 방문자에게 가장 익숙한 흐름이에요.
* **국제 행사·호텔** — 구글맵으로 영문 주소를 안내하면 해외 방문자가 길찾기에 어려움을 덜 겪어요.
* **여러 지점이 있는 브랜드** — 지점 수만큼 위치 안내 카드를 배치하고, 각 카드 위에 텍스트 카드로 지점 이름을 함께 보여주세요.
***
## 자주 묻는 질문
**Q. 구글맵과 네이버맵 중 어느 쪽을 골라야 하나요?**
A. 페이지의 주 방문자에 따라 정해요. 국내 방문자 대상이라면 네이버맵, 외국인 방문이 많다면 구글맵을 권장해요.
**Q. 길찾기 버튼을 누르면 어떤 앱이 열리나요?**
A. 모바일에서 선택한 지도(구글맵 또는 네이버맵)의 길찾기 화면으로 이어져요. PC에서는 환경에 따라 동작이 다를 수 있으니, 발행 후 모바일에서 한 번 더 확인해 보세요.
***
## 함께 보면 좋은 문서
* [텍스트 카드](/editor/card-text) — 지도 위·아래에 운영시간·주차 안내 같은 보조 정보를 함께 두면 좋아요
* [버튼 카드](/editor/card-button) — 길찾기 외에 전화 연결·예약 같은 별도 액션을 추가하고 싶을 때
# 메뉴 카드
Source: https://cdbd.mintlify.app/editor/card-menu
# 메뉴 카드
> **한 줄 요약** — 페이지 상단에 탭을 만들어서 여러 링크나 페이지로 한 번에 이동할 수 있게 해주는 카드예요.
## 이 기능이 필요한 순간
* 페이지 안에서 외부 링크(SNS·홈페이지·예약 페이지 등)를 **한 줄짜리 탭으로 깔끔하게 정리**하고 싶어요
* 멀티페이지로 만든 사이트에서 방문자가 **챕터 사이를 자유롭게 오갈 수 있게** 안내하고 싶어요 (예: 행사 안내 → 예약 → 오시는 길)
* 버튼 카드를 여러 개 세로로 쌓는 대신 **공간을 아끼면서** 여러 링크를 보여주고 싶어요
***
## 메뉴 카드 설정하기
### 1단계. 메뉴 항목 만들기
에디터에서 **\[+ 카드 추가]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[메뉴]** 카드를 고르면 카드가 페이지에 들어가요. 이때 **메뉴1·메뉴2·메뉴3·메뉴4** 네 개의 기본 항목이 자동으로 함께 생겨요.
오른쪽 패널에는 **메뉴 목록 / 디자인** 두 개의 탭이 보여요. 먼저 **메뉴 목록** 탭에서 각 항목을 펼쳐 아래 내용을 채워요.
![메뉴 카드 설정 — 메뉴 목록 탭과 항목별 입력 영역]()
| 항목 | 입력 방법 |
| --------------------- | -------------------------------------------------------------------------------------------- |
| **이름** | 탭에 표시될 이름을 자유롭게 적어요. 예) `행사 안내`, `예약하기`, `오시는 길` |
| **연결 유형** | "URL 열기"를 눌러 다른 유형으로 바꿀 수 있어요. **URL 열기 / 전화하기 / 문자 보내기 / 이메일 보내기 / 연락처 저장하기** 다섯 가지 중에서 골라요 |
| **URL** (또는 유형에 맞는 값) | 연결할 주소·번호·이메일을 입력해요 |
| **새 창에서 열기** | URL 유형일 때, 체크하면 방문자가 탭을 눌렀을 때 새 창으로 열려요 |
각 항목 옆에는 다음과 같은 기능 버튼이 있어요.
* 항목 왼쪽 **점 8개로 된 손잡이** — 끌어서 항목 순서를 바꿀 수 있어요
* 오른쪽 **강조** 스위치 — 켜면 해당 탭이 진하게 강조돼 보이고, 끄면 회색으로 옅게 보여요
* 오른쪽 끝의 **( ⁝ ) 버튼** — 누르면 **메뉴 복제하기**, **메뉴 삭제하기** 옵션이 보여요
> 💡 **항목을 잘 보이게** — 화면 폭이 좁아 항목이 많으면 마지막 항목이 "메뉴…"처럼 잘려 보일 수 있어요. 중요한 항목은 앞쪽으로 옮기거나, 디자인 탭의 **넘치는 메뉴 펼치기** 토글을 켜면 잘린 항목까지 볼 수 있어요.
### 2단계. 방문자에게 보이는 모습 확인하기
페이지를 발행하면 메뉴 카드가 페이지 상단에 가로 탭으로 노출돼요. 방문자가 탭을 누르면 1단계에서 설정한 동작이 실행돼요.
![원페이지 뷰어 상단의 메뉴 탭]()
***
## 디자인 다듬기
오른쪽 패널의 **디자인** 탭에서 메뉴 바의 레이아웃과 스타일을 바꿀 수 있어요.
* **레이아웃 유형** — **한눈에 보기** / **눌러서 보기** 두 가지 중에서 골라요
* **X개씩 표시** 슬라이더 — 한 줄에 보일 항목 수를 정해요 (기본 4)
* **넘치는 메뉴 펼치기** 토글 — 화면 폭을 초과한 항목이 잘릴 때, 토글을 켜면 잘린 항목까지 펼쳐서 보여줘요
이 외에 서체·색상·배경·여백 같은 스타일도 같은 탭에서 함께 다듬을 수 있어요. 페이지 전체 분위기에 맞춰 자유롭게 조절해 보세요.
***
## 활용 팁
**원페이지에서는** — 페이지 최상단에 메뉴 카드를 배치하면 방문자가 원하는 정보로 빠르게 이동할 수 있어요. 자주 공유하는 SNS 채널이나 외부 링크들을 한 줄에 묶어보세요.
**멀티페이지에서는** — 행사 안내·예약·오시는 길처럼 챕터별로 페이지를 나눠 운영할 때, 페이지 상단의 메뉴 카드를 챕터 이동 안내처럼 활용할 수 있어요.
***
## 자주 묻는 질문
**Q. "강조" 스위치를 켜면 해당 탭만 보이고 나머지는 숨겨지나요?**
A. "강조" 스위치는 항목에 시각적 강조 표시를 주는 옵션이에요. 켜면 해당 탭이 진하게 보이고, 끄면 회색으로 옅게 보여요. 항목 자체를 숨기는 옵션은 아니에요.
**Q. 메뉴 항목은 몇 개까지 만들 수 있나요?**
A. 기본 4개가 자동으로 생겨요. 각 항목의 ( ⁝ ) 버튼으로 복제하거나 삭제할 수 있어요. 다만 화면 폭이 좁으면 뒤쪽 항목이 잘려 보일 수 있어요. 이때는 디자인 탭의 **넘치는 메뉴 펼치기** 토글을 켜면 잘린 항목까지 볼 수 있어요.
***
## 함께 보면 좋은 문서
* [버튼 카드](/editor/card-button) — 링크 한 개만 강조하고 싶을 때 어울려요
* [멀티페이지 개요](/editor/multipage/overview) — 메뉴 카드를 챕터 이동 안내로 활용하려면 멀티페이지 구조 이해가 필요해요
* [SNS 카드](/editor/card-sns) — SNS 채널만 모아 보여주고 싶을 때는 SNS 카드가 더 깔끔해요
# 상품 카드
Source: https://cdbd.mintlify.app/editor/card-product
# 상품 카드
> **한 줄 요약** — 외부 상품 페이지 주소만 붙여 넣으면 이미지·상품명·가격·구매 버튼이 자동으로 채워지는, 상품 진열대용 카드예요.
## 이 기능이 필요한 순간
* 자사 쇼핑몰(스마트스토어·쿠팡·자체몰)에서 파는 상품을 한 페이지에 **카탈로그처럼** 모아두고 싶을 때
* 인플루언서·셀러로서 "오늘의 추천 상품 5개"처럼 **상품 큐레이션**을 보여주고 싶을 때
* 이미지 카드·텍스트 카드·버튼 카드를 따로 만들지 않고 **주소 한 줄**로 상품 한 칸을 완성하고 싶을 때
***
## 상품 카드 추가하기
에디터에서 **\[+ 카드 추가하기]** 버튼을 누르면 카드 추가 메뉴가 열려요. 메뉴의 기본 카드 두 번째 줄 마지막에 있는 **\[상품]** 을 골라요.
![상품 카드는 카드 추가 메뉴의 두 번째 줄 마지막에 있어요]()
페이지에 빈 상품 카드 한 개가 추가되고, 오른쪽 패널이 상품 카드 설정으로 자동 전환돼요. 빈 카드에는 **"오른쪽에서 상품 URL을 입력해 주세요"** 라는 안내가 보여요.
![빈 상품 카드와 오른쪽의 상품 목록 패널 — 주소만 기다리는 상태예요]()
오른쪽 패널 위쪽에는 **상품 목록 / 디자인** 두 가지 탭(설정 묶음을 바꾸는 작은 메뉴)이 있어요. **상품 목록** 탭에서는 어떤 상품을 보여줄지 정하고, **디자인** 탭에서는 진열 방식을 정해요.
***
## 상품 주소를 붙여넣고 자동으로 채우기
이 카드의 핵심은 **주소 한 줄로 상품 정보가 자동으로 채워진다**는 점이에요.
### 1단계. 상품 페이지 주소 입력하기
상품 목록 탭의 **상품 항목**(상품 하나당 작은 칸 한 개) 안에 있는 **"상품 페이지 URL"** 입력 칸에 외부 상품 페이지 주소를 붙여 넣어요. 예를 들어 무신사 상품 페이지 주소(`https://www.musinsa.com/products/6120209`)를 그대로 복사해 붙여 넣으면 돼요. 주소를 입력하면 옆에 있는 **체크(✓) 아이콘 버튼**이 활성 상태로 바뀌어요.
![무신사 상품 주소를 붙여 넣은 모습 — 오른쪽 체크 아이콘이 활성 상태로 바뀌어요]()
### 2단계. 체크 아이콘 누르거나 Enter 누르기
**체크(✓) 아이콘**을 누르거나 키보드의 **Enter** 키를 누르면, CdBd가 그 주소의 페이지를 읽어 와요. 자동으로 채워지는 항목은 다음과 같아요.
| 자동으로 채워지는 것 | 설명 |
| ----------- | ------------------------------------------- |
| **이미지** | 페이지에 설정된 대표 이미지 (없으면 회색 태그 모양의 기본 이미지) |
| **상품명** | 페이지의 제목 |
| **가격** | 페이지에 가격 정보가 잘 적혀 있을 때 (사이트에 따라 비어 있을 수 있어요) |
| **버튼 텍스트** | 기본값 "구매하기" |
![무신사 주소를 적용한 직후 — 상품 이미지·상품명·가격(31,500원)이 자동으로 채워지고 오른쪽 상품 항목이 펼쳐져요]()
위 예시에서는 무신사처럼 상품 정보가 잘 정리된 사이트라서 **이미지·상품명·가격**(31,500원)이 모두 한 번에 들어왔어요. 다음에 무신사의 다른 상품 주소(`https://www.musinsa.com/products/5391060`)를 추가해도 같은 방식으로 자동으로 채워져요.
> 💡 **가격이 자동으로 안 채워질 수 있어요** — 사이트마다 가격을 표시하는 방식이 달라서 자동으로 못 가져올 때가 있어요. 그때는 펼쳐진 가격 칸에 직접 입력해 주세요.
### 3단계. 채워진 내용 다듬기
자동으로 채워진 정보가 마음에 들지 않거나 비어 있다면, 상품 항목 안의 각 칸에서 직접 수정해요.
![펼쳐진 상품 항목 — 무신사에서 가져온 이미지·상품명·가격·버튼 텍스트를 자유롭게 손볼 수 있어요]()
* **이미지** — **변경** 버튼을 누르면 이미지를 고르는 창이 열려요. 그 창에서 다른 이미지로 바꿀 수 있어요.
* **상품명 / 가격 / 버튼** — 텍스트 칸을 눌러 직접 입력해요. 가격에는 통화 표시(`원`, `$`)도 자유롭게 적어요.
> ⚠️ **버튼이 이동할 주소를 바꾸려면 윗줄 주소 칸을 다시 입력하세요** — 버튼 칸에서는 버튼에 적힌 글자만 바뀌어요. 버튼을 누르면 윗줄에 적용된 상품 페이지 주소로 이동해요. 주소를 바꾸고 나면 다시 ✓를 눌러 적용해야 해요.
### 다음 상품을 더 추가하기
상품 칸 아래쪽의 **+ 상품 추가** 버튼을 누르면 빈 상품 항목이 목록 끝에 하나 더 생겨요. 새 주소(예: `https://www.musinsa.com/products/5391060`)를 붙여 넣고 다시 ✓ 또는 Enter를 눌러 채우면 돼요. 같은 사이트의 다른 상품을 모으거나 다른 사이트 주소를 섞어 한 카드 안에 여러 상품을 진열할 수 있어요.
상품 항목 왼쪽의 **점 6개 손잡이**를 잡아 위아래로 끌면 진열 순서를 바꿀 수 있어요.
***
## 상품 복제하거나 삭제하기
각 상품 항목 오른쪽의 **점 3개(⋮)** 메뉴를 누르면 **복제하기 / 삭제하기** 가 나와요.
![점 3개 메뉴 — 같은 상품을 한 번에 복제하거나 삭제할 수 있어요]()
* **복제하기** — 같은 정보를 가진 상품 항목이 바로 아래에 하나 더 추가돼요. 비슷한 상품을 빠르게 만들 때 편해요.
* **삭제하기** — 한 번 더 묻는 확인 창이 나오고, 확인을 눌러야 실제로 지워져요.
***
## 진열 방식 고르기 (디자인 탭)
오른쪽 패널의 **디자인** 탭으로 전환하면 상품을 어떻게 보여줄지 정할 수 있어요.
![디자인 탭 — 유형, 단 수, 옆으로 넘겨보기, 간격, 구성 요소를 한곳에서 정해요]()
### 진열 유형 고르기
**그리드형** 은 상품을 격자 모양으로 배열해 한 줄에 여러 개를 보여줘요. 상품 사진을 큼직하게 보여주고 싶을 때 어울려요.
![그리드형 2단 — 무신사 상품 두 개가 한 줄에 나란히 놓여요]()
그리드형을 고르면 그 아래에 **단 수 조절 막대**(좌우로 움직여 값을 정하는 막대)가 함께 보여요. 막대를 움직여 한 줄에 몇 개씩 보여줄지 정해요.
**가로형** 은 한 줄에 상품 하나씩, 왼쪽에 이미지·오른쪽에 글·끝에 화살표(▸)가 놓이는 목록 모양이에요. 상품 수가 많거나 설명이 긴 카탈로그에 어울려요.
![가로형 — 두 무신사 상품이 목록처럼 한 줄에 하나씩 보이고 줄 끝에 화살표(▸)가 함께 표시돼요]()
> 💡 **가로형에서는 버튼이 화살표(▸)로 바뀌어요** — "구성"에서 버튼을 켜 두어도 가로형에서는 별도 버튼이 따로 보이지 않고, 줄 끝의 화살표가 버튼 역할을 대신해요.
### 옆으로 넘겨보기 켜고 끄기
**옆으로 넘겨보기** 스위치(켜고 끄는 작은 동그라미 버튼)를 켜면, 상품이 세로로 죽 늘어서지 않고 한 화면에 모이고 좌우로 넘겨보는 방식으로 바뀌어요. 상품 수가 한 화면에 다 들어오지 않으면 화면 아래에 현재 위치를 알려주는 **작은 점**이 함께 나와요.
![옆으로 넘겨보기 ON — 두 무신사 상품이 한 화면에 모이고 좌우로 넘겨볼 수 있어요]()
상품 수는 많은데 페이지 길이를 짧게 유지하고 싶을 때 켜 두세요. 작동 방식은 [갤러리 카드](/editor/card-gallery)의 옆으로 넘겨보기와 같아요.
### 간격 조절하기
상품 항목들 사이의 공간을 조절 막대로 조절해요. 좁히면 빽빽한 카탈로그처럼, 넓히면 여유 있는 갤러리 느낌이 돼요.
### 보여줄 정보 고르기
**이미지 / 상품명 / 가격 / 버튼** 네 가지를 각각 켜거나 꺼서 보여줄 정보를 골라요. 예를 들어 가격을 숨기고 상품명만 보여주는 미니멀한 카탈로그도 만들 수 있어요.
### 이미지 모양과 모서리 정하기
이미지 모양은 위의 **이미지** 항목이 켜져 있을 때만 보여요. 아래쪽 **모서리** 는 **각진 / 둥근** 두 가지 중에서 골라 카드의 분위기를 정돈해요.
***
## 결제는 어떻게 처리되나요?
상품 카드는 상품을 **보여주고 외부 상품 페이지로 이어주는** 카드예요. CdBd 안에서 직접 결제하거나 재고를 관리하는 기능은 들어 있지 않아요. 방문자가 버튼(또는 가로형의 화살표)을 누르면 입력해 둔 상품 페이지로 이동해, 그곳에서 결제와 배송이 이뤄져요.
따라서 결제·재고·교환·환불 정책은 연결한 외부 쇼핑몰에서 관리해 주세요.
***
## 자주 묻는 질문
**Q. 가격이 자동으로 안 들어와요. 왜 그런가요?**
A. 사이트마다 가격을 표시하는 방식이 달라요. 무신사처럼 상품 정보가 잘 정리된 사이트는 가격까지 자동으로 들어오지만, 그렇지 않은 사이트는 가격이 비어 있을 수 있어요. 그럴 땐 펼쳐진 상품 항목의 가격 칸에 직접 입력해 주세요.
**Q. 한 카드에 여러 상품을 모아도 되나요?**
A. 네, 한 카드 안에 여러 상품 주소를 넣을 수 있어요. 다만 사이트마다 가격 표기가 달라질 수 있으니, 가격 칸은 직접 정리해 통일감을 맞춰 주세요.
**Q. 상품 페이지 주소를 바꾸려면 어떻게 하나요?**
A. 상품 항목 윗줄의 주소 칸을 다시 입력하고 **체크(✓)** 아이콘이나 **Enter** 를 한 번 더 눌러 주세요. 그래야 이미지·상품명·가격이 새 주소 기준으로 다시 채워져요.
**Q. 상품을 몇 개까지 추가할 수 있나요?**
A. 페이지의 흐름이 길어지지 않도록 정말 보여주고 싶은 상품 위주로 추리는 편을 권해요. 많은 상품을 한 카드에 담는 경우에는 **옆으로 넘겨보기** 를 켜면 페이지가 짧아져요.
**Q. 상품 카드는 어떤 유료 플랜에서 쓸 수 있나요?**
A. 자세한 요금 안내는 [요금제](/start/pricing) 를 확인해 주세요.
***
## 함께 보면 좋은 문서
* [갤러리 카드](/editor/card-gallery) — 이미지 위주로만 보여주고 가격·구매 버튼이 필요 없을 때
* [메뉴 카드](/editor/card-menu) — 상품이 아니라 여러 링크를 항목 리스트로 묶고 싶을 때
* [버튼 카드](/editor/card-button) — 한 가지 행동(웹 이동·전화·문자 등)을 단독으로 강조하고 싶을 때
* [이미지 카드](/editor/card-image) — 한 장의 큰 이미지로 분위기를 잡고 싶을 때
* [페이지 테마](/editor/page-theme) — 옆으로 넘겨보기의 점 색깔과 가로형 화살표 색을 페이지 테마가 정해요
# 프로필 카드
Source: https://cdbd.mintlify.app/editor/card-profile
# 프로필 카드
> **한 줄 요약** — 사진·이름·소개 글을 한 데 묶어 자기 자신이나 브랜드를 인사처럼 보여주는 카드예요.
## 이 기능이 필요한 순간
* 페이지 첫 화면에서 **자기 자신이나 브랜드를 한 번에 소개**하고 싶어요
* 사진·이름·연락처가 **모바일 명함처럼 깔끔하게 정렬된** 카드를 만들고 싶어요
* 강사·팀원·작가처럼 **사람 중심**으로 보여줘야 하는 페이지를 만들어요
***
## 프로필 카드 설정 살펴보기
에디터에서 **\[+ 카드 추가]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[프로필]** 카드를 고르면 카드가 페이지에 들어가고, 오른쪽 패널에 프로필 카드 설정이 열려요.
![프로필 카드 설정 — 좌측 미리보기와 우측 옵션 패널]()
화면은 크게 세 영역이에요.
| 영역 | 내용 |
| ------------- | ----------------------------------------------------- |
| **좌측 미리보기** | 방문자에게 보이는 모습이 실시간으로 표시돼요. 사진·이름·소개 글 영역이 미리 자리 잡혀 있어요 |
| **가운데 카드 보드** | 페이지에 들어 있는 카드들의 목록이에요 |
| **우측 설정 패널** | 레이아웃·정렬·이미지·텍스트 같은 디자인 옵션을 골라요 |
***
## 프로필 사진과 텍스트 채우기
내용을 채우는 가장 빠른 방법은 **좌측 미리보기에서 영역을 직접 누르는 것**이에요.
* **프로필 사진**을 누르면 **"이미지 추가하기"** 창이 열려요. 기존 이미지에서 고르거나 새 파일을 올릴 수 있어요.
* **이름** 영역을 누르면 본인이나 브랜드 이름을 입력할 수 있어요.
* **소개 글** 영역을 누르면 한 줄 또는 짧은 문구를 적을 수 있어요 (예: 직업·역할·SNS 닉네임 등).
***
## 레이아웃·이미지·텍스트 꾸미기
우측 설정 패널에서 카드의 모양을 다듬어요.
**레이아웃**
| 유형 | 어울리는 상황 |
| ------- | -------------------------- |
| **기본형** | 소개 글이 가운데 정렬되는 일반적인 스타일이에요 |
| **강조형** | 프로필 사진이 크게 보여서 인상이 강해요 |
| **명함형** | 간결하고 깔끔해서 명함처럼 활용하기 좋아요 |
정렬은 **왼쪽·가운데·오른쪽** 중에서 고를 수 있어요.
**이미지**
| 항목 | 옵션 |
| --- | ------------------------ |
| 비율 | **원본** 또는 **1:1** (정사각형) |
| 크기 | 슬라이더로 자유롭게 조절해요 |
| 모서리 | **각진** · **둥근** · **원형** |
**텍스트**
서체, 이름 텍스트의 크기·색상·굵기, 소개 글의 크기·색상·굵기를 각각 따로 조절할 수 있어요. 페이지 전체 분위기에 맞춰 다듬어 보세요.
> 💡 **명함 페이지 만드는 팁** — 명함형 레이아웃에 **\[연락처 저장]** 같은 [버튼 카드](/editor/card-button)를 함께 두면, 방문자가 한 번에 연락처를 저장할 수 있는 모바일 명함 페이지가 완성돼요.
***
## 자주 묻는 질문
**Q. 이름이나 소개 글을 어디서 입력하나요?**
A. 우측 설정 패널이 아니라 **좌측 미리보기**에서 해당 영역을 직접 눌러 입력해요. 우측 패널은 글자 크기·색상·굵기 같은 꾸미기 옵션을 다루는 곳이에요.
**Q. 프로필 카드를 한 페이지에 여러 개 넣어도 되나요?**
A. 팀원이나 강사 여러 명을 소개할 때처럼 여러 개 추가할 수 있어요. 다만 너무 많으면 페이지가 길어지니, 정말 필요한 만큼만 넣는 것을 권장해요.
**Q. 프로필 카드를 모바일 명함처럼 쓰려면 어떻게 해야 하나요?**
A. 명함형 레이아웃을 고르고, 아래에 연락처 저장이나 SNS 채널을 보여주는 카드를 함께 배치해 보세요. 자세한 흐름은 위 팁을 참고하세요.
***
## 함께 보면 좋은 문서
* [버튼 카드](/editor/card-button) — 연락처 저장·외부 링크 버튼을 함께 두면 명함처럼 활용할 수 있어요
* [SNS 카드](/editor/card-sns) — SNS 채널을 한 줄에 모아 보여줄 때 어울려요
* [이미지 카드](/editor/card-image) — 자유 배치가 필요한 사진은 이미지 카드가 더 어울려요
# 질문과 답변 카드
Source: https://cdbd.mintlify.app/editor/card-qna
# 질문과 답변 카드
질문과 답변 카드는 페이지 방문자로부터 응답을 수집할 수 있는 설문·신청서 카드예요. 행사 만족도 조사, 상담 신청서, 참석 여부 확인, 단순 의견 수집까지 다양한 형태로 활용할 수 있고, 응답이 들어오면 통계 화면에서 결과를 한눈에 확인할 수 있답니다.
이 가이드에서는 **질문 작성 → 페이지 게시 → 방문자 응답 → 결과 확인** 전체 흐름을 RSVP 템플릿을 예시로 단계별로 설명할게요.
***
## 1단계. 질문 만들기 — 프리셋으로 빠르게 시작하기
질문과 답변 카드를 추가하면 곧장 빈 카드가 나오는 게 아니라 **질문 추가 프리셋 선택 화면**이 먼저 떠요. 자주 쓰는 형태는 클릭 한 번으로 만들 수 있어요.
![질문과 답변 카드 — 프리셋 선택(직접 만들기 / 상담 신청서 / 만족도 조사 / 사전 참석 신청서)]()
| 프리셋 | 어떤 상황에 좋아요 |
| ------------- | ------------------------------------- |
| **직접 만들기** | 질문과 선택지를 처음부터 자유롭게 구성하고 싶을 때 |
| **상담 신청서** | 상담 희망 내용과 상담자의 이름·연락처 등 개인정보를 함께 받을 때 |
| **만족도 조사** | 행사에 대한 만족도를 조사하고 의견과 연락처를 함께 받을 때 |
| **사전 참석 신청서** | 행사 시작 전 참석 의사를 미리 받을 때 |
> 위 네 가지 외에도 다양한 프리셋이 있으니 한 번 둘러보세요. 이 가이드에서는 행사 종료 후 의견을 받는 시나리오로 **만족도 조사** 프리셋을 사용해요.
### 질문 편집하기
프리셋을 선택하면 **5단 만족도 척도 + 자유 의견 + 이메일 입력** 칸이 자동으로 생성돼요. 우측 패널에서 각 질문의 제목·선택지·필수 여부·복수 선택 가능 여부를 자유롭게 수정할 수 있어요.
![질문 편집 화면 — 객관식·주관식 항목 추가, 필수 여부 토글]()
* **객관식**: 미리 만들어 둔 선택지 중 고르기 — `필수`, `복수 선택` 토글 제공
* **주관식**: 방문자가 직접 글을 입력 — 이메일·연락처 등 개인정보 수집에 활용
* **+ 옵션 추가** / **+ 질문 추가** 버튼으로 항목을 자유롭게 늘릴 수 있어요
* 좌측의 **(⋮⋮)** 핸들로 순서 바꾸기, 우측 **(⁝)** 메뉴로 복제·삭제
> 💡 카드 자체의 디자인(서체, 색상, 제출 버튼 모양 등)은 우측 패널의 **디자인** 탭에서 변경할 수 있어요.
***
## 2단계. URL 게시하기 — 방문자가 접속할 수 있게 만들기
질문이 준비됐다면 페이지를 **공개 URL**로 게시해야 응답이 기록돼요. 미리보기로는 폼이 보여도 응답 데이터가 저장되지 않으니, 꼭 URL 게시를 진행해 주세요.
### 2-1. 페이지 주소·공유 정보 설정
에디터 우상단의 **URL 생성하기** 버튼을 누르면 URL 정보 편집 창이 열려요.
![URL 정보 편집 — 페이지 주소(슬러그)와 공유 데이터 설정]()
* **페이지 주소**: `https://cdbd.in/내계정/[페이지이름]` 형태. 영문·숫자·언더바( \_ )·점( . )만 사용할 수 있어요. 한글이나 하이픈(-)은 사용할 수 없으니 주의하세요.
* **공유 데이터**: 카카오톡·문자로 공유될 때 보일 썸네일·제목·설명을 미리 설정해요.
* **페이지 비밀번호**: 응답을 비공개로 받고 싶다면 토글을 켜고 비밀번호를 설정.
* **페이지 상단 메뉴**: 구독·저장·공유 버튼 노출 여부.
### 2-2. 크레딧 확인 후 게시 확정
설정을 마치고 하단의 **URL 생성하기**를 누르면 이용 기간과 차감 크레딧을 확인하는 모달이 떠요.
![URL 게시 — 이용 기간(1개월·2개월·12개월) 선택과 크레딧 차감 안내]()
* **이용 기간**: 1개월(120C) / 2개월(200C) / 12개월(1,000C) 중 선택
* **CdBd 배너 유지하고 20% 할인 받기**: 페이지 하단의 CdBd 배너를 유지하면 20% 할인
* 확정 버튼을 누르면 즉시 라이브 URL이 활성화돼요. 헤더 버튼이 **게시하기**로 바뀌고, 수정사항이 생길 때마다 다시 눌러 라이브에 반영해요.
***
## 3단계. 방문자가 응답하기 — 라이브 페이지에서 보이는 모습
게시된 URL로 접속한 방문자는 모바일 페이지에서 자연스럽게 폼을 만나게 돼요. 위·아래에 행사 안내·셰프 소개·일정 등 RSVP 콘텐츠가 함께 흐르기 때문에 단순 설문이 아니라 **이벤트 페이지의 일부**로 응답을 권유할 수 있어요.
![게시된 라이브 페이지 — 행사 안내와 함께 자연스럽게 노출되는 응답 폼]()
방문자는 다음 순서로 응답해요.
1. 페이지를 스크롤하며 행사 정보 확인
2. 만족도 조사·VIP 정보 입력 등 폼 영역 도달
3. 객관식 질문은 체크박스로 선택, 주관식은 텍스트 입력
4. 페이지 하단 **제출하기** 버튼 클릭으로 응답 완료
![응답 입력 중 — 5단 만족도 척도 + 자유 의견 입력]()
> ⚠️ **필수(\*필수) 표시**가 된 질문은 모두 답해야 제출이 완료돼요. 응답이 누락되면 제출 버튼을 눌러도 화면이 그대로 머물러요.
***
## 4단계. 결과 확인하기 — 통계 화면에서 응답 모아 보기
응답이 누적되면 페이지 통계 화면에서 결과를 한눈에 살펴볼 수 있어요.
### 4-1. 통계 화면 진입 경로
CdBd 홈에서 **내 페이지 전체** 메뉴로 이동하거나 우상단 프로필 → 내 페이지를 눌러 페이지 목록 화면으로 가요. 게시 중인 페이지(URL이 활성화된 페이지)에 마우스를 올리면 **수정하기** / **통계보기** 두 버튼이 카드 위에 떠요.
![내 페이지 — 카드에 마우스 올리면 나타나는 '통계보기' 버튼]()
**통계보기**를 누르면 해당 페이지의 통계 화면으로 바로 이동해요. URL을 게시하지 않은 페이지에는 통계보기 버튼이 표시되지 않으니, 응답을 받으려면 반드시 2단계의 URL 게시를 먼저 진행해 주세요.
### 4-2. 페이지뷰·클릭 통계
좌측 메뉴 **페이지뷰 & 클릭** 탭에서 방문자 트래픽을 확인할 수 있어요.
![통계 요약 — 페이지뷰·클릭수·클릭률과 일자별 추이 그래프]()
* **페이지뷰**: 페이지가 열린 횟수
* **클릭수 / 클릭률**: 페이지 내 링크 클릭 합계와 비율
* 기간 선택: 최근 7일 / 14일 / 30일 / 직접 지정
* **링크별 클릭** 영역에서 카드 단위로 어떤 버튼이 눌렸는지 분석 가능
* 우상단 **통계 다운로드** 버튼으로 CSV 내보내기
### 4-3. 제출된 답변 확인
좌측 **제출된 답변** 탭에서 카드별 응답을 모아 볼 수 있어요.
![제출된 답변 — 카드별 응답 수 요약]()
페이지 내 모든 질문과 답변 카드가 카드 단위로 표시되고, 각 카드에 누적된 응답 수가 함께 보여요. 카드 하나를 누르면 질문별 응답 분포 화면으로 이동해요.
![응답 분포 — 객관식 항목별 비율 + 데이터가 없을 때 안내]()
각 질문에 대해:
* **객관식**: 선택지별 응답 수와 비율(%) 표시
* **주관식**: 입력된 답변을 목록으로 확인
* 우상단 **답변 다운로드** 버튼으로 해당 카드의 응답을 엑셀(CSV)로 내보낼 수 있어요
> 응답이 아직 없을 때는 **"데이터가 없습니다"** 안내가 표시돼요. 페이지 게시 직후에는 이 화면이 기본 상태고, 방문자 응답이 들어오는 대로 비율과 그래프가 채워져요.
***
## 활용 팁
* **이벤트 종료 직후**에 만족도 조사 링크를 카카오톡·문자로 보내면 응답률이 높아요. CdBd 페이지는 모바일 최적화돼 있어 별도 로그인 없이 바로 응답할 수 있어요.
* **상담 신청서** 프리셋은 마케팅 광고 랜딩 페이지에 그대로 붙여 쓰기 좋아요. 상담 희망 시간·관심 분야 같은 객관식 질문을 추가하면 응대 효율이 올라가요.
* **필수 질문은 최소화**하세요. 너무 많은 필수 질문은 이탈을 부르고, 진짜 받고 싶은 답변(이메일·연락처) 정도만 필수로 두면 응답률이 크게 올라가요.
* **CSV 다운로드**로 받은 응답은 그대로 스프레드시트에 붙여 분석하거나 CRM에 업로드할 수 있어요.
> 💡 한 페이지 안에 **만족도 조사 + 상담 신청서**처럼 여러 질문과 답변 카드를 함께 넣으면, 통계 화면에서도 카드 단위로 분리해 결과를 볼 수 있어요. 목적이 다른 응답을 한 번에 수집할 때 유용해요.
# 예약 카드
Source: https://cdbd.mintlify.app/editor/card-reservation
# 예약 카드
> **한 줄 요약** — 방문자가 페이지에서 날짜·시간·인원을 골라 예약을 신청하고, 현장 도착 시 QR 코드로 방문 체크까지 완결할 수 있는 카드예요.
## 이 기능이 필요한 순간
* 상담·클래스·미팅·이벤트처럼 **날짜와 시간이 정해진 서비스**를 운영해요
* 외부 예약 도구 없이 페이지 안에서 예약과 방문 체크를 끝내고 싶어요
* 방문자에게는 문자로, 본인에게는 이메일로 알림이 자동으로 가면 좋겠어요
> ⚠️ **크레딧 안내** — 예약 카드는 **신규 예약 1건당 7크레딧**이 차감돼요. 방문 체크 기능이 포함된 비용이며, 카드를 만들거나 설정하는 동안에는 크레딧이 들지 않아요. 방문자가 실제로 예약을 완료할 때 차감되며, **이후 취소하더라도 차감된 7크레딧은 환불되지 않아요.**
예약 카드는 **페이지 URL을 발행한 뒤부터** 동작해요. 그전에는 **\[예약하기]** 버튼을 눌러도 흐름이 시작되지 않으니, 예약 흐름을 시험해 보고 싶다면 먼저 페이지를 발행해 주세요.
![예약 카드 추가 — 7크레딧 안내 확인 창]()
***
## 예약 카드 설정하기
### 1단계. 예약 정보 관리 창 열기
에디터에서 **\[+ 카드 추가]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[예약]** 카드를 고르면 7크레딧 안내 확인 창이 뜨고, **\[카드 추가하기]** 를 누르면 예약 카드가 페이지에 들어가요. 오른쪽 패널에 **\[예약 정보 관리]** 버튼이 나타나니 이 버튼을 눌러보세요.
![오른쪽 패널의 [예약 정보 관리] 버튼]()
### 2단계. 기본 정보 입력하기
**"예약 정보 관리하기"** 설정 창이 열려요. 왼쪽에서 **예약 옵션**을 관리하고, 오른쪽 영역은 **\[필수 정보]** · **\[예약자 추가 문항]** 두 개의 탭으로 나뉘어 있어요. 기본으로 열리는 **\[필수 정보]** 탭에서 기본 정보와 방문 체크 가능 시간을 설정해요. **\[예약자 추가 문항]** 탭은 예약자에게서 이름·휴대폰 번호 외에 추가로 받고 싶은 정보를 질문으로 구성할 때 사용해요(자세한 내용은 아래 **5단계** 참고).
![예약 정보 관리하기 설정 창 — 왼쪽 예약 옵션, 오른쪽 [필수 정보] / [예약자 추가 문항] 탭]()
먼저 오른쪽 **\[필수 정보]** 탭의 **기본 정보** 섹션에 아래 네 가지를 입력해요.
| 항목 | 설명 | 노출 위치 |
| ----------- | --------------------------------------------- | ----------------------- |
| **제목** | 예약의 성격을 보여주는 이름. 예) `1:1 상담 예약`, `원데이 클래스 신청` | 예약 카드 본문 |
| **장소** | 방문자가 찾아올 주소 또는 장소 이름 | 예약 완료 화면 + 예약 완료 문자 |
| **호스트 이름** | 예약을 받는 담당자 이름 | **예약 완료 화면 + 예약 완료 문자** |
| **호스트 연락처** | 담당자 연락처 (전화·휴대폰) | **예약 완료 화면 + 예약 완료 문자** |
> ⚠️ **호스트 정보가 그대로 노출돼요** — 호스트 이름과 연락처는 예약자가 보는 **예약 완료 화면**과, 예약자에게 자동 발송되는 **예약 완료 문자**에 입력하신 그대로 표시돼요. 가명이나 임시 번호를 그대로 두면 예약자가 혼란을 겪을 수 있으니, 실제 안내가 가능한 정보를 넣어주세요.
### 3단계. 방문 체크 가능 시간 설정하기
**\[필수 정보]** 탭의 기본 정보 아래 **방문 체크 가능 시간** 섹션에서 방문 체크 QR 코드가 활성화될 시간 범위를 지정해요.
| 항목 | 입력 방법 |
| --------- | --------------------------- |
| **시작 일시** | 날짜(캘린더)와 시간(시간 선택)을 함께 지정해요 |
| **종료 일시** | 날짜(캘린더)와 시간(시간 선택)을 함께 지정해요 |
> ⚠️ **방문 체크는 설정한 시간 범위 안에서만 동작해요** — 이 시간 안에 방문자가 예약 완료 페이지에 접속했을 때에만 하단 **\[방문 체크하기]** 버튼과 QR 코드가 활성화돼요. 시간 범위 밖에서는 예약 완료 페이지에 **\[방문 체크하기]** 버튼이 표시되지 않아 방문 체크를 진행할 수 없어요. 행사·상담 시간에 맞춰 시작·종료 일시를 넉넉하게 설정해 주세요.
예를 들어 행사가 오후 2시라면 시작 일시를 오후 1시 30분, 종료 일시를 오후 3시로 설정해 두면 그 시간 동안만 예약 완료 페이지에 **\[방문 체크하기]** 버튼이 나타나 QR 코드로 방문 체크를 진행할 수 있어요.
### 4단계. 예약 옵션 입력하기
설정 창 왼쪽 **예약 옵션** 섹션에서 **\[+ 옵션 추가]** 버튼을 누르면 추가 설정 창이 열려요. 방문자가 고를 수 있는 예약 일정을 만들어요.
![예약 옵션 설정하기 — 날짜·시간·인원 입력 폼]()
| 항목 | 입력 방법 |
| --------- | ------------------------------------------------------------------ |
| **날짜** | 캘린더 아이콘을 눌러 달력에서 날짜를 골라요. 날짜를 선택해야 **\[설정하기]** 버튼이 활성화돼요. |
| **시간** | 시간 선택 창에서 예약 시작 시간을 골라요. **하루종일**에 체크하면 시간 지정 없이 온종일 예약을 받을 수 있어요. |
| **인원 제한** | 최대 예약 인원을 숫자로 입력해요. 제한을 두지 않으려면 **인원 제한없음**에 체크해요. |
입력이 끝나면 **\[설정하기]** 를 눌러 옵션을 저장해요.
### 5단계. 예약자 추가 문항 구성하기 *(선택)*
예약자에게 이름·휴대폰 번호 외에 더 받고 싶은 정보가 있다면, 오른쪽 **\[예약자 추가 문항]** 탭에서 원하는 만큼 질문을 만들 수 있어요. 추가 문항은 선택 기능이라 사용하지 않아도 예약은 정상 동작해요.
> 💡 **어떤 상황에 쓰나요?** 원데이 클래스에서 연령대·경험 수준을 미리 받거나, 상담 예약에서 상담 목적·현재 상황을 사전에 파악해두면 방문 응대가 훨씬 수월해져요.
**\[예약자 추가 문항]** 탭을 처음 열면 안내 문구와 **\[+ 질문 추가]** 버튼만 놓인 빈 상태예요.
![예약자 추가 문항 탭 — 초기 빈 상태]()
**\[+ 질문 추가]** 를 누르면 두 유형이 나타나요. 원하는 유형을 골라 질문 카드를 추가해요.
![질문 유형 선택 — 객관식 / 주관식]()
| 유형 | 어울리는 상황 | 방문자 응답 방식 |
| ------- | --------------------------- | ---------- |
| **객관식** | 연령대·성별·참여 경험처럼 정해진 보기 중 선택 | 옵션 목록에서 체크 |
| **주관식** | 주소·문의 내용·요청 사항처럼 자유롭게 적는 정보 | 텍스트 직접 입력 |
추가된 질문 카드에서 아래 항목을 설정해요. 질문은 원하는 만큼 반복해서 추가할 수 있어요.
![객관식·주관식 질문 카드 예시]()
| 항목 | 설명 | 지원 유형 |
| ------------------- | -------------------------------------------- | ------- |
| **질문 내용** | 방문자에게 보여줄 질문 문구 (예: `연령대`, `주소`) | 객관식·주관식 |
| **옵션 / \[+ 옵션 추가]** | 객관식 보기 항목. 옵션 옆 휴지통 아이콘으로 각각 삭제할 수 있어요 | 객관식 |
| **답변 유도 문구** | 주관식 입력창에 안내 문구로 표시돼요 (예: `도로명 주소를 입력해 주세요.`) | 주관식 |
| **필수 토글** | 켜두면 이 질문에 답하지 않으면 예약을 진행할 수 없어요 | 객관식·주관식 |
| **복수 선택 토글** | 켜두면 여러 옵션을 동시에 체크할 수 있어요 | 객관식 |
| **⋮ 메뉴** | 질문 카드 삭제 | 객관식·주관식 |
| **⋮⋮ 드래그 핸들** | 왼쪽의 점 여섯 개 아이콘을 잡고 위아래로 순서를 바꿔요 | 객관식·주관식 |
> 💡 **질문 개수 제한이 없어요** — 많이 넣을수록 방문자 이탈이 커지기 쉬우니, 실제 응대에 꼭 필요한 정보만 담는 걸 권장해요.
### 6단계. 변경사항 저장하기
모든 옵션과 추가 문항을 정리했다면 설정 창 우측 상단의 **\[변경사항 저장하기]** 를 꼭 눌러주세요. 이 버튼을 누르지 않고 창을 닫으면 입력한 내용이 카드에 적용되지 않아요.
예약 일정 설정이 끝났다면, 같은 오른쪽 패널의 **버튼 디자인** 섹션에서 **\[예약하기]** 버튼의 모양·크기·색상을 바꿀 수 있어요.
***
## 방문자 예약 흐름 따라가기
방문자는 페이지에서 **\[예약하기]** 버튼을 눌러 4단계로 예약을 마쳐요.
### 1단계. 휴대폰 SMS 인증하기
방문자가 **\[예약하기]** 를 누르면 본인 인증 화면이 열려요. **이름 → (예약자 추가 문항이 있다면 순서대로) → 휴대폰번호 → 인증번호** 순으로 입력을 받고, 마지막으로 개인정보 수집 이용 고지에 동의한 뒤 **\[다음]** 을 눌러요.
![본인 인증하기 — 이름 다음에 예약자 추가 문항(연령대·주소)이 삽입돼요]()
> 💡 **추가 문항의 위치** — 카드 설정에서 만든 예약자 추가 문항은 위 화면에서 \[이름] 다음, \[휴대폰번호] 앞에 순서대로 삽입돼요. 각 항목명 옆의 **`*필수`** 뱃지는 응답이 반드시 필요하다는 뜻이고, 답을 채우지 않으면 **\[다음]** 버튼이 비활성 상태로 남아 예약을 진행할 수 없어요.
### 2단계. 날짜 고르기
달력에서 예약할 날짜를 골라요. 제작자가 옵션을 등록한 날짜만 누를 수 있어요.
![날짜 선택 화면 — 옵션이 등록된 날짜만 활성화돼요]()
### 3단계. 시간과 인원 고르기
날짜를 고르면 그 날짜에 설정된 예약 가능한 시간대가 보여요. 이미 인원이 다 찬 시간대는 회색으로 표시되어 누를 수 없어요. 원하는 시간을 누르고 예약 인원을 입력한 뒤 **\[예약하기]** 를 눌러요.
![시간 선택 화면 — 마감된 시간대는 회색이에요]()
### 4단계. 예약 완료 확인하기
예약자 정보·예약 일시·호스트 정보가 담긴 확인 화면이 표시돼요. 동시에 알림이 자동으로 나가요.
![예약 완료 확인 화면]()
| 받는 사람 | 알림 방식 | 담긴 내용 |
| -------- | -------------- | ------------------ |
| 방문자(예약자) | **문자메시지(SMS)** | 예약 일시, 장소, 호스트 정보 |
| 페이지 제작자 | **이메일** | 예약 접수 내역, 방문 체크 안내 |
***
## 현장에서 방문 체크하기
예약 완료 후 **방문 체크 가능 시간** 안에 현장에 도착하면, 방문자의 예약 완료 페이지에 QR 코드가 표시돼요. 호스트는 **통계 페이지 → 예약 현황**에서 카메라를 열어 이 QR 코드를 스캔하면 방문이 체크돼요.
### 방문자 — QR 코드 보여주기
예약 완료 후 SMS로 받은 링크를 열면 예약 정보가 담긴 완료 페이지가 나와요. 방문 체크 가능 시간 안에 접속하면 하단에 **\[방문 체크하기]** 버튼이 활성화돼요.
![예약 완료 페이지 — [방문 체크하기] 버튼이 하단에 표시돼요]()
**\[방문 체크하기]** 를 누르면 QR 코드가 담긴 화면이 올라와요. 이 QR 코드를 호스트에게 보여주세요. QR 코드는 30초마다 자동으로 새로 생성되니, 캡처 이미지는 사용할 수 없어요.
![방문 체크하기 — 호스트에게 QR 코드를 보여주는 화면]()
### 호스트 — QR 코드 스캔하기
**통계 페이지** 왼쪽 사이드바에서 **\[예약 현황]** 을 선택한 뒤 예약 카드를 눌러 상세 목록을 열어요. 상단에 **방문 체크 URL** 이 표시돼요. 이 URL을 열거나, 오른쪽 QR 아이콘을 눌러 바로 접속할 수 있어요.
![통계 예약 현황 상세 — 방문 체크 URL과 예약 목록]()
방문 체크 URL에 접속하면 **\[카메라로 QR 스캔하기]** 버튼이 나타나요. 버튼을 누르면 카메라가 활성화되고, 방문자가 보여주는 QR 코드를 스캔하면 방문이 체크돼요.
![호스트 방문 체크 페이지 — 카메라로 QR 스캔하기]()
스캔이 완료되면 방문자 화면에 **방문 완료** 확인 화면이 뜨고, 통계 목록의 방문 상태가 자동으로 업데이트돼요.
![방문 완료 확인 화면]()
***
## 예약 취소하기
방문자도, 제작자도 예약을 취소할 수 있어요. 취소는 양쪽 다 즉시 반영돼요.
> ⚠️ **취소해도 차감된 7크레딧은 환불되지 않아요** — 예약 완료 시점에 차감된 7크레딧은 이후 방문자나 제작자가 취소하더라도 돌려받을 수 없어요. 테스트 예약도 동일하게 차감되니, URL을 공개하기 전에 옵션·문구를 충분히 검토해 주세요.
**방문자가 취소하는 경우**
예약 완료 화면에서 **\[예약 취소]** 버튼을 누르면 취소 확인 창이 열려요. **\[예약 취소하기]** 를 누르면 바로 처리돼요.
![예약 취소 확인 창 — 방문자 화면]()
**제작자가 취소하는 경우**
통계 페이지 **\[예약 현황]** 목록에서 각 예약 행의 **\[예약 취소]** 버튼을 눌러 처리해요. 취소가 완료되면 예약자에게 **예약 취소 문자가 자동으로 발송**돼요. 한 번 취소한 예약은 다시 되돌릴 수 없으니 신중하게 처리해 주세요.
![제작자 화면 — 예약 취소 확인 창]()
***
## 예약 현황 확인하기
통계 페이지 왼쪽 사이드바에서 **\[예약 현황]** 을 고르면 예약 카드별 접수 건수를 한눈에 볼 수 있어요.
카드를 누르면 예약자별 상세 목록이 펼쳐져요. 방문 체크 기능이 추가되면서 아래 기능도 함께 쓸 수 있어요.
| 기능 | 설명 |
| ---------------- | --------------------------------------------------------------------- |
| **방문 상태** | 각 예약의 방문 완료·미완료 상태를 바로 확인할 수 있어요 |
| **방문 상태 필터** | 방문 완료/미완료만 모아볼 수 있어요 |
| **QR 코드 보기** | 해당 예약의 QR 코드를 팝업으로 확인해요 |
| **일괄 처리** | 여러 예약을 선택해 방문 상태를 한 번에 변경하거나 일괄 취소할 수 있어요 |
| **정렬** | 접수일순·예약일순·이름순으로 정렬할 수 있어요 |
| **예약자 추가 문항 컬럼** | 카드에 추가 문항을 설정했다면 각 문항이 별도 컬럼으로 표시돼요. **\[예약 정보]** 이후 컬럼은 가로 스크롤로 확인해요 |
| **현황 다운로드** | 방문 상태와 **예약자 추가 문항 응답**을 포함한 전체 예약 내역을 엑셀 파일로 받을 수 있어요 |
| **예약 취소** | 각 행에서 제작자가 직접 취소를 처리할 수 있어요 |
예약 통계에 대한 자세한 내용은 [통계 — 예약 현황](/data/url-stats) 페이지를 참고해 주세요.
***
## 자주 묻는 질문
**Q. 예약 카드를 추가하면 바로 7크레딧이 빠져나가나요?**
A. 아니에요. 카드를 만들거나 설정하는 동안에는 크레딧이 들지 않아요. 방문자가 예약을 완료할 때마다 1건당 7크레딧이 차감돼요.
**Q. 예약을 취소하면 차감된 7크레딧이 환불되나요?**
A. 아니에요. 예약 완료 시점에 차감된 7크레딧은 이후 방문자나 제작자가 취소하더라도 **환불되지 않아요.** 테스트 예약도 동일하게 차감되니, URL을 공개하기 전에 옵션·문구를 충분히 검토해 주세요.
**Q. 방문 체크 가능 시간을 설정하지 않으면 어떻게 되나요?**
A. 방문 체크 가능 시간을 지정해야 방문자 페이지에 QR 코드가 표시돼요. 시간을 설정하지 않으면 방문 체크 기능이 활성화되지 않아요. 행사나 예약 시간에 맞춰 시작·종료 일시를 넉넉하게 설정해 주세요.
**Q. 호스트 이름을 가명으로 넣어도 되나요?**
A. 권장하지 않아요. 입력한 호스트 이름과 연락처가 예약 완료 화면과 문자에 그대로 표시되기 때문에, 방문자가 실제로 연락할 수 있는 정보를 넣어주세요.
**Q. URL을 발행하기 전에 미리 예약을 시험해볼 수 있나요?**
A. 아니에요. 예약 카드는 페이지 URL을 발행한 뒤부터 동작해요. 예약 흐름을 확인하려면 먼저 [페이지를 발행](/editor/publish)해 주세요.
**Q. "변경사항 저장하기"를 안 누르고 창을 닫으면 어떻게 되나요?**
A. 입력한 기본 정보와 예약 옵션이 카드에 적용되지 않아요. 옵션을 추가한 뒤에는 반드시 설정 창 우측 상단의 **\[변경사항 저장하기]** 를 눌러야 해요.
**Q. 예약자에게는 어떤 인증을 받나요?**
A. 휴대폰 번호로 받는 SMS 인증번호로 본인 확인을 받아요. 인증 없이는 예약을 진행할 수 없어요.
**Q. 페이지 게시를 중지하면 방문 체크도 안 되나요?**
A. 네, 안 돼요. 방문 체크는 방문자가 예약 완료 페이지에 접속해야 QR 코드가 표시되는데, 페이지 게시를 중지하면 해당 페이지 자체가 열리지 않아서 방문 체크를 진행할 수 없어요. 행사 당일에는 게시 상태를 유지한 채 방문 체크 가능 시간이 끝난 뒤 게시를 중지해 주세요.
**Q. 예약자 추가 문항은 몇 개까지 넣을 수 있나요?**
A. 개수 제한은 없어요. 다만 질문이 많아질수록 방문자가 중간에 이탈할 확률이 커지니, 예약을 받은 뒤 실제 응대에 꼭 필요한 정보만 담는 걸 권장해요.
**Q. 이미 예약을 받은 뒤에 추가 문항을 바꾸면 어떻게 되나요?**
A. 이전에 접수된 예약의 응답은 그대로 남아 있어요. 다만 질문 문구를 바꾸거나 삭제하면 그 뒤의 신규 예약부터 새로운 질문 구성으로 응답이 수집돼서, 예약 현황 컬럼에 이전과 이후 응답이 섞여 보일 수 있어요. 되도록 URL 공개 전에 문항을 확정한 뒤 사용해 주세요.
**Q. 추가 문항 응답도 예약자에게 SMS나 예약 완료 화면에 표시되나요?**
A. 아니에요. 추가 문항 응답은 제작자만 볼 수 있어요. 통계 페이지의 **\[예약 현황]** 상세 목록과 **\[현황 다운로드]** 엑셀에서 확인해요.
**Q. 추가 문항을 아예 안 만들면 방문자 화면은 어떻게 보이나요?**
A. 예전과 동일해요. 이름 → 휴대폰번호 → 인증번호 → 개인정보 동의 순서로만 진행되고 추가 입력창은 나타나지 않아요.
***
## 함께 보면 좋은 문서
* [URL 발행](/editor/publish) — 예약 카드를 활성화하려면 페이지 발행이 먼저예요
* [통계 — 예약 현황](/data/url-stats) — 접수 내역과 방문 상태를 확인하고 엑셀로 받을 수 있어요
* [유료 결제](/start/pricing) — 크레딧 정책과 요금 안내
* [질문과 답변(QnA) 카드](/editor/card-qna) — 예약 가능한 시간대를 고를 필요가 없는 자유 응답 수집에 어울려요
* [상품 카드](/editor/card-product) — 예약 페이지 옆에 상품·서비스 카탈로그를 함께 보여주고 싶을 때
# SNS 카드
Source: https://cdbd.mintlify.app/editor/card-sns
# SNS 카드
> **한 줄 요약** — 운영 중인 소셜 미디어 채널을 한 줄에 아이콘으로 모아 보여주고, 방문자가 한 번에 원하는 채널로 갈 수 있게 해주는 카드예요.
## 이 기능이 필요한 순간
* **여러 SNS를 동시에 운영**하는 1인 크리에이터·인플루언서·브랜드
* 모바일 명함 페이지 끝에 **모든 채널로 분기**할 수 있는 허브가 필요할 때
* 페이지 마지막에 **팔로우 유도** 영역을 깔끔하게 두고 싶을 때
***
## 지원 채널 확인하기
CdBd SNS 카드는 다음 6가지 채널을 기본 제공해요. 채널 라벨과 아이콘이 정해져 있어서 URL만 붙여 넣으면 바로 사용할 수 있어요.
| 채널 | 입력 URL 형식 예시 |
| ----------- | ----------------------------------- |
| **홈페이지** | `https://cdbd.in` |
| **인스타그램** | `https://www.instagram.com/cdbd.in` |
| **카카오톡 채널** | `https://pf.kakao.com/_cdbd` |
| **유튜브** | `https://www.youtube.com/@cdbd` |
| **틱톡** | `https://www.tiktok.com/@cdbd` |
| **X (트위터)** | `https://x.com/cdbd_in` |
***
## SNS 카드 추가하고 채널 켜기
에디터에서 **\[+ 카드 추가하기]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[SNS]** 카드를 골라요. 카드가 페이지에 들어가요. 우측 패널에 6개 채널이 토글과 URL 입력 칸으로 나란히 정리되어 보여요.
![SNS 카드 — 6개 채널을 모두 활성화한 화면과 우측 채널 목록 패널]()
각 채널 행은 다음 순서로 조작해요.
1. 사용할 채널 행의 **토글을 켜기**
2. 우측 입력 칸에 채널 **URL 붙여 넣기**
3. 미리보기에 해당 채널 아이콘이 추가되는지 확인
토글이 꺼져 있으면 입력 칸이 비활성화되고, 미리보기에도 그 채널 아이콘은 나타나지 않아요. **켜 둔 채널만 아이콘으로 보여요** — 예를 들어 인스타그램 1개만 켜면 아이콘 한 개, 인스타·유튜브·X 3개를 켜면 아이콘 세 개가 한 줄로, 6개를 모두 켜면 여섯 개가 한 줄로 나란히 보이는 식이에요. 사용하지 않는 채널은 꺼두면 카드가 깔끔해져요.
***
## 채널 순서 바꾸기
각 채널 행 가장 왼쪽의 **(⋮⋮) 드래그 핸들**을 잡고 위·아래로 끌면 순서를 바꿀 수 있어요. 방문자에게 가장 먼저 보여주고 싶은 채널을 맨 앞에 두면 시선이 자연스럽게 닿아요.
***
## 아이콘 모양 다듬기
우측 패널의 **아이콘 모양** 섹션에서 아이콘의 모양·크기·색상·간격을 조절할 수 있어요.
* **모양** — 아이콘만 / 원형 배경 / 둥근 사각형 배경 등 여러 스타일 중에서 페이지 톤에 맞는 형태를 골라요.
* **크기** — 페이지 분위기에 맞춰 작게 또는 크게.
* **색상** — 각 채널의 브랜드 컬러를 그대로 살리거나, 한 가지 색으로 통일해 미니멀하게.
* **간격** — 아이콘 사이 여백을 조절해요.
***
## 카드 디자인 다듬기
**카드 디자인** 섹션에서 SNS 카드 자체의 배경·테두리·외부 여백을 조절할 수 있어요. 페이지 끝에 배치할 때는 외부 여백을 조금 더 줘서 위쪽 콘텐츠와 분리감을 만들면 깔끔해 보여요.
***
## 활용 팁
* **모바일 명함의 끝** — 프로필 카드 아래에 SNS 카드를 두면, 방문자가 명함을 본 뒤 곧바로 채널로 이동할 수 있어요.
* **페이지 최상단** — 채널 팔로우가 페이지의 주된 목적이라면, 첫 화면에 SNS 카드를 두는 방법도 좋아요.
* **카카오톡 채널 URL** — 개인 카카오톡 ID나 오픈채팅 링크가 아닌 **카카오톡 채널 관리자센터의 "채널 URL"** (`https://pf.kakao.com/_...`)을 복사해서 붙여 넣어야 해요.
***
## 자주 묻는 질문
**Q. 인스타그램 URL은 어떤 형태로 넣어야 하나요?**
A. **프로필 URL** (`https://www.instagram.com/계정아이디`)을 권장해요. 특정 게시물(`/p/`) 이나 릴스(`/reel/`) 주소를 넣으면 방문자가 해당 게시물 하나로만 이동해서 시각 흐름이 어색해질 수 있어요.
**Q. X(트위터)는 `twitter.com` 주소를 그대로 써도 되나요?**
A. 자동으로 `x.com`으로 연결되긴 하지만, 가급적 최신 도메인인 `x.com`을 사용하는 편을 권장해요.
**Q. 페이스북·링크드인 같은 다른 채널도 추가할 수 있나요?**
A. 현재 SNS 카드는 위 6개 채널을 기본 제공해요. 다른 채널을 안내하고 싶다면 [버튼 카드](/editor/card-button)에 URL 이동을 설정해 별도로 두는 방법을 권장해요.
***
## 함께 보면 좋은 문서
* [프로필 카드](/editor/card-profile) — 프로필 카드 + SNS 카드 조합이 모바일 명함의 표준이에요
* [버튼 카드](/editor/card-button) — 특정 채널 하나만 크게 강조하고 싶을 때 어울려요
* [메뉴 카드](/editor/card-menu) — 텍스트 라벨과 함께 채널을 안내하고 싶을 때
# 텍스트 카드
Source: https://cdbd.mintlify.app/editor/card-text
# 텍스트 카드
텍스트 카드는 페이지에 글을 담는 기본 도구예요. 간단한 소개 문구부터 공지사항, 안내 문구까지 다양한 스타일로 메시지를 전달할 수 있어요.
![텍스트 카드 에디터 전체]()
***
## 1. 텍스트 입력하기
텍스트 카드를 추가하면 폰 미리보기 화면에 **"이 곳에서 텍스트를 입력하세요"** 안내가 나타나요. 해당 영역을 클릭하면 바로 입력 모드로 전환돼요.
> 💡 텍스트 전체 또는 일부 구간을 드래그해 선택하면 해당 부분에만 스타일을 따로 적용할 수 있어요.
***
## 2. 텍스트 스타일 설정
카드를 선택하면 우측 패널에 스타일 설정 옵션이 나타나요.
![텍스트 스타일 패널]()
### 2.1 서체
**\[서체 선택 버튼]** 을 클릭하면 폰트 선택 화면이 열려요. **한국어 26종**과 **영문 18종** 중에서 선택할 수 있어요.
**한국어 서체 (26종)**
![한국어 서체 목록]()
| 서체명 | 특징 |
| -------------- | ------------------------ |
| 프리텐다드 | 기본값. 가독성 높은 현대적 고딕체 |
| 본고딕 / 본명조 | Adobe 제작, 깔끔하고 격식 있는 분위기 |
| 나눔고딕 / 나눔명조 | 네이버 제작, 친근하고 가독성 좋음 |
| G마켓 산스 | 쇼핑·커머스에 잘 어울리는 산세리프 |
| 에스코어드림 | S-Core 제작, 세련된 기하학적 형태 |
| HS산토끼체 | 손글씨 느낌의 개성 있는 서체 |
| 베이글팻 / 와구리체 | 귀엽고 통통한 디스플레이 서체 |
| 창원단감아삭체 / 파셜산스 | 지역 브랜드 특색이 있는 서체 |
**영문 서체 (18종)**
![영문 서체 목록]()
| 서체명 | 특징 |
| ------------------------------------------ | ----------------- |
| Lato / Montserrat / Poppins | 깔끔하고 현대적인 산세리프 |
| PT Serif / Libre Baskerville / EB Garamond | 우아하고 격식 있는 세리프 |
| Playfair Display | 헤드라인에 어울리는 고급 세리프 |
| Abril Fatface / Bebas Neue / Anton | 임팩트 있는 디스플레이 서체 |
| Quicksand / Questrial | 부드럽고 친근한 라운드 산세리프 |
| Zeyada / Tiqui Taca | 개성 있는 손글씨 느낌 서체 |
***
### 2.2 글자 스타일 옵션
![텍스트 스타일 옵션]()
서체 선택 버튼 옆에 아래 옵션이 나란히 표시돼요.
| 옵션 | 설명 |
| ----------- | --------------------------------------------------- |
| **B (굵게)** | 선택한 텍스트를 볼드(Bold) 처리해요 |
| **U (밑줄)** | 선택한 텍스트에 밑줄을 추가해요 |
| **색상 원** | 클릭하면 색상 피커가 열려요. 글자 색을 자유롭게 변경할 수 있어요 |
| **크기 슬라이더** | 12 \~ 60 범위에서 글자 크기를 조절해요. 오른쪽 숫자 필드에 직접 입력할 수도 있어요 |
***
### 2.3 단락 설정
![단락 — 정렬·줄간격]()
| 옵션 | 설명 |
| ------- | --------------------------------------------------- |
| **정렬** | 왼쪽 / 가운데 / 오른쪽 정렬 중 선택해요 |
| **줄간격** | 슬라이더를 움직여 줄 간격을 조절해요. 기본값은 1.6이며, 범위는 1.0 \~ 2.0이에요 |
***
## 3. 텍스트에 링크 걸기
![링크 연결 설정]()
패널 하단의 **\[링크 연결]** 섹션을 클릭하면 펼쳐져요.
| 항목 | 설명 |
| ------------ | ----------------------------------- |
| **링크 유형** | "URL 열기" 선택 시 외부 웹페이지로 연결돼요 |
| **URL 입력** | 연결할 주소를 입력해요 (예: `https://cdbd.in`) |
| **새 창에서 열기** | 체크 시 방문자 브라우저에서 새 탭으로 열려요 |
> 💡 텍스트 카드 전체에 링크를 거는 것 외에도, 텍스트 일부만 드래그 선택 후 링크를 연결할 수 있어요. 예를 들어 "**여기를 클릭하세요**"처럼 특정 단어에만 링크를 달 때 활용하세요.
***
## 4. 활용 팁
| 상황 | 추천 방법 |
| ---------------------- | ------------------------------------------ |
| 제목과 본문을 구분하고 싶다 | 텍스트 카드를 2개 배치하고 제목은 크고 굵게, 본문은 작고 얇게 설정하세요 |
| 특정 단어만 강조하고 싶다 | 해당 단어를 드래그 선택 후 굵기·색상만 변경하세요 |
| 행사 제목에 개성 있는 폰트를 쓰고 싶다 | 영문 Playfair Display 또는 Bebas Neue를 사용해 보세요 |
| 딱딱한 느낌을 없애고 싶다 | 줄간격을 1.8\~2.0으로 넓히면 읽기 편하고 부드러워져요 |
# 유튜브 카드
Source: https://cdbd.mintlify.app/editor/card-youtube
# 유튜브 카드
> **한 줄 요약** — 유튜브 영상 주소만 붙여넣으면 페이지 안에서 바로 영상을 재생할 수 있는 카드예요.
## 이 기능이 필요한 순간
* 제품 시연·언박싱·튜토리얼 **영상을 페이지 안에서 바로 보여주고** 싶을 때
* 결혼식 식순·행사 하이라이트 **영상을 초대장에 넣고** 싶을 때
* 짧은 분위기 영상을 **페이지 배경처럼 흐르게 두고** 시각적 인상을 만들고 싶을 때
***
## 유튜브 카드 추가하고 영상 연결하기
에디터에서 **\[+ 카드 추가하기]** 버튼을 누르거나 빈 영역을 눌러 카드 추가 메뉴를 열어요. 메뉴에서 **\[유튜브]** 카드를 골라요. 카드가 페이지에 들어가요. 우측 패널의 **유튜브 연결 → URL** 칸에 영상 주소를 붙여 넣으면, 미리보기에 영상이 즉시 들어가요.
![유튜브 카드 — 영상이 들어간 화면과 우측의 재생 옵션 패널]()
붙여 넣을 수 있는 유튜브 주소 형식은 두 가지예요.
| 형식 | 예시 |
| -------- | ------------------------------------------ |
| 일반 영상 주소 | `https://www.youtube.com/watch?v=VIDEO_ID` |
| 단축 주소 | `https://youtu.be/VIDEO_ID` |
> ⚠️ **쇼츠 주소(`youtube.com/shorts/...`)는 그대로 붙여 넣으면 화면이 비어요.** 유튜브 카드가 쇼츠 주소는 영상으로 인식하지 못해서예요. 쇼츠 영상을 넣고 싶을 때는 아래 "쇼츠를 넣고 싶을 때"를 참고하세요.
***
## 쇼츠를 넣고 싶을 때
쇼츠도 사실은 일반 유튜브 영상이라, 주소만 살짝 바꾸면 유튜브 카드에 넣을 수 있어요. 방법은 두 가지예요.
**방법 1. 주소를 일반 영상 형식으로 바꾸기**
쇼츠 주소 `https://www.youtube.com/shorts/영상ID` 에서 **`shorts/`만 `watch?v=`로 바꿔** 붙여 넣어요.
* 바꾸기 전: `https://www.youtube.com/shorts/영상ID`
* 바꾼 뒤: `https://www.youtube.com/watch?v=영상ID`
이렇게 하면 같은 영상이 유튜브 카드에서 정상으로 재생돼요. 단, 화면은 가로형(16:9) 틀에 맞춰 보여요.
**방법 2. 코드 카드로 세로형 그대로 넣기**
쇼츠 특유의 **세로 화면 비율(9:16)** 을 그대로 살리고 싶다면 [코드 카드](/editor/card-code)를 사용해요. 코드 카드는 세로 크기를 직접 정하거나 쇼츠를 여러 개 나란히 배치할 수 있어요.
***
## 재생 옵션 정하기
URL 입력 칸 아래에 체크박스 두 개가 있어요. 각각이 라이브 페이지에서 어떻게 보이는지 알아두면 영상의 인상을 의도대로 만들 수 있어요.
![우측 패널 — 유튜브 연결의 무음 자동재생·컨트롤러 숨기기 체크박스와 동영상 모양 모서리 옵션]()
### 무음 자동재생
**무음 자동재생** 체크박스를 켜면 **방문자가 페이지를 열자마자 영상이 소리 없이 재생돼요.** 모바일 브라우저는 소리가 있는 영상을 자동으로 재생해 주지 않기 때문에, 자동재생을 원하면 소리를 끄는 게 필수예요.
영상의 핵심 정보가 음성에 담겨 있다면 이 옵션은 켜지 않는 편이 좋아요. 방문자가 무음으로 듣게 되니 의미가 전달되지 않을 수 있어요.
### 컨트롤러 숨기기
**컨트롤러 숨기기** 체크박스를 켜면 **재생·일시정지·볼륨·진행바 같은 유튜브 기본 버튼이 사라져요.** 영상이 깔끔하게 보이는 대신, 방문자가 직접 일시정지하거나 원하는 구간으로 건너뛸 수 없어요.
짧은 분위기 영상에는 잘 어울리지만, 정보 전달이 목적인 긴 영상에서는 켜지 않는 편을 권장해요.
***
## 동영상 모양 다듬기
**동영상 모양 → 모서리** 옵션에서 영상 프레임의 모서리를 정돈할 수 있어요.
* **각진** — 직각 모서리예요. 영상 본연의 형태가 그대로 보여요.
* **둥근** — 모서리가 부드럽게 깎여 보여요. 다른 카드와 통일감을 주고 싶을 때 어울려요.
***
## 카드 디자인 다듬기
**카드 디자인** 섹션에서 영상이 담긴 카드 자체의 배경·테두리·외부 여백을 조절할 수 있어요. 페이지 흐름에 맞춰 카드 사이 간격을 맞춰보세요. 카드를 추가하고 정렬하는 기본 방법은 [에디터 살펴보기](/editor/overview)에서도 안내하고 있어요.
***
## 활용 팁
* **배경처럼 흐르는 분위기 영상** — **무음 자동재생 + 컨트롤러 숨기기**를 함께 켜면 짧은 영상이 페이지 배경처럼 자연스럽게 흘러요. 브랜드 분위기 영상에 잘 어울려요.
* **정보 전달용 영상** — 무음 자동재생을 끄고 컨트롤러를 보여주세요. 방문자가 직접 재생·일시정지·건너뛰기를 조절할 수 있어 긴 튜토리얼·강연 영상에 적합해요.
* **쇼츠 활용** — 세로 비율 그대로 보여주고 싶다면 [코드 카드](/editor/card-code)를 사용해요. (자세한 방법은 위 "쇼츠를 넣고 싶을 때" 참고)
***
## 자주 묻는 질문
**Q. 무음 자동재생을 켰는데 PC에서 자동으로 재생이 안 돼요.**
A. 브라우저 정책상 소리 없는 자동재생은 모바일·PC 모두에서 동작하는 게 일반적이지만, 일부 환경에서는 차이가 있어요. 발행 후 사용 중인 기기에서 한 번 확인해 보세요.
**Q. 컨트롤러를 숨기면 방문자가 영상을 멈출 수 없나요?**
A. 네, 기본 제어 버튼이 보이지 않으니 일시정지나 건너뛰기를 할 수 없어요. 길거나 정보가 많은 영상은 컨트롤러를 켜 두는 편이 좋아요.
**Q. 채널이나 재생목록 주소를 넣어도 되나요?**
A. 유튜브 카드는 **영상 한 편**의 주소를 전제로 만든 카드예요. 위의 두 형식(일반 영상·단축) 중 하나를 사용해 주세요.
**Q. 쇼츠 주소를 넣었더니 화면이 비어요.**
A. 유튜브 카드는 쇼츠 주소(`youtube.com/shorts/...`)를 영상으로 인식하지 못해요. 주소에서 `shorts/`를 `watch?v=`로 바꿔 넣거나, 세로 비율을 그대로 살리려면 [코드 카드](/editor/card-code)를 사용해 주세요. 자세한 방법은 위 "쇼츠를 넣고 싶을 때"에 있어요.
***
## 함께 보면 좋은 문서
* [텍스트 카드](/editor/card-text) — 영상 위·아래에 자막이나 설명 글을 함께 두면 의미 전달이 더 분명해져요
* [버튼 카드](/editor/card-button) — "전체 영상 보러 가기" 같은 외부 유튜브 채널 안내가 필요할 때
* [코드 카드](/editor/card-code) — 쇼츠를 세로 비율 그대로 넣거나, 여러 영상을 맞춤 배치하고 싶을 때
# 멀티페이지 에디터 살펴보기
Source: https://cdbd.mintlify.app/editor/multipage/overview
# 멀티페이지 에디터 살펴보기
멀티페이지 에디터는 여러 페이지를 한 장씩 넘겨보는 방식으로 콘텐츠를 전달하는 에디터예요. 제품 카탈로그, 제안서, 룩북처럼 심층적인 비즈니스 페이지를 만들 때 적합해요.
## 멀티페이지 에디터 시작하기
1. 홈에서 **\[새 페이지 만들기]** 카드 클릭 → "페이지 주제" 모달이 열려요.
2. **\[빈 페이지로 시작하기]** 선택 → "모바일 페이지 유형" 모달로 이어져요.
3. **\[멀티페이지]** 선택 → 멀티페이지 에디터가 열려요.
> 💡 템플릿으로 시작할 수도 있어요. 주제 모달에서 원하는 카테고리의 \*\*\[템플릿 확인하기]\*\*를 눌러 멀티페이지 템플릿을 골라 보세요.
![멀티페이지 에디터 화면 구성 — 페이지 패널·캔버스·테마 패널]()
## 1. 화면 구성
멀티페이지 에디터는 원페이지 에디터와 레이아웃이 비슷하지만, 왼쪽에 페이지 패널이 추가돼 있어요.
### 1.1 왼쪽 — 페이지 패널
만든 페이지의 썸네일 목록이 표시되고, 현재 몇 번째 페이지인지 **N / M 페이지** 형태로 확인할 수 있어요. 썸네일을 클릭하면 해당 페이지로 바로 이동해요.
### 1.2 가운데 — 캔버스
현재 선택한 페이지의 편집 화면이에요. 고정 가로 **380px**, 권장 세로 **580px** 크기의 카드를 배치해요. 원페이지와 동일하게 카드를 추가하고 순서를 바꿀 수 있어요.
### 1.3 오른쪽 — 디자인 보드
선택한 카드의 세부 설정을 조절해요. 아무 카드도 선택하지 않으면 전체 페이지 테마(색상·서체)를 설정할 수 있어요.
## 2. 상단 메뉴 차이점
멀티페이지 에디터 상단 메뉴는 원페이지 에디터와 거의 같지만, **스크롤 애니메이션** 아이콘 대신 **페이지 설정** 아이콘(⚙️)이 표시돼요. 이 아이콘을 클릭하면 페이지 크기, 넘김 효과, 자동 넘김 등을 설정할 수 있어요.
## 3. 지원 카드 종류
멀티페이지에서도 원페이지와 동일한 13가지 기본 카드와 6가지 2단 카드를 모두 사용할 수 있어요.
> 💡 **활용 팁**: 멀티페이지는 각 페이지가 하나의 메시지를 담는 구조예요. 페이지당 카드 수를 2–4개로 제한하고, 한 페이지에서 하나의 핵심만 전달하면 더욱 임팩트 있는 페이지가 돼요.
# 페이지 관리하기
Source: https://cdbd.mintlify.app/editor/multipage/page-management
# 페이지 관리하기
> **한 줄 요약** — 멀티페이지 에디터의 좌측 페이지 패널에서 페이지를 **추가·복제·순서 변경·삭제**해서 전체 구조를 짜는 방법이에요.
## 이 기능이 필요한 순간
* 제품 카탈로그·룩북처럼 **여러 페이지를 한 흐름으로** 묶어 보여줘야 할 때
* 행사 안내처럼 **표지 → 일정 → 장소 → 신청** 순으로 챕터를 나누고 싶을 때
* 회사 소개 미니 사이트처럼 **페이지마다 주제를 분리**하고 싶을 때
***
## 좌측 페이지 패널 살펴보기
멀티페이지 에디터에 진입하면 화면 왼쪽에 **페이지 패널**이 보여요. 패널 안에는 페이지 썸네일이 위에서 아래로 나열되어 있고, 맨 위에는 **\[+ 페이지 추가]** 버튼이 자리 잡고 있어요.
![멀티페이지 좌측 페이지 패널 — 페이지 추가 버튼과 썸네일 목록]()
패널의 썸네일은 각 페이지의 실제 카드 구성을 반영해요. 어떤 페이지에 무엇이 있는지 한눈에 확인할 수 있어요. **썸네일을 누르면 해당 페이지로 이동해요** — 가운데 카드 보드와 미리보기가 함께 갱신되어 바로 편집할 수 있어요.
***
## 페이지 추가하기
좌측 페이지 패널 상단의 **\[+ 페이지 추가]** 버튼을 눌러요. **현재 보고 있는 페이지 바로 다음**에 빈 페이지가 한 장 들어가요. 새로 추가된 페이지는 자동으로 선택되어 바로 카드를 넣을 수 있어요.
> 💡 **빈 페이지를 먼저 여러 장 만들어 두고 시작해 보세요** — 표지·소개·제품·가격·신청처럼 페이지 역할을 먼저 정한 뒤 콘텐츠를 채우면 전체 흐름을 잃지 않고 작업할 수 있어요.
***
## 페이지 복제하기
썸네일에 마우스를 올리면 **복제 버튼**이 나타나요. 복제 버튼을 눌러요. 비슷한 페이지를 한 장 더 만들 때 쓰는 기능이에요. (예: 상품 1·상품 2·상품 3을 같은 레이아웃으로 만들 때)
***
## 페이지 순서 바꾸기
좌측 패널의 썸네일을 잡고 **위·아래로 끌어요**. 페이지 순서가 바뀌어요. 페이지 순서는 곧 방문자가 보는 흐름이니, 표지가 가장 앞에 오도록 정돈해 주세요.
***
## 페이지 삭제하기
썸네일에 마우스를 올리면 **삭제 버튼**이 나타나요. 삭제 버튼을 눌러요. 해당 페이지가 멀티페이지에서 빠져요.
> ⚠️ **삭제 전에 한 번 더 확인해 주세요** — 삭제한 페이지는 되돌리기 어려워요. 헤더의 되돌리기(←) 버튼이 일정 범위까지 작업을 복원해 주지만, 페이지 삭제는 안전하게 작업하려면 삭제 전에 한 번 더 확인하는 편을 권장해요.
***
## 활용 팁
* **표지 → 본문 → 마무리** 순서로 페이지를 구성하면 방문자가 흐름을 따라가기 쉬워요. 예) 1장 표지 / 2\~5장 본문 / 6장 신청 또는 문의.
* 콘텐츠를 채우기 전에 [페이지 설정](/editor/multipage/page-settings)도 한 번 점검해 보세요. 페이지 사이즈가 카드 레이아웃에 영향을 주기 때문에, 가운데 작업하다 바꾸면 카드를 다시 정돈해야 할 수 있어요.
***
## 자주 묻는 질문
**Q. 페이지를 몇 장까지 만들 수 있나요?**
A. 현재 페이지 개수 한도에 대한 별도 안내가 준비되어 있지 않아요. 관련 정책이 확정되면 가이드에서 안내드릴게요.
**Q. 페이지를 삭제하면 되돌릴 수 있나요?**
A. 헤더의 되돌리기(←) 버튼이 작업을 일정 범위까지 복원하지만, 삭제 동작은 가능한 한 한 번 더 확인한 뒤 진행하는 편이 안전해요.
***
## 함께 보면 좋은 문서
* [멀티페이지 살펴보기](/editor/multipage/overview) — 멀티페이지 에디터의 전체 구조와 시작하기
* [페이지 설정](/editor/multipage/page-settings) — 페이지 사이즈·넘김 효과·자동 넘김 같은 동작 옵션
* [멀티페이지 뷰어](/editor/multipage/viewer) — 라이브 페이지에서 방문자가 페이지를 넘기는 화면
# 페이지 설정
Source: https://cdbd.mintlify.app/editor/multipage/page-settings
# 페이지 설정
> **한 줄 요약** — 멀티페이지의 **크기·페이지 넘김 효과·자동 넘김** 같은 전체 동작 방식을 한 모달에서 정하는 화면이에요.
## 이 기능이 필요한 순간
* 멀티페이지를 만들었는데 **페이지 사이 전환이 어색해 보일** 때 (넘김 효과 선택)
* 전시 부스·키오스크처럼 **화면이 자동으로 순환**해야 할 때 (자동 넘김 + 무한 반복)
* 룩북·카탈로그처럼 **펼침면 디자인**이 자연스러운 콘텐츠일 때 (두 페이지씩 보기)
***
## 페이지 설정 열기
멀티페이지 에디터 상단 메뉴의 **페이지 설정** 아이콘(⚙️)을 누르면 **페이지 설정 편집하기** 모달이 열려요. 이 모달 안에서 페이지 사이즈·넘김 효과·자동 넘김 등 페이지 전체 동작을 정해요.
![페이지 설정 편집하기 모달 — 크기·넘김 효과·자동 넘김·두 페이지씩 보기 설정]()
***
## 페이지 사이즈 정하기
멀티페이지의 **가로 크기는 380픽셀(px)로 고정**되어 있어요. 세로 크기는 원하는 픽셀로 직접 입력할 수 있어요. ("픽셀(px)"은 화면을 채우는 점의 개수예요. 380픽셀이면 일반적인 스마트폰 화면 가로 폭과 비슷해요.)
![페이지 사이즈 선택 — 추천 380×580 또는 직접 입력]()
* **추천 사이즈 380 × 580** — 대부분의 모바일 화면에 잘 맞는 비율이에요. 기본값으로 먼저 만들어보고, 콘텐츠 양에 따라 조정하는 편을 권장해요.
* **직접 입력** — 세로 값을 자유롭게 입력할 수 있어요. 카탈로그처럼 콘텐츠가 많을 때는 세로를 더 길게.
***
## 페이지 넘김 효과 고르기
방문자가 페이지를 넘길 때 보이는 전환 애니메이션을 세 가지 중에서 골라요. 같은 콘텐츠라도 어떤 효과를 쓰느냐에 따라 페이지 인상이 크게 달라져요.
| 효과 | 라이브 페이지에서 보이는 모습 | 어울리는 상황 |
| -------- | ----------------------------------------------------------------- | --------------------------------- |
| **밀어내기** | 현재 페이지가 옆으로 슬라이드해서 빠지고, 다음 페이지가 같은 방향에서 들어와요. 흔히 보는 가로 슬라이드 전환이에요 | 일반 안내·소개 자료. 가장 자연스럽고 무난해요 |
| **덮기** | 다음 페이지가 현재 페이지 위에 살짝 얹히며 덮어요. 레이어가 쌓이는 느낌이에요 | 챕터가 명확히 분리되는 콘텐츠. 표지에서 본문으로 넘어갈 때 |
| **종이책** | 책장을 넘기듯 페이지가 입체적으로 휘어지며 넘어가요 | 룩북·카탈로그·청첩장처럼 펼침면 감성이 필요한 페이지 |
***
## 끝나면 처음으로 돌아가게 하기
토글을 켜면 **마지막 페이지에서 다음으로 넘기면 첫 페이지로 돌아가요.** 전시 부스나 매장에 세워 두는 안내 화면처럼 계속 순환해야 하는 상황에 유용해요.
자동 넘김과 함께 켜두면 멀티페이지가 끝없이 자동으로 순환하면서 방문자에게 보여져요.
***
## 페이지가 자동으로 넘어가게 하기
자동 넘김 토글을 켜요. 시간을 초 단위로 정해요. 정한 시간이 지나면 페이지가 자동으로 넘어가요.
방문자가 직접 넘기지 않아도 콘텐츠가 흘러가니, 무인 부스나 매장에 세워 두는 안내 화면에 적합해요. 다만 시간을 너무 짧게 잡으면 방문자가 콘텐츠를 다 읽기 전에 페이지가 넘어갈 수 있으니, 페이지 분량에 맞춰 충분히 잡아 주세요.
***
## 두 페이지씩 보기
토글을 켜면 **두 페이지가 나란히 표시되어 책의 펼침면처럼 보여요.** 제품 카탈로그나 룩북처럼 좌우 대비가 필요한 콘텐츠에 잘 어울려요.
***
## 넘길 수 있다는 안내 보여주기
토글을 켜면 **첫 페이지에 "페이지를 넘길 수 있어요"라는 안내가 표시돼요.** 멀티페이지 페이지가 익숙하지 않은 방문자에게 다음 페이지가 있다는 사실을 자연스럽게 알려줘요.
처음 방문자가 많은 이벤트 초대장·소개 자료라면 이 옵션을 켜두는 편을 권장해요.
***
## 활용 팁
* **이벤트 초대장·소개 자료** — 넘길 수 있다는 안내 보여주기 켜기 + 밀어내기 효과. 처음 보는 방문자도 다음 페이지가 있다는 사실을 알 수 있어요.
* **룩북·카탈로그** — 종이책 효과 + 두 페이지씩 보기. 펼침면 느낌이 강해져요.
* **전시 부스·매장 안내 화면** — 자동 넘김 + 끝나면 처음으로 돌아가게 하기. 사람 손이 없이도 콘텐츠가 끊임없이 흘러요. 다만 자동 넘김 시간은 페이지 분량에 맞춰 충분히 잡아 주세요.
***
## 함께 보면 좋은 문서
* [멀티페이지 살펴보기](/editor/multipage/overview) — 멀티페이지 에디터의 전체 구조와 시작하기
* [페이지 관리하기](/editor/multipage/page-management) — 페이지 추가·복제·순서 변경·삭제
* [멀티페이지 뷰어](/editor/multipage/viewer) — 라이브 페이지에서 방문자가 페이지를 넘기는 화면
* [스크롤 애니메이션](/editor/onepage/scroll-animation) — 원페이지에서 카드 단위로 적용하는 등장 효과 (페이지 넘김 효과와는 다른 축)
# 멀티페이지 뷰어
Source: https://cdbd.mintlify.app/editor/multipage/viewer
# 멀티페이지 뷰어
멀티페이지 뷰어는 방문자가 실제로 보는 화면이에요. 에디터에서 만든 여러 페이지가 한 장씩 넘어가는 방식으로 표시돼요.
***
## 1. 뷰어 화면 구성
![멀티페이지 뷰어 — 1/4 페이지 카운터·진행 바]()
멀티페이지 뷰어는 **슬라이드 넘김** 방식으로 작동해요. 원페이지처럼 아래로 스크롤하는 것이 아니라, 좌우로 페이지를 한 장씩 넘겨가며 탐색해요.
| UI 요소 | 위치 | 설명 |
| ----------- | ------ | ------------------------------------ |
| **페이지 카운터** | 하단 오른쪽 | 현재 페이지 / 전체 페이지 수(예: **1/4**)를 표시해요. |
| **진행 바** | 하단 | 전체 페이지 중 현재 위치를 시각적으로 표시해요. |
| **⋯ 더보기** | 상단 오른쪽 | 구독, 저장, 공유, 검색 기능을 제공해요. |
***
## 2. 페이지 이동 방법
![멀티페이지 뷰어 — 오른쪽 내비게이션 화살표로 다음 페이지 이동]()
방문자는 세 가지 방식으로 페이지를 넘길 수 있어요.
| 방법 | 장치 | 설명 |
| ---------- | ------- | ------------------------------------------ |
| **스와이프** | 모바일·태블릿 | 화면을 왼쪽으로 쓸면 다음 페이지, 오른쪽으로 쓸면 이전 페이지로 이동해요. |
| **화살표 버튼** | 데스크탑 | 페이지 양옆에 나타나는 **◀ ▶** 버튼을 클릭해 이동해요. |
> 💡 **첫 방문자를 위한 팁**: 에디터 **페이지 설정**에서 **페이지 넘김 가이드**를 켜두면, 처음 방문한 사람이 좌우로 페이지를 넘길 수 있다는 것을 바로 알 수 있어요.
***
## 3. ⋯ 더보기 기능
![더보기 메뉴 — 구독하기·저장하기·공유하기·검색하기]()
화면 오른쪽 상단의 **⋯** 버튼을 탭하면 4가지 기능 메뉴가 나타나요.
### 구독하기
![구독하기 — 이메일 주소를 입력해 페이지 소식 수신]()
이메일 주소를 입력하고 **구독하기** 버튼을 누르면, 페이지가 업데이트될 때 알림 이메일을 받을 수 있어요.
### 저장하기
![저장하기 — 페이지 썸네일과 메모 남기기]()
페이지를 북마크처럼 저장해 나중에 다시 찾아볼 수 있어요. 저장 시 메모를 함께 남길 수도 있어요.
> 💡 저장된 페이지는 CdBd 계정의 **저장한 페이지** 목록에서 확인할 수 있어요.
### 공유하기
![공유하기 — 페이지 URL이 클립보드에 복사됨]()
**공유하기**를 누르면 현재 페이지 URL이 클립보드에 자동으로 복사돼요. 복사된 링크를 카카오톡, 인스타그램 DM, 이메일 등 원하는 채널에 바로 붙여넣을 수 있어요.
### 검색하기
![검색하기 — 빈 상태]()
![검색하기 — '여름' 검색 결과 2건]()
페이지 내 텍스트를 키워드로 검색할 수 있어요. 검색 결과에는 해당 텍스트가 있는 **페이지 번호**와 미리보기가 함께 표시돼요. 결과를 탭하면 해당 페이지로 바로 이동해요.
***
## 4. 뷰어에서 보이는 페이지 설정 효과
에디터의 **페이지 설정(⚙️)** 에서 설정한 내용이 뷰어에서 다음과 같이 반영돼요.
| 설정 | 뷰어에서 보이는 효과 |
| -------------- | ---------------------------------------- |
| **페이지 넘김 효과** | 밀어내기 / 덮기 / 종이책 중 선택한 애니메이션으로 페이지가 전환돼요. |
| **자동 넘김** | 설정한 시간마다 자동으로 다음 페이지로 넘어가요. |
| **무한 반복** | 마지막 페이지에서 다시 첫 페이지로 돌아와 계속 순환해요. |
| **두 페이지씩 보기** | 두 페이지가 좌우로 나란히 표시돼요. (데스크탑 전용) |
| **페이지 넘김 가이드** | 첫 페이지에 좌우 스와이프 안내 표시가 나타나요. |
페이지 설정 방법은 [페이지 설정](/editor/multipage/page-settings) 가이드를 참고하세요.
***
## 5. 공유 및 URL
에디터에서 **URL 생성하기** 버튼으로 페이지 주소를 만들면, 그 링크를 방문자에게 공유할 수 있어요.
공유 방법과 URL 설정은 [URL 생성 및 게시하기](/editor/publish) 가이드를 참고하세요.
> 💡 **활용 팁**: 멀티페이지는 각 페이지에 하나의 메시지만 담는 것이 핵심이에요. 페이지당 카드 수를 2–4개로 유지하면 방문자가 자연스럽게 다음 페이지를 넘겨보고 싶어져요.
# 원페이지 에디터 살펴보기
Source: https://cdbd.mintlify.app/editor/onepage/overview
# 원페이지 에디터 살펴보기
> **한 줄 요약** — 카드를 위에서 아래로 쌓아 한 흐름으로 길게 이어지는 페이지를 만드는 방식이에요. 모바일 명함·이벤트 초대장·간단한 비즈니스 페이지에 가장 잘 맞아요.
## 이 기능이 필요한 순간
* 모바일에서 **스크롤 한 번으로 모든 정보를 훑게** 만들고 싶을 때
* 콘텐츠 양이 적당하고 **한 흐름으로 자연스럽게 읽혀야** 하는 페이지를 만들 때
* 페이지 단위 관리 부담 없이 **빠르게 페이지를 완성**하고 싶을 때
***
## 원페이지가 어떻게 쌓이는지 이해하기
원페이지는 **카드를 위에서 아래로 쌓아 만드는 페이지**예요.
* 카드 한 장 = 페이지의 한 칸
* 방문자는 모바일에서 **위→아래로 스크롤**하며 카드를 순서대로 봐요
* **카드 순서를 정하는 것 = 방문자의 읽기 흐름을 설계하는 것**
같은 콘텐츠를 멀티페이지로 만들면 페이지마다 끊겨 보이고, 원페이지로 만들면 한 흐름으로 길게 이어져요. 어느 쪽이 콘텐츠 성격에 맞는지 먼저 정하고 시작하세요.
***
## 어느 페이지 타입을 골라야 할까?
| 상황 | 원페이지 | 멀티페이지 |
| ------------------------------------- | -------------- | ------------------------- |
| 모바일 명함, 짧은 이벤트 초대장 | ✅ 한 흐름이 자연스러워요 | — |
| 간단한 비즈니스 안내, 1개 주제로 방문자가 처음 보는 안내 페이지 | ✅ 콘텐츠 양이 적당해요 | — |
| 제품 카탈로그·룩북 | — | ✅ 페이지마다 상품을 분리해 보여줄 수 있어요 |
| 회사 소개(여러 주제) | — | ✅ 페이지 단위로 주제를 나눌 수 있어요 |
| 매장에 세워 두는 안내 화면·전시 부스 자동 순환 | — | ✅ 자동 넘김 + 무한 반복 지원 |
| 펼침면 디자인이 필요한 콘텐츠 | — | ✅ 두 페이지씩 보기 지원 |
멀티페이지에 대해 더 알아보고 싶다면 [멀티페이지 살펴보기](/editor/multipage/overview)를 참고해 주세요.
***
## 화면 구성 살펴보기
원페이지 에디터는 화면이 크게 세 영역으로 나뉘어 있어요.
![원페이지 에디터 — 미리보기·카드 보드·디자인 보드 세 영역 구조]()
### 왼쪽 미리보기 보드 확인하기
**무엇을 확인하는 곳인가요?** 작업 중인 페이지가 모바일에서 어떻게 보이는지 실시간으로 보여주는 영역이에요. 카드를 추가하거나 수정할 때마다 **실제 모바일 화면과 가장 비슷한 모습**으로 즉시 갱신돼요. 본문 작업 중간중간 미리보기를 확인하면 모바일에서 어떻게 보일지 바로 가늠할 수 있어요.
### 가운데 카드 보드에서 카드 다루기
**무엇을 바꾸는 곳인가요?** 페이지에 들어가는 **모든 카드를 관리하는 공간**이에요. 카드 행마다 다음과 같은 조작이 가능해요.
* 상단 **\[+ 카드 추가하기]** 버튼으로 새 카드 추가
* 왼쪽 핸들(⠿)을 드래그하여 카드 순서 변경
* 잠금 아이콘으로 카드를 잠그거나 풀기
* ON/OFF 토글로 카드를 잠시 안 보이게 하거나 다시 보이게 하기
* 연필 아이콘으로 카드 이름 바로 고치기
* 오른쪽 (⋮) 메뉴에서 카드 복제·숨기기·삭제
### 오른쪽 디자인 보드에서 옵션 바꾸기
**무엇을 바꾸는 곳인가요?** **선택한 카드의 세부 설정**을 조절하는 공간이에요. 가운데 카드 보드에서 카드를 누르면, 그 카드의 옵션이 오른쪽 패널에 자동으로 나타나요. 옵션을 바꾸면 왼쪽 미리보기에 즉시 반영돼요.
***
## 원페이지 전용 — 스크롤 애니메이션
원페이지에서는 카드가 화면에 나타나는 방식을 정할 수 있어요. 상단 메뉴의 **스크롤 애니메이션** 아이콘을 눌러요. 옵션 팝업이 열려요. **위로 / 확대 / 없음** 세 가지 중에서 한 가지를 골라요. 자세한 내용은 [스크롤 애니메이션](/editor/onepage/scroll-animation) 가이드에서 안내하고 있어요.
> 💡 **멀티페이지에서는 다른 효과를 써요** — 멀티페이지 페이지는 카드 단위 등장 효과 대신 페이지 단위 넘김 효과(밀어내기·덮기·종이책)를 사용해요. 자세한 내용은 [페이지 설정](/editor/multipage/page-settings)에서 안내하고 있어요.
***
## 페이지 완성 후 공유하기
에디터 상단의 **\[URL 생성하기]** 버튼으로 페이지 주소를 만들고, 만들어진 URL로 페이지를 공유할 수 있어요. 발행 전에도 미리보기 화면으로 모바일에서 어떻게 보이는지 확인할 수 있어요.
***
## 활용 팁
* **카드 순서 = 방문자 읽기 흐름** — 가장 중요한 정보를 위쪽에 배치하고, 행동을 유도하는 카드(버튼·연락처 저장 등)는 페이지 흐름에 맞는 자리에 두세요. 예시: 프로필 → 핵심 안내 → 행동 유도 버튼 → SNS 채널.
* **카드 보드만 보지 말고 미리보기를 함께** — 카드 보드에서 보이는 순서와 실제 모바일 화면이 같은지 미리보기로 자주 확인해 주세요.
***
## 함께 보면 좋은 문서
* [에디터 살펴보기](/editor/overview) — 페이지 타입과 관계없는 에디터 공통 사용법
* [스크롤 애니메이션](/editor/onepage/scroll-animation) — 원페이지 전용 카드 등장 효과
* [원페이지 뷰어](/editor/onepage/viewer) — 라이브 페이지에서 방문자가 보는 화면
* [멀티페이지 살펴보기](/editor/multipage/overview) — 페이지 단위로 나눠 만드는 다른 페이지 타입
# 스크롤 애니메이션
Source: https://cdbd.mintlify.app/editor/onepage/scroll-animation
# 스크롤 애니메이션
> **한 줄 요약** — 방문자가 페이지를 스크롤할 때 각 카드가 화면에 **어떻게 나타날지** 정하는 옵션이에요. 원페이지 에디터 전용 기능이에요.
## 이 기능이 필요한 순간
* 카드가 많은 원페이지에서 **일관된 등장 리듬**을 만들고 싶을 때
* 이벤트·제품 소개 페이지에서 **시각적 임팩트**로 첫인상을 강조하고 싶을 때
* 정보 위주 페이지에서 **애니메이션 없이 깔끔한 흐름**을 원할 때
***
## 스크롤 애니메이션 설정하기
에디터 상단 메뉴의 **스크롤 애니메이션** 아이콘을 눌러요. 옵션 팝업이 열려요. **위로 / 확대 / 없음** 세 가지 중에서 효과를 하나 골라요. **\[저장하기]** 버튼을 눌러요.
![스크롤 애니메이션 설정 팝업 — 위로·확대·없음 옵션]()
> ⚠️ **저장하기를 꼭 눌러주세요** — 옵션만 선택하고 팝업을 그냥 닫으면 변경이 적용되지 않을 수 있어요.
스크롤 애니메이션은 **페이지 단위 옵션**이에요. 한 페이지의 모든 카드에 같은 효과가 적용되며, 카드마다 다른 효과를 따로 정할 수는 없어요.
***
## 세 가지 효과 비교하기
각 옵션이 라이브 페이지에서 어떻게 보이는지 미리 알아두면 페이지 성격에 맞는 선택이 쉬워져요.
| 옵션 | 라이브 페이지에서 보이는 모습 |
| ------ | -------------------------------------------------- |
| **위로** | 카드가 아래쪽 화면 밖에서 위로 미끄러져 들어와요. 페이지 흐름이 자연스럽게 이어져요 |
| **확대** | 카드가 작은 크기로 시작해 부드럽게 본래 크기로 커지며 나타나요. 시선 집중 효과가 강해요 |
| **없음** | 스크롤하면 카드가 그 자리에 즉시 표시돼요. 추가 연출이 없어요 |
에디터 화면에서는 정지 상태로 보이기 때문에, 실제 동작은 페이지를 발행한 뒤 모바일에서 직접 스크롤해서 확인해 보세요.
***
## 어떤 효과를 골라야 할까?
콘텐츠 성격에 맞춰 한 가지를 고르세요. 자주 바꾸기보다 페이지 분위기에 맞는 효과 하나를 일관되게 유지하는 편이 보기에 좋아요.
| 상황 | 추천 옵션 | 이유 |
| ------------------- | ---------------- | ----------------------- |
| 모바일 명함, 짧은 안내 페이지 | **위로** 또는 **없음** | 콘텐츠가 짧아 과한 연출이 필요하지 않아요 |
| 이벤트 초대장, 제품 소개 페이지 | **확대** | 임팩트 있는 첫인상이 인상에 남아요 |
| 정보 위주 페이지 (FAQ·매뉴얼) | **없음** | 가독성과 빠른 표시가 우선이에요 |
| 카드 수가 많은 긴 페이지 | **위로** | 일관된 등장 리듬으로 자연스럽게 읽혀요 |
***
## 활용 팁
* 페이지 성격에 맞는 **한 가지 효과를 골라 일관되게** 유지하세요. 옵션을 자주 바꾸면 페이지가 산만해 보일 수 있어요.
* **확대 효과**는 시선 집중력이 큰 만큼 카드가 많은 페이지에서는 산만하게 느껴질 수 있어요. 콘텐츠가 길어 보일 땐 **위로**가 무난해요.
* 멀티페이지에서는 카드 단위 등장 효과 대신 페이지 단위 넘김 효과를 써요. 자세한 내용은 [페이지 설정](/editor/multipage/page-settings)을 참고해 주세요.
***
## 자주 묻는 질문
**Q. 카드마다 다른 애니메이션을 줄 수 있나요?**
A. 스크롤 애니메이션은 페이지 전체에 적용되는 옵션이에요. 한 페이지의 모든 카드에 같은 효과가 적용돼요.
**Q. 에디터 미리보기에서 동작이 잘 안 보여요.**
A. 스크롤 애니메이션은 발행된 라이브 페이지에서 정상적으로 동작해요. 발행 후 모바일에서 직접 스크롤해서 확인해 주세요.
**Q. 멀티페이지에서도 스크롤 애니메이션을 쓸 수 있나요?**
A. 스크롤 애니메이션은 원페이지 전용 기능이에요. 멀티페이지에서는 [페이지 설정](/editor/multipage/page-settings)의 페이지 넘김 효과(밀어내기·덮기·종이책)를 사용해 주세요.
***
## 함께 보면 좋은 문서
* [원페이지 살펴보기](/editor/onepage/overview) — 원페이지 에디터 전체 구조
* [원페이지 뷰어](/editor/onepage/viewer) — 라이브 페이지에서 방문자가 보는 화면
* [페이지 설정](/editor/multipage/page-settings) — 멀티페이지의 페이지 단위 넘김 효과
# 원페이지 뷰어
Source: https://cdbd.mintlify.app/editor/onepage/viewer
# 원페이지 뷰어
원페이지 뷰어는 방문자가 실제로 보는 화면이에요. 에디터에서 완성한 카드들이 위에서 아래로 이어지는 스크롤 형식으로 표시돼요.
***
## 1. 뷰어 화면 구성
![원페이지 뷰어 — 메뉴 카드 + 히어로 이미지 카드]()
원페이지 뷰어는 **단일 페이지 스크롤** 방식으로 작동해요. 방문자는 위에서 아래로 스크롤하며 페이지 전체를 탐색해요.
| 영역 | 설명 |
| --------- | ---------------------------------------------------- |
| **상단 카드** | 방문자가 처음 보는 영역이에요. 프로필·메뉴·히어로 이미지처럼 주목도 높은 카드를 배치하세요. |
| **본문 카드** | 스크롤하며 순서대로 노출돼요. |
| **하단 카드** | CTA 버튼·SNS·연락처처럼 행동 유도 요소를 배치하면 효과적이에요. |
***
## 2. 스크롤 탐색
방문자는 손가락 스와이프(모바일) 또는 마우스 휠(PC)로 페이지를 위아래로 자유롭게 이동할 수 있어요.
![스크롤 후 중간 섹션 — 행사 일시·장소·지도 카드]()
스크롤 애니메이션이 설정되어 있다면 각 카드가 스크롤 도중 등장 효과와 함께 나타나요. 스크롤 애니메이션 설정 방법은 [스크롤 애니메이션](/editor/onepage/scroll-animation) 가이드를 참고하세요.
***
## 3. 뷰어 상단 메뉴
뷰어 화면 상단에는 방문자를 위한 편의 기능이 표시될 수 있어요.
| 기능 | 설명 |
| --------- | -------------------------------------------------------- |
| **메뉴 카드** | 페이지에 메뉴 카드가 있을 경우 상단 탭으로 표시돼요. 탭을 누르면 해당 섹션이나 URL로 이동해요. |
| **⋯ 더보기** | 구독, 저장, 공유, 검색 기능을 제공해요. |
***
## 4. ⋯ 더보기 기능
![더보기 메뉴 — 구독하기·저장하기·공유하기·검색하기]()
화면 오른쪽 상단의 **⋯** 버튼을 탭하면 4가지 기능 메뉴가 나타나요.
### 구독하기
![구독하기 — 이메일 주소를 입력해 페이지 소식 수신]()
이메일 주소를 입력하고 **구독하기** 버튼을 누르면, 페이지가 업데이트될 때 알림 이메일을 받을 수 있어요.
### 저장하기
![저장하기 — 페이지 썸네일과 메모 남기기]()
페이지를 북마크처럼 저장해 나중에 다시 찾아볼 수 있어요. 저장 시 메모를 함께 남길 수도 있어요.
> 💡 저장된 페이지는 CdBd 계정의 **저장한 페이지** 목록에서 확인할 수 있어요.
### 공유하기
![공유하기 — 페이지 URL이 클립보드에 복사됨]()
**공유하기**를 누르면 현재 페이지 URL이 클립보드에 자동으로 복사돼요. 복사된 링크를 카카오톡, 인스타그램 DM, 이메일 등 원하는 채널에 바로 붙여넣을 수 있어요.
### 검색하기
![검색하기 — 빈 상태]()
![검색하기 — '여름' 검색 결과 2건]()
페이지 내 텍스트를 키워드로 검색할 수 있어요. 검색 결과에는 해당 내용이 있는 위치와 텍스트 미리보기가 함께 표시돼요. 결과를 탭하면 해당 위치로 바로 이동해요.
***
## 5. 공유 및 URL
에디터에서 **URL 생성하기** 버튼으로 페이지 주소를 만들면, 그 링크를 방문자에게 공유할 수 있어요. 링크를 클릭한 방문자는 바로 이 뷰어 화면을 보게 돼요.
공유 방법과 URL 설정은 [URL 생성 및 게시하기](/editor/publish) 가이드를 참고하세요.
> 💡 **활용 팁**: 방문자의 읽기 흐름을 설계하세요. 가장 중요한 내용을 위쪽에 두고, 행동 유도(버튼, 연락처)를 페이지 하단에 배치하면 자연스럽게 스크롤을 유도할 수 있어요.
# 에디터 살펴보기
Source: https://cdbd.mintlify.app/editor/overview
# 에디터 살펴보기
에디터는 모바일 페이지를 만들고 꾸미는 작업 공간이에요. 각 영역의 역할과 기본 사용법을 알아두면 훨씬 빠르고 편하게 작업할 수 있답니다.
***
## 1. 에디터 화면 구성
### 1.1 페이지 유형 선택
새 페이지를 만들 때는 두 단계를 거쳐요.
**1단계 — 페이지 주제 선택**: 홈의 **\[새 페이지 만들기]** 또는 내 페이지의 \*\*\[+ 새 페이지]\*\*를 클릭하면 주제 선택 모달이 나타나요. 빈 페이지로 시작하거나, 목적에 맞는 템플릿 카테고리를 바로 탐색할 수 있어요.
![새 페이지 만들기 — 페이지 주제 선택]()
**2단계 — 페이지 유형 선택**: \*\*\[빈 페이지로 시작하기]\*\*를 선택하면 페이지 유형을 고르는 모달로 이어져요.
![새 페이지 만들기 — 원페이지·멀티페이지 선택]()
| 유형 | 설명 | 적합한 용도 |
| --------- | -------------------- | ----------------------- |
| **원페이지** | 카드를 위아래로 쌓아 스크롤하는 방식 | 이벤트 초대장, 모바일 프로필, 링크 모음 |
| **멀티페이지** | 여러 페이지를 한 장씩 넘겨보는 방식 | 제품 카탈로그, 제안서, 룩북 |
### 1.2 화면 전체 구성
에디터는 크게 세 영역으로 나뉘어 있어요. **상단 설정 메뉴**, **좌측 빠른 이동 메뉴**, 그리고 실제 작업이 이루어지는 **주 작업 공간**이에요.
![에디터 화면 구성]()
### 1.3 상단 설정 메뉴
페이지 전체를 관리하고 작업을 편리하게 조절하는 도구들이 모여 있어요.
* **페이지 이름**: 공유 시 제목란에 표시되고, 내 페이지 목록에서 구분할 때 사용해요.
* **되돌리기 / 다시 하기**: 실수해도 걱정 없어요. Undo/Redo로 언제든 이전 상태로 되돌릴 수 있어요.
* **원페이지 전용 — 스크롤 애니메이션**: 방문자가 스크롤할 때 카드가 나타나는 효과를 설정해요.
* **멀티페이지 전용 — 페이지 설정**: 페이지 크기, 넘김 효과, 자동 넘김 등을 설정해요.
* **페이지 테마**: 전체 디자인 분위기를 한 번에 바꿀 수 있는 버튼이에요.
* **미리보기**: 방문자 눈에 실제로 어떻게 보이는지 새 창에서 확인할 수 있어요.
* **URL 생성 / 게시하기**: 페이지를 외부에 공개하는 버튼이에요.
### 1.4 좌측 빠른 이동 메뉴
에디터 좌측에 항상 표시되는 메뉴로, CdBd 서비스의 주요 화면으로 빠르게 이동할 수 있어요.
홈 / 내 페이지 / 계정 설정 / 도움말 / 로그아웃
### 1.5 주 작업 공간
* **왼쪽 — 미리보기 보드**: 만들고 있는 페이지가 실제로 어떻게 보이는지 실시간으로 확인할 수 있어요. 멀티페이지 에디터에서는 이 위치에 **페이지 썸네일 패널**이 표시돼요.
* **가운데 — 카드 보드**: 페이지에 들어가는 모든 카드를 한눈에 보고 관리하는 공간이에요. 새 카드 추가, 순서 변경, 카드 관리가 여기서 이루어져요.
* **오른쪽 — 디자인 보드**: 선택한 카드의 세부 디자인과 속성을 설정하는 공간이에요. 색상, 폰트, 여백 등을 원하는 대로 조절할 수 있어요.
***
## 2. 카드 추가하고 관리하기
CdBd에서 **카드**는 페이지를 구성하는 가장 작은 단위예요. 레고 블록처럼 카드를 자유롭게 추가하고 순서를 바꿔서 나만의 페이지를 완성할 수 있답니다.
### 2.1 카드 추가하기
에디터의 **카드 추가하기** 버튼을 클릭하면 카드 목록이 나타나요. 원하는 카드를 선택하면 페이지에 바로 추가돼요.
![카드 추가 화면 — 기본 카드 14종과 2단 카드 6종]()
> 💡 **빈 페이지로 시작할 때** — 카드가 한 개도 없는 페이지에서는 가운데에 **위 버튼을 눌러 카드를 추가해 보세요!** 안내 메시지와 화살표가 보이고, 우측 패널에는 **페이지 테마**(색상·서체) 옵션이 자동으로 열려요. 카드를 추가하기 전에 페이지 분위기부터 정해두기 좋아요.
### 2.2 카드 순서 바꾸기
카드 왼쪽의 **(⋮⋮)** 버튼을 마우스로 누른 채 위아래로 드래그하면 순서를 변경할 수 있어요.
### 2.3 카드 보이기 / 숨기기
각 카드 행의 좌측에는 **핀 아이콘**과 **토글 스위치**가 함께 있어요. 토글을 누르면 파란색으로 활성화되고, 카드 상태를 전환할 수 있어요. 정확한 동작은 직접 켜고 꺼보며 확인해 보세요.
### 2.4 카드에 이름 붙이기
카드 설정에서 이름을 입력하면 방문자에게는 보이지 않지만, 여러 카드를 관리할 때 훨씬 편리해요.
### 2.5 카드 복사하고 삭제하기
**(⋮)** 버튼을 클릭해서 **복제하기** 또는 **삭제하기**를 선택할 수 있어요.
> 💡 **팁**: 카드 이름 기능을 적극 활용해 보세요. 카드가 많아질수록 이름이 있으면 원하는 카드를 빠르게 찾을 수 있어요.
***
## 3. 디자인을 더 자세히 다듬으려면
페이지 디자인은 **두 단계**로 나뉘어 있어요. 먼저 페이지 전체 분위기를 한 번에 정하고, 그다음 강조가 필요한 카드만 따로 다듬는 식이에요.
| 단계 | 무엇을 하나 | 자세히 보기 |
| ---------- | ------------------------------ | ----------------------------- |
| **페이지 테마** | 페이지 전체의 서체·색상·버튼 모양을 한 번에 통일해요 | [페이지 테마](/editor/page-theme) |
| **카드 디자인** | 카드 한 장씩 배경·테두리·모서리·여백을 따로 꾸며요 | [카드 디자인](/editor/card-design) |
> 💡 **추천 순서** — 디자인 컨셉을 먼저 정하고 → 페이지 테마부터 적용한 다음 → 카드 내용을 채우고 → 강조가 필요한 카드만 카드 디자인으로 세부 조정하면 작업이 훨씬 빠르고 깔끔해져요.
# 페이지 테마
Source: https://cdbd.mintlify.app/editor/page-theme
# 페이지 테마
> **한 줄 요약** — 페이지 전체의 서체·색상·버튼 모양을 한 번에 통일감 있게 바꿔주는 기능이에요.
## 이 기능이 필요한 순간
* 페이지 **전체 분위기를 한 번에** 통일하고 싶어요
* **브랜드 컬러·서체**를 페이지 곳곳에 일관되게 적용하고 싶어요
* 카드별 디자인을 일일이 만지는 대신, **전체 톤부터** 정하고 싶어요
***
## 페이지 테마 패널 열기
에디터 상단의 **페이지 테마** 버튼을 한번 눌러보세요. 오른쪽 패널에 테마 설정 영역이 펼쳐져요. 원하는 테마를 미리보기에서 확인한 뒤 적용하면 돼요.
![페이지 테마 패널]()
> 💡 **카드 디자인과의 차이** — [카드 디자인](/editor/card-design)은 카드 한 장씩 개별 적용되는 디자인이고, 페이지 테마는 페이지 **전체에 한 번에** 적용되는 디자인이에요. 보통 테마를 먼저 정해 두고, 강조가 필요한 카드만 카드 디자인으로 따로 다듬어요.
***
## 서체 고르기
기본 서체는 **프리텐다드**예요. **26가지 한국어 서체**와 **18가지 영어 서체** 중에서 페이지 분위기에 맞는 서체를 골라보세요. 본명조·평창평화체·베이글팻 등 기본 서체 외에 **\[+ 서체 더보기]** 버튼을 누르면 더 많은 선택지가 보여요.
***
## 색상 고르기
배경 색깔, 서체 색깔, 버튼 색깔을 각각 따로 조절할 수 있어요. 단색 외에도 다양한 배경 스타일이 있어요.
* **그라데이션** — 두 가지 색이 자연스럽게 이어지는 배경
* **이미지** — 배경에 사진이나 GIF를 깔아요
* **동적 배경** — 움직이는 패턴, 스크롤에 따라 움직이는 이미지, 비디오 배경
***
## 버튼 모양 고르기
페이지 안의 모든 버튼 모양을 한 번에 통일해요. **원형**, **각진**, **둥근** 세 가지 중에서 골라요.
![페이지 테마 — 서체와 버튼 모양 설정 화면]()
***
## 활용 팁
* **추천 순서** — 디자인 컨셉 → 테마 적용 → 카드 내용 추가 → 필요한 부분만 [카드 디자인](/editor/card-design)으로 세부 조정. 이렇게 진행하면 전체 통일감을 유지하면서 작업도 빠르게 끝낼 수 있어요.
* **브랜드 컬러가 있다면** — 색상 설정에서 커스텀 색상 코드(HEX)를 입력해 정확한 브랜드 컬러를 적용해 보세요.
* **카드가 한 개도 없을 때** — 빈 페이지에서는 우측 패널에 페이지 테마가 자동으로 열려요. 카드를 추가하기 전에 분위기부터 정해두기 좋아요.
***
## 함께 보면 좋은 문서
* [카드 디자인](/editor/card-design) — 카드 한 장씩 따로 꾸미고 싶을 때
* [에디터 살펴보기](/editor/overview) — 에디터의 기본 사용법
# 미리보기
Source: https://cdbd.mintlify.app/editor/preview
# 미리보기
> **한 줄 요약** — 작업 중인 페이지가 방문자에게 어떻게 보이는지 새 창으로 띄워 미리 확인할 수 있어요.
## 이 기능이 필요한 순간
* 페이지를 외부에 공유하기 전에 **전체 모습을 한 번 점검**하고 싶어요
* 에디터의 작은 미리보기 보드와 **실제 방문자 화면이 어떻게 다른지** 확인하고 싶어요
* QR 코드를 미리 받아서 **인쇄물·전단지 시안에 넣어보고** 싶어요
***
## 미리보기 화면 열어보기
에디터 상단의 **눈(👁) 아이콘**을 한번 눌러보세요. 새 창으로 미리보기 화면이 열려요.
![미리보기 화면 — 왼쪽 사이드바와 모바일 페이지 미리보기]()
> ⚠️ **미리보기 주소는 본인만 볼 수 있어요** — 미리보기 주소를 그대로 복사해 다른 사람에게 보내도 그 사람은 페이지를 볼 수 없어요. 외부에 공유할 때는 [URL 발행](/editor/publish)으로 만든 정식 주소를 사용해 주세요.
***
## 미리보기 화면 살펴보기
화면은 크게 두 영역으로 나뉘어 있어요.
**왼쪽 사이드바** — 페이지 정보와 부가 기능
| 영역 | 내용 |
| --- | ------------------------------------------------------------------ |
| 상단 | 페이지 썸네일 + 페이지 이름 |
| 가운데 | 🔔 알림 / ❤️ 좋아요 / **\[공유하기]** 버튼 — 발행된 페이지에서 방문자가 보게 될 버튼들이 함께 표시돼요 |
| 하단 | QR 코드 + **\[PNG]** · **\[SVG]** 다운로드 버튼 |
**가운데·오른쪽 영역** — 실제 모바일 화면 모습
방문자가 페이지를 열었을 때 보게 될 모습 그대로 표시돼요. 카드 배치, 텍스트, 이미지가 실제 비율로 보여서 발행 전 마지막 점검에 어울려요.
***
## QR 코드 받아두기
왼쪽 사이드바 하단의 QR 코드 아래에서 **\[PNG]** 또는 **\[SVG]** 버튼을 누르면 해당 형식의 파일이 내려받아져요.
* **PNG** — 일반 이미지 파일. 디지털 화면이나 가벼운 인쇄에 어울려요
* **SVG** — 크기를 키워도 화질이 깨지지 않는 파일. 큰 인쇄물(포스터·간판)에 어울려요
> 💡 **모바일에서 직접 열어보세요** — 미리보기 주소를 휴대폰에서 열면 실제 방문자 환경과 가장 비슷한 모습을 확인할 수 있어요.
***
## 미리보기와 발행 구분하기
미리보기는 **본인 점검용**이에요. 외부에 페이지를 공유하려면 [URL 발행](/editor/publish) 단계를 따로 거쳐야 해요.
| 비교 항목 | 미리보기 | URL 발행 |
| ----- | ----------------- | ------------------------------------- |
| 사용 목적 | 본인이 점검 | 외부에 공유 |
| 접근 권한 | 페이지 소유자만 | 누구나 (주소를 아는 사람) |
| 진입 방법 | 에디터 헤더의 눈(👁) 아이콘 | 헤더의 **\[URL 생성하기]** 또는 **\[게시하기]** 버튼 |
***
## 자주 묻는 질문
**Q. 미리보기 주소를 친구에게 공유하면 그 친구도 볼 수 있나요?**
A. 아니에요. 미리보기 주소는 페이지 소유자(본인)만 열어볼 수 있어요. 친구에게 보여주려면 먼저 [URL을 발행](/editor/publish)해 정식 주소를 만들어주세요.
**Q. 에디터에서 카드를 수정하면 미리보기에도 바로 반영되나요?**
A. 미리보기 창을 열어둔 상태로 에디터에서 내용을 바꿨다면, 미리보기 창을 한 번 새로고침(F5)해 보세요. 가장 최근 변경 사항을 확인할 수 있어요.
***
## 함께 보면 좋은 문서
* [URL 발행](/editor/publish) — 외부에 페이지를 공유하려면 발행이 필요해요
* [통계](/editor/stats) — 발행 후 방문자 접근 데이터를 확인할 수 있어요
# URL 생성 및 게시하기
Source: https://cdbd.mintlify.app/editor/publish
# URL 생성 및 게시하기
URL 생성은 완성한 페이지를 고객·파트너·잠재 고객에게 공유할 수 있는 주소를 만드는 기능이에요. URL을 생성해야 페이지가 외부에 공개되고, 예약 카드 같은 일부 기능도 활성화돼요.
> 📌 **CdBd 공개 URL 구조**: `https://cdbd.in/{내 주소}/{내 페이지 URL}`
>
> * **내 주소** = 계정당 1개의 prefix → [내 주소](/features/my-address)에서 관리
> * **내 페이지 URL** = 페이지당 1개의 suffix → 이 화면에서 생성·변경
>
> 한 번 생성한 **내 페이지 URL을 변경하면 50 크레딧이 차감**돼요 ([요금제](/start/pricing) §6). 내 주소 변경(50 C)과는 별개 항목이므로, 둘 다 바꾸면 각각 50 C씩 차감돼요.
***
## 1. URL 생성 시작하기
에디터 오른쪽 위의 **\[URL 생성]** 버튼(보라색)을 클릭하면 URL 정보 설정 화면이 열려요.
***
## 2. URL 정보 편집하기
SNS나 메시지 앱으로 공유할 때 표시되는 정보를 설정할 수 있어요.
![URL 정보 편집 화면 — 썸네일, 제목, 설명 및 페이지 옵션 설정]()
| 항목 | 설명 |
| --------------- | ----------------------------------- |
| **대표 이미지(썸네일)** | 링크 공유 시 미리보기에 표시되는 이미지 |
| **제목** | 링크 미리보기에 표시되는 페이지 제목 |
| **설명글** | 제목 아래 표시되는 짧은 소개 문구 |
| **페이지 설정 옵션** | 비밀번호, 상단 메뉴, 검색 노출, CdBd 배너 등 공개 설정 |
**대표 이미지·제목·설명글**을 모두 채워두면 카카오톡·인스타그램 등에서 링크를 공유했을 때 미리보기가 훨씬 풍성하게 보여요.
### 🖼️ 대표 이미지(썸네일)
링크를 공유했을 때 카카오톡·페이스북·인스타그램 등에서 이미지 미리보기로 표시되는 이미지예요.
| 항목 | 권장 값 |
| ---------- | --------------------------------- |
| **권장 사이즈** | **1200 × 630px** (가로:세로 = 1.91:1) |
| **최소 사이즈** | 600 × 315px 이상 |
| **지원 형식** | JPG, PNG |
| **파일 크기** | 5MB 이하 권장 |
1200 × 630px은 카카오톡·페이스북·링크드인 등 주요 플랫폼이 공통으로 채택한 OG 이미지 표준 사이즈예요. 이보다 작으면 이미지가 표시되지 않거나 저해상도로 보일 수 있어요.
> 💡 **안전 영역**: 텍스트·로고 등 중요한 요소는 이미지 중앙 **80% 영역** 안에 배치하세요. 플랫폼마다 미리보기 크기가 달라 가장자리가 잘릴 수 있어요.
### ✏️ 제목
링크 미리보기에 표시되는 페이지 제목이에요. 너무 길면 플랫폼에 따라 중간에 잘릴 수 있으므로 **25\~35자 이내**로 간결하게 작성하는 것을 권장해요.
### 💬 설명글
제목 아래 표시되는 짧은 소개 문구예요. 페이지의 핵심 내용을 요약해 방문자의 클릭을 유도하는 문구를 입력해 주세요.
### ⚙️ 페이지 설정 옵션
#### 🔒 비밀번호 보호
페이지에 비밀번호를 설정하면, URL에 접속한 방문자에게 비밀번호 입력 화면이 먼저 나타나요. 올바른 비밀번호를 입력해야만 페이지 내용을 열람할 수 있어요.
* 특정 고객·팀원에게만 비공개로 페이지를 공유할 때 유용해요.
* 비밀번호를 모르는 방문자는 페이지 내용을 전혀 볼 수 없어요.
* 비밀번호를 변경하면 이미 링크를 받은 방문자도 새 비밀번호를 입력해야 열람할 수 있어요.
#### 🗂️ 페이지 상단 메뉴
공개된 페이지 상단에 표시되는 버튼들을 켜고 끌 수 있어요.
| 메뉴 항목 | ON (켜기) | OFF (끄기) |
| ------- | -------------------------------- | --------- |
| **공유** | 방문자가 페이지를 SNS로 공유할 수 있는 버튼 표시 | 공유 버튼 숨김 |
| **좋아요** | 방문자가 페이지에 좋아요를 남길 수 있는 버튼 표시 | 좋아요 버튼 숨김 |
| **알림** | 방문자가 페이지 업데이트 알림을 구독할 수 있는 버튼 표시 | 알림 버튼 숨김 |
#### 🔍 검색 노출
ON으로 설정하면 검색 엔진에 페이지가 노출될 수 있어요. 특정 대상에게만 공유하는 비공개 성격의 페이지라면 OFF로 설정하세요.
#### 🏷️ CdBd 배너 표시
페이지 하단에 CdBd 브랜딩 배너 표시 여부를 설정해요. 배너를 유지(ON)하면 이용 요금이 **20% 할인**돼요.
***
## 3. 이용 기간 선택 후 URL 생성하기
이용 기간은 **1개월**, **2개월**, **12개월** 중 선택할 수 있어요.
* **CdBd 배너 유지 시 20% 할인** — 페이지 하단의 CdBd 브랜딩 배너를 그대로 두면 이용 요금이 20% 할인돼요.
* **QR 코드 제공** — URL 생성 후 QR 코드 이미지를 PNG 또는 SVG 형식으로 다운로드할 수 있어요.
***
## 4. 페이지 수정 후 업데이트하기 (게시하기)
URL이 이미 있는 페이지를 수정한 뒤 **\[게시하기]** 버튼을 클릭하면 기존 URL에 최신 내용이 즉시 반영돼요.
> ⚠️ 버튼을 클릭하기 전까지 수정 내용은 공개 페이지에 반영되지 않아요. 수정 후 반드시 게시하기를 눌러주세요.
내용을 수정하고 다시 게시해도 **URL은 그대로 유지**돼요. 한 번 공유한 주소를 계속 사용하면서 내용만 업데이트할 수 있어요.
> 💡 **활용 팁**: 이벤트 기간 중 내용을 자주 수정해야 한다면, 12개월 이용 기간으로 URL을 생성해 두고 필요할 때마다 내용을 바꿔가며 게시하는 방식이 효율적이에요.
***
## 5. 카카오톡으로 공유했을 때 미리보기가 바로 바뀌지 않아요
카카오톡으로 URL을 공유한 뒤, 대표 이미지·제목·설명글이 방금 설정한 내용과 다르게 표시될 수 있어요. 이는 카카오톡이 링크 미리보기 정보를 **캐시(임시 저장)** 하는 방식 때문이에요.
### ❓ 왜 바로 업데이트가 안 되나요?
카카오톡은 링크를 처음 공유할 때 해당 웹 페이지의 **OG(Open Graph) 태그**를 읽어 미리보기 정보(이미지·제목·설명글)를 자체 서버에 캐시로 저장해요. 이후 같은 URL을 공유하면 웹 페이지를 다시 읽지 않고 저장된 캐시를 그대로 사용하기 때문에, 대표 이미지나 제목을 변경해도 카카오톡 미리보기에는 이전 정보가 계속 표시돼요.
캐시 갱신 시점은 카카오가 공식적으로 명시하지 않으며, 수 시간 이상 걸리는 경우도 있어요.
### 🔧 캐시를 직접 초기화하는 방법
카카오 개발자 센터의 OG 캐시 초기화 도구를 사용하면 캐시를 직접 삭제해 미리보기를 빠르게 업데이트할 수 있어요.
1. [카카오 OG 캐시 초기화 도구](https://developers.kakao.com/tool/clear/og)에 접속하세요.
2. URL 입력란에 페이지 주소를 붙여넣고 **\[확인]** 버튼을 클릭하세요.
3. 초기화 후 카카오톡에서 링크를 다시 공유하면 최신 미리보기가 표시돼요.
> ⚠️ 캐시 초기화 후에도 반영까지 수십 분이 소요될 수 있어요. 중요한 캠페인이나 이벤트를 공유하기 **전에** 미리 대표 이미지·제목·설명글을 완성해 두는 것을 권장해요.
> 💡 카카오톡 외에 페이스북·텔레그램 등 다른 메신저도 동일한 OG 캐시 방식을 사용해요. 플랫폼별 캐시 삭제 도구를 이용하거나, 이미지 파일명을 변경해 새 이미지로 인식시키는 방법을 사용할 수 있어요.
# 통계 확인하기
Source: https://cdbd.mintlify.app/editor/stats
# 통계 확인하기
통계는 내 페이지가 얼마나 많이 열람됐는지, 방문자가 어떤 링크를 클릭했는지, 질문에 몇 명이 답했는지, 예약은 몇 건 들어왔는지를 한 화면에서 확인할 수 있는 기능이에요. 숫자를 보면서 콘텐츠를 개선하고 방문자 반응을 파악해 보세요.
## 1. 통계 페이지 진입하기
**내 페이지** 목록에서 URL이 활성화된 페이지 카드 위에 마우스를 올리면 **\[통계보기]** 버튼이 나타나요.
![내 페이지에서 통계보기 버튼]()
> 💡 URL이 생성되지 않은 페이지나 URL이 게시 중지된 페이지는 통계 버튼이 표시되지 않아요.
***
## 2. 화면 구성
![통계 전체 화면]()
통계 페이지는 **좌측 사이드바**와 **우측 메인 영역**으로 구성돼요.
### 상단 헤더
| 항목 | 설명 |
| ---------- | ------------------------------- |
| **페이지 제목** | 통계를 보고 있는 페이지 이름이에요 |
| **URL 생성** | 페이지 주소가 처음 만들어진 날짜와 시각이에요 |
| **URL 만료** | 유료 플랜의 URL 만료 예정일이에요 (해당 시 표시) |
| **← 뒤로가기** | 좌측 상단 화살표를 클릭하면 내 페이지 목록으로 돌아가요 |
### 좌측 사이드바 — 4개 탭
| 탭 | 확인할 수 있는 것 |
| ------------- | -------------------------- |
| **페이지뷰 & 클릭** | 방문 수, 링크 클릭 수, 클릭률, 날짜별 추이 |
| **제출된 답변** | 질문과 답변 카드에 방문자가 응답한 내용 |
| **예약 현황** | 예약 카드를 통해 접수된 예약 건수와 명단 |
| **구독 현황** | 방문자가 구독 신청을 한 목록 |
***
## 3. 페이지뷰 & 클릭
방문자가 페이지를 얼마나 봤고 링크를 얼마나 눌렀는지 확인하는 탭이에요.
![페이지뷰 & 클릭 메인 화면]()
> 💡 **원페이지 vs 멀티페이지**: 페이지 유형에 따라 표시되는 지표 이름이 다를 수 있어요. 원페이지는 **페이지뷰** 단일 지표를, 멀티페이지는 **방문자 수**와 **1페이지당 뷰**를 별도로 구분해 보여줘요.
### 3.1 기간 선택
| 버튼 | 설명 |
| -------------- | ----------------------- |
| **최근 7일** | 오늘 포함 7일간의 통계 (기본값) |
| **최근 14일** | 오늘 포함 14일간의 통계 |
| **최근 30일** | 오늘 포함 30일간의 통계 |
| **시작일 \~ 종료일** | 달력에서 원하는 날짜 범위를 직접 지정해요 |
### 3.2 통계 요약 카드
기간 내 집계된 핵심 수치를 한눈에 보여줘요.
**원페이지**
| 지표 | 설명 |
| -------- | ------------------------------------------------- |
| **페이지뷰** | 페이지를 방문한 총 횟수예요. 같은 방문자가 여러 번 방문하면 중복 집계돼요 |
| **클릭수** | 버튼, 이미지, SNS 아이콘, 예약 등 링크가 연결된 요소를 클릭한 총 횟수예요 |
| **클릭률** | `클릭수 ÷ 페이지뷰 × 100`으로 계산해요. 방문자 중 실제로 액션을 취한 비율이에요 |
**멀티페이지**
| 지표 | 설명 |
| ----------- | ---------------------------------- |
| **방문자 수** | 기간 내 페이지를 방문한 총 횟수예요 |
| **1페이지당 뷰** | 방문자 1명이 평균적으로 몇 개의 페이지를 열람했는지 보여줘요 |
| **클릭수** | 링크가 연결된 요소를 클릭한 총 횟수예요 |
| **클릭률** | `클릭수 ÷ 방문자 수 × 100`으로 계산해요 |
지표 카드를 클릭하면 해당 지표가 선택되고, 아래 꺾은선 차트에 해당 지표의 날짜별 추이가 표시돼요.
> 💡 클릭률이 낮다면 버튼 문구나 위치를 바꿔보세요. 방문자가 원하는 콘텐츠에 버튼이 가까이 있을수록 클릭률이 높아져요.
### 3.3 날짜별 추이 차트
선택된 지표의 날짜별 변화를 꺾은선 그래프로 보여줘요. 특정 날짜에 마우스를 올리면 해당 날의 수치를 확인할 수 있어요.
### 3.4 링크별 클릭
![링크별 클릭 섹션]()
페이지 내 각 링크 요소가 기간 동안 몇 번 클릭됐는지 순위별로 보여줘요.
| 항목 | 설명 |
| -------------------- | --------------------------------- |
| **순위 (TOP1, TOP2…)** | 클릭 횟수가 많은 순서로 자동 정렬돼요 |
| **카드 유형 아이콘** | 버튼, 예약, SNS 등 어떤 카드의 링크인지 알 수 있어요 |
| **링크 이름** | 에디터에서 설정한 카드 이름 또는 버튼 텍스트예요 |
| **클릭 횟수** | 해당 링크가 클릭된 총 횟수예요 |
| **클릭률** | 전체 클릭 중 해당 링크가 차지하는 비율이에요 |
### 3.5 페이지별 뷰 (멀티페이지 전용)
![페이지별 뷰 섹션]()
멀티페이지에서만 표시되는 섹션으로, 멀티페이지 내 **각 개별 페이지**가 기간 동안 얼마나 열람됐는지를 순위별로 보여줘요.
| 항목 | 설명 |
| ---------- | ------------------------- |
| **순위** | 뷰가 많은 페이지 순으로 자동 정렬돼요 |
| **페이지 이름** | 에디터에서 설정한 각 페이지의 이름이에요 |
| **뷰 수** | 해당 페이지가 열람된 총 횟수예요 |
| **비율** | 전체 뷰 중 해당 페이지가 차지하는 비율이에요 |
어떤 페이지가 방문자의 관심을 끌고 있는지 파악해 콘텐츠 전략에 활용해 보세요.
### 3.6 통계 다운로드
**\[통계 다운로드]** 버튼을 클릭하면 선택된 기간의 날짜별 방문·클릭 데이터를 엑셀 파일로 내려받을 수 있어요. 보고서 작성이나 팀 공유 시 활용해 보세요.
***
## 4. 제출된 답변
페이지에 **질문과 답변 카드**가 있다면, 방문자가 제출한 응답을 이 탭에서 확인해요.
![제출된 답변 탭]()
### 4.1 카드별 목록
페이지에 포함된 질문과 답변 카드가 하나씩 카드 형태로 표시돼요.
| 항목 | 설명 |
| --------- | ------------------------- |
| **카드 제목** | 에디터에서 설정한 질문과 답변 카드 이름이에요 |
| **질문 수** | 해당 카드에 포함된 질문 개수예요 |
| **답변 수** | 방문자가 제출한 총 답변 건수예요 |
카드를 클릭하면 **상세 답변 내역** 화면으로 이동해요. 각 응답의 내용, 제출 일시, 질문별 통계(원그래프 등)를 확인할 수 있어요.
> 💡 질문과 답변 카드의 상세 통계(원그래프, 응답 목록, 엑셀 다운로드)는 [질문과 답변 카드 가이드](/editor/card-qna)에서 더 자세히 설명하고 있어요.
***
## 5. 예약 현황
페이지에 **예약 카드**가 있다면, 접수된 예약 건수와 방문 체크 현황을 이 탭에서 확인해요.
![예약 현황 탭]()
### 5.1 예약 카드별 목록
페이지에 포함된 예약 카드가 하나씩 표시돼요.
| 항목 | 설명 |
| ------------ | ----------------------- |
| **예약 카드 이름** | 에디터에서 설정한 예약 카드 제목이에요 |
| **예약 수** | 해당 카드를 통해 접수된 총 예약 건수예요 |
카드를 클릭하면 예약자 목록, 예약 날짜·시간, 예약자 정보, **방문 상태**를 상세하게 확인할 수 있어요.
상세 목록에서는 아래 기능을 사용할 수 있어요.
| 기능 | 설명 |
| ---------------- | ----------------------------------------------------------------------------- |
| **방문 상태** | 각 예약의 방문 완료·미완료 상태를 한눈에 확인해요 |
| **방문 상태 필터** | 방문 완료/미완료만 모아볼 수 있어요 |
| **방문 체크 URL** | 상단에 표시된 URL로 호스트가 QR 스캔 페이지에 접속해요 |
| **예약자 추가 문항 컬럼** | 카드에 \[예약자 추가 문항]을 설정한 경우 각 문항이 개별 컬럼으로 표시돼요. **\[예약 정보]** 이후 컬럼은 가로 스크롤로 확인해요 |
| **예약 취소** | 각 행에서 제작자가 직접 예약을 취소할 수 있어요 |
| **일괄 처리** | 여러 예약을 선택해 방문 상태 변경 또는 일괄 취소를 할 수 있어요 |
| **현황 다운로드** | 방문 상태와 **예약자 추가 문항 응답**을 포함한 전체 예약 내역을 엑셀 파일로 받을 수 있어요 |
> 💡 예약 카드 설정(예약 옵션·방문 체크 가능 시간·예약자 추가 문항)과 방문 체크 흐름 전체는 [예약 카드 가이드](/editor/card-reservation)에서 더 자세히 설명하고 있어요.
***
## 6. 구독 현황
방문자가 페이지의 **구독 기능**을 통해 알림 신청을 했다면, 이 탭에서 구독자 목록을 관리할 수 있어요.
![구독 현황 탭]()
### 6.1 구독자 요약
화면 상단에 **총 구독자 수**가 표시돼요.
### 6.2 구독자 목록 테이블
| 컬럼 | 설명 |
| --------- | -------------------- |
| **구분** | 구독자 순번이에요 |
| **구독 일시** | 구독 신청이 완료된 날짜와 시각이에요 |
| **구독자** | 구독자의 연락처 또는 식별 정보예요 |
### 6.3 현황 다운로드
**\[현황 다운로드]** 버튼으로 전체 구독자 목록을 엑셀 파일로 저장할 수 있어요.
***
## 7. 통계 활용 팁
| 상황 | 추천 행동 |
| ------------------------ | -------------------------------------------------------- |
| 페이지뷰(방문자 수)는 많은데 클릭수가 적다 | 버튼 위치를 상단으로 올리거나 문구를 더 명확하게 바꿔보세요 |
| 특정 날짜에 급격한 상승이 있다 | 그날 어떤 채널에서 공유했는지 확인하고 같은 방식을 반복해 보세요 |
| 링크별 클릭에서 하위 순위 링크가 많다 | 클릭이 적은 버튼은 위치를 바꾸거나 강조 색상을 변경해 보세요 |
| 멀티페이지에서 특정 페이지 뷰가 낮다 | 해당 페이지로 이동하는 버튼을 더 눈에 띄게 배치하거나 페이지 순서를 조정해 보세요 |
| 1페이지당 뷰가 1에 가깝다 | 방문자가 첫 페이지에서 이탈하고 있어요. 첫 페이지의 내용이나 다음 페이지 유도 버튼을 개선해 보세요 |
| 제출된 답변 수가 적다 | 질문 수를 줄이거나 더 쉬운 응답 방식(선택형)으로 변경해 보세요 |
# 내 계정
Source: https://cdbd.mintlify.app/features/account
# 내 계정
내 계정은 가입 정보 확인, 크레딧 관리, 비밀번호 변경, 배포 URL 설정 등 계정과 관련된 모든 설정을 관리하는 공간이에요.
![내 계정 화면]()
***
## 1. 계정 정보
### 1.1 이메일
가입 시 사용한 이메일 주소와 **가입 날짜**를 확인할 수 있어요. 이메일 주소는 변경할 수 없어요.
우측의 **\[계정 삭제하기]** 링크를 통해 계정을 탈퇴할 수 있어요. 계정을 삭제하면 모든 페이지와 데이터가 **영구적으로 삭제**되며 복구할 수 없으니 신중하게 결정해 주세요.
### 1.2 비밀번호
**\[재설정하기]** 링크를 클릭하면 현재 이메일로 비밀번호 재설정 메일이 발송돼요.
* 이메일로 가입한 경우: 언제든지 비밀번호를 변경할 수 있어요.
* 구글 계정으로 가입한 경우: 별도 비밀번호를 설정해 이메일 로그인을 추가로 사용할 수 있어요.
### 1.3 이름
계정에 표시될 이름을 변경할 수 있어요. 입력란에 원하는 새 이름을 입력한 뒤 저장하면 바로 반영돼요. 이름은 홈 화면의 환영 메시지에 표시돼요.
***
## 2. 크레딧
### 2.1 잔액 확인
**내 크레딧** 항목에서 현재 보유 중인 **크레딧(C)** 과 **포인트(P)** 잔액을 실시간으로 확인할 수 있어요.
* **크레딧(C)**: 원페이지·멀티페이지 생성, 예약 카드 등 유료 기능 이용 시 차감돼요.
* **포인트(P)**: 결제 금액 비율로 적립되는 보너스 화폐예요. 크레딧과 함께 사용할 수 있어요.
### 2.2 크레딧 충전하기
**\[충전하기]** 링크를 클릭하면 충전 옵션 선택 화면으로 이동해요.
* 결제 금액에는 \*\*부가세(VAT)\*\*가 별도 적용돼요.
* 약관 동의 후 카드 결제가 진행돼요.
* 세금계산서 발행 후 후불 입금 방식(기업 고객)은 문의하기를 통해 별도로 요청할 수 있어요.
### 2.3 결제 내역
![크레딧 결제 내역]()
**\[결제 내역]** 링크를 클릭하면 크레딧 결제 내역 팝업이 열려요. 항목별로 확인할 수 있는 내용은 다음과 같아요.
| 항목 | 설명 |
| -- | -------------- |
| 구분 | 결제 순번 |
| 일시 | 결제 일자와 시각 |
| 내용 | 구매한 크레딧/포인트 옵션 |
| 금액 | 결제 금액 (부가세 포함) |
우측 상단의 **\[엑셀 다운로드]** 버튼으로 결제 내역을 엑셀 파일로 저장할 수 있어요. 비용 정산이나 팀 내 공유 시 유용해요.
### 2.4 이용 내역
![크레딧 이용 내역]()
**\[이용 내역]** 링크를 클릭하면 크레딧과 포인트의 증감 내역 팝업이 열려요.
| 항목 | 설명 |
| ------ | ------------------------ |
| 구분 | 내역 순번 |
| 일시 | 변경 일자와 시각 |
| 내용 | 이용 항목 (관리자 충전, 페이지 생성 등) |
| 상세 | 이용 상세 내용 |
| 크레딧(C) | 해당 건의 크레딧 증감 |
| 포인트(P) | 해당 건의 포인트 증감 |
결제 내역과 마찬가지로 **\[엑셀 다운로드]** 기능을 지원해요.
***
## 3. 배포 정보
### 3.1 내 주소 (URL 슬러그)
내 페이지의 공개 URL 경로(`https://cdbd.in/{내 주소}`)를 확인하고 변경할 수 있어요. 내 주소는 **계정당 하나**만 설정할 수 있고, 변경 시 **50 크레딧**이 차감되며, 다른 이용자가 사용 중인 주소는 사용할 수 없어요.
자세한 규칙과 변경 방법은 [내 주소](/features/my-address) 문서를 참고해 주세요.
> 💡 **활용 팁**: 결제 내역과 이용 내역을 정기적으로 엑셀로 다운로드해 두면 월별 비용 정산이나 팀 내 공유가 훨씬 편리해요.
# 홈
Source: https://cdbd.mintlify.app/features/home
# 홈
홈은 CdBd에 로그인하면 가장 먼저 만나는 화면이에요. 내 계정 정보와 크레딧 잔액을 한눈에 확인하고, 최근 작업 페이지로 바로 이동하거나 새 페이지를 만들 수 있어요.
![홈 화면 전체]()
## 1. 화면 구성
### 1.1 환영 메시지
화면 중앙에 **"안녕하세요, \[이름]님"** 형태로 로그인한 계정 이름이 표시돼요. 이름 아래에는 로그인 이메일 주소도 함께 보여줘요.
### 1.2 크레딧과 포인트 잔액
![크레딧/포인트 잔액 바]()
환영 메시지 바로 아래에 현재 보유 중인 **크레딧(C)** 과 **포인트(P)** 잔액이 실시간으로 표시돼요.
* **크레딧(C)**: 유료 기능(원페이지, 멀티페이지, 예약 카드 등) 이용 시 차감되는 화폐예요.
* **포인트(P)**: 결제 금액 등으로 적립되는 보너스 화폐예요.
**\[충전하기]** 버튼을 클릭하면 바로 크레딧 구매 화면으로 이동해 잔액을 보충할 수 있어요.
> 💡 크레딧과 포인트의 차이, 충전 방법, 이용 내역 확인은 [내 계정](/features/account) 페이지에서 더 자세히 관리할 수 있어요.
### 1.3 최근 작업 페이지
홈 화면 좌측 카드에는 **가장 최근에 편집한 페이지의 미리보기 썸네일**과 제목이 표시돼요.
**\[이어서 작업하기]** 버튼을 누르면 해당 페이지의 에디터로 바로 이동해요. 작업을 잠깐 멈췄다가 다시 시작할 때 메뉴를 탐색할 필요 없이 한 번의 클릭으로 바로 돌아갈 수 있어요.
### 1.4 새 페이지 만들기 / 내 페이지 전체
홈 화면 우측에는 두 가지 바로가기가 있어요.
| 카드 | 역할 |
| ------------- | ------------------------ |
| **새 페이지 만들기** | 새로운 모바일 페이지 제작을 바로 시작해요 |
| **내 페이지 전체** | 지금까지 만든 모든 페이지 목록으로 이동해요 |
**\[새 페이지 만들기]** 카드를 클릭하면 **"페이지 주제 선택"** 모달이 나타나요. 빈 페이지로 바로 시작하거나, 초대·예약 / 홍보·카탈로그 / 프로필·명함 / 소식·매거진 / 가이드·신청 중 목적에 맞는 카테고리의 템플릿을 바로 탐색할 수 있어요. 자세한 내용은 [템플릿으로 새 페이지 만들기](/start/template)를 참고하세요.
## 2. 상단 내비게이션
화면 우측 상단에는 두 가지 메뉴가 있어요.
* **CdBd 소식**: 최신 업데이트와 공지 사항을 확인할 수 있어요.
* **문의하기**: 사용 중 궁금한 점이 생기면 바로 문의를 남길 수 있어요.
> 💡 **활용 팁**: 매일 CdBd를 열면 자동으로 홈 화면이 나타나요. 작업 중이던 페이지는 \[이어서 작업하기] 버튼으로 바로 이동할 수 있어 시간을 절약할 수 있어요. 크레딧이 부족하다면 홈에서 즉시 충전하고 작업을 이어가세요.
# 내 주소
Source: https://cdbd.mintlify.app/features/my-address
# 내 주소
**내 주소**는 내가 만든 모든 페이지의 공개 URL에 공통으로 들어가는 **계정 단위 경로**예요. 내 계정의 **배포 정보** 영역에서 확인하고 변경할 수 있어요.
![내 주소 영역]()
## CdBd 공개 URL 구조
CdBd로 게시한 페이지의 공개 URL은 다음 두 단계로 구성돼요.
```
https://cdbd.in/{내 주소}/{내 페이지 URL}
└────────┬────────┘ └─────────┬─────────┘
계정당 1개 (이 문서) 페이지별 1개 ([URL 생성](/editor/publish))
```
| 구분 | 위치 | 단위 | 변경 비용 |
| ------------- | ----------------- | --------------------- | ---------------------------------------------- |
| **내 주소** | URL의 앞부분 (prefix) | 계정당 1개 — 내 모든 페이지가 공유 | **50 C** |
| **내 페이지 URL** | URL의 뒷부분 (suffix) | 페이지당 1개 — 각 페이지마다 다름 | **50 C** ([URL 생성 및 게시하기](/editor/publish) 참고) |
예를 들어 내 주소가 `myshop`이고, 페이지 URL이 `summer-sale`이면 공개 URL은 `https://cdbd.in/myshop/summer-sale`이 돼요. 두 항목은 **서로 다른 설정**이며, **각각 변경 시 50 크레딧이 차감**돼요.
***
## 1. 내 주소의 특징
### 1.1 계정당 하나만 설정할 수 있어요
내 주소는 **계정당 하나만** 가질 수 있어요. 여러 페이지를 운영하더라도 모두 동일한 내 주소를 기반으로 게시돼요.
### 1.2 이미 사용 중인 주소는 사용할 수 없어요
내 주소는 **CdBd 전체에서 유일(unique)** 해야 해요. 다른 CdBd 이용자가 이미 사용하고 있는 주소는 내가 사용할 수 없어요.
* 원하는 주소가 이미 사용 중이라면, 변경 시 에러가 표시돼요.
* 가능하면 **브랜드명·서비스명**처럼 본인을 특정할 수 있는 단어로 일찍 선점해 두는 것을 추천해요.
### 1.3 변경 시 50 크레딧이 차감돼요
내 주소를 변경할 때마다 **50 크레딧(C)** 이 차감돼요. 신중하게 결정한 뒤 변경해 주세요.
* 크레딧이 부족하면 변경할 수 없어요. 먼저 [충전하기](/features/account)로 크레딧을 충전해 주세요.
* 변경 시점에 즉시 차감되며, 이후 동일한 주소로 되돌리는 경우에도 다시 50 크레딧이 차감돼요.
* **내 페이지 URL 변경(50 C)과는 별개 항목이에요.** 내 주소를 바꾸면서 페이지 URL도 함께 바꾸면 각 50 C씩 총 100 C가 차감돼요. 자세한 요금은 [요금제](/start/pricing) §6을 참고해 주세요.
***
## 2. 내 주소 변경하기
1. **내 계정 → 배포 정보 → 내 주소** 영역으로 이동해요.
2. 우측의 **\[변경하기]** 링크를 클릭해요.
3. 새 주소를 입력하고 **저장**을 눌러요.
4. 50 크레딧 차감 안내를 확인한 뒤 변경을 확정해요.
변경이 완료되면 새 주소가 즉시 적용돼요.
***
## 3. 변경 시 주의사항
내 주소를 변경하면 **기존 주소로의 접근이 차단**돼요. 다음 경우라면 변경에 특히 신중해야 해요.
* 이미 고객·지인에게 **기존 링크를 공유**한 경우
* 명함, 인쇄물, SNS 프로필 등에 **QR 코드 또는 URL을 기재**한 경우
* 검색엔진(구글, 네이버 등)에 **기존 주소가 색인**되어 있는 경우
> 💡 **활용 팁**: 가능하면 운영 초반에 사용할 주소를 정해 선점하고, 가급적 변경하지 않는 것이 비용·고객 경험 모두에서 유리해요.
# 내 페이지
Source: https://cdbd.mintlify.app/features/my-pages
# 내 페이지
내 페이지는 지금까지 만든 모든 모바일 페이지를 한 곳에서 모아 보고 관리하는 공간이에요. 페이지 수정, 복제, 삭제, URL 공유, 통계 확인까지 필요한 작업을 이 화면에서 바로 시작할 수 있어요.
![내 페이지 목록 화면]()
## 1. 화면 구성
### 1.1 좌측 사이드바
| 메뉴 | 설명 |
| ------------- | ----------------------- |
| **내가 만든 페이지** | 내 계정으로 직접 만든 페이지 목록이에요 |
| **저장한 페이지** | 다른 사람의 페이지를 저장해 둔 목록이에요 |
### 1.2 페이지 유형 필터
페이지 목록 상단에는 **전체 / 원페이지 / 멀티페이지** 탭이 있어요. 원하는 탭을 선택하면 해당 유형의 페이지만 모아볼 수 있어요.
### 1.3 새 페이지 만들기
우측 상단의 **\[+ 새 페이지]** 버튼을 누르면 새 모바일 페이지 제작을 바로 시작할 수 있어요. 클릭하면 **페이지 주제 선택** 모달이 열려요 — 빈 페이지로 시작하거나 목적에 맞는 템플릿 카테고리를 바로 탐색할 수 있어요.
## 2. 페이지 카드
각 페이지는 카드 형태로 표시돼요. 카드에서 확인할 수 있는 정보는 다음과 같아요.
| 항목 | 설명 |
| ----------- | --------------------------------------- |
| **썸네일** | 페이지의 첫 화면 미리보기 이미지예요 |
| **FREE 배지** | 평생 무료로 유지되는 페이지에 표시돼요. 이 페이지는 삭제할 수 없어요 |
| **제목** | 에디터에서 설정한 페이지 이름이에요 |
| **마지막 수정일** | 가장 최근에 저장된 날짜와 시간이에요 |
### URL 게시 상태 (무료 페이지 예시)
무료 페이지의 경우 카드 하단에 URL 게시 상태가 표시돼요.
* **URL 게시 중**: URL이 활성화된 상태로 방문자가 페이지에 접근할 수 있어요. QR 아이콘을 눌러 QR 코드를 확인하고 공유할 수 있어요.
* **URL 게시 중지**: URL이 비활성화된 상태예요. **\[재개하기]** 버튼을 눌러 이전 주소 그대로 다시 활성화할 수 있어요.
## 3. 페이지 수정 및 관리
### 3.1 수정하기
![페이지 카드 호버 상태]()
카드 위에 마우스를 올리면 **\[수정하기]** 버튼이 나타나요. 클릭하면 해당 페이지의 에디터로 바로 이동해요.
### 3.2 추가 옵션 메뉴 (⋯)
카드 우측 상단의 **⋯ 버튼**을 클릭하면 추가 관리 메뉴가 열려요.
![⋯ 추가 옵션 메뉴]()
| 메뉴 항목 | 설명 |
| ------------------------------------------- | ------------------------------------------------ |
| **복제하기** | 기존 페이지와 동일한 새 페이지를 생성해요. 비슷한 페이지를 여러 개 만들 때 유용해요 |
| **삭제하기** | 페이지를 영구적으로 삭제해요. 단, 평생 무료(FREE) 페이지는 삭제할 수 없어요 |
| **[복사본 공유하기](/features/share-copy)** | 페이지의 편집 가능한 복사본을 다른 CdBd 계정 사용자에게 공유할 수 있어요 |
| **[데이터 관리하기](/data/management)** | 고객별 이름·포인트·혜택 등 개인화 데이터를 입력하고 개별 URL을 생성할 수 있어요 |
| **[권한 관리하기](/features/permissions)** | 페이지를 함께 편집할 수 있는 팀원을 초대하고 권한별로 관리해요 |
| **[버전 히스토리 보기](/features/version-history)** | 페이지의 저장 이력을 시각·작성자별로 확인하고 이전 버전으로 복구해요 |
## 4. QR 코드 공유
카드 하단의 \*\*QR 아이콘(■■)\*\*을 클릭하면 페이지 URL에 해당하는 QR 코드를 확인하고 다운로드하거나 공유할 수 있어요. 명함, 현수막, 메뉴판 등 오프라인 인쇄물에 바로 활용하기 좋아요.
> 💡 **활용 팁**: 시즌별로 반복 사용하는 페이지(예: 행사 초대장, 프로모션 페이지)는 **복제하기**로 기존 디자인을 그대로 유지하면서 내용만 바꿔 쓰면 새로 만드는 시간을 크게 절약할 수 있어요.
# 권한 관리
Source: https://cdbd.mintlify.app/features/permissions
# 권한 관리
권한 관리는 내가 만든 페이지를 **다른 팀원과 함께 작업**할 수 있도록 편집 권한을 부여하는 기능이에요. 페이지 편집, 데이터 관리, 통계 확인 등 세부 권한을 팀원별로 선택해 초대할 수 있어요.
![권한 관리 빈 상태]()
***
## 1. 권한 관리 진입하기
[내 페이지](/features/my-pages)에서 함께 작업할 페이지의 카드 위에 마우스를 올리면 우측 상단에 **⋯ 버튼**이 나타나요. 이 버튼을 클릭하면 추가 옵션 메뉴가 열리며, **\[권한 관리하기]** 항목을 선택해 진입할 수 있어요.
![⋯ 메뉴의 권한 관리하기]()
***
## 2. 권한 관리를 사용하기 위한 조건
권한 관리는 아무 페이지에서나 바로 사용할 수 있는 메뉴가 아니에요. 아래 두 조건을 모두 충족해야 활성화돼요.
### 2.1 URL이 생성된 페이지여야 해요
URL을 생성하지 않은 페이지에서 권한 관리를 시도하면 아래와 같은 안내가 표시돼요.
![URL 생성이 필요한 페이지 안내]()
> **URL 생성 시 이용 가능합니다**\
> 권한 관리는 URL 생성 시 이용 가능한 메뉴입니다. URL을 생성하고 페이지를 함께 작업할 팀원을 초대해 보세요.
**\[URL 생성하러 가기]** 버튼을 클릭하면 [URL 생성 및 게시하기](/editor/publish) 화면으로 이동해 바로 URL을 만들 수 있어요.
### 2.2 평생 무료(FREE) 페이지는 권한 관리가 불가능해요
평생 무료(FREE) URL을 사용 중인 페이지는 권한을 관리할 수 없어요. **복제하기**로 새 페이지를 만들고 그 페이지에 URL을 생성한 후 권한을 관리해야 해요.
![FREE 페이지 권한 관리 제한 안내]()
> **권한 관리가 제한된 페이지**\
> 평생 무료 URL을 사용 중인 페이지에는 권한을 관리할 수 없습니다. 페이지 디자인은 유지하면서 권한을 관리하려면 이 페이지를 복제해 주세요.
***
## 3. 권한 관리 화면 살펴보기
### 3.1 상단 영역
![상단 영역]()
상단 영역에는 페이지 제목과 함께 다음 정보가 표시돼요.
| 항목 | 설명 |
| -------------------- | ----------------------------------------- |
| **페이지 제목 · 권한 관리하기** | 현재 권한을 관리하고 있는 페이지의 제목이에요 |
| **URL 생성일** | 페이지 URL이 처음 생성된 날짜와 시간이에요 |
| **URL 만료일** | URL 이용 기간이 끝나는 날짜와 남은 일수예요 |
| **알림 설정** | 초대한 팀원의 활동 알림을 설정해요. 팀원이 1명 이상 있을 때 활성화돼요 |
| **← 뒤로 가기** | 좌측 상단의 화살표 버튼으로 내 페이지 화면으로 돌아갈 수 있어요 |
### 3.2 본문 영역
본문에는 현재 초대된 편집자 목록이 표시돼요. 아직 초대한 팀원이 없으면 안내 메시지와 **\[팀원 초대]** 버튼이 가운데 표시돼요.
***
## 4. 팀원 초대하기
**\[팀원 초대]** 버튼을 클릭하면 초대 모달이 열려요.
![팀원 초대 모달]()
### 4.1 CdBd 계정 추가
| 항목 | 설명 |
| ------------ | ----------------------------------------- |
| **이메일 입력란** | 초대할 팀원의 CdBd 가입 이메일을 입력해요 |
| **\[추가] 버튼** | 입력한 이메일을 초대 목록에 담아요. 여러 명을 한 번에 초대할 수 있어요 |
| **`N명 추가됨`** | 현재까지 추가한 인원 수가 실시간으로 표시돼요 |
> ⚠️ 초대할 팀원은 **CdBd 가입 계정의 이메일**이어야 해요. 가입하지 않은 이메일은 초대할 수 없어요.
![이메일 입력 상태]()
### 4.2 권한 선택하기
초대 모달 하단에서 팀원에게 부여할 권한을 토글로 선택할 수 있어요. 각 권한의 단가는 **팀원 1자리당 월 100크레딧** 기준이며, 실제 차감은 *URL 만료일까지 남은 개월 수만큼 한 번에* 이뤄져요.
| 권한 | 설명 | 변경 이력 | 단가 |
| ---------- | ------------------------- | ---------------------------------------- | -------------- |
| **페이지 편집** | 페이지를 수정하거나 복제해서 사용할 수 있어요 | [버전 히스토리](/features/version-history)에 기록 | 100크레딧/월 (자리당) |
| **데이터 관리** | 데이터를 편집 및 다운로드할 수 있어요 | [버전 히스토리](/features/version-history)에 기록 | 100크레딧/월 (자리당) |
| **통계 확인** | 통계 데이터를 확인 및 다운로드할 수 있어요 | 히스토리 대상 아님 (읽기 전용) | 100크레딧/월 (자리당) |
세 권한 모두 기본값은 **켜짐**이에요. 필요하지 않은 권한은 토글을 꺼서 비용을 줄일 수 있어요.
> 💡 **변경 이력 추적**\
> 페이지 편집·데이터 관리 권한을 부여한 팀원의 작업은 [버전 히스토리](/features/version-history)에 *시각 · 작성자(이메일/이름)* 와 함께 자동으로 기록돼요. 누가 언제 무엇을 변경했는지 확인하거나 이전 버전으로 되돌려야 할 때 사용하세요.
### 4.3 초대 완료 — 비용은 만료일까지 한 번에 선차감돼요
권한을 선택하고 **\[초대하기]** 버튼을 누르면 초대가 완료돼요. 비용은 **매월 자동 차감되는 구독 방식이 아니라, 페이지 URL이 만료되는 시점까지 남은 개월 수만큼 한 번에 선차감**돼요.
**차감 공식**
> 추가한 인원 수 × 선택한 권한 수 × 100C × **URL 만료까지 남은 개월 수**
> 💡 예시: URL 만료까지 6개월 남은 페이지에 2명을 *페이지 편집 + 데이터 관리* 권한으로 초대하면\
> → 2명 × 2권한 × 100C × 6개월 = **2,400C 즉시 차감**
### 4.4 권한은 쿼터(Quota) 방식으로 운영돼요
권한 비용은 **자리(슬롯)** 단위로 운영돼요. 한 번 비용을 지불한 자리는 URL 만료일까지 계속 살아 있고, 그 자리에 들어갈 팀원은 자유롭게 교체할 수 있어요.
* A 계정에게 페이지 편집 권한을 줬다가 더 이상 사용하지 않아 권한을 해제하면, 그 자리는 빈 슬롯으로 남아요.
* 비어 있는 슬롯에 **다른 계정을 추가하면 추가 비용이 발생하지 않아요.**
* 즉, 같은 권한 자리 안에서는 사람을 자유롭게 바꿔 쓸 수 있는 구조예요.
***
## 5. 초대받은 팀원의 화면
팀원이 초대를 받으면 본인의 **내 페이지** 좌측 사이드바에 **`초대받은 페이지`** 메뉴가 새로 표시돼요. 이 메뉴에서 자신이 협업 중인 페이지 목록을 확인하고, 부여받은 권한 범위 안에서 페이지를 편집·관리할 수 있어요.
![초대받은 페이지 사이드바]()
***
## 6. 변경 이력은 어떻게 추적하나요?
여러 명이 같은 페이지를 작업하다 보면 *누가·언제·무엇을* 변경했는지 추적해야 할 일이 생겨요. CdBd는 이를 위해 **[버전 히스토리](/features/version-history)** 기능을 기본으로 제공해요.
* 페이지를 저장(게시)할 때마다 자동으로 버전이 기록돼요.
* 각 버전에는 **저장 시각**과 **작성자(이메일·이름)** 가 함께 남아요.
* 의도치 않은 변경이 발견되면 단 한 번의 클릭으로 이전 버전으로 **복구**할 수 있어요.
* 에디터(페이지 편집)와 데이터(데이터 관리)는 *각각 독립된 히스토리*를 가져요. 통계는 변경 기록이 의미 없는 읽기 전용이라 히스토리가 제공되지 않아요.
자세한 사용법은 [버전 히스토리](/features/version-history) 가이드를 참고해 주세요.
***
## 7. 자주 묻는 질문
**Q. 권한 비용은 언제 차감되나요?**\
초대를 완료하는 시점에 **URL 만료일까지 남은 개월 수만큼 한 번에 선차감**돼요. 매월 따로 결제되는 구독 방식이 아니에요.
**Q. 초대한 팀원을 삭제하면 환불이 되나요?**\
환불은 되지 않지만 **다른 계정으로 교체할 수 있어요.** 권한 자리는 *쿼터(슬롯)* 개념이라, 한 번 결제한 자리는 URL 만료일까지 살아 있고 그 자리에 들어갈 사람을 자유롭게 바꿔 쓸 수 있어요. 빈 슬롯에 새 계정을 추가할 때 추가 비용은 발생하지 않아요.
**Q. 이미 초대한 인원보다 더 많이 초대하고 싶으면 어떻게 되나요?**\
기존에 만들어 둔 슬롯이 모두 차 있다면 **새 슬롯 1자리만큼 추가 비용**이 발생해요. 추가 비용도 마찬가지로 *URL 만료일까지 남은 개월 수 × 100C × 권한 수* 만큼 한 번에 차감돼요.
**Q. FREE 페이지에서도 권한 관리를 쓰고 싶어요.**\
평생 무료(FREE) 페이지는 권한 관리가 불가능해요. ⋯ 메뉴의 **복제하기**로 새 페이지를 만든 뒤, 그 페이지에 URL을 생성하면 권한 관리를 사용할 수 있어요.
**Q. URL 이용 기간이 만료되면 권한도 함께 사라지나요?**\
URL을 갱신하지 않으면 페이지가 비공개로 전환되고 협업도 중단돼요. **연장하기**로 URL 기간을 갱신하면 기존 권한 자리가 그대로 유지되고, 연장한 기간만큼의 권한 비용이 추가로 차감돼요.
> 💡 **활용 팁**: 권한은 *자리* 단위라서 *사람*보다 *역할*에 맞춰 슬롯을 설계하는 게 효율적이에요. 예) **운영자 자리**(페이지 편집만), **분석가 자리**(통계 확인만)를 미리 정해 두고, 담당자가 바뀌면 슬롯 안의 이메일만 교체하면 추가 비용 없이 협업을 이어갈 수 있어요.
# 복사본 공유하기
Source: https://cdbd.mintlify.app/features/share-copy
# 복사본 공유하기
복사본 공유하기는 내가 만든 페이지의 편집 가능한 복사본을 다른 CdBd 계정 사용자에게 전달하는 기능이에요. 공유받은 사람은 원본과 완전히 독립된 복사본을 자신의 계정에서 자유롭게 편집하고 활용할 수 있어요.
***
## 1. 복사본 공유하기 시작하기
내 페이지 목록(`cdbd.in/editor`)에서 공유할 페이지 카드에 마우스를 올린 뒤, 썸네일 오른쪽 상단의 **⋯ 버튼**을 클릭하면 추가 옵션 메뉴가 열려요.
![내 페이지 목록 화면]()
![⋯ 메뉴 — 복사본 공유하기 항목]()
메뉴에서 **\[복사본 공유하기]** 를 선택하세요.
***
## 2. 공유 대상 설정하기
복사본 공유하기 창이 열리면 이메일을 입력해 공유 대상을 추가할 수 있어요.
![복사본 공유하기 모달 — 이메일 입력 화면]()
| 항목 | 설명 |
| ----------- | ------------------------------------ |
| **이메일 입력란** | 공유받을 사람의 CdBd 계정 이메일을 입력해요 |
| **추가 버튼** | 입력한 이메일을 수신자 목록에 추가해요. 여러 명 추가도 가능해요 |
| **추가됨 표시** | 수신자로 추가된 인원 수가 표시돼요 |
| **공유하기 버튼** | 수신자 추가 후 활성화되며, 클릭하면 즉시 공유가 완료돼요 |
이메일을 입력하고 **\[추가]** 버튼을 클릭하세요. 여러 명에게 한 번에 공유할 경우 이메일을 하나씩 추가하면 돼요. 수신자 목록을 확인한 후 **\[공유하기]** 버튼을 클릭하면 공유가 완료돼요.
***
## 3. 공유받은 사람 입장에서
공유받은 사람은 자신의 **내 페이지 → 초대받은 페이지** 목록에서 복사본을 확인할 수 있어요.
* 복사본은 원본과 **완전히 독립**돼 있어요. 원본을 수정해도 복사본에 영향을 주지 않아요.
* 공유받은 복사본은 자신의 계정에서 자유롭게 편집·게시할 수 있어요.
> 💡 **활용 팁**: 반복적으로 사용하는 디자인 템플릿이나 팀원에게 전달할 페이지 초안을 복사본으로 공유하면 매번 처음부터 만들 필요 없이 기존 디자인을 그대로 활용할 수 있어요.
***
## 4. 주의사항
> ⚠️ **수신자는 CdBd 계정이 있어야 해요.** 계정이 없는 이메일로 공유하면 수신자가 복사본을 받을 수 없어요.
> ⚠️ **공유는 취소할 수 없어요.** 공유하기를 클릭하면 즉시 복사본이 전달되므로, 이메일 주소를 정확히 확인한 뒤 공유하세요.
> ⚠️ **원본에 영향을 주지 않아요.** 공유받은 사람이 복사본을 어떻게 수정하거나 삭제해도 원본 페이지는 그대로 유지돼요.
# 버전 히스토리
Source: https://cdbd.mintlify.app/features/version-history
# 버전 히스토리
버전 히스토리는 페이지를 저장(게시)할 때마다 그 시점의 모습을 **자동으로 기록**해 두는 기능이에요. 누가·언제·어떤 모습으로 저장했는지 확인할 수 있고, 원하는 시점으로 **언제든 되돌릴 수 있어요**. 권한 관리와는 별개의 **기본 기능**이라 모든 사용자가 자유롭게 쓸 수 있어요.
![에디터 버전 히스토리 메인 화면]()
> 💡 버전 히스토리는 **에디터**와 **데이터 관리**, 두 영역에서 각각 따로 기록돼요. *통계*는 변경 기록이 의미가 없는 읽기 전용 데이터라 히스토리가 제공되지 않아요.
***
## 1. 버전 히스토리에 진입하기
### 1.1 에디터 버전 히스토리
[내 페이지](/features/my-pages)에서 페이지 카드의 **⋯ 메뉴 > \[버전 히스토리 보기]** 를 선택하면 에디터 버전 히스토리 화면이 열려요.
### 1.2 데이터 버전 히스토리
[데이터 관리하기](/data/management) 화면 우측 상단의 **시계 모양 아이콘**을 클릭하면 데이터 버전 히스토리 화면이 열려요.
![데이터 관리 화면의 히스토리 아이콘|697]()
| 영역 | 진입 경로 | URL |
| --------------- | ------------------------- | ---------------------- |
| **에디터 버전 히스토리** | 내 페이지 > ⋯ 메뉴 > 버전 히스토리 보기 | `/editor/{id}/history` |
| **데이터 버전 히스토리** | 데이터 관리 화면 > 시계 아이콘 | `/data/{id}/history` |
***
## 2. 화면 구성
![상단 헤더]()
### 2.1 상단 영역
| 항목 | 설명 |
| -------------------- | --------------------------------------------------------- |
| **페이지 제목 · 버전 히스토리** | 현재 보고 있는 페이지의 제목이에요 |
| **URL 생성 / URL 만료** | 페이지 URL이 처음 만들어진 시점과 만료 일자예요. 만료 후에는 히스토리도 보존되지 않으니 주의하세요 |
| **← 뒤로 가기** | 좌측 화살표 버튼으로 이전 화면(내 페이지 또는 데이터 관리)으로 돌아갈 수 있어요 |
### 2.2 좌측 — 버전 목록
![버전 목록 사이드바]()
저장된 모든 버전이 **최신순**으로 나열돼요. 각 버전 카드에는 다음 정보가 표시돼요.
| 항목 | 예시 | 설명 |
| ------------ | ---------------------------------------- | ------------------------ |
| **버전 시각** | `2026.05.18 13:25` | 해당 버전이 저장된 날짜와 시간이에요 |
| **작성자** | `게시 : account@emka.group (account EMKA)` | 이 버전을 저장한 사람의 이메일과 이름이에요 |
| **\[복구] 버튼** | – | 해당 버전 상태로 페이지를 되돌려요 |
> 💡 **작성자 기록의 의미**\
> 한 페이지를 여러 명이 함께 작업할 때 *누가 어떤 시점에 변경했는지*를 정확히 알 수 있어요. 협업 중 누군가가 의도치 않은 변경을 저장했다면, 작성자와 시각을 보고 원래 버전으로 안전하게 되돌릴 수 있어요.
### 2.3 우측 — 미리보기 영역
좌측에서 선택한 버전의 **그 당시 모습**이 그대로 표시돼요.
* **에디터 버전 히스토리**: 페이지 디자인이 모바일 프리뷰 형태로 보여요.
* **데이터 버전 히스토리**: 그 시점의 데이터 셋이 표 형태(구분 · 대체어 · 데이터 그룹1\~5)로 보여요.
![데이터 버전 히스토리 화면 예시]()
위 예시는 좌측에서 *과거 버전*을 선택했을 때의 모습이에요. 선택된 버전 카드에는 파란 외곽선이 표시되고, 카드 우측에 검은색 **\[복구]** 버튼이 활성화돼요. 우측에는 그 시점에 저장돼 있던 데이터 테이블이 한눈에 펼쳐져요.
> 💡 **현재 버전과 과거 버전의 차이**\
> 가장 최신(현재) 버전이 선택돼 있을 때는 **\[복구] 버튼이 비활성화**돼요. 이미 현재 상태와 같기 때문이에요. 과거 버전을 선택해야만 복구 버튼이 활성화되며, 우측에는 그 버전 시점의 데이터/디자인이 표시돼요.
***
## 3. 이전 버전으로 복원하기
### 3.1 복원 절차
1. 좌측 목록에서 되돌리고 싶은 버전을 선택해요.
2. 우측 미리보기로 그 시점의 모습을 확인해요.
3. 버전 카드의 **\[복구]** 버튼을 클릭하면 확인 다이얼로그가 열려요.
에디터·데이터 영역 모두 **같은 형식의 확인 다이얼로그**가 열려요. 제목만 영역에 따라 *에디터 버전 복구하기* / *데이터 버전 복구하기* 로 달라지고, 안내 메시지와 버튼 구성은 동일해요.
![버전 복구 확인 다이얼로그]()
> **선택한 버전으로 복구하려면 현재 해당 페이지를 편집 중인 다른 탭을 닫고 작업 중인 팀원이 없는지 확인해 주세요.**
4. **\[복구하기]** 를 누르면 페이지가 선택한 버전으로 되돌아가요. 복구한 시점도 새로운 히스토리 항목으로 기록되니, 잘못 복구했더라도 다시 이전 버전으로 되돌릴 수 있어요.
### 3.2 협업 시 꼭 확인해 주세요
여러 사람이 같은 페이지를 편집할 수 있는 경우(권한 관리로 팀원이 초대된 상태) 복원 직전에 다음을 점검하세요.
* 본인이 다른 탭에서 같은 페이지를 열어 두지 않았는지
* 다른 팀원이 해당 페이지를 편집 중인지
복구 작업이 동시에 진행되면 작업 내용이 덮어써져 충돌이 날 수 있어요. 협업 중인 페이지라면 복구 전에 팀원에게 미리 알리는 것이 안전해요.
***
## 4. 권한 관리와의 관계
버전 히스토리는 **누구나 사용할 수 있는 기본 기능**이에요. [권한 관리](/features/permissions)로 팀원을 초대하지 않은 1인 사용자도 자기 페이지의 히스토리를 자유롭게 확인하고 복원할 수 있어요.
권한 관리와 함께 사용할 때는 다음과 같이 활용도가 높아져요.
| 권한 | 히스토리에서 확인할 수 있는 변경 내용 |
| ---------- | ---------------------------------- |
| **페이지 편집** | 에디터 버전 히스토리에 저장 시각 · 작성자가 기록돼요 |
| **데이터 관리** | 데이터 버전 히스토리에 데이터 변경 시각 · 작성자가 기록돼요 |
| **통계 확인** | 히스토리 대상이 아니에요 (읽기 전용 데이터) |
> 💡 **활용 팁**: 권한 관리로 팀원을 초대했다면, 정기적으로 버전 히스토리를 확인해 변경 흐름을 점검해 보세요. 작성자별로 어떤 시점에 어떤 변경이 있었는지 한눈에 추적할 수 있고, 만일 의도치 않은 수정이 발견되면 단 한 번의 클릭으로 안전하게 되돌릴 수 있어요.
***
## 5. 자주 묻는 질문
**Q. 히스토리는 몇 개까지 저장되나요?**\
URL 이용 기간 동안 발생한 모든 저장 시점이 보존돼요. 별도의 개수 제한은 없어요.
**Q. URL이 만료되면 히스토리도 사라지나요?**\
URL이 만료되어 페이지가 비공개로 전환되면 히스토리도 함께 비활성화돼요. 중요한 버전이 있다면 만료 전에 URL을 *연장*해 두세요.
**Q. 권한이 없는 일반 방문자도 히스토리를 볼 수 있나요?**\
아니에요. 히스토리는 페이지 소유자와, 권한 관리로 초대받은 팀원만 확인할 수 있어요. 외부에 공유된 URL을 통해 들어온 일반 방문자에게는 노출되지 않아요.
**Q. 히스토리 자체를 삭제할 수 있나요?**\
개별 버전을 임의로 삭제하는 기능은 제공되지 않아요. 페이지 자체를 삭제하면 모든 히스토리도 함께 영구 삭제돼요.
# CdBd 소개
Source: https://cdbd.mintlify.app/intro
# CdBd 소개
CdBd는 코딩 없이 모바일 페이지를 만드는 카드 빌더예요. 카드를 쌓듯이 내용을 구성하고, 링크 하나로 누구에게나 공유할 수 있어요.
![에디터 화면 — 카드 구성 예시]()
***
## 카드로 페이지를 만들어요
페이지는 **카드**의 조합으로 완성돼요. 각 카드는 독립된 콘텐츠 블록으로, 원하는 카드를 추가하고 순서를 바꾸는 것만으로 페이지 구성이 끝나요.
| 카드 | 설명 | 가이드 |
| ---------- | -------------------------------------------- | ----------------------------- |
| **메뉴** | 페이지 상단에 탭 네비게이션 추가 | [→](/editor/card-menu) |
| **프로필** | 프로필 이미지·이름·소개를 다양한 레이아웃으로 표시 | [→](/editor/card-profile) |
| **텍스트** | 소개 문구, 공지 등 글 콘텐츠를 자유로운 서체·색상으로 작성 | [→](/editor/card-text) |
| **이미지** | 사진·배너를 비율 조절과 URL 연결 옵션과 함께 삽입 | [→](/editor/card-image) |
| **갤러리** | 최대 15장 사진을 나열·슬라이드·바둑판 방식으로 전시 | [→](/editor/card-gallery) |
| **유튜브** | 유튜브 영상을 페이지에 바로 삽입 | [→](/editor/card-youtube) |
| **버튼** | 구매·예약·채널 이동 등 명확한 행동 유도 버튼 추가 | [→](/editor/card-button) |
| **질문과 답변** | 설문·피드백·퀴즈 형태로 방문자 의견 수집 | [→](/editor/card-qna) |
| **예약** | 날짜·시간 선택형 예약 신청 + QR 코드로 방문 체크까지 | [→](/editor/card-reservation) |
| **상품** | 외부 상품 페이지 주소만 붙이면 이미지·상품명·가격이 자동으로 채워지는 카탈로그 | [→](/editor/card-product) |
| **위치 안내** | 구글맵·네이버맵으로 오시는 길 안내 | [→](/editor/card-map) |
| **SNS** | 인스타·유튜브·카카오톡 등 소셜 채널 한곳에 모아 표시 | [→](/editor/card-sns) |
| **구분선** | 섹션 사이에 여백·라인으로 시각적 구분 추가 | [→](/editor/card-divider) |
| **2단 카드** | 텍스트·이미지·버튼을 좌우로 나란히 배치 | [→](/editor/card-2col) |
| **코드** | HTML·CSS·JS 직접 삽입으로 커스텀 요소 추가 | [→](/editor/card-code) |
***
## 디자인도 쉽게 꾸밀 수 있어요
카드 내용을 채우기 전에 페이지 전체의 분위기를 먼저 설정할 수 있어요. **페이지 테마**에서 배경색, 서체, 버튼 모양을 한 번에 지정하면 통일감 있는 디자인이 완성돼요.
![페이지 테마 — 색상·서체 설정]()
> 💡 카드별로도 배경색·테두리·내부 여백 등을 개별 조정할 수 있어요. 자세한 내용은 [카드 디자인 가이드](/editor/card-design)를 참고하세요.
***
## 이렇게 활용해요
인스타·유튜브 프로필에 링크 하나로 내 모든 채널과 최신 소식을 연결해요.
이벤트·신제품·한정 할인을 빠르게 만들어 카카오톡·문자로 바로 공유해요.
프로필 카드에 연락처·SNS를 담아 만남 뒤 스마트하게 내 정보를 전달해요.
***
## 만들고 → 공유하고 → 분석해요
| 단계 | 기능 | 가이드 |
| ----------- | ------------------------ | --------------------------- |
| **1. 만들기** | 에디터에서 카드를 추가하고 내용을 채워요 | [에디터 사용법](/editor/overview) |
| **2. 공유하기** | URL·QR 코드를 생성해 어디서든 공유해요 | [URL 생성](/editor/publish) |
| **3. 분석하기** | 방문자 수·링크 클릭수·유입 경로를 확인해요 | [통계](/editor/stats) |
***
## 지금 바로 시작하세요
계정 없이도 에디터를 바로 열어볼 수 있어요.
가입하면 페이지를 저장하고 URL로 공유할 수 있어요.
궁금한 점이나 기능 제안이 있으면 [help@cdbd.in](mailto:help@cdbd.in)으로 알려주세요.
# 5분 만에 모바일 명함 만들기
Source: https://cdbd.mintlify.app/recipes/mobile-business-card
# 5분 만에 모바일 명함 만들기
> **한 줄 요약** — 5분이면 단순 링크 모음이 아닌, 방문자가 그 자리에서 연락처를 저장하고 미팅까지 예약할 수 있는 모바일 명함이 손에 들어와요.
## 이번에 함께 만들 명함
오늘 우리는 **프리랜서 디자이너 이민서 님**의 모바일 명함을 만들어 볼 거예요.
이민서 님은 브랜드 아이덴티티와 패키지 디자인을 하는 1인 프리랜서예요. 새 클라이언트에게 자기소개를 보낼 때, **카카오톡 한 통으로 모든 정보를 전달**하고, 거기서 **바로 1:1 상담까지 예약**받을 수 있는 페이지가 필요해요. 종이 명함이나 일반 링크 모음으로는 부족한 일이죠.
5분 후 이민서 님이 받게 될 페이지는 위에서 아래로 이런 흐름이에요:
* **맨 위** — 이민서 님의 사진과 이름, `브랜드 · 패키지 디자이너` 한 줄 소개
* **그 아래** — 큼지막한 **연락처 저장하기** 버튼
* **이어서** — **1:1 디자인 상담** 예약 카드 (날짜·시간 골라 바로 예약)
* **페이지 끝** — 인스타그램·카카오톡 채널 아이콘
회원님도 자기 정보로 함께 따라하시면, 같은 5분 안에 본인의 명함 페이지를 받게 됩니다.
## 종이 명함과 무엇이 다른가요
종이 명함은 "내 정보를 전달"하는 것에서 끝나요. 일반 링크 모음 페이지는 거기에 SNS 링크만 더해줘요. **CdBd 명함은 한 페이지 안에서 다음을 모두 끝냅니다.**
* 방문자가 **한 번 눌러 회원님의 연락처를 폰에 저장**
* 같은 페이지에서 **날짜·시간을 골라 미팅 예약** (SMS 본인 인증 + 자동 문자 알림)
* **누가 내 명함을 몇 번 봤는지** 통계 화면에서 확인
* 필요하면 명함 옆에 **포트폴리오·가격·예약 페이지**를 더해 한 링크로 묶기 (판매하는 상품이 있다면 [상품 카드](/editor/card-product)로 카탈로그도 한 번에 진열 가능)
## 준비물
이민서 님은 시작 전에 다음을 준비했어요. 회원님도 같은 항목을 본인 기준으로 챙겨두면 따라하기가 한결 수월해요.
| 항목 | 이민서 님의 예시 |
| --------- | -------------------------------------------------- |
| 사진 1장 | 작업실에서 찍은 정사각형 인물 사진 |
| 이름·한 줄 소개 | `이민서` / `브랜드 · 패키지 디자이너` |
| 연락처 | 휴대폰 `010-1234-5678` · 이메일 `hello@minseodesign.com` |
| 상담 가능 시간 | 화·수·목 오후 2시·4시 (각 1명) |
| 운영 SNS | 인스타그램(작업 포트폴리오), 카카오톡 채널(문의 받음) |
예상 소요 시간: **약 5분** (사전 준비물이 모두 있다는 가정)
> 💡 **크레딧 안내** — 예약 카드는 방문자가 실제로 예약을 완료할 때 **1건당 1크레딧**이 차감돼요. 카드를 만들고 설정하는 동안에는 비용이 들지 않으니 부담 없이 따라해 보세요. 자세한 정책은 [요금제](/start/pricing)에서.
***
## 따라하기
### 1단계. 새 페이지 열기 (약 30초)
이민서 님은 CdBd에 갓 가입했어요. 가입 직후 자동으로 빈 페이지가 열려 있어요. 그 화면에서 바로 시작합니다.
기존 회원이라면 [내 페이지](/features/my-pages)에서 **\[+ 새 페이지]** → **\[빈 페이지로 시작하기]** → **\[원페이지]** 를 선택해 빈 페이지를 만들어 주세요.
> ✓ 지금 페이지에는: 아무것도 없음 (시작점)
***
### 2단계. 프로필 카드 추가하기 (약 1분 20초)
이민서 님은 페이지의 첫 인상을 자기 사진과 이름으로 잡아요. 명함에서 가장 먼저 보이는 부분이니까요.
페이지 가운데 **\[+ 카드 추가하기]** 를 누르고, 카드 목록에서 **\[프로필]** 을 선택해요.
좌측 미리보기에서 **이미지 영역**을 눌러 작업실에서 찍은 사진을 올리고, **이름** 자리에 `이민서`, **소개 글** 자리에 `브랜드 · 패키지 디자이너`를 입력해요.
오른쪽 패널의 **레이아웃**에서 **명함형**을 선택하면 사진과 텍스트가 좌우로 단정하게 배치돼요. 이미지 모서리는 **원형**으로 부드럽게.
> ✓ 지금 페이지에는: 이민서 님의 프로필 카드
> 💡 더 다양한 옵션(강조형 레이아웃, 텍스트 색·서체 등)은 [프로필 카드](/editor/card-profile) 가이드에서 다뤄요.
***
### 3단계. 연락처 저장 버튼 추가하기 (약 50초)
이민서 님은 프로필 바로 아래에 큼지막한 **연락처 저장** 버튼을 둬요. 클라이언트가 사진과 소개를 본 직후 바로 저장 행동으로 이어지게 하려고요.
**\[+ 카드 추가하기]** → **\[버튼]** 선택. 오른쪽 패널의 **연결** 옵션에서 **연락처 저장**을 골라요.
이민서 님이 채운 정보는 다음과 같아요. 회원님은 본인 정보로 채우시면 돼요.
| 항목 | 이민서 님의 입력 |
| --- | ------------------------ |
| 이름 | `이민서` |
| 휴대폰 | `010-1234-5678` |
| 회사 | `Minseo Design` |
| 직책 | `Founder · Designer` |
| 이메일 | `hello@minseodesign.com` |
좌측 미리보기에서 버튼 위 글자를 직접 눌러 라벨을 **연락처 저장하기**로 바꿔요. 모양은 기본 둥근 모서리, 색은 페이지 톤과 어울리는 짙은 색을 골랐어요.
> ⚠️ **모바일에서만 동작** — 연락처 저장 버튼은 모바일 스마트폰에서만 동작해요. 발행 후 휴대폰에서 한 번 더 확인해 주세요.
> ✓ 지금 페이지에는: 프로필 카드 + 연락처 저장 버튼
> 💡 버튼 디자인(모양·색·크기·이미지 합성) 옵션은 [버튼 카드](/editor/card-button)에서 다뤄요.
***
### 4단계. 예약 카드로 미팅 받기 (약 1분 30초) ⭐ CdBd만의 한 수
이게 이민서 님의 명함이 종이 명함이나 Linktree·Litlink와 결정적으로 갈리는 지점이에요. **클라이언트가 페이지를 떠나지 않고 그 자리에서 1:1 상담을 예약**할 수 있어요.
#### 4-1. 예약 카드 추가하기
**\[+ 카드 추가하기]** → **\[예약]** 카드를 선택해요. 오른쪽 패널에 **\[예약 정보 관리]** 버튼이 보여요. 이 버튼을 한번 눌러 설정 창을 엽니다.
#### 4-2. 기본 정보 입력하기
설정 창이 열리면 왼쪽의 **기본 정보** 섹션을 채워요.
![예약 정보 관리 — 왼쪽 기본 정보, 오른쪽 예약 옵션]()
이민서 님이 채운 내용:
| 항목 | 이민서 님의 입력 |
| ------- | ----------------------- |
| 제목 | `1:1 디자인 상담` |
| 장소 | `온라인 미팅 (Zoom 링크 안내드림)` |
| 호스트 이름 | `이민서` |
| 호스트 연락처 | `010-1234-5678` |
> ⚠️ **호스트 정보는 그대로 노출돼요** — 입력한 호스트 이름과 연락처는 예약자가 보는 예약 완료 화면과 자동 발송되는 문자에 그대로 표시돼요. 가명·임시 번호 대신 실제 안내 가능한 정보를 넣어주세요.
#### 4-3. 가능한 날짜·시간 등록하기
설정 창 오른쪽의 **\[+ 옵션 추가]** 버튼을 눌러 예약을 받을 수 있는 일정을 만들어요.
![예약 옵션 추가 — 날짜·시간·인원 입력 폼]()
이민서 님은 이번 주 상담 가능한 시간을 이렇게 등록했어요:
| 날짜 | 시간 | 인원 |
| --- | ----- | -- |
| 화요일 | 14:00 | 1 |
| 화요일 | 16:00 | 1 |
| 수요일 | 14:00 | 1 |
| 목요일 | 16:00 | 1 |
옵션을 모두 추가했다면 **반드시** 설정 창 우측 상단의 **\[변경사항 저장하기]** 를 눌러주세요. 이 버튼을 누르지 않으면 입력한 내용이 카드에 적용되지 않아요.
#### 4-4. 방문자가 보게 될 흐름
발행 후 클라이언트가 **\[예약하기]** 를 누르면 다음 4단계로 진행돼요.
| 순서 | 클라이언트 화면 | 일어나는 일 |
| -- | -------------------- | --------------------------------- |
| 1 | 이름·휴대폰 입력 → SMS 인증번호 | **본인 인증** |
| 2 | 캘린더에서 날짜 선택 | 이민서 님이 등록한 날짜만 활성화 |
| 3 | 시간·인원 선택 | 인원 다 찬 시간대는 회색 |
| 4 | 예약 완료 화면 + 자동 알림 발송 | 클라이언트에게는 **문자**, 이민서 님에게는 **이메일** |
> ✓ 지금 페이지에는: 프로필 + 연락처 저장 + 예약 카드 (= 핵심 차별점 완성)
> 💡 예약 카드의 모든 옵션·통계 화면은 [예약 카드](/editor/card-reservation)에서 다뤄요.
***
### 5단계. SNS 카드 추가하기 (약 50초)
이민서 님은 운영 중인 인스타그램(작업 포트폴리오)과 카카오톡 채널(문의 받음) **두 곳만** 보여줘요. 너무 많지 않은 게 오히려 깔끔해요.
**\[+ 카드 추가하기]** → **\[SNS]** 카드를 선택해요.
오른쪽 패널에 6개 채널(홈페이지·인스타그램·카카오톡·유튜브·틱톡·X)이 보여요. **사용하는 채널만 토글을 ON**으로 켜고, 각 칸에 URL을 붙여넣어 주세요. 이민서 님의 입력:
| 채널 | URL |
| ----- | ----------------------------- |
| 인스타그램 | `instagram.com/minseo.design` |
| 카카오톡 | `pf.kakao.com/_minseo` |
URL을 넣을 때 자주 하는 실수를 피해 주세요:
| 채널 | 올바른 형식 | 흔한 실수 |
| --------- | -------------------------- | ----------------------------------- |
| **인스타그램** | `instagram.com/내아이디` (프로필) | `/p/...` (게시물) 또는 `/reel/...` |
| **카카오톡** | `pf.kakao.com/_채널아이디` | 개인 카톡 ID, 오픈채팅 링크 |
| **X** | `x.com/내아이디` | `twitter.com/...` (자동 연결되지만 도메인 변경) |
| **틱톡** | `tiktok.com/@내아이디` | 게시물 단일 URL |
채널 왼쪽의 점 8개 핸들을 드래그하면 아이콘 순서를 바꿀 수 있어요. 이민서 님은 작업 포트폴리오를 먼저 보여주려고 **인스타그램을 왼쪽**으로 두었어요.
> ✓ 지금 페이지에는: 4개 카드 모두 (완성 직전)
***
### 6단계. 미리보기로 점검하고 발행하기 (약 30초)
상단의 **\[미리보기]** 로 실제 모바일에서 어떻게 보일지 확인해요. 이민서 님이 점검한 것들:
* 정사각형 사진이 잘 들어갔는지
* 이름·소개가 한눈에 들어오는지
* 연락처 저장 버튼이 충분히 큰지
* 예약 카드의 **\[예약하기]** 버튼이 눈에 띄는지
* SNS 아이콘 순서 (인스타 → 카톡)
이상이 없다면 **\[URL 생성하기]** 를 눌러 페이지를 발행해요. 이민서 님은 페이지 주소를 `minseodesign`으로 정했어요. `https://cdbd.in/이민서계정/minseodesign` 같은 링크가 만들어져요.
이제 이 링크를 카톡 한 통으로 클라이언트에게 보내면, 클라이언트는 휴대폰에서 페이지를 열어 보고 → 한 번 눌러 이민서 님 연락처 저장 → 그 자리에서 미팅 시간 예약까지 끝내요.
> ⚠️ **예약 카드는 발행 후부터 동작해요** — 미리보기에서는 예약 흐름이 시작되지 않아요. 발행 후 본인 휴대폰에서 한 번 예약 흐름을 시험해 보고, 문자 알림이 오는지 확인하시면 안전해요.
> ✓ 지금 페이지에는: 완성된 모바일 명함 (공유 가능)
> 💡 발행과 공유 흐름은 [공유하기](/features/share-copy)에서 더 자세히 다뤄요.
***
## 다 됐어요!
축하해요. 이민서 님(과 회원님)은 5분 만에 모바일 명함 페이지를 완성했어요. 이제 카톡 한 통이면:
* 클라이언트가 한 번 눌러 **이민서 님의 연락처를 폰에 저장**
* 같은 페이지에서 **상담 일정을 직접 예약** (SMS 본인 인증 + 자동 알림)
* 작업 포트폴리오는 **인스타그램으로 자연스럽게 연결**
* 그리고 이민서 님은 통계 화면에서 **누가 몇 번 봤는지** 확인
종이 명함이라면 명함을 보낸 다음 따로 전화하고 일정 조율하고 카톡으로 작업 자료 찾아 보내고... 가 필요했을 일들이, 이 한 페이지에서 다 끝났어요.
***
## 더 잘 만들고 싶다면 — CdBd에서만 가능한 확장
기본 5분을 마쳤다면, CdBd만의 차별 기능으로 명함을 한 단계 더 끌어올릴 수 있어요. 모두 이 페이지에 카드 하나만 더 얹으면 됩니다.
* 📋 **방문자 의견·신청 받기** — [질문과 답변 카드](/editor/card-qna)로 "어떤 디자인 작업에 관심이 있으세요?" 같은 객관식·주관식 질문을 받으면 **통계 화면에서 응답 분포가 그래프로 정리**되고, 엑셀 다운로드까지 가능해요.
* 🖼 **포트폴리오 한눈에** — [갤러리 카드](/editor/card-gallery)로 작업 이미지를 슬라이드로 넣으면 명함이 작품집까지 됩니다.
* 🎥 **1분 자기소개 영상** — [유튜브 카드](/editor/card-youtube)로 자기소개 영상을 임베드해 페이지가 살아 움직여요.
* 📍 **사무실 위치 안내** — [지도 카드](/editor/card-map)로 방문자가 길찾기까지 한 페이지에서 끝낼 수 있어요.
* 📊 **누가 내 명함을 봤지?** — [통계](/data/url-stats)에서 페이지뷰·카드별 클릭 수·예약 접수 내역·Q\&A 응답까지 모두 추적 가능. 종이 명함은 모를 일이에요.
* 🎨 **브랜드 톤으로 통일** — [페이지 테마](/editor/page-theme)에서 배경색·서체를 회원님의 브랜드에 맞춰 일관된 톤으로 다듬어요.
* 📚 **명함 + 포트폴리오 + 가격을 한 링크에** — [멀티페이지](/editor/multipage/overview)로 여러 페이지를 하나의 공유 링크 아래 묶을 수 있어요.
***
## 함께 보면 좋은 가이드
* [프로필 카드](/editor/card-profile) · [버튼 카드](/editor/card-button) · [예약 카드](/editor/card-reservation) · [SNS 카드](/editor/card-sns)
* [공유하기](/features/share-copy) — 발행과 공유 링크 관리
* [통계 — 예약 현황·페이지뷰](/data/url-stats) — 명함에 들어온 예약·방문 추적
* [요금제](/start/pricing) — 예약 카드 크레딧 정책
# 전문가 도움 서비스
Source: https://cdbd.mintlify.app/services/expert-help
# 전문가 도움 서비스
기획이 막막하거나, 디자인에 자신이 없거나, 바빠서 시간이 없다면 — **직접 만들지 않아도 돼요.**
CdBd 전문가가 원하는 페이지를 대신 만들어 드려요.
> 📩 **[지금 바로 상담 신청하기 →](https://forms.gle/ifaGqYrQkNbL48cS7)**
>
> 폼을 작성해 주시면 영업일 기준 1일 이내로 연락드려요.
***
## 이런 분께 추천해요
* 페이지를 만들고 싶은데 **어디서부터 시작해야 할지 모르겠다**
* 직접 만들어 봤지만 **완성도가 아쉽다**
* 디자인 감각이 없어서 **전문가 손길이 필요하다**
* 바빠서 **페이지 제작에 시간을 쏟기 어렵다**
* 행사, 이벤트, 제품 출시 등 **빠른 시간 안에 완성도 높은 페이지**가 필요하다
***
## 도움받을 수 있는 항목
### 🎨 디자인 도움
레이아웃 구성, 색상 조합, 이미지 배치, 전체적인 시각적 완성도를 전문가가 직접 작업해 드려요.
브랜드 분위기에 맞는 페이지로 제작되며, 2가지 시안 중 마음에 드는 방향을 선택할 수 있어요.
### 📋 기획 도움
페이지의 목적과 타겟 방문자에 맞게 **어떤 내용을**, **어떤 순서로**, **어떻게 전달할지** 기획해 드려요.
콘텐츠 구조 설계부터 카드 구성 제안까지 포함해요.
### 🚀 기획 + 디자인 통합 서비스
기획과 디자인을 한 번에 맡기고 싶다면 통합 서비스를 이용해 보세요.
기획 확정 → 디자인 제작 순서로 진행하며, 처음부터 끝까지 전담 케어해 드려요.
***
## 서비스 진행 과정
### 디자인 도움 진행 순서
1. **상담 신청** — 폼 작성 후 담당자 연락
2. **자료 전달 및 결제** — 브랜드 자료·참고 이미지·요청 사항 전달
3. **시안 제공** — 디자인 초안 전달 (시안 수는 견적에 따라 달라요. 아래 [디자인 도움 요금](#디자인-도움-요금) 참고)
4. **수정 진행** — 시안을 기준으로 색상·문구·이미지·여백을 다듬어요
5. **최종 납품** — CdBd 에디터에 완성된 페이지로 등록
### 기획 도움 진행 순서
1. **상담 신청** — 폼 작성 후 담당자 연락
2. **자료 전달 및 결제** — 서비스·행사 정보, 타겟 고객 자료 전달
3. **기획 초안 전달** — 페이지 구성과 콘텐츠 방향 제안서 전달
4. **수정 및 확정** — 피드백 반영 후 최종 기획 확정
5. **최종 납품** — 확정된 기획을 바탕으로 CdBd 페이지에 구현
> 💡 기획 + 디자인 통합 서비스는 기획 완료 후 디자인을 이어서 진행해요.
***
## 디자인 도움 요금
### 페이지 단위 계산
디자인 도움은 **페이지 단위**로 요금이 계산돼요. 한 페이지는 **휴대폰 화면에 꽉 차는 세로 1:2 비율의 한 화면**을 기준으로 해요.
예를 들어 행사 초대장이라면 "메인 비주얼 한 화면 / 일시·장소 한 화면 / 참석 응답 한 화면" 처럼 손가락으로 스크롤하며 보게 되는 화면 한 컷이 1페이지예요.
### 페이지당 요금
| 항목 | 요금 |
| ------------- | --------------------: |
| 디자인 도움 — 페이지당 | **110,000원** (VAT 별도) |
> 💡 페이지 수는 상담 시 요청 내용을 함께 보며 확정해요. 카피·이미지가 많거나 그래픽 디테일이 복잡할수록 페이지 수가 늘어날 수 있어요.
### 시안 제공 기준
| 디자인 비용 (VAT 별도) | 시안 제공 수 |
| --------------- | :--------------: |
| 50만원 이하 | 1시안 |
| 50만원 초과 | 2시안 (그 중 1가지 선택) |
### 수정 범위
**수정 횟수에는 제한이 없어요.** 시안을 받으신 뒤 색상·문구·이미지·여백·배치 등은 마음에 드실 때까지 다듬어 드려요.
다만 **최초 요청 내용에서 벗어나는 변경은 별도 비용이 발생**해요.
| 무상 수정 (범위 내) | 추가 비용 발생 (범위 외) |
| ------------ | --------------- |
| 색상·폰트·여백 조정 | 페이지 수 추가 |
| 이미지·아이콘 교체 | 디자인 컨셉·톤 전면 변경 |
| 문구 다듬기 | 신규 콘텐츠 블록 추가 |
| 카드 배치 순서 변경 | 다른 행사·서비스로 재활용 |
### 작업 기간
결제와 자료가 모두 전달된 날을 시작일로 계산해요.
| 분량 | 작업 기간 |
| ------- | ----------------- |
| 1\~3페이지 | 7영업일 |
| 4\~6페이지 | 10영업일 |
| 7페이지 이상 | 14영업일 (분량에 따라 조정) |
### 환불 정책
| 단계 | 환불 |
| --------------- | --------- |
| 결제 후 시안 작업 시작 전 | **전액 환불** |
| 시안 작업 시작 후 | **환불 불가** |
### 별도 부담 비용
디자인 비용에는 아래 항목이 포함되지 않아요.
* **CdBd 페이지 이용 요금** — 제작된 페이지를 공개·운영하기 위한 크레딧 (자세한 내용은 [유료 결제](/start/pricing) 참고)
* **기능 사용료** — 참석여부 확인, QR 체크인 등 별도 운영이 필요한 기능
***
## 납품 방식
완성된 결과물은 고객 계정의 **CdBd 에디터에 바로 반영**돼요.
이후에는 직접 텍스트, 이미지, 링크를 수정할 수 있어요. 결과물에 대한 소유권은 고객에게 있어요.
***
## 자주 묻는 질문
**Q. 어느 정도 구체적인 내용이 있어야 신청할 수 있나요?**
아이디어 단계여도 괜찮아요. 상담 시 방향을 함께 잡아드려요.
**Q. 수정 횟수에 제한이 있나요?**
수정 횟수에는 제한이 없어요. 다만 최초 요청 내용에서 벗어나는 변경은 별도 비용이 발생해요. 자세한 기준은 위 [수정 범위](#수정-범위)를 참고해 주세요.
**Q. 이미 만들어 놓은 페이지를 개선해 달라고 할 수 있나요?**
네, 기존 페이지를 토대로 수정·보완하는 방식도 가능해요. 상담 신청 시 말씀해 주세요.
**Q. 페이지 수는 어떻게 정해지나요?**
요청하시는 콘텐츠와 디자인 디테일을 함께 보며 상담 단계에서 함께 정해요. 휴대폰 세로 1:2 비율 한 화면이 1페이지 기준이에요.
**Q. 비용은 얼마인가요?**
페이지당 110,000원(VAT 별도)이에요. 최종 비용은 페이지 수에 따라 결정돼요.
***
## 지금 바로 신청하기
**무엇이든 요청해도 괜찮아요.** 기획·디자인·전체 제작 — 어떤 부분이 필요한지 폼에 적어주시면 전문가가 맞춤으로 답변드려요.
> 📩 **[상담 신청 폼 바로가기 →](https://forms.gle/ifaGqYrQkNbL48cS7)**
# 가입 없이 시작하기
Source: https://cdbd.mintlify.app/start/no-signup
# 가입 없이 시작하기
회원가입 없이도 CdBd 에디터를 바로 체험할 수 있어요. 어떤 서비스인지 먼저 경험해 보고 싶다면 지금 바로 시작해 보세요.
***
## 1. 시작하는 방법
### 1단계 — 가입 페이지로 이동
[cdbd.in](https://cdbd.in) 에 접속하면 로그인 화면이 나타나요. 화면 하단의 **"아직 가입 전 이신가요? 지금 가입하기"** 를 클릭하세요.
![로그인 화면]()
### 2단계 — 가입 없이 바로 시작하기
가입 페이지 하단의 **\[가입 없이 바로 시작하기]** 버튼을 클릭하세요. 계정을 만들지 않고 에디터로 바로 진입할 수 있어요.
![가입 페이지 — 가입 없이 바로 시작하기 버튼]()
### 3단계 — 에디터 체험
버튼을 클릭하면 즉시 에디터 화면으로 이동하고, 페이지 테마 설정 화면이 나타나요. 색상과 서체를 선택한 뒤 자유롭게 카드를 추가하고 꾸며보세요.
![가입 없이 진입한 에디터]()
***
## 2. 비로그인 상태에서의 제한 사항
빠르게 체험할 수 있는 장점이 있지만, 아래 기능은 로그인 후에만 사용할 수 있어요.
| 기능 | 비로그인 | 로그인 |
| ----------- | :--: | :-: |
| 카드 추가 및 편집 | ✅ | ✅ |
| 페이지 저장 | ❌ | ✅ |
| URL 생성 및 공유 | ❌ | ✅ |
| 페이지 미리보기 | ❌ | ✅ |
| 통계 확인 | ❌ | ✅ |
> ⚠️ 비로그인 상태에서 만든 페이지는 브라우저를 닫으면 저장되지 않아요. 만든 페이지를 보존하려면 반드시 회원가입 후 저장하세요.
***
## 3. 더 많은 기능을 원한다면
만든 페이지를 저장하고 나만의 주소로 공유하고 싶다면 [회원가입](/start/signup)을 추천해요. 가입하면 CdBd의 모든 기능을 제한 없이 사용할 수 있어요.
# 유료 결제
Source: https://cdbd.mintlify.app/start/pricing
# 유료 결제
CdBd는 기본 기능을 무료로 사용할 수 있어요. 더 많은 페이지를 만들거나 특별한 기능이 필요할 때 크레딧을 충전해 이용할 수 있어요.
***
## 1. 첫 페이지는 평생 무료
가입 후 처음 만드는 페이지 한 개는 기간 제한 없이 무료로 운영할 수 있어요.
> 💡 무료 페이지는 삭제할 수 없고, 페이지 하단에 CdBd 배너가 표시돼요. 에디터의 대부분 기능은 무료 페이지에서도 동일하게 사용할 수 있어요.
***
## 2. 크레딧과 포인트
유료 기능을 이용하려면 **크레딧(C)** 또는 **포인트(P)** 가 필요해요.
| 구분 | 설명 |
| ---------- | --------------------------------- |
| **크레딧(C)** | 직접 구매해서 충전하는 유료 화폐예요. 환불이 가능해요 |
| **포인트(P)** | 대량 충전 시 보너스로 지급되는 화폐예요. 환불이 불가능해요 |
* 크레딧과 포인트를 모두 보유한 경우 **포인트를 먼저 차감**하고, 소진 후 크레딧이 차감돼요.
* 1 크레딧(C) = 1 포인트(P) = 현금 **100원**이에요.
***
## 3. 크레딧 충전 금액
**\[충전하기]** 버튼을 클릭하면 충전 옵션을 선택하는 팝업이 나타나요. 부가세(VAT)는 별도로 적용돼요.
![크레딧 충전하기 팝업]()
| 크레딧 | 보너스 포인트 | 결제 금액 |
| -------- | :------: | ---------: |
| 50 C | — | 5,000원 |
| 120 C | — | 12,000원 |
| 500 C | +20 P | 50,000원 |
| 1,000 C | +100 P | 100,000원 |
| 5,000 C | +500 P | 500,000원 |
| 10,000 C | +1,000 P | 1,000,000원 |
> 💡 신용카드 결제가 어렵거나 **세금계산서 발행** 후 후불 입금을 원하는 기업 고객은 후불 결제를 신청할 수 있어요. 자세한 방법은 아래 [8. 후불 결제](#8-후불-결제-세금계산서-발행) 를 참고해 주세요.
***
## 4. 페이지 이용 요금
### 4.1 원페이지
| 이용 기간 | 요금 |
| -------- | ------: |
| 1개월 | 120 C |
| 2개월 | 200 C |
| 12개월(1년) | 1,000 C |
### 4.2 멀티페이지
| 이용 기간 | 요금 (페이지당) |
| -------- | --------: |
| 2개월 | 100 C |
| 12개월(1년) | 500 C |
### 4.3 CdBd 배너 유지 할인
페이지 하단의 CdBd 배너를 유지하면 이용 요금의 **20% 할인**이 적용돼요.
***
## 5. 개별 URL 요금
| 항목 | 요금 |
| ------------------------- | ------------: |
| 개별 URL 1개 · 30일 | 5 C |
| 기본 이용기간이 45일 미만일 때 URL 생성 | 10 C (2개월 적용) |
***
## 6. 기타 요금
| 항목 | 요금 |
| --------------------------------------------------------------- | ---: |
| [예약 카드](/editor/card-reservation) — 신규 예약 접수 시 | 7 C |
| [내 주소](/features/my-address) 변경 (URL의 `cdbd.in/{내 주소}/...` 앞부분) | 50 C |
| [내 페이지 URL](/editor/publish) 변경 (URL의 `.../{내 페이지 URL}` 뒷부분) | 50 C |
> CdBd 공개 URL은 `https://cdbd.in/{내 주소}/{내 페이지 URL}` 구조예요. **내 주소**(계정당 1개)와 **내 페이지 URL**(페이지당 1개)은 별개 설정이며, **각각 변경 시 50 C가 따로 차감**돼요. 둘 다 바꾸면 100 C가 차감돼요.
### 6.1 예약 카드 차감 안내
[예약 카드](/editor/card-reservation)는 페이지 이용 요금과 별개로, **방문자가 예약을 완료할 때마다 1건당 7 C가 종량 차감**되는 카드예요.
* **차감 시점** — 카드를 추가하거나 옵션을 설정하는 동안에는 크레딧이 들지 않아요. **방문자가 실제로 예약을 완료한 1건당 7 C가 차감**돼요.
* **포함 기능** — 7 C에는 예약 접수뿐 아니라, 현장 도착 시 사용하는 **방문 체크(QR 스캔) 기능**까지 포함돼요.
* **선행 조건** — 예약 카드는 **페이지 URL을 발행한 뒤부터** 동작해요. 발행 전에는 **\[예약하기]** 버튼을 눌러도 예약 흐름이 시작되지 않아 차감도 발생하지 않아요.
> ⚠️ **취소해도 차감된 크레딧은 환불되지 않아요** — 방문자가 예약을 완료한 시점에 7 C가 차감되며, 이후 방문자나 제작자가 해당 예약을 취소하더라도 **이미 차감된 7 C는 돌려받을 수 없어요.** 테스트 예약도 동일하게 차감되니, 발행 전에 옵션·문구를 충분히 검토한 뒤 URL을 공개해 주세요.
> 💡 카드 추가·예약 옵션 설정·방문 체크 사용법은 [예약 카드](/editor/card-reservation) 문서를 참고해 주세요.
***
## 7. 결제 수단 및 환불
* **결제 수단**: 신용카드 결제를 지원해요.
* **기업 고객**: 신용카드 결제가 어렵거나 세금계산서 발행이 필요하면 **후불 결제**(아래 8번)를 이용해 주세요.
* **환불 정책**: 자세한 내용은 CdBd 웹사이트의 **[유료 서비스 이용약관](https://cdbd.in)** 과 **환불 정책** 페이지를 확인해 주세요.
***
## 8. 후불 결제 (세금계산서 발행)
신용카드 결제가 어렵거나 법인 결제·세금계산서가 필요한 경우, **사업자등록증을 업로드해 충전을 신청**하고 **세금계산서 발행 후 입금**하는 방식으로 크레딧을 충전할 수 있어요.
### 8.1 신청 방법
크레딧 충전 팝업 하단의 **"세금계산서 발행 후 충전을 원하시나요?"** 를 클릭하면 충전 신청 화면이 나타나요.
![크레딧 충전 신청하기 화면]()
신청 화면에서 다음 두 가지를 입력해요.
* **사업자등록증 첨부**: 10MB 이하의 PDF 또는 이미지 파일을 업로드해요.
* **충전 옵션 선택**: 원하는 크레딧 금액을 선택해요. (`1,000 C 이상 충전`을 선택하면 더 큰 금액도 신청할 수 있어요)
### 8.2 처리 절차
| 단계 | 내용 |
| --------------- | ----------------------------------------- |
| **1. 충전 신청** | 사업자등록증을 첨부하고 충전 옵션을 선택해 신청해요. |
| **2. 안내 메일 수신** | 신청이 접수되면 **세금계산서와 입금 계좌 정보**를 이메일로 안내드려요. |
| **3. 충전 완료** | **입금이 확인되면 크레딧이 충전**되고, 완료 안내 메일이 발송돼요. |
> 💡 **이미 충전이 완료된 건은 세금계산서 발행이 불가해요.** 세금계산서가 필요하다면 신용카드로 충전하지 말고 반드시 이 후불 결제로 신청해 주세요.
# 회원 가입하기
Source: https://cdbd.mintlify.app/start/signup
# 회원 가입하기
만든 페이지를 저장하고, 나만의 주소로 공유하고, 통계까지 확인하려면 회원가입이 필요해요. 구글 계정으로 클릭 몇 번이면 바로 시작할 수 있어요.
***
## 1. 회원가입 혜택
가입하면 CdBd의 모든 기능을 제한 없이 활용할 수 있어요.
| 기능 | 설명 |
| --------------- | --------------------------------------- |
| **페이지 저장** | 만든 페이지를 안전하게 저장하고 언제든 다시 수정할 수 있어요 |
| **URL 생성 및 공유** | 페이지에 고유 주소를 만들어 링크나 QR로 공유할 수 있어요 |
| **페이지 미리보기** | URL 생성 전에 내 작업물이 실제로 어떻게 보이는지 확인할 수 있어요 |
| **통계 확인** | 방문자 수, 클릭수, 링크별 반응을 분석할 수 있어요 |
| **평생 무료 페이지** | 첫 번째 페이지는 기간 제한 없이 무료로 운영할 수 있어요 |
***
## 2. 가입 방법
[cdbd.in](https://cdbd.in) 에 접속해 **"지금 가입하기"** 를 클릭하면 가입 화면으로 이동해요.
![가입 화면]()
### 2.1 Google 계정으로 간편 가입
가장 빠른 방법이에요. **\[Google 계정으로 가입하기]** 를 클릭하고 평소 사용하는 구글 계정을 선택하면 별도 정보 입력 없이 바로 완료돼요.
### 2.2 Apple 계정으로 간편 가입
iPhone이나 Mac을 주로 사용한다면 **\[Apple 계정으로 가입하기]** 를 선택하세요. Apple ID로 바로 가입할 수 있어요.
### 2.3 이메일로 직접 가입
**\[이메일로 가입하기]** 를 클릭하면 이메일 주소와 비밀번호를 직접 설정하는 폼이 나타나요.
> ⚠️ 비밀번호는 **최소 9자 이상**이어야 하며, 대문자·소문자·숫자·특수 기호를 각각 한 가지 이상 포함해야 해요.
***
## 3. 가입 후 온보딩
가입이 완료되면 짧은 온보딩 질문이 나타나요. CdBd 경험을 내 상황에 맞게 최적화하기 위한 과정으로, 10초 정도면 충분해요.
***
## 4. 첫 번째 페이지는 평생 무료
가입 후 처음 만드는 페이지 한 개는 기간 제한 없이 무료로 운영할 수 있어요. 에디터의 대부분 기능은 무료 페이지에서도 동일하게 사용할 수 있어요.
> 💡 추가 페이지가 필요하거나 CdBd 배너를 제거하고 싶다면 [크레딧 충전](/start/pricing)으로 유료 기능을 이용할 수 있어요.
# 템플릿으로 새 페이지 만들기
Source: https://cdbd.mintlify.app/start/template
# 템플릿으로 새 페이지 만들기
백지에서 시작하기 막막하다면 템플릿을 활용해 보세요. 초대장, 프로모션 페이지 등 목적에 맞는 완성된 디자인을 골라 내용만 바꾸면 바로 완성돼요.
***
## 1. 새 페이지 만들기 모달 열기
[홈](/features/home) 화면에서 **\[새 페이지 만들기]** 카드를 클릭하거나, [내 페이지](/features/my-pages) 화면 우측 상단의 **\[+ 새 페이지]** 버튼을 클릭하면 **"새 페이지 만들기"** 모달이 나타나요.
모달에서 **페이지 주제**를 선택해 주세요.
![새 페이지 만들기 — 페이지 주제 선택]()
| 옵션 | 설명 |
| --------------- | ---------------------------------------------------------------- |
| **빈 페이지로 시작하기** | 아무것도 없는 빈 화면에서 카드를 자유롭게 추가해요. 원페이지 또는 멀티페이지 중 유형을 선택하는 단계로 이어져요. |
| **초대·예약** | 행사 초대장, 비공개 세미나, 예약 접수 페이지 템플릿 |
| **홍보·카탈로그** | 신제품 소개, 서비스 홍보, 디지털 카탈로그 템플릿 |
| **프로필·명함** | 개인 포트폴리오, 강사·컨설턴트 소개 페이지 템플릿 |
| **소식·매거진** | 브랜드 뉴스레터, 이벤트 소식, 정기 공지 템플릿 |
| **가이드·신청** | 사용 안내, 신청서, 설문·이벤트 참여 폼 템플릿 |
템플릿 카테고리를 선택했다면 **\[템플릿 확인하기]** 버튼을 클릭하세요.
***
## 2. 템플릿 목록 탐색
***
## 3. 템플릿 목록 탐색
선택한 카테고리의 템플릿 목록이 나타나요. 상단 탭으로 카테고리를 전환하거나 **\[전체]** 탭에서 모든 템플릿을 한눈에 볼 수 있어요. 우측 상단 **\[+ 빈 페이지로 시작하기]** 버튼을 클릭하면 템플릿 없이 바로 새 페이지를 만들 수도 있어요.
![템플릿 목록]()
***
## 4. 템플릿 상세 확인
마음에 드는 템플릿의 **\[자세히 보기]** 버튼을 클릭하면 상세 화면으로 이동해요.
![템플릿 상세 화면]()
| 영역 | 내용 |
| ----------- | --------------------------------------- |
| **좌측 설명** | 이 템플릿이 어떤 상황에 적합한지, 포함된 기능이 무엇인지 설명해요 |
| **우측 미리보기** | 스마트폰 화면을 스크롤하거나 클릭해 실제 작동 방식을 체험할 수 있어요 |
***
## 5. 템플릿 사용해 에디터 열기
마음에 드는 템플릿을 찾았다면 우측 상단의 **\[템플릿 사용하기]** 버튼을 클릭하세요. 잠시 후 에디터 화면이 열리고, 선택한 템플릿 디자인이 그대로 적용돼요.
이제 텍스트와 이미지만 내 정보로 바꾸면 페이지 완성이에요!
> 💡 **활용 팁**: 처음 CdBd를 사용한다면 템플릿으로 시작해 보세요. 카드 구성과 레이아웃을 보면서 에디터 구조를 자연스럽게 익힐 수 있어요. 비슷한 목적의 페이지를 여러 개 만들 때는 완성한 페이지를 **복제하기** 해서 내용만 바꾸면 시간을 크게 절약할 수 있어요.