블로그 | 플렉스튜디오

Dify AI 챗봇 만들기③ : 플렉스튜디오를 활용한 챗봇 개발하기

작성자: 마케터 썬 | 2026. 6. 25 오전 7:39:21

지난 편에서는 Dify에서 앱을 만들고 API 키를 발급하는 과정을 마쳤습니다.
이번 편에서는 플렉스튜디오 Embed 컨트롤로 답변 영역을 구성하고 Dify API를 호출하는 이벤트를 완성합니다.

영상 강의로 학습하기 👉
사용된 코드 확인하기 👉

 

완성 앱 미리보기

이번 실습에서 완성할 앱의 동작 방식은 다음과 같습니다. 입력창에 질문을 입력하고 입력창 밖을 클릭하면 위 영역에 AI 답변이 말풍선 형태로 채워집니다.
핵심 컨트롤은 Embed 컨트롤과 InputText 컨트롤 두 가지입니다.

1단계 : Embed 컨트롤을 활용하여 답변영역 만들기

새 시나리오를 생성하고 기본 스텝에서 스텝 버튼을 삭제합니다. 이어서 답변이 표시될 영역을 아래 순서로 구성합니다.

  1. 그룹을 생성하고 그룹명을 '답변영역'으로 변경합니다.
  2. 그룹 안에 Embed 컨트롤을 추가합니다.
  3. 디자인 속성에서 높이를 350px으로 설정합니다.
  4. Dev 탭에서 Embed HTML 칸에 아래 코드를 입력합니다.
<div id="difyChat" style="width:100%;height:100%;">
  <div class="dify-empty">
    <div>아래에 질문을 입력하면<br>AI 답변이 여기에 표시됩니다.</div>
  </div>
</div>

2단계 : CSS 외부 파일로 스타일 연결하기

답변영역에 말풍선 모양과 색상을 반영하려면 스타일이 필요합니다. 스타일을 별도 CSS 파일로 분리해서 외부 파일로 연결하는 방식으로 진행합니다.

 

  1. 강의자료 링크에서 dify-chat.css 파일을 다운로드합니다.
  2. 워크스페이스 콘솔 → 데이터 → 호스팅 폴더에 파일을 업로드합니다.
  3. 업로드된 파일의 URL을 복사합니다.
  4. 시나리오 설정의 외부 파일(StyleURL)에 해당 URL을 붙여넣습니다.

CSS 셀렉터를 반드시 #difyChat으로 지정해야 합니다. 스타일이 임베드 영역 안에만 적용되고 화면의 다른 요소에는 영향을 주지 않는 방법입니다.

 

3단계 : 입력창과 CallDify 이벤트 만들기

  1. 그룹을 하나 더 추가하고 그룹명을 '입력영역'으로 설정합니다.
  2. 데이터 연결 → 카테고리명 : input, 데이터용도 : 기본으로 설정합니다.
  3. 그룹 안에 InputText 컨트롤을 추가하고 컬렉션 키를 query로 연결합니다.
  4. 디자인 탭에서 캡션: '프롬프트', 힌트: '질문을 입력해주세요.' 로 입력합니다.
  5. InputText에 FocusOut 이벤트를 추가하고 이벤트명을 CallDify로 입력합니다.

FocusOut은 입력창 밖을 클릭하거나 엔터 키를 입력하는 순간 실행됩니다.

 

CallDify 이벤트 스크립트

CallDify 이벤트 설정으로 이동한 뒤, 스크립트 액션을 추가하고 강의자료의 DifyAPICall 스크립트를 붙여넣습니다. API KEY 값에는 앞서 발급한 본인 Dify 앱의 API 키를 입력합니다.

① 입력값 읽기

input 카테고리의 첫 번째 섹터에서 query 값을 읽어옵니다.

② 화면에 즉시 표시

질문을 말풍선으로 화면에 바로 표시하고, 답변 자리에는 로딩 인디케이터를 넣습니다.

③ Dify API 호출

fetch로 Dify API 주소에 질문을 보내고 답변이 오면 답변 영역에 채워 넣습니다.

 

입력창 초기화 액션 추가

같은 CallDify 이벤트에 스크립트 액션을 이어서 추가합니다.

① 보낸 입력 섹터 비우기: f.Collection.removeSector('active', 'input');
② 입력 영역 화면 갱신: f.Content('f_id').reload();
③ 입력창 포커스 설정: f.Component('f_id').focus();

첫 번째 f_id는 입력 영역 그룹의 ID, 두 번째 f_id는 InputText 컨트롤의 ID입니다. 실제 시나리오에 맞는 ID로 변경해 주세요.

 

4단계 : 디버거로 테스트하기

오른쪽 상단 초록색 실행 버튼으로 디버거를 켭니다. 입력창에 질문을 적고 입력창 밖을 클릭하거나 엔터 키를 입력합니다.
잠깐 로딩 표시가 나타난 뒤 AI 답변이 영역에 채워지는 것을 확인할 수 있습니다.

 

 

이번 시리즈 복습하기

이번 시리즈를 통해 Dify 개념 이해부터 앱 생성, API 키 발급, 그리고 플렉스튜디오 연동까지 모든 과정을 완성했습니다.

① Dify는 기존 LLM을 조립해 AI 앱을 만드는 플랫폼입니다.
② Dify에서 만든 앱을 게시하고 API 키를 발급받으면 외부에서 호출할 수 있습니다.
③ 플렉스튜디오 Embed 컨트롤로 답변 영역을 구성하고 FocusOut 이벤트로 API를 호출합니다.
④ CSS 파일을 호스팅 폴더에 올려 외부 파일로 연결하면 스타일 관리가 쉬워집니다.

 
전체 게시물 보기