노코드 툴, 버블을 활용해 B2B 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 등 다양한 무료 슬롯사이트와 쉽게 연동하도록 도와주는 플러그인이 많다. 다만, 자신에게 필요한 플러그인이 없을 수도 있으니 앞선 방법으로 접근해서 감을 익히는 게 더 좋다.

버블이 해외 툴이다 보니 국내 무료 슬롯사이트와 연동을 도와주는 플러그인은 많지 않다. 사이드 프로젝트인 버블박스에서 틈틈이 주기적으로 국내 플러그인을 만들고 있으니, 필요하다면 확인해 보자!