본문으로 건너뛰기
Hyunki.devContact
데스크톱과 모바일 목업에 담긴 AI 투자 분석 챗봇 화면. 왼쪽에 대화 목록, 가운데에 상승 알트코인 요약 보고서가 출처 링크와 함께 스트리밍되어 있고, 서비스명과 계정 등 식별 정보는 가려져 있다NDA

Work

LLM 기반 주식 투자 전략 보고서 및 AI 챗봇 서비스

Technical SkillsNext.jsTailwind CSSTypeScriptNestJSTypeORMcheerio
Period2025.11 — 2026.03
RoleFull-Stack Engineer
OrgMVerse

본 이미지는 NDA 및 저작권 보호를 위해 실제 서비스명, 로고, 데이터와 일부 시각 자료를 비식별화하여 재구성한 포트폴리오용 대체 화면입니다.

프로젝트 설명

LLM API를 활용해 주식·암호화폐 시장 데이터를 수집·해석하고, 그 결과를 보고서와 대화 두 가지 형태로 전달하는 서비스입니다.

  1. 주식 종목 코드를 입력받아 주가·재무제표·뉴스 데이터를 수집·분석하고, LLM API로 투자전략 보고서를 자동 생성하는 서비스
  2. 암호화폐 가격의 상승·하락 원인 등 시장 관련 질문에 LLM이 답변하고, 생성되는 내용을 실시간으로 전달하는 AI 챗봇

담당 및 구현

  • SSE(Server-Sent Events) 기반 실시간 응답 스트리밍 기능 구현
  • Cheerio를 활용한 주식 뉴스 크롤링 및 데이터 정제 파이프라인 구축
  • 투자 전략 보고서 생성 모듈 설계 및 구현
  • 뉴스·DART·주가 수집 병렬화로 최대 대기 시간 약 30초 → 20초 단축

SSE 스트리밍 응답의 타이핑 효과 렌더링 성능 개선

  • 문제 — SSE로 받은 응답에 타이핑 효과를 적용하기 위해 setInterval을 사용했습니다. 스트리밍 중 화면이 간헐적으로 끊기는 현상이 발생했고, DevTools FPS 미터로 확인한 결과 프레임이 39~55 FPS까지 떨어졌습니다.
  • 원인 — DevTools Performance 분석에서 출력용 setInterval이 프레임 주기와 무관하게 상태 업데이트를 반복하고, 긴 응답에서 마크다운 파싱과 레이아웃 계산이 누적되는 것을 확인했습니다.
  • 해결 — SSE 토큰을 버퍼에 저장하고, 요구된 50ms 출력 주기와 실제 DOM 반영·자동 스크롤을 분리했습니다. DOM 반영은 requestAnimationFrame 안에서 실행하고, 스트리밍 종료·언마운트 시 타이머와 rAF를 정리했습니다.
  • 결과 — 프레임 저점은 39 → 48 FPS, 평균은 48.6 → 56 FPS로 개선됐습니다. 동일 응답 길이와 스크롤 동작을 고정하고, 같은 기기·브라우저·화면 크기에서 DevTools Performance로 버전별 반복 측정했습니다.
Chrome DevTools FPS 미터 비교 스크린샷. 왼쪽 rAF 적용 전은 48.6 fps에 프레임 막대가 주황·빨강으로 섞여 있고, 오른쪽 적용 후는 60.0 fps에 막대가 고르게 노란색이다
Chrome DevTools FPS 미터 — 왼쪽이 적용 전, 오른쪽이 적용 후. 막대 색이 섞일수록 프레임이 흔들린 구간