코드 없는 에디터로 인앱 메시지 만들기

인앱 템플릿(리치 미디어라고도 함)을 만들려면 콘텐츠(Content) → **인앱(리치 미디어)(In-Apps (Rich Media))**으로 이동하여 **템플릿 추가(Add template)**를 클릭하세요:

Pushwoosh 제어판의 리치 미디어 섹션에 있는 템플릿 추가 버튼을 보여주는 스크린샷

여기에는 세 가지 옵션이 있습니다:

HTML 인앱 메시지가 포함된 ZIP 파일 업로드.
사전 빌드된 템플릿 중 하나를 선택하고 사용자 정의.
처음부터 자신만의 템플릿 빌드.

이 문서에서는 처음부터 템플릿을 만드는 방법을 살펴보겠습니다. 기존 템플릿을 사용자 정의하려면 동일한 단계를 따르세요.

레이아웃 정의

필요한 콘텐츠 블록을 템플릿 본문으로 드래그 앤 드롭하여 템플릿 레이아웃을 정의합니다. 이미지, 텍스트, 버튼, 구분선, 채울 수 있는 양식, HTML 블록 및 메뉴를 추가할 수 있습니다.

한 행에 둘 이상의 콘텐츠 요소를 배치하려면 템플릿에 열(Columns) 요소를 추가하고 필요한 블록 유형을 선택한 다음 각 열에 콘텐츠를 추가하세요:

레이아웃의 배경색을 변경하려면 바깥쪽 여백을 클릭하고 전체 레이아웃이 선택되었는지 확인한 다음 색상을 선택하세요:

전체 레이아웃이 선택된 경우 패딩 설정을 편집하고 배경 이미지를 업로드할 수도 있습니다.

세로 및 가로 리치 미디어 만들기

Pushwoosh는 세로 및 가로 방향 모두에서 리치 미디어 콘텐츠를 만들 수 있는 유연성을 제공하여 모든 기기에서 캠페인이 시각적으로 매력적이고 효과적이도록 보장합니다.

세로 리치 미디어

일반적으로 모바일 기기에서 사용되는 세로 방향으로 디자인된 리치 미디어를 만들려면 에디터에서 모바일(Mobile) 탭으로 이동하세요. 여기에서 스마트폰 화면에 적합한 세로 레이아웃에 맞게 콘텐츠를 디자인할 수 있습니다.

가로 리치 미디어

태블릿과 같은 넓은 화면이나 게임 또는 음악 플레이어와 같은 가로 방향 앱에 일반적으로 표시되는 가로 방향 리치 미디어의 경우, 에디터 내에서 데스크톱(Desktop) 탭으로 이동하세요. 여기에서 더 넓은 가로 공간을 활용하도록 리치 미디어를 구성할 수 있습니다.

세로 및 가로 방향 간 전환을 위한 모바일 및 데스크톱 탭을 보여주는 스크린샷

가로 리치 미디어에 열 추가하기

가로 리치 미디어에 열을 추가해야 하는 경우, 먼저 열(Column) 요소를 추가하고 필요한 열의 수와 레이아웃을 정의하세요.

열이 있는 가로 리치 미디어를 디자인한 후 모바일(Mobile) 탭으로 전환하세요.

설정 패널 하단에 있는 반응형 디자인(RESPONSIVE DESIGN) 섹션으로 스크롤을 내리고 모바일에서 쌓지 않기(Do Not Stack on Mobile) 옵션을 활성화하세요.

Pushwoosh는 또한 리치 미디어에서 열 레이아웃을 혼합하고 일치시킬 수 있습니다. 특정 열은 세로로 쌓고 다른 열은 가로로 유지하도록 구성할 수 있습니다. 이렇게 하려면 각 열 블록을 필요에 따라 조정하세요.

일부는 세로로, 다른 일부는 가로로 쌓이는 혼합 열 레이아웃 구성을 보여주는 스크린샷

콘텐츠 요소

제목

제목의 글꼴, 색상, 텍스트 정렬, 줄 높이 및 패딩 매개변수를 편집할 수 있습니다.

AI가 제목 텍스트를 생성하도록 하여 시간을 절약할 수도 있습니다. 스마트 제목(Smart Headings) 섹션의 버튼을 클릭하고 몇 가지 키워드를 입력한 다음 **제안 받기(Get Suggestions)**를 클릭하세요:

텍스트

텍스트는 제목과 동일한 방식으로 사용자 정의할 수 있습니다. 글꼴, 색상, 텍스트 정렬, 줄 높이 및 패딩 매개변수를 변경할 수 있습니다.

Pushwoosh AI 에디터를 사용하여 다른 톤으로 문구를 다시 작성하고, 글자 길이를 변경하고, 문법을 확인할 수도 있습니다. 이렇게 하려면 텍스트 블록 → **스마트 텍스트(Smart Text)**를 클릭하고 내장된 문구 형식 중 하나를 선택하세요:

이미지

이미지를 추가하려면 이미지 블록을 클릭하고 파일을 에디터 패널로 드래그하세요:

또는 파일을 업로드하는 대신 **이미지 URL(Image URL)**을 지정할 수 있습니다.

AI 이미지 생성을 실험해 볼 수도 있습니다. 이렇게 하려면 매직 이미지(Magic Image) 섹션의 버튼을 클릭하고 만들고 싶은 이미지를 설명한 다음 **이미지 생성(Generate Images)**을 클릭하세요:

액션(Action) 섹션에서 이미지를 클릭했을 때 수행되어야 할 액션을 설정할 수 있습니다: 웹사이트 열기(또는 앱 내 페이지로의 딥 링크) 또는 팝업 닫기. 사용자 정의 JavaScript 핸들러 속성을 삽입하여 이미지 클릭 액션을 설정할 수도 있습니다. 액션이 필요하지 않은 경우 이 설정을 무시하세요.

이미지를 클릭했을 때 모바일 앱의 페이지를 열려면 웹사이트 열기(Open Website) 옵션을 선택하고 딥 링크를 삽입하세요.

버튼

버튼이 템플릿에 추가되면 텍스트, 색상, 패딩 및 테두리를 사용자 정의할 수 있습니다.

AI가 버튼 텍스트를 만드는 데 도움을 줄 수 있습니다. 스마트 버튼 섹션의 버튼을 클릭하고 키워드를 입력한 다음 **제안 받기(Get Suggestions)**를 클릭하세요:

버튼을 클릭한 후 수행되어야 할 액션을 지정하려면 액션(Action) 섹션으로 이동하여 필요한 옵션을 선택하세요: 웹사이트 열기 또는 팝업 닫기. 사용자 정의 JavaScript 핸들러 속성을 삽입하여 버튼 클릭 액션을 설정할 수도 있습니다.

버튼을 클릭했을 때 모바일 앱의 페이지를 열려면 웹사이트 열기(Open Website) 옵션을 선택하고 딥 링크를 삽입하세요.

구분선

구분선은 콘텐츠 블록 사이에 배치할 수 있는 선입니다. 이를 사용하여 템플릿을 구조화하고 가장 중요한 블록을 강조하세요. 구분선의 너비, 선 종류, 정렬 및 패딩 설정을 변경할 수 있습니다.

양식

이 요소를 구성하려면 개발자의 도움이 필요합니다.

양식을 사용하면 사용자의 이메일, 전화번호, 선호도 및 향후 커뮤니케이션에 유용할 수 있는 기타 정보를 수집할 수 있습니다. 이 요소는 표준 HTML 양식으로 구성됩니다: 데이터는 URL 필드에 지정된 주소로 GET 또는 POST 요청으로 전송됩니다.

URL 필드와 요청 메서드 설정이 있는 양식 구성 패널을 보여주는 스크린샷

필드 이름을 클릭하여 매개변수를 구성하세요:

필드 유형: 필드에서 전송되어야 하는 데이터 유형;
필드 이름: 필드의 데이터가 전달되는 매개변수 이름;
필드 레이블: 필드 위에 표시되는 텍스트;
플레이스홀더 텍스트;
양식을 제출하는 데 필드가 필수인지 여부를 나타내는 확인란.

필드 유형, 이름, 레이블 및 플레이스홀더를 포함한 양식 필드 구성 옵션을 보여주는 스크린샷

다른 필드를 추가하려면 **새 필드 추가(Add New Field)**를 클릭하고 데이터 유형을 선택하세요:

새 필드 추가 버튼과 사용 가능한 필드 데이터 유형이 있는 드롭다운 메뉴를 보여주는 스크린샷

너비, 정렬, 필드 간 간격, 버튼 텍스트, 색상 및 글꼴과 같은 양식 매개변수를 사용자 정의할 수 있습니다.

HTML

템플릿에 자신만의 HTML 코드를 포함하려면 HTML 블록을 추가하세요.

메뉴

메뉴(Menu) 요소를 사용하면 여러 개의 클릭 가능한 항목을 행이나 열에 배치할 수 있습니다. 예를 들어, 탐색 모음이나 회사 연락처를 추가할 수 있습니다.

메뉴 항목을 추가하려면 **새 항목 추가(Add New Item)**를 클릭하세요:

템플릿에 메뉴 항목을 추가하기 위한 새 항목 추가 버튼을 보여주는 스크린샷

항목 텍스트를 추가하고 항목을 클릭했을 때 수행되어야 할 액션을 설정하세요:

가로 또는 세로 메뉴 유형을 선택하고 필요한 경우 항목 사이에 구분선을 추가하세요:

콘텐츠 개인화

본문 텍스트, 헤더 또는 버튼 텍스트를 개인화하여 콘텐츠를 더 관련성 있고 매력적으로 만드세요. 예를 들어, 사용자를 이름으로 부르거나 선호도를 언급할 수 있습니다.

먼저, 태그를 설정하고 사용자로부터 데이터 수집을 구성해야 합니다(예: 피드백 양식을 통해). 리치 미디어를 만들 때 필요한 콘텐츠 블록을 선택하고 **병합 태그(Merge Tags)**를 클릭한 다음 사용할 태그를 선택하세요:

다국어 템플릿

사용자가 사용하는 각 언어에 대해 리치 미디어 템플릿의 텍스트를 현지화할 수 있습니다. 이렇게 하려면 편집 가능 언어(Editable language) 목록에서 언어를 전환하고 각 언어의 콘텐츠를 개별적으로 편집하세요:

템플릿 콘텐츠를 선택하고 현지화하기 위한 편집 가능 언어 드롭다운 메뉴를 보여주는 스크린샷

콘텐츠가 현지화되지 않은 경우, **언어 설정(Language settings)**에서 **기본값(default)**으로 지정된 언어로 표시됩니다.

템플릿에 추가하는 모든 요소는 모든 언어에 대해 동일한 콘텐츠로 나타납니다. 템플릿에서 사용하는 모든 언어에 대해 추가된 텍스트(버튼 텍스트 포함)를 현지화하는 것을 잊지 마세요.

일반 템플릿 설정

팝업(Popup) 탭에서 일반 템플릿 설정을 구성할 수 있습니다:

화면에서 팝업 위치 설정;
팝업 너비 및 높이 변경;
테두리 둥글기 조정;
전체 템플릿에 대한 콘텐츠 설정 구성: 정렬, 너비, 글꼴 및 색상;
배경색 설정 또는 배경 이미지 추가;
닫기 버튼의 위치 및 모양 사용자 정의.

위치, 크기 및 스타일링을 포함한 일반 템플릿 설정이 있는 팝업 탭을 보여주는 스크린샷

템플릿 저장 및 사용

**저장(Save)**을 클릭하여 변경 사항을 적용하세요:

인앱 메시지 템플릿 변경 사항을 저장하기 위한 저장 버튼을 강조하는 스크린샷

이제 리치 미디어 템플릿을 사용하여 인앱 메시지를 보낼 수 있습니다. 이 가이드를 따라 진행하세요 >