LogoLogo
고객사례블로그스티비 바로가기
  • 홈
  • 스티비 시작하기
    • 개요
    • 시작 전 준비하기
      • 나만의 발신자 주소 만들기
      • 도메인 설정하기
      • 이메일 받아 볼 사람 추가하기
      • 콘텐츠 웹 발행 준비하기
    • 첫 이메일 보내기
    • 새로운 구독자 환영하기
    • 도움이 필요할 때
  • 이메일
    • 개요
    • 편집하기
      • 발송 준비하기
      • 템플릿 선택하기
      • 편집 상자 사용하기
        • 웹에서 보기
        • 텍스트
        • 이미지
        • 버튼
        • 1단 가로
        • 2단
        • 구분선
        • SNS 공유
        • SNS 링크
        • 지도
        • 동영상 미리보기
        • HTML 코드
        • 푸터
        • 공백
        • 상품 구매하기
      • 전체 스타일 설정하기
      • 수신거부 링크 추가하기
      • 개인화된 메시지 보내기
      • 이전 편집 내용으로 되돌리기
      • HTML 코드로 편집하기
    • 발송하기
      • 이메일 발송 상태 이해하기
      • 발송 기능 이해하기
      • 이메일 다시 보내기
      • 수신거부 구독자에게 이메일 보내기
      • 스팸 분류 비율 확인하기
    • 관리하기
      • 이메일 수정, 복사, 삭제하기
      • 이메일 검색하기
      • [태그]로 이메일 분류하기
    • A/B 테스트 따라하기
    • 발신자 관리하기
      • 발신자 주소 추가하기
      • SPF, DKIM 설정 이해하기
      • DMARC 설정 이해하기
    • 성과 확인하기
      • 통계 기능 이해하기
      • 이메일 통계 대시보드
      • 이메일 상세 통계
    • 이메일 공유하기
      • 이메일 공유 설정하기
      • SNS에 이메일 공유하기
      • 이메일 아카이빙하기
      • 내 홈페이지에 공유하기
    • 이메일 자동화하기
      • 자동 이메일 이해하기
      • 자동 이메일 사용하기
      • 자동 이메일 API 사용하기
      • 자동 이메일 발송하기
    • 자주 묻는 질문
  • 요금제와 결제
    • 개요
    • 요금제 이해하기
      • 요금제 이해하기
      • 요금제 종류
    • 결제하기
      • 요금제 결제하기
      • 구독자 수 구간 변경하기
    • 요금제 연장하기
    • 결제 주기 변경하기
    • 결제 정보 확인, 수정하기
      • 결제 정보 수정하기
      • 영수증 확인하기
    • 정기 결제 해지하기
    • 자주 묻는 질문
  • 사용자 및 워크스페이스
    • 개요
    • 내 정보 설정하기
      • 비밀번호 변경하기
      • 로그인용 이메일 주소 변경하기
      • 2단계 인증 설정하기
      • 탈퇴하기
    • 워크스페이스 설정하기
      • 워크스페이스 이해하기
      • 워크스페이스 만들기
      • 사용자 권한 설정하기
      • 워크스페이스 삭제하기
    • 보안 기능 설정하기
    • 자주 묻는 질문
  • 주소록
    • 개요
    • 주소록 만들고 관리하기
      • 주소록 만들기
      • 주소록 수정, 복사, 삭제하기
    • 구독자 추가하고 관리하기
      • 구독자 정보 이해하기
      • 구독 상태 이해하기
      • 구독자 추가하기
      • 구독자 정보 수정하기
      • 구독자 삭제하기
      • 수신거부 관리하기
      • 구독자 검색하기
      • 구독자 목록 내보내기
    • 구독자 분류하기
      • 세그먼트 사용하기
      • 그룹 사용하기
    • 구독자 모으기
      • 구독 받기
      • 구독자를 자동으로 분류하기
    • 구독자 통계 확인하기
      • 구독자 통계 확인하기
      • 구독자별 통계 내보내기
    • 자주 묻는 질문
  • 통계
    • 개요
    • 통계 조회하기
    • 통계 확인하기
    • 통계 내보내기
    • 자주 묻는 질문
  • 페이지
    • 개요
    • 페이지 구성 살펴보기
    • 페이지 만들고 관리하기
      • 페이지 만들기
      • 페이지 수정하기
      • 페이지 성과 추적하기
    • 페이지로 구독 받기
      • 페이지로 구독 신청 받는 방법
      • 페이지 URL 그룹 파라미터 사용하기
      • 페이지 URL 사용자 정의 필드 파라미터 사용하기
    • 구독자의 페이지 사용 방법
      • 페이지 로그인하기
      • 구독 정보 직접 수정하기
    • 자주 묻는 질문
  • 유료 구독 주소록
    • 개요
    • 유료 구독 주소록 설정하기
      • 유료 구독 주소록 만들기
      • 구독 상품 이해하기: 월간, 연간, 일회성
      • 유료 구독 폼 설정하기
      • 유료 뉴스레터 구독료 변경하기
      • 일반 주소록 → 유료 구독 주소록으로 변환하기
    • 유료 뉴스레터 운영하기
      • 유료 뉴스레터 발송하기
      • 구독자 문의 채널 설정하기
      • 유료 뉴스레터 운영 종료하기
      • 유료 뉴스레터 구독자 관리하기
        • 유료 구독 폼에서 구독하기
        • 유료 구독 주소록에 구독자 직접 추가하기
        • 유료 구독 주소록에서 구독자 구독 유형 변경하기
    • 유료 구독자 정기 결제 해지하기
    • 유료 뉴스레터 구독 환불 처리하기
    • 정산
      • 유료 구독 정산하기
      • 유료 뉴스레터 결제 내역 확인하기
      • 유료 뉴스레터 정산에 대한 세무 신고 방법
    • 자주 묻는 질문
  • 외부 서비스 연동
    • 개요
    • 카페24
      • 연동하기
      • 주요 기능 살펴보기
      • 연동 해제하기
    • 고도몰
      • 연동하기
      • 연동 해제하기
    • 식스샵
      • 연동하기
      • 주요 기능 살펴보기
      • 연동 해제하기
    • 도너스
      • 연동하기
      • 주요 기능 살펴보기
      • 연동 해제하기
    • 자주 묻는 질문
  • API, 웹훅
    • 개요
    • API 사용하기
    • 웹훅 사용하기
    • 자주 묻는 질문
  • 활용 팁
    • 오픈율 개선하기
    • 이메일 스팸 표시 방지하기
    • 자동 이메일 활용하기
    • 광고성 정보 수신 동의 여부 정기적으로 확인하기
    • 스티비의 발송 서버 예외 처리하기
    • 친구를 초대한 구독자에게 보상 주기
    • 시즌제 유료 뉴스레터 운영하기
    • 유료 뉴스레터 구독 할인 혜택 제공하기
    • 카페24 회원에게 자동 이메일 보내기
      • 카페24 회원에게 웰컴 이메일 보내기
      • 카페24 회원에게 기념일 축하 이메일 보내기
      • 카페24 회원에게 구매 유도 이메일 보내기
  • 문제 해결하기
    • 사용 중 문제가 생겼을 때
      • 받아 본 이메일이 편집한 내용과 다르게 표시될 때
      • 구독자 파일 업로드가 안 될 때
      • 이메일을 보냈지만 받아보지 못했을 때
      • 편집기의 텍스트가 모두 볼드 스타일이 적용된 것처럼 보일 때
Powered by GitBook
On this page
  • 이 글에서는
  • 이메일 전체를 HTML로 편집하기
  • HTML에서 메일머지 기능 사용하기
  • HTML에서 수신거부 기능 사용하기
  • HTML 에서 미리보기 텍스트 사용하기
  • 이메일의 일부만 HTML 코드로 편집하기

Was this helpful?

  1. 이메일
  2. 편집하기

HTML 코드로 편집하기

Previous이전 편집 내용으로 되돌리기Next발송하기

Last updated 8 months ago

Was this helpful?

이 글에서는

스티비 에디터를 사용하면 별다른 HTML 코드 편집 없이도 이메일을 만들어 보낼 수 있습니다. 그러나 필요하다면 HTML 코드로 이메일 전체를 편집하거나 일부분만 편집해서 보내는 것도 가능합니다. 그 사용법에 대해서 알아봅니다.


이메일 전체를 HTML로 편집하기

이메일 환경은 일반적인 웹 환경과 다르기 때문에 HTML 코드를 작성할 때 몇 가지 주의해야 할 점이 있습니다. 자세한 내용은 블로그 글을 참고하세요.

이메일 본문 전체를 HTML로 편집할 수도 있습니다. [템플릿] 단계에서 [HTML 에디터로 만들기]를 선택하면 이메일을 HTML 코드로 편집할 수 있는 화면이 표시됩니다. 왼쪽의 HTML 코드 입력창에 코드를 입력하면 오른쪽에서 실시간으로 작업 내용을 확인할 수 있습니다.

*주의: HTML 로 편집할 때 아래 태그는 사용이 불가능합니다. (Script 실행 코드도 사용할 수 없습니다.)

<script>, <head>, <body>, <html>, <style>, <form>, <input>, 
<button>, <noscript>, <meta>, <iframe>

HTML로 편집할 때도 스티비를 사용해 이메일을 발송한다면 [웹에서 보기], [수신거부] 등의 기능도 사용하는 것이 가능합니다. 아래 예시를 참고하세요.

  • 웹에서보기

    • <a href="$%permalink%$">웹에서 보기</a>
  • 수신거부

    • <a href="$%unsubscribe%$">수신거부</a>

HTML에서 메일머지 기능 사용하기

기본으로 제공되는 사용자 정의 필드의 Key 값은 다음과 같습니다.

  • $%email%$: 구독자의 이메일 주소

  • $%name%$: 구독자의 이름

HTML에서 수신거부 기능 사용하기

[HTML로 직접 만들기] 또는 [HTML 상자] 템플릿을 사용하는 경우 수신거부 치환자를 링크로 직접 입력하면 됩니다. 예를 들어 "수신거부"라는 텍스트에 수신거부 링크를 넣는다면 아래와 같이 넣어주면 됩니다. 텍스트 뿐만 아니라 이미지 등 다른 요소에도 동일하게 링크를 넣으면 됩니다.

<a href="$%unsubscribe%$">수신거부</a>

이렇게 추가한 수신거부 링크는 이메일을 발송할 때 구독자마다의 고유한 값으로 변환됩니다. 수신거부 기능은 이메일이 실제로 발송 된 경우에만 작동하며 '테스트 발송하기'로 발송한 이메일에서는 작동 하지 않습니다.

HTML 에서 미리보기 텍스트 사용하기

[HTML로 만들기 템플릿]에서는 발송정보의 미리보기 텍스트는 비활성화됩니다. HTML 템플릿에서도 미리보기 텍스트를 사용하려면 별도의 HTML 코드를 직접 입력해야 합니다. 아래 예제를 참고하여 미리보기 텍스트 HTML 코드를 작성합니다. "여기에 미리보기 텍스트를 입력하세요."를 미리보기 텍스트 내용으로 수정합니다. 줄바꿈 없이 이어서 작성하는 것이 좋습니다.

예제)

<table id="$stb-htmlv3$" style="height: 0px; max-height: 0px; border-width: 0px; border-color: initial; border-image: initial; visibility: hidden; line-height: 0px; font-size: 0px; overflow: hidden;display:none;">
<tr><td>미리보기 텍스트를 입력하세요.</td></tr></table>

작성한 코드를 이메일 콘텐츠 HTML 코드에 붙여 넣습니다. 태그가 있는 경우 태그 바로 아래에 붙여 넣습니다. 태그가 없는 경우 HTML 코드의 가장 상단에 붙여 넣습니다. 이렇게 입력한 내용은, 이메일 콘텐츠에는 표시되지 않고 받은 편지함의 미리보기 텍스트 영역에 표시됩니다.

이메일의 일부만 HTML 코드로 편집하기

💬 이내용은 스탠다드, 프로, 엔터프라이즈 요금제에 해당하는 도움말입니다.


HTML 코드 상자를 사용하면 본문 중 일부만 HTML 코드로 편집할 수 있습니다. HTML 코드 상자는 스탠다드 요금제부터 사용 가능합니다. 에디터에서 HTML 코드로 작성한 내용을 바로 확인 할 수 있습니다. 오른쪽 패널에서는 HTML 코드를 직접 입력하고 수정할 수 있습니다.

HTML 코드 상자에서도 전체 이메일 템플릿과 마찬가지로 아래 태그는 사용이 불가능합니다. Script 실행 코드도 사용이 불가능합니다.

<script>, <head>, <body>, <html>, <style>, <form>, <input>, 
<button>, <noscript>, <meta>, <iframe>

HTML 코드에서도 메일머지 기능을 사용할 수 있습니다. []의 Key값을 입력하면 구독자마다 개인화 된 메시지(예. 구독자 이름, 쿠폰 번호 등)를 발송할 수 있습니다. 태그는 $%key%$의 형식으로 입력하면 됩니다.

이 외에도 다른 필드를 직접 추가할 수 있습니다. 사용자 정의 필드를 추가하는 방법은 참고해 주세요.

사용자 정의 필드
구독자 정보 이해하기
HTML 상자를 사용할 때 기억할 다섯 가지!