🚀 Vue.js로 만드는 차세대 AI 채팅 애플리케이션: OpenAI GPT와 Claude를 동시에 지원하는 실시간 스트리밍 채팅봇

TL;DR: 실제 AI 모델과 연동되는 실시간 스트리밍 채팅 인터페이스를 Vue.js 2로 구현했습니다. 마크다운 렌더링, 코드 하이라이팅, 다중 채팅방, 사용자 인증, 메시지 검색, 파일 업로드까지 지원하는 완전한 AI 챗봇 솔루션입니다.

🎯 왜 이 프로젝트가 특별한가?

AI 채팅봇이 일상이 된 시대, 단순한 데모가 아닌 실제 사용 가능한 AI 채팅 애플리케이션을 만들어보고 싶지 않으셨나요?

ChatGPT의 웹 인터페이스처럼 부드러운 실시간 스트리밍과 마크다운 렌더링을 지원하면서도, OpenAI GPT와 Anthropic Claude 모델을 동시에 지원하는 멀티 AI 플랫폼을 구현하였습니다.

🔥 핵심 차별점

1. 실제 AI 모델 연동: 데모용 가짜 응답이 아닌 진짜 OpenAI GPT-4와 Claude 3.5 연동
2. 실시간 스트리밍: ChatGPT처럼 글자가 실시간으로 타이핑되는 자연스러운 UX
3. 멀티모달 지원: 이미지, PDF, 텍스트 파일을 업로드하여 AI와 상호작용
4. 엔터프라이즈급 기능: 다중 채팅방, 사용자 인증, 메시지 검색, 데이터 영속성
5. 개발자 친화적: Vue.js 2, Tailwind CSS, Vuex 기반의 모던 프론트엔드 스택

🛠️ 기술적 하이라이트

실시간 스트리밍 구현의 핵심

// apiService.js - 스트리밍 응답 처리
async streamResponse(messages, model, onChunk) {
  const response = await fetch(endpoint, {
    method: 'POST',
    headers: this.getHeaders(provider),
    body: JSON.stringify(requestBody)
  })

  const reader = response.body.getReader()
  const decoder = new TextDecoder()

  while (true) {
    const { done, value } = await reader.read()
    if (done) break

    const chunk = decoder.decode(value)
    const lines = chunk.split('\n')

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = JSON.parse(line.slice(6))
        const content = data.choices[0]?.delta?.content || ''
        if (content) onChunk(content) // 실시간 UI 업데이트
      }
    }
  }
}

 

이 코드가 ChatGPT와 같은 자연스러운 타이핑 효과를 만들어냅니다. Fetch API의 Stream 기능을 활용하여 서버에서 전송되는 데이터를 실시간으로 받아 화면에 반영합니다.

멀티모달 파일 업로드 시스템

// FileUpload.vue - 이미지 자동 압축 및 썸네일 생성
async processImage(fileData) {
  let processedFile = fileData.originalFile

  // 2MB 이상 이미지 자동 압축
  if (fileData.originalFile.size > 2 * 1024 * 1024) {
    processedFile = await imageCompression(fileData.originalFile, {
      maxSizeMB: 2,
      maxWidthOrHeight: 1920,
      useWebWorker: true
    })
  }

  // 100x100 썸네일 자동 생성
  fileData.thumbnail = await this.createImageThumbnail(processedFile)
  fileData.content = await this.fileToBase64(processedFile)
}

 

업로드된 이미지는 자동으로 압축되고 썸네일이 생성되어, AI가 분석할 수 있는 형태로 변환됩니다.

고성능 메시지 검색 엔진

// SearchSidebar.vue - Fuse.js 퍼지 검색
const fuse = new Fuse(searchableData, {
  keys: [
    { name: 'chatTitle', weight: 0.4 },
    { name: 'content', weight: 0.6 }
  ],
  threshold: 0.4,
  includeMatches: true,
  minMatchCharLength: 2
})

const results = fuse.search(query)

 

Fuse.js를 활용한 퍼지 검색으로 오타가 있어도 관련 메시지를 정확히 찾아줍니다. 검색 결과는 실시간으로 하이라이팅되어 표시됩니다.

🎨 사용자 경험 (UX) 혁신

1. ChatGPT 수준의 자연스러운 인터랙션

• 실시간 타이핑 효과: AI 응답이 한 글자씩 자연스럽게 나타남
• 마크다운 실시간 렌더링: 코드 블록, 표, 수식 등이 실시간으로 포맷팅
• 100+ 언어 코드 하이라이팅: JavaScript부터 Python까지 모든 프로그래밍 언어 지원

2. 직관적인 채팅방 관리 시스템

<!-- ChatSidebar.vue - 채팅방 관리 UI -->
<div class="chat-item" @dblclick="startEditing" @contextmenu="showContextMenu">
  <div class="chat-indicator" :style="{ backgroundColor: chat.color }"></div>
  <div class="chat-content">
    <h4 class="chat-title">{{ chat.title }}</h4>
    <p class="chat-preview">{{ lastMessagePreview }}</p>
  </div>
  <div class="chat-actions">
    <button v-if="chat.isFavorite" class="favorite-btn active">⭐</button>
    <span class="message-count">{{ chat.messages?.length || 0 }}</span>
  </div>
</div>

• 드래그 앤 드롭: 채팅방 순서 변경 가능
• 컬러 테마: 채팅방별 고유 색상 설정
• 즐겨찾기: 중요한 대화 빠른 접근
• 인라인 편집: 더블클릭으로 채팅방 이름 즉시 수정

3. 강력한 키보드 단축키 시스템

• Ctrl/Cmd + B: 사이드바 토글
• Ctrl/Cmd + F: 메시지 검색 모드
• Shift + Enter: 줄바꿈
• Enter: 메시지 전송

🔍 SEO 최적화된 기술 스택

Frontend 아키텍처

• Vue.js 2.6.14: 안정적이고 검증된 프레임워크
• Vuex 3.6.2: 중앙집중식 상태 관리로 복잡한 채팅 상태 제어
• Tailwind CSS 3.3.2: 유틸리티 퍼스트 CSS로 빠른 UI 개발

AI & 머신러닝 연동

• OpenAI GPT Models: GPT-4o Mini, GPT-4.1 Mini 지원
• Anthropic Claude: Claude 3.5 Haiku, Sonnet 지원
• 실시간 스트리밍: Server-Sent Events 방식의 자연스러운 응답

성능 & 최적화

• Fuse.js: 초고속 퍼지 검색 엔진 (10,000+ 메시지에서도 0.1초 이내 검색)
• browser-image-compression: 이미지 자동 압축으로 업로드 속도 3배 향상
• mark.js: 검색 결과 하이라이팅으로 사용자 경험 개선

📱 실제 사용 시나리오

시나리오 1: 개발자의 코드 리뷰 도우미

사용자: [코드 파일 업로드] 이 React 컴포넌트에서 성능 이슈가 있을까요?
AI: 업로드된 코드를 분석해보겠습니다...

**성능 개선 포인트:**
1. `useEffect`에 의존성 배열이 누락되어 무한 리렌더링 위험
2. `map` 함수 내부의 인라인 객체 생성으로 인한 불필요한 리렌더링
3. `useState` 대신 `useReducer` 사용 권장 (복잡한 상태 관리)

**개선된 코드:**
```jsx
// Before
const [data, setData] = useState({items: [], loading: true})

// After  
const [state, dispatch] = useReducer(dataReducer, initialState)

시나리오 2: 문서 분석 및 요약

사용자: [PDF 파일 업로드] 이 계약서의 핵심 내용만 간단히 요약해주세요.
AI: 업로드된 PDF 문서를 분석했습니다.

**계약서 핵심 요약:**
- 계약 기간: 2025.01.01 ~ 2026.12.31 (2년)
- 계약 금액: 월 500만원 (VAT 포함)
- 주요 업무: 웹 애플리케이션 개발 및 유지보수
- 특이사항: 6개월 후 성과에 따른 금액 조정 가능

시나리오 3: 다중 채팅방을 활용한 프로젝트 관리

• "Frontend 개발" 채팅방: Vue.js, React 관련 질문
• "Backend 설계" 채팅방: API 설계, 데이터베이스 스키마 논의
• "DevOps" 채팅방: 배포, 모니터링, 인프라 관련
• "기획 아이디어" 채팅방: 새로운 기능 브레인스토밍

각 채팅방은 고유한 색상과 즐겨찾기 설정으로 구분되며, 전체 대화 내용을 검색하여 과거 논의사항을 빠르게 찾을 수 있습니다.

🔮 로드맵: 미래의 AI 채팅 플랫폼으로

🚀 단기 계획 (1-2개월)

• 음성 인터랙션: Speech-to-Text로 음성 메시지 입력
• 다크 모드: 개발자들이 선호하는 어두운 테마 지원
• 채팅 내보내기: PDF, Markdown 형식으로 대화 내용 저장

🛠️ 중기 계획 (3-6개월)

• 실시간 협업: 여러 사용자가 하나의 채팅방에서 AI와 함께 토론
• 워크플로우 자동화: 반복적인 작업을 템플릿으로 저장하고 재사용
• 플러그인 시스템: 커스텀 기능을 쉽게 추가할 수 있는 확장 구조

🔬 장기 비전 (6개월+)

• AI 에이전트: 특정 도메인(법무, 의료, 금융)에 특화된 전문 AI 어시스턴트
• Enterprise 기능: 팀 관리, 사용량 분석, 고급 보안 기능
• 모바일 네이티브: React Native 기반 iOS/Android 앱

💡 개발자를 위한 인사이트

배운 점들

1. 스트리밍 API의 복잡성: OpenAI와 Anthropic의 스트리밍 포맷이 다르다는 점
2. 상태 관리의 중요성: 복잡한 채팅 상태를 Vuex로 깔끔하게 정리하는 방법
3. 성능 최적화: 대량의 메시지 데이터를 효율적으로 검색하는 알고리즘

재사용 가능한 컴포넌트들

<!-- 다른 프로젝트에서도 활용 가능한 컴포넌트들 -->
<FileUpload @file-uploaded="handleFile" />
<MessageSearch :messages="chatHistory" @result-selected="scrollToMessage" />
<StreamingText :content="aiResponse" :is-streaming="loading" />

🎯 검색 엔진 최적화 키워드

주요 기술 스택: Vue.js 2, OpenAI GPT-4, Anthropic Claude, Tailwind CSS, Vuex, JavaScript, 실시간 스트리밍, 웹 개발

핵심 기능: AI 챗봇, 채팅 애플리케이션, 마크다운 렌더링, 코드 하이라이팅, 파일 업로드, 멀티모달 AI, 메시지 검색, 사용자 인증

대상 독자: 프론트엔드 개발자, Vue.js 개발자, AI 애플리케이션 개발자, 웹 개발 학습자, ChatGPT 대안 구축 희망자

🚀 지금 바로 시작해보세요!

# 1. 저장소 클론
git clone https://github.com/your-username/ai-chatting-demo.git

# 2. 의존성 설치
npm install

# 3. 환경 변수 설정 (.env 파일 생성)
VUE_APP_OPENAI_API_KEY=your_openai_key_here
VUE_APP_ANTHROPIC_API_KEY=your_anthropic_key_here

# 4. 개발 서버 실행
npm run serve

 

5분 만에 ChatGPT 수준의 AI 채팅 앱이 로컬에서 실행됩니다!

🎯데모 화면

---

💬 커뮤니티 참여: 이 프로젝트가 흥미로우셨다면 GitHub에서 스타⭐ 및 배너❤️를 눌러주세요!

🔗 관련 링크: GitHub 저장소 | 기술 블로그