블로그 | 플렉스튜디오

ChatGPT API를 연동해서 AI 챗봇 만들기 - Flextudio 블로그

작성자: shsongc336aea99f | Apr 18, 2025 7:47:26 AM

매일 생성형 인공지능 기술에 대한 새로운 소식이 들려요. 많은 사람들이 생성형 AI가 뛰어난 기술이라고 생각하지만, 제대로 활용하기엔 많은 어려움을 겪고 있죠. 이전 글에서는 생성형 AI를 효과적으로 활용하기 위해 모바일 앱이 주목 받는 이유를 설명했는데요.

👉 생성형 AI 시대, 모바일 앱이 중요한 이유

AI 챗봇앱을 기획부터 배포까지 3일 만에 만든다면 믿겨지시나요? 로우코드 앱 개발 SaaS 플렉스튜디오에서는 AI 챗봇앱을 API 연동을 통해 빠르게 만들 수 있어요. 지금부터 팀 플렉스튜디오가 3일 만에 만든 챗봇앱 제작 과정과 만드는 방법을 자세하게 소개할게요.

🤖아래 영상을 통해 AI 챗봇앱 제작 과정을 한눈에 확인해 보세요!

 

 

 

개발 배경 : AI 챗봇이 우리 회사에 왜 필요할까?

얼마 전 팀 플렉스튜디오는 기획혁신팀(사내 인사 & 총무팀)의 고충을 들었어요. 회사 규정집 내용에 관한 질문이 항상 반복적으로 들어오는데 같은 내용을 똑같이 답변해야 하니 비효율적이라는 내용이었어요. 그리고 더 중요한 다른 업무를 할 시간이 부족하게 되는 거죠.
그래서 우리는 생성형 AI가 규정집의 내용을 학습해서 답변을 대신하는 방법을 떠올렸어요. 기획혁신팀은 업무 생산성을 높일 수 있고 임직원의 입장에서는 빠르고 쉽게 원하는 답을 얻을 수 있다는 장점이 있다고 생각했어요.

 

앱 UI & UX 디자인 : AI 챗봇은 어떤 모습일까?

챗봇의 마스코트, 컴피(Compy) 탄생 배경

사용자가 앱을 사용할 때 가장 눈에 띄는 부분은 귀여운 캐릭터 ‘컴피(Compy)’일텐데요. 컴피(Compy)는 회사(Company)와 친숙한(Friendly)의 합성어예요. 그리고 ‘편안한’, ‘안락한’이라는 뜻의 영어 단어 ‘Comfy’와 같은 발음처럼 들리게 해서 편히 물어볼 수 있다는 의미를 담고 싶었어요.
캐릭터는 원래 새가 재잘대는 듯한 느낌을 원했는데, 인사 & 총무에 대한 내용을 다루는 앱이기 때문에 좀 더 정석대로 대답을 하는 로봇으로 넣었어요. 거기에 귀여운 걸 좋아하는 디자이너님의 취향과 편안한 느낌을 추가하여 말풍선 로봇이 탄생했습니다!

비하인드 스토리 : 아쉬웠던 부분

더 좋은 디자인을 하고 싶은 마음엔 끝이 없는 것 같아요. 작업을 하며 추가로 발전시키고 싶은 두 가지 부분이 있어요. 첫 번째는 챗봇이 답변할 때 텍스트가 많을 경우를 대비해서 행간을 늘린 부분이에요. 사용자가 보기엔 더 쉬워졌지만 화면 높이를 많이 차지하게 되는 건 아쉬운 부분이에요. 나중에 과거 내용은 텍스트가 자동으로 작아지고 스크롤에 따라 텍스트 크기 변화가 있으면 좋을 것 같아요.

두 번째는 생성형 AI 학습이 초반이라 답변 내용이 100% 정확할 수 없다는 점이에요. 그래서 앱 하단에 정확도가 떨어질 수 있다는 안내 문구를 추가했어요. 언젠가 학습이 더 고도화되어 문구를 없애고 싶은 작은 바람이 있어요.

사용한 도구 : 어떤 AI를 사용하지?

레이그라운드(Playground)를 활용한 이유

앱에 연동할 API로 OpenAI에서 제공하는 플레이그라운드를 사용했어요. 일단 OpenAI의 챗 GPT(ChatGPT)는 이미 많은 사람들에게 알려진 높은 수준의 AI인데요. 플레이그라운드는 이러한 챗GPT를 활용하여 코드를 작성하지 않고도 자신만의 AI를 생성하고 사용할 수 있도록 도와주는 플랫폼이에요.

현재 플레이그라운드에서는 크게 세 가지 기능을 제공해요.

① 프롬프트 엔지니어링: 기존에 사용된 프롬프트를 통해 커스텀한 대화를 생성할 수 있어요.
②Assistant: 프롬프트 엔지니어링과 함께 파일 검색, 코드 인터프리터, 그리고 다른 함수를 등록하여 실행하는 Assistant 기능을 통해 AI를 보다 유연하게 활용할 수 있어요.
③ Fine-tuning: 일반적으로 커스텀 AI의 대표적인 방법 중 하나인 Fine-tuning을 수행할 수 있어요.

 

앱 개발 : 플렉스튜디오로 어떻게 만들지?

1. ChatGPT AI모델 생성하기

챗GPT가 사내 규정집 기반으로 답변을 생성하기 위해 어시스턴스 모델을 생성했어요. 이번 챗봇에서는 Assistant를 활용하여 규정집 파일을 기반으로 Instructions 답변을 제공했어요. 규정집 검색에 토큰을 많이 사용해서 GPT-4를 사용할 경우 비용이 많이 청구되게 되는 문제가 있었어요. 그래서 토큰 가격이 비교적 저렴한 GTP-3.5-turbo 버전 중 해당 시점 가장 최신 모델(GPT-3.5-turbo-0125 버전)을 사용했어요.

💡Assistant 팁!  Top P & Temperature 옵션 설정하기
설정에서는 Top P와 Temperature를 조정할 수 있어요. Top P는 단어를 생성할 때의 다양성을 조절하며, Temperature는 텍스트를 생성할 때의 다양성을 나타내요. 값이 낮을수록 일관된 말을 하게 되고, 값이 높을수록 다양한 문장을 생성하죠.
처음 개발할 땐 Temperature 값만 0.5로 조정하여 사용했지만, 따뜻한 답변을 위한 필요 없는 글들이 길어져 0.01로 변경했어요.

 

2. API 연동 추가하기

챗GPT API를 호출하기 위해 플렉스튜디오에 등록하는 과정이 필요해요. 플렉스튜디오의 API 연동 서비스는 사용자가 자주 사용하는 API를 템플릿으로 등록하고, 이를 통해 손쉽게 해당 서비스를 호출할 수 있도록 지원하는 기능이에요. 사용자는 반복적인 API 호출 과정을 간소화할 수 있으며 개발 과정에서 드는 시간과 노력을 절약할 수 있어요.

API 연동은 워크스페이스 콘솔의 좌측 메뉴에서 [데이터] – [API 연동]에서 이루어져요. OpenAI의 Assistants 기능에 대한 필요한 기능들에 대해서 추가해야 하는데요. 현재 플렉스튜디오에서는 [API 연동] – [새 API] 버튼 – [ChatGPT] 버튼을 클릭하면 ChatGPT와 관련된 API를 한번에 생성할 수 있어요. 추후 더 편리하게 사용할 수 있도록 다양한 기능이 추가될 예정이에요.

 

3. 시나리오 개발하기

플렉스튜디오의 시나리오는 화면을 구성하고 프로그램의 작동을 지정하고 데이터를 연결할 수 있는 공간이에요. 사용자는 시나리오 개발 화면에서 앱이 동작하는 화면을 STEP 단위로 디자인 작업을 진행해요. 완성된 디자인에 스크립트와 이벤트를 만들어 연결하여 서버나 DB등 데이터를 연동할 수 있어요. 이 모든 작업을 할 수 있는 공간을 시나리오라고 불러요.

이번 시나리오 개발에서 가장 중요한 점은 Assistant API를 활용하여 채팅을 진행할 때 메시지를 정확하게 처리하는 과정이었어요. 서비스(Service) 호출 과정에 따라 이벤트(Event)를 체이닝(Chaining)하고, 그 과정에서 스레드(Threads)의 상태를 체크하기 위해서 이벤트를 재귀적으로 호출되도록 구성했어요.

 

4. 화면에 데이터 연결하기

화면에서 영역별로 보여지는 데이터를 연결하고 입력한 값이 저장될 컬렉션을 설정해요. 컬렉션(Collection)은 플렉스튜디오의 고유한 개념 중 하나인데요. 컬렉션은 시나리오가 시작해서 종료될 때까지 모든 데이터의 흐름을 관리하는 곳이에요. 컬렉션은 섹터(Sector)로 구성되어 있으며, 각 섹터는 독립적인 노드로서 키(Key)와 값(Value)의 쌍으로 데이터를 보관해요. 섹터는 실제 시나리오가 실행될 때, 각 화면의 구성 요소와 결합하게 돼요.

글로 설명하기엔 다소 애매한 부분이 있지만, AI 챗봇앱 영역에 따라 대략적으로 3가지 부분으로 나눠서 연결했어요.
• 연차/반차 규정 등 버튼 영역 : 클릭 시 해당 타입에 맞는 문구를 프롬프트로 생성해요.
• 채팅창 영역 : 채팅 내역을 가지고 있는 카테고리를 연결하여 보여줘요.
• 입력창 영역 :채팅 입력창에 입력한 값을 관리하는 카테고리를 연결해요.

 

5. 서비스 & 이벤트 등록하기

워크스페이스 콘솔에서 등록한 API를 시나리오에서 호출할 수 있도록 서비스로 등록해요. 플렉스튜디오에서 화면의 동작은 이벤트로 구현을 하고 서비스를 통해 외부에 데이터를 보내거나 갖고 올 수 있어요. 이렇게 생성한 서비스를 이벤트로 등록하고 로직에 맞게 구성하여 이벤트가 실행되어야 하는 시점에 연결해요.

 

6. 디버거에서 확인하기

시나리오가 정상적으로 동작하는지 스튜디오 디버거(Debugger)를 통해 확인해요. 디버거는 실행 중인 앱에 연결되며 코드를 검사할 수 있는 개발자 도구이에요. 플렉스튜디오는 스튜디오 내에 디버거가 있어서 개발부터 디버깅까지 하나의 플랫폼에서 가능해요.

 

마무리하며 : 3일 만에 완성한 AI 챗봇앱

아래 이미지는 실제로 완성된 AI챗봇에 궁금한 내용을 질문하는 모습이에요. 3일이라는 제작 기간이 믿기지 않을 만큼 똑똑하죠? 개발에 소요된 시간만 계산하면 하루 남짓이라는 짧은 시간에 제작되었어요. 이렇듯 플렉스튜디오를 활용하면 빠른 시간 내에 나만의 AI앱을 만들 수 있어요.

AI챗봇앱 ‘컴피’는 회사 내부부터 AI EXPO 같은 대규모 전시회까지 보여지는 곳마다 큰 관심을 받았어요. 단순히 기술을 기술 그 자체로만 바라보기 보다 누군가의 문제를 해결하고 일상을 더 편리하게 만드는데 활용했기 때문이라고 생각해요. 이 사실을 기억한다면 빠르게 변하는 생성형 AI 시대가 막연하고 두렵지 않을 거예요.

 

여러분의 생성형 AI는 어떤 모습으로 더 나은 일상을 만들까요?
가이드를 참고해서 다양한 개념을 학습하고
로우코드 앱 개발 SaaS 플렉스튜디오에서 AI챗봇앱을 무료로 개발해 보세요!