RAG 연동 웹 앱

 

1. RAG ?

검색(Retrieval) + 답변 생성(Generation)을 결합한 기술. 마치 오픈북 시험처럼, 필요한 자료를 찾아보면서 답변하는 방식.
외부 문서를 업로드하고 질문에 대한 답변을 생성할 때 관련 문서를 검색해서 LLM이 더 정확한 답변을 생성.

왜 필요할까?

LLM은 학습 데이터에만 의존. 하지만 RAG를 사용하면?

• 최신 정보 활용 가능
• 사내 문서, 개인 자료 등 외부 지식 활용
• Hallucination(헛소리) 감소
• 답변의 출처 추적 가능

2. 데모

2.1 요약

• 문서를 벡터로 변환해서 Vector DB에 저장
• 질문도 벡터로 변환해서 유사한 문서 검색
• 검색 결과 + 질문을 LLM에 전달해 답변 생성

2.2 준비

• Gemini key 생성해서 가져오기
• https://aistudio.google.com/api-keys

2.3 sample.txt 생성

지크: "여기까지 혼자 쫓아올 줄은 몰랐군… 리바이."
리바이: "넌 계속 도망치기만 하면 살 수 있을 줄 알았지."
지크: "네가 그 많은 병사들을 베고 온 걸 알면서도… 흔들리지 않나 보군."
리바이: "그건 네가 만든 선택이야. 네가 죽인 건 그저 숫자가 아니고… 내 동료들이었다."
지크: "전쟁이란 그런 거지. 누가 옳은지 따지기 전에, 누구를 먼저 제거하느냐가 결정한다."
리바이: "말 참 잘하네. 마치 피해자인 척."
지크: "너희들은 언제나 ‘인류의 자유’라는 이름으로 학살을 정당화하지."
리바이: "네 입에서 그런 말이 나오다니 웃기지도 않는군."
지크: "그래… 너희는 내가 짐승거인이기 때문에 악마라고 부르겠지. 하지만 진짜 악마는—"
리바이: "입 다물어. 네 변명 듣자고 온 거 아니다."
지크: "…역시, 대화로 설득할 수 없는 종류군."
리바이: "네가 보여줬잖아. 말로는 아무것도 해결되지 않는다는 걸."
지크: "그래? 그럼 진짜 힘으로 끝내보자고. 네가 자랑하는 속도, 그 칼질… 다 알고 있다."
리바이: "알면 좋지. 준비라도 되어 있어라."
지크: "너희 인간은 참 이상해. 희망이 없다고 말하면서도 계속 앞으로 오지."
리바이: "그건 네가 모르는 부분이지. 우린 절망 속에서도 버틴다는 걸."
지크: "버티면 뭐가 남지? 살아남은 자들의 죄책감뿐일 텐데."
리바이: "누굴 위해 버티는지 모르니까 그런 소릴 하지."
지크: "…역시, 네 눈빛은 언제 봐도 불쾌해. 그 무표정 뒤에 감춰진 살기가."
리바이: "네놈을 베기 전까지는 앞으로도 이 표정일 거다."
지크: "좋아. 그럼 서로 마무리하자."
리바이: "그래. 여기서 끝내자—지크."

2.4 DEMO 코드

• demo.js는 RAG (Retrieval-Augmented Generation) 시스템을 구현
• 아래 코드 구현하고 key넣기

// demo.js (CommonJS 방식)
const { GoogleGenAI } = require('@google/genai');
const fs = require('fs');

const ai = new GoogleGenAI({ apiKey: '{ 여ㄱㅣ 에 키를 넣으세요~~!!}' });

async function demo() {
  console.log('1단계: FileSearchStore 생성 중...');
  const store = await ai.fileSearchStores.create({
    config: { displayName: 'class-demo-store' }
  });
  console.log(`Store 생성 완료: ${store.name}`);

  console.log('\n 2단계: 파일 업로드 중...');
  let operation = await ai.fileSearchStores.uploadToFileSearchStore({
    file: 'sample.txt',
    fileSearchStoreName: store.name,
    config: { displayName: 'sample-document' }
  });

  while (!operation.done) {
    await new Promise(resolve => setTimeout(resolve, 2000));
    operation = await ai.operations.get({ operation });
    console.log('처리 중...');
  }
  console.log('업로드 완료!');

  console.log('\n3단계: 질문하기...');
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: "지크의 대화 좀 요약해줘",
    config: {
      tools: [{ fileSearch: { fileSearchStoreNames: [store.name] } }]
    }
  });

  console.log('\n 답변:');
  console.log(response.text);
}

demo().catch(console.error);

2.5 DEMO 실행

npm init -y
npm install @google/genai
node demo.js

---

3. RAG 파이프라인 흐름

3.1 문서 준비 단계 (Indexing 단계)

• 파일업로드
• chunking
  • 문서를 작은 조각으로 분할 (챕터별로 나누듯)
• Embedding
  • 각 조각을 벡터(숫자 배열)로 변환 (의미를 좌표로 표현)
• Vector store
  • 벡터를 DB에 저장 (검색 가능하게)
  • vector : 의미를 숫자 배열로 표현한 것 (예: [0.2, -0.5, 0.8, ...]). 비슷한 의미는 비슷한 숫자 패턴을 가짐

3.2 검색 및 생성 단계 (Query Phase)

• 사용자 질문 입력:
  • 예: "이 문서의 핵심 요약 알려줘"
• 질문 임베딩(Embedding)
  • 질문을 벡터(숫자 배열)로 변환
  • Embedding: 단어/문장을 벡터로 변환하는 과정. 마치 단어를 지도상의 좌표로 표현하는 것과 같음
• 벡터 검색(Vector Search): 질문 벡터와 가장 가까운 문서 조각(Chunk)들을 찾음
  • 유클리드 거리/코사인 유사도로 비교
    • 코사인 유사도(Cosine Similarity): 두 벡터가 같은 방향을 가리키는지 측정. 0~1 사이 값 (1에 가까울수록 유사)
  • 의미적으로 가장 관련 높은 문서 Top-K 회수
• 문맥 구성(Context Assembly)
  • 검색된 문서 조각들을 하나의 컨텍스트로 묶어 LLM에게 전달
  • 불필요한 조각은 제거하고 핵심 조각만 유지
• LLM 생성 단계
  • (질문 + 검색된 문서 조각들)을 기반으로 답변 생성
  • 문서 기반 답변, 요약, 분석 모두 해당 단계에서 이루어짐

---

4. 코드 이해하기

4.1 사용한 API

• Gemini File Search tool
  
• 위 데모의 방식.
• 참고
  • https://blog.google/technology/developers/file-search-gemini-api/
  • https://ai.google.dev/gemini-api/docs/file-search?hl=ko

4.2 FileSearchStore 생성

const store = await ai.fileSearchStores.create({
  config: { displayName: 'class-demo-store' }
});

• Vector Database 초기화 (벡터 = 숫자 배열로 표현된 의미)
• 문서의 임베딩 벡터들을 저장할 공간 생성
• 내부적으로 벡터 인덱스(Vector Index) 구조 생성

4.3 파일 업로드 및 처리

let operation = await ai.fileSearchStores.uploadToFileSearchStore({
  file: 'sample.txt',
  fileSearchStoreName: store.name,
  config: { displayName: 'sample-document' }
});

while (!operation.done) {
  await new Promise(resolve => setTimeout(resolve, 2000));
  operation = await ai.operations.get({ operation });
}

A. 텍스트 파일 읽기

sample.txt 내용:
"에렌: 궁금해. 하지만 다들 벽 밖은 죽음뿐이라고만 하잖아"

B. Chunking (문서 분할)

청크 1: "에렌: 궁금해. 하지만 다들 벽 밖은..."
청크 2: "미카사: 너희 둘 다 또 위험한 얘기..."
청크 3: "아르민: 만약 거인이 없었다면..."

• 왜 분할? : AI가 한 번에 처리할 수 있는 양이 제한적
• 최적 청크 크기보통 : 200~400 단어 정도

C. Embedding (벡터 변환)

각 청크를 고차원 벡터로 변환:

# 개념적 예시 (실제 차원: 768~1536차원)
"에렌: 궁금해..." → [0.23, -0.45, 0.89, ..., 0.12]  # 768차원
"미카사: 너희 둘..." → [0.11, -0.33, 0.78, ..., 0.09]

• 의미적으로 유사한 텍스트 → 가까운 벡터로 변환
• 예: "에렌의 꿈"과 "에렌의 목표"는 벡터 공간에서 가까움
• BERT 같은 언어 이해 AI 모델 사용해서 벡터화

D. Vector Store에 저장

[벡터 DB]
ID    | Vector (768차원)          | 원본 텍스트
------+---------------------------+------------------
doc1  | [0.23, -0.45, ...]       | "에렌: 궁금해..."
doc2  | [0.11, -0.33, ...]       | "미카사: 너희..."
doc3  | [-0.05, 0.67, ...]       | "아르민: 만약..."

4.4 질문 및 답변 생성

const response = await ai.models.generateContent({
  model: "gemini-2.5-flash",
  contents: "대화 내용좀 요약해봐",
  config: {
    tools: [{ fileSearch: { fileSearchStoreNames: [store.name] } }]
  }
});

A: 질문 Embedding

질문: "지크의 속셈은 도대체 뭐지?"
     ↓ (Embedding 모델)
query_vector = [0.34, -0.12, 0.88, ..., 0.45]  // 768차원

B. Vector Similarity Search (벡터 유사도 검색)

similarity(query_vector, doc_vector) = (query · doc) / (||query|| × ||doc||)

# 결과 예시:
doc1: 0.87  <- "에렌과 지크의 대화" (높은 유사도)
doc2: 0.32  <- "미카사의 독백" (낮은 유사도)
doc3: 0.91  <- "지크의 진짜 계획" (가장 높은 유사도!) 

C: Context 구성

LLM에 전달할 프롬프트 구성:

[시스템 프롬프트]
다음 문서를 참고해서 질문에 답변하세요.

[검색된 문서]
1. "아르민: 지크의 계획은 모든 엘디아인의 생식 능력을 없애는 거야..."
2. "에렌: 지크 형은 자신만의 해결책을 가지고 있어..."
3. "지크: 내 진짜 목적은 엘디아인의 고통을 끝내는 것..."

[사용자 질문]
지크의 속셈은 도대체 뭐지?

[답변 생성]

D: LLM 생성

Gemini-2.5-Flash가:

• 검색된 문서 이해
• 질문과 문서를 종합 (Cross-Attention: 질문과 문서의 어느 부분이 관련있는지 파악)
• 답변 생성 (한 단어씩 순차적으로)

출력: "지크의 속셈은 엘디아인의 생식 능력을 제거하여 
      거인의 역사를 평화롭게 끝내려는 것입니다..."

---

5. 참고 : 웹 기반 구현

5.1아키텍처 개요

콘솔 데모는 로컬 파일을 직접 읽지만, 실제 웹 애플리케이션에서는 클라이언트-서버 구조가 필요함.

• Browser (React)
  • text 입력
  • 질문 입력
• WAS(Express Server)
  • file 생성 및 저장
  • API 호출
• Gemini API(File Search)
  • Vector 저장
  • 검색수행

5.2데이터 흐름

1. 파일 업로드 시퀀스:

1. 브라우저에서 사용자가 텍스트 입력
2. 클라이언트가 서버에 POST 요청 전송 (텍스트 내용 포함)
3. 서버가 텍스트를 파일로 저장 (temp 디렉토리)
4. 서버가 저장된 파일을 Gemini File Search Store에 업로드
5. Gemini API가 파일을 Vector로 변환 (Chunking + Embedding)
6. Vector 변환 완료까지 대기 (Operation Polling)
7. 서버가 클라이언트에 성공 응답 반환
8. 브라우저에 업로드 완료 메시지 표시

 

2. 검색 시퀀스:

1. 브라우저에서 사용자가 질문 입력
2. 클라이언트가 서버에 POST 요청 전송 (질문 내용 포함)
3. 서버가 File Search Store 정보 조회
4. 서버가 Gemini API에 질문 + Store 정보 전달
5. Gemini API가 Vector 유사도 검색으로 관련 문서 찾기
6. Gemini API가 검색된 문서 기반으로 LLM 답변 생성
7. 서버가 클라이언트에 답변 반환
8. 브라우저에 답변 표시

5.3 코드 예시

server/services/geminiService.js - 파일 업로드:

export async function uploadToFileSearchStore(storeName, filePath, displayName) {
  let operation = await ai.fileSearchStores.uploadToFileSearchStore({
    file: filePath,
    fileSearchStoreName: storeName,
    config: { displayName }
  });

  let retryCount = 0;
  const MAX_RETRIES = 60;

  while (retryCount < MAX_RETRIES) {
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    operation = await ai.operations.get({ operation });
    
    // done이 true가 되면 Vector화 완료
    if (operation?.done === true) {
      return operation;
    }
    retryCount++;
  }

  throw new Error('파일 업로드 타임아웃');
}

server/services/geminiService.js - 검색:

export async function queryWithFileSearch(storeName, query) {
  const result = await ai.models.generateContent({
    model: 'gemini-2.5-flash',
    contents: query,
    config: {
      tools: [{
        fileSearch: {
          fileSearchStoreNames: [storeName]
        }
      }]
    }
  });

  return result;
}