# 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에 공유할 때 뜨는 **작은 사진(썸네일), 페이지 이름, 설명 글을 내 마음대로 바꿀 수 있어요.** 공유될 때 내 페이지가 어떻게 보일지 예쁘게 꾸밀 수 있답니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cdbd.gitbook.io/guide/editor/basic.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.