로컬 LLM + RAG 기반 AI 채팅봇 만들기 # 33 - 챗봇 UI 설계 및 Tailwind CSS 적용

로컬 LLM + RAG 기반 AI 채팅봇 만들기

4.2 챗봇 UI 설계 및 Tailwind CSS 적용

이제 SvelteKit을 활용하여 사용자가 AI 챗봇과 직접 상호작용할 수 있는 UI를 설계하고 구현합니다.
이번 단계에서는 채팅 인터페이스의 디자인을 정의하고, Tailwind CSS를 적용하여 스타일을 구성합니다.

---

1) 챗봇 UI 설계 개요

✅ 요구사항 정의

1️⃣ 실시간 채팅 인터페이스 구현
2️⃣ 사용자가 입력한 메시지를 WebSocket을 통해 서버로 전송
3️⃣ 서버에서 AI 응답을 받아 채팅 화면에 표시
4️⃣ Tailwind CSS를 활용하여 UI 스타일링

✅ 챗봇 UI 와이어프레임

┌──────────────────────────┐
│      AI Chatbot         │
├──────────────────────────┤
│  AI: 안녕하세요! 무엇을 도와드릴까요? │
│  🟢 User: 챗봇이 뭐야?  │
│  AI: AI 챗봇은 사용자 질문을 분석하고 응답하는 시스템입니다. │
│  🟢 User: 좋은 예제 있나요?  │
│  AI: 예, 예제 프로젝트를 참고하세요. │
├──────────────────────────┤
│ [입력창]    [전송 버튼]  │
└──────────────────────────┘

---

2) SvelteKit을 활용한 챗봇 UI 기본 구조

✅ ① 프로젝트 구조 정리

svelte-chatbot/
 ├── src/
 │   ├── routes/
 │   │   ├── +page.svelte  # 메인 챗봇 페이지
 │   ├── components/
 │   │   ├── ChatInput.svelte  # 사용자 입력창 컴포넌트
 │   │   ├── ChatMessages.svelte  # 채팅 메시지 표시 컴포넌트
 │   │   ├── ChatHeader.svelte  # 상단 헤더 컴포넌트
 ├── .env  # 환경 변수 (API URL 설정)

---

3) 챗봇 UI 구현

📌 ① 채팅 페이지 (src/routes/+page.svelte)

<script>
  import ChatHeader from '../components/ChatHeader.svelte';
  import ChatMessages from '../components/ChatMessages.svelte';
  import ChatInput from '../components/ChatInput.svelte';
  
  let messages = [
    { sender: "ai", text: "안녕하세요! 무엇을 도와드릴까요?" }
  ];

  const addMessage = (msg) => {
    messages = [...messages, msg];
  };
</script>

<div class="flex flex-col h-screen bg-gray-100">
  <ChatHeader />
  <ChatMessages {messages} />
  <ChatInput on:sendMessage={addMessage} />
</div>

---

📌 ② 상단 헤더 (src/components/ChatHeader.svelte)

<div class="bg-blue-500 text-white text-xl p-4 text-center">
  AI Chatbot
</div>

---

📌 ③ 채팅 메시지 표시 (src/components/ChatMessages.svelte)

<script>
  export let messages = [];
</script>

<div class="flex-1 overflow-y-auto p-4">
  {#each messages as msg}
    <div class="mb-2">
      <span class="{msg.sender === 'ai' ? 'text-blue-500' : 'text-green-500'}">
        {msg.sender === 'ai' ? '🤖 AI:' : '🟢 User:'}
      </span>
      {msg.text}
    </div>
  {/each}
</div>

---

📌 ④ 사용자 입력창 (src/components/ChatInput.svelte)

<script>
  import { createEventDispatcher } from 'svelte';

  let input = "";
  const dispatch = createEventDispatcher();

  const sendMessage = () => {
    if (input.trim() !== "") {
      dispatch('sendMessage', { sender: "user", text: input });
      input = "";
    }
  };
</script>

<div class="p-4 flex bg-white border-t">
  <input 
    class="flex-1 border p-2 rounded-lg"
    bind:value={input} 
    placeholder="메시지를 입력하세요..."
    on:keydown={(e) => e.key === 'Enter' && sendMessage()}
  />
  <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg" on:click={sendMessage}>
    전송
  </button>
</div>

---

4) Tailwind CSS 적용 스타일링

✅ 스타일 개선 포인트

• 메시지별 색상 차별화 (AI 응답은 파란색, 사용자 메시지는 초록색)
• 반응형 디자인 적용 (모바일, 데스크톱 지원)
• 스무스한 UI 애니메이션 추가

<style>
  .message-container {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
  }

  .message {
    max-width: 70%;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
  }

  .ai-message {
    background-color: #d1e8ff;
    align-self: flex-start;
  }

  .user-message {
    background-color: #d4edda;
    align-self: flex-end;
  }
</style>

---

5) 챗봇 UI 최적화 및 추가 기능

✅ ① 자동 스크롤 기능 추가

<script>
  import { onMount, afterUpdate } from 'svelte';

  let messageContainer;

  afterUpdate(() => {
    messageContainer.scrollTop = messageContainer.scrollHeight;
  });
</script>

<div bind:this={messageContainer} class="message-container"></div>

---

✅ ② WebSocket을 이용한 실시간 응답 추가

• 사용자의 메시지를 WebSocket을 통해 백엔드로 전송
• 서버에서 AI 응답을 받아와 UI에 추가

<script>
  let socket = new WebSocket("ws://localhost:8080/chat");
  
  socket.onmessage = (event) => {
    messages = [...messages, { sender: "ai", text: event.data }];
  };

  const sendMessage = (msg) => {
    messages = [...messages, msg];
    socket.send(msg.text);
  };
</script>

---

6) 챗봇 UI 구현 요약

기능 구현 파일

메인 챗봇 페이지	+page.svelte
상단 헤더 (Chatbot 제목)	ChatHeader.svelte
채팅 메시지 표시	ChatMessages.svelte
사용자 입력창 및 전송 버튼	ChatInput.svelte
WebSocket 연결	ChatInput.svelte

---

7) 다음 단계

이제 SvelteKit을 활용하여 AI 챗봇의 UI를 구축하고 WebSocket을 연동했습니다.
다음으로 4.3 WebSocket을 활용한 실시간 채팅 기능 구현을 진행하여
AI 응답을 실시간으로 표시하는 기능을 완성하겠습니다! 🚀