Emailify 이메일을 모바일에서 반응형으로 만들려면 어떻게 하나요?

Emailify는 반응형 HTML을 자동으로 내보내고, 개별 Emailify 레이어의 모바일 재정의 설정으로 모바일 동작을 세밀하게 조정할 수 있어요. 데스크톱 이메일 프레임으로 시작한 다음, 내보내기 전에 플러그인 미리보기로 모바일 버전을 확인하세요.

모바일 재정의는 어디에서 설정하나요?

조정할 Emailify 레이어를 선택하고 플러그인 헤더의 Settings 버튼을 클릭한 다음, 해당 레이어의 모바일 재정의 컨트롤을 사용하세요. Text, Column, Row, Hero, Wrapper, 이미지, 버튼 레이어는 선택한 레이어 유형에 따라 서로 다른 모바일 컨트롤을 제공해요.

모바일 레이아웃이 다른 너비에서 시작되는 이유는 뭔가요?

Emailify는 Figma에 있는 데스크톱 Emailify 프레임의 너비를 기준으로 반응형 브레이크포인트를 하나만 사용해요. Emailify 프레임 너비가 600px이면 599px 이하에서 모바일 스타일이 적용되기 시작해요. 프레임이 더 넓으면 모바일 브레이크포인트도 그만큼 넓어져요.

모바일 스타일 재정의를 추가하려면 디자인에서 Emailify 레이어를 클릭하고 플러그인 헤더의 Settings 버튼을 클릭한 다음, 선택한 레이어에 필요한 모바일 스타일 재정의를 적용하세요.

예를 들어 이메일의 Text 레이어를 클릭하면 모바일용 폰트 크기, 줄 높이, 자간, 문단 간격, 패딩, 정렬을 재정의할 수 있어요. Row 레이어를 클릭하면 패딩, 열 사이의 항목 간격, 모바일에서 열을 쌓을지 여부, 그리고 여러 열이 모바일에서도 한 행을 함께 쓸 때 모바일에서의 세로 정렬을 재정의할 수 있어요.

Emailify 플러그인의 미리보기 기능으로 모바일 재정의를 시각적으로 확인할 수 있어요.

이메일의 모바일 브레이크포인트. Emailify에서 내보낸 HTML 이메일에는 Figma 데스크톱 프레임의 너비에 따라 자동으로 정해지는 “브레이크포인트”가 하나 있어요. 예를 들어 Emailify 프레임이 600px이면 599px 이하에서 모바일 스타일과 재정의가 적용되기 시작해요.

일부 이메일 클라이언트나 앱의 읽기 패널은 너비가 700px보다 좁아서 데스크톱 레이아웃 대신 모바일 스타일이 렌더링될 수 있어요. 그래서 이메일 너비는 보통 600px에서 640px 사이로 유지하는 것을 권장해요.

Settings를 연 다음 Figma에서 같은 유형의 Emailify 레이어를 여러 개 선택하면 설정을 일괄 적용할 수 있어요. 변경한 설정은 선택한 모든 레이어에 적용돼요.