이메일 알림을 위한 기본서식 사용자 지정하기

Suite 모두 모든 플랜

빠른 경로: 관리자 > 채널 > 이메일

중요: 평가판에서는 이메일 기본서식을 편집하는 옵션이 기본적으로 사용 설정되어 있지 않으므로 일부 계정에 이 옵션이 사용 설정되어 있지 않을 수도 있습니다. 편집을 사용 설정하려면 하위 도메인, 회사 웹사이트 링크 및 원하는 변경 유형에 대한 간략한 설명과 함께 Zendesk 고객 지원팀에 문의하세요.

티켓 알림 및 헬프 센터 문서 알림을 포함하여 Zendesk에서 보내는 모든 이메일 알림은 이메일 기본서식으로 제어됩니다. 기본서식에는 HTML 이메일과 일반 텍스트 이메일 둘 다 있습니다. 각 이메일에 두 형식이 모두 포함됩니다. 최종 사용자가 사용하는 이메일 클라이언트의 기본 설정에 따라 표시되는 버전이 결정됩니다.

몇 가지 간단한 스타일 변경을 통해 브랜드를 반영하도록 HTML 기본서식을 사용자 지정할 수 있습니다. 이메일의 텍스트 버전에서 정보를 수정할 수도 있습니다.

팁: 고객 서비스 이메일 기본서식으로 시간을 절약하는 방법을 알아보려면 이 Zendesk 블로그 게시물을 참조하세요.

이 문서는 다음 섹션으로 구성되어 있습니다.

이메일 기본서식 편집하기
HTML 기본서식 편집하기
텍스트 기본서식 편집하기
시스템 자리 표시자 이해하기

이메일 기본서식 편집하기

고객에게 보내는 이메일 알림의 디자인을 사용자 지정할 수 있습니다. 알림에는 HTML 기본서식과 일반 텍스트 기본서식이 있습니다.

Enterprise 플랜 사용자는 이메일을 공개적으로 배포하기 전에 샌드박스에서 이메일을 변경하고 변경 내용을 테스트할 수 있습니다(샌드박스에서 변경 내용 테스트하기 참조).

이메일 기본서식을 편집하려면 다음과 같이 하세요.

관리 센터의 사이드바에서 채널을 클릭한 다음 Talk 및 이메일 > 이메일을 선택합니다.
이메일 기본서식 섹션에서 이메일에 사용자 프로필 사진 표시를 클릭하여 이메일에 사용자 프로필을 표시합니다.
모든 이메일 클라이언트가 기본적으로 이미지를 표시하는 것은 아닙니다.
필요에 따라 HTML 기본서식을 수정합니다.
필요에 따라 텍스트 기본서식을 수정합니다.
기본 버전을 사용하여 처음부터 새로 시작하려면 기본서식 아래에 있는 기본값으로 되돌리기를 클릭합니다.
페이지 아래쪽에 있는 저장을 클릭합니다.
이메일 기본서식이 업데이트됩니다.

이메일 기본서식을 사용자 지정하는 것 외에 다음과 같이 이메일 자체를 변경할 수도 있습니다.

사용자 프로필 사진 표시
티켓 링크 추가 또는 제거
이메일 알림에서 구분 기호 추가 및 제거하기
유동 마크업 사용

참고: 유동 마크업은 티켓 알림의 매크로, 트리거 및 자동화에서 지원되지만 팔로워에게 보내는 이메일 알림 등 헬프 센터 문서 알림에는 지원되지 않습니다. 유동 마크업을 사용하여 이메일 알림의 모양을 변경하는 대신 여러 브랜드와 함께 이메일 기본서식 사용하기에 대한 단계를 따를 수도 있습니다.

HTML 기본서식 편집하기

HTML 기본서식에서 HTML과 CSS를 편집하여 HTML 이메일의 모양을 변경할 수 있습니다.

참고: 평가판에는 HTML 기본서식 편집 기능이 기본적으로 사용 설정되어 있지 않습니다. HTML 기본서식 편집을 가능하게 하려면 해당 하위 도메인으로 Zendesk 고객 지원팀에 문의하세요.

이 섹션에서는 다음과 같은 주제를 다룹니다.

HTML 이메일의 모양 변경하기
HTML 이메일 사용자 지정 가이드라인

HTML 이메일의 모양 변경하기

HTML 기본서식은 DIV 태그와 시스템 자리 표시자로 구성되어 있습니다.

자리 표시자는 이메일에 대부분의 콘텐츠를 제공합니다.

{{content}}는 필수로 삭제될 수 없습니다.
{{delimiter}}는 알림에 이메일 구분 기호를 사용하는 경우에만 필수입니다.
{{styles}} 및 {{attributes}}는 향후 사용을 위한 것으로 종종 시스템에서 오른쪽에서 왼쪽으로 쓰는 로캘을 지원하기 위한 스타일 및 속성을 삽입하기 위해 사용됩니다.
{{footer}}는 선택 사항입니다.

그 외 다른 자리 표시자는 기본서식에서 사용할 수 없습니다. 자세한 내용은 시스템 자리 표시자 이해하기를 참조하세요.

DIV 태그는 콘텐츠에 CSS 스타일을 적용합니다. CSS 스타일을 추가하거나 수정하여 이메일 전체, 구분 기호 또는 바닥글의 디자인을 변경할 수 있습니다.

팁: 여러 개의 브랜드를 설정한 경우에는 Andrew Soderberg가 기고한 팁인 각 브랜드에 사용자 지정 HTML 레이아웃을 사용하도록 이메일 기본서식을 구성하는 방법을 살펴보세요.

기본서식에서 스타일을 편집하려면 다음과 같이 하세요.

관리 센터의 사이드바에서 채널을 클릭한 다음 Talk 및 이메일 > 이메일을 선택합니다.
이메일 기본서식 섹션에서 필요에 따라 HTML 기본서식을 수정합니다.

표준 기본서식 자리 표시자를 사용하려면 자리 표시자 이름을 입력한 다음 표시되는 사용 가능한 옵션 중에서 선택하면 됩니다.
저장을 클릭합니다.

다음 예는 바닥글의 글꼴 색을 청록색으로 변경하는 방법입니다.

...
 <div style=" color: #009966;
              margin: 10px 0 14px 0;
              padding-top: 10px;
              border-top: 1px solid #eeeeee;" >
    {{footer}}{{footer_link}}
  </div>
...

다음 스타일 선언으로 글꼴 색이 청록색에 해당하는 16진수 값으로 설정됩니다.

color: #009966;

참고: 링크의 색은 사용자 지정할 수 없습니다. 링크는 :hover와 같은 CSS 가상 클래스로 스타일이 지정됩니다. 예: a:hover {color:#FF00FF;}. 인라인 CSS에서는 CSS 가상 클래스가 지원되지 않으며 Gmail과 같은 주요 이메일 클라이언트는 인라인이 아닌 모든 CSS를 제거합니다.

회사 로고와 같은 이미지를 기본서식에 추가하려면 해당 이미지를 참조하는 IMG 태그를 삽입하세요. 예:

<img src="http://YOURWEBSITE.com/logo.png"/>

참고: 로고 및 기타 이미지를 추가하기 전에 대부분의 이메일 클라이언트에서 기본적으로 이미지를 표시하지 않는다는 사실을 기억하세요.

로고에 하이퍼링크를 추가하려면 아래 예와 같이 앵커 태그 안에 IMG 태그를 넣으세요.

<a href="http://YOURACCOUNT.zendesk.com"><img src="http://YOURWEBSITE.com/logo.png"></a>

자세한 내용은 다음 리소스를 참조하세요.

Mozilla 개발자 네트워크상의 CSS 포털
헬프 센터 CSS 쿡북

HTML 이메일 사용자 지정 가이드라인

HTML 기본서식을 광범위하게 사용자 지정할 수 있지만 Zendesk는 사용자 지정 코딩을 지원하지 않는다는 점에 유의하세요. 2022년 6월 15일 또는 그 이후에 계정을 만든 경우에는 기본서식이 HTML5를 준수합니다. 지원되는 HTML5 태그에 대해 자세히 알아보려면 www.w3docs.com에서 HTML5 요소 참고자료를 참조하세요.

HTML과 CSS가 서로 다른 웹 브라우저와 이메일 클라이언트에서 렌더링되는 방식으로 인해 HTML 이메일을 디자인하는 일이 어렵습니다. 특정 유형의 서식은 스팸으로 인식될 수도 있습니다.

일반적으로 사용자 지정을 가능한 간단하게 하고 다음 가이드라인을 따르도록 하세요.

CSS3 스타일 선언을 사용하지 마세요. CSS1 또는 2를 사용하세요.
DIV 섹션을 더 추가하지 마세요.
텍스트 서식을 최소한으로 유지하세요. 굵은 텍스트가 많으면 스팸 필터가 실행될 수 있습니다.
이미지를 너무 많이 추가하거나(또 다른 스팸 필터 실행 요소) 사용하는 이미지 크기를 줄이지 마세요.
모든 이미지에 ALT 태그를 사용하세요. 이 태그는 사용자가 이미지 표시를 허용하기 전에 이미지에 대한 설명을 표시합니다.
이미지 너비와 높이를 알고 있다면 정의하세요. 그렇게 하면 이메일 클라이언트에서 이미지를 다운로드하기 전에 이메일의 레이아웃에 이미지 공간을 예약합니다.
모든 이메일 클라이언트가 배경 이미지를 지원하는 것은 아니므로 정보 또는 기능 디자인을 위해 배경 이미지에 의존하지 마세요.
종료된 Zendesk에 있는 이미지에 링크하지 마세요. 등록한 사용자 및 로그인한 사용자가 아닌 사람이 이메일을 받으면 이미지가 깨지게 됩니다.

텍스트 기본서식 편집하기

사용자가 HTML 형식으로 된 이메일 메시지를 읽지 않기로 선택할 때 텍스트 이메일 기본서식이 사용됩니다. 기본서식은 다음 두 가지 시스템 자리 표시자로 구성됩니다.

{{content}}

{{footer}}

{{content}} 자리 표시자는 텍스트 구분 기호, 티켓 제목, 비즈니스 규칙(트리거, 자동화 또는 매크로)에서 생성된 텍스트 및 티켓 댓글을 삽입합니다. {{footer}} 자리 표시자는 선택 사항입니다. 원하면 제거할 수 있습니다. 자세한 내용은 시스템 자리 표시자 이해하기를 참조하세요.

참고: 텍스트 기본서식에서 {{delimiter}} 자리 표시자는 필수가 아닙니다. {{content}} 자리 표시자는 구분 기호 텍스트를 포함합니다.

이메일에 줄을 추가하려면 기본서식에 추가하면 됩니다.

Thanks for contacting MondoCam Support!

{{content}}

{{footer}}

텍스트 기본서식을 편집하려면 다음과 같이 하세요.

관리 센터의 사이드바에서 채널을 클릭한 다음 Talk 및 이메일 > 이메일을 선택합니다.
이메일 기본서식 섹션으로 내려갑니다.
필요에 따라 텍스트 기본서식을 수정합니다.
페이지 아래쪽에 있는 저장을 클릭합니다.

시스템 자리 표시자 이해하기

알림 이메일에 있는 콘텐츠 대부분은 Zendesk 시스템에서 동적으로 생성된 것입니다. 동적으로 생성된 콘텐츠는 이메일 기본서식에 자리 표시자로 나타납니다. {{footer}} 등의 자리 표시자는 다음과 같이 이중 중괄호 안에 들어갑니다.

자리 표시자는 구분 기호 텍스트, 이메일 콘텐츠 및 바닥글을 삽입합니다.

{{delimiter}}: “##- 이 줄 위에 답장을 입력하세요 -##”라는 줄을 표시합니다. 시스템은 구분 기호를 사용하여 이전 콘텐츠와 새 콘텐츠를 구분합니다. 이메일에 답장을 하면 답장의 새 콘텐츠가 티켓에 댓글로 추가됩니다. 이메일 구분 기호를 사용하는 경우에는 HTML 기본서식에서 이 자리 표시자가 필수입니다. 이메일에서 구분 기호 텍스트 사용자 지정하기를 참조하세요.

{{content}}: 티켓 댓글 및 사용자 프로필 사진을 포함할 수 있는 이메일 콘텐츠를 표시합니다. 콘텐츠는 트리거, 자동화 또는 귀하의 계정에서 이메일을 보내는 그 밖의 모든 것에서 정의됩니다. 티켓 업데이트 및 알림을 위한 트리거 만들기 및 관리하기를 참조하세요.

{{quoted_content}}: 선택 사항으로, 메시지 기록을 표시합니다. 인용 콘텐츠는 보통 사용자의 이메일 애플리케이션에서 축소되지만 사용자가 확대할 수 있습니다. 예를 들어 Gmail에서 사용자가 줄임표(…)를 클릭합니다. 간소화된 이메일 스레딩 이해하기를 참조하세요.

{{footer}}: 선택 사항으로, YourZendeskName의 이메일 서비스입니다.”라는 줄을 표시합니다. 상담사에게 보내는 이메일에서는 상태와 요청자 같은 티켓 특성도 표시합니다. 최종 사용자에게 보내는 이메일에는 특성이 표시되지 않습니다.

{{footer_link}}: 선택 사항으로, “Zendesk에서 전송했습니다”라는 줄을 표시합니다. Zendesk를 누르면 http://www.zendesk.com으로 이동합니다.

{{styles}}: 선택 사항으로, 향후 사용을 위한 것으로 현재, 시스템이 이 자리 표시자를 사용하여 오른쪽에서 왼쪽으로 쓰는 로캘을 감지하는 경우 스타일을 삽입합니다.

{{attributes}}: 선택 사항으로, 향후 사용을 위한 것으로 현재, 시스템이 이 자리 표시자를 사용하여 오른쪽에서 왼쪽으로 쓰는 로캘을 감지하는 경우 속성을 삽입합니다.