이메일 배경 개인화 backgrounds

이 페이지의 내용: 이메일 디자이너에서 이메일 본문, 뷰포트, 구조 및 열 수준에서 배경색과 이미지를 설정하는 방법을 알아봅니다.

배경을 활용하면 브랜드 정체성을 강화하고 이메일의 주요 영역으로 시선을 집중시킬 수 있습니다. 이메일 디자이너에서는 본문 전체부터 개별 구조 및 열에 이르기까지 다양한 콘텐츠 수준에서 배경색이나 배경 이미지를 설정할 수 있어, 이메일 전반에서 배경이 표시되는 방식을 정교하게 제어할 수 있습니다.

이메일 디자이너에서 배경을 설정할 때는 다음 모범 사례를 참고하시기 바랍니다.

  • 디자인상 필요한 경우에만 본문에 배경색을 적용합니다.
  • 가능하면 열 수준으로 배경색을 설정하는 것이 좋습니다.
  • 이미지나 텍스트 구성 요소에 배경색을 적용하는 것은 관리가 어려우므로 피하는 것이 좋습니다.
  • 이메일 디자이너의 미리 보기 화면과 실제 렌더링 결과가 다를 수 있으므로, 전송 전에 실제 이메일 클라이언트에서 배경 이미지를 테스트합니다.

다음 설정을 사용하면 이메일 본문부터 개별 구조 및 열에 이르기까지 이메일 콘텐츠의 모든 수준에서 배경색이나 배경 이미지를 적용할 수 있습니다.

TIP
이메일에 테마가 적용된 경우, 특정 구성 요소에 대해 테마로 설정된 배경색을 직접 재정의 수 없습니다. 먼저 스타일 탭에 있는 전용 아이콘을 사용하여 해당 스타일의 잠금을 해제해야 합니다. 방법 알아보기

배경색 설정 background-color

  1. 본문 배경색 - 이메일 전체의 배경색​을 설정합니다. 왼쪽 팔레트에서 액세스할 수 있는 탐색 트리​에서 본문​을 선택한 다음, 오른쪽의 스타일 탭에 있는 전용 옵션을 사용합니다.

    탐색 트리에서 본문이 선택되고 스타일 패널에서 배경색 옵션이 강조 표시된 이메일 디자이너

  2. 뷰포트 배경색 - 뷰포트 색상​을 설정하여 본문 배경색과 별개로 모든 구조 구성 요소에 동일한 배경색을 적용합니다.

    모든 구조에 적용할 배경색을 선택할 수 있도록 색상 피커가 열려 있고 뷰포트 색상 옵션이 강조 표시된 이메일 디자이너의 스타일 패널

  3. 구조 배경색 - 특정 구조 구성 요소에 배경색을 적용하려면 캔버스나 왼쪽 팔레트에서 해당 요소를 직접 선택한 후 해당 구조에 대한 특정 색상을 설정합니다.

    배경색 옵션이 강조 표시된, 선택된 구조에 대한 이메일 디자이너의 스타일 패널

    note tip
    TIP
    이 경우, 뷰포트 배경색을 설정하지 않도록 주의하세요. 뷰포트 배경색을 설정하면 구조 배경색이 가려질 수 있습니다.
  4. 열 배경색 - 열 수준으로 배경색을 설정합니다. 마찬가지로, 왼쪽 팔레트에서 원하는 열을 선택한 후 해당 열에 대한 특정 색상을 설정해야 합니다.

    배경색 옵션이 강조 표시된, 선택된 열에 대한 이메일 디자이너의 스타일 패널

    note tip
    TIP
    나머지 이메일 콘텐츠를 편집할 때 더 큰 유연성을 제공하기 때문에 가장 일반적인 사용 사례이자 모범 사례입니다.

배경 이미지 설정 background-image

구조 또는 열 구성 요소의 콘텐츠에 배경 이미지​를 설정할 수도 있습니다. 주로 구조 수준에서 사용되며, 열 수준에서도 설정할 수는 있지만 실제로는 거의 사용되지 않습니다.

NOTE
일부 이메일 프로그램은 배경 이미지를 지원하지 않습니다. 지원되지 않는 경우 행의 배경색이 대신 사용됩니다. 이미지를 표시할 수 없는 경우 적절한 대체 배경색을 선택해야 합니다.

배경 이미지가 활성화되고 이미지 배치가 전체 높이 - 오른쪽으로 설정되어, 이미지가 열을 채우고 있는 모습을 보여주는 이메일 디자이너의 스타일 패널

TIP
이메일을 전송하기 전에 이메일 디자이너의 미리 보기 화면뿐만 아니라 실제 이메일 클라이언트에서도 배경 이미지가 어떻게 보이는지 확인합니다. 동일한 이미지와 배치 설정이라도 편집기에서는 올바르게 표시되지만, iOS용 Outlook과 같은 일부 클라이언트에서는 이미지가 늘어나거나 다르게 잘려 보일 수 있습니다.

배경 이미지를 설정한 후에는 이미지 배치 드롭다운 메뉴를 사용하여 이미지가 구조나 열을 채우는 방식을 조정할 수 있습니다. 아래 옵션을 선택할 수 있습니다.

다양한 옵션이 포함된 이미지 배치 드롭다운 메뉴가 표시된 이메일 디자이너의 스타일 패널 {width="80%"}

비율에 맞춰 채우기, 가운데 맞춤:

  • 맞춤 - 종횡비를 유지하지 않고 이미지를 늘려 컨테이너를 가득 채웁니다.
  • 전체 너비 - 컨테이너 너비에 맞춰 이미지 크기를 비례적으로 조절하고 세로 방향으로 중앙에 배치합니다.
  • 전체 높이 - 컨테이너 높이에 맞춰 이미지 크기를 비례적으로 조절하고 가로 방향으로 중앙에 배치합니다.

비율에 맞춰 채우기, 가장자리 기준 정렬:

  • 전체 너비 - 상단 - 전체 너비​와 동일하며, 컨테이너의 상단을 기준으로 정렬됩니다. 넘치는 부분은 하단에서 잘립니다.
  • 전체 너비 - 하단 - 전체 너비​와 동일하며, 컨테이너 하단에 고정됩니다. 넘치는 부분은 상단에서 잘립니다.
  • 전체 높이 - 왼쪽 - 전체 높이​와 동일하며, 컨테이너 왼쪽에 고정됩니다. 넘치는 부분은 오른쪽에서 잘립니다.
  • 전체 높이 - 오른쪽 - 전체 높이​와 동일하며, 컨테이너 오른쪽에 고정됩니다. 넘치는 부분은 왼쪽에서 잘립니다.

타일:

  • 반복 - 이미지를 원래 크기로 타일처럼 배치하여 컨테이너를 채웁니다.

크기 조정 없이 배치:

  • 왼쪽, 오른쪽, 중앙, 상단, 하단 - 이미지를 원래 크기로 유지하며, 컨테이너의 해당 가장자리나 중앙에 고정하여 배치합니다.
NOTE
가장자리에 고정하는 옵션은 위의 중앙 정렬 옵션과 비교했을 때, 이미지와 구조의 비율이 맞지 않을 경우 이미지의 어느 부분이 표시될지 더 세밀하게 제어할 수 있게 해줍니다.
AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to set background colors and images at the body, viewport, structure, and column levels of an email in the Email Designer, and Adobe’s best practices for doing so.

Intents:

  • Set a Background color for the whole email at the body level
  • Apply the same background color to all structure components using Viewport background color
  • Set a different background color for a specific structure component
  • Set a background color for a specific column
  • Set a Background image for a structure or column component and choose an Image placement option

Glossary:

  • Background color: A color applied to the whole email when Body is selected in the navigation tree (product-specific)
  • Viewport background color: A setting that applies the same background color to all structure components, independently of the body’s background color (product-specific)
  • Background image: An image set for the content of a structure or column component; falls back to the background color when not supported (product-specific)
  • Image placement: A dropdown that controls how a background image fills its container — by scaling it centered, scaling it anchored to an edge, tiling it, or positioning it without scaling (product-specific)

Guardrails:

  • Some email programs / clients do not support background images; when not supported, the background color is used instead, so select an appropriate fallback background color.
  • When setting a different background color per structure component, do not set a viewport background color, as it may hide the structure background colors.
  • Column-level background color is the most common use case and Adobe’s recommended best practice, for more flexibility when editing the rest of the email content.
  • Avoid using background colors on image or text components, as they are harder to manage.
  • Apply a background color to the body only if the design requires it.
  • A background image can also be set at the column level, though this is rarely used; the same fallback color and Image placement options apply there too.

Terminology:

  • Canonical name: Background — Acronym: n/a — variants: background color, background image, image placement
  • Do not confuse: “Background color” (body-level, whole email) ≠ “Viewport background color” (same color applied to all structure components)
  • Do not confuse: “Background color” (supported broadly by email clients) ≠ “Background image” (not supported by all email clients, falls back to background color)
  • Do not confuse the “Scale to fill, centered” Image placement options (Fit, Full Width, Full Height) with the “Scale to fill, anchored to an edge” options (Full Width - Top, Full Width - Bottom, Full Height - Left, Full Height - Right), which control which side is cropped instead of centering the image

FAQ:

  • Q: Where does Adobe recommend setting background colors? — At the column level, which is the most common use case and best practice, allowing more flexibility when editing the rest of the email content.
  • Q: What happens if a background image is not supported by an email client? — The background color is used instead, so select an appropriate fallback background color.
  • Q: How do I apply the same background color to all structure components? — Select Viewport background color, which can be set independently of the body’s background color.
  • Q: Why might my per-structure background colors not appear? — A viewport background color may hide the structure background colors; do not set one in that case.
  • Q: Can I set a background image at the column level? — Yes, though it is rarely used; the same fallback color behavior and Image placement options described for structures apply there too.
  • Q: What is the difference between “Full Width” and “Full Width - Top” / “Full Width - Bottom”? — “Full Width” scales the image proportionally to the container’s width and centers it vertically. The “Top” and “Bottom” variants anchor it to that edge instead, cropping the opposite side rather than centering.
  • Q: What is the difference between “Full Height” and “Full Height - Left” / “Full Height - Right”? — “Full Height” scales the image proportionally to the container’s height and centers it horizontally. The “Left” and “Right” variants anchor it to that side instead, cropping the opposite side rather than centering.
recommendation-more-help
journey-optimizer-help