AI Chatbot 응답 개선 : 프론트엔드 코드 최적화

안녕하세요. 오늘은 AI 챗봇 프로젝트의 최근 개선 사항에 대해 공유드리고자 합니다. 이전 포스팅에서 소개드렸던 AI Chatbot Component의 추천 질문 시스템 통합에 이은 후속 작업입니다.

사용자 경험 개선을 위한 지속적인 노력의 일환으로, 이번에는 챗봇 응답의 가독성 문제를 해결하는 데 초점을 맞췄습니다. 테스트 과정에서 발견된 주요 이슈는 챗봇의 응답이 단일 라인으로 출력되어 가독성이 현저히 떨어진다는 점이었습니다.

이 문제를 해결하기 위해 프론트엔드 최적화 작업을 진행하게 되었습니다. 본 포스팅에서는 이 과정에서 직면한 기술적 과제, 그에 대한 해결 방안, 그리고 실제 구현 방법에 대해 상세히 다뤄보도록 하겠습니다.

 

문제의 원인

먼저, 문제의 근본 원인을 분석해보았습니다.

문제의 근본 원인은 백엔드 측에서 질문을 포함한 요청을 보낼 경우 OpenAI ChatGPT API를 통해 해당 질문에 대한 응답이 출력되도록 구성이 되어있는데 해당 부분에서 줄바꿈을 위해 사용되는 "\n" 문자가 HTML 렌더링 과정에서 제대로 해석되지 않아 발생한 문제로 확인되었습니다. 이로 인해 모든 텍스트가 한 줄로 출력되어 가독성이 저하되는 문제가 발생했습니다.

개선 전 챗봇 응답 - 모든 텍스트가 한 줄로 표시되어 가독성이 떨어지는 현상 확인

해결 방안

이 문제를 해결하기 위해 두 가지 주요 변경 사항을 적용하였습니다.

1. '\n'을 '<br>'로 변환
   백엔드에서 전송된 '\n' 문자를 HTML에서 인식할 수 있는 '<br>' 태그로 변환하는 작업을 수행했습니다. 이를 통해 텍스트가 의도한 대로 여러 줄로 표시될 수 있게 되었습니다.
2. HTML 내용 렌더링
   변환된 HTML 내용을 React 컴포넌트 내에서 올바르게 렌더링하기 위해 React의 'dangerouslySetInnerHTML' 속성을 활용했습니다.

코드 구현

실제 코드 구현의 경우 아래와 같이 구현하였습니다.

import React, { useState, useRef, useEffect } from "react";  
import styles from "../styles/Chatbot.module.css";  
import axios from "axios";  

function Chatbot() {  
  // ... (기존 코드 생략) 
  botResponse = botResponse.replace(/\n/g, "<br>");

  return (  
    <>  
      {/* ... (기존 코드 생략) */}  
      {messages.map((message, index) => (  
        <div  
          key={index}  
          className={`${styles.message} ${message.user === "me" ? styles.me : styles.bot}`}  
          dangerouslySetInnerHTML={{ __html: message.text }}
        />  
      ))}  
      {/* ... (기존 코드 생략) */}  
    </>  
  );  
}  

export default Chatbot;

위 코드에서 주요하게 봐야할 부분은 "dangerouslySetInnerHTML" 속성 부분입니다.

이속성을 통해 HTML 문자열을 직접 렌더링할 수 있으며, 이전 botResponse 정의 부분에서 replace 메소드를 사용하여 "\n" 문자를 "<br>"로 변환하였습니다.

주의사항

"dangerouslySetInnerHTML" 속성 사용 시 보안에 주의해야할 필요가 있음.

해당 속성은 XSS(Cross-Site Scripting) 공격에 취약할 수 있으므로, 신뢰할 수 있는 소스의 데이터만 사용해야 합니다.

결과

위와 같은 변경사항을 적용한 후 챗봇의 응답은 여러 줄로 표시되어 가독성이 향상되어 사용자가 좀 더 글을 쉽게 읽을 수 있게 개선되었습니다.

개선 후 챗봇 응답 - 텍스트가 여러 줄로 나뉘어 가독성이 향상