# 레이아웃 여백 및 텍스트 간격 설정

## 레이아웃 여백 및 텍스트 간격 설정

이 가이드에서는 Hyperclass **이메일 빌더**의 **레이아웃 여백**과 **텍스트 간격 설정**을 사용하는 방법을 설명합니다. 이 설정들을 통해 이메일을 디자인할 때 더 많은 유연성을 얻을 수 있으며, 별도의 패딩 블록이나 커스텀 HTML 없이도 깔끔하고 일관되며 시각적으로 균형 잡힌 이메일 레이아웃을 만들 수 있습니다.

**목차**

* [이메일 빌더의 레이아웃 여백 및 텍스트 간격 설정이란?](#이메일-빌더의-레이아웃-여백-및-텍스트-간격-설정이란)
* [이메일용 여백 및 텍스트 간격 설정의 주요 장점](#이메일용-여백-및-텍스트-간격-설정의-주요-장점)
* [이메일 빌더에서 레이아웃 여백 조정하기](#이메일-빌더에서-레이아웃-여백-조정하기)
* [이메일 제목과 본문의 텍스트 간격 커스터마이징](#이메일-제목과-본문의-텍스트-간격-커스터마이징)
* [자주 묻는 질문](#자주-묻는-질문)

***

## **이메일 빌더의 레이아웃 여백 및 텍스트 간격 설정이란?**

Hyperclass 이메일 빌더에서 **레이아웃 여백**은 콘텐츠 블록 간의 공간을 제어하고, **텍스트 간격 설정**은 다양한 텍스트 요소(제목, 본문 등)의 위아래 간격을 커스터마이징할 수 있게 해줍니다. 이러한 도구를 통해 대안책에 의존하지 않고도 전문적인 모습을 위해 이메일 포맷을 세밀하게 조정할 수 있습니다.

***

### **이메일용 여백 및 텍스트 간격 설정의 주요 장점**

이 새로운 설정들은 드래그 앤 드롭 빌더 내에서 직접 더 적은 노력으로 더 보기 좋은 이메일을 만들 수 있게 해줍니다.

• 섹션, 행, 콘텐츠 블록 간의 세로 간격을 설정할 수 있습니다.

• 제목(H1–H4) 및 본문 텍스트의 위아래 간격을 제어할 수 있습니다.

• 이메일의 가독성과 전체적인 레이아웃 균형을 개선합니다.

• 이메일 캠페인과 템플릿 전반에 걸쳐 일관성을 보장합니다.

• 스페이서 요소나 커스텀 코드의 필요성을 줄입니다.

***

#### **목록 항목 간격**

적합한 요소 내의 목록 항목들 사이에 세로 간격을 추가합니다. 스캔 속도를 개선하고 긴 불릿이나 번호 목록에서 일관된 리듬을 만드는 데 사용하세요.

**찾는 위치**

페이지 빌더(Page Builder) → 리치 텍스트(Rich Text) 또는 불릿 목록(Bullet List) 선택 → 스타일(Style) 패널 → 목록 항목 간격(List Item Spacing, 줄 높이 옆에 위치)

**동작 방식**

* 항목 간 간격에만 영향을 줍니다. 항목 내의 줄 높이는 변경하지 않습니다.
* 지원되는 요소에서 생성된 불릿 및 번호 목록에서 작동합니다.

![목록 항목 간격 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155064272351/original/LQPIZss80iD8qLf6FbLGOxfswKf9nf9CmA.png?1770299376)

**목록 항목 간격 vs. 줄 높이**

의도하지 않은 레이아웃 변경을 피하기 위해 작업에 맞는 올바른 컨트롤을 선택하세요.

* **목록 항목 간격:** 목록 항목 간의 간격을 조정합니다.
* 줄 높이: 같은 항목이나 단락 내의 줄들 간의 세로 간격을 제어합니다.
* 함께 사용: 밀도가 높은 텍스트에는 줄 높이를 높이고, 항목을 구분하기 위해 목록 항목 간격을 사용하세요.

![목록 간격 비교](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155064272768/original/zATlQhjUMHUw8KaMBxloMKGvPU1fW4qnCA.png?1770299570)

***

### 이메일 빌더에서 레이아웃 여백 조정하기

레이아웃 여백은 이메일 레이아웃에서 블록과 섹션 간의 공간을 정의하는 데 도움이 됩니다.

1. `Marketing(마케팅) → Emails(이메일)` 탭에서 **이메일 빌더**를 여세요.
2. 이메일에서 **레이아웃 블록**(예: 행, 섹션, 컬럼)을 클릭하세요.
3. 왼쪽 설정 패널에서 **Margin(여백)** 섹션으로 스크롤하세요.
4. 슬라이더를 사용하거나 특정 값(px 단위)을 입력하여 **위(Top)** 및 **아래(Bottom)** 여백을 조정하세요.
5. 여백 변경 사항이 실시간으로 미리보기에 반영됩니다.
6. \*\*Save(저장)\*\*을 클릭하여 변경 사항을 저장하세요.

***

### **이메일 제목과 본문의 텍스트 간격 커스터마이징**

텍스트 간격 설정을 통해 텍스트 태그(예: H1, H2, 단락) 주변의 간격을 정의하여 이메일 콘텐츠 전반에 걸쳐 일관된 타이포그래피를 유지할 수 있습니다.

* `Marketing(마케팅) → Emails(이메일)` 탭에서 **이메일 빌더**를 여세요.
* 상단 왼쪽 버튼에서 `Appearance(외모) → Typography Settings(타이포그래피 설정)`를 클릭하세요.
* 각 텍스트 태그의 간격을 활성화하거나 편집하세요:
  * 위쪽 간격(Top Spacing): 태그 위에 공간을 추가합니다
  * 아래쪽 간격(Bottom Spacing): 태그 아래에 공간을 추가합니다
* 원하는 간격을 입력하세요(예: 10px, 1rem).
* \*\*Save(저장)\*\*을 클릭하여 해당 태그 스타일을 사용하는 모든 이메일에 변경 사항을 적용하세요.

![타이포그래피 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155061614974/original/44UdhDwmXU2jEjSbzZ_SRBkgYCv0p7L1uw.png?1767107444)

***

### **자주 묻는 질문**

**Q: 레이아웃 여백은 이메일 빌더의 특정 블록에만 사용할 수 있나요?**

행, 섹션, 컬럼을 포함한 대부분의 레이아웃 요소에 대해 여백을 조정할 수 있습니다.

**Q: 타이포그래피 간격 변경이 모든 이메일에 영향을 주나요?**

네, 이메일 타이포그래피 설정(Email Typography Settings)의 변경 사항은 해당 제목이나 단락 태그를 사용하는 이메일에 전역적으로 적용됩니다.

**Q: 이메일을 보내기 전에 간격 변경 사항을 미리볼 수 있나요?**

네, 간격 변경 사항은 이메일 빌더 미리보기에 실시간으로 반영됩니다.

**Q: 세로 간격을 위해 여백과 스페이서 중 어느 것이 더 나은가요?**

여백이 이제 간격 조정을 위한 선호되는 방법입니다. 정밀한 제어를 제공하고 추가 요소에 대한 의존도를 줄이기 때문입니다.

**Q: 데스크톱과 모바일에 대해 다른 간격 설정을 적용할 수 있나요?**

아니요, 현재 버전의 이메일 빌더에서는 간격 설정이 모든 기기에 공통적으로 적용됩니다.

***

*원문 최종 수정: Thu, 5 Feb, 2026 at 7:53 AM* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/marketing/mention-or-tag-profile-in-posts-from-social-planner/layout-margins-and-text-spacing-controls.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.