부록 #1. 대화 풍선 스타일 개선

관련 커밋

  • 변경 파일을 한 번에 덮어쓰기 하실려면, pyhub-git-commit-apply 유틸리티 설치하신 후에, 프로젝트 루트에서 아래 명령 실행하시면 지정 커밋의 모든 파일을 다운받아 현재 경로에 덮어쓰기합니다.

python -m pyhub_git_commit_apply https://github.com/pyhub-kr/django-webchat-rag-langcon2025/commit/3e4c211f2d5a39a6030a3b6a122e6d02c4e2c3ba

uv를 사용하실 경우

uv run pyhub-git-commit-apply https://github.com/pyhub-kr/django-webchat-rag-langcon2025/commit/3e4c211f2d5a39a6030a3b6a122e6d02c4e2c3ba

대화내역 스타일이 너무 밋밋하죠? :-) 현재 사이트는 tailwind css이 너무 적용되어있습니다. 그래서 tailwind css 기반으로 직접 대화 메시지 스타일을 꾸미실 수도 있구요. 본 부록에서는 tailwind css 계열 CSS 라이브러리 중에 daisyui의 chat bubble 컴포넌트를 적용하여 대화 메시지 스타일을 풍선 스타일로 빠르게 개선해보겠습니다.

../../_images/daisyui-chat-bubble-01.png
../../_images/daisyui-chat-bubble-02.png

chat/templates/chat/base.html 파일 덮어쓰기

 1<!doctype html>
 2<html>
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>{% block title %}Django Chat{% endblock %}</title>
 7    {# https://daisyui.com/docs/cdn/ #}
 8    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.24/dist/full.min.css" rel="stylesheet" type="text/css" />
 9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://unpkg.com/htmx.org"></script>
11    <script src="https://unpkg.com/alpinejs"></script>
12</head>
13<body class="bg-gray-100">
14    <div class="container mx-auto px-4 py-8">
15        <header class="mb-8">
16            <nav class="bg-white shadow-lg rounded-lg">
17                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18                    <div class="flex justify-between h-16">
19                        <div class="flex">
20                            <div class="flex-shrink-0 flex items-center">
21                                <a href="{% url 'chat:room_list' %}" class="text-xl font-bold text-gray-800">
22                                    Django Chat
23                                </a>
24                            </div>
25                        </div>
26                        <div class="flex items-center">
27                            <a href="{% url 'chat:room_new' %}"
28                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
29                                새 채팅방
30                            </a>
31                        </div>
32                    </div>
33                </div>
34            </nav>
35        </header>
36
37        <main class="bg-white shadow-lg rounded-lg p-6">
38            {% block content %}
39            {% endblock %}
40        </main>
41
42        <footer class="mt-8 text-center text-gray-600 text-sm">
43            <p>&copy; 2025 파이썬사랑방. All rights reserved.</p>
44        </footer>
45    </div>
46</body>
47</html>

chat/templates/chat/_message_list.html 파일 덮어쓰기

 1{# https://daisyui.com/components/chat/ #}
 2
 3{% for message in message_list %}
 4    {% if message.role == "user" %}
 5        <div class="chat chat-start">
 6            <div class="chat-bubble">
 7                {{ message.content }}
 8            </div>
 9        </div>
10    {% else %}
11        <div class="chat chat-end">
12            <div class="chat-bubble">
13                {{ message.content }}
14            </div>
15        </div>
16    {% endif %}
17{% endfor %}