작성 중인 가상 사이트

＜＜여기에 실제 사이트의 URL을 넣을 예정...＞＞

서론

이번에는 가상 사이트(정적)에 채팅 기능을 구현한 경험에 대한 이야기입니다.

먼저 사이트를 크롤링하여 RAG 데이터를 만들게 했습니다. 이 데이터 역시 순식간에 생성해 준 것에 놀랐습니다.

그 후의 채팅 기능 구현도 순식간에 끝났습니다.

하지만 이후 디자인 수정 과정에서 AI와의 상호작용이 늘어나면서 수고가 많이 들었습니다.

채팅 부분은 별도의 프로젝트 코드를 참조했기 때문에 빨랐을 수도 있겠지만... '기능' 외의 '외관(디자인)'은 (개인의 취향이라서) 상호작용하기 어려웠습니다.

무엇일까요. AI를 사용하면서 최근 이렇게 곤란했던 기억이 없는데... 세밀한 수정 작업에 Codex 데스크톱 버전을 사용한 것이 잘못이었을지도 모릅니다.

사실 Kiro 같은 AI 에디터로 작업하려고 생각했지만... 월초에는 Kiro의 크레딧이 더 중요해서요 (웃음)

기존 사이트에 채팅 기능 구현하기

이번에는 기존 웹사이트에 채팅 기능을 구현해 보았습니다. Codex 데스크톱 버전을 사용했고, 놀라울 정도로 순조롭게 구현을 완료했습니다. '직접 작성'하는 것이 아니라 'AI가 구현하게 한다'는 느낌이었습니다. 이 압도적인 속도감은 매번 놀랍습니다.

이번에는 어렵다고 생각했던 것을 '간단히' 구현해 본 것을 보고 솔직히 깜짝 놀랐습니다.

아직 저 스스로 AI를 과소평가하고 있었습니다.

【실패담】 계획 없는 테스트 사이트 구축과 크레딧 소진

이전에 기본 가상 사이트를 '계획 없이' 만들기 시작했는데... 이것이 큰 함정이었습니다.

임의로 떠오른 생각으로 지시를 반복하면서, 수정 루프에 빠져 크레딧이 순식간에 녹아버렸습니다.

툴 관련 개발에서는 '작동하면 정답'이라는 측면이 있지만, 웹 제작에서는 '일단' 하는 것이 이후의 일관성을 무너뜨리고 끝없는 수정 비용을 발생시킨다는 것을 절실히 느꼈습니다.

지시하지 않았다고 해서 한 파일에 3000줄이나... (쓴웃음)

웹 제작에서 크레딧이 '순식간'으로 사라지는 이유

Windows 앱 같은 툴 개발에서는 AI에게 모호한 지시를 해도 로직만 통하면 완성에 가까워집니다. 하지만 웹 제작, 특히 디자인이 관련된 작업에서는 즉흥적인 지시가 CSS나 레이아웃의 충돌을 일으킵니다.

AI가 '좋은 의도'로 광범위하게 코드를 수정할 때마다 방대한 토큰이 소비됩니다. 웹 제작에서의 크레딧 소모 심각성은 이 '수정 작업과 재작업의 빈번함'에 기인하는 것이 아닐까... 연구자는 아니어서 원인은 모르겠습니다.

디자인 측면에서 '주체성'의 결여

특히 디자인이나 색상 조합에 관해서는 AI의 제안이 부족하다고 느꼈습니다.

제가 지정한 색상에 대해 **

라고 멋지게 마무리하고 싶지만... 굉장히 일시적인 기술이 될 것 같고, 또 툴이나 LLM(대규모 언어 모델)의 진화 속도가 더 빠르기 때문에... 그때그때 대응할 수밖에 없겠네요...

음... 같은 말을 하고 있네요 (웃음)

이하, 세션 로그입니다.

🧑💻 사용자

이 사이트의 정보를 전부 크롤링해서, AI 채팅용 원천 데이터라고 해야 할까요, RAG(검색 증강 생성) 데이터를 만들고 싶은데 그런 게 가능할까요?

🤖 AI

가능합니다. 아니, 우선 한 세트 만들어 두었습니다.

추가 및 생성된 항목:

• 생성 스크립트:
  scripts/generate-rag-data.mjs

• RAG용 JSONL:
  docs/rag/knowledge.jsonl

• 원문 문서 JSON:
  docs/rag/documents.json

• 생성 개요:
  docs/rag/manifest.json

• package.json에 rag 스크립트 추가

PowerShell에서의 실행 명령어는 다음과 같습니다:

npm.cmd run rag

결과는 122 documents / 122 chunks입니다. FAQ, 상품/체험 메뉴, 에피소드, 안전 정보, 매각 플로우, 페이지 내 텍스트 등을 AI 채팅에서 가져오기 쉬운 JSONL 형식으로 만들었습니다.

검증도 마쳤습니다. npm.cmd run rag는 성공했으며, npm.cmd run build도 성공했습니다. 한 가지 주의할 점은, 원본 소스 문구가 일부 글자 깨짐 상태로 보여서 RAG 데이터도 그 원본에 맞춰 동일한 문자열을 유지하고 있습니다. 사이트 표시 측의 올바른 일본어에서 추출하고 싶다면, 다음에는 브라우저에서 실제 렌더링된 DOM을 크롤링하는 방식으로 전환하는 것이 좋아 보입니다.

(생략: 파일 변경 알림 · UI 버튼 표시)

🧑💻 사용자

저기, 그럼 앞으로 이 스크립트를 실행하면 RAG 데이터가 수집되도록 되는 건가요?

🤖 AI

네, 그렇습니다.

앞으로는 이 명령어를 실행하면 RAG용 데이터가 재생성됩니다.

npm.cmd run rag

출력 위치는 여기입니다.

docs/rag/knowledge.jsonl
docs/rag/documents.json
docs/rag/manifest.json

사이트의 문구나 FAQ, 카탈로그 정보 등을 src/data/index.ts나 src/pages/*에서 변경한 뒤에 npm.cmd run rag를 실행하면, 최신 내용으로 RAG 데이터가 다시 만들어집니다.

다만 현재 방식은 '로컬 소스 코드에서 수집하는 방식'입니다. 공개 중인 사이트를 실제로 브라우저로 순회하며 수집하는 '진정한 크롤링'은 아닙니다. 현재의 이 사이트 구성이라면 소스에서 가져오는 편이 더 빠르고 안정적입니다.

🧑💻 사용자

[이미지 첨부]

아래에 ReAct 버전의 챗봇 프로젝트가 있습니다.

이 프로젝트를 참고해서 웹 페이지 우측 하단에 플로팅 버튼(Floating Button)을 배치하고, 클릭 시 채팅이 시작되는 기능을 추가할 수 있을까요?

프로젝트: AIChatWeb2

이미지

🤖 AI

가능합니다. 우선 AIChatWeb2의 구현을 살펴보고, 현재 사이트 측의 React 구성에 잘 어우러지는 형태로 플로팅 버튼과 채팅 패널을 이식하겠습니다. RAG 데이터 연동까지 포함할지는 참조 프로젝트에 달려 있지만, 우선 UI와 실행 동작을 넣겠습니다.

(생략: 명령어 실행 로그 · 참조 프로젝트 탐색 과정)

참조 프로젝트 자체는 찾을 수 없으므로, 이미지의 UI 요구사항을 이 사이트에 맞춰 구현하겠습니다. 채팅 본체는 우선 프론트엔드 완결형의 간이 응답 방식으로 만들고, 나중에 API/RAG 검색 엔드포인트로 교체하기 쉬운 경계(Boundary)를 만들어 두겠습니다.

🧑💻 사용자

"C:\Projects\chat\AIChatWeb2" 여기입니다.

🤖 AI

추가되었습니다. 우측 하단에 둥근 플로팅 버튼을 표시하며, 클릭하면 이미지와 같은 채팅 패널이 열립니다.

구현된 주요 파일:

FloatingChatWidget.tsx
App.tsx
vite-env.d.ts

동작은 다음과 같습니다:

• 모든 페이지 우측 하단에 채팅 버튼 표시
• 클릭 시 'AI 어시스턴트' 패널 실행
• 메시지 전송, Enter 전송, Shift+Enter 줄바꿈 대응
• VITE_CHAT_API_URL

설정되어 있으면 외부 채팅 API로 POST - 설정되어 있지 않으면, 이 사이트 내의 FAQ·체험 메뉴·안전 정보 등에서 간이 검색하여 답변

확인되었습니다. npm.cmd run build

빌드에 성공했습니다. 로컬 확인용 서버도 기동되었습니다.

다음으로 실제 RAG/AI 답변으로 연결하려면, VITE_CHAT_API_URL에 채팅 API URL을 넣는 것만으로 연결할 수 있는 형태로 만들어 두었습니다.

(생략: 파일 변경 알림·UI 버튼 표시)

🧑💻 사용자

C:\Projects\chat\AIChatWeb2의 기능을 구현하여 RAG 데이터를 이번에 작성한 것으로 변경하고 싶습니다.

🤖 AI

구현했습니다. AIChatWeb2와 마찬가지로, 채팅 UI가 /api/chat으로 POST하고, API 측에서 이번에 만든 docs/rag/knowledge.jsonl을 검색하여 답변하는 형태로 변경했습니다.

추가된 항목:

• api/chat.js: Vercel 운영 환경용 채팅 API
• server/rag-chat.js: RAG 검색 및 답변 생성
• vite.config.ts: 로컬 개발 시에도 /api/chat이 동작하는 middleware (미들웨어)
• FloatingChatWidget.tsx: API 연결 방식으로 변경
• vercel.json: /api/*를 SPA fallback에서 제외

현재 동작 방식은 다음과 같습니다.

• 채팅 전송
• /api/chat이 수신
• docs/rag/knowledge.jsonl을 읽음
• 관련 청크 (Chunk) 검색
• OPENAI_API_KEY가 있으면 OpenAI로 답변 생성
• API 키 미설정 시, 검색 결과 기반으로 답변

로컬의 http://127.0.0.1:5173/도 새로운 설정으로 재구동되었습니다. API 직접 테스트도 성공했습니다.

검증: npm.cmd run rag / npm.cmd run build 모두 성공했습니다.

운영 환경에서 AI 답변을 사용하려면, Vercel 환경 변수에 OPENAI_API_KEY를 설정해 주세요. 선택 사항으로 OPENAI_MODEL도 지정할 수 있습니다. 미설정 시에는 검색 결과 기반의 간이 답변이 제공됩니다.

(생략: 파일 변경 알림·UI 버튼·웹 프리뷰 표시)

🧑💻 사용자

정말 좋은 느낌으로 채팅이 구현된 것 같습니다. 로컬에서 동작 확인을 하고 있는데, AI를 사용하여 추론 등을 하지 않고 답변을 내보내고 있는 것 같은데, 이것은 어떤 방식으로 구현되어 있나요? 속도도 빠르고 이것만으로도 상당히 실용적이라는 느낌이 듭니다.

🤖 AI

네, 현재 로컬에서 동작하고 있는 것은 'AI 추론 없는 경량 RAG 검색 답변'입니다. 그래서 빠릅니다.

메커니즘은 대략 다음과 같습니다.

• npm.cmd run rag로 사이트 정보를 docs/rag/knowledge.jsonl에 저장
• 채팅을 통해 질문을 전송
• /api/chat이 knowledge.jsonl을 읽음
• 질문문을 키워드화함
• 각 RAG 청크 (Chunk)의 title / content와 대조하여 스코어링 (Scoring)
• 점수가 높은 상위 몇 건을 반환
• OPENAI_API_KEY가 없으면, 해당 검색 결과를 정형화하여 답변으로 표시

구현의 핵심은 server/rag-chat.js입니다.

현재 수행하고 있는 것은 벡터 검색 (Vector Search)이 아니라, 로컬의 문자열 검색 (String Search)에 가깝습니다. 다만 단순한 완전 일치뿐만 아니라, 질문을 토큰화 (Tokenization)하여 제목 일치를 강하게 평가하거나, '안전', '예약', '매각'과 같은 단어에 관련 키워드를 추가하고 있습니다.

그래서 예를 들어

🧑💻 사용자

이 방식은 예전부터 행해지던 챗봇(Chatbot) 제작 방식 아닌가요?

🤖 AI

네, 상당히 오래전부터 있던 챗봇 제작 방식과 가깝습니다.

현재의 방식은 거칠게 말하자면, 전통적인 FAQ 검색형 챗봇(FAQ search-type chatbot)이나 규칙 기반형 챗봇(Rule-based chatbot)의 계보입니다.

예전부터 있던 구성은 다음과 같습니다.

사용자의 질문
↓
키워드 추출
...

이번 구현도 기본은 이것입니다. 다만, 조금 더 현대적인 방식을 도입하여 FAQ뿐만 아니라 사이트 전체에서 만든 knowledge.jsonl을 검색 대상으로 하고 있습니다. 따라서 'FAQ 봇'이라기보다는 '작은 사이트 내 검색 채팅'에 가깝습니다.

전통적인 방식의 강점은 지금도 상당히 많습니다.

• 빠름
• 저렴함
• 고장이 적음
• 답변 범위를 제어하기 쉬움
• 사실 확인이 용이함
• 소규모 사이트에서는 충분히 편리함

반면, 최근의 LLM/RAG 채팅은 이 위에,

검색 결과
↓
AI가 요약·비교·자연어 답변

을 더한 느낌입니다.

그래서 지금의 것은 '고전적인 챗봇 + RAG용 데이터 형식'의 중간 정도입니다. 사실 이 토대가 탄탄할수록 나중에 AI를 추가했을 때도 안정적입니다. AI에게만 모든 것을 맡기는 것보다 훨씬 현실적입니다.

🧑💻 사용자

[이미지 첨부]

이야기는 바뀌었습니다만, 오른쪽 하단의 채팅 버튼 색상이 사이트의 이미지와 어울리지 않는 느낌이 듭니다.

🤖 AI

확실히 지금의 단색 블루는 다소 범용 채팅 같은 느낌이 강해서, 이 사이트의 시안(Cyan)/바이올렛(Violet)/마젠타(Magenta)가 어우러진 기억 SF 느낌에서 겉도는 것 같습니다. 오른쪽 하단 버튼만 사이트의 액센트에 맞춰 그라데이션과 은은한 발광 효과를 주겠습니다.

버튼을 사이트의 액센트 컬러에 맞췄습니다.

(생략: 빌드 확인 명령어·파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

[이미지 첨부]

배경은 이 색상으로 하지 않을까요? 그라데이션은 다소 산만한 느낌이 듭니다.

🤖 AI

변경했습니다. 오른쪽 하단 채팅 버튼을 그라데이션이 아닌, 사이트 내 버튼과 같은 시안 계열의 단색으로 맞췄습니다.

변경 위치: FloatingChatWidget.tsx

현재 외관은 bg-cyanline 베이스이며, 호버(Hover) 시에만 흰색에 가깝게 밝아지는 절제된 움직임을 보여줍니다. 이 편이 사이트 전체의 UI에 더 잘 녹아들 것이라고 생각합니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

[이미지 첨부]

🤖 AI

네, 이 '감정 기준 보기'와 동일한 시안 색상에 맞추고 있습니다.

현재 채팅 버튼 배경은 bg-cyanline이며, 정의된 색상은 다음과 같습니다.

cyanline: "#58f4ff"

즉, 이미지의 버튼과 동일한 계통의 단색입니다. 만약 브라우저상에서 아직 파란색으로 보인다면, 페이지를 한 번 새로고침하면 반영됩니다.

🧑💻 사용자

[이미지 첨부]

내부 아이콘은 다음과 같이 하고 싶습니다.

🤖 AI

변경했습니다.

외부 채팅 버튼은 시안 색상을 유지하고, 내부 아이콘을 이미지와 같은 파란색 원 + 흰색 말풍선으로 변경했습니다.

변경 위치: FloatingChatWidget.tsx

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

저기, 이중으로 만들고 싶은 게 아니라 배경을 시안으로 하고 아이콘은 흰색 원 아이콘으로 하고 싶습니다.

🤖 AI

수정했습니다.

현재는 다음과 같습니다.

• 배경: 시안 단색
• 내용물: 흰색 말풍선 아이콘
• 파란색 내부 원: 없음

의도를 잘못 파악했습니다, 죄송합니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

[이미지 첨부]

이 SVG를 사용할 수 없을까요?

🤖 AI

사용할 수 있습니다. 올려주신 SVG 형태로 교체했습니다.

변경 후에는 다음과 같습니다.

• 배경: 시안
• 아이콘: 흰색 원형 채팅 SVG
• 내부의 점 3개: currentColor를 사용하여 진한 색상

으로 설정되었습니다.

변경 위치: FloatingChatWidget.tsx

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

시안과 흰색 조합은 조금 보기 힘듭니다. 시안의 명도를 조금 낮추지 않을까요?

🤖 AI

조금 더 어두운 시안으로 낮췄습니다.

• 일반: #1bbfd0
• 호버: #20d6e8

흰색 아이콘과의 대비가 이전보다 더 잘 나타날 것입니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

헤더 부분 메뉴의 폰트 색상 정도로 낮춰보세요.

🤖 AI

낮췄습니다.

채팅 버튼의 배경을 헤더 메뉴에 가까운 차분한 시안(Cyan) 색상으로 설정했습니다.

• 보통: #149aa8
• 호버 (Hover): #18b6c6

흰색 아이콘도 이전보다 더 잘 보일 것입니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

죄송합니다. 이전 색상이 더 좋았어요. 다시 되돌려 주시겠어요?

🤖 AI

되돌렸습니다.

• 보통: #1bbfd0
• 호버 (Hover): #20d6e8

이전의 약간 밝은 시안 색상으로 돌아왔습니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

아이콘을 조금 더 크게 만들어 주실 수 있나요?

🤖 AI

아이콘만 조금 크게 변경했습니다.

h-8 w-8에서 h-9 w-9로 변경했습니다. 버튼 자체의 크기는 그대로 유지했습니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

좋은 것 같아요.

🤖 AI

다행입니다. 지금 상태가 사이트의 톤과 잘 어우러지기 시작했네요.

🧑💻 사용자

× 부분도 흰색으로 해서 SVG로 느낌 있게 만들 수 없을까요? 선을 굵게 하고 싶습니다.

🤖 AI

×를 SVG로 교체하여 흰색의 굵은 선으로 만들었습니다.

• SVG화
• 선 색상: 흰색
• 선 두께: 2.8
• 끝부분은 둥글게 처리하여 조금 부드럽게 만들었습니다

변경 사항: FloatingChatWidget.tsx

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

좋은 것 같아요.

🤖 AI

다행입니다. 지금 버튼은 사이트의 구성 요소로서 상당히 자연스러워졌습니다.

🧑💻 사용자

채팅의 전송 버튼 배경도 채팅 버튼의 배경과 맞추고 싶습니다.

그리고 '전송' 대신 'Send' 같은 것으로 바꾸고 싶어요. 일본어(한국어)로는 SF적인 느낌이 떨어지는 것 같아서요...

🤖 AI

변경했습니다.

• 채팅 내 전송 버튼 배경을 우측 하단 채팅 버튼과 동일한 #1bbfd0로 통일
• 호버 (Hover) 색상도 #20d6e8로 설정
• 라벨을 '전송'에서 'Send'로 변경

확실히 이렇게 하는 것이 SF적인 UI 톤에 더 잘 어울립니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

Send의 폰트 색상은 흰색에 아주 가까운 회색으로 하는 건 어떨까요?

🤖 AI

좋은 생각입니다. Send의 글자 색상을 text-slate-50으로 설정했습니다.

완전한 흰색보다 아주 약간 부드러운, 거의 흰색에 가까운 회색입니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

Send 버튼을 누른 후, 질문 내용 정도만큼 채팅창을 아래로 스크롤하게 하면 어떨까요? 답변이 보이지 않아서 사용성이 조금 떨어지는 것 같습니다.

🤖 AI

대응했습니다.

메시지 전송 후, 사용자의 질문이나 답변 대기 표시가 추가되는 타이밍에 채팅창이 자동으로 하단까지 스크롤됩니다.

변경 사항: FloatingChatWidget.tsx

이제 Send를 누른 후에도 대화의 다음 내용을 확인하기 쉬워질 것입니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

채팅 버튼을 추가하면서 느낀 건데, 헤더 부분의 각 메뉴 폰트 색상이 약간 너무 어두운 것 같아요. 명도를 조금 더 높이는 건 어떨까요? 어떻게 생각하세요?

🤖 AI

동감입니다. 약간 어두워서 채팅 버튼을 정돈한 후에 헤더만 가라앉아 보이는 느낌이 있었습니다.

헤더 메뉴의 기본 색상을 text-cyanline/70에서 text-cyanline/85로 높였습니다.

호버 (Hover) 시에는 기존과 동일하게 text-cyanline입니다. 너무 밝게 만들지는 않으면서 시인성은 높아지도록 조절했습니다.

(생략: 파일 변경 통지·UI 버튼 표시)

🧑💻 사용자

밝게 만든 만큼 마우스를 올렸을 때(호버 시) 더 밝게 하지 않으면 눈에 띄지 않을 것 같아요.

(생략: AI 사용량 제한으로 인해 일시 중단. 다음 날 재개)

🧑💻 사용자

밝게 만든 만큼 마우스를 올렸을 때(호버 시) 더 밝게 하지 않으면 눈에 띄지 않을 것 같아요.

🤖 AI

조정했습니다.

헤더 메뉴는 기본 상태를 밝은 시안 색상으로 유지하되, 호버 (Hover) 시에는 hover:text-white 및 hover:drop-shadow-[0_0_8px_rgba(88,244,255,0.55)]를 적용했습니다.

이제 기본 상태와의 차이가 생겨서, 마우스를 올렸을 때 확실히 눈에 띌 것입니다.

（생략: 파일 변경 알림·UI 버튼 표시）

🧑💻 사용자

음, 이번에는 일단 여기서 마무리할게요. 추론 (Inference)을 사용하여 답변을 생성하는 부분은 다음에 다시 수정하도록 하겠습니다.

🤖 AI

알겠습니다. 이번에는 여기서 일단락 짓도록 하죠.

현재 상태로는 채팅 UI (Chat UI), 우측 하단 버튼, 로컬 RAG 검색 답변, /api/chat의 토대까지는 갖춰져 있습니다. 추론 및 LLM 답변 생성 부분은 다음 단계에서 OPENAI_API_KEY를 전제로 답변 품질을 다듬을지, 아니면 AIChatWeb2에 가까운 ReAct 구성으로 맞출지를 선택할 수 있습니다.

수고하셨습니다. 상당히 좋은 지점까지 진행되었습니다.

🧑💻 사용자

이 시점에서 일단 커밋 (Commit)과 푸시 (Push)를 부탁드립니다.

🤖 AI

커밋과 푸시를 완료했습니다.

• 커밋:
  b80aa09 Add floating RAG chat widget

• 푸시 대상:
  origin/main

빌드 (Build) 확인도 통과했습니다. npm.cmd run build

워크트리 (Worktree)도 깨끗한 상태입니다.