HTML 및 MJML 이메일 가져오기

Emailify의 실험 기능인 Import 탭으로 기존 HTML이나 MJML을 Figma에서 편집할 수 있는 이메일 레이어로 바꾸세요.

New Email의 Import 탭을 쓰면 Row와 Column을 처음부터 하나하나 만들지 않고 기존 이메일 코드로 시작할 수 있어요. HTML이나 MJML을 붙여 넣거나 파일을 고른 다음, 편집 가능한 Emailify 프레임을 만들기 전에 소스를 검토하세요.

Import는 실험 기능이며 현재 로컬에서 활성화한 개발 빌드에서만 쓸 수 있어요. 표준 플러그인 빌드에서는 숨겨져 있어요. 아래 단계는 New Email 창에 Import가 있을 때 해당돼요.

지원되는 소스 ​

  • HTML: 이메일 HTML을 붙여 넣거나 .html 또는 .htm 파일을 고르세요.
  • MJML XML: 완전한 <mjml> 문서를 붙여 넣거나 .mjml 또는 .xml 파일을 고르세요.
  • MJML JSON: 표준 MJML 컴포넌트 트리를 붙여 넣거나 .json 파일을 고르세요.
  • 복사한 이메일 패키지: 실험 기능인 Copy to Emailify 확장 프로그램에서 복사한 패키지를 붙여 넣으세요.

입력은 2 MB 미만이어야 해요. MJML은 HTML로 컴파일한 결과도 이 한도 안에 들어야 해요. .eml 메시지, ZIP 파일, 임의의 JSON은 지원하지 않아요. .eml 메시지라면 HTML 본문을 추출하고 이미지 에셋에 접근할 수 있게 만든 다음 가져오세요.

접근할 수 있는 이미지 URL을 쓰세요. 로그인이 필요한 이미지, 로컬 파일, cid: 같은 첨부 파일 참조는 호스팅된 에셋으로 바꿔야 할 수 있어요.

시험해 볼 이메일이 필요한가요? Really Good Emails에 들어가 이메일을 열고 Code를 선택하면 HTML 소스를 볼 수 있어요. HTML을 복사해 Import 탭의 Email code 필드에 붙여 넣은 다음, 이메일을 만들기 전에 Preview Import를 클릭해 검토하세요.

이메일 가져오기 ​

  1. Figma에서 Emailify를 여세요.
  2. 이메일 선택기 옆의 + 아이콘을 클릭해 New Email을 여세요.
  3. 탭 줄 맨 끝에 있는 Import를 선택하세요.
  4. Email code에 이메일 코드를 붙여 넣고 Preview Import를 클릭하세요. 또는 Choose file을 클릭해 지원되는 파일을 불러와 분석할 수도 있어요.
  5. Preview와 Notes를 검토하세요. 소스에 원하는 텍스트, 이미지, 배경이 들어 있는지 확인하세요.
  6. Email name을 입력한 다음 Create Email을 클릭하세요.
  7. 생성된 Emailify 프레임과 편집 가능한 레이어를 살펴보세요.
  8. 내보내기 전에 Emailify의 HTML 미리보기로 생성된 데스크톱 및 모바일 결과물을 확인하세요.

Import 패널은 원본 이메일을 미리 보여 줘요. 재구성한 Emailify 레이어에서 최종으로 내보내는 HTML을 보여 주는 것은 아니에요. 생성된 프레임과 Emailify가 생성한 미리보기를 항상 따로 확인하세요.

소스를 수정하면 이전에 준비한 가져오기 결과가 지워져요. 업데이트한 이메일을 만들기 전에 Preview Import를 다시 클릭하세요.

MJML 가져오기 ​

mj-body가 하나 있는 완전한 MJML 문서 하나를 넣으세요. 예를 들면 다음과 같아요.

xml
<mjml>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-text>Hello from Emailify</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

같은 내용을 JSON으로 쓰면 tagName, attributes, children, content를 사용해요.

json
{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}

Emailify는 MJML4로 MJML을 검증하고 HTML로 렌더링한 다음, 그 HTML에서 편집 가능한 레이어를 재구성해요. 원래 MJML 컴포넌트 트리를 그대로 복원하는 것은 아니에요. 가져온 뒤에는 사용자 지정 CSS, 폰트, 간격, 반응형 동작을 검토하세요.

  • 가져오기 전에 mj-include 콘텐츠를 인라인으로 넣으세요. 포함된 파일은 불러오지 않아요.
  • mj-raw는 편집 가능한 MJML 컴포넌트로 바꾸거나, 렌더링된 HTML을 가져와 검토하세요.
  • MJML 아코디언과 캐러셀은 정적 버전을 쓰세요. 인터랙티브 컴포넌트는 편집 가능한 형태로 가져올 수 없어요.
  • XML DOCTYPE과 엔티티 선언을 제거하세요. 잘못된 컴포넌트 구조나 속성은 고친 다음 다시 시도하세요.

결과 확인하기 ​

생성된 이메일을 데스크톱과 375px 같은 좁은 모바일 너비에서 소스와 비교하세요. 모든 텍스트, 이미지, 배경 이미지, 버튼, 링크 대상을 확인한 다음 열 쌓임, 줄바꿈, 패딩을 살펴보세요.

Import는 소스를 Emailify가 지원하는 레이아웃 구조에 맞춰 대응시키려고 시도해요. 복잡한 중첩, 사용자 지정 CSS, 접근할 수 없는 에셋이 있으면 직접 조정해야 할 수 있어요. 소스 준비에 성공했다고 해서 모든 이메일 클라이언트에서 시각적으로 똑같이 보이거나 똑같이 전달된다고 보장하지는 않아요.

준비에 실패하면 Notes를 열어 보고된 문제를 확인하세요. 소스를 고치거나 접근할 수 없는 에셋을 바꾼 다음 다시 미리 보세요. 생성된 레이아웃을 조정해야 한다면 Row, Column, 반응형 설정을 사용한 다음 이메일 테스트 가이드를 따라 하세요.