디자인과 원하는 설정이 마음에 들면 Emailify 플러그인 헤더의 Export HTML 버튼을 클릭하고, 내보낼 이메일을 선택한 뒤, 필요하면 제목과 프리헤더 텍스트를 추가해 Figma에서 이메일을 HTML로 내보낼 수 있어요.
Figma에서 HTML 이메일을 .zip 파일로 내보내고 다운로드하기
기본으로 선택된 옵션은 HTML Email이에요. 이 옵션을 쓰면 이메일이 바로 쓸 수 있는 형태로 컴파일되어 내보내져요(모든 CSS가 미리 인라인 처리되고 HTML이 압축돼요).
준비가 되면 Export To HTML 버튼을 클릭해 Figma에서 선택한 이메일을 HTML로 내보내세요.
Emailify가 이메일 처리를 마치면 확인 메시지가 표시돼요. Download your .zip file 버튼을 클릭하면 .zip 파일을 다운로드할 수 있어요.
Figma에서 다운로드한 파일 저장하기 Figma 데스크톱 앱을 사용한다면 파일을 다운로드하라는 창이 나타나요. 하지만 웹 브라우저에서 Figma를 사용한다면 기본적으로 파일이 컴퓨터에 자동으로 다운로드돼요(보통 컴퓨터의 Downloads 폴더에 저장돼요).
내보내기는 끝났는데 ZIP이 다운로드되지 않았을 때
Emailify의 내보내기 완료 화면까지 갔다면 이메일 내보내기 자체는 이미 생성된 거예요. 먼저 그 완료 화면에서 Download your .zip file을 다시 클릭하세요.
그다음 Figma를 실행하는 방식에 맞는 다운로드 위치를 확인하세요.
- Figma 데스크톱 앱에서는 Figma의 기본 저장 대화 상자를 찾아보고, 다른 창이나 데스크톱 뒤에 가려져 있지 않은지 확인하세요.
- 웹 브라우저의 Figma에서는 브라우저의 다운로드 목록과 컴퓨터의 기본 Downloads 폴더를 확인하세요.
그래도 ZIP이 보이지 않는다면 다음을 해 보세요.
- 올바른 다운로드 위치를 확인한 뒤 내보내기를 한 번 다시 실행하세요.
- 회사 네트워크를 쓰고 있다면 로컬에서 다운로드 전달이 끊기고 있을 수 있으니 다른 Wi-Fi 네트워크나 다른 브라우저/시크릿 창을 사용해 보세요.
- Pro 무료 체험 1회가 차감됐는데 파일을 받지 못했다면 더 이상 다시 시도하지 말고 [email protected]으로 이메일을 보내 주세요. 제품 이름, Figma 데스크톱과 브라우저 중 어느 쪽을 썼는지, 내보내기 완료 화면이나 나타나지 않은 다운로드 대화 상자의 스크린샷을 함께 보내 주세요.
마지막 Pro 무료 체험으로 내보내기를 완료했더라도 내보내기 완료 화면에서 ZIP을 다운로드할 수 있어요. 일반적인 체험 규칙은 Hypermatic Pro 무료 체험 이용을 참고하세요. 체험 사용이나 계정별 확인에 대한 개별 지원이 필요하면 알맞은 Hypermatic 지원 채널 선택을 참고하세요.
Emailify는 디자인의 텍스트 레이어에 RTL(오른쪽에서 왼쪽) 스타일이 필요한지 자동으로 감지하고, 내보낸 이메일의 텍스트 콘텐츠 영역에 dir="rtl" HTML 속성을 자동으로 적용해요.
붙여 넣은 텍스트 속 숨은 문자
Emailify는 미리보기와 내보내기 중에 텍스트, 버튼, 내비게이션 레이블에서 일반 영문자나 숫자 사이에 실수로 들어간 제로 폭 조이너(ZWJ)와 제로 폭 비조이너(ZWNJ)를 정리해요. 출력되지 않는 제어 코드와 맨 앞의 바이트 순서 표시(BOM)도 제거하며, 원본 Figma 텍스트 레이어는 수정하지 않아요.
다른 언어용 문자, 이모지, 텍스트 방향, 의도한 공백에 쓰이는 문자는 그대로 유지돼요. 발송한 이메일에 여전히 예상치 못한 문자가 보인다면 Figma에서 해당 단어를 다시 입력하고 다시 내보낸 뒤, 이메일 플랫폼이 UTF-8 인코딩으로 발송하는지 확인하세요. 캠페인을 보내기 전에 발송 플랫폼을 통해 최종 이메일을 테스트하세요.
내보낸 HTML 이메일 .zip 패키지 압축 해제 및 확인
Figma에서 컴퓨터로 .zip 파일을 다운로드한 다음 파일 탐색기에서 저장된 폴더를 여세요. 내보낸 .zip 파일을 더블 클릭하면 압축이 풀려요.
.zip 파일에는 이메일마다 index.html 파일과 이미지 에셋이 별도 폴더에 들어 있어요. 루트에 생성되는 index.html 파일로 내보낸 모든 이메일을 미리보기 페이지 하나에서 검토할 수 있어요. 클라이언트나 팀원을 위해 Netlify 미리보기 링크로 업로드할 수도 있어요.
미리보기 페이지의 index.html 파일이나 각 이메일 폴더 안의 index.html 파일을 더블 클릭하면 웹 브라우저에서 파일이 열리고, 내보낸 HTML을 미리 볼 수 있어요.
플러그인에서 이메일을 내보내면 HTML 이메일의 일반 텍스트 버전이 .zip 파일 안에 자동으로 포함돼요. 내보낸 .zip 파일의 압축을 풀고 이메일 폴더를 열면 index.html 파일 옆에 plain-text-version.txt 파일이 있어요.