소개
노코드개발 버블로 AI웹서비스 만들기 15기 스터디원들을 위해, 한달동안 어떤 것을 만들지, 어떻게 데이터베이스 구조를 설계하고, 어떤식으로 워크플로우를 만들어야할지 방향을 잡아주는게 중요하다고 생각이 들었습니다.
저의 컨설팅 방향을 다듬어 컨설팅프롬프트를 만들고, 15기 스터디원들이 각자 만들고싶은 서비스에 대한 설명을 간략하게 입력하면, chatgpt를 통해 컨설팅하여 응답해주는 서비스 입니다.
진행 방법
저는 스터디 시작 전에 15기 스터디원들을 웹사이트를 버블을 이용해 만들어두었습니다. 이 곳에 스터디원들이 회원가입을하여 자기소개와 만들고싶은 서비스 설명을 모두가 같이 볼 수 있는 곳입니다.
https://huhsame-gpters-15.bubbleapps.io/version-test
현재 탭은 메인페이지, 회원가입폼, 로그인폼으로 있는데, 그룹을 하나 추가하여 마이페이지 탭을 만들고, 레이아웃을 알맞게 설정해줍니다.
그리고 지금 만든 Tab 마이페이지 안에 그룹 두개를 추가하여 왼쪽 오른쪽으로 세팅합니다. 왼쪽에는 사용자가 입력할수있는 칸이 들어가고, 오른쪽에는 chatgpt의 답변이 나올 자리입니다.
왼쪽 그룹 안에 필요한 요소들을 넣어 배치합니다. 사용자의 입력을 받는 multilineliput 과 실행을 시키는 버튼 등을 넣습니다.
이번에는 오른쪽 그룹 안에, 표시할 텍스트와 복사하기 버튼을 추가합니다. 텍스트를 넣을때는 꼭 그룹을 먼저 또 만든 뒤 그 안에 텍스트요소를 넣는 것이 좋습니다. 아 이번 스크린샷에는 네모표시를 안해두었네요. 잘 하실수 있으리라 믿습니다.
이제 본격적으로 작동하도록 만들어봅시다. 우리가 원하는 건 개발전략세우기 버튼을 눌렀을때, Chatgpt에게 질문을 보내고, 질문이 도착하면 오른쪽에 보여지게 하는 것 입니다.
먼저 해당 버튼을 눌러서 add workflow라는 버튼을 누르면, 버블의 화면이 workflow를 설정할 수 있는 화면으로 바뀝니다.
우리는 이 공간에서 우리가 원하는 동작들을 한단계 한단계씩 구현할 겁니다.
먼저 chatgpt 를 연결을 해야겠죠, 버블에는 플러그인 이라는게 있어서 다양한 기능들을 가져다 붙일 수 있습니다. chatgpt 플러그인을 검색해서 연결합니다.
인스톨 버튼을 누르면 바로 등록이 되고 오른쪽에 api키를 입력하는 칸이 있습니다. 각자 chatgpt 사이트에서 본인의 api key를 발급받아와서 붙여넣으시면 됩니다. 주의할점은 앞에 "Bearer "를 붙여야 한다는 것입니다. 아래 스크린샷을 참조하세요.
이제 chatgpt 플러그인도 연결했으니, 다시 워크플로우탭으로 돌아가서 하나씩 만들어보도록 합니다. 플러스 버튼을 눌러 동작들을 하나 둘 이어서 추가할 수 있습니다. 우리는 우선 플러스 버튼을 눌러서 검색란에 chat라고 검색하여 제가 표시한 액션을 선택하세요.
선택하면 위와같이 모델이나 메세지, 토큰등을 설정할 수 있는 창이 나옵니다. 이곳에 알맞게 채워주면 됩니다.
저는 미리 개발전략 prompt 라는 변수에 제 컨설팅 프롬프트를 담아 두었습니다. 그리고 설명입력칸에 있는 값들도 같이 넣어줍니다. max token 값도 2000으로 늘리세요.
주의!!!! 두번째칸의 메세지 부분 (프롬프트 들어가는 부분)에 꼭 앞뒤에 "" 따옴표를 넣어야합니다.
[+ 설명 추가]
옵션셋에 미리 프롬프트를 저장해두고 불러쓰는 방법
[설명추가 끝]
이제, 챗지피티 답변이 도착하면 그 답변을 넣어줄 그릇을 설정해야합니다. 오른쪽에 있는 대답결과표시그룹의 type of content를 text로 설정하고, 그 안에 있는 text대답결과를 parent's group text 로 설정합니다.
이렇게 하면 text가 들어갈 그릇이 준비된 겁니다. 이제 넣기만 하면 됩니다.
display data라는 액션을 선택하여, Group대답결과표시의 값에 step1의 결과를 입력합니다. 이러면 일단 chatgpt를 연결하여 요청을 보내고 응답을 가져와 표시해주는 기능까지 구현 완성입니다.
여기까지만 따라 하셔도, 1주차에서 큰일 하신겁니다. 고생많으십니다.
저는 조금의 수정과 기능을 더 붙여서 완성도를 높여보았습니다. 답변기다리는 시간이 너무 길어, 그 시간동안 표시할 스피너를 표시하였고, 답변 복사하기 버튼을 작동시키는 워크플로우, 그리고 마크다운이 이쁘게 적용될수있게끔 하였습니다.
먼저 스피너는 플러그인에서 검색하여 추가하고, 질문을 시작하면 보여지고, 답변이오면 안보이게 처리합니다.
다음으로는 복사하기 버튼을 위해서, 마찬가지로 플러그인에서 clipboard를 검색하여 추가하고 버튼에 워크플로우를 설정했습니다.
아 다음으로는, 마이페이지 탭만 보이게 하는 작업도 추가했네요. 이건 하셔야합니다.
메인에 버튼하나를 추가하고 이 버튼을 누르면, 마이페이지탭이 열리도록 해봅시다. url의 parameter를 이용할거에요.
이렇게 설정을 마쳤습니다.
그리고 마지막으로 마크다운 이쁘게 보여주는 플러그인하나 추가해서 달앗습니다.
마무리
최대한 각 모든 단계를 스크린샷찍으려 노력했지만, 부족한 부분이 있을 수 있습니다. 최대한 스크린샷을 따라하시고, 단톡방에 질문을 주실때는 어떤단계에서 막혔는지, 스샷과 본인의 버블이 어떤부분이 다르게 작동하는지 말씀해주시면 제가 도움을 드리기가 쉽습니다.
노코드개발 버블 15기 화이팅 💖
