[8기 챗봇만들기] bubble.io로 체인 형태 구현하기 (feat. 아이디어 한문장 입력하면 앱 구조 기획해주는 챗봇 구조를 웹 UI로 구현하기)


시작

  • 프롬프트 엔지니어링 방과 챗봇방에서 챗봇개발하기 과제를 수행해야 했고..

  • 그렇게 반나절을 씨름한 결과 아이디어 한 문장 입력하면 앱 기능과 페이지구조, 디비구조를 설계해주는 챗봇을 사알짝 개발

  • 근데 [아이디어 입력] → [핵심기능, 페이지구조, 디비구조] 이렇게 바로 나오는 게 아니라,
    [유저 : 아이디어 입력] → [챗봇 : 핵심기능 도출] → [유저 : 핵심기능 수정] → [챗봇 : 수정된 핵심기능을 구현하기 위한 페이지 구조 설계] → [유저 : 페이지구조 수정] → [챗봇 : 수정된 페이지구조를 반영한 DB구조 설계] … 이런 식으로 유저로부터 이전 결과값을 수정받아 다음 단계로 입력하고 싶었다 (이게 아마 체인형태?)

  • 처음에는 프롬프트 기법을 이용하여 최대한 json 형태로 구조화하여 프롬프트로 해결하려고 했으나, 상연 대표님이 항상 프롬프팅만으로 구현하기는 어렵다고 말씀하시던 ‘멀티프롬프트’..가 아닌가…싶어서..

  • 노코드 툴 버블로 구현가능한 것은 이론상 개념상 알고 있었는데, 이참에 시도!

  • (새벽 4시라 간략하게만 씁니다 엉엉 🥲)


구조 설명

(1) bubble API 세팅


(2) bubble workflow 설계

  • step1 클릭했을 때 → API를 여러번 호출 (앱 이름, 앱 설명, 앱 유형 각각)

  • json 형태로 앱 이름, 앱 설명, 앱 유형 등 모든 값을 받아와서, 프론트 단에서 값을 뽑아내려고 했으나.. json 구조를 data.tpye 등의 문법으로 읽으려면 별도의 플러그인을 설치해야 하는 번거로움이 있어서 그냥 각각 호출 했다.

  • 이때 step1에서 호출한 API의 응답을 이후 단계의 input 값으로 넣을 수 있다!! (지금 나는 그렇게 설정하지는 않았다)


  • 4번 호출 후 step5에서 각 호출의 result 값을 저장

실행해보기

1) 아이디어 한 줄만 입력하고 step1을 눌러보자

2) step1 결과 : 앱 유형과 이름, 설명, 핵심기능 3가지 도출


핵심기능을 원하는 대로 수정해본다. 이때 수정한 핵심기능이 다음 단계(step2. 페이지구조 기획하기)에 반영된다. 체인형태!

(기존)

  • 1. 사용자 간 실시간 채팅 기능

  • 2. 글 작성 및 공유 기능

  • 3. 익명성 및 개인정보 보호 기능


(수정 : 3번만 바꿔볼게요)

  • 1. 사용자 간 실시간 채팅 기능

  • 2. 글 작성 및 공유 기능

  • 3. 매일 새로운 질문이 생성되어 사용자가 해당 질문에 답변할 수 있는 기능


3) 수정한 핵심기능이 프롬프트로 잘 들어가는지 확인 후 step2 시작


4) step2 결과(페이지 구조) 확인


결론

  • [유저 : 아이디어 입력] → [챗봇 : 핵심기능 도출] → [유저 : 핵심기능 수정] → [챗봇 : 수정된 핵심기능을 구현하기 위한 페이지 구조 설계] 까지는 했다!

  • 오늘은 이것저것 가능성을 직접 테스트해보고 실행에 옮겨보는 것을 목표로 하였으므로 여기까지…

3

👉 이 게시글도 읽어보세요