💡 이런 고민이 있는 분께 이 페이퍼를 추천해요
- 개발 리소스 없이 인터랙티브한 Custom HTML IAM을 만들어보고 싶은 분
- AI 도구를 활용해 마케터가 직접 IAM을 제작·수정하는 워크플로우가 궁금한 분
- 정해진 템플릿을 넘어 앱 UI와 어울리는 인앱 메시지를 구현하고 싶은 분
윌라스토리는 무료 젤리 획득 방법을 한 화면에서 안내하기 위해 바텀시트형 Custom HTML IAM (In-App Message) 를 제작했습니다. BrazeAI Operator로 HTML 코드를 생성·수정하고, logClick과 Query Builder로 버튼별 반응과 후속 행동을 측정한 과정을 소개합니다.
윌라스토리는 "웹소설, 오디오로 레벨업!"라는 슬로건 아래, 인기 웹소설을 성우 낭독 100% 리얼 오디오로 즐길 수 있는 국내 유일 오디오 웹소설 플랫폼입니다. 무협·로맨스 등 다양한 장르의 웹소설을 텍스트가 아닌 음성으로 감상할 수 있으며, 2026년 4월 런칭했습니다.
➡️ 윌라스토리 바로가기
윌라스토리는 유저가 웹소설 유료 회차를 감상할 때 사용하는 재화 '젤리'를 운영하고 있습니다. 콘텐츠 재생 이력은 있지만 아직 젤리를 유료로 충전한 적 없는 유저는 주로 무료 회차나 기다무(기다리면무료)를 중심으로 이용하는 단계라고 판단했습니다.
이 단계의 유저에게 곧바로 결제를 유도하기보다 무료 젤리로 유료 회차를 경험하게 하는 편이 콘텐츠 이용 장벽을 낮출 수 있다고 보았습니다. 이에 광고 시청, 친구 초대, 이벤트 참여라는 3가지 무료 젤리 획득 방법을 안내하는 캠페인을 기획했습니다.
콘텐츠 감상을 위해 앱에 진입한 세션 시작 시점에 안내 메시지를 노출하되, 콘텐츠 진입을 방해하지 않는 형태를 원했습니다. 또한 무료 젤리 획득 방법마다 이동해야 할 페이지가 달라 여러 경로를 한 화면에서 안내할 수 있는 구조가 필요했습니다.
기본 모달은 화면 중앙을 가리고, 슬라이드업은 여러 경로를 안내하기에 정보 영역이 부족했습니다. 이에 필요한 정보량과 여러 랜딩 경로를 함께 담을 수 있는 바텀시트 형태가 이번 캠페인에 적합하다고 판단했습니다. 다만 바텀시트는 브레이즈 기본 IAM 템플릿(Traditional Editor)으로는 제공되지 않는 형태였습니다.
따라서, Custom HTML IAM을 통해 바텀시트 UI와 화면 전환, 버튼별 딥링크 분기 로직을 구현했고, 이 과정에서 AI Operator를 활용했습니다.
💡 BrazeAI Operator의 기능과 활용 방법이 궁금하다면 BrazeAI Operator 가이드를 참고해보세요.
Amplitude Cohort Sync로 동기화한 ‘젤리 유료 충전 0회 유저’ 코호트에 Braze 필터를 추가했습니다. 최종 타겟은 콘텐츠를 2회 이상 재생했지만 젤리는 충전하지 않은 유저로 타겟을 좁혔습니다. 결제 경험은 없지만 콘텐츠에는 관심을 보인 유저에게 무료 젤리 획득 방법을 안내해 콘텐츠 소비 장벽을 낮추고자 했습니다.
💡 Amplitude Cohort Sync의 활용 사례가 궁금하다면 첫차, 앰플리튜드×브레이즈 Cohort Sync로 푸시 성과 3배 높이기를 참고해보세요.
BrazeAI Operator에 바텀시트의 제목과 설명, CTA 문구, 화면 전환 조건을 입력했습니다. Operator가 제안한 HTML 코드와 미리보기를 확인한 뒤, 버튼 위치와 문구 등 세부 사항을 수정했습니다.
하나의 Custom HTML 안에 두 개의 화면을 만들고, 버튼 클릭에 따라 CSS 클래스를 전환하도록 구현했습니다. 첫 번째 화면에서 ‘무료 젤리는 어떻게 모아요?’ 버튼을 누르면 3가지 획득 방법을 보여주는 두 번째 화면이 열립니다.
두 번째 화면의 ‘광고 보기’, ‘친구 초대’, ‘이벤트 참여로 젤리 받기’ 버튼과 ‘내 젤리 내역을 확인할래요’ CTA에는 각각 다른 딥링크를 연결했습니다. 유저가 원하는 방법을 선택하면 앱 안의 해당 기능으로 바로 이동합니다.
Custom HTML 안에 직접 만든 버튼은 일반 Braze 버튼과 클릭 집계 방식이 다릅니다. 윌라스토리는 각 버튼에 고유한 클릭 ID를 부여하고, 클릭 이벤트 핸들러에서 brazeBridge.logClick(clickId)를 호출해 버튼별 클릭을 브레이즈 분석에 남기도록 구현했습니다.
이렇게 기록한 클릭은 Braze의 In-App Performance 리포트에서 버튼 ID별로 확인할 수 있습니다.
버튼별 클릭 수만으로는 캠페인 이후의 유저 행동을 연결해 보기 어렵습니다. 윌라스토리는 Braze 데이터를 SQL로 조회하는 Query Builder를 활용해 각 버튼을 클릭한 유저의 external_user_id를 추출했습니다.
이 데이터를 바탕으로 어떤 유저가 어느 버튼에 반응했는지 확인하고, 캠페인 노출 전후의 행동 변화를 유저 단위로 비교할 수 있었습니다.
"단순히 개발 리소스를 절감하는 것뿐만 아니라, 기획 → 수정 → 확인의 사이클을 빠르게 반복할 수 있게 된 것 자체가 가장 큰 시간 절감 효과였다고 생각합니다."
ㅡ 윌라사업부 마케팅커뮤니케이션팀 강유진님의 인터뷰 내용
기존에는 캠페인을 구현하기 전에 디자인과 문구를 확정하고, 디자인·개발 요청과 개발 일정을 순차적으로 조율해야 했습니다. 버튼 위치나 문구처럼 작은 내용을 바꿀 때도 별도의 개발 요청이 필요했습니다.
이번에는 마케터가 BrazeAI Operator에 변경사항을 설명하고, 생성된 코드와 미리보기를 확인하면서 세부 사항을 직접 조정했습니다. 캠페인 진행 중에도 별도 개발 요청 없이 수정사항을 반영할 수 있어 기획·수정·확인 사이클과 전체 제작 시간을 단축했습니다.
캠페인 시행 후 2주간, 실제로 버튼을 클릭해 해당 기능으로 이동한 유저를 모수로 집계한 결과 무료 충전소 이용자 중 14%가 신규 유입, 5%가 복귀 유저로 나타났습니다. 친구 초대 이용자 중에서는 6%가 신규 유입, 1%가 복귀 유저였습니다. 이를 합하면 무료 충전소 이용자의 19%, 친구 초대 이용자의 7%가 이번 IAM을 통해 새로 유입되었거나 재참여했습니다.
캠페인 시행 후 무료 충전소 전체 이용자 수가 15.42%, 친구 초대 전체 이용자 수가 10.87% 증가했습니다.
캠페인 발송 후에는 유저들이 실제로 무료 젤리 획득에 관심을 보이고, 획득한 젤리를 콘텐츠 이용에 사용하는지를 우선 확인할 계획입니다. 단순히 무료 젤리 획득 건수를 늘리는 데 그치지 않고 콘텐츠 소비 활성화로 이어졌는지를 살펴보고, 장기적으로는 무료 젤리 사용 경험 이후 유료 충전으로 전환하는 유저가 늘어나는지도 함께 확인할 예정입니다.
윌라스토리는 이 구조를 콘텐츠 추천 캠페인으로도 확장할 계획입니다. 기존에는 유저가 관심 있어할 콘텐츠 1개만 추천하는 푸시를 발송했지만, 이번과 같은 인터랙티브 구조를 활용하면 여러 콘텐츠를 한 번에 추천하는 형태로 발전시킬 수 있을 것으로 기대하고 있습니다.
강유진 / 인플루엔셜 / 윌라사업부 마케팅커뮤니케이션팀
- 통합 독서 플랫폼 '윌라'와 웹소설 플랫폼 '윌라스토리'에서 CRM을 담당하고 있습니다.
이선아 / AB180 / Customer Success Manager
- AB180 의 Customer Success Manager로서 Braze, Amplitude를 활용하는 다양한 버티컬의 고객사를 담당하고 있습니다. 데이터 설계, 솔루션 연동, Full Cycle 마케팅 전략, 리텐션 개선 전략까지 솔루션 활용을 전문적으로 지원합니다
