Emailify 플러그인에서 쓸 수 있는 컴포넌트를 살펴보려면 플러그인 헤더 바 아래의 카테고리 탭을 클릭하세요. 탭을 클릭하면 해당 카테고리에 있는 컴포넌트가 표시되고, 위아래로 스크롤하며 선택한 탭 안의 하위 카테고리를 눈으로 살펴볼 수 있어요.
프리셋에서 추가한 행의 순서를 바꾸려면 Auto Layout이 켜진 Emailify 컨테이너 프레임 안에서 행을 위아래로 드래그해 위치를 옮기세요.
외부 컴포넌트 라이브러리 둘러보기
영상 튜토리얼: Figma 디자인에 500개 이상의 무료 HTML 이메일 컴포넌트 사용하기(영어)
이 영상은 Emailify Figma 플러그인으로 Figma 디자인에 500개 이상의 무료 HTML 이메일 컴포넌트를 사용하는 방법을 보여 줘요.
Emailify 플러그인에 기본으로 들어 있는 컴포넌트 외에도, Emailify 웹 앱에서 외부 컴포넌트 라이브러리의 컴포넌트를 살펴보고 사용할 수 있어요. Figma 디자인에 바로 복사해 넣을 수 있는, 미리 만들어진 더 다양한 이메일 컴포넌트를 쓸 수 있어요.
외부 라이브러리의 컴포넌트를 사용하려면 다음과 같이 하세요.
- Emailify 웹 앱에 들어가 사용할 수 있는 이메일 컴포넌트 전체 목록을 살펴보세요.
- 카테고리나 템플릿 사용 여부로 컴포넌트를 필터링하거나 특정 요소를 검색하세요.
- 원하는 컴포넌트의 Copy Figma Component 버튼을 클릭해 HTML 스니펫을 클립보드에 복사하세요.
- Figma에서 컴포넌트를 붙여 넣을 Emailify 프레임을 선택하세요.
- Cmd+V(Mac) 또는 Ctrl+V(Windows)로 Emailify 프레임에 컴포넌트를 바로 붙여 넣으세요.
붙여 넣은 컴포넌트는 이메일 디자인에 자동으로 어우러지고, 다른 Emailify 컴포넌트와 똑같이 원하는 대로 바꿀 수 있어요.
외부 컴포넌트는 Emailify의 Auto Layout 구조를 사용해요. Emailify 컨테이너 프레임 안에서 컴포넌트를 위아래로 드래그해 순서를 바꾸세요.
기본 컴포넌트 카테고리
Emailify는 이메일 디자인에 필요한 것을 쉽게 찾을 수 있도록 컴포넌트를 몇 가지 카테고리(와 하위 카테고리)로 나눠 두었어요.
헤더(Headers)
주로 이메일 맨 위에 쓰는 컴포넌트예요. 브랜드 로고, “온라인으로 보기” 링크, 내비게이션 메뉴, 소셜 아이콘 등이 있어요.
이미지(Images)
이미지 콘텐츠를 보여 주는 컴포넌트예요. 전체 너비 이미지, 배경 이미지(위에 텍스트를 올릴 때), 로고 그리드, 이미지 카드, 그리드, 캡션 등이 있어요.
콘텐츠(Content)
단락, 인용문, 고객 후기, 작성자 아바타, 아티클 카드, 기능 아이콘, 통계, 프로모션 코드, 상품 카드 같은 텍스트 기반 컴포넌트가 들어 있어요.
이커머스(Ecomm)
상품이나 결제 완료 후 이메일 관련 요소를 보여 줄 때 쓸 만한 자주 쓰는 컴포넌트를 제공해요. Klaviyo에서 동적 상품 그리드를 보여 주는 Klaviyo 전용 컴포넌트도 들어 있어요.
CTA(행동 유도)
주로 사용자에게 무언가를 클릭하거나 행동하도록 유도할 때 쓰는 컴포넌트예요. 버튼, 링크, 배경 이미지 히어로, 동영상 썸네일, 기능 타일, 앱 스토어 버튼, 소셜 미디어 아이콘, 상품 히어로 등이 있어요.
푸터(Footer)
주로 이메일 맨 아래에 쓰는 컴포넌트예요. 브랜드 로고와 주소 정보, 소셜 미디어 링크, 구독 취소 링크, 앱 다운로드 버튼 등을 보여 줄 수 있어요.
다른 카테고리에서 추가한 컴포넌트는 나중에 다시 쉽게 쓸 수 있도록 Favourites 카테고리에 자동으로 “북마크”돼요. Trash 아이콘을 클릭하면 즐겨찾기에서 컴포넌트를 지울 수도 있어요. 즐겨찾기 목록에서만 사라지고 다른 카테고리에서 “삭제”되지는 않아요.