내장 에디터에서 인앱 메시지 만들기

Pushwoosh 내장 에디터에서 코드를 작성하지 않고 인앱 메시지 템플릿을 만드세요. 콘텐츠 블록, 이미지, 버튼, 개인화된 텍스트가 포함된 재사용 가능한 레이아웃을 얻을 수 있으며, 이를 Customer Journey, 일회성 인앱 또는 푸시에서 표시할 수 있습니다.

참고

시작하기 전에 Pushwoosh SDK를 통합하여 앱에 인앱 메시지가 표시되도록 하세요. 자세히 알아보기

새 인앱 템플릿 만들기

인앱 템플릿은 한 번 만들어서 캠페인에서 사용자에게 보여주는 재사용 가능한 디자인입니다. 사용자 지정 HTML ZIP을 업로드하거나 내장 에디터에서 빌드하여 만들 수 있습니다. 이 문서는 내장 에디터에서 처음부터 템플릿을 만드는 방법을 다룹니다. 기존 템플릿을 사용자 지정할 때도 동일한 단계를 따르세요.

1. 콘텐츠 → 인앱으로 이동합니다.
2. 템플릿 추가를 클릭합니다.

3. 템플릿 이름을 입력합니다.
4. 템플릿 생성 방법을 선택합니다:
   • ZIP 업로드: HTML 인앱 메시지가 포함된 ZIP 파일 업로드.
   • 새 템플릿 만들기: 내장 에디터에서 템플릿을 빌드합니다.
5. 새 템플릿 만들기를 선택합니다.
6. 템플릿 추가를 클릭합니다.

에디터 레이아웃 살펴보기

내장 에디터에는 네 가지 영역이 있습니다. 각 영역은 명확한 역할을 합니다.

상단 바

상단 바를 사용하여 템플릿 이름을 바꾸거나, 실수를 되돌리거나, 작업을 저장하거나, 메시지가 기기에 표시되는 방식을 변경해야 할 때 인앱 설정을 엽니다. 기기에서 인앱이 어떻게 보이는지 구성하기를 참조하세요.

캔버스

캔버스를 사용하여 사용자가 보게 될 메시지를 확인하고 레이아웃에서 직접 텍스트, 이미지, 버튼을 편집합니다. 빈 템플릿에는 블록으로 시작이 표시됩니다. 캔버스 위에는 휴대폰/태블릿 토글이 있어 미리보기 너비를 전환합니다. 이는 레이아웃을 변경하는 것이 아니라 미리보는 화면의 너비를 변경하는 것입니다.

레이어

레이어 패널은 템플릿의 모든 블록을 캔버스와 동일한 순서로 트리 구조로 나열합니다. 중첩된 블록(예: 그룹 내의 버튼)을 선택하거나 행을 드래그하여 콘텐츠 순서를 변경하고 싶을 때 왼쪽 가장자리에서 엽니다.

오른쪽 패널

오른쪽 패널의 블록을 사용하여 메시지에 콘텐츠를 추가하고, 전체 템플릿에 한 번에 적용되는 스타일링을 원할 때는 설정을 사용합니다. 템플릿 전체 스타일링 구성하기를 참조하세요.

템플릿 빌드 시작하기

템플릿을 생성하면 에디터가 빈 캔버스와 오른쪽에 블록 탭이 열린 상태로 열립니다.

1. 블록 패널에서 캔버스로 블록을 드래그하거나 패널에서 블록을 클릭하여 추가합니다.
2. 레이아웃이 준비될 때까지 같은 방식으로 블록을 계속 추가합니다.
3. 템플릿 전체 스타일링이 필요할 때 설정 탭을 엽니다.

콘텐츠 블록 추가하기

콘텐츠 블록은 내장 에디터에서 인앱 템플릿을 구성하는 요소입니다. 제목, 텍스트, 이미지, 버튼 및 기타 블록을 하나의 레이아웃으로 결합합니다.

블록 탭을 열고 캔버스로 블록을 드래그하거나 블록을 클릭하여 추가합니다. 사용 가능한 블록:

• 제목: 메시지의 제목 및 짧은 헤드라인
• 텍스트: 본문 및 긴 설명
• 버튼: 탭 가능한 행동 유도 문구
• 이미지: 미디어 스토어의 사진, 업로드 또는 URL
• 구분선: 섹션을 시각적으로 구분하는 선
• 2열: 나란히 있는 두 개의 동일한 열
• 3열: 나란히 있는 세 개의 동일한 열
• 4열: 나란히 있는 네 개의 동일한 열
• 33 / 67: 왼쪽이 너비의 약 33%, 오른쪽이 약 67%를 차지하는 두 개의 열
• 67 / 33: 왼쪽이 너비의 약 67%, 오른쪽이 약 33%를 차지하는 두 개의 열
• 타이머: 제안 및 마감일을 위한 카운트다운
• 메뉴: 탐색 또는 연락처와 같은 링크의 행 또는 열
• 소셜: 소셜 프로필로 연결되는 아이콘
• HTML: 양식이나 내장 비디오와 같은 사용자 지정 HTML

제목 및 텍스트

제목 및 텍스트 블록은 사용자가 인앱 메시지에서 읽는 문구를 담습니다. 캔버스에서 텍스트를 편집하고 도구 모음으로 서식을 지정합니다.

제목 또는 텍스트 블록을 클릭하여 캔버스에서 문구를 편집합니다. 텍스트를 선택하면 굵게, 기울임꼴, 밑줄, 정렬, 링크 버튼 및 텍스트 스타일 드롭다운이 포함된 서식 도구 모음이 나타납니다.

병합 태그는 사용자의 프로필에서 태그 값을 메시지에 삽입하는 자리 표시자로, 각 구독자가 개인화된 문구를 볼 수 있도록 합니다. 추가하려면 텍스트를 선택하고 도구 모음에서 병합 태그를 클릭한 다음 계정에서 태그를 선택하세요. 개인화된 인앱 메시지에 대해 자세히 알아보기

이미지

이미지 블록은 인앱 템플릿에 사진을 표시합니다. 캔버스에서 선택하여 오른쪽 패널에서 이미지 설정을 엽니다.

• 이미지 추가 / 이미지 교체: 블록이 비어 있을 때 이미지 추가를 클릭하거나 사진이 이미 설정되어 있을 때 이미지 교체를 클릭합니다. 파일을 업로드하거나 미디어 스토어에서 선택할 수 있습니다.
• 이미지 URL: 호스팅된 이미지 링크를 붙여넣습니다.
• 대체 텍스트: 접근성을 위해 이미지를 설명합니다.
• 링크 URL: 이미지를 탭했을 때 웹사이트를 엽니다.
• 링크 대상: 링크를 같은 탭 또는 새 탭에서 엽니다.
• 파일: 이미지를 추가한 후 사용 중인 파일의 경로를 표시합니다.

간격에서 패딩을 켜서 이미지 주위에 공간을 추가합니다. 모든 면에 동일한 패딩을 적용하려면 모든 면을 사용하거나, 각 면을 개별적으로 설정하려면 추가 옵션을 켭니다.

버튼

버튼은 인앱 메시지에서 탭 가능한 행동 유도 문구입니다. URL을 열거나, 사용자 지정 JavaScript를 실행하거나, 메시지를 닫는 데 사용합니다.

버튼 블록을 클릭하여 캔버스에서 레이블을 편집합니다. 도구 모음을 사용하여 글꼴 크기, 텍스트 색상, 굵게, 기울임꼴, 밑줄 및 정렬을 변경합니다.

사용자가 버튼을 탭했을 때 발생하는 작업을 설정하려면:

1. 도구 모음에서 링크 아이콘을 클릭하여 링크 삽입/편집을 엽니다.
2. 작업 유형을 선택합니다.
3. 해당 작업에 대한 필드를 채웁니다(아래 참조).
4. 저장을 클릭합니다.

웹사이트 열기

웹사이트 열기는 사용자가 버튼을 탭했을 때 링크를 엽니다. URL에 주소를 입력합니다. 입력할 수 있는 내용:

• 웹사이트: https://example.com
• 앱 내 화면을 여는 앱 링크: myapp://promo
• JavaScript 없이 인앱 닫기: pushwoosh://close

사용자 지정 JavaScript 실행

사용자 지정 Javascript는 사용자가 버튼을 탭했을 때 코드를 실행합니다. onClick 필드에 코드를 입력합니다.

탭이 링크를 여는 것뿐만 아니라 Pushwoosh에서 무언가를 해야 할 때 사용합니다. 앱의 사용자는 여전히 일반 버튼을 봅니다. 그들은 태그나 이벤트를 보지 않습니다. 화면에서 다음에 일어날 일은 사용자가 결정합니다: 메시지를 열어 두거나 동일한 onClick에서 닫습니다.

onClick에서 사용 가능한 메서드

• pushwoosh.closeInApp(): 인앱 메시지를 닫습니다. 탭 후 메시지를 열어 두려면 생략합니다.
• pushwoosh.sendTags({...}): 나중 캠페인을 위해 값을 기기 태그로 저장합니다.
• pushwoosh.postEvent(...): 예를 들어 Customer Journey를 시작하기 위해 사용자 지정 이벤트를 보냅니다.
• pushwoosh.getTags(...): 현재 태그를 읽습니다. 메시지가 표시하는 내용을 변경하기 위해 사용자 지정 HTML에서 유용합니다.
• pushwoosh.getCustomData(): 이 인앱을 연 푸시에서 전달된 사용자 지정 데이터를 읽습니다.

예: 사용자가 관심사를 선택하고 나중 캠페인을 위해 저장하도록 하기

1. 텍스트 또는 제목 블록에 질문을 추가합니다. 예: “어떤 스포츠에 관심이 있으신가요?”
2. 옵션당 하나의 버튼을 추가합니다. 예: 요가 및 헬스.

3. 각 버튼에 대해 작업 유형을 사용자 지정 Javascript로 설정합니다.
4. 요가 버튼의 경우 onClick에 다음을 붙여넣습니다:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. 헬스 버튼의 경우 onClick에 다음을 붙여넣습니다:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

사용자가 요가를 탭하면 Pushwoosh는 기기에 interest 태그를 쓰고 인앱을 닫습니다. 그런 다음 세그먼트 또는 Customer Journey에서 해당 사용자를 타겟팅할 수 있습니다.

JavaScript로 인앱을 만드는 방법에 대해 자세히 알아보기

구분선

구분선은 콘텐츠 블록 사이의 수평선입니다. 템플릿에서 섹션을 시각적으로 구분하는 데 사용합니다.

설정 패널에서 선 스타일(실선, 파선, 점선), 색상, 두께, 너비를 구성합니다.

HTML

HTML 블록을 사용하면 사용자 지정 HTML을 인앱 템플릿에 붙여넣을 수 있습니다. 인앱 메시지용 전용 양식 블록이 없을 때 사용자 지정 양식, 설문조사 또는 내장 비디오에 사용합니다.

예시

아래 예시는 인앱 템플릿에서 HTML 블록을 사용하는 일반적인 방법을 보여줍니다: 리드 양식, 설문조사, 내장 비디오.

참고

양식 및 설문조사 예시는 기기 태그를 저장하고 Pushwoosh를 통해 이벤트를 보냅니다. 캠페인에서 사용하기 전에 계정에서 사용자 지정 이벤트를 생성하세요.

리드 양식

이 리드 양식은 이름과 이메일을 태그로 쓰고, promo_requested 이벤트를 보내고, 감사 메시지를 표시한 다음 인앱을 닫습니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

설문조사

이 설문조사는 선택한 운동 시간을 태그로 저장하고, schedule_survey_completed 이벤트를 보내고, 감사 메시지를 표시한 다음 인앱을 닫습니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

비디오

이 예시는 YouTube 비디오를 인앱 메시지에 내장합니다.

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

메뉴

메뉴 블록은 여러 개의 클릭 가능한 항목을 행이나 열에 배치합니다. 탐색 바나 회사 연락처 목록에 사용합니다.

각 메뉴 항목에 대해 다음을 설정합니다:

• 레이블: 사용자가 보는 텍스트
• URL: 항목이 열리는 위치
• 대상: 같은 탭 또는 새 탭

블록 설정에서 다음을 설정할 수도 있습니다:

• 방향: 가로 또는 세로
• 정렬: 왼쪽, 가운데 또는 오른쪽
• 구분 기호: 항목 사이에 선택적 구분 기호
• 글꼴, 크기, 굵기, 글자 간격 및 링크/텍스트 색상

소셜

소셜 블록은 프로필에 연결되는 소셜 미디어 아이콘 행을 표시합니다. 인앱 메시지에서 사용자를 Facebook, Instagram, X 및 기타 플랫폼으로 보내는 데 사용합니다.

플랫폼 항목을 추가한 다음 정렬, 아이콘 크기 및 아이콘 사이의 간격을 설정합니다.

카운트다운 타이머

타이머 블록은 인앱 메시지의 카운트다운입니다. 기간 한정 제안, 플래시 세일 및 이벤트 알림에 사용합니다.

설정 방법:

1. 카운트다운에서 종료 날짜와 종료 시간을 설정한 다음 타이머 레이블의 시간대와 언어를 선택합니다.
2. 레이블을 켜서 숫자 아래에 “일 / 시간 / 분 / 초” 캡션을 표시하거나, 숫자만 표시하려면 끕니다.
3. 모양에서 배경, 숫자 색상, 레이블 색상 및 숫자(기본 40px)와 레이블(기본 16px)의 글꼴 크기를 설정합니다.
4. 필요에 따라 간격(패딩)을 조정합니다.

열

열은 캔버스를 나란히 있는 섹션으로 분할하여 한 행에 콘텐츠를 서로 옆에 배치할 수 있도록 합니다.

다음 블록 중 하나를 캔버스로 드래그합니다:

• 2열: 두 개의 동일한 열
• 3열: 세 개의 동일한 열
• 4열: 네 개의 동일한 열
• 33 / 67: 왼쪽 열 약 33% 너비, 오른쪽 약 67%
• 67 / 33: 왼쪽 열 약 67% 너비, 오른쪽 약 33%

그런 다음 각 열에 콘텐츠를 추가합니다. 템플릿의 모든 열에 대한 간격을 변경하려면 설정 → 열 기본값을 열고 외부 패딩, 열 패딩 및 열 사이의 간격을 조정합니다.

템플릿 전체 스타일링 구성하기

템플릿 설정은 전체 인앱 템플릿의 스타일링을 제어합니다: 문서 크기 및 배경, 팝업 모양, 블록의 기본 스타일.

오른쪽 패널에서 설정 탭을 엽니다.

사용 가능한 섹션:

• 문서: 전체 메시지 영역의 크기 및 모양: 너비, 패딩, 배경색 또는 이미지, 텍스트 색상, 글꼴 계열 및 블록 사이의 간격.
• 팝업: 어두운 배경 위에 메시지가 어떻게 위치하는지: 모서리 반경, 오버레이 색상 및 불투명도.
• 블록 기본값: 나중에 추가하는 블록에 대한 공유 시작 스타일로, 캔버스에서 블록을 재정의할 때까지 새 콘텐츠가 템플릿과 일치하도록 합니다.
• 열 기본값: 모든 열 레이아웃의 간격: 외부 패딩, 각 열 내부의 패딩 및 열 사이의 간격.
• 카드 기본값: 레이아웃에서 콘텐츠를 그룹화하는 카드 컨테이너의 시작 모양으로, 카드를 개별적으로 스타일링할 때까지 적용됩니다.
• 버튼 그룹 기본값: 여러 버튼이 그룹으로 함께 있을 때의 간격 및 정렬.
• 버튼 기본값: 새 버튼 블록의 시작 모양으로, CTA가 템플릿 전체에서 일관성을 유지하도록 하며, 개별적으로 스타일링할 때까지 적용됩니다.
• 구분선 기본값: 새 구분선 블록의 시작 선 스타일, 색상, 두께 및 너비.

기본값은 개별 블록이 재정의하지 않는 모든 곳에 적용됩니다.

참고

높이 설정은 없습니다. 팝업은 콘텐츠에 따라 커집니다. 전체 화면 메시지의 경우 설정에서 너비를 설정하고 인앱 설정에서 전체 화면을 선택하세요.

템플릿 현지화하기

다국어 템플릿은 하나의 인앱 디자인에 각 언어에 대한 현지화된 문구를 저장합니다. 캔버스 위의 언어 전환기를 사용하여 언어를 추가하고 언어별로 콘텐츠를 편집합니다. 채널 전반에 걸친 다국어 메시징 작동 방식에 대해서는 다국어 메시징을 참조하세요.

현재 언어에 대해 아직 번역하지 않은 콘텐츠는 흐리게 표시됩니다. 입력을 시작하여 번역을 생성합니다. 그렇게 할 때까지 기본 언어가 계속 표시됩니다.

참고

추가하는 모든 블록은 모든 언어에 대해 동일한 콘텐츠로 나타납니다. 템플릿에서 사용하는 모든 언어에 대해 새 텍스트 및 버튼 레이블을 번역하는 것을 잊지 마세요.

기기에서 인앱이 어떻게 보이는지 구성하기

인앱 설정은 메시지가 기기에서 어떻게 나타나고 동작하는지를 제어합니다: 위치, 애니메이션, 스와이프 제스처 및 닫기 버튼. 이 설정은 iOS 및 Android Native에만 적용됩니다.

상단 바에서 인앱 설정을 클릭합니다:

• 화면 위치: 전체 화면, 상단, 중앙 또는 하단.
• 표시 애니메이션 / 닫기 애니메이션: 없음, 페이드, 왼쪽, 오른쪽, 위 또는 아래, 또는 앱의 SDK 기본값을 사용하려면 기본값.

참고

없음과 페이드는 현재 Android에서 작동합니다. iOS에서는 메시지가 즉시 나타나고 사라집니다(정렬은 곧 제공될 예정입니다).

• 애니메이션 지속 시간(MS): 100 ~ 3000 밀리초. SDK 기본 타이밍을 사용하려면 비워 둡니다.
• 스와이프로 닫기: 왼쪽, 오른쪽, 위, 아래의 조합을 활성화합니다.
• 닫기 버튼 표시: 닫기 컨트롤을 켜거나 끕니다. 켜져 있을 때 위치(오른쪽 상단, 왼쪽 상단, 오른쪽 하단, 왼쪽 하단), 배경(색상 또는 투명), 아이콘 색상을 설정합니다. 이 모달의 다른 설정과 달리 닫기 버튼의 모양은 메시지 자체에 렌더링되며 iOS 및 Android Native뿐만 아니라 모든 플랫폼에 표시됩니다.

적용을 클릭하여 선택 사항을 저장하거나 취소를 클릭하여 취소합니다.

템플릿 저장하기

상단 바에서 저장을 클릭하여 변경 사항을 저장합니다. 상단 바의 실행 취소/다시 실행을 사용하여 편집 내용을 앞뒤로 이동합니다.

참고

저장하면 인앱 템플릿이 콘텐츠 → 인앱에 저장됩니다. 여기에서 템플릿을 미리 보고, 편집하고, 관리할 수 있습니다. 자세히 알아보기

저장된 템플릿 사용하기

인앱 템플릿을 저장한 후에는 Customer Journey, 일회성 인앱 또는 사용자가 푸시를 탭했을 때 사용자에게 표시할 수 있습니다.

• 고객 여정의 일부로 인앱 표시하기
• 클릭 시 인앱을 여는 푸시 보내기
• 사용자에게 단일 인앱 표시하기