Emailify는 플러그인 밖에서 만든 Figma 이메일 디자인을 지원하지 않아요.

Emailify 개요

Emailify는 자주 쓰는 기본 컴포넌트 세트를 제공해 Figma에서 이메일을 디자인할 수 있게 도와줘요. 이 컴포넌트의 콘텐츠, 스타일, 브랜드는 Figma의 일반 디자인 도구로 원하는 대로 바꿀 수 있고, 반응형 스타일을 적용한 다음 바로 쓸 수 있는 HTML로 이메일을 내보낼 수 있어요.

Emailify가 하는 일

• 이메일 레이아웃을 만들 수 있는 기본 컴포넌트와 디자인 도구를 제공해요.
• Figma에서 텍스트와 이미지 콘텐츠, 시각적 스타일, 링크를 원하는 대로 바꿀 수 있어요.
• Emailify 플러그인으로 디자인한 이메일을 바로 쓸 수 있는 HTML로 내보내요.
• 이메일 마케팅 플랫폼과 연동해 API로 HTML 템플릿을 업로드해요.

Emailify가 하지 않는 일

• Emailify 플러그인을 쓰지 않고 Figma에서 직접 디자인한 이메일을 자동으로 변환하지 않아요. 이런 디자인이 있다면 HTML로 내보내기 위해 Emailify 플러그인의 디자인 도구로 다시 만들어야 해요.
• 일부 클라이언트에서만 지원되는 HTML/CSS 속성을 다른 이메일 클라이언트에서 쓸 수 있게 해 주는 특별한 우회 방법은 제공하지 않아요. 예를 들어 Gmail이나 Outlook에서 다크 모드 스타일 재정의하기, Apple Mail이 아닌 클라이언트에서 사용자 지정 폰트 표시하기는 할 수 없어요.

Emailify는 다른 이메일 Figma 플러그인과 무엇이 다른가요?

Figma 이메일을 HTML로 내보내 주는 다른 Figma 플러그인과 달리, Emailify는 Figma에서 직접 디자인한 아무 파일이나 가져와 이메일로 보낼 수 있는 HTML 코드로 마법처럼 바꾸려고 하지 않아요.

다른 “이메일 디자인을 HTML로” 변환하는 Figma 플러그인의 문제점

직접 디자인한 이메일 목업 Figma 파일을 무엇이든 HTML로 변환하려 할 때 생기는 근본적인 문제는 디자이너의 의도를 알 방법이 없다는 것이에요.

가장 간단한 예로, Figma에서 “Rectangle” 레이어와 “Text” 레이어를 담은 “Frame” 레이어를 디자이너가 무엇으로 의도했는지 생각해 보세요.

• 클릭할 수 있는 버튼일까요?
• 텍스트가 들어간 정적 이미지 한 장일까요?
• 배경 이미지 위에 서식 있는 텍스트가 놓인 히어로 블록일까요?
• 소셜 아이콘 링크일까요?

Figma 플러그인이 이 3개 레이어의 의도를 정확히 알아낸다고 해도, 그 요소가 모바일에서 어떻게 보여야 하는지, 클릭하면 어딘가로 연결되어야 하는지, alt 텍스트 같은 다른 속성이 있는지 등에 대한 의도는 여전히 알 수 없어요.

위의 예만으로도 충분히 까다롭지만, 이건 Figma 레이어 3개의 의도를 파악하는 가장 단순한 예를 너그럽게 든 것일 뿐이고, 실제로는 훨씬 더 복잡해져요.

실제 이메일 목업 Figma 디자인에는 레이어가 수천 개 있을 수 있고, 이 레이어들은 HTML로 어떻게 렌더링해야 하는지 아무 정보도 없는 “frame”이나 “group” 레이어 수십(또는 수백) 개 안에 중첩되어 있을 수도 있어요. 그러면 Figma에서 만든 디자인 입력(구조 없는 사각형, 프레임, 그룹, 텍스트 레이어 수백 개)을 바탕으로 원하는 HTML 결과물을 얻는 것은 금세 거의 불가능해져요.

HTML 이메일은 원래도 모든 이메일 클라이언트에서 일관되게 보이도록 렌더링하기가 매우 어려워요. 그래서 디자이너마다 다르게 작업하는 무수히 많은 Figma 레이어 구조에서 디자이너의 의도를 추측하려는 시도는 너무 위험하다고 생각해요.

Emailify가 “의도” 문제를 해결하는 방법

의도 문제를 해결하기 위해 Emailify는 이메일 디자인에 좀 더 정해진 “궤도 위” 방식을 써요. 코드를 내보낼 때 실제 HTML 요소에 바로 대응하는 특별한 레이어를 Figma에서 만들도록 도와주기 때문에, 플러그인은 이메일의 각 요소가 무엇으로 의도된 것인지 정확히 알 수 있어요(예를 들어 “Button”은 실제로 버튼이고, “Column”은 실제로 열이에요).

예를 들어 Emailify 플러그인으로 Figma 이메일 디자인에 Button 레이어를 추가하면, 특별한 데이터가 붙은 새 레이어가 만들어져요. 이 데이터가 Emailify에 이 레이어는 “버튼”일 수도 있고 아닐 수도 있는 그냥 사각형 레이어가 아니라, 실제로 버튼이라는 사실을 알려 줘요.

이런 디자인 도구 덕분에 Emailify가 이해하는 레이아웃과 콘텐츠 요소를 빠르게 만들 수 있고, Emailify는 이를 자동으로 안정적인 HTML로 내보내 줘요.

Emailify와 Figma로 어떤 디자인을 만들 수 있나요?

Emailify는 레이아웃을 만드는 다양한 도구를 제공해요. 이렇게 만든 레이아웃의 콘텐츠와 스타일은 Figma에서 원하는 대로 바꿀 수 있고, 반응형 디자인도 지정할 수 있어요.

플러그인이 제공하는 도구와 Figma의 스타일, 콘텐츠 편집 기능을 함께 쓰면 완전히 원하는 대로 꾸민, 브랜드에 맞는 이메일 디자인을 만들 수 있어요.

자신의 브랜드로 이메일을 꾸밀 때 참고할 아이디어가 필요하다면 Emailify와 호환되는 무료 Figma 템플릿을 자유롭게 살펴보세요. 모두 Figma에서 Emailify만으로 디자인한 템플릿이에요.

각 Figma 템플릿의 Figma 페이지 설명에는 단계별 전체 영상 튜토리얼 링크도 있어서 템플릿을 어떻게 만들었는지 참고할 수 있어요. 각 Figma 템플릿의 영상은 전체 YouTube 재생목록(영어)에서도 볼 수 있어요.

Emailify 디자인의 Figma 레이어 구조 이해하기

기본 컴포넌트와 Quick Add Element(플러그인 하단의 드롭다운) 디자인 도구로 이메일 레이아웃을 만들면, 플러그인이 필요한 레이어 구조를 자동으로 만들어 줘요.

이 기본 레이어 구조를 유지하는 것이 매우 중요해요. 생성된 Figma 레이어를 Figma에서 직접 추가한 다른 프레임이나 그룹 안에 넣는 등의 작업은 하지 마세요. 그러면 플러그인이 혼동해서 해당 블록을 외부 레이어로 처리하고, 서식 있는 텍스트나 HTML 콘텐츠가 아닌 정적 이미지로 렌더링해요.

Emailify 레이어 구조 예시

아래 스크린샷은 Emailify 플러그인이 자동으로 만든 Figma 레이어 세트를 보여 주는 간단한 예예요.

Figma 레이어 구조가 매우 일관된 것을 볼 수 있어요. Emailify가 추가한 상위 이메일 프레임 바로 안에는 “Row” 레이어가 하나 이상 들어갈 수 있고, 각 “Row” 안에는 “Column” 레이어가 하나 이상, 각 “Column” 레이어 안에는 “Content” 레이어(예: 텍스트, 이미지, 버튼 등)가 하나 이상 들어갈 수 있어요.

Emailify 레이어 구조 기본 예시

• ✉️ Email
  • 🦸 Hero
    • ✍️ Text
    • ✍️ Text
    • 🔗 Button
      • ✍️ Button Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • ✍️ Text
      • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • 📷 Vector Icon
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🚣 Row
    • 🏛️ Column
      • 📷 Image
      • ✍️ Text
      • 🐦 Social
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
        • 🔗 Social Icon Link
          • 📷 SVG Vector Icon
      • 🍔 Navigation
        • 🔗 Nav Link
          • ✍️ Nav Link Text
        • 🔗 Nav Link
          • ✍️ Nav Link Text
  • 🚣 Row
    • 🏛️ Column
      • 🪑 Data Table
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
        • 🪑🚣 Data Table Row
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
          • 🪑🏛️ Data Table Cell (Content)
            • ✍️ Text
  • 🎁 Wrapper (For Multiple Rows)
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text
    • 🚣 Row
      • 🏛️ Column
        • 📷 Image
      • 🏛️ Column
        • ✍️ Text

사용할 수 있는 Emailify 레이어 유형

각 레이어 유형에 대해 더 알아보려면 Emailify 문서에서 개별 레이아웃 요소와 디자인 요소를 읽어 보세요.

다시 말하지만 이 구조를 유지하는 것이 매우 중요해요. 레이어를 순서에 맞지 않게 옮기면 HTML이 예상대로 렌더링되지 않아요. 예를 들어 “Row” 안에 다른 “Row”를 넣거나, “Text” 레이어를 “Email” 프레임 바로 안에 넣거나, “Column” 안에 “Row”를 넣을 수 없어요.

올바른 구조로 추가하는 가장 간단한 방법은 Emailify 플러그인에서 기본 컴포넌트를 추가한 다음, 레이아웃 레이어의 구조는 근본적으로 바꾸지 않고 콘텐츠와 스타일만 필요에 맞게 바꾸는 거예요.

Figma에서 레이어 꾸미기

영상 튜토리얼: Figma에서 이메일을 디자인하고 HTML로 내보내기(영어)

이 영상은 Emailify 플러그인으로 Figma에서 바로 쓸 수 있는 반응형 HTML 이메일을 디자인하고 내보내는 방법을 보여 줘요.

이메일에 Emailify 컴포넌트를 추가하면 Figma 캔버스에 렌더링되고, 평소처럼 레이어를 다룰 수 있어요(레이어를 직접 추가했을 때와 똑같아요).

예를 들어 텍스트 레이어라면 일반 Figma 설정 패널에서 내용을 바꾸고 폰트 크기, 줄 높이, 자간, 단락 간격, 가로 정렬을 바꿀 수 있어요.

Emailify는 일부러 아주 기본적인 요소만 렌더링해요. 그래서 이미지, 텍스트, 레이아웃 값을 자신의 브랜드와 스타일 가이드에 맞게 바꿀 수 있어요.

컴포넌트를 Figma 인스턴스로 재사용하기 컴포넌트를 원하는 대로 꾸민 다음에는 Figma 인스턴스로 여러 번 재사용하거나, 나중에 다른 이메일 디자인에서도 쓸 수 있어요.

Emailify 콘텐츠 컴포넌트는 Figma의 Auto Layout을 사용해요. Emailify에 포함된 컴포넌트는 Auto Layout을 쓰기 때문에 패딩이나 열·요소 사이 간격 같은 레이아웃 값을 아주 쉽게 조정할 수 있어요.

다음 단계

• Emailify 시작하기 가이드를 따라 첫 이메일을 만들어 보세요.
• Emailify 레이아웃에서 콘텐츠를 정렬하는 방법을 알아본 다음 반응형 이메일 스타일을 추가해 보세요.
• 바로 쓸 수 있는 HTML 내보내기와 플랫폼 연동 기능을 갖춘 Emailify Figma 플러그인을 살펴보세요.