지난 편에서는 Dify에서 앱을 만들고 API 키를 발급하는 과정을 마쳤습니다.
이번 편에서는 플렉스튜디오 Embed 컨트롤로 답변 영역을 구성하고 Dify API를 호출하는 이벤트를 완성합니다.
완성 앱 미리보기
이번 실습에서 완성할 앱의 동작 방식은 다음과 같습니다. 입력창에 질문을 입력하고 입력창 밖을 클릭하면 위 영역에 AI 답변이 말풍선 형태로 채워집니다.
핵심 컨트롤은 Embed 컨트롤과 InputText 컨트롤 두 가지입니다.
Dify/3%ED%8E%B8/%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_01.jpg?width=800&height=450&name=%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_01.jpg)
1단계 : Embed 컨트롤을 활용하여 답변영역 만들기
새 시나리오를 생성하고 기본 스텝에서 스텝 버튼을 삭제합니다. 이어서 답변이 표시될 영역을 아래 순서로 구성합니다.
- 그룹을 생성하고 그룹명을 '답변영역'으로 변경합니다.
- 그룹 안에 Embed 컨트롤을 추가합니다.
- 디자인 속성에서 높이를 350px으로 설정합니다.
- Dev 탭에서 Embed HTML 칸에 아래 코드를 입력합니다.
<div id="difyChat" style="width:100%;height:100%;">
<div class="dify-empty">
<div>아래에 질문을 입력하면<br>AI 답변이 여기에 표시됩니다.</div>
</div>
</div>
2단계 : CSS 외부 파일로 스타일 연결하기
답변영역에 말풍선 모양과 색상을 반영하려면 스타일이 필요합니다. 스타일을 별도 CSS 파일로 분리해서 외부 파일로 연결하는 방식으로 진행합니다.
Dify/3%ED%8E%B8/%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_03.jpg?width=800&height=450&name=%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_03.jpg)
- 강의자료 링크에서
dify-chat.css파일을 다운로드합니다. - 워크스페이스 콘솔 → 데이터 → 호스팅 폴더에 파일을 업로드합니다.
- 업로드된 파일의 URL을 복사합니다.
- 시나리오 설정의 외부 파일(StyleURL)에 해당 URL을 붙여넣습니다.
Dify/3%ED%8E%B8/%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_04.jpg?width=800&height=450&name=%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_04.jpg)
CSS 셀렉터를 반드시 #difyChat으로 지정해야 합니다. 스타일이 임베드 영역 안에만 적용되고 화면의 다른 요소에는 영향을 주지 않는 방법입니다.
Dify/3%ED%8E%B8/%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_05.jpg?width=800&height=450&name=%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_05.jpg)
3단계 : 입력창과 CallDify 이벤트 만들기
- 그룹을 하나 더 추가하고 그룹명을 '입력영역'으로 설정합니다.
- 데이터 연결 → 카테고리명 :
input, 데이터용도 : 기본으로 설정합니다. - 그룹 안에 InputText 컨트롤을 추가하고 컬렉션 키를
query로 연결합니다. - 디자인 탭에서 캡션: '프롬프트', 힌트: '질문을 입력해주세요.' 로 입력합니다.
- InputText에 FocusOut 이벤트를 추가하고 이벤트명을
CallDify로 입력합니다.
FocusOut은 입력창 밖을 클릭하거나 엔터 키를 입력하는 순간 실행됩니다.
Dify/3%ED%8E%B8/%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_06.jpg?width=800&height=450&name=%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_06.jpg)
CallDify 이벤트 스크립트
CallDify 이벤트 설정으로 이동한 뒤, 스크립트 액션을 추가하고 강의자료의 DifyAPICall 스크립트를 붙여넣습니다. API KEY 값에는 앞서 발급한 본인 Dify 앱의 API 키를 입력합니다.
① 입력값 읽기
input 카테고리의 첫 번째 섹터에서 query 값을 읽어옵니다.
② 화면에 즉시 표시
질문을 말풍선으로 화면에 바로 표시하고, 답변 자리에는 로딩 인디케이터를 넣습니다.
③ Dify API 호출
fetch로 Dify API 주소에 질문을 보내고 답변이 오면 답변 영역에 채워 넣습니다.
Dify/3%ED%8E%B8/%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_07.jpg?width=800&height=450&name=%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_07.jpg)
입력창 초기화 액션 추가
같은 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/3%ED%8E%B8/%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_08.jpg?width=800&height=450&name=%ED%94%8C%EB%A0%89%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EB%A5%BC%20%ED%99%9C%EC%9A%A9%ED%95%9C%20%EC%B1%97%EB%B4%87%20%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0_08.jpg)
이번 시리즈 복습하기
이번 시리즈를 통해 Dify 개념 이해부터 앱 생성, API 키 발급, 그리고 플렉스튜디오 연동까지 모든 과정을 완성했습니다.
① Dify는 기존 LLM을 조립해 AI 앱을 만드는 플랫폼입니다.
② Dify에서 만든 앱을 게시하고 API 키를 발급받으면 외부에서 호출할 수 있습니다.
③ 플렉스튜디오 Embed 컨트롤로 답변 영역을 구성하고 FocusOut 이벤트로 API를 호출합니다.
④ CSS 파일을 호스팅 폴더에 올려 외부 파일로 연결하면 스타일 관리가 쉬워집니다.