에디터 살펴보기

에디터 살펴보기

에디터는 모바일 페이지를 만들고 꾸미는 작업 공간이에요. 각 영역의 역할과 기본 사용법을 알아두면 훨씬 빠르고 편하게 작업할 수 있답니다.

---

1. 에디터 화면 구성

1.1 페이지 유형 선택

새 페이지를 만들 때 가장 먼저 페이지 유형을 선택해요.

유형	설명	적합한 용도
원페이지	카드를 위아래로 쌓아 스크롤하는 방식	이벤트 초대장, 모바일 프로필, 링크 모음
멀티페이지 (BETA)	여러 페이지를 한 장씩 넘겨보는 방식	제품 카탈로그, 제안서, 룩북

1.2 화면 전체 구성

에디터는 크게 세 영역으로 나뉘어 있어요. 상단 설정 메뉴, 좌측 빠른 이동 메뉴, 그리고 실제 작업이 이루어지는 주 작업 공간이에요.

1.3 상단 설정 메뉴

페이지 전체를 관리하고 작업을 편리하게 조절하는 도구들이 모여 있어요.

• 페이지 이름: 공유 시 제목란에 표시되고, 내 페이지 목록에서 구분할 때 사용해요.
• 되돌리기 / 다시 하기: 실수해도 걱정 없어요. Undo/Redo로 언제든 이전 상태로 되돌릴 수 있어요.
• 원페이지 전용 — 스크롤 애니메이션: 방문자가 스크롤할 때 카드가 나타나는 효과를 설정해요.
• 멀티페이지 전용 — 페이지 설정: 페이지 크기, 넘김 효과, 자동 넘김 등을 설정해요.
• 페이지 테마: 전체 디자인 분위기를 한 번에 바꿀 수 있는 버튼이에요.
• 미리보기: 방문자 눈에 실제로 어떻게 보이는지 새 창에서 확인할 수 있어요.
• URL 생성 / 게시하기: 페이지를 외부에 공개하는 버튼이에요.

1.4 좌측 빠른 이동 메뉴

에디터 좌측에 항상 표시되는 메뉴로, CdBd 서비스의 주요 화면으로 빠르게 이동할 수 있어요.

홈 / 내 페이지 / 계정 설정 / 도움말 / 로그아웃

1.5 주 작업 공간

• 왼쪽 — 미리보기 보드: 만들고 있는 페이지가 실제로 어떻게 보이는지 실시간으로 확인할 수 있어요. 멀티페이지 에디터에서는 이 위치에 페이지 썸네일 패널이 표시돼요.
• 가운데 — 카드 보드: 페이지에 들어가는 모든 카드를 한눈에 보고 관리하는 공간이에요. 새 카드 추가, 순서 변경, 카드 관리가 여기서 이루어져요.
• 오른쪽 — 디자인 보드: 선택한 카드의 세부 디자인과 속성을 설정하는 공간이에요. 색상, 폰트, 여백 등을 원하는 대로 조절할 수 있어요.

---

2. 카드 추가하고 관리하기

CdBd에서 카드는 페이지를 구성하는 가장 작은 단위예요. 레고 블록처럼 카드를 자유롭게 추가하고 순서를 바꿔서 나만의 페이지를 완성할 수 있답니다.

2.1 카드 추가하기

에디터의 카드 추가하기 버튼을 클릭하면 카드 목록이 나타나요. 원하는 카드를 선택하면 페이지에 바로 추가돼요.

2.2 카드 순서 바꾸기

카드 왼쪽의 (⋮⋮) 버튼을 마우스로 누른 채 위아래로 드래그하면 순서를 변경할 수 있어요.

2.3 카드 보이기 / 숨기기

ON/OFF 토글을 클릭해서 카드를 전환할 수 있어요. 일시적으로 숨기고 싶을 때 삭제하지 않고 활용할 수 있답니다.

2.4 카드에 이름 붙이기

카드 설정에서 이름을 입력하면 방문자에게는 보이지 않지만, 여러 카드를 관리할 때 훨씬 편리해요.

2.5 카드 복사하고 삭제하기

(⋮) 버튼을 클릭해서 복제하기 또는 삭제하기를 선택할 수 있어요.

💡 팁: 카드 이름 기능을 적극 활용해 보세요. 카드가 많아질수록 이름이 있으면 원하는 카드를 빠르게 찾을 수 있어요.

---

3. 카드 디자인

카드 디자인은 각 카드의 배경, 테두리, 모서리, 여백을 개별적으로 꾸밀 수 있는 기능이에요. 페이지 전체에 적용되는 ‘페이지 테마’와 달리, 특정 카드만 강조하거나 분위기를 다르게 연출하고 싶을 때 사용해요.

카드를 선택하면 에디터 오른쪽 패널 아래쪽에 카드 디자인 섹션이 접힌 상태로 표시돼요. 헤더를 클릭하면 펼쳐져요.

3.1 배경 설정하기

배경은 프리셋 색상, 커스텀 색상, 이미지 세 가지 방식으로 설정할 수 있어요.

프리셋 색상

10가지 프리셋 색상 중 하나를 클릭하면 카드 배경에 즉시 적용돼요. 맨 처음 체크무늬 아이콘은 배경 없음(투명) 을 뜻해요.

무지개 아이콘 — 커스텀 색상

무지개 아이콘을 클릭하면 색상 코드(HEX)와 R·G·B·Alpha 값을 직접 입력할 수 있는 색상 피커가 열려요. 브랜드 컬러처럼 정확한 색상이 필요할 때 활용해 보세요.

이미지 아이콘 — 배경 이미지

이미지 아이콘을 클릭하면 직접 촬영한 사진을 업로드하거나 무료 이미지 라이브러리에서 검색해 적용할 수 있어요. GIF도 지원하며, 이미지 밝기는 원본 / 어둡게 / 밝게 세 가지 중 선택할 수 있어요.

💡 배경 이미지 위에 텍스트가 올라갈 경우, 어둡게 또는 밝게 옵션을 함께 사용하면 가독성이 높아져요.

3.2 테두리 설정하기

항목	설명
두께 슬라이더	좌우로 드래그해 테두리 두께를 조절해요. 0으로 설정하면 테두리가 사라져요
숫자 입력	슬라이더 옆 숫자 칸에 값을 직접 입력해 정확한 두께를 지정할 수 있어요
색상 원	테두리 색상을 변경할 수 있어요. 클릭하면 색상 피커가 열려요

테두리 두께가 0이면 깔끔한 무테 상태예요. 1px 이상 설정하면 카드 주위에 선이 생겨 배경과 카드가 뚜렷하게 구분돼요.

3.3 모서리 설정하기

옵션	느낌	어울리는 콘텐츠
각진	직각 처리 — 도시적이고 깔끔함	정보 전달, B2B, IT·기술
둥근	곡선 처리 — 부드럽고 친근함	라이프스타일, 뷰티, 이벤트 초대

3.4 여백 설정하기

항목	의미	활용
내부 여백	카드 테두리와 내부 콘텐츠 사이의 간격	값을 높이면 콘텐츠가 여유롭고 고급스러워 보여요
외부 여백	이 카드와 위·아래 카드 사이의 간격	섹션 구분이 필요한 카드에만 간격을 넓혀 쓸 수 있어요

슬라이더를 드래그하거나, 옆 숫자 입력 칸에 직접 값을 입력해 조절할 수 있어요. 드롭다운 화살표를 눌러 자주 쓰는 값을 빠르게 선택하는 것도 가능해요.

💡 활용 팁: 강조하고 싶은 카드(핵심 CTA 버튼, 이벤트 공지 등)에만 배경색이나 테두리를 더하고, 나머지 카드는 투명 배경으로 두면 방문자 시선이 자연스럽게 집중돼요.

---

4. 페이지 테마

페이지 테마는 전체 디자인을 한 번에 통일감 있게 바꿔주는 기능이에요. 서체, 배경색, 버튼 모양까지 — 테마 하나로 페이지의 전체적인 분위기를 완성할 수 있답니다.

4.1 테마 설정하는 방법

에디터 상단의 페이지 테마 버튼을 클릭하면 테마 목록이 나타나요. 원하는 테마를 미리보기로 확인한 뒤 적용하면 돼요.

4.2 서체 설정

기본 서체는 ‘프리텐다드’로 설정되어 있어요. 26가지 한국어 서체와 18가지 영어 서체 중에서 브랜드 분위기에 맞는 폰트를 선택해 보세요.

4.3 색상 설정

배경 색깔, 서체 색깔, 버튼 색깔을 각각 원하는 색으로 조절할 수 있어요. 단색 외에도 그라데이션, 이미지, 동적 배경(움직이는 패턴·스크롤 이미지·비디오 배경) 등 다양한 배경 스타일을 선택할 수 있답니다.

4.4 버튼 모양

원형, 각진, 둥근 중에서 원하는 버튼 모양을 선택할 수 있어요.

💡 추천 순서: 디자인 컨셉을 먼저 정한 뒤 → 테마를 먼저 적용하고 → 카드 내용을 추가한 다음 → 필요한 부분만 세부 조정하는 순서로 진행하면 훨씬 효율적이에요.