[ChatGPT 챗봇 실습 5강] 챗봇 UI 개선 – 스크롤, 로딩 상태, 메시지 스타일링

이번 강의에서는 챗봇의 기본 기능을 넘어서 사용자 경험을 향상시키는 UI 개선 작업을 진행합니다.
자동 스크롤, 로딩 인디케이터, 사용자/AI 메시지 구분 등을 통해 더 자연스러운 대화 흐름을 구성합니다.

용어 설명

• 자동 스크롤: 새로운 메시지가 생길 때 대화창이 맨 아래로 이동하는 기능
• 로딩 상태: AI 응답을 기다리는 동안 사용자에게 상태를 알려주는 표시
• 조건부 렌더링: 특정 조건일 때만 요소를 화면에 출력하는 React 패턴

기본 개념

• 메시지 출력 후 스크롤을 제어해 사용자가 응답을 놓치지 않게 함
• AI 응답 대기 중임을 시각적으로 표현하여 UX 안정감 제공
• 사용자와 AI 메시지를 시각적으로 구분해 가독성을 향상

주요 사용 위치

• 실시간 대화 인터페이스 (고객센터, 튜터 챗봇 등)
• UX를 중요시하는 서비스 프론트엔드
• 다수의 메시지가 교환되는 환경

구체적 코드 예시

const messagesEndRef = useRef(null);

useEffect(() => {
  if (messagesEndRef.current) {
    messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
  }
}, [messages]);

return (
  <div className="chat-container">
    {messages.map((msg, idx) => (
      <div key={idx} className={msg.role === 'user' ? 'user-msg' : 'ai-msg'}>
        {msg.content}
      </div>
    ))}
    {isLoading && <div className="loading">GPT 응답 중...</div>}
    <div ref={messagesEndRef} />
  </div>
);

/* 예시 스타일 */
.user-msg {
  background: #daf1ff;
  padding: 8px;
  border-radius: 8px;
  margin: 4px 0;
  align-self: flex-end;
}

.ai-msg {
  background: #f1f1f1;
  padding: 8px;
  border-radius: 8px;
  margin: 4px 0;
  align-self: flex-start;
}

.loading {
  font-style: italic;
  color: gray;
  margin: 8px;
}

핵심 요점 정리

• useRef + useEffect로 자동 스크롤 구현
• isLoading 상태로 로딩 인디케이터 표시
• 사용자/AI 메시지에 클래스 조건부 적용하여 스타일 구분

.

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.