버블에서 API가 느려도 페이지 성능을 유지하는 팁
안녕하세요. 버블이 공인한 대한민국 및 동아시아 1위 에이전시 리트머스입니다.
Chat GPT를 사용하다 보면 때로는 답변을 받는 데 시간이 오래 걸려 불편함을 겪으실 수 있습니다. 이럴 때 브라우저를 꺼버리면 나중에 돌아와도 답변을 다시 확인할 수 없게 되죠. 그런데 브라우저를 끄고도 나중에 결과를 다시 확인할 수 있는 방법이 있다면 훨씬 더 유용하겠죠. 또한, 파일 업로드처럼 시간이 오래 걸리는 작업에서 브라우저를 닫더라도 사용자가 다시 로그인했을 때 진행 상태나 완료 여부를 확인할 수 있도록 만드는 방법도 궁금하실 것입니다.
이 문제를 해결하려면 서버 응답을 적절히 처리할 수 있어야 하며, 서버에 데이터를 저장하고 불러오는 방식도 필요합니다. 특히 장시간 실행되는 작업에서 사용자가 페이지를 벗어났다가 다시 돌아왔을 때도 결과를 확인할 수 있어야 하므로, 서버 사이드 처리와 상태 관리가 중요한 요소로 떠오릅니다. 이번 글에서는 이러한 상황을 효과적으로 해결하는 방법에 대해 알아보겠습니다.
OpenAI API 사용 사례
OpenAI API를 사용한 서비스 구현에서, 때로는 글자 수가 많을 경우 응답 속도가 크게 달라지는 것을 경험해보셨을 것입니다. 글자 수가 많은 경우 응답이 오는 데 1분 이상 걸리는 경우도 있죠.
그럴 경우, 유저가 페이지를 벗어나더라도 결과를 확인할 수 있어야 합니다.
버블에서 이를 구현하기 위해 어떤 플로우를 거쳐야 하는지 단계별로 상세하게 알아보겠습니다.
1. 메시지 전송 버튼 클릭
요청 사항을 작성하고 메시지 전송 버튼을 클릭하는 것으로 시작합니다.
2. 버튼 클릭했을 때 실행할 백엔드 워크플로우 구현
워크플로우 메뉴에서 바로 API를 호출하면 브라우저를 껐을때 응답을 처리할 수 없게 됩니다.
‘Click here to add an action…’ 부분을 클릭하면 버튼을 클릭했을 때 동작할 action을 추가할 수 있는데요.
그래서 이와 같이 백엔드 워크플로우 메뉴에서 API workflow를 생성하여 이 안에 action으로써 API 호출을 구현하고, 이 API workflow를 워크플로우 메뉴에서 불러와야 합니다.
여기서 백엔드 워크플로우 메뉴의 API workflow는 서버에서 처리되고, 워크플로우 메뉴의 action은 브라우저에서 처리됩니다. 이를 각각 서버 사이드, 클라이언트 사이드에서 ‘처리된다’라고 표현합니다.
실제로는 어떻게 구현되었는지 살펴보겠습니다.
action의 순서는 API 호출 → 버블 DB 생성 → Return data from API으로 이루어집니다.
3. OpenAI API 요청
OpenAI API를 준비합니다.
OpenAI API를 활용하여 요청을 보내기 위해 API Connector에 이를 등록합니다.
- 버블 API Connetor 구성 예시
첫번째 action에서 위에서 준비한 OpenAI API를 이용하여 요청을 보냅니다.
4. 버블 데이터베이스에 상태 값 저장
두 번째 action에서는 응답을 저장할 Data Type을 골라 App data를 생성합니다. 여기에 상태값을 저장할 Field에 ‘작성 중’과 같은 상태 값을 저장하여 아직 응답이 오지 않았음을 알려줍니다.
5. 백엔드 워크플로우 결과값 구성
세 번째 action에서는 위에서 생성한 버블 디비의 ‘unique_id’와 ‘status_code’값을 return할 수 있게 action을 구성합니다.
6. 결과값 받아서 화면에 보여주기
이제 백엔드 워크플로우 구성이 완료되었으니 워크플로우 메뉴로 돌아와야 합니다. 버블 백엔드 워크플로우의 결과값을 받아오기 위해서는 API Connetor 플러그인을 통해 API Call을 생성해서 사용해야 합니다. 버블 공식 문서 중 ‘Workflow API endpoints’를 참고하면 됩니다.
↗︎ Bubble Docs - Workflow API endpoints 바로가기
버블에서 Workflow API endpoints는 위와 같이 메뉴에서 확인할 수 있습니다.
API Connector에서 이와 같이 구성합니다.
이 API Call의 결과값을 목적에 맞게 사용합니다. 아래는 결과값을 custom state에 저장한 모습입니다.
여기서 unique_id 값은 백엔드 워크플로우에서 생성했던 버블 디비의 고유한 id 값인 unique_id 입니다. 이 값을 이용해서 특정한 하나의 데이터베이스를 특정, 상태 값을 ‘작성 완료’와 같은 것으로 변경시키고 GPT의 응답 값을 저장 시킬 수 있겠습니다. GPT의 응답이 데이터베이스에 저장되어 있기 때문에 어떤 상황에서도 사용자에게 보여 줄 수 있게 됩니다.
위와 같이 처리한 것을 ‘비동기적으로 처리했다’고 할 수 있습니다.
즉, 비동기 처리란, 작업 요청을 보낸 후 즉시 응답을 반환하는 방식으로, 서버가 작업을 백그라운드에서 계속 진행할 수 있도록 하는 처리 방식입니다. 이를 통해 서버 리소스를 효율적으로 사용하고 클라이언트의 응답성을 유지할 수 있습니다.
예를 들어, OpenAI API를 사용한 경우를 생각해 봅시다. 사용자가 요청을 보낸 후 즉시 "요청이 접수되었습니다. 답변 작성 중입니다."라는 안내 문구를 보여주면, 사용자는 결과를 기다리는 동안 불편함을 겪지 않게 됩니다. 또한 페이지를 벗어나더라도, 나중에 다시 돌아왔을 때 여전히 요청 상태를 확인할 수 있고, 최종 결과도 놓치지 않게 되죠.
비동기 처리 기술을 활용한 효율적인 시스템 구현
오늘은 서버 사이드에서 API를 호출하고 결과를 데이터베이스에 저장하여, 상태 관리를 통해 사용자 경험을 개선할 방법에 대해 알아보았습니다. 이 방식은 비동기 처리를 활용하여 서버 리소스를 효율적으로 사용하고, 클라이언트 응답성을 유지하는 데 도움을 줍니다. OpenAI API를 예시로 설명했지만, 이와 같은 방식은 다양한 서비스에 적용할 수 있어 유용하게 활용될 수 있겠죠.
리트머스는 이미 여러 프로젝트에서 이러한 비동기 처리 및 서버 사이드 로직을 성공적으로 구현하여, 고객에게 최적화된 사용자 경험을 제공하고 있습니다.
특히 저희는 복잡한 서비스 운영과 대규모 데이터를 처리하는 데 강점을 지니고 있습니다. 클라이언트의 요구에 맞는 맞춤형 솔루션을 제공하며, 버블을 활용한 개발을 통해 더욱 효율적인 시스템을 구현하고 있는데요.
비동기 처리와 같은 고급 기술을 적극적으로 활용하여 개발하고 싶다면, 언제든 리트머스에 문의하세요!
![[2025 최신] 버블에서 리피팅 그룹 각 셀마다 워크플로우를 실행하고 싶을 때 : 플러그인 오케스트라(Orchestra)](/_next/image?url=https%3A%2F%2Fuosmtaxndlzgvsnhbugi.supabase.co%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fmedia%2F12-1.jpg&w=3840&q=75)