Documentation Index
Fetch the complete documentation index at: https://cdbd.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
2단 카드
2단 카드는 화면을 좌우로 나누어 두 가지 콘텐츠를 나란히 보여주는 카드예요. 텍스트·이미지·버튼을 자유롭게 조합할 수 있어서, 한 줄에 더 많은 정보를 담고 싶을 때 아주 유용하답니다.
2단 카드 종류
카드 추가 모달의 2단 카드 섹션에서 아래 6가지 조합 중 원하는 것을 선택할 수 있어요.| # | 카드 이름 | 좌측 | 우측 | 대표 활용 |
|---|---|---|---|---|
| 1 | 텍스트 + 텍스트 | 텍스트 | 텍스트 | 한/영 병기, 비교, 좌우 정보 정리 |
| 2 | 텍스트 + 이미지 | 텍스트 | 이미지 | 제품·서비스 소개, 팀원 소개 |
| 3 | 텍스트 + 버튼 | 텍스트 | 버튼 | 혜택 설명 + CTA |
| 4 | 이미지 + 이미지 | 이미지 | 이미지 | 제품 비교, 메뉴 카탈로그 |
| 5 | 이미지 + 버튼 | 이미지 | 버튼 | 상품 사진 + 구매 버튼 |
| 6 | 버튼 + 버튼 | 버튼 | 버튼 | 주요 행동 유도 2개 병렬 |
1. 텍스트 + 텍스트
- 한/영 이중 언어 — 왼쪽에 한국어, 오른쪽에 영어로 같은 내용을 나란히 표시
- 비교·대조 — 서비스 이용 전/후, 일반 방식 vs CdBd 방식처럼 두 상태를 한눈에 비교
- 정보 + 설명 — 왼쪽에 핵심 수치(예: “3초 만에 완성”)를, 오른쪽에 부연 설명을 배치
- FAQ 스타일 — 왼쪽에 질문, 오른쪽에 간결한 답변
💡 팁: 비율을 좌 40 : 우 60으로 조절하면 왼쪽에 짧은 핵심 키워드, 오른쪽에 상세 설명을 담기 좋아요.
2. 텍스트 + 이미지
- 제품·서비스 소개 — 왼쪽에 이름·특징·가격, 오른쪽에 제품 사진
- 팀원 소개 — 왼쪽에 이름·직책·한 줄 소개, 오른쪽에 프로필 사진
- 이벤트 안내 — 왼쪽에 행사명·일정·장소, 오른쪽에 포스터 이미지
- 메뉴 소개 — 왼쪽에 메뉴명·설명·가격, 오른쪽에 음식 사진
- 카드 추가 모달에서 텍스트 + 이미지 선택
- 왼쪽 텍스트 영역을 탭해 내용 입력 및 스타일 설정
- 오른쪽 이미지 영역을 탭해 이미지 업로드 또는 검색
- 비율 슬라이더로 좌우 공간 비율 조정 (기본값 1:1)
- 정렬로 이미지 세로 위치를 상·중·하 중 선택
💡 팁: 세로로 긴 프로필 사진은 비율을 텍스트 60 : 이미지 40으로 설정하면 이미지가 잘리지 않고 균형 있게 표시돼요. 가로형 대표 이미지라면 반대로 텍스트 40 : 이미지 60을 써보세요.
3. 텍스트 + 버튼
- 서비스 가입 유도 — “지금 무료로 시작하세요” 텍스트 + “무료 시작하기” 버튼
- 이벤트 참여 안내 — 이벤트 간략 설명 + “지금 신청하기” 버튼
- 혜택 강조 — “첫 방문 고객 10% 할인” 텍스트 + “할인 쿠폰 받기” 버튼
- 문의 유도 — 연락처 안내 텍스트 + “바로 문의하기” 버튼
- 카드 추가 모달에서 텍스트 + 버튼 선택
- 왼쪽 텍스트 영역에 행동 유도 메시지 입력
- 오른쪽 버튼 영역에서 버튼 텍스트 입력 및 링크 연결
- 버튼 모양·색상을 브랜드에 맞게 설정
💡 팁: 텍스트를 좌 65 : 버튼 35 비율로 설정하면 설명이 충분히 보이면서도 버튼이 옆에서 시선을 끌어요. 버튼에 배경색을 넣어 강조하면 클릭률이 올라가요.
4. 이미지 + 이미지
- 비포/애프터 비교 — 시술 전·후, 리모델링 전·후 비교 사진
- 메뉴·상품 카탈로그 — 2가지 메뉴 또는 상품을 나란히 소개
- 포트폴리오 — 작업물 2개를 나란히 배치해 작업 범위 보여주기
- 공간 소개 — 카페 실내 전경 2컷, 룸 종류 비교
- 카드 추가 모달에서 이미지 + 이미지 선택
- 왼쪽·오른쪽 이미지 영역에 각각 이미지 업로드
- 양쪽 이미지 비율(원본·1:1·가로·세로)을 통일하면 깔끔해 보여요
- 간격 슬라이더로 두 이미지 사이 여백 조정
💡 팁: 두 이미지의 비율을 1:1(정사각형) 로 통일하면 어떤 사진을 올려도 균형 잡힌 배치가 돼요. 이미지에 각각 링크를 걸면 탭 가능한 상품 카드로도 활용할 수 있어요.
5. 이미지 + 버튼
- 상품 구매 유도 — 제품 사진 + “지금 구매하기” 버튼
- 예약 연결 — 공간·서비스 사진 + “예약하기” 버튼
- 팔로우 유도 — SNS 대표 이미지 + “팔로우하기” 버튼
- 다운로드 안내 — 앱/자료 미리보기 이미지 + “다운로드” 버튼
- 카드 추가 모달에서 이미지 + 버튼 선택
- 왼쪽 이미지 영역에 대표 이미지 업로드
- 오른쪽 버튼에 행동 텍스트 입력 및 연결 설정(URL·전화·예약 등)
- 버튼 배경색을 이미지 브랜드 컬러와 맞추면 통일감이 생겨요
💡 팁: 이미지를 원형(Circle) 으로 설정하면 아이콘처럼 보여서 SNS 계정 소개에 잘 어울려요. 버튼 카드형(상단 이미지+하단 텍스트) 대신 이 조합을 쓰면 이미지 크기를 더 유연하게 조절할 수 있어요.
6. 버튼 + 버튼
- 이중 CTA — “예약하기” + “문의하기”, “지금 주문” + “메뉴 보기”
- 연락 채널 2개 — “전화하기” + “카카오톡 채널”
- SNS 2개 — “인스타그램” + “유튜브” 링크 버튼
- 다운로드 옵션 — “iOS 다운로드” + “Android 다운로드”
- 카드 추가 모달에서 버튼 + 버튼 선택
- 왼쪽·오른쪽 각 버튼에 텍스트, 링크, 디자인을 독립적으로 설정
- 두 버튼의 배경색을 서로 다르게 설정하면 주요/보조 위계가 생겨요
- 비율을 1:1 로 유지하면 대등한 선택지임을 시각적으로 전달할 수 있어요
💡 팁: 왼쪽 버튼은 브랜드 포인트 컬러, 오른쪽 버튼은 테두리만 있는 라인 스타일로 설정하면 중요한 버튼이 자연스럽게 먼저 눈에 들어와요.
공통 설정
비율 조절하기
좌우 영역의 너비 비율을 슬라이더로 자유롭게 조정할 수 있어요. 한쪽 콘텐츠가 많을 때는 해당 쪽에 더 많은 공간을 주세요.| 설정값 | 느낌 |
|---|---|
| 1:1 (기본) | 양쪽 대등, 균형 있어 보임 |
| 4:6 | 오른쪽 강조 (이미지나 버튼을 더 크게) |
| 6:4 | 왼쪽 강조 (텍스트 설명을 더 넓게) |
| 3:7 | 한쪽을 크게 강조할 때 |
간격 설정하기
좌우 영역 사이의 공백 크기를 슬라이더로 조절해요. 기본값은16이에요.
- 간격을 0으로 설정하면 두 콘텐츠가 경계 없이 붙어 보여요
- 간격을 크게 주면 두 영역이 시각적으로 분리돼 독립적인 느낌이 나요
정렬 설정하기
좌우 콘텐츠의 세로 정렬 방식을 선택해요.- 상단 정렬 — 양쪽이 위에서 함께 시작 (가장 일반적)
- 중앙 정렬 — 높이가 다를 때 가운데를 맞춰 균형 있게 보임
- 하단 정렬 — 양쪽이 아래에서 함께 끝남
🎨 카드 디자인 꾸미기
전체 카드의 배경 색상, 테두리, 모서리, 여백은 카드 디자인 섹션에서 설정해요.- 배경: 카드 전체의 배경색 또는 배경 이미지
- 테두리: 두께와 색상으로 카드 테두리 강조
- 모서리: 각진 모양 또는 둥근 모양
- 내부여백: 카드 안쪽, 콘텐츠와 카드 경계 사이의 공간
- 외부여백: 이 카드와 위아래 카드 사이의 공간