2단 카드
한 줄 요약 — 화면을 좌우로 나누어 두 가지 콘텐츠를 한 줄에 보여주는 카드예요. 양쪽 영역에 서로 다른 디자인과 링크를 따로 걸 수 있어서, 비교·이중 안내·이중 행동 유도에 강해요.
이 기능이 필요한 순간
- 한 줄에 두 가지 정보를 나란히 담고 싶을 때 (한/영 병기, 비포/애프터, 메뉴 비교)
- 왼쪽엔 설명, 오른쪽엔 행동 유도 버튼을 두어 방문자의 즉각적인 행동을 끌어내고 싶을 때
- 좌측 이미지·우측 이미지를 각각 다른 링크로 연결해 누를 수 있는 상품 카드처럼 쓰고 싶을 때
- 페이지 길이를 줄이면서도 시각적 위계(좌·우 비율)를 만들고 싶을 때
2단 카드 종류
카드 추가 창의 2단 카드 섹션에서 아래 6가지 조합 중 원하는 것을 선택할 수 있어요.우측 패널 살펴보기 — “레이아웃” 탭과 “디자인” 탭
2단 카드를 선택하면 에디터 오른쪽 패널 상단에 두 개의 탭이 보여요.
💡 단독 카드(텍스트/이미지/버튼 단독)와 다른 점 — 단독 카드는 탭 없이 한 화면에 모든 옵션이 펼쳐져요. 2단 카드는 양쪽을 각각 꾸며야 하니까, 헷갈리지 않도록 탭으로 나누어 두었어요.
1. 텍스트 + 텍스트
- 한/영 이중 언어 — 왼쪽에 한국어, 오른쪽에 영어로 같은 내용을 나란히 표시
- 비교·대조 — 서비스 이용 전/후, 일반 방식 vs CdBd 방식처럼 두 상태를 한눈에 비교
- 정보 + 설명 — 왼쪽에 핵심 수치(예: “3초 만에 완성”)를, 오른쪽에 부연 설명을 배치
- FAQ 스타일 — 왼쪽에 질문, 오른쪽에 간결한 답변
💡 팁: 비율을 좌 40 : 우 60으로 조절하면 왼쪽에 짧은 핵심 키워드, 오른쪽에 상세 설명을 담기 좋아요.
2. 텍스트 + 이미지
- 제품·서비스 소개 — 왼쪽에 이름·특징·가격, 오른쪽에 제품 사진
- 팀원 소개 — 왼쪽에 이름·직책·한 줄 소개, 오른쪽에 프로필 사진
- 이벤트 안내 — 왼쪽에 행사명·일정·장소, 오른쪽에 포스터 이미지
- 메뉴 소개 — 왼쪽에 메뉴명·설명·가격, 오른쪽에 음식 사진
- 카드 추가 창에서 텍스트 + 이미지 선택
- “레이아웃” 탭의 “구성”에서 왼쪽 텍스트와 오른쪽 이미지를 차례로 입력
- “디자인” 탭으로 이동해 “구성요소”에서 텍스트 선택 → 글꼴·크기·색상을 조정
- 다시 “구성요소”에서 이미지 선택 → 비율(원본·1:1·가로·세로)·크기·모양을 조정
- “레이아웃” 탭의 비율 슬라이더로 좌우 공간 비율 조정 (기본값 1:1)
- 정렬로 양쪽 영역의 세로 위치를 상·중·하 중 선택
💡 팁: 세로로 긴 프로필 사진은 비율을 텍스트 60 : 이미지 40으로 설정하면 이미지가 잘리지 않고 균형 있게 표시돼요. 가로형 대표 이미지라면 반대로 텍스트 40 : 이미지 60을 써보세요.
3. 텍스트 + 버튼
- 서비스 가입 유도 — “지금 무료로 시작하세요” 텍스트 + “무료 시작하기” 버튼
- 이벤트 참여 안내 — 이벤트 간략 설명 + “지금 신청하기” 버튼
- 혜택 강조 — “첫 방문 고객 10% 할인” 텍스트 + “할인 쿠폰 받기” 버튼
- 문의 유도 — 연락처 안내 텍스트 + “바로 문의하기” 버튼
- 카드 추가 창에서 텍스트 + 버튼 선택
- “레이아웃” 탭의 구성에서 왼쪽 텍스트에 행동 유도 메시지 입력, 오른쪽 버튼에 라벨 입력
- “디자인” 탭의 구성요소에서 버튼 선택 → 모양·색상을 브랜드에 맞게 조정 + 링크 연결에 이동할 주소 입력
- 필요하면 “구성요소”에서 텍스트도 선택해 보조 링크(예: 자세히 보기 페이지)를 함께 걸 수 있어요
💡 팁: 텍스트를 좌 65 : 버튼 35 비율로 설정하면 설명이 충분히 보이면서도 버튼이 옆에서 시선을 끌어요. 버튼에 배경색을 넣어 강조하면 더 많은 방문자가 눌러요.
4. 이미지 + 이미지
- 비포/애프터 비교 — 시술 전·후, 리모델링 전·후 비교 사진
- 메뉴·상품 카탈로그 — 2가지 메뉴 또는 상품을 나란히 소개
- 포트폴리오 — 작업물 2개를 나란히 배치해 작업 범위 보여주기
- 공간 소개 — 카페 실내 전경 2컷, 룸 종류 비교
- 카드 추가 창에서 이미지 + 이미지 선택
- “레이아웃” 탭의 구성에서 왼쪽·오른쪽 이미지 영역에 각각 이미지 업로드
- “디자인” 탭의 구성요소에서 왼쪽 이미지 선택 → 비율·모양 조정
- 다시 구성요소에서 오른쪽 이미지 선택 → 비율·모양을 왼쪽과 통일하면 깔끔해 보여요
- “레이아웃” 탭의 간격 슬라이더로 두 이미지 사이 여백 조정
- “디자인” 탭으로 이동
- 구성요소에서 첫 번째 옵션(왼쪽 이미지) 선택
- 패널 아래쪽 링크 연결 섹션에서 링크 타입을 고르고 주소 입력
- 다시 구성요소에서 두 번째 옵션(오른쪽 이미지) 선택 → 같은 방식으로 다른 URL 입력
💡 팁: 두 이미지의 비율을 1:1(정사각형) 로 통일하면 어떤 사진을 올려도 균형 잡힌 배치가 돼요. 동일 종류 조합이라 “구성요소” 선택 메뉴에 “이미지”라는 라벨이 두 번 보이는데, 위쪽 옵션이 왼쪽 이미지, 아래쪽 옵션이 오른쪽 이미지예요. 헷갈리면 한쪽을 고른 뒤 모양이나 크기를 살짝 바꿔 보면, 미리보기에서 어느 쪽 이미지가 영향을 받는지 확인할 수 있어요.
5. 이미지 + 버튼
- 상품 구매 유도 — 제품 사진 + “지금 구매하기” 버튼 (여러 상품을 한 번에 진열하고 싶다면 상품 카드가 더 편해요)
- 예약 연결 — 공간·서비스 사진 + “예약하기” 버튼
- 팔로우 유도 — SNS 대표 이미지 + “팔로우하기” 버튼
- 다운로드 안내 — 앱/자료 미리보기 이미지 + “다운로드” 버튼
- 카드 추가 창에서 이미지 + 버튼 선택
- “레이아웃” 탭의 구성에서 왼쪽 이미지를 업로드하고, 오른쪽 버튼에 라벨 입력
- “디자인” 탭의 구성요소에서 이미지 선택 → 모양·정렬 조정
- 구성요소에서 버튼 선택 → 모양·색상 조정 + 링크 연결에 구매·예약 주소 입력
- 이미지에도 별도 상세보기 링크를 걸고 싶다면, 이미지 구성요소를 선택한 상태에서 링크 연결에 주소를 추가로 입력
💡 팁: 이미지를 원형(Circle) 으로 설정하면 아이콘처럼 보여서 SNS 계정 소개에 잘 어울려요. 버튼 카드형(상단 이미지+하단 텍스트) 대신 이 조합을 쓰면 이미지 크기를 더 유연하게 조절할 수 있어요.
6. 버튼 + 버튼
- 이중 행동 유도 버튼 — “예약하기” + “문의하기”, “지금 주문” + “메뉴 보기”
- 연락 채널 2개 — “전화하기” + “카카오톡 채널”
- SNS 2개 — “인스타그램” + “유튜브” 링크 버튼
- 다운로드 옵션 — “iOS 다운로드” + “Android 다운로드”
- 카드 추가 창에서 버튼 + 버튼 선택
- “레이아웃” 탭의 구성에서 왼쪽·오른쪽 각 버튼에 라벨 입력
- “디자인” 탭의 구성요소에서 왼쪽 버튼 선택 → 모양·색상 조정 + 링크 연결에 주소 입력 (예: 예약 페이지)
- 다시 구성요소에서 오른쪽 버튼 선택 → 같은 방식으로 다른 주소 입력 (예: 문의 페이지)
- 비율을 1:1로 유지하면 대등한 선택지임을 시각적으로 전달할 수 있어요
💡 팁: “구성요소” 선택 메뉴에 “버튼”이 두 번 나타나는데, 위쪽이 왼쪽 버튼, 아래쪽이 오른쪽 버튼이에요. 헷갈리면 한쪽을 고른 뒤 색이나 모양을 살짝 바꿔 보면, 미리보기에서 어느 쪽 버튼이 영향을 받는지 확인할 수 있어요. 왼쪽 버튼은 브랜드 포인트 컬러, 오른쪽 버튼은 테두리만 있는 라인 스타일로 설정하면 중요한 버튼이 자연스럽게 먼저 눈에 들어와요.
공통 설정
아래 항목은 “레이아웃” 탭에서 한 번에 설정해요. 모든 조합에 공통으로 적용돼요.비율 조절하기
좌우 영역의 너비 비율을 슬라이더로 자유롭게 조정할 수 있어요. 한쪽 콘텐츠가 많을 때는 해당 쪽에 더 많은 공간을 주세요.간격 설정하기
좌우 영역 사이의 공백 크기를 슬라이더로 조절해요. 기본값은16이에요.
- 간격을 0으로 설정하면 두 콘텐츠가 경계 없이 붙어 보여요
- 간격을 크게 주면 두 영역이 시각적으로 분리돼 독립적인 느낌이 나요
정렬 설정하기
좌우 콘텐츠의 세로 정렬 방식을 선택해요.- 상단 정렬 — 양쪽이 위에서 함께 시작 (가장 일반적)
- 중앙 정렬 — 높이가 다를 때 가운데를 맞춰 균형 있게 보임
- 하단 정렬 — 양쪽이 아래에서 함께 끝남
카드 디자인 꾸미기
전체 카드의 배경 색상, 테두리, 모서리, 여백은 “레이아웃” 탭 아래쪽의 카드 디자인 섹션에서 설정해요.- 배경: 카드 전체의 배경색 또는 배경 이미지
- 테두리: 두께와 색상으로 카드 테두리 강조
- 모서리: 각진 모양 또는 둥근 모양
- 내부여백: 카드 안쪽, 콘텐츠와 카드 경계 사이의 공간
- 외부여백: 이 카드와 위아래 카드 사이의 공간
💡 카드 한 장 전체를 꾸미는 곳이에요. 좌·우 영역을 따로 꾸미는 “디자인” 탭의 구성요소와는 다른 곳이라는 걸 기억해 주세요.
”디자인” 탭으로 좌·우에 따로 꾸미고 링크 걸기
2단 카드의 가장 큰 장점은 양쪽 영역을 따로 디자인하고 따로 링크 걸 수 있다는 점이에요. 카드 한 장에 두 가지 행동을 담을 수 있어요.
1단계. “디자인” 탭으로 이동하기
2단 카드를 선택한 뒤 우측 패널 상단에서 “디자인” 탭을 눌러 주세요. 패널 내용이 바뀌면서 맨 위에 “구성요소” 라는 줄이 보여요.2단계. 꾸미고 싶은 영역 고르기
“구성요소” 옆의 선택 메뉴(눌렀을 때 옵션이 아래로 펼쳐지는 메뉴)를 누르면 정확히 두 개의 옵션이 펼쳐져요. 위쪽 옵션이 왼쪽 영역, 아래쪽 옵션이 오른쪽 영역이에요.
- 텍스트 + 이미지 → “텍스트” / “이미지”
- 텍스트 + 텍스트 → “텍스트” / “텍스트” (라벨이 두 번 같음)
- 이미지 + 이미지 → “이미지” / “이미지”
- 버튼 + 버튼 → “버튼” / “버튼”
- 텍스트 + 버튼 → “텍스트” / “버튼”
- 이미지 + 버튼 → “이미지” / “버튼”
💡 동일 종류 조합(예: 텍스트 + 텍스트)에서는 같은 라벨이 두 번 보여서 헷갈릴 수 있어요. 한쪽을 고른 뒤 색·크기 같은 값을 살짝 바꿔 보면, 미리보기에서 어느 쪽 영역이 영향을 받는지 확인할 수 있어요. “카드 전체”를 한 번에 고르는 옵션은 없어요 — 항상 좌·우 둘 중 하나를 골라요.
3단계. 선택한 영역의 디자인 다듬기
구성요소를 선택하면 그 아래쪽에 해당 영역의 디자인 옵션이 펼쳐져요. 예를 들어 “이미지”를 고르면 아래처럼 비율·크기·모양 같은 이미지 옵션이 나타나요.
- 텍스트를 골랐다면 — 서체·스타일·단락·정렬·줄간격
- 이미지를 골랐다면 — 비율(원본·1:1·가로·세로)·크기·모양(각진·둥근·원형·아치·구름·꽃·반짝이·마름모)·정렬
- 버튼을 골랐다면 — 모양·색상·버튼 텍스트
4단계. 선택한 영역에 링크 걸기
같은 패널 아래쪽에 “링크 연결” 섹션이 있어요. 여기서 지금 선택된 구성요소에만 적용되는 링크를 설정해요.
타입을 고른 뒤, 그 아래 입력 칸에 주소·전화번호·이메일 같은 값을 적어 주세요. URL 열기 타입에서는 그 아래에 “새 창에서 열기” 라는 켜고 끄는 스위치가 보여요. 외부 사이트를 새 탭으로 열고 싶을 때 켜 주세요.
5단계. 반대쪽 영역에도 링크 걸기 (선택)
다시 위쪽으로 올라가 “구성요소”에서 반대쪽 옵션을 선택하면, 그 영역의 디자인과 링크를 똑같이 따로 설정할 수 있어요. 아래는 반대쪽(이미지) 영역을 골랐을 때 “링크 연결” 섹션이 다시 비어 있는 모습이에요.
💡 활용 예시설정한 내용은 페이지 데이터에 자동으로 저장되고, 공유 URL을 발행해야 방문자에게 보이는 뷰어에 반영돼요.
- 메뉴 카탈로그: 왼쪽 메뉴 사진은 메뉴 A 상세 페이지, 오른쪽 메뉴 사진은 메뉴 B 상세 페이지
- 이중 연락 채널: 왼쪽 버튼은 “전화하기”(매장 전화), 오른쪽 버튼은 “URL 열기”(카카오톡 채널 링크)
- 한/영 안내: 왼쪽 텍스트는 한국어 공지 페이지, 오른쪽 텍스트는 영어 공지 페이지