노코드 툴, 버블을 활용해 B2B AI 서비스 만들기
AI 참여형 마케팅 서비스, 스냅폼을 런칭했습니다.
목차
1. AI 참여형 마케팅 서비스 스냅폼을 런칭했습니다.
2. 노코드로 B2B AI 서비스 만들기
- 아키텍처 설계하기
- 페이지 커스터마이징 구현하기
- SNS 공유 기능 구현하기
- 기업용 대시보드 만들기
3. 버블에서 외부 서비스 연동하기
- API로 연결하기
- 코드 활용하기
- 잘 만든 플러그인 활용하기
해당 글은 버블(Bubble)을 알고 있는 분에게 추천드립니다.
AI 참여형 마케팅 서비스
스냅폼을 런칭했습니다.
요즘 현생이 바빠서 경험 글을 끄적일 시간이 별로 없다. 낮에는 창업 팀에서 생성형 AI 서비스를, 밤에는 사이드 프로젝트인 버블박스를 운영하고 있다. 버블을 주제로 한 책도 출판하기로 해서, 주말에는 하루 종일 책만 집필하고 있다. 드디어 오늘 팀에서 만든 AI 서비스인 스냅폼을 런칭했다.
스냅폼은 프론트와 백엔드를 코드 없이 구현하는 노코드 툴, 버블(Bubble)을 활용해 빌드했다. 버블을 오랫동안 사용하면서 다양한 서비스를 만들었지만, 이렇게 복잡하게 사용한 건 처음이다. 요즘 국내에 버블을 찾는 분이 많은데, 좋은 경험이 될 것 같아 글을 공유한다.
??? : 경험 퍼가요~~스냅폼은 기업이 보유한 IP와 콘텐츠를 소재로 한 AI 스냅샷을 만들어 주는 서비스다. 팝업 스토어나 여행지 같은 오프라인 공간 혹은, 영화의 한 장면이나 뮤비 속 배경에 "나"를 주인공으로 하는 콘텐츠를 AI가 생성해 제공한다. 스냅폼의 미션은 생성형 AI를 활용해 단순한 시청이 아닌 참여하며 즐기는 콘텐츠 마케팅을 선도하는 것으로, 생성형 AI를 활용해 기업이 원하는 컨셉을 유저 참여형 콘텐츠를 만들어 제공하는 B2B 마케팅 서비스를 업으로 정의한 상태다. 기업은 브랜드 및 IP를 자연스럽게 홍보할 수 있고, 유저는 재미있는 경험을 할 수 있다. 유저가 스냅폼의 기업 페이지에 접속해 사진을 업로드하면, AI가 이를 학습해 기업이 원하는 컨셉을 담아낸 AI 스냅샷을 생성해 제공한다.
B2B 서비스는 초기 고객을 확보하기 힘들다. 더군다나 "AI"가 들어간 이상, 허들은 더 높아진다. 다행히 글로벌 여행 커뮤니티를 운영하는 트립소다와 함께 할 기회를 가지게 됐다. "집에서 세계 여행하기"를 컨셉으로 에펠탑, 피사의 사탑 등 세계의 다양한 관광 명소 앞에서 찍은 듯한 AI 스냅샷을 제공해 트립소다의 브랜드 마케팅을 진행 중이다. (24년 7월 말까지 참가 가능합니다)
노코드로 B2B AI 서비스 만들기
1. 아키텍처 설계하기
서비스는 버블에서 빌드했고, 모델 트레이닝 및 이미지 생성만 AI 개발자가 서버에서 코드로 구현했다. 전반적인 아키텍처는 다음과 같다. 유저가 스냅폼에서 사진을 모두 제출하면, 학습 사진을 S3에 업로드하고 API로 서버에 트레이닝을 요청한다. 트레이닝을 완료하면, 이미지를 생성해 S3에 업로드하고 SQS에 메시지를 전달한다. 버블에서 주기적으로 Queue를 확인해 생성 완료된 이미지가 있는지 파악하고, 확인이 되면 솔라피를 통해 카카오 메시지를 전달한다. 뭔가 더 자세한 게 있지 않을까 하는데... 비개발자인 내가 관여한 아키텍처는 요 정도...
참고 정보
- S3 : 구글 드라이브 같이 클라우드에 파일을 저장할 수 있는 서비스
- SQS : 애플리케이션 간 메시지를 주고받을 수 있는 서비스
- LabmdaLabs : 온디맨드 GPU를 빌릴 수 있는 서비스
- 솔라피 : 카카오 알림톡, SMS 등을 전송할 수 있는 서비스
- 슬랙 : 회사 내부 커뮤니케이션 서비스
실시간 이슈를 체크하기 위해 서비스 퍼널을 나누고, 각 퍼널의 마지막에 에러가 있는지 체크하게 만들었다. 만약 에러가 있을 경우에 즉시 확인할 수 있도록 슬랙에 알림을 보내게 설정했다. 또한, 로그 테이블을 별도로 만들고, 오류 발생 시에 관련 에러 값을 저장시켰다.
2. 페이지 커스터마이징 구현하기
스냅폼은 기업의 마케팅을 도와주는 서비스다. 기업마다 진행하는 마케팅의 컨셉과 톤 앤 매너는 현저히 다르며, 콘텐츠 페이지에서는 이를 반영할 수 있어야 한다. 즉, 기업의 니즈에 맞춰 페이지의 스타일을 커스터마이징 할 수 있어야 한다. 가령 왼쪽 페이지는 벚꽃 시즌을 위한 거고, 오른쪽은 겨울 시즌을 위한 마케팅 페이지다. 해당 계절에 맞춰서 버튼 색 등을 변경하면, 마케팅 톤 앤 매너를 더 잘 맞출 수 있다.
커스터마이징 기능을 위한 스타일 테이블을 별도로 만들고, 기업마다 메인 컬러, 서브 컬러 등을 데이터로 저장하게 만들었다.
그리고 CSS를 활용해 요소의 스타일을 기업 별로 다르게 적용되도록 설정했다.
3. SNS 공유 기능 구현하기
스냅폼이 노리는 마케팅 플로우는 (1) 내가 주인공인 콘텐츠로 재미를 제공하고 (2) 유저가 콘텐츠를 주변 사람에게 공유해 바이럴을 유도하는 것이다. 따라서, 콘텐츠를 확인하는 시점에서 바로 SNS 공유를 유도하는 플로팅 그룹을 만들었다.
참고로 SNS에 따라서 공유 기능을 구현하는 방식이 다르다. 먼저 페이스북, X(트위터)는 URL을 활용해 공유를 처리한다. 예를 들어, "http://www.facebook.com/sharer.php?u={Link}"를 유저가 실행하게 만들면, 페이스북에서 해당 {Link}를 바로 공유하는 페이스북 페이지가 실행됩니다. 이와 다르게, 카카오톡 공유는 JavaScript SDK를 활용해야 한다. 이때, 템플릿을 활용할 수 있으며 썸네일, 로고 등을 설정할 수 있다.
4. 기업용 대시보드 만들기
스냅폼의 타겟은 기업의 마케터이며, 마케터는 진행 중인 캠페인을 지표 기반으로 평가해 전략을 세운다. 따라서, 마케터를 위한 대시보드를 추가적으로 만들어 지표를 실시간으로 확인할 수 있게 만들었다. 사실 버블에서 일반 유저가 사용하는 서비스를 다 만들었다면, 대시보드를 만드는 건 그리 어렵지 않다. 테이블에 저장된 필드를 잘 조합해서 통계 값을 보여주거나 그래프로 나타나기만 하면 된다.
다만, 대시보드는 권한이 있는 사람만 접근할 수 있도록 조건을 잊지 않고 설정하는 게 중요하다.
버블에서 외부 서비스 연동하기
버블로 AI 서비스를 만든다고 한다면, 외부 서비스와 연동은 필수적이다. 애초에 버블에서 AI 모델을 작동시킬 수 없기에, AI 모델을 작동시키는 서버나 외부 서비스를 활용해야 한다. LLM 모델을 활용해 서비스에 적용하고 싶다면, chatGPT API 등을 활용하면 되기에 아키텍처가 어렵지 않다. 다만, 스냅폼은 서로 다른 유저가 각기 올린 이미지를 매번 트레이닝해서 유저 AI 모델을 만들어 활용해야 하므로 S3, LambdaLabs 등 연동해야 하는 서비스가 많을 수밖에 없다. 이렇게 버블에서 외부 서비스를 연동할 때, 크게 3가지 방법으로 접근할 수 있다. 필자도 해당 방법을 조합해서 외부 서비스를 버블과 연동시켰다.
1. API로 연결하기
버블에서 [App connector]를 활용해 쉽게 API를 통해 외부 서비스와 연결할 수 있다.
버블에서 API를 어떻게 써야 하는지 잘 모른다면, 아래 글을 참고해 보자
2. 코드 활용하기
버블은 노코드 툴이지만, JS와 NodeJS 코드를 함께 사용할 수 있다. 외부 서비스의 JS Library나 NodeJS로 모듈을 임포트해 외부 서비스와 연동을 코드로 짤 수 있다. 다음 이미지는 SQS와 연동하기 위해 Node.JS에서 SDK를 불러와 사용한 것이다.
버블에서 코드를 작성하는 방법은 아래 글에서 확인할 수 있다.
3. 잘 만든 플러그인 활용하기
API를 설정하는 방법도, 코딩을 하는 방법도 잘 모르겠다면 다른 사람이 만든 플러그인을 다운 받아 사용하면 된다. 버블 마켓플레이스를 확인해 보면 S3, SQS 등 다양한 서비스와 쉽게 연동하도록 도와주는 플러그인이 많다. 다만, 자신에게 필요한 플러그인이 없을 수도 있으니 앞선 방법으로 접근해서 감을 익히는 게 더 좋다.
버블이 해외 툴이다 보니 국내 서비스와 연동을 도와주는 플러그인은 많지 않다. 사이드 프로젝트인 버블박스에서 틈틈이 주기적으로 국내 플러그인을 만들고 있으니, 필요하다면 확인해 보자!
카카오, 채널톡 등 국내 서비스부터 슬랙, 구글 등 해외 서비스까지 버블박스가 만든 다양한 플러그인을 만나보세요!
www.bubblebox.kr
