---
url: "/ko/emailify/design/presets.md"
description: "이메일에 레이아웃 컴포넌트를 가장 빠르게 추가하는 방법은 Emailify 플러그인에서 자주 쓰는 디자인 컴포넌트를 바로 추가하는 거예요."
---

# 이메일에 Emailify 기본 컴포넌트 추가하기

> 이메일에 레이아웃 컴포넌트를 가장 빠르게 추가하는 방법은 Emailify 플러그인에서 자주 쓰는 디자인 컴포넌트를 바로 추가하는 거예요.

[Video](/assets/videos/emailify/design/add-preset-components.mp4)

Emailify 플러그인에서 쓸 수 있는 컴포넌트를 살펴보려면 플러그인 헤더 바 아래의 카테고리 탭을 클릭하세요. 탭을 클릭하면 해당 카테고리에 있는 컴포넌트가 표시되고, 위아래로 스크롤하며 선택한 탭 안의 하위 카테고리를 눈으로 살펴볼 수 있어요.

> **Note:** 프리셋에서 추가한 행의 순서를 바꾸려면 Auto Layout이 켜진 Emailify 컨테이너 프레임 안에서 행을 위아래로 드래그해 위치를 옮기세요.

## 외부 컴포넌트 라이브러리 둘러보기 {#browsing-the-external-component-library}

### 영상 튜토리얼: Figma 디자인에 500개 이상의 무료 HTML 이메일 컴포넌트 사용하기(영어)

이 영상은 Emailify Figma 플러그인으로 Figma 디자인에 500개 이상의 무료 HTML 이메일 컴포넌트를 사용하는 방법을 보여 줘요.
[Embedded media](https://www.youtube-nocookie.com/embed/zMUQ3tE76Vo)

[Video](/assets/videos/emailify/design/external-component-library.mp4)

Emailify 플러그인에 기본으로 들어 있는 컴포넌트 외에도, Emailify 웹 앱에서 외부 컴포넌트 라이브러리의 컴포넌트를 살펴보고 사용할 수 있어요. Figma 디자인에 바로 복사해 넣을 수 있는, 미리 만들어진 더 다양한 이메일 컴포넌트를 쓸 수 있어요.

외부 라이브러리의 컴포넌트를 사용하려면 다음과 같이 하세요.

1. [Emailify 웹 앱](https://emailify.hypermatic.com)에 들어가 사용할 수 있는 이메일 컴포넌트 전체 목록을 살펴보세요.
2. 카테고리나 템플릿 사용 여부로 컴포넌트를 필터링하거나 특정 요소를 검색하세요.
3. 원하는 컴포넌트의 **Copy Figma Component** 버튼을 클릭해 HTML 스니펫을 클립보드에 복사하세요.
4. Figma에서 컴포넌트를 붙여 넣을 Emailify 프레임을 선택하세요.
5. **Cmd+V**(Mac) 또는 **Ctrl+V**(Windows)로 Emailify 프레임에 컴포넌트를 바로 붙여 넣으세요.

붙여 넣은 컴포넌트는 이메일 디자인에 자동으로 어우러지고, 다른 Emailify 컴포넌트와 똑같이 원하는 대로 바꿀 수 있어요.

> **Note:** 외부 컴포넌트는 Emailify의 Auto Layout 구조를 사용해요. Emailify 컨테이너 프레임 안에서 컴포넌트를 위아래로 드래그해 순서를 바꾸세요.

## 기본 컴포넌트 카테고리 {#starter-component-categories}

Emailify는 이메일 디자인에 필요한 것을 쉽게 찾을 수 있도록 컴포넌트를 몇 가지 카테고리(와 하위 카테고리)로 나눠 두었어요.

### 헤더(Headers) {#headers}

주로 이메일 맨 위에 쓰는 컴포넌트예요. 브랜드 로고, “온라인으로 보기” 링크, 내비게이션 메뉴, 소셜 아이콘 등이 있어요.

### 이미지(Images) {#images}

이미지 콘텐츠를 보여 주는 컴포넌트예요. 전체 너비 이미지, 배경 이미지(위에 텍스트를 올릴 때), 로고 그리드, 이미지 카드, 그리드, 캡션 등이 있어요.

### 콘텐츠(Content) {#content}

단락, 인용문, 고객 후기, 작성자 아바타, 아티클 카드, 기능 아이콘, 통계, 프로모션 코드, 상품 카드 같은 텍스트 기반 컴포넌트가 들어 있어요.

### 이커머스(Ecomm) {#ecomm-e-commerce}

상품이나 결제 완료 후 이메일 관련 요소를 보여 줄 때 쓸 만한 자주 쓰는 컴포넌트를 제공해요. Klaviyo에서 동적 상품 그리드를 보여 주는 Klaviyo 전용 컴포넌트도 들어 있어요.

### CTA(행동 유도) {#ctas-call-to-action}

주로 사용자에게 무언가를 클릭하거나 행동하도록 유도할 때 쓰는 컴포넌트예요. 버튼, 링크, 배경 이미지 히어로, 동영상 썸네일, 기능 타일, 앱 스토어 버튼, 소셜 미디어 아이콘, 상품 히어로 등이 있어요.

### 푸터(Footer) {#footer}

주로 이메일 맨 아래에 쓰는 컴포넌트예요. 브랜드 로고와 주소 정보, 소셜 미디어 링크, 구독 취소 링크, 앱 다운로드 버튼 등을 보여 줄 수 있어요.

> **Tip:** 다른 카테고리에서 추가한 컴포넌트는 나중에 다시 쉽게 쓸 수 있도록 Favourites 카테고리에 자동으로 “북마크”돼요. **Trash** 아이콘을 클릭하면 즐겨찾기에서 컴포넌트를 지울 수도 있어요. 즐겨찾기 목록에서만 사라지고 다른 카테고리에서 “삭제”되지는 않아요.