> ## 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.

# 이미지 카드

# 이미지 카드

이미지 카드는 사진이나 그림을 페이지에 추가해서 시각적인 매력을 높여주는 도구예요. 단순한 이미지 삽입을 넘어, 링크를 연결해서 방문자를 원하는 곳으로 유도하는 배너로도 활용할 수 있답니다.

<img src="https://mintcdn.com/cdbd/VAw6hWINZ2MTDd6F/_assets/images/02-card_image.png?fit=max&auto=format&n=VAw6hWINZ2MTDd6F&q=85&s=9f867b87df43cab6e6000679e059f80d" alt="이미지 카드 — 외부여백 없음(상단)과 외부여백 있음(하단) 비교" width="1440" height="900" data-path="_assets/images/02-card_image.png" />

## 1. 이미지 추가하기

페이지에 이미지 카드를 추가한 뒤, 폰 미리보기의 **이미지 업로드하기** 버튼을 누르면 **이미지 추가하기** 창이 열려요. 다음 세 가지 방법으로 이미지를 가져올 수 있어요.

* **내 이미지 (직접 업로드)**: 파일을 끌어다 놓거나 영역을 클릭해서 업로드할 수 있어요. 이미지 1장당 최대 10MB.
* **이미지 검색**: Pexels의 고품질 무료 사진을 검색해서 바로 삽입할 수 있어요.
* **GIF 검색**: Giphy의 GIF를 검색해서 움직이는 이미지로 활용할 수 있어요.

업로드한 이미지는 **내 이미지** 라이브러리에 저장돼서 다른 카드에서도 재사용할 수 있어요. 자주 쓰는 이미지는 **즐겨찾기**에 추가해두면 빠르게 찾을 수 있고, 필요 없어진 이미지는 **휴지통**에서 복원하거나 영구 삭제할 수 있어요.

## 2. 이미지 관리하기

이미지를 선택한 뒤 다음 작업을 할 수 있어요.

* **이름 설정**: 이미지마다 이름을 붙여두면 라이브러리에서 찾기 편해요.
* **변형**: 좌우 반전, 회전으로 방향 조정.
* **복사 / 다운로드 / 삭제**: 라이브러리 안에서 동일 이미지 복제, 컴퓨터로 다운로드, 휴지통으로 이동.

## 3. 🎨 이미지 디자인 꾸미기

### 3.1 비율 선택하기

업로드한 이미지의 가로세로 비율을 선택할 수 있어요.

* **원본**: 업로드한 이미지 비율 그대로 표시
* **1:1**: 정사각형
* **가로**: 가로형 (4:3 등)
* **세로**: 세로형 (3:4 등)

### 3.2 크기 조절하기

슬라이더로 카드 영역 안에서 이미지가 차지하는 크기를 조절할 수 있어요.

### 3.3 모양 변경하기

이미지의 모서리 모양을 선택해요.

* **각진 모양**: 직각 모서리
* **둥근 모양**: 라운드 모서리
* **원형 / 그 외**: 모양 옵션에서 추가 선택

### 3.4 정렬하기

이미지를 카드 안에서 **왼쪽 / 가운데 / 오른쪽** 중 원하는 위치로 정렬할 수 있어요.

## 4. 이미지에 링크 걸기

**링크 연결** 섹션에서 이미지를 탭했을 때 이동할 URL을 설정할 수 있어요. URL 열기 외에도 전화 연결, 이메일, 페이지 이동 등 다양한 연결 방식을 지원해요. 제품 페이지나 예약 링크로 연결하면 클릭 유도 효과가 뛰어난 배너로 활용할 수 있답니다.

## 5. 카드 디자인 (배경·테두리·여백)

**카드 디자인** 섹션을 펼치면 이미지 카드 자체의 시각 요소를 다듬을 수 있어요.

* **배경**: 카드 배경색·이미지 지정
* **테두리**: 두께·색상으로 카드 경계 강조
* **모서리**: 카드의 모서리 둥글기 (각진 / 둥근)
* **내부여백 (Padding)**: 카드 안쪽, 이미지와 카드 경계 사이 공간
* **외부여백 (Margin)**: 카드와 카드 사이 공간

> 💡 **외부여백 활용 팁**: 위 스크린샷처럼 첫 번째 이미지는 외부여백 `0`으로 설정하면 화면을 가득 채우는 풀-블리드(full-bleed) 표지처럼 보이고, 두 번째 이미지는 외부여백을 `24` 정도로 주면 다음 콘텐츠와 시각적으로 분리돼요. 카드 성격에 따라 자연스럽게 강·약을 만들 수 있답니다.

## 6. 레이어 추가하기

**레이어 추가** 섹션에서는 이미지 위에 텍스트, 도형, 아이콘 등을 겹쳐 배치할 수 있어요. 이벤트 포스터처럼 이미지 위에 행사명·날짜·태그를 얹을 때 유용해요.

> 💡 **활용 팁**: 이미지에 링크를 걸면 클릭 가능한 배너가 돼요. 이벤트 포스터, 제품 사진에 구매 페이지 링크를 연결해 보세요. 외부여백을 적절히 조절하면 한 페이지 안에서 시각적 리듬도 만들 수 있어요. (상품 사진 + 상품명 + 가격 + 구매 버튼을 함께 묶고 싶다면 [상품 카드](/editor/card-product)를 활용해 보세요.)

## 고객마다 다른 이미지를 보여주고 싶다면

이미지 카드에는 고객마다 서로 다른 사진을 표시할 수도 있어요. 데이터 관리하기에서 이미지를 등록한 뒤 이미지 카드에 적용하면, 개별 URL마다 그 고객의 이미지가 자동으로 표시돼요. 자세한 방법은 [개별 이미지 적용하기](/data/individual-image)를 참고해 보세요.