설명서Journey OptimizerJourney Optimizer 안내서

이메일 디자인 시작 get-started-content-design

마지막 업데이트: 2026년 8월 19일

작성 대상:

  • {"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"}

이 페이지에서 다루는 내용: 이메일 디자이너에서 이메일 콘텐츠를 디자인하는 방법, 처음부터 코드를 작성하거나 가져온 HTML을 사용하여 이메일을 작성하는 주요 단계, 그리고 다양한 클라이언트에서 이메일이 제대로 표시되도록 하는 모범 사례를 알아봅니다.

style
shade-box

이메일 디자이너에 액세스하고 이메일 콘텐츠를 디자인하려면 먼저 여정 또는 캠페인에서 이메일을 만들어야 합니다.

그런 다음 Journey Optimizer​ 이메일 디자인 기능 ​을 사용하여 기존 콘텐츠를 가져오거나 응답형 이메일을 처음부터 빌드할 수 있습니다. 자세히 알아보기

이메일 디자이너를 통해 다음 작업도 수행할 수 있습니다.

  • Adobe Experience Manager Assets Essentials​를 활용하여 이메일을 보강하고 에셋 데이터베이스를 빌드하고 관리합니다. 자세히 알아보기

  • Adobe Stock 사진​을 찾아 콘텐츠를 빌드하고 이메일 디자인을 개선합니다. 자세히 알아보기

  • 프로필 속성에 따라 개인화한 동적 메시지를 만들어 고객의 경험을 향상시킬 수 있습니다. 개인화 및 다이내믹 콘텐츠에 대해 자세히 알아보십시오.

➡️ 비디오에서 이 기능 살펴보기

이메일 콘텐츠를 만드는 주요 단계 key-steps

이메일을 만들었으면 이메일 콘텐츠 디자인을 시작할 수 있습니다.

  1. 여정 또는 캠페인 구성 화면에서 콘텐츠 편집 화면으로 이동하여 [이메일 디자이너]에 액세스합니다. 자세히 알아보기

  2. [이메일 디자이너] 홈페이지에서 다음 옵션 중 이메일을 디자인할 방법을 선택합니다.

    • [이메일 디자이너]의 인터페이스를 통해 이메일을 처음부터 디자인​하고 Adobe Experience Manager Assets의 이미지를 활용합니다. 이메일 콘텐츠를 디자인하는 방법은 이 섹션을 참조하십시오 .

    • [이메일 디자이너]에서 직접 원시 HTML을 코딩하거나 붙여 넣습니다. 콘텐츠를 직접 코딩하는 방법은 이 섹션을 참조하십시오.

      note
      NOTE
      캠페인의 콘텐츠 편집 화면에서 코드 편집기 버튼을 선택할 수도 있습니다. 자세히 알아보기

    • 파일이나 .zip 폴더의 기존 HTML 콘텐츠를 가져옵니다. 이메일 콘텐츠를 가져오는 방법은 이 섹션을 참조하십시오.

    • AI 기반 이미지 HTML 전환기를 사용하여 이미지 디자인을 HTML 템플릿으로 전환​합니다. 이 섹션에서 정적 이미지를 편집 가능한 이메일 템플릿으로 전환하는 방법을 알아봅니다.

    • 기본 제공 또는 사용자 정의 템플릿 목록에서 기존 콘텐츠를 선택합니다. 이 섹션에서 이메일 템플릿으로 작업하는 방법에 대해 알아봅니다.

  3. 이메일 콘텐츠를 정의하고 개인화하면 보내기 전에 작성 패널에서 직접 자동화된 콘텐츠 확인​을 통해 이메일 콘텐츠를 확인하여 지원되지 않는 태그, 빈 div 및 크기 제한 위반과 같은 HTML 및 CSS 문제를 확인할 수 있습니다. 자세히 알아보기

    note
    NOTE
    또한 시스템에서는 설계 시 주요 설정을 확인하고 경고(권장 사항 및 모범 사례) 및 오류(테스트 또는 활성화를 방해하는 차단 문제)에 대한 경고를 표시합니다. 전자 메일 경고에 대해 자세히 알아보기

    문제가 있는 전자 메일 Designer의 콘텐츠 확인 창

  4. 또한 콘텐츠 품질을 확인하여 가독성, 콘텐츠 일치도, 효과성 관련 잠재적인 문제를 찾을 수 있습니다. 콘텐츠 품질 확인에 대해 자세히 알아보기

  5. 마지막으로 유효성 검사 또는 나중에 사용하기 위해 콘텐츠를 내보낼 수 있습니다. HTML과 자산이 들어 있는 zip 파일을 컴퓨터에 저장하려면 HTML 내보내기​를 클릭합니다.

이메일 디자인 모범 사례 best-practices

이메일 전송 시 수신자가 이메일을 전달할 수 있다는 것을 고려해야 합니다. 이로 인해 이메일 렌더링에 문제가 발생하는 경우도 있습니다. 이는 “is-desktop-hidden” CSS 클래스를 사용하여 모바일 디바이스에 이미지를 숨기는 경우와 같이, 특히 이메일 공급자가 지원할 수 없을 수도 있는 전달용 CSS 클래스를 사용하는 경우에 해당됩니다.

이런 렌더링 문제를 최소화하기 위해 이메일 디자인 구조를 가능한 한 간단하게 유지하는 것이 좋습니다. 데스크톱과 모바일 디바이스 모두에 적합한 단일 디자인을 사용하고, 복잡한 CSS 클래스나 기타 모든 이메일 클라이언트가 완전히 지원하지 않을 가능성이 있는 디자인 요소는 사용하지 않는 것이 좋습니다.

NOTE
CSS 처리가 기본 앱과 크게 다른 모바일 웹 브라우저를 통해 Gmail 또는 Outlook에서 이메일을 여는 경우에도 마찬가지입니다. 완전히 인라인 된 스타일을 사용하는 간단한 표 기반 레이아웃이 가장 안전한 방법입니다. 자세히 알아보기

이 모범 사례를 적용하면 수신자가 이메일을 보거나 전달하는 방식에 관계없이 이메일이 일관되게 렌더링되도록 할 수 있습니다.

이메일 디자인에 대한 모범 사례는 아래 테이블을 참조하십시오.

권장
신중하게 사용
권장하지 않음
  • 구조화를 위한 정적, 테이블 기반 레이아웃
  • 레이아웃 일관성을 위한 HTML 테이블 및 중첩 테이블
  • 600px~800픽셀 사이의 템플릿 너비
  • 스타일 지정을 위한 간단한 인라인 CSS
  • 범용 호환성을 위한 웹 지원 글꼴
  • 배경 이미지의 경우 특정 이메일 플랫폼에서는 표시되지 않을 수 있습니다.
  • 사용자 정의 웹 글꼴은 범용으로 지원되지 않습니다.
  • 넓은 레이아웃의 경우 작은 화면에서는 제대로 표시되지 않을 수 있습니다.
  • 이미지 맵은 제한된 기능만 제공합니다.
  • 임베드된 CSS는 이메일 게재 중에 제거되는 경우가 있습니다.
  • JavaScript는 일반적으로 이메일 환경에서 지원되지 않습니다.
  • <iframe> 태그는 대부분의 플랫폼에서 차단되어 있습니다.
  • Flash는 오래되어 더 이상 지원되지 않습니다.
  • 임베드된 오디오는 재생되지 않는 경우가 많습니다.
  • 임베드된 비디오는 많은 이메일 플랫폼과 호환되지 않습니다.
  • Forms는 이메일 내에서 작동하지 않습니다.
  • <div> 계층화로 인해 렌더링 문제가 발생할 수 있습니다.
NOTE
유럽 접근성법에는 모든 디지털 통신의 접근성을 보장해야 한다고 명시되어 있습니다. 이 섹션에서 소개하는 이메일 디자인 모범 사례 외에도, 이 페이지에서 설명하는 이메일 디자이너로 접근 가능한 콘텐츠를 작성하기 위한 지침을 따라야 합니다.

특정 보호 기능 및 제한 사항 email-guardrails

잘 구조화된 이메일이라도 열려 있는 클라이언트나 환경에 따라 다르게 렌더링될 수 있습니다. 아래 섹션에서는 이메일을 디자인할 때 염두에 두어야 할 알려진 제한 사항과 클라이언트별 동작을 설명합니다.

모바일 웹 브라우저 제한 사항 mobile-web-limitations

전자 메일 렌더링은 기본 모바일 앱이나 데스크톱 클라이언트를 사용하는 대신 받는 사람이 모바일 웹 브라우저​ (예: 전화의 Chrome)를 통해 Gmail 또는 Outlook ​을 열 때 다를 수 있습니다. 이는 모바일 웹 메일 환경의 알려진 제한이며 Journey Optimizer에만 국한되지 않습니다.

이러한 렌더링 차이는 웹 메일 클라이언트가 모바일 브라우저 내에서 작동하는 방식에서 비롯됩니다. 브라우저는 먼저 전체 데스크탑 웹 메일 UI를 렌더링하여 2개의 레이어를 깊이 있게 만듭니다. 이는 응답하는 CSS나 미디어 쿼리의 범위를 벗어납니다. Gmail 웹은 CSS <style> 블록을 제거하고 이메일 콘텐츠를 자체 <div>(으)로 래핑하므로 스타일을 재정의하고 정렬 충돌을 만들 수 있습니다.

일반적인 증상으로는 텍스트 정렬 이동(가운데 표시된 왼쪽 정렬 텍스트), 컨텐츠 섹션 사이의 추가 흰색 구분선 및 템플릿 디자인과 다른 전체 레이아웃이 있습니다.

이러한 문제는 모바일 브라우저를 통해 액세스할 때 Gmail Web 및 Outlook Web에서만 발생합니다. 모든 데스크탑 클라이언트뿐만 아니라 Outlook 및 Gmail 기본 모바일 앱도 영향을 받지 않습니다.

TIP
영향을 최소화하려면 다음 작업을 수행하십시오.

  • 완전히 인라인된 CSS를 사용하여 간단한 표 기반 레이아웃을 사용합니다.

  • 텍스트 정렬과 같은 중요한 레이아웃 속성에 미디어 쿼리 또는 <style> 블록을 사용하지 마십시오.

Outlook 렌더링 고려 사항 outlook-tips

Outlook에는 디자인 중에 설명되지 않을 경우 이메일 레이아웃에 영향을 줄 수 있는 렌더링 쿼리가 많습니다. Outlook에서 이메일이 올바르게 렌더링되도록 하려면 다음 모범 사례를 따르십시오.

  • 패딩, 글꼴 크기 및 너비에 짝수 번호를 사용합니다. Outlook에서는 픽셀을 내부적으로 점으로 전환하여 홀수를 사용할 때 간격이 균일하지 않고 흰색 선이 원하지 않을 수 있습니다.
  • 테이블 너비를 백분율이 아닌 픽셀 단위로 설정합니다. 백분율 기반 너비로 인해 Outlook의 레이아웃이 손상될 수 있습니다. 각 표의 스타일 속성에서 바로 너비 값을 적용합니다.
  • 항상 width 특성을 사용하여 이미지 너비를 설정하십시오. Outlook에서는 이미지에 대한 CSS width 및 height 속성을 무시하고 HTML 특성이 없는 경우 파일의 기본 차원으로 돌아갑니다.
  • 모든 이미지에 대체 텍스트를 포함합니다. 이렇게 하면 이미지가 차단될 때 디스플레이 및 보안 문제가 방지됩니다.
  • 표 요소 자체가 아니라 표 셀에 테두리를 적용합니다. 테두리가 예상대로 렌더링되지 않으면 <table>에서 <td>(으)로 이동하십시오.
  • 둥근 모서리를 사용하지 마십시오. CSS border-radius은(는) Outlook에서 안정적으로 지원되지 않습니다. 사각형 모서리는 안전한 기본값입니다.

미디어 쿼리 사용 방법 및 Outlook.com별 이미지 교체 기술을 비롯한 다크 모드 디자인 고려 사항은 이 페이지를 참조하십시오.

방법 비디오 video

메시지 편집기로 이메일 콘텐츠를 만드는 방법을 알아봅니다.

https://video.tv.adobe.com/v/3416234?captions=kor&quality=12&learn=on

A/B 테스트를 위한 콘텐츠 실험을 구성하여 비즈니스 목표 달성에 가장 도움이 되는 이메일 콘텐츠를 탐색하는 방법에 대해 알아봅니다.

https://video.tv.adobe.com/v/3447338?captions=kor&learn=on
recommendation-more-help
journey-optimizer-help