# 이메일 빌더의 코드 요소(Code Element)

코드 요소(Code Element)를 사용하면 이메일 템플릿에 커스텀 HTML이나 CSS 코드를 삽입할 수 있어, 표준 디자인 옵션을 넘어서는 완전한 창작 자유도를 제공합니다. 위젯 삽입, 추적 픽셀, 또는 이메일의 기능과 외관을 향상시키는 고급 스타일링에 이상적입니다.

목차

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

## **이메일 빌더의 코드 요소란?**

코드 요소는 이메일 레이아웃에 커스텀 HTML이나 CSS를 직접 추가할 수 있는 드래그 앤 드롭 블록입니다. 카운트다운 타이머, 추적 태그, 표준 비주얼 편집기로는 불가능한 레이아웃 수정 같은 특수한 콘텐츠를 포함하려는 고급 사용자를 위해 설계되었습니다.

올바르게 사용하면 더 깊이 있는 커스터마이제이션이 가능하며, 써드파티 도구를 이메일 디자인에 원활하게 통합할 수 있습니다.

참고: 이메일 클라이언트는 커스텀 코드 지원이 제한적입니다. 발송 전 반드시 이메일을 테스트하여 모든 플랫폼에서 삽입된 콘텐츠가 올바르게 표시되는지 확인하세요.

## **코드 요소의 주요 장점**

이메일 디자인에서 코드 요소를 사용하면 다음과 같은 장점이 있습니다:

* 독특한 레이아웃과 디자인을 위한 커스텀 HTML 또는 CSS 추가
* 타이머, 폼, 배지 등 써드파티 위젯 삽입
* 캠페인 인사이트를 위한 추적 픽셀 또는 분석 스크립트 삽입
* 표준 편집기 기능을 넘어서는 세밀한 간격, 색상, 스타일 조정
* 이메일의 특정 섹션에서 고급 커스터마이제이션을 안전하게 실험

## **코드 요소 설정 방법**

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

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

![마케팅 메뉴 이동](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057298706/original/WuQViu370ASjxhH8Cz0hAv4Uonfx-iu26A.png?1761908722)

* 기존 이메일 템플릿을 열거나 `+ New` 버튼을 클릭하여 새 템플릿을 생성합니다.

![새 템플릿 생성](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057298721/original/F4pVXx35ViTwbEvbBQDzGB6gw5hbM6Xsvg.jpeg?1761908734)

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

![요소 추가 아이콘](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057298820/original/OXB_jBv3OecFrni9nhzWA-i7S0WEG3_R7Q.png?1761908813)

* Elements(요소) 섹션에서 Code Element(코드 요소)를 찾습니다.
* 코드 요소를 이메일 레이아웃의 원하는 섹션으로 드래그 앤 드롭합니다.
* 코드 요소를 클릭하여 왼쪽 패널의 Edit(편집) 탭을 엽니다.
* 코드 편집기 박스에 커스텀 HTML 또는 CSS 코드를 붙여넣거나 직접 입력합니다.

구조를 위한 HTML 사용 (예: div, 테이블, 삽입)

* 스타일링을 위한 인라인 CSS 사용 (예: 색상, 간격, 폰트)

![코드 편집기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057298881/original/m17hyebE1ZBzZV6kkrisqVa7fQzIqgyesQ.jpeg?1761908853)

* `Preview(미리보기)`를 클릭하여 커스텀 코드가 디자인에서 어떻게 표시되는지 확인합니다.
* 발송 전에 데스크톱과 모바일 미리보기 모두에서 이메일을 테스트하여 올바른 렌더링을 보장합니다.

## 자주 묻는 질문

**Q: 코드 요소를 사용해서 어떤 종류의 코드를 추가할 수 있나요?**

HTML과 인라인 CSS를 추가할 수 있습니다. JavaScript와 iframe 콘텐츠는 보안상의 이유로 대부분의 이메일 클라이언트에서 지원되지 않습니다.

**Q: 커스텀 코드가 나머지 이메일 레이아웃에 영향을 주나요?**

올바르게 작성되지 않으면 영향을 줄 수 있습니다. 코드를 독립적으로 유지하고 인라인 스타일을 사용하여 다른 요소에 영향을 주지 않도록 하세요.

**Q: 내 코드가 모든 이메일 클라이언트에서 제대로 표시되는지 어떻게 확인할 수 있나요?**

미리보기와 테스트 발송 옵션을 사용하여 항상 이메일을 테스트하세요. 이메일 클라이언트마다 HTML을 다르게 처리하기 때문에 일부 코드가 각각에서 약간 다르게 보일 수 있습니다.

**Q: 커스텀 코드를 저장하고 재사용할 수 있나요?**

네, 코드 블록을 생성한 후에는 템플릿 간에 복제하거나 복사하여 동일한 디자인이나 기능을 재사용할 수 있습니다.

***

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