> ## Documentation Index > Fetch the complete documentation index at: https://cdbd.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 카드 디자인 # 카드 디자인 > **한 줄 요약** — 카드 한 장씩 배경·테두리·모서리·여백을 따로 꾸며서, 강조하고 싶은 카드만 다르게 보이게 만드는 기능이에요. ## 이 기능이 필요한 순간 * 특정 카드 하나만 눈에 띄게 강조하고 싶을 때 (예약하기·구매하기처럼 사용자가 누르면 좋은 강조 버튼이 있는 카드 등) * 페이지 전체 분위기와 다른 카드를 한두 장 섞고 싶을 때 * 섹션 사이에 시각적인 호흡(빈 간격)을 주고 싶을 때 > 💡 **페이지 테마와의 차이** — [페이지 테마](/editor/page-theme)는 페이지 전체에 한 번에 적용되는 디자인이에요. 카드 디자인은 **카드 한 장씩** 따로 꾸미는 기능이에요. 전체 분위기를 통일하고 싶으면 페이지 테마를 사용해 보세요. 특정 카드만 다르게 보이게 하고 싶으면 카드 디자인을 사용해 보세요. *** ## 카드 디자인 패널 열기 꾸미고 싶은 카드를 선택해 보세요. 에디터 오른쪽 패널 아래쪽에 **"카드 디자인"** 섹션이 접힌 상태로 보여요. 헤더를 한번 누르면 펼쳐져요. 카드 디자인 패널 — 배경·테두리·모서리·내부여백·외부여백 설정 패널은 위에서부터 다섯 가지 영역으로 나뉘어 있어요. * **배경** — 카드 안쪽 색이나 이미지 * **테두리** — 카드 둘레의 선 * **모서리** — 카드 모서리 모양 * **내부여백** — 카드 안쪽 콘텐츠와 카드 가장자리 사이 간격 * **외부여백** — 이 카드와 위·아래 카드 사이 간격 차례대로 살펴볼게요. *** ## 배경 설정하기 배경은 세 가지 방식으로 설정할 수 있어요. * **미리 준비된 색상**에서 고르기 * **직접 색상을 입력**하기 * **배경 이미지** 넣기 ### 미리 준비된 색상에서 고르기 배경 영역 위쪽에는 미리 준비된 색상 10개가 동그라미로 배열되어 있어요. 그중 하나를 누르면 카드 배경에 바로 적용돼요. 맨 처음 체크무늬 아이콘은 **배경 없음(투명)** 이에요. 미리 준비된 색상 10개 — 베이지·크림·연회색·연핑크·살몬·민트·라벤더·다크 틸·다크 네이비 색상을 누르면 아래 미리보기처럼 카드 배경에 적용돼요. 살몬 색상이 적용된 카드 미리보기 ### 직접 색상 입력하기 미리 준비된 색상 아래의 **무지개 아이콘**을 누르면 색상 선택 창이 열려요. 브랜드 컬러처럼 정확한 색이 필요할 때 활용해 보세요. 색상 선택 창 — Hex·R·G·B·A 직접 입력 * **Hex** — `#FFC0AD`처럼 색을 문자와 숫자로 적는 값이에요 * **R / G / B** — 빨강·초록·파랑의 양을 0\~255 사이로 적어요 * **A** — 색의 투명도예요. 100이면 완전 불투명, 0이면 완전히 비쳐요 색상 값을 모르면 위쪽 색·명도 캔버스에서 원하는 색을 직접 눌러도 돼요. ### 배경 이미지 넣기 무지개 아이콘 옆 **이미지 아이콘**을 누르면 **"이미지 추가하기"** 창이 열려요. 이미지 추가하기 창 — 내 이미지 / 이미지 검색 / GIF 검색 탭 창은 세 개의 탭으로 나뉘어 있어요. * **내 이미지** — 직접 촬영하거나 갖고 있는 이미지를 올려서 사용해요. 한 장당 **최대 10MB**까지 올릴 수 있어요. * **이미지 검색** — 무료 이미지 라이브러리에서 키워드로 검색해 가져올 수 있어요. * **GIF 검색** — 짧게 움직이는 이미지(GIF)를 검색해서 적용할 수 있어요. 이미지를 고르고 오른쪽 위 **"적용하기"** 버튼을 누르면 카드 배경으로 들어가요. #### 배경 이미지 밝기 4단계 고르기 이미지를 적용하면 배경 영역에 **밝기 선택 버튼**이 새로 나타나요. 같은 이미지라도 분위기와 글자 가독성을 한 번에 조절할 수 있어요. | 옵션 | 효과 | 어울리는 상황 | | ------- | ----------------- | ------------------------ | | **원본** | 이미지를 그대로 보여줘요 | 이미지 자체가 주인공일 때 | | **어둡게** | 이미지 위에 어두운 막을 덮어요 | 위에 밝은 글자를 올릴 때 | | **밝게** | 이미지 위에 밝은 막을 덮어요 | 위에 어두운 글자를 올릴 때 | | **흐리게** | 이미지를 부드럽게 흐려요 | 텍스트가 많아 배경은 분위기만 잡고 싶을 때 | 원본 적용 — 이미지 그대로 *원본 — 이미지를 그대로 보여줘요* 어둡게 적용 — 이미지 위에 어두운 막 *어둡게 — 글자를 흰색으로 올릴 때 유용해요* 밝게 적용 — 이미지 위에 밝은 막 *밝게 — 글자를 어두운 색으로 올릴 때 유용해요* 흐리게 적용 — 이미지가 부드럽게 흐려진 모습 *흐리게 — 텍스트가 많을 때 가독성을 확보해요* *** ## 테두리 두르기 테두리는 카드 둘레에 선을 둘러서 배경과 카드를 또렷하게 구분해 줘요. **두께**와 **색상**을 따로 조절할 수 있어요. * **두께 막대** — 값을 좌우로 끌어서 정하는 막대예요. 0부터 4까지 1씩 늘어나요. **0이면 테두리가 사라져 무테 상태**가 돼요. * **숫자 입력 칸** — 막대 옆 숫자 칸에 값을 직접 적어도 똑같이 적용돼요. * **색상 원** — 오른쪽 끝의 동그란 원을 누르면 색상 선택 창이 열려요. 위 "직접 색상 입력하기"와 같은 방식(Hex·R·G·B·A)으로 색을 정해요. 테두리 색상 선택 창 — Hex·R·G·B·A 직접 입력 *테두리 색상은 이 창에서 고르고, 두께는 위쪽 막대에서 0\~4 사이로 조절해요.* *** ## 모서리 고르기 모서리는 **각진**과 **둥근** 두 가지 중에서 골라요. 모서리 "각진" 적용 — 직각 모서리 *각진 — 카드 모서리를 직각으로 보여줘요* 모서리 "둥근" 적용 — 부드러운 곡선 모서리 *둥근 — 카드 모서리를 둥글게 보여줘요* | 옵션 | 설명 | | ------ | ----------------- | | **각진** | 카드 모서리를 직각으로 보여줘요 | | **둥근** | 카드 모서리를 둥글게 보여줘요 | *** ## 내부 여백 조절하기 여백은 카드 안팎의 빈 공간이에요. **내부여백**은 카드 안쪽 콘텐츠와 카드 가장자리 사이의 간격이에요. 글이 답답해 보이면 내부여백을 늘려서 콘텐츠 주변에 여유 공간을 만들 수 있어요. ### 네 면을 한꺼번에 조절하기 내부여백은 처음 펼친 상태에서 막대 하나로 보여요. 이 막대는 카드의 **상·하·좌·우 네 면을 동시에** 같은 값으로 조절해요. * 막대 범위는 **0부터 40까지**, 2씩 늘어나요. (0, 2, 4, 6, ..., 38, 40) * 막대를 끝까지 밀어도 **40이 최대**예요. 더 큰 여백은 줄 수 없어요. * 막대 옆 숫자 입력 칸에 직접 값을 적어도 똑같이 적용돼요. 내부여백 0 — 콘텐츠가 카드 가장자리까지 닿음 *값이 0일 때 — 콘텐츠가 카드 가장자리까지 닿아요* 내부여백 40 — 콘텐츠 주변에 여유 공간 *값이 40일 때 — 콘텐츠 주변에 여유 공간이 생겨요* ### 위·아래·왼쪽·오른쪽을 따로 조절하기 막대 오른쪽 끝의 **∨ 아이콘**을 누르면 막대가 네 줄로 펼쳐져요. **상 / 하 / 좌 / 우** 네 면을 각각 다른 값으로 조절할 수 있어요. 내부여백 펼친 모습 — 상·하·좌·우 네 개의 막대로 분리 *펼치면 네 면이 따로 조절돼요* 각 줄도 똑같이 0부터 40까지, 2씩 늘어나요. 펼친 순간에는 직전 일괄 값이 네 줄에 그대로 복사돼 있어요. 바꾸고 싶은 면만 골라서 손대면 돼요. 예를 들면 이렇게 쓸 수 있어요. * **본문 텍스트가 많은 카드** — 좌·우만 살짝 늘려요 * **이미지를 가득 채우고 싶은 카드** — 좌·우는 0으로 두고 상·하만 약간 띄워요 * **강조 버튼이 들어간 카드** — 상·하를 넉넉히 늘려요 > 💡 **펼친 다음에는 따로 조절돼요** — 한번 펼치면 네 면을 따로 손대게 돼요. 다시 네 면을 똑같이 맞추고 싶으면 같은 값을 네 칸에 직접 다시 입력해 주세요. *** ## 외부 여백 조절하기 **외부여백**은 이 카드와 위·아래 카드 사이의 간격이에요. 섹션을 시각적으로 끊고 싶을 때 활용해 보세요. ### 위·아래를 한꺼번에 조절하기 외부여백도 처음에는 막대 하나로 보여요. 이 막대는 카드의 **위·아래 간격을 동시에** 같은 값으로 조절해요. * 막대 범위는 내부여백과 똑같이 **0부터 40까지**, 2씩 늘어나요. * 막대 옆 숫자 입력 칸에 직접 값을 적어도 똑같이 적용돼요. 외부여백 0 — 위·아래 카드와 붙어 있는 모습 *값이 0일 때 — 위·아래 카드와 자연스럽게 이어져요* 외부여백 40 — 위·아래에 넓은 빈 공간 *값이 40일 때 — 위·아래에 넉넉한 빈 공간이 생겨요* ### 위와 아래를 따로 조절하기 외부여백도 오른쪽 끝의 **∨ 아이콘**을 누르면 막대가 펼쳐져요. **상**과 **하** 두 줄로 나뉘어서 위쪽 간격과 아래쪽 간격을 따로 조절할 수 있어요. 외부여백 펼친 모습 — 상·하 두 개의 막대로 분리 *펼치면 위·아래가 따로 조절돼요* 내부여백과 달리 외부여백에는 **좌·우 옵션이 없어요.** 카드의 가로 폭은 페이지 폭에 맞춰져 있어서, 양옆 간격은 따로 조절할 수 없게 되어 있어요. 예를 들면 이렇게 쓸 수 있어요. * **새 섹션이 시작되는 카드** — **상**만 넉넉히 늘려요 * **섹션의 마지막 카드** — **하**만 늘려요 * **본문 카드 사이** — 0\~4 정도로 가볍게 두면 흐름이 끊기지 않아요 *** ## 카드 디자인을 깔끔하게 쓰는 방법 * **강조할 카드 한두 장에만 변화를 줘 보세요.** 나머지는 투명 배경으로 두면 시선이 자연스럽게 모여요. * **외부여백으로 섹션을 나눠 보세요.** 페이지가 빽빽하다면 섹션 시작 카드의 외부여백 **상**을 늘려 보세요. * **글자가 안 보이면 흐리게가 도움이 돼요.** 배경 이미지 위에 텍스트가 많을 때 **흐리게**를 써 보세요. * **페이지 테마부터 정해 보세요.** [페이지 테마](/editor/page-theme)로 전체 분위기를 먼저 통일하면, 강조할 카드만 카드 디자인으로 손대는 흐름이 자연스러워요. *** ## 자주 묻는 질문 **Q. 카드 디자인을 적용할 수 있는 카드 개수에 한도가 있나요?** A. 따로 한도가 없어요. 페이지에 있는 모든 카드에 각각 다른 카드 디자인을 적용해도 괜찮아요. **Q. 배경 이미지는 얼마나 큰 파일까지 올릴 수 있나요?** A. 한 장당 최대 10MB까지 올릴 수 있어요. 그보다 큰 파일은 다른 도구로 용량을 줄인 다음 다시 올려 주세요. **Q. 여백을 40보다 더 크게 줄 수는 없나요?** A. 막대의 최댓값은 40이에요. 현재 카드 디자인 패널에서는 40보다 큰 여백을 직접 줄 수 없어요. **Q. 내부여백을 펼친 뒤 다시 한 값으로 통일하고 싶어요.** A. 네 칸(또는 외부여백은 두 칸)에 같은 값을 직접 입력해 주세요. 펼친 상태에서는 자동으로 다시 묶이지 않아요. **Q. 테두리를 안 보이게 하고 싶어요.** A. 테두리 두께를 **0**으로 두면 테두리가 사라져요. 색상은 그대로 남아 있지만 두께가 0이라 화면에는 보이지 않아요. *** ## 함께 보면 좋은 문서 * [페이지 테마](/editor/page-theme) — 페이지 전체 분위기를 한 번에 통일하고 싶을 때 * [에디터 살펴보기](/editor/overview) — 에디터의 기본 사용법