18 Aug 2024 8 min read AI

버블로 AI 서비스 만들기 가이드

버블로 AI 서비스 만들기 가이드입니다.

cleanUrl: "/blog/bubble-ai-service-guide"
description: "버블로 AI 서비스 만들기 가이드입니다."

0. 사전 준비

버블 회원 가입
OPEN AI API Key 발급

1. 프로젝트 개요

이번 가이드에서는 버블의 사용법과 AI API 연결을 어떻게하는지를 중점적으로 알아보기위해 간단한 AI 서비스를 만들어볼 예정이다. 제가 준비한 서비스는 아이디어 생성기입니다. 아이디어 생성기는 키워드를 입력하면 아이디어를 생성해주는 서비스입니다. 1개의 인풋과 1개의 아웃풋으로 구성된 간단한 서비스입니다. 이 과정을 통해버블의 사용법과 AI API 연결 방법에 대해서 알아보겠습니다.

2. 프로젝트 생성

가장 먼저 프로젝트를 생성해보겠습니다. 아직 버블에 회원가입하지 않았다면 회원가입 후 따라와주세요.

2-1. `Create an app` 클릭

버블에 로그인 하시면 가장 먼저 Apps 화면으로 옵니다. 여기서 Create an app 을 클릭합니다.

2-2. `Name your app` 입력 후 `Get started` 클릭

그러면 서비스 이름을 물어보는 입력창이 나옵니다. 이름을 입력 후 Get started 를 클릭합니다.

2-3. `Start with basic features` 클릭

Starter 플랜을 14일 무료로 이용할 수 있다는 안내가 나옵니다. 저희가 만드는 서비스는 무료 요금제에서도 개발이 가능하므로 Start with basic features 를 클릭해줍니다. 지금 무료로 만들어도 나중에 14일 무료 이용으로 전환할 수 있습니다.

2-4. `Skip application assistant` 클릭

그 다음으로는 버블 앱을 설정 화면이 나옵니다. 당장은 필요한 설정이 없고, 나중에 수정을 할 수 있기때문에 Skip application assistant 를 클릭합니다.

2-5. 프로젝트 생성 완료!

자, 아래 화면과 동일한 화면이 보인다면 프로젝트 생성이 완료되었습니다. 이제부터 본격적으로 서비스를 만들어보겠습니다.

3. 화면 디자인

저희가 만들어볼 화면을 미리 살펴보겠습니다.

3-1. 제목 만들기

1~4번을 따라하여 제목을 만들어줍니다.

3-2. 키워드 입력창 만들기

위와 비슷한 순서로 Input을 만들어줍니다. 여기서 Placeholder란 사용자가 어떤 내용을 입력해야할지 미리 보여주는 힌트 텍스트입니다. 사용자가 입력을 하면 해당 내용은 사라집니다.

3-3. 요약하기 버튼 만들기

위와 같은 순서로 버튼을 만들어줍니다.

3-4. 결과창 만들기

마지막으로 결과를 보여줄 인풋창을 만들어줍니다. 요약 결과는 여러줄로 나오기때문에 Multiline Input을 이용합니다.

4. OPEN AI API 연결

OPEN AI API 연결을 하기위해서 API Connector라는 Plugin을 사용해야합니다. API Connector를 설치한 후 OPEN AI API를 활용하는 방법을 알아보겠습니다.

4-1. Add plugins

4-2. `API Connector` 설치

4-3. API 만들기

API Connector를 설치하면 Plugins화면에 다음과 같이 나옵니다. 여기서 Add another API 클릭합니다.

4-4. API Name을 입력하고 Import another call from cURL 클릭

API Name은 워크플로우에서 표시되는 이름입니다.

4-5. cURL을 통해 API call 추가

아래는 OPEN AI 공식 문서에서 제공하는 Text generation cURL 입니다. 아래 내용을 복사해서 붙여넣기 후 임포트합니다.

👇 복사

curl <https://api.openai.com/v1/chat/completions> \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer $OPENAI_API_KEY" \\
  -d '{
    "model": "gpt-4o-mini",
    "messages": [
      {
        "role": "system",
        "content": "You are a helpful assistant."
      },
      {
        "role": "user",
        "content": "What is a LLM?"
      }
    ]
  }'

👇 붙여넣기 후 Import 클릭

4-6. API call 설정 후 초기화

API call을 다음과 같이 설정합니다.

Name 입력
Use as 를 Action 으로 변경
Headers 를 Private으로 설정
Headers에서 Authorization Value 값을 Bearer 발급 받은 키 로 변경
Body 를 아래와 같이 입력
- <system_prompt>
- <user_prompt>
Initialize call 클릭

4-7. 초기화 결과를 확인하고 `SAVE` 클릭

5. 워크플로우 만들기

자, 여기까지 오셨으면 거의 다왔습니다. 이제 워크플로우만 만들면 끝입니다.

5-1. 디자인 화면에서 버튼을 클릭 후 `Add Workflow` 클릭

5-2. API call 추가

저희가 만들어뒀던 create Idea 콜을 추가합니다.

5-3. `system_prompt` 와 `user_prompt` 입력

프롬프트를 입력해줍니다. system_prompt는 미리 입력된 값이고, user_prompt는 사용자가 입력하는 키워드에 따라 값이 변경되는 동적 값입니다. 아래와 같이 동적값을 설정하기위해서 Insert dynamic data 를 클릭하여 아래와 같이 추가합니다.

5-4. `Set state` 추가

결과값을 저장하기 위해 Set state 를 추가합니다. 여기서 state란 상태를 의미합니다. API 호출로 불러온 결과값을 저장하는 저장소라고 이해하시면 됩니다.

5-5. 결과값 state 추가

Element에 MultilineInput 결과를 선택합니다.
Custom state를 클릭 후 Create a new custom state... 를 클릭합니다.
Create a new state 모달에서 아래와 같이 입력 후 CREATE 버튼을 클릭합니다.

5-6. API 결과를 `결과값` 에 저장

API 결과는 Result of step 1 (OPEN AI - create Ideo) > 's choices > first_item > 's message content 에 있습니다. 아래와 같이 설정해줍니다.

5-6. 결과값 연결

마지막으로 디자인 화면으로 돌아와 MultilineInput 결과값에 State를 연결합니다.

6. 결과 확인

자, 이제 결과 확인만 남았습니다. 오른쪽 위 Preview 를 눌러서 결과를 확인합니다.

6-1. `Preview` 클릭

6-2. 결과 확인

6-3. 끝!

Outro

여기까지 버블로 AI 서비스 만들기 가이드였습니다. 위와 같은 방법으로 나만의 AI 서비스를 만들어보시기 바랍니다.

목차