# 이메일 빌더의 이미지 요소

이메일 빌더의 이미지 요소(Image Element)를 사용하면 이메일 템플릿에 이미지를 쉽게 추가하고 커스터마이징할 수 있습니다. 다양한 이미지 소스 지원, 크기 조정 옵션, 정렬 컨트롤을 통해 시각적으로 매력적이고 전문적인 이메일을 만들어 고객의 관심을 끌고 참여도를 높일 수 있습니다.

**목차**

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

## **Hyperclass 이메일 빌더의 이미지 요소란?**

이미지 요소는 이메일 빌더에서 드래그 앤 드롭으로 사용할 수 있는 블록으로, 이메일 레이아웃에 이미지를 직접 삽입할 수 있게 해줍니다. 새 이미지를 업로드하거나, URL을 사용하거나, 기존 파일 라이브러리에서 가져올 수 있습니다.

크기 조정, 정렬, 링크 설정 등의 커스터마이징 옵션을 지원하여 브랜딩, 제품 소개, 시각적 스토리텔링에 이미지를 활용할 수 있습니다. 이 요소는 모든 주요 이메일 클라이언트와 디바이스에서 이미지가 올바르게 표시되도록 보장합니다.

참고: 로딩 시간을 최적화하고 이메일 전송률을 유지하려면, JPG나 PNG 형식의 압축된 이미지(1MB 미만)를 사용하세요.

## **이미지 요소의 주요 장점**

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

* 간단한 드래그 앤 드롭 기능으로 고품질 이미지를 빠르게 삽입할 수 있습니다.
* 균형 잡힌 레이아웃을 위해 너비, 높이, 정렬을 커스터마이징할 수 있습니다.
* 데스크탑과 모바일 디바이스 모두에서 일관된 이미지 표시를 보장합니다.
* 로고, 배너, 시각 자료로 세련되고 브랜딩된 외관을 유지할 수 있습니다.

## **이미지 요소 설정 방법**

이메일 템플릿에 이미지 요소를 추가하고 설정하려면 다음 단계를 따르세요:

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

![마케팅 메뉴 이동](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057289337/original/XHI8TgNTaj5hIxqBDmQMq6ocYMQepyBdvA.png?1761904242)

* 기존 템플릿을 열거나 + New 버튼을 클릭해서 새로 만듭니다.

![템플릿 생성](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057289402/original/vXaGlsjMi1ZGKmKSokUfVNQxmj1sYnstTg.jpeg?1761904288)

* 이메일 빌더에서 좌측 사이드바의 Add Elements(+) 아이콘을 클릭합니다.

![요소 추가](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057289494/original/FJOmvw7ZFbokKI4kkmcYP8FYKElC9D1ZMw.png?1761904349)

* Elements 섹션에서 Image Element를 찾습니다.
* 이미지 요소를 이메일 레이아웃 내 원하는 위치로 드래그 앤 드롭합니다.
* 이미지 요소를 클릭하여 좌측 패널의 Edit 탭을 엽니다. 여기서 다음을 설정할 수 있습니다:

이미지 업로드: 컴퓨터에서 이미지를 선택합니다.

* 이미지 URL 사용: 외부에 호스팅된 이미지의 직접 링크를 붙여넣습니다.
* 너비 & 높이 조정: 커스텀 크기를 정의하거나 자동 스케일링을 사용합니다.
* 링크 추가: 목적지 URL을 추가하여 이미지를 클릭 가능하게 만듭니다.
* 정렬 설정: 이미지를 좌측, 중앙, 우측으로 정렬합니다.
* 패딩 추가: 더 나은 디자인 균형을 위해 이미지 주변 간격을 조정합니다.

![이미지 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057289695/original/5ULMgMtX99lLYUsvgAXpihAZikng-Fv51g.png?1761904443)

* (선택사항) Visibility 탭을 클릭하여 디바이스별 표시 설정이나 조건부 발송 옵션을 관리합니다.

![표시 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057289798/original/ad6WgCPPL4DGdz-JTuhgaSNG-_ao81_g3g.png?1761904510)

* 데스크탑과 모바일 디바이스 모두에서 이메일을 미리보기하여 이미지가 예상대로 표시되는지 확인합니다.

## 자주 묻는 질문

**Q: 어떤 이미지 파일 형식을 지원하나요?**

JPG, PNG, GIF 등 일반적인 형식을 업로드하거나 링크로 사용할 수 있습니다.

**Q: 이미지를 클릭 가능하게 만들 수 있나요?**

네, Redirection Link 필드에 하이퍼링크를 추가하면 이미지를 인터랙티브하게 만들 수 있습니다.

**Q: 외부 이미지 URL을 사용할 수 있나요?**

네, Image URL 필드에 유효한 이미지 URL을 붙여넣으면 됩니다. 이미지가 공개적으로 접근 가능한지 확인하세요.

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

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

**Q: 이미지를 삭제하려면 어떻게 하나요?**

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

***

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