---
url: "/ko/emailify/design/item-spacing.md"
description: "Auto Layout의 Item Spacing 속성으로 레이어 사이 간격을 조정하고, Emailify 스페이서 요소로 세로 간격을 원하는 만큼 더 추가할 수 있어요."
---

# 이메일 디자인에 항목 간격과 스페이서 요소 추가하기

> Auto Layout의 Item Spacing 속성으로 레이어 사이 간격을 조정하고, Emailify 스페이서 요소로 세로 간격을 원하는 만큼 더 추가할 수 있어요.

## 레이어의 기본 Auto Layout 항목 간격 바꾸기 {#changing-the-default-auto-layout-item-spacing-for-your-layers}

[Video](/assets/videos/emailify/design/adding-item-spacing.mp4)

Row, Column 또는 다른 Emailify 레이아웃 레이어(Wrapper, Hero, Social 아이콘 컨테이너 등)의 **Item Spacing** 속성을 조정하면 해당 레이어 안의 하위 요소 사이 기본 간격을 정할 수 있어요.

예를 들어 Column 레이어의 항목 간격 값을 `16`으로 설정하면, 해당 Column 레이어 안의 모든 요소(예: 텍스트, 이미지, 버튼 등) 사이에 같은 간격(16픽셀)이 고르게 들어가요.

## 열에 사용자 지정 세로 스페이서 요소 추가하기 {#adding-custom-vertical-spacer-elements-to-your-columns}

[Video](/assets/videos/emailify/design/adding-spacer-elements.mp4)

기본 항목 간격을 이미 설정했지만 Column 안의 특정 레이어 사이에 세로 간격이 조금 더 필요하다면, 특별한 Emailify 스페이서 요소를 추가할 수 있어요. “Column” 레이어를 클릭하고 플러그인 하단의 Quick Add 드롭다운 메뉴에서 “Spacer” 항목을 고른 다음, **Add +** 버튼을 클릭해 Column에 스페이서 레이어를 넣으세요.

Column에 스페이서 레이어를 추가한 뒤에는 레이어 패널에서 드래그 앤 드롭으로 어느 레이어 사이에 둘지 순서를 바꿀 수 있고, Figma 레이어 속성 패널에서 레이어의 **Height**를 조정해 크기를 바꿀 수 있어요.

> **Info:** 사용자 지정 스페이서 요소 주변에도 상위 요소의 기본 Item Spacing이 적용되니, 스페이서의 Height 값을 정할 때 이 점을 고려하세요.

## 열 레이어 사이에 자동 세로 항목 간격 추가하기 {#adding-automatic-vertical-item-spacing-between-your-column-layers}

[Video](/assets/videos/emailify/design/vertical-auto-layout-split.mp4)

Column의 위쪽에 레이어 하나를, 아래쪽에 다른 레이어를 두려면 Column의 세로 Auto Layout 크기 조정을 **Fill container**로 설정하세요. 그런 다음 **Item spacing**을 **Auto**로 설정하세요. 콘텐츠 길이가 바뀌면 Figma가 남는 공간을 레이어 사이에 나눠 배치해요.

> **Tip:** **모바일용 항목 간격 값 재정의하기**. 이 방법으로 데스크톱 디자인에 위아래로 나뉜 세로 레이아웃을 만든다면, 모바일용 Item Spacing 재정의 값도 추가하는 것이 좋아요. 위 단계를 적용한 같은 “Column” 레이어를 클릭하고 **Settings** 버튼을 클릭한 다음, **Mobile Item Spacing** 토글을 켜고 원하는 숫자 값(픽셀 단위)을 입력하세요. 그러면 데스크톱의 “auto” 간격 크기와 상관없이 모바일에서는 항목 간격이 고정된 일정한 크기가 돼요.

## 텍스트 레이어 단락 사이에 사용자 지정 세로 여백 추가하기 {#adding-custom-vertical-margin-spacing-between-your-text-layer-paragraphs}

[Video](/assets/videos/emailify/design/paragraph-spacing.mp4)

Figma 텍스트 속성 패널을 열고 **Basics** 탭에서 **Paragraph spacing** 값을 조정하면 Figma 텍스트 레이어의 단락 사이 세로 간격을 바꿀 수 있어요. 이 값은 HTML 이메일을 생성할 때 해당 텍스트 레이어 콘텐츠 안의 `` 태그에 추가할 `margin-bottom` 크기를 정해요.

> **Tip:** 참고로 단락 줄을 추가로 넣었다면(예: `Enter`나 `Return`을 두 번 눌러 두 줄 띄우기), *빈* 추가 단락도 그대로 포함되고, 그 아래에도 사용자 지정 단락 간격이 `margin-bottom`으로 추가돼요. 위 영상처럼 이런 추가 단락이나 빈 단락을 지우면 텍스트의 단락 간격을 더 세밀하게 조절할 수 있어요.

> **Tip:** **Settings**를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 [설정을 일괄 적용](/ko/emailify/design/settings#apply-settings-in-bulk)할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.