프로젝트 소개
외부에 노출된 자산을 식별하고 관리하는 ASM(Attack Surface Management) 서비스입니다. V1 유지보수와 V2 마이그레이션 및 신규 개발을 담당했습니다.
핵심 기술 및 의사 결정 과정
주요 기술 스택
Front-End
Next.jsTypeScriptReactTailwind CSSJotaiTanstack Querynext-intl
Etc
SSEMSW
트러블슈팅
RSC + Streaming SSR로 대시보드 로딩 개선
문제
대시보드 페이지에서 여러 API를 병렬로 호출했음에도 초기 접속 시 로딩이 지연되는 문제가 발생했습니다.
해결
RSC 및 Streaming SSR을 도입하여 페이지 Shell을 즉시 전송하고, 각 섹션이 준비되는 대로 스트리밍했습니다.
결과
FCP 3s → 1.5s로 단축, TBT 30% 개선
Web Worker로 PDF 생성 시 UI 프리징 해결
문제
30~3,000페이지 규모의 PDF 리포트 생성 시 메인 스레드가 블로킹되어 UI 프리징이 발생했습니다.
해결
Web Worker로 PDF 생성 작업을 별도 스레드에 위임하여 메인 스레드와 분리했습니다.
결과
UI 블로킹 없이 대용량 리포트를 생성할 수 있게 되었고, 생성 중에도 사용자가 다른 작업을 수행할 수 있도록 개선했습니다.
문제
점검 알림 상태를 사용자에게 실시간으로 전달해야 했으나, 적절한 통신 방식을 선택해야 하는 상황이었습니다.
해결
양방향 통신이 불필요한 서버→클라이언트 단방향 알림 특성에 맞춰 WebSocket 대신 SSE(Server-Sent Events)를 선택하고, EventSource 기반 실시간 알림 시스템을 구현했습니다.
결과
WebSocket 대비 낮은 서버 리소스 비용으로 실시간 점검 진행률 표시를 구현하여 사용자 경험을 개선했습니다.