> For the complete documentation index, see [llms.txt](https://cdbd.gitbook.io/guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cdbd.gitbook.io/guide/editor/basic.md).

# CdBd 에디터 살펴보기

이 가이드는 CdBd 에디터의 주요 부분들을 친절하게 설명해 드릴 거예요. 각 기능이 어떤 역할을 하는지 알면 모바일 페이지를 더 쉽고 편하게 만들 수 있답니다. 에디터를 잘 이해하고 나면 작업이 훨씬 빠르고 재미있어질 거예요!

***

## 1. 에디터 화면 전체 구성

CdBd 에디터는 크게 세 가지 중요한 공간으로 나뉘어 있어요: **위에 있는 설정 메뉴**, **왼쪽에 있는 빠른 이동 메뉴**, 그리고 **작업하고 관리하는 주 공간**이에요. 이 공간들에는 페이지를 만들 때 필요한 다양한 도구와 기능들이 준비되어 있답니다.

***

## 2. 위에 있는 설정 메뉴

에디터 화면 맨 위에 있는 이 메뉴는 페이지 전체를 관리하고, 작업 과정을 편리하게 조절하는 데 쓰여요.

* **페이지 이름 :** 이 이름은 **페이지를 공유할 때 제목란에 표시되는 정보이며**, **내가 만든 페이지 목록에서 쉽게 찾아볼 때** 사용됩니다. 페이지 내용을 잘 보여주는 이름으로 정하는 게 좋아요.

<figure><img src="/files/20HX6vLVqmaX9CpDMJVR" alt=""><figcaption></figcaption></figure>

* **되돌리기 / 다시 하기 (Undo / Redo) :** 작업하다가 혹시 실수를 해도 걱정 마세요! \*\*'되돌리기'\*\*를 누르면 이전 단계로 돌아가고, \*\*'다시 하기'\*\*를 누르면 되돌렸던 작업을 다시 되살릴 수 있답니다.

<figure><img src="/files/7POt7nr2dPUWmA0McpZz" alt=""><figcaption></figcaption></figure>

* **화면 움직임 효과 설정** : 페이지 방문자가 아래로 스크롤할 때 적용되는 특별한 움직임 효과를 설정할 수 있어요.
  * "위로"를 선택하면, 내용이 아래에서 위로 부드럽게 나타나는 효과가 적용돼요.
  * "확대"를 선택하면, 내용이 서서히 확대되면서 나타나는 효과가 적용됩니다.
  * "없음"을 선택하면, 특별한 움직임 효과 없이 기본 상태로 페이지가 표시돼요.

<figure><img src="/files/8YWOn1xa04Nb5o0Sb7Hb" alt=""><figcaption></figcaption></figure>

* **페이지 테마 설정 (버튼) :** 페이지의 **전체적인 디자인 분위기를 한 번에 바꿀 수 있는 버튼**이에요. 글꼴, 페이지 배경 그림이나 색깔, 버튼 모양과 색깔 등 **페이지 전체에 적용되는 디자인**을 여기서 골라 적용할 수 있답니다.

<figure><img src="/files/8Riy4852So7h1srsaicq" alt=""><figcaption></figcaption></figure>

* **URL정보 편집 :** 페이지 URL의 **제목, 썸네일, 미리보기 등을 수정할 수 있는 버튼**이에요. 여기서 설정하는 내용이 카톡 등 SNS로 URL을 공유했을때 나타나는 내용입니다.

<figure><img src="/files/lYfQ7VfqX71C01E3a0Ps" alt=""><figcaption></figcaption></figure>

* **미리보기 (버튼) :** 현재 만들고 있는 모바일 페이지가 **실제로 다른 사람들에게 어떻게 보이는지 새 창에서 확인**해 볼 수 있는 버튼이에요. 작업을 마무리하기 전에 꼭 눌러서 최종 모습을 점검해 보세요.

<figure><img src="/files/SLzFr2tTduUJhiK6LFv9" alt=""><figcaption></figcaption></figure>

***

## 3. 왼쪽에 있는 빠른 이동 메뉴

에디터 왼쪽에 항상 보이는 이 메뉴는 CdBd 서비스의 다른 중요한 부분들로 바로 넘어갈 수 있는 길을 알려줘요.

<figure><img src="/files/iLHCxvRz7SkOLGkKIQ1Z" alt=""><figcaption></figcaption></figure>

* **홈 :** CdBd의 첫 화면으로 돌아가요.
* **내 페이지 :** 내가 만들거나 관리하는 모든 페이지를 한눈에 볼 수 있는 곳으로 이동해요.
* **계정 설정 :** 내 정보나 비밀번호 같은 개인 설정을 바꿀 수 있어요.
* **도움말 :** CdBd를 사용하다 궁금한 점이 생기면 언제든 찾아볼 수 있는 도움말이에요.
* **로그아웃 :** CdBd 사용을 마칠 때 눌러주세요.

***

## 4. 작업하고 관리하는 주 공간: 페이지를 만들고 꾸미는 핵심 공간

이곳은 CdBd 에디터에서 여러분이 직접 페이지를 만들고 꾸미는 **가장 핵심적인 공간**이에요. 크게 세 부분으로 나뉘어 있어서, 편리하게 작업을 진행할 수 있답니다.

### **4.1 왼쪽 : 미리보기 보드**

이곳에서는 여러분이 만드는 페이지가 **실제로 다른 사람들에게 어떻게 보이는지 바로바로 확인**할 수 있어요. 스마트폰 화면처럼 보이게 되어 있어서, 내 페이지가 어떤 느낌일지 정확히 알 수 있답니다.

<figure><img src="/files/nWj2G4qXtgLOzjUq8jaJ" alt=""><figcaption></figcaption></figure>

* **내용 입력** : 텍스트를 입력하거나 이미지를 선택해요.
* **실시간 미리보기** : 페이지에 들어가는 **카드들의 순서가 어떻게 배치되어 있는지 눈으로 확인**하고, 디자인 보드에서 설정한 색상 등이 어떻게 표현되는지 바로 확인 가능해요.

### **4.2 가운데 : 카드 보드**

이곳은 페이지에 들어가는 **모든 카드들을 한눈에 보고 관리하는 곳**이에요. 필요한 카드를 추가하거나, 이미 있는 카드들을 자유롭게 다룰 수 있답니다.

<figure><img src="/files/u7fIQk2AyJKbj9fAs78Q" alt=""><figcaption></figcaption></figure>

* **새 카드 추가 :** 다양한 종류의 카드들(텍스트, 이미지, 유튜브, 링크 등) 중에서 원하는 카드를 골라 페이지에 쉽게 추가할 수 있어요.
* **카드 정렬 및 관리 :** 페이지에 있는 카드들의 순서를 바꾸거나, 복사해서 똑같은 카드를 하나 더 만들고, 필요 없는 카드는 지울 수도 있어요. 또, 잠시 안 보이게/다시 보이게 하는 기능도 있어서 페이지 구성을 유연하게 바꿀 수 있답니다.

### **4.3 오른쪽 : 디자인 보드**

이곳은 **각 카드들의 세세한 모양과 속성을 내 마음대로 꾸미는 곳**이에요. 내가 원하는 스타일로 페이지를 만들 수 있도록 다양한 설정 도구들이 모여있답니다.

<figure><img src="/files/AHCxemo3Zu5J2sPYtjfW" alt=""><figcaption></figcaption></figure>

* **카드별 세부 디자인 :** 특정 카드 하나만 따로 글꼴을 바꾸거나, 배경색을 다르게 하는 등 **각 카드의 디자인을 내 마음대로 섬세하게 조절**할 수 있어요.
* **카드 속성 설정 :** 각 카드에 필요한 내용(예: 버튼이 연결될 주소, 이미지 크기 등)을 입력하거나 변경하는 곳이에요.

***

## 5. 페이지 완성하고 공유하기

이곳은 다 만든 모바일 페이지를 다른 사람들과 나눌 수 있도록 준비하는 곳이에요.

<figure><img src="/files/h3RWPKYQZN9ajYtz9RAd" alt=""><figcaption></figcaption></figure>

* **URL 생성하기 :** 다 만든 모바일 페이지를 다른 사람들과 나눌 수 있도록 **나만의 인터넷 주소(URL)와 QR 코드를 만들어줘요.** 이 주소만 있으면 누구나 쉽게 내 페이지를 볼 수 있답니다.
* **URL 정보 바꾸기 :** 만든 인터넷 주소를 카톡이나 다른 SNS에 공유할 때 뜨는 **작은 사진(썸네일), 페이지 이름, 설명 글을 내 마음대로 바꿀 수 있어요.** 공유될 때 내 페이지가 어떻게 보일지 예쁘게 꾸밀 수 있답니다.