# Braze Custom HTML In-App Message, 이제 개발자 없이 직접 만들어보세요

> 출처: https://retn.kr/blog/braze-custom-html-in-app-message/ · 수정 2026-10-16 · 리텐션 주식회사

Braze 드래그 앤 드롭 에디터는 모달과 풀스크린을 맡습니다. 슬라이드업과 Custom HTML은 여전히 기존 에디터에서 만듭니다. AI 코딩 에이전트로 Custom HTML 인앱 메시지를 직접 만드는 방법을 정리했습니다.

2026-10-16 업데이트: Braze 인앱 메시지 에디터의 변경 사항(드래그 앤 드롭 에디터, Custom code 블록, brazeBridge)과 B.Layer·Braze 템플릿 저장소의 현재 상태를 반영했습니다.

## TLDR

Braze Custom HTML In-App Message 운영 성과를 높이려면, CRM 팀이 개발팀 대기열 없이 인앱 경험을 빠르게 실험할 수 있는 구조를 먼저 갖춰야 합니다.

- Braze Custom HTML In-App Message는 CRM 매니저의 오랜 숙원이자 병목
- 2026년 기준 Braze는 대부분의 인앱 메시지에 드래그 앤 드롭 에디터를 권장함. 다만 슬라이드업과 Custom HTML은 여전히 기존(traditional) 에디터에서 만듦
- 개발자 의존 → 우선순위 밀림 → 기회비용 손실의 악순환
- B.Layer(Phiture), IAM Studio 같은 Braze 파트너 도구가 있음. B.Layer는 무료(Freemium)와 유료(Premium) 버전으로 나뉨
- Braze 공식 템플릿 저장소의 커뮤니티 폴더는 2020년 이후 비어 있고, 저장소는 2024년 2월에 보관(archived)됨
- AI Coding Agent + 검증된 베이스코드 = 직접 만들 수 있는 시대
- **5명에게 무료로 직접 만드는 걸 도와드립니다**

## 1. CRM 매니저의 오랜 고통

CRM 매니저의 핵심 병목은 기획 역량이 아닙니다. Custom HTML In-App Message 배포가 개발 리소스에 묶여 있다는 점입니다.

Braze를 쓰는 CRM 매니저라면 한 번쯤 이런 경험이 있을 겁니다.

"이번 캠페인은 이런 디자인으로 인앱메시지 보내고 싶어요."

개발팀에 요청합니다. Custom HTML로 구현해야 하니까요. 그런데 우선순위에서 밀립니다. 급한 기능 개발, 버그 수정, 분기 목표... 인앱메시지 커스텀은 항상 "다음에"가 됩니다.

결국 Braze 기본 템플릿으로 타협하거나, 캠페인 자체를 포기합니다.

## 2. 기존 해결책들, 왜 아직도 불편할까?

기존 노코드 도구가 끝까지 해결하지 못하는 이유가 있습니다. 메시지 편집보다 앱마다 다른 UI 제약에 맞추는 비용이 훨씬 크기 때문입니다.

### SaaS 솔루션들

이 문제를 해결하려는 SaaS들이 나왔습니다:

- **B.Layer** (Phiture) - 노코드 인앱 메시지 빌더입니다. 만든 메시지를 ZIP이나 인라인 HTML로 내려받아 Braze의 Custom code 인앱 메시지에 넣습니다. 무료(Freemium)와 유료(Premium) 버전이 있습니다. ([B.Layer — Braze Docs](https://www.braze.com/docs/partners/message_orchestration/templates/blayer?ref=retn.kr), [B.Layer — Braze Marketplace](https://marketplace.braze.com/partners/blayer?ref=retn.kr))
- **IAM Studio** - Braze 파트너 노코드 템플릿 도구입니다. 템플릿을 고쳐 HTML 코드로 내보내고, Braze 인앱 메시지의 HTML 입력란에 붙여 넣습니다. ([IAM Studio — Braze Docs](https://www.braze.com/docs/partners/message_orchestration/templates/iam_studio?ref=retn.kr))

근데 이게 매 달 돈 내고 쓸 정도로 어려운 걸까요? 저도 처음엔 의아했습니다.

생각해보니 이해가 됩니다. 이벤트명이나 딥링크 바꾸는 건 쉽습니다. UI에서 입력만 하면 되니까요. **진짜 어려운 건 앱마다 다른 UI 구조 대응입니다.**

예를 들어볼게요:

- 안드로이드 nav bar를 어디서부터 잡아놨는지에 따라 bottom sheet 그리는 방식이 달라집니다
- iOS safe area 처리도 앱마다 다릅니다
- 상태바 영역을 어떻게 쓰는지도 제각각입니다

이런 케이스들을 전부 대응하려면 SaaS 입장에서 개발 비용이 엄청 들었을 겁니다. 그래서 구독료를 받을 수밖에 없었겠다고 생각합니다.

### Braze 드래그 앤 드롭 에디터 (2026년 기준)

Braze도 노코드 쪽으로 움직였습니다. 지금 Braze는 대부분의 인앱 메시지에 드래그 앤 드롭 에디터를 권장합니다. ([In-app messages — Braze Docs](https://www.braze.com/docs/user_guide/channels/in_app_messages?ref=retn.kr))

- 드래그 앤 드롭 에디터는 모달과 풀스크린 메시지를 만듭니다. 행(row), 콘텐츠 블록, 템플릿, 최대 10페이지짜리 멀티 페이지 흐름을 지원합니다.
- 슬라이드업 메시지와 Custom HTML 메시지는 여전히 기존(traditional) 에디터에서 만듭니다.
- 드래그 앤 드롭 에디터에도 Custom code 블록이 있습니다. 이 블록에 HTML, CSS, JavaScript를 넣을 수 있습니다. Connected Content 같은 고급 Liquid도 넣을 수 있습니다.
- 기존 Custom HTML 메시지를 드래그 앤 드롭 에디터로 바로 옮길 수는 없습니다. 새로 만들어야 합니다.
- 드래그 앤 드롭 메시지를 기존 에디터로 바꾸면 HTML로 변환됩니다. 다시 되돌릴 수 없습니다.
- 드래그 앤 드롭 메시지는 최소 SDK 버전(Swift 5.0.0+, Web 2.5.0+, Android 8.0.0+)을 쓰는 사용자에게만 표시됩니다.

출처: [Create an in-app message with drag-and-drop — Braze Docs](https://www.braze.com/docs/user_guide/channels/in_app_messages/drag_and_drop?ref=retn.kr), [Create an in-app message with the traditional editor — Braze Docs](https://www.braze.com/docs/user_guide/channels/in_app_messages/traditional?ref=retn.kr)

저희 판단은 이렇습니다. 표준 레이아웃의 모달이나 풀스크린이라면 드래그 앤 드롭 에디터로 먼저 만들어 보세요. 앱 하단 바텀시트, 슬라이드업 변형, 복잡한 인터랙션처럼 앱마다 UI를 맞춰야 하는 메시지는 여전히 Custom HTML이 필요합니다. Custom code 블록에 넣을 Connected Content 설정은 [Braze Connected Content 가이드](/blog/braze-connected-contents/)에 정리했습니다.

### Braze Community Template

Braze는 GitHub 저장소 [braze-inc/in-app-message-templates](https://github.com/braze-inc/in-app-message-templates?ref=retn.kr)에 커뮤니티 템플릿 폴더를 만들었습니다. 고객이 직접 만든 Custom HTML 템플릿을 모으려는 목적이었습니다.

그런데 2026년 10월 16일 기준 [이 폴더](https://github.com/braze-inc/in-app-message-templates/tree/master/community-templates?ref=retn.kr)에는 2020년 6월에 올린 안내 문서와 이미지 1개만 있습니다. 제출된 템플릿은 **하나도 없습니다.** 저장소는 2024년 2월 20일에 보관(archived)되어 읽기 전용입니다.

제가 보는 이유는 이렇습니다. 누군가 템플릿을 올리면 "우리 앱에서는 안 돼요" 라는 컴플레인이 달립니다. 앱마다 UI 구조가 다르니까요. 선의로 공유하면 욕먹습니다. 아무도 안 올립니다.

## 3. 게임 체인저: AI Coding Agent

AI Coding Agent의 실무 가치는 코드 자동 생성 자체가 아닙니다. 앱별 UI 예외를 고치고 다시 확인하는 반복을 빠르게 돌린다는 점입니다.

상황이 달라졌습니다.

**작동하는 베이스코드만 있으면**, AI Coding Agent가 우리 앱 환경에 맞게 커스텀해줍니다.

안드로이드 nav bar 위치 때문에 bottom sheet가 잘리나요? 상황 설명하면 됩니다. iOS safe area 처리가 우리 앱이랑 안 맞나요? 스크린샷 보여주면 됩니다. "여기가 이렇게 보이는데 저렇게 바꿔줘"라고 하면 됩니다.

이게 핵심입니다: **Community Template이 안 됐던 이유가 정확히 AI Agent가 잘하는 영역**입니다.

## 4. 사고 실험: 왜 1시간 안에 못 하나?

1시간 안에 못 하는 이유를 따져 보면, 제 경험으로는 대부분 기술 난이도보다 승인 단계와 역할 분리가 더 큰 병목입니다.

저는 항상 이 질문을 합니다. **왜 이걸 1시간 안에 못 하나?**

대부분의 경우 답은 특정 병목 하나입니다. Custom HTML In-App Message의 병목은 "코드를 짤 수 있는 사람"이었습니다. 개발자가 해야 했고, 개발자는 바빴습니다.

AI Coding Agent를 쓰면서 이 병목이 사라졌습니다. 두 달 걸리던 일이 2시간 내로 가능해졌습니다. 실제로 인앱 메시지를 만든 과정은 [AI 코딩 에이전트와 비개발자의 가능성](/blog/ai-coding-agent-nondev/)에 적었습니다.

## 5. 다음 실험: 직접 만들어보세요

실행 단계에서는 완성도보다 재사용 가능한 베이스코드, 명확한 프롬프트, 짧은 검증 루프를 먼저 갖추세요.

적용 순서는 3단계입니다. 1단계는 작동하는 코드 확보, 2단계는 앱별 UI 예외 수정, 3단계는 QA 체크리스트 고정입니다.

이제 여러분 차례입니다.

저는 여러분에게 **베이스코드와 가이드 문서(md files)**를 드리겠습니다. 직접 AI Coding Agent로 우리 서비스에 맞는 Custom HTML In-App Message를 만들어보세요.

Claude, Cursor, ChatGPT 뭐든 좋습니다. 베이스코드를 붙여넣고, 원하는 디자인을 설명하고, 테스트해보고, 안 되면 스크린샷 보여주면서 수정 요청하면 됩니다.

AI에게 맡길 때는 프롬프트에 다음 다섯 가지를 적으세요. 모두 Braze 공식 문서의 Custom HTML 규칙입니다. ([Custom HTML in-app messages — Braze Docs](https://www.braze.com/docs/user_guide/channels/in_app_messages/message_types/custom_html?ref=retn.kr))

1. SDK 호출은 전역 변수 `brazeBridge`를 쓸 것. Braze는 `appboyBridge`를 지원 중단(deprecated)했다.
1. 모든 JavaScript는 `ab.BridgeReady` 이벤트 콜백 안에서 실행할 것.
1. 버튼 클릭 추적 `brazeBridge.logClick()`의 버튼 ID에는 영문, 숫자, 공백, 대시, 밑줄만 쓸 것. 허용되지 않는 문자(악센트 문자 등)를 넣으면 클릭 집계가 깨진다.
1. `<head>`에 `<meta charset="UTF-8">`을 넣을 것. 한글 같은 비ASCII 문자가 깨지지 않는다.
1. 웹에서 쓴다면 SDK 초기화 옵션 `allowUserSuppliedJavascript`를 true로 둘 것. `enableHtmlInAppMessages`는 지원 중단된 옵션이다.

Custom HTML은 iOS·Android에서 각 플랫폼의 WebView로, 웹에서는 브라우저로 렌더링됩니다. 같은 코드도 플랫폼마다 조금 다르게 보일 수 있습니다. 실제 기기에 테스트 발송해서 확인하세요.

## 6. CTA: 5명에게 무료로 도와드립니다

무료 지원의 목적은 데모가 아닙니다. 실제 앱 환경에서 Custom HTML In-App Message를 배포할 수 있는 상태로 만드는 것입니다.

**🎁 베이스코드 + 가이드 문서 받기
**아래 폼에서 신청해주시면 검증된 베이스코드와 가이드 문서를 보내드립니다.

**🚀 5명 한정: AI Coding Agent로 직접 만드는 걸 도와드립니다
**"혼자 하기 막막해요" 하시는 분들을 위해, **선착순 5명**에게 AI Coding Agent로 Custom HTML In-App Message 만드는 걸 무료로 도와드리겠습니다.

- 화상 미팅으로 함께 진행
- 우리 앱 환경에 맞게 커스텀하는 과정 직접 보여드림
- 막히는 부분 실시간으로 해결

👉 [신청 폼 바로가기](https://forms.gle/3Z1D98eALzGjS5en8?ref=retn.kr)

**📞 CRM/마케팅 자동화 상담**

- 📧 [Contact Form](/contact/)
- 📅 [30분 예약](https://tidycal.com/simgyusup/30m?ref=retn.kr)

## 마치며

결론은 명확합니다. Braze Custom HTML In-App Message 성과는 누가 더 좋은 아이디어를 냈는가보다 누가 더 빨리 실험을 출시했는가에서 갈립니다.

개발자 리소스는 항상 부족합니다. 하지만 이제 CRM 매니저도 직접 구현할 수 있는 시대가 됐습니다. 병목을 제거하면 2달이 2시간이 됩니다. 빨리 출시한 만큼 효과도 정확히 재야 합니다. 캠페인 증분 효과를 검증한 과정은 [브레이즈 CRM마케팅 iROAS 검증 사례](/blog/braze-crm-marketing-iroas-review/)에 정리했습니다.

직접 해보세요. 막히면 도와드리겠습니다.

## 📚 더 읽어보기

- [0에서 1이 되는 순간: AI 코딩 에이전트와 비개발자의 가능성](/blog/ai-coding-agent-nondev/)
- [Braze Connected Content와 Sheet2API로 구글 시트 데이터 연결하기](/blog/braze-connected-contents/)
- [브레이즈 CRM마케팅 iROAS 분석, 월드클래스 분석가를 AI로 고용한 결과](/blog/braze-crm-marketing-iroas-review/)
- [멘탈 모델 3가지로 5분 만에 브레이즈 커머스 추천 시스템 완성하기](/blog/recommendation-system/)
- [브레이즈(Braze) 초급 벗어나 중·고수로 가는 방법](/blog/braze-road-to-master/)