<소개 📝>
안녕하세요, Green입니다.
HRD 자동화 스터디장님의 도움으로, Typebot이라는 툴을 알게 되어 사이트에 삽입할 수 있는 기본적인 사용자 맞춤 마케팅 챗봇을 만들어 보았습니다.
<활용한 툴 ⚒️>
Gemini, Typebot(타입봇)
<진행 세부 내용 🔍>
1️⃣ Gemini와 Typebot을 제작하기 위한 컨셉 도출용 스크립트 짜기
⚠️냅다 타입봇을 제작할 거니까 스크립트 짜달라고 하면 이해도가 떨어져요!
⭕제미나이에게 '이러이러한 타입봇 스크립트 짜달라' 고 요청하는 프롬프트까지도 만들고 시작했습니다.
내 브랜드에서 판매하는 제품을 제미나이에게 직접 조사시킨 후 대화하면, 제미나이는 앞선 맥락을 인지하고 타입봇 프롬프트 외에도 OpenAI API 연결할 때 AI에게 넣을 프롬프트도 짜 준답니다.
<질문 예시>
질문: 'Green Asthetic(*예시 브랜드명)' 이라는 브랜드의 앰플&이너뷰티 제품들을 판매하기 위한 프롬프트를 짜 줄래? 'typebot' 설문을 만들기 위한 제미나이 프롬프트야.
질문2: (*내가 판매하는 제품들의 제품명, 특징, 가격, 리뷰 등을 그대로 복사+붙여넣기)
질문3: '앰플1, 앰플2, 앰플3, 이너뷰티1, 이너뷰티2, 이너뷰티3' 이 제품들이 각각의 니즈에 맞춰서 무조건 타입봇 결과에 추천되도록 하고 싶어. 따라서, 각 제품에 대해 최대한 자세하게 먼저 조사해줄래?
✨Tip) 만약 우리 브랜드만의 #mood 가 있다면, 브랜드를 잘 표현하는 감성 이미지나 제품컷 등을 함께 넣고 '제미나이가 컨셉을 도출할 때 우리 브랜드 무드 컨셉을 가미할 수 있도록 프롬프트를 조금 더 보충해 줄래? Green Asthetic 브랜드는 인플루언서 마케팅도 하고, 30~40대 여성을 타켓하다 보니까 감성적인 측면도 있었으면 좋겠어.' 같은 요청을 입력해 보세요. 맥락이 늘어날수록 프롬프트도 자세해집니다.
2️⃣Gemini에게 Typebot 컨셉 도출용 스크립트를 넣고, 컨셉 확정 & 구체적인 플로우 짜기
Gemini가 구체적인 컨셉과 시나리오를 여러 개 제시해 주면, 최종 컨셉을 결정해 주세요!
그 뒤에는, ①구체적인 플로우는 어떻게 짜야 하는지, ②변수명은 어떤 걸로 입력하면 좋을지 등을 질문하며 타입봇을 만들어 가시면 됩니다.
✨Tip) 나는 특정 기능을 쓰겠다! 라던가, 여기서 OpenAI API를 연결하고 싶다! 같은 구체적인 요구사항이 있다면 Gemini에게 같이 요청하세요. 'Result 단계의 출력 부분에서 최종 추천하는 제품의 이미지와 링크를 함께 띄워주고 싶으니 변수를 같이 정해 줘.' 라던가, '추천 코멘트는 OpenAI 블록을 사용해서 프롬프트를 넣고 싶어' 처럼 말해주시면 됩니다.
3️⃣Typebot에서 플로우 만들기
Typebot은 Scratch처럼 비개발자도 챗봇 플로우를 짤 수 있는 사이트인데요. 가입 후, 새로운 프로젝트를 만든 뒤, 왼쪽 네비게이션에 있는 박스들을 드래그 앤 드롭으로 끌고 와 플로우를 짜 주시면 됩니다.
기본적으로 위와 같은 박스들이 있는데요, 더욱 구체적인 설명서는 여기를 참고해보시면 도움이 됩니다. 이번 예시 프로젝트에서 제가 사용한 기능들은 붉은 색으로 하이라이트를 해두었으니 참고해 주세요!
이 블럭들을 그럼 어떻게 쓰느냐? 하고 질문한다면, 참고차 아래를 보여드릴게요.
이렇게 기능들을 레고 블럭 조립하듯 쌓아낸 뒤, 화살표로 연결하여 최종 플로우를 완성하는 게 기본 골자인데요,
구체적으로 살펴보면, 곳곳에 다양한 기능이 사용되었음을 알 수 있답니다.
✨Tip) 화면 우측 상단의 'Test' 기능을 눌러 보면, 오른쪽에 뜨는 네비게이션 바에서 실제로 유저들에게는 이 타입봇이 어떻게 뜨는지도 확인할 수 있어요!
4️⃣ Theme & Settings 설정하기
타입봇 상단에는 Flow / Theme / Settings / Share / (Result) 탭이 있는데요.
Flow를 완성했다면 나머지 탭에서 완성도를 올릴 수 있답니다!
타입봇을 만든 뒤, 채팅창 배경이나 말풍선의 색, 폰트, 봇 아바타 등을 지정해주세요.
세팅 창에서는 챗봇이 메시지를 보내는 속도를 조절해서 실제로 대화하는 듯한 느낌을 연출할 수도 있어요. 또, 메타데이터도 넣어주면 인터넷에서 이 설문(챗봇)이 검색되었을 때나, 링크를 붙여넣기 했을 때 미리보기에서 구체적인 정보가 보이기 때문에 신뢰도를 높일 수 있답니다.
✨Tip) 메타데이터 작성이 어렵다면, Gemini에게 '메타데이터에 넣을 타이틀과 설명을 작성해줄래?' 라고 물어보세요! 여러 가지 아이디어를 제안해줄 거예요.
5️⃣ Publish 버튼을 눌러 배포하기
화면 우측 상단, 주황색 'Publish' 버튼을 눌러 손쉽게 설문/챗봇을 배포할 수 있답니다.
6️⃣ Result 탭에서 설문 결과 DB 조회하기
설문 결과는 배포 후 생기는 Result 에서 확인할 수 있어요.
✨Tip) DB에 데이터를 깔끔하게 저장할 수는 없을까? 고민하고 있다면...
버튼에 넣어둔 길고 긴 선택지가 내 DB에 들어오면 나는 이걸 또 워싱해야 하고... 😮💨 이런 복잡한 과정은 넣어두세요! 버튼 블럭의 각각의 선택지에는 설정 기능이 있는데, 이 설정에서 'Internal value'를 설정해주면 내가 지정해둔 대체 값이 DB에 저장됩니다.
<추가 개념 📚: 변수의 개념과 기능에 대하여>
학교 다닐 때 미지수 𝓍 로 된 문제 많이들 계산해보셨죠?
수학에서의 변수(variable)는 아직 정해지지 않은 숫자를 잠깐 𝓍라는 문자로 대신 표현한 것이었는데요.
이때 𝓍는 숫자를 담을 수 있는 빈 상자와 같은 존재잖아요? (𝓍 개념을 배우기 전엔 𝓍+2=5 문제를 □+2=5 라고 표현했던 것처럼요 ㅎㅎ)
코딩에서의 변수도 같은 개념이라고 생각하시면 됩니다.
심지어 여기서의 𝓍(빈 상자)는 숫자뿐만 아니라 글자, 날짜, 예/아니오, 메일 주소... 등등 세상의 모든 정보를 담을 수 있게 됩니다. 정보를 담을 수 있는 상자들을 두고, 𝓍같은 어려운 이름 대신 우리가 알아보기 쉬운 이름표를 상자에 붙이는 거죠.
Typebot에서는 변수를 {{ }} (중괄호)로 감싸서 표현합니다. (예: {{이름}}, {{전화번호}})
📝 구체적인 예시 3가지
상황 1: 고객의 이름을 기억해서 불러주기
챗봇: "안녕하세요! 성함이 어떻게 되시나요?"
사용자: "윤그린"이라고 입력.
Typebot의 행동:
{{이름}}이라는 변수 상자를 준비합니다.사용자가 말한 "윤그린"을 그 상자에 쏙 집어넣습니다.
나중에 써먹기:
챗봇은 이제부터 "고객님" 대신, 상자를 열어 "{{이름}}님, 반가워요!"라고 말합니다. 화면에는 "윤그린님, 반가워요!"라고 뜨겠죠.
상황 2: 커피 주문 받기 (선택지 저장)
챗봇: "따뜻한 걸로 드릴까요, 차가운 걸로 드릴까요?"
사용자: "아이스" 클릭.
Typebot의 행동:
{{온도}}라는 변수 상자에 "아이스"라는 정보를 저장합니다.
나중에 써먹기:
마지막 주문 확인 때: "주문하신 음료는 {{온도}} 아메리카노 맞으시죠?"
실제 출력: "주문하신 음료는 아이스 아메리카노 맞으시죠?"
상황 3: 상담 문의 접수 (연락처 저장)
챗봇: "연락받으실 이메일 주소를 알려주세요."
사용자: "[email protected]" 입력.
Typebot의 행동:
{{이메일}}변수 상자에 주소를 저장합니다.
나중에 써먹기:
타입봇에서는 유저가 선택한 선택지가 DB에 바로 저장됩니다. 타입봇이 유저의 선택에 따라
{{이름}}상자와{{이메일}}상자를 쏟아부으면, 우리는 DB에서 고객의 정보와 니즈를 파악할 수 있곘죠!
물론 타입봇을 만들 때, 변수를 쓰지 않아도 상관없지만 변수를 쓰게 되면 한 명 한 명을 위한 맞춤형 대화가 가능해진다는 장점이 있습니다. (변수를 어떻게 잘 쓰느냐가 개인 맞춤형 타입봇의 퀄리티를 좌우하는 것 같아요.)
변수가 없을 때: "고객님, 주문하신 상품이 발송되었습니다." (누구한테? 뭘 보냈는데? 모름)
변수를 쓸 때: "**{{이름}}**님, 주문하신 {{상품명}}이 오늘 발송되었습니다." (윤그린님, 주문하신 앰플이 오늘 발송되었습니다.)
✨Tip) 그러면 이제 제가 만든 타입봇에서 변수가 사용된 부분을 한 번 살펴볼까요?
타입봇에서는 변수를 크게 2가지 방법으로 설정해줄 수 있는데요,
첫 번째는 일반적으로 설정한 블록 내에서 '특정 값을 저장하고 싶다' 라고 판단할 때, 변수를 지정해주는 방식입니다. (이미지의 붉은 하이라이트 부분을 잘 살펴보세요!)
두 번째는 직접 변수를 설정해두는 방식인데요. 예를 들어 사용자가 A/B/C 선택지 중 하나를 선택하면, A를 선택할 때에는 이런 변수를, B를 선택할 때에는 이런 변수를, C를 선택할 때에는 이런 변수를 넣어야지... 하고 상황에 다른 값을 집어넣도록 세팅해두는 방식이에요. (이미지의 파란 글씨 부분을 살펴보세요!)
이미지로 조금 더 자세히 살펴보자면 이런 느낌이지요.
변수명에 제품명을 저장해두고 불러오게 한다던가, 링크를 저장해두고 리디렉션 기능에서 링크 변수를 호출해 내 제품 판매 사이트로 연결한다던가, 혹은 OpenAI API에 연결해둔 프롬프트에서 변수를 호출해서 변수로 불러와진 특정 제품에 대해 소개하도록 만든다던가...
정말 다양한 사용법이 있으니 타입봇에서 변수를 꼭 활용해보시면 좋겠습니다!
<⚠️시행착오: OpenAI API로 맞춤형 메시지를 뽑아내자>
저는 사용자가 특정 제품으로 연결되는 선택지를 골랐을 때, OpenAI API를 연결해서 그 제품에 대한 맞춤형 추천 메시지를 뽑아내고 싶었는데요. 여기서 두 번의 시행착오가 있었습니다.
⚠️시행착오 1: User Message 는 꼭 넣어주세요!
이를 위해서 Gemini와 함께 System Prompt와 User Message 를 함께 넣어주면 좋더라구요!
System Prompt는 메시지에 담기는 페르소나/정체성을 정의하는 프롬프트고,
User Message는 그래서 사용자 화면에 어떤 메시지를 띄워줄 건데? 라고 할 때 보여지는 핵심 메시지입니다.
User Message 가 부실하거나 없는 경우에 Message 블럭에서 아무리 OpenAI 답변을 저장해 둔 변수를 호출해도 실제 채팅창에 답변이 뜨지 않았으니, 이 글을 보고 타입봇 실습을 하게 되신다면 Gemini에게 처음부터 두 가지 프롬프트를 다 요청하는 게 좋겠습니다! 😊
⚠️시행착오 2: User Message 프롬프트를 자세히 넣었더니 뚱뚱한 장문의 응답이 온다...
예시 이미지긴 하지만, 제 기분이 느껴지실까 해서 만들어 넣어봤는데요.
세상에, 사용자 맞춤 제품을 추천해 달랬더니 GPT가 🤩이때다! 하고 눈을 번뜩이며 긴 영업사원 멘트를 뱉는 것이 아니겠어요?
이대로 두면 이 메시지가 뜨자마자 사람들이 다 이탈하게 생겼더라구요. (여담이지만, 혹시 재회를 원하시는 분은 이미지 출처인 이 유튜브를 참고하시기 바랍니다...)
사람들은 장문을 읽지 않는데, 그럼 어떻게 하면 좋지?
아하, 그러면 메시지를 나누어 보내면 되겠구나!
그래서 기존에 있었던 하나의 AI블록과 텍스트 버블을 3개로 쪼갰답니다.
📋 전체 구조 (Flow)
[AI 블록 1] (위로 작성) → 저장변수: msg_1
[텍스트 버블] 내용: {{msg_1}}
[AI 블록 2] (제품 추천) → 저장변수: msg_2
[텍스트 버블] 내용: {{msg_2}}
[AI 블록 3] (마무리) → 저장변수: msg_3
[텍스트 버블] 내용: {{msg_3}}
이렇게 하니 더 가독성이 좋아져서 눈아플 일은 없겠더라고요!
<마무리 📝>
전체 플로우와 테스트 이미지 gif 를 함께 공유드리니, 나만의 마케팅 챗봇 만들기에 도움이 되셨으면 좋겠습니다. filter 기능을 사용해본 다른 타입봇 프로젝트가 있는데, 사례글을 조만간 또 써볼게요!
