✨ 프로젝트 소개

• 현대자동차 R&D 조직 내에서 활용되는 내부 문서 기반 AI 질의응답 플랫폼입니다.
• 사용자가 업로드한 다양한 형식의 내부 데이터를 기반으로, LLM이 문서 내용을 분석 및 요약하고 근거를 제시하며 응답을 생성합니다.
• 단순한 질의응답을 넘어 데이터 간 관계를 그래프, 마인드맵 등 시각적 구조로 표현하여 사용자가 복잡한 기술 문서와 지식 체계를 직관적으로 탐색할 수 있도록 설계되었습니다.
• 프로젝트 참여 인력
  • FE: 4명
  • BE: 3명
  • 기획/디자이너: 1명

✨ 내가 기여한 부분

🧠 지식그래프 시각화 (D3.js 기반)

• 대규모(약 5천만 건) 데이터 시각화 요구사항에 대해, 초기 Sigma.js 구현 후 전체 데이터 렌더링이 오히려 UX를 저해함을 확인하고 유의미한 데이터 중심의 제한적 시각화 전략으로 구조를 전환했습니다.
• Neo4j의 제한적 노출 방식에서 아이디어를 참고해 백엔드와 협업, 노드 노출 수를 25개로 제한하고 검색/필터/포커싱 기능을 강화하는 방향으로 전략 전환
• D3 Force Graph를 활용해 데이터 간의 연관 관계를 시각적으로 탐색할 수 있는 동적 지식그래프를 구현했습니다.
  • Force Simulation 튜닝으로 노드 간 물리적 균형과 레이아웃 안정성 확보
  • 노드의 검색, 포커싱, 드래그, 하이라이팅 등 UX 중심의 인터랙션 설계
  • 단,양방향 관계별 애니메이션으로 관계 방향성과 의미 흐름을 시각적으로 표현

📘 내부 문서 뷰어 및 AI 근거 시각화

• 업로드된 내부 문서를 직접 열람할 수 있는 뷰어이자, LLM 응답의 출처 문장과 위치를 시각적으로 연결 (하이라이팅) 하는 기능을 함께 제공하는 시스템을 설계 및 구현했습니다.
• 초기에는 백엔드에서 문서를 텍스트화 후 문자열로 전달하는 방식을 사용했으나, 이미지, 도표 등 복합 구조 문서에서 레이아웃 손실 및 텍스트 좌표 불일치 문제가 발생했습니다.
• 이를 개선하기 위해 PDF.js 기반 페이지 단위 렌더링 방식으로 전환하고, 문서를 이미지 형태로 표시한 뒤 LLM이 반환한 문장 위치(page, x1, y1, x2, y2) 정보를 활용해 정확한 하이라이팅 영역 표시 기능을 구현했습니다.
• RAGFlow의 하이라이팅 구조를 참고하여 좌표 기반 근거 표시를 정밀하게 구현했고, docx, txt, csv, 등 비-PDF 문서의 경우 포맷별 맞춤 뷰어를 별도로 개발하여 통일된 UI를 유지했습니다.
• 대용량 문서 렌더링 시에도 무한 스크롤 + 가상화(virtualization) 구조를 적용해 렌더링 성능과 탐색 속도 모두를 확보했습니다.