브레이즈 Custom IAM 사용하기
Chat GPT를 활용해 Bottom up IAM 만들기
이번 글에서는 Chat GPT를 활용해 브레이즈 Bottom up IAM를 만드는 과정을 설명하려고한다. 평소 Bottom up IAM가 필요했던 분들이라면 아래 코드를 복사해서 사용해보시면 좋겠다.
Braze에서 IAM을 만드는 두가지 방법
브레이즈에서 IAM (in-app-messege)를 만드는 방법은 크게 두가지가 있다. 첫번째 방법은 Drag & drop editor를 사용하는 방식이고, Traditional editor를 활용하는 방식이다.
braze에서 IAM을 만드는 첫 화면Traditional editor방식
Traditional editor방식은 브레이즈에서 기본적으로 제공하는 IAM과 custom HTML을 활용한 방식으로 나뉘어져있다. 기본적으로 제공하는 IAM은 다양하지만 자유도가 낮고 디자인적으로 기존 UI와 이질감이 들며 세부적인 부분은 색상만 조율이 가능하고 글꼴이나 형태는 조절이 어렵다. Custom HTML은 말그대로 개발이 필요한 영역이라 마케터가 쉽게사용하지 못하는 영역이지만 반대로 개발을 할 줄안다면 그야말로 최고의 자유도를 가진 설정이기도 하다.
이런 개발의 어려움을 알았는지 Braze에서는 Custom IAM에 대한 템플릿을 제공해주고 있기는 하다. in-app-message-templates/braze-templates/1-braze-dashboard-carousel-modal/screenshot.gif at master · braze-inc/in-app-message-templates · GitHub 그러나 디자인적으로 별로이기도 하고 여전히 Bottom up IAM 버전은 템플릿으로 만들어 놓지는 않아보였다.
Drag&Drop 방식
두번째 Drag&Drop 기능은 각각의 요소들을 Drag&Drop하면서 IAM를 조직할 수 있도록 한 기능이다. 특히 이 기능이 출시되고 나서 정말 신세계를 맛봤는데, 이전과 달리 자유도가 높아져서 예쁜 modal을 많이 사용할 수 있게 된 점이 가장 매력적이었다. Custom HTML 처럼 자유도가 그렇게 높은 것은 아니지만 디자인적으로 자유도가 높아 자주사용되는 방식이다.
Drag&drop 예시 그러나 아쉬운 점은 여전히 형태는 Cental modal의 형태만 지원 가능하며 bottom up modal의 기능은 여전히 제공하지 않는다는 점이다. 현업에서 사용하면 아시겠지만 bottom up modal이 필요한 경우가 왕왕있는데 이는 Custom HTML로 구성해야한다는 단점이 있다. (= 마케터에게 엄청 어렵다 ㅠ) 그렇다고 해서 개발자에게 요청을 했다가 거절당한적도 몇번있었기에 , 혼자서 Chat GPT로 구현한 방법을 여러분에게 소개해드리고 코드를 공유하려고 한다.
Chat GPT로 Bottom up IAM 만들기
1. 예시 사진과 함께 질문하기
내가 만들고 싶은 형태의 IAM 와 함께 예시 사진을 같이 공유해줬다. 그리고 코드로 만들어 달라고했디. (처음에는 간단했다)
2. 그리고 여러번의 뚝딱거림
당연히 초반에 원하는 결과물을 얻기가 어렵기 때문에 (질문을 어떻게 하는지도 매우 중요한 것 같다) 거의 10번 가까이 Chat GPT랑 소통하면서 결과물을 만들어내는 과정이 필요했다
3. 결과 공유
내가 원하는 Bottom - up IAM을 아래처럼 만들 수 있었고, 코드는 여기에서 확인할 수 있다!
실제로 사용할 때는 body부분에서 img url과 상황에 따라서 버튼 내용을 변경하면 될 것이다. img 크기는 800x500사이즈를 추천한다. 아무쪼록 여러분에게 도움이 되었다면 좋겠다. �
