브레이즈의 고급 기능을 더 쉽게 : Blux CRM Liquid 자판기

안녕하세요. Blux의 Software Engineer Lukas입니다.

오늘은 저희 팀에서 지난 1월 말 출시한 Blux CRM Liquid 자판기(이하 ‘Liquid 자판기’) 프로덕트에 대해서 소개드리고, 어떻게 Liquid 자판기가 탄생하게 되었는지에 대해 말씀드리고자 합니다.

먼저, Blux CRM 플러그인부터,

Liquid 자판기를 설명드리기에 앞서, Blux CRM 플러그인이 무엇인지부터 설명드려야할 것 같습니다. 이번 글에서는 Liquid 자판기에 대해 더 집중적으로 다룰 예정이기에 간략하게 설명드리도록 하겠습니다.

Blux CRM 플러그인에 대한 자세한 내용은 홈페이지를 참고해주세요.

Blux CRM 플러그인은 Braze라는 CRM 솔루션에서 활용할 수 있는 3rd-party 솔루션 서비스입니다. Braze 위에서 Blux의 AI 알고리즘을 활용하여 초개인화된 세그먼테이션 및 고객별 맞춤형 상품추천 경험을 제공합니다.

한편, Braze는 3rd-party 솔루션을 활용할 때 Liquid 라는 템플릿 언어를 사용해야 합니다. Blux CRM 플러그인 역시 3rd-party 솔루션이므로, Liquid를 통해 Braze 내에서 다양한 AI 기능들을 제공하기 위한 Liquid 템플릿 코드를 Raw Code 형태로 전달드린 바 있습니다. 이후 고객사의 마케터는 기능별 템플릿 코드를 복사/붙여넣기 하고, 필요한 파라미터를 복잡한 코드 화면에 입력해야 했습니다.

하지만 문제, Liquid 코드가 가져다주는 피로도,

팀 내에서 플러그인과 관련된 Liquid 코드 이슈 및 Feature 개발은 제가 담당하고 있습니다.

플러그인에 사용할 Liquid 템플릿 코드를 작성할 때, 사용자가 최소한의 리소스, 최소한의 입력으로 최대한 편하고 쉽게 사용할 수 있는 템플릿 코드를 작성하기 위해 많이 노력했었습니다.

하지만, 새로운 기능들이 추가되며 이에 따라 입력해야하는 파라미터도 늘어나고 이를 처리하기 위한 코드도 계속 늘어나며 템플릿 1개의 코드가 길면 100줄까지 넘어버리는 문제가 발생했습니다.

고객사의 마케터분들은 대체로 프로그래밍에 익숙하지 않기에 전달드리는 코드에 시각적으로 압도되어 피로도가 높아졌습니다. 아래 이미지는 기존에 고객사에 전달되었던 코드입니다. 이런 코드는 작성자이자 엔지니어인 제가 보아도 꽤나 피로한 코드입니다.

팀 내부적으로도 엔지니어의 입장에서도 꽤나 피로도가 높은 부분인데, 이걸 사용하는 마케터의 입장에선 Liquid 코드가 가져다주는 피로도가 꽤나 높을 것이고, 피로도가 높다면 아무리 우리의 플러그인이 가져다주는 성과가 크더라도 마케터의 플러그인 사용 빈도가 줄어들 것이고 사용자의 피로도 관리가 매우 중요하다고 판단하게 되었습니다.

때문에 저는 이런 문제를 개선할 방법이 없을까 고민하다, 여러 오픈소스에서 쉽게 테스트해보고 적용할 수 있는 간단한 UI가 포함된 Playground 같은 것에서 영감을 얻어, ‘사용자가 더 이상 코드를 직접 볼 필요 없이, 손쉽게 UI를 통해 클릭/입력 몇 번만으로 본인이 사용하고 싶은 기능들만 조합해 Liquid 코드를 생성할 수 있는 인터페이스를 제공하면 어떨까?’ 라는 생각을 하게 되었습니다.

이 아이디어는 팀 내에서 좋은 반응을 이끌어내었고, 곧바로 개발 착수 의사결정이 이루어졌습니다. 다른 작업과 병행하는 사이드 프로젝트의 성격이었기에 기한을 2주로 잡았으나, 작업하다보니 사용자 경험을 개선한다는 작업 자체가 꽤나 재밌었고, 얼른 고객사 마케터 분들께 제공하고 싶은 욕심이 생겨서 기한보다 1주일 빠르게 진행하였습니다.

자판기를 통해 더욱 편해진 Blux CRM 플러그인.

바로 앞에서도 말씀드렸지만, Liquid 자판기는 Liquid 언어에 익숙하지 않은 마케터 분들도 Blux CRM 플러그인을 손쉽게 활용하기 위한 도구(서비스)입니다.

Liquid 자판기는 아래 기능들을 제공하고 있습니다.

1. 기존보다 간단해진 설정 입력

• Blux CRM 플러그인에서 제공하는 기능들 각각에 알맞는 설정들이 표시되며, 사용자의 입력 값에 따라 Liquid 코드가 동적으로 생성됩니다.

2. 클립보드 히스토리 기능

• Client ID/Client Secret 값이나, 몇몇 기능들은 거의 변동없이 반복해 사용하는 경우가 많습니다. 이런 경우를 위해 히스토리를 저장하고 불러와 바로 사용할 수 있는 클립보드 히스토리 기능을 제공합니다.

3. UTM 태그 지원

• 일부 고객사에서 좀 더 세밀한 성과 측정을 위해 UTM 태그를 사용하는 경우가 있었습니다. UTM 태그들을 수동으로 추가하면서 휴먼 에러가 발생하는 경우가 꽤 있었고, 이러한 문제를 최소화하고자 동적 생성된 Liquid 코드에 사용자가 입력한 UTM 태그를 형식에 맞추어 추가해주는 UTM 태그 관련 기능을 제공합니다.

이 외에도 부가적으로 사용자가 캠페인 시작 전에 Braze에서 확인할 사항을 보여주는 체크리스트나, 처음 사용하는 사용자를 위해 노션과 연동된 Liquid 자판기 사용가이드를 제공하는 등 여러 부가 기능들을 제공하고 있습니다.

마무리하며

기존의 방식이 사용자에게 가져다주는 피로도를 어떻게 개선했는지에 대해 이야기해보았습니다. 저의 작은 노력들이 사용자에 좀 더 편안하고 좋은 경험을 제공할 수 있다는 점이 항상 뿌듯한 것 같습니다.

이번 글은 여러분들께 기술적인 내용보다도 사용자의 불편한 점을 어떻게 개선했는가에 대해 더욱 중점적으로 설명드리기 위해 최대한 기술적인 내용은 줄여보았습니다.

추후에 기회가 된다면 Liquid 자판기의 기술적인 내용을 다루는 글로 찾아뵙겠습니다 :)

긴 글 읽어주셔서 감사합니다.