레이아웃 요소에 테두리 선 추가

이메일 디자인의 레이어(예: Row, Column, Button 등)에 단색 테두리를 추가하려면 레이어를 클릭하고 Figma 선(stroke)을 적용하세요. 그러면 Emailify에서 내보내는 최종 HTML에 CSS 테두리로 자동으로 포함돼요.

테두리와 레이어 안쪽 콘텐츠 사이에 여유 공간을 두려면, 테두리를 적용한 뒤 해당 레이어에 패딩을 적용하는 것도 고려해 보세요.

이메일 클라이언트는 그라디언트 테두리를 지원하지 않는다는 점에 유의하세요. Figma 선에 그라디언트 채우기를 사용하면 최종 HTML 내보내기에서는 그라디언트의 첫 번째 단색으로 대체돼요.

콘텐츠 레이어 사이에 구분선 추가

이메일 레이아웃의 Column 안에서 콘텐츠 레이어 사이에 구분선을 넣어야 한다면 특별한 Emailify 구분선 요소를 추가할 수 있어요. “Column” 레이어를 클릭하고, 플러그인 하단의 Quick Add 드롭다운 메뉴에서 “Divider” 항목을 선택한 다음 Add + 버튼을 클릭하면 Column에 구분선 레이어가 삽입돼요.

구분선 레이어를 Column에 추가한 뒤 레이어 패널에서 레이어를 끌어다 놓아 어느 레이어 사이에 둘지 순서를 바꿀 수 있어요. 그다음 Figma 레이어 속성 패널에서 레이어의 Height를 조정해 크기를 바꾸거나, Figma에서 레이어의 Fill을 원하는 단색으로 바꿔 배경색을 조정할 수 있어요.

이메일 클라이언트는 그라디언트 테두리를 지원하지 않는다는 점에 유의하세요. 구분선에 그라디언트 채우기를 사용하면 최종 HTML 내보내기에서는 그라디언트의 첫 번째 단색으로 대체돼요.

구분선 레이어에 안쪽 패딩 추가

원한다면 Settings 패널이 열린 상태에서 이메일의 Emailify 구분선 레이어를 선택하고, Inner Padding 토글을 켠 다음 선택한 구분선 레이어에 적용할 패딩 값을 입력해 구분선에 안쪽 패딩을 추가할 수 있어요.

그러면 HTML로 렌더링될 때 구분선 레이어 안쪽에 “안쪽” 패딩이 추가되므로, Column 안의 다른 레이어에 영향을 주지 않고 특정 텍스트 레이어에 패딩 값을 지정할 수 있어요.

원한다면 Mobile Padding 토글을 켜고 선택한 구분선 레이어에 적용할 패딩 값을 입력해, 모바일에서 Emailify 구분선 레이어의 패딩을 재정의할 수도 있어요. 이 패딩은 모바일에서 HTML 이메일을 볼 때만 적용돼요.

레이아웃 요소의 배경에 모서리 둥글기 추가

Row 또는 Column 레이아웃 요소에 배경 채우기가 설정되어 있다면(선 없이), 레이어를 클릭한 다음 Figma의 Corner Radius 속성으로 모서리 둥글기 값을 설정해 배경에 둥근 모서리 효과를 줄 수 있어요.

이미지 기반 콘텐츠라면 주의하세요. 데스크톱보다 작은 모바일 모서리 둥글기를 적용하면, 전체 이미지 영역을 유지하기 위해 이미지가 정사각형 JPG로 내보내져요. 그래서 모바일에서는 더 작은 둥글기를 적용할 수 있지만, 둥글기가 PNG에 미리 반영되지는 않아요. 그 결과 Outlook은 CSS 모서리 둥글기를 지원하지 않으므로 이미지를 각진 모서리로 렌더링해요.

이메일 클라이언트는 테두리 선에 대한 모서리 둥글기를 지원하지 않는다는 점에 유의하세요. Figma 선이 있는 레이아웃 요소에 모서리 둥글기를 사용하면 최종 HTML 내보내기에서는 둥글지 않은 각진 테두리로 대체돼요.

선과 함께 모서리 둥글기를 사용할 때 중요한 참고 사항

모서리 둥글기는 선이 적용된 Column 레이어에서는 안정적으로 작동해요. 하지만 Row 레이어에서는 작동하지 않아요. Row는 HTML 표인데, 아쉽게도 표는 선에 대한 모서리 둥글기를 지원하지 않기 때문이에요.

아쉽게도 Outlook은 어떤 버전에서도 모서리 둥글기를 지원하지 않아서, 설정과 상관없이 항상 각진 모서리로 대체돼요.

가장 좋은 결과를 얻으려면 Row나 Wrapper가 아니라 선이 있는 Emailify Column 레이어에 모서리 둥글기를 바로 적용하세요. 다만 어떤 버전의 Outlook에서 보든 둥근 모서리가 렌더링되지 않는다는 점은 염두에 두세요.