---
url: "/ko/emailify/design/borders.md"
description: "레이아웃 요소에 테두리를 적용하고 콘텐츠 레이어 사이에 구분선을 넣을 수 있어요."
---

# 이메일 레이아웃에 테두리와 콘텐츠 구분선 추가

> 레이아웃 요소에 테두리를 적용하고 콘텐츠 레이어 사이에 구분선을 넣을 수 있어요.

## 레이아웃 요소에 테두리 선 추가 {#adding-border-strokes-to-your-layout-elements}

[Video](/assets/videos/emailify/design/adding-borders.mp4)

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

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

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

## 콘텐츠 레이어 사이에 구분선 추가 {#adding-divider-lines-between-your-content-layers}

[Video](/assets/videos/emailify/design/add-divider-lines.mp4)

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

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

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

### 구분선 레이어에 안쪽 패딩 추가 {#adding-inner-padding-to-your-divider-line-layers}

[Video](/assets/videos/emailify/design/divider-padding.mp4)

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

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

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

## 레이아웃 요소의 배경에 모서리 둥글기 추가 {#adding-border-radius-for-backgrounds-to-your-layout-elements}

[Video](/assets/videos/emailify/design/column-border-radius.mp4)

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

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

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

### 선과 함께 모서리 둥글기를 사용할 때 중요한 참고 사항 {#important-notes-on-using-border-radius-with-strokes}

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

아쉽게도 Outlook은 어떤 버전에서도 [모서리 둥글기를 지원하지 않아서](https://www.caniemail.com/features/css-border-radius/), 설정과 상관없이 항상 각진 모서리로 대체돼요.

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