영상 튜토리얼: Figma에서 이메일을 MJML 코드로 내보내기

이 영상에서는 Figma Emailify 플러그인에서 이메일을 MJML 코드로 내보내는 방법을 보여 줘요.

Emailify 플러그인에서 이메일을 내보낼 때 MJML Source Code 옵션을 선택했다면, 내보낸 이메일 폴더에 일반 HTML 파일과 함께 index.mjml 파일이 추가로 들어 있어요.

MJML 버전 선택하기

MJML Version 드롭다운에서 내보낼 index.mjml에 MJML 4, MJML 5, MJML 6 중 어떤 버전을 사용할지 고르세요. 기존 MJML 워크플로와의 호환성을 위해 MJML 4가 기본으로 선택되어 있어요. 이후 단계에서 사용하는 컴파일러와 도구가 MJML 5를 지원한다면 MJML 5를 고르세요.

MJML 6은 MJML 6.0.0-alpha.1을 사용하며, 호환되는 후속 도구로 테스트하는 용도예요. 이 알파 버전은 생성되는 HTML과 일부 기본 스타일을 바꾸므로, 캠페인에 사용하기 전에 미리보기와 내보낸 이메일을 검토하세요. 언제든 MJML 4나 MJML 5로 다시 바꿀 수 있어요.

MJML 6에서 사용자 지정 CSS를 사용할 때, 선택 사항인 > tbody > 구간이 6개보다 많은 선택자는 그 구간이 모두 있는 형태와 하나도 없는 형태만 유지돼요. 그 깊이에서 중첩이 섞여 있다면 더 단순한 선택자가 필요할 수 있어요. 주석과 서식이 보존되므로, 선택자가 같은 요소를 가리키더라도 내보낸 CSS가 이전 버전과 다를 수 있어요.

MJML Source Code를 선택한 동안에는 Preview HTML과 함께 생성되는 index.html도 드롭다운에서 고른 MJML 버전을 사용해요.

MJML Version 설정은 MJML Source Code 내보내기에만 적용돼요. MJML 5와 MJML 6은 직접 선택해야 사용되며, 다른 Emailify 내보내기 형식에는 영향을 주지 않아요.

MJML 파일이 있으면 개발자가 다루기 훨씬 까다로운 컴파일된 HTML 표를 건드리지 않고도 코드 편집기에서 파일을 열어 직접 수정하거나 원하는 대로 바꾸기가 아주 쉬워요.

수정이 끝나면 MJML 문서 사이트의 사용법 섹션(영어)에 안내된 여러 방법 중 하나로 HTML로 컴파일할 수 있어요.

Emailify는 파일 크기를 최대한 줄이기 위해 HTML 내보내기를 자동으로 압축(minify)해요. 하지만 MJML Source Code 옵션을 선택하고 이메일을 내보낸다면 Minify HTML 토글을 끄면 압축을 건너뛸 수 있어요. 그러면 플러그인이 해당 이메일 내보내기의 압축을 자동으로 꺼요.