# 이메일 빌더의 스페이서 요소

## 이메일 빌더의 스페이서 요소

이 글에서는 하이퍼클래스 이메일 빌더(Email Builder)의 새로운 스페이서 요소(Spacer Element)를 소개합니다. 데스크톱과 모바일 사용자 모두를 위해 이메일 레이아웃 커스터마이징을 더 쉽고 정확하게 만들어주는 도구입니다.

***

**목차**

* [하이퍼클래스 이메일 빌더의 스페이서 요소란?](#하이퍼클래스-이메일-빌더의-스페이서-요소란)
* [스페이서 요소의 주요 장점](#스페이서-요소의-주요-장점)
* [스페이서 요소 설정하는 방법](#스페이서-요소-설정하는-방법)
* [자주 묻는 질문](#자주-묻는-질문)

***

## 하이퍼클래스 이메일 빌더의 스페이서 요소란?

스페이서 요소는 하이퍼클래스 이메일 빌더의 드래그 앤 드롭 도구로, 이메일 템플릿 내에서 콘텐츠 블록 사이에 조절 가능한 세로 또는 가로 여백을 추가할 수 있게 해줍니다. 스페이서 요소는 구분선이나 수동 패딩 조정에 의존하지 않고도 간격을 제어할 수 있는 간단하고 직관적인 방법을 제공합니다. 이 기능을 통해 모든 디바이스에서 깔끔하고 전문적이며 반응형인 이메일 레이아웃을 만들 수 있습니다.

***

### 스페이서 요소의 주요 장점

이메일 디자인 과정에 스페이서 요소를 추가하면 사용자 중심의 여러 장점을 얻을 수 있습니다:

* 복잡한 우회 방법 없이도 손쉽게 이메일 레이아웃을 커스터마이징
* 더 깔끔하고 전문적으로 보이는 이메일 디자인
* 구분선을 스페이서로 사용하거나 수동 패딩을 조정할 필요 제거
* 반응형 간격이 모바일과 데스크톱 디바이스에 자동으로 적응
* 이메일의 시각적 매력과 가독성 향상

***

### 스페이서 요소 설정하는 방법

스페이서 요소를 올바르게 설정하면 원하는 정확한 간격으로 이메일을 만들어 미관과 가독성을 모두 향상시킬 수 있습니다. 이메일 템플릿에 스페이서 요소를 추가하고 커스터마이징하려면 다음 단계를 따르세요:

* 하위 계정 대시보드에서 `Marketing(마케팅) → Emails(이메일) → Templates(템플릿)`으로 이동하세요.

![하이퍼클래스 이메일 템플릿 메뉴](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155048036120/original/zaRXnBCweIwnyjatGAappWyzBnBgtMY7ow.png?1749586302)

* 템플릿을 클릭하여 기존 이메일 템플릿을 열거나, 우상단의 + New 버튼을 클릭하여 새 템플릿을 만드세요.

![이메일 템플릿 생성](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155048036183/original/Ry6kkeO7KmPIaU_exR0a_7NE1gQegKvfGQ.png?1749586508)

* 이메일 빌더 좌상단의 Add Elements(요소 추가) (+) 아이콘을 클릭하세요. 사이드바에서 **Spacer** 요소를 찾으세요.

![스페이서 요소 찾기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155048036254/original/OgQ6AbeonTYJv4z4ZF2fsX8bIp1xcPUU-w.png?1749586677)

* 스페이서 요소를 이메일 레이아웃 내에서 원하는 위치로 드래그 앤 드롭하세요.
* 스페이서 요소를 클릭한 다음 좌측 바의 **Edit(편집)** 탭을 선택하여 높이, 너비, 색상을 조정하세요. **Visibility(표시)** 탭을 클릭하여 디바이스 기반 표시 및 조건부 발송을 조정할 수 있습니다.

![스페이서 요소 편집](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155048036325/original/0NJ-d1YBf_JNRUav0BO9vfrv0_qgMeq3IA.png?1749586872)

![스페이서 표시 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155048036372/original/rj1pNhI3mm8-L1n_Va1X4fKWLFnBBMvJCA.png?1749586987)

* 이메일을 미리보기하여 데스크톱과 모바일 디바이스에서 간격이 올바르게 보이는지 확인하세요.

***

### 자주 묻는 질문

**Q: 스페이서 요소가 모바일 디바이스에서 반응형으로 작동하나요?**

스페이서 요소는 자동으로 모바일 반응형에 맞춰 조정되어 모든 디바이스에서 일관된 간격을 보장합니다. 최적의 외관을 확인하려면 데스크톱과 모바일 미리보기 모두에서 이메일을 테스트해보세요.

**Q: 스페이서 요소가 이메일에 보이는 콘텐츠를 추가하나요?**

아니요, 스페이서는 빈 공간만 만들 뿐 보이는 콘텐츠는 표시하지 않습니다.

**Q: 스페이서로 세로와 가로 간격을 모두 설정할 수 있나요?**

네, 레이아웃 필요에 따라 세로 간격을 위한 높이와 가로 간격을 위한 너비를 조정할 수 있습니다.

**Q: 스페이서가 이메일 전송률이나 로딩 속도에 영향을 주나요?**

아니요, 스페이서는 가볍고 전송률이나 로딩 시간에 영향을 주지 않습니다.

**Q: 더 이상 필요하지 않은 스페이서를 어떻게 제거하나요?**

스페이서 요소를 클릭하고 삭제/휴지통 아이콘을 사용하여 레이아웃에서 제거하면 됩니다.

***

*원문 최종 수정: 2025년 6월 10일* *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/email/workflow-action-based-on-email-event-clicked-opened/spacer-element-in-email-builder.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.