# 이메일 빌더의 버튼 요소

버튼 요소(Button Element)를 사용하면 이메일 템플릿에 클릭 가능한 버튼을 추가할 수 있어서, 명확하고 시각적으로 매력적인 CTA(행동 유도)를 통해 고객 참여를 높일 수 있습니다. 버튼의 텍스트, 색상, 크기, 링크 대상을 완전히 커스터마이징하여 이메일 디자인과 브랜드 스타일에 맞출 수 있어요.

**목차**

* [이메일 빌더의 버튼 요소란?](#이메일-빌더의-버튼-요소란)
* [버튼 요소의 주요 장점](#버튼-요소의-주요-장점)
* [버튼 요소 설정하는 방법](#버튼-요소-설정하는-방법)
* [자주 묻는 질문](#자주-묻는-질문)

## **이메일 빌더의 버튼 요소란?**

버튼 요소는 드래그 앤 드롭으로 이메일 레이아웃에 완전히 커스터마이징 가능한 CTA 버튼을 삽입할 수 있는 블록입니다. 랜딩 페이지, 상품 페이지, 이벤트 등록으로 고객을 안내하는 등 목표에 맞게 디자인, 정렬, 링크 대상을 조정할 수 있어요.

버튼은 사용자 행동을 유도하고 클릭률을 높이는 데 필수적입니다. 이 요소를 사용하면 모든 기기에서 일관된 모양을 유지하면서도 눈에 띄도록 스타일을 지정할 수 있습니다.

참고: 버튼은 HTML로 구성되며 대부분의 이메일 클라이언트에서 안정적으로 표시됩니다. 올바른 표시를 위해 항상 데스크톱과 모바일 모두에서 미리보기를 확인하세요.

## **버튼 요소의 주요 장점**

이메일 디자인에 버튼 요소를 추가하면 다음과 같은 장점이 있습니다:

* 명확하고 효과적인 행동 유도 버튼을 쉽게 만들 수 있어요.
* 버튼 텍스트, 색상, 크기를 디자인 테마에 맞게 커스터마이징할 수 있어요.
* 링크를 추가하여 사용자를 특정 페이지나 행동으로 안내할 수 있어요.
* 시각적 균형을 위해 버튼을 정확히 정렬하고 간격을 조정할 수 있어요.
* 모바일과 데스크톱 기기에서 자동으로 반응형으로 작동해요.

## **버튼 요소 설정하는 방법**

이메일 템플릿에 버튼 요소를 추가하고 설정하는 단계별 방법입니다:

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

![마케팅 메뉴에서 이메일 템플릿으로 이동](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291260/original/1f-e9HKDiWzRQTo2Us0e6x8K72CPFJX2zA.png?1761905322)

* 기존 이메일 템플릿을 열거나 `+ New` 버튼을 클릭해서 새로 만드세요.

![새 이메일 템플릿 만들기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291290/original/7j2FCVwZ0mtT27Epo-p8XQj1MHzBLvoStQ.jpeg?1761905332)

* 이메일 빌더에서 왼쪽 사이드바의 `Add Elements(요소 추가)` (+) 아이콘을 클릭하세요.

![요소 추가 버튼 클릭](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291114/original/PFr33EZ0nJkTqlMdEUXDYMpGFwPqrdqQng.png?1761905223)

* Elements 섹션에서 Button Element를 찾으세요.
* 버튼 요소를 레이아웃의 원하는 위치에 드래그 앤 드롭하세요.
* 버튼 요소를 클릭해서 왼쪽 패널의 Edit 탭을 열어보세요. 여기서 다음을 설정할 수 있어요:

**버튼 텍스트 편집**: 원하는 행동을 반영하도록 라벨을 변경하세요 (예: 지금 구매, 자세히 보기, 상담 예약).

* **링크 추가**: 버튼을 클릭했을 때 사용자가 이동할 대상 URL을 입력하세요.
* **스타일링 커스터마이징**: 버튼 색상, 텍스트 색상, 폰트, 테두리 반경, 배경을 조정하세요.
* **크기 및 정렬 조정**: 너비, 패딩, 정렬(좌측, 중앙, 우측)을 조절하세요.
* **패딩 추가**: 레이아웃 균형을 위해 버튼 주변에 여백을 추가하세요.

![버튼 요소 편집 옵션](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291199/original/2gmr7xIiYOo612B-FsjiigGgMh6VyOnQ4w.png?1761905271)

* `Visibility(표시 설정)` 탭을 클릭해서 기기별 표시 설정이나 조건부 전송 옵션을 설정하세요.

![표시 설정 옵션](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291234/original/LIvSVN0vdnZIe_SBI6qwi-KR12f9f5XMsA.png?1761905310)

* 데스크톱과 모바일 모드 모두에서 이메일을 미리 보기해서 버튼이 올바르게 보이고 작동하는지 확인하세요.

## 자주 묻는 질문

**Q: 하나의 이메일에 여러 개의 버튼을 추가할 수 있나요?**

네, 필요한 만큼 많은 버튼 요소를 추가할 수 있어요. 각각 고유한 스타일링과 링크를 가질 수 있습니다.

**Q: 버튼을 전체 폭으로 만들려면 어떻게 해야 하나요?**

편집 패널의 full width 토글을 사용해서 버튼을 100%로 설정하거나, 패딩과 정렬 컨트롤을 사용해서 수동으로 조정할 수 있어요.

**Q: 버튼이 모바일에서도 반응형으로 작동하나요?**

네, 버튼은 모바일 기기에서 최적 표시를 위해 자동으로 크기가 조정되고 위치가 조정돼요.

**Q: 레이아웃에서 버튼을 제거하려면 어떻게 하나요?**

버튼 요소를 선택하고 휴지통/삭제 아이콘을 클릭하면 이메일 디자인에서 제거할 수 있어요.

***

*원문 최종 수정: Fri, 31 Oct, 2025 at 5:12 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/button-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.