아키텍처 (바이브 코더 가이드)

작동 원리를 이해하고 싶은 개발자를 위한 RAG 파이프라인 심층 분석입니다.

RAG 파이프라인 개요

LaunchChat은 검색 증강 생성(RAG)을 사용하여 귀하의 문서를 기반으로 질문에 답변합니다.

1. 수집

파싱 → 청킹 → 임베딩 → 저장

2. 검색

쿼리 → 벡터 검색 → 랭킹

3. 생성

컨텍스트 → LLM → 답변 + 인용

수집 파이프라인

1. 파싱

콘텐츠는 다양한 소스에서 일반 텍스트로 파싱됩니다:

  • Notion: 계층 구조를 유지하는 블록 단위 파싱
  • DOCX: mammoth.js를 통해 추출
  • Markdown: remark/unified로 파싱
  • Website: 웹사이트: 크롤링 후 내비게이션/푸터 제거

2. 청킹

텍스트는 최적의 검색을 위해 겹치는 청크로 분할됩니다:

{
  targetSize: 400,    // tokens per chunk
  overlap: 50,        // token overlap between chunks
  preserveHeadings: true,  // keep heading context
  minChunkSize: 100   // minimum viable chunk
}

각 청크는 컨텍스트를 위해 상위 제목 계층을 유지합니다.

3. 임베딩

청크는 1536차원 벡터로 변환됩니다:

Model: text-embedding-3-small
Dimensions: 1536
Provider: OpenAI (via OpenRouter)

4. 저장

벡터는 pgvector 확장을 사용하여 PostgreSQL에 저장됩니다:

-- content_chunks table
id: uuid
knowledge_base_id: uuid
page_id: string
page_title: string
content: text
embedding: vector(1536)
parent_heading: string

검색 전략

하이브리드 검색

2단계 검색 프로세스를 사용합니다:

  1. Vector Search: 벡터 검색: pgvector의 <=> 연산자를 사용한 코사인 유사도
  2. Keyword Fallback: 키워드 폴백: 벡터 검색 결과의 유사도가 낮으면 키워드 매칭된 청크를 추가

유사도 스코어링

-- Vector similarity query
SELECT *, 1 - (embedding <=> query_embedding) as similarity
FROM content_chunks
WHERE knowledge_base_id = $1
ORDER BY embedding <=> query_embedding
LIMIT 5

답변 생성

신뢰도 스코어링

생성 전에 신뢰도 점수를 계산합니다:

confidence = bestSimilarity + (hasMultipleChunks ? 0.1 : 0) + 0.2
// Capped at 1.0

if (confidence < threshold) {
  return refusalMessage;  // Don't hallucinate
}

인용 추출

LLM은 [Source N] 형식을 사용하도록 지시됩니다. 이를 파싱하여 원본 페이지에 연결합니다:

// Extract citations from answer
const citationPattern = /\[Source (\d+)\]/g;
const matches = answer.matchAll(citationPattern);

// Map to original pages
citations = matches.map(m => chunks[m[1] - 1])

문서 작성 모범 사례

AI 검색에 최적화된 문서 구조를 만드세요:

권장

  • 명확하고 설명적인 제목 사용
  • 섹션을 하나의 주제에 집중
  • 예제와 코드 스니펫 포함
  • 용어와 약어 정의
  • 기능 변경 시 문서 업데이트

피해야 할 것

  • 구조 없는 매우 긴 페이지
  • 페이지 간 중복 콘텐츠
  • 오래되거나 모순되는 정보
  • alt 텍스트 없는 이미지 과다 사용
  • 내비게이션만 있는 페이지

AI 프롬프트 템플릿

이 프롬프트를 Cursor, Windsurf 또는 Claude Code에 복사하여 LaunchChat 연동에 활용하세요:

I'm integrating LaunchChat, an AI-powered support widget.

Widget Setup:
1. Add to HTML: <script>window.LaunchChatConfig = {widgetId: "ID"}</script>
   <script src="https://domain.com/widget.js" async></script>

2. For React/Next.js, create a client component that:
   - Sets window.LaunchChatConfig
   - Dynamically loads widget.js
   - Cleans up on unmount

API Reference:
- window.LaunchChatWidget.open() - Open chat
- window.LaunchChatWidget.close() - Close chat
- window.LaunchChatWidget.on(event, callback) - Listen to events
- Events: 'open', 'close', 'message', 'escalate', 'feedback'

Help me integrate this into my [FRAMEWORK] app.