카드 디자인

카드 디자인

한 줄 요약 — 카드 한 장씩 배경·테두리·모서리·여백을 따로 꾸며서, 강조하고 싶은 카드만 다르게 보이게 만드는 기능이에요.

이 기능이 필요한 순간

• 특정 카드 하나만 눈에 띄게 강조하고 싶을 때 (예약하기·구매하기처럼 사용자가 누르면 좋은 강조 버튼이 있는 카드 등)
• 페이지 전체 분위기와 다른 카드를 한두 장 섞고 싶을 때
• 섹션 사이에 시각적인 호흡(빈 간격)을 주고 싶을 때

💡 페이지 테마와의 차이 — 페이지 테마는 페이지 전체에 한 번에 적용되는 디자인이에요. 카드 디자인은 카드 한 장씩 따로 꾸미는 기능이에요. 전체 분위기를 통일하고 싶으면 페이지 테마를 사용해 보세요. 특정 카드만 다르게 보이게 하고 싶으면 카드 디자인을 사용해 보세요.

---

카드 디자인 패널 열기

꾸미고 싶은 카드를 선택해 보세요. 에디터 오른쪽 패널 아래쪽에 “카드 디자인” 섹션이 접힌 상태로 보여요. 헤더를 한번 누르면 펼쳐져요.

패널은 위에서부터 다섯 가지 영역으로 나뉘어 있어요.

• 배경 — 카드 안쪽 색이나 이미지
• 테두리 — 카드 둘레의 선
• 모서리 — 카드 모서리 모양
• 내부여백 — 카드 안쪽 콘텐츠와 카드 가장자리 사이 간격
• 외부여백 — 이 카드와 위·아래 카드 사이 간격

차례대로 살펴볼게요.

---

배경 설정하기

배경은 세 가지 방식으로 설정할 수 있어요.

• 미리 준비된 색상에서 고르기
• 직접 색상을 입력하기
• 배경 이미지 넣기

미리 준비된 색상에서 고르기

배경 영역 위쪽에는 미리 준비된 색상 10개가 동그라미로 배열되어 있어요. 그중 하나를 누르면 카드 배경에 바로 적용돼요. 맨 처음 체크무늬 아이콘은 배경 없음(투명) 이에요.

색상을 누르면 아래 미리보기처럼 카드 배경에 적용돼요.

직접 색상 입력하기

미리 준비된 색상 아래의 무지개 아이콘을 누르면 색상 선택 창이 열려요. 브랜드 컬러처럼 정확한 색이 필요할 때 활용해 보세요.

• Hex — #FFC0AD처럼 색을 문자와 숫자로 적는 값이에요
• R / G / B — 빨강·초록·파랑의 양을 0~255 사이로 적어요
• A — 색의 투명도예요. 100이면 완전 불투명, 0이면 완전히 비쳐요

색상 값을 모르면 위쪽 색·명도 캔버스에서 원하는 색을 직접 눌러도 돼요.

배경 이미지 넣기

무지개 아이콘 옆 이미지 아이콘을 누르면 “이미지 추가하기” 창이 열려요.

창은 세 개의 탭으로 나뉘어 있어요.

• 내 이미지 — 직접 촬영하거나 갖고 있는 이미지를 올려서 사용해요. 한 장당 최대 10MB까지 올릴 수 있어요.
• 이미지 검색 — 무료 이미지 라이브러리에서 키워드로 검색해 가져올 수 있어요.
• GIF 검색 — 짧게 움직이는 이미지(GIF)를 검색해서 적용할 수 있어요.

이미지를 고르고 오른쪽 위 “적용하기” 버튼을 누르면 카드 배경으로 들어가요.

배경 이미지 밝기 4단계 고르기

이미지를 적용하면 배경 영역에 밝기 선택 버튼이 새로 나타나요. 같은 이미지라도 분위기와 글자 가독성을 한 번에 조절할 수 있어요.

옵션	효과	어울리는 상황
원본	이미지를 그대로 보여줘요	이미지 자체가 주인공일 때
어둡게	이미지 위에 어두운 막을 덮어요	위에 밝은 글자를 올릴 때
밝게	이미지 위에 밝은 막을 덮어요	위에 어두운 글자를 올릴 때
흐리게	이미지를 부드럽게 흐려요	텍스트가 많아 배경은 분위기만 잡고 싶을 때

원본 — 이미지를 그대로 보여줘요

어둡게 — 글자를 흰색으로 올릴 때 유용해요

밝게 — 글자를 어두운 색으로 올릴 때 유용해요

흐리게 — 텍스트가 많을 때 가독성을 확보해요

---

테두리 두르기

테두리는 카드 둘레에 선을 둘러서 배경과 카드를 또렷하게 구분해 줘요. 두께와 색상을 따로 조절할 수 있어요.

• 두께 막대 — 값을 좌우로 끌어서 정하는 막대예요. 0부터 4까지 1씩 늘어나요. 0이면 테두리가 사라져 무테 상태가 돼요.
• 숫자 입력 칸 — 막대 옆 숫자 칸에 값을 직접 적어도 똑같이 적용돼요.
• 색상 원 — 오른쪽 끝의 동그란 원을 누르면 색상 선택 창이 열려요. 위 “직접 색상 입력하기”와 같은 방식(Hex·R·G·B·A)으로 색을 정해요.

테두리 색상은 이 창에서 고르고, 두께는 위쪽 막대에서 0~4 사이로 조절해요.

---

모서리 고르기

모서리는 각진과 둥근 두 가지 중에서 골라요.

각진 — 카드 모서리를 직각으로 보여줘요

둥근 — 카드 모서리를 둥글게 보여줘요

옵션	설명
각진	카드 모서리를 직각으로 보여줘요
둥근	카드 모서리를 둥글게 보여줘요

---

내부 여백 조절하기

여백은 카드 안팎의 빈 공간이에요. 내부여백은 카드 안쪽 콘텐츠와 카드 가장자리 사이의 간격이에요. 글이 답답해 보이면 내부여백을 늘려서 콘텐츠 주변에 여유 공간을 만들 수 있어요.

네 면을 한꺼번에 조절하기

내부여백은 처음 펼친 상태에서 막대 하나로 보여요. 이 막대는 카드의 상·하·좌·우 네 면을 동시에 같은 값으로 조절해요.

• 막대 범위는 0부터 40까지, 2씩 늘어나요. (0, 2, 4, 6, …, 38, 40)
• 막대를 끝까지 밀어도 40이 최대예요. 더 큰 여백은 줄 수 없어요.
• 막대 옆 숫자 입력 칸에 직접 값을 적어도 똑같이 적용돼요.

값이 0일 때 — 콘텐츠가 카드 가장자리까지 닿아요

값이 40일 때 — 콘텐츠 주변에 여유 공간이 생겨요

위·아래·왼쪽·오른쪽을 따로 조절하기

막대 오른쪽 끝의 ∨ 아이콘을 누르면 막대가 네 줄로 펼쳐져요. 상 / 하 / 좌 / 우 네 면을 각각 다른 값으로 조절할 수 있어요.

펼치면 네 면이 따로 조절돼요

각 줄도 똑같이 0부터 40까지, 2씩 늘어나요. 펼친 순간에는 직전 일괄 값이 네 줄에 그대로 복사돼 있어요. 바꾸고 싶은 면만 골라서 손대면 돼요.

예를 들면 이렇게 쓸 수 있어요.

• 본문 텍스트가 많은 카드 — 좌·우만 살짝 늘려요
• 이미지를 가득 채우고 싶은 카드 — 좌·우는 0으로 두고 상·하만 약간 띄워요
• 강조 버튼이 들어간 카드 — 상·하를 넉넉히 늘려요

💡 펼친 다음에는 따로 조절돼요 — 한번 펼치면 네 면을 따로 손대게 돼요. 다시 네 면을 똑같이 맞추고 싶으면 같은 값을 네 칸에 직접 다시 입력해 주세요.

---

외부 여백 조절하기

외부여백은 이 카드와 위·아래 카드 사이의 간격이에요. 섹션을 시각적으로 끊고 싶을 때 활용해 보세요.

위·아래를 한꺼번에 조절하기

외부여백도 처음에는 막대 하나로 보여요. 이 막대는 카드의 위·아래 간격을 동시에 같은 값으로 조절해요.

• 막대 범위는 내부여백과 똑같이 0부터 40까지, 2씩 늘어나요.
• 막대 옆 숫자 입력 칸에 직접 값을 적어도 똑같이 적용돼요.

값이 0일 때 — 위·아래 카드와 자연스럽게 이어져요

값이 40일 때 — 위·아래에 넉넉한 빈 공간이 생겨요

위와 아래를 따로 조절하기

외부여백도 오른쪽 끝의 ∨ 아이콘을 누르면 막대가 펼쳐져요. 상과 하 두 줄로 나뉘어서 위쪽 간격과 아래쪽 간격을 따로 조절할 수 있어요.

펼치면 위·아래가 따로 조절돼요

내부여백과 달리 외부여백에는 좌·우 옵션이 없어요. 카드의 가로 폭은 페이지 폭에 맞춰져 있어서, 양옆 간격은 따로 조절할 수 없게 되어 있어요.

예를 들면 이렇게 쓸 수 있어요.

• 새 섹션이 시작되는 카드 — 상만 넉넉히 늘려요
• 섹션의 마지막 카드 — 하만 늘려요
• 본문 카드 사이 — 0~4 정도로 가볍게 두면 흐름이 끊기지 않아요

---

카드 디자인을 깔끔하게 쓰는 방법

• 강조할 카드 한두 장에만 변화를 줘 보세요. 나머지는 투명 배경으로 두면 시선이 자연스럽게 모여요.
• 외부여백으로 섹션을 나눠 보세요. 페이지가 빽빽하다면 섹션 시작 카드의 외부여백 상을 늘려 보세요.
• 글자가 안 보이면 흐리게가 도움이 돼요. 배경 이미지 위에 텍스트가 많을 때 흐리게를 써 보세요.
• 페이지 테마부터 정해 보세요. 페이지 테마로 전체 분위기를 먼저 통일하면, 강조할 카드만 카드 디자인으로 손대는 흐름이 자연스러워요.

---

자주 묻는 질문

Q. 카드 디자인을 적용할 수 있는 카드 개수에 한도가 있나요? A. 따로 한도가 없어요. 페이지에 있는 모든 카드에 각각 다른 카드 디자인을 적용해도 괜찮아요.

Q. 배경 이미지는 얼마나 큰 파일까지 올릴 수 있나요? A. 한 장당 최대 10MB까지 올릴 수 있어요. 그보다 큰 파일은 다른 도구로 용량을 줄인 다음 다시 올려 주세요.

Q. 여백을 40보다 더 크게 줄 수는 없나요? A. 막대의 최댓값은 40이에요. 현재 카드 디자인 패널에서는 40보다 큰 여백을 직접 줄 수 없어요.

Q. 내부여백을 펼친 뒤 다시 한 값으로 통일하고 싶어요. A. 네 칸(또는 외부여백은 두 칸)에 같은 값을 직접 입력해 주세요. 펼친 상태에서는 자동으로 다시 묶이지 않아요.

Q. 테두리를 안 보이게 하고 싶어요. A. 테두리 두께를 0으로 두면 테두리가 사라져요. 색상은 그대로 남아 있지만 두께가 0이라 화면에는 보이지 않아요.

---

함께 보면 좋은 문서

• 페이지 테마 — 페이지 전체 분위기를 한 번에 통일하고 싶을 때
• 에디터 살펴보기 — 에디터의 기본 사용법