프론트엔드
Spatial index를 이용한 웹 어플리케이션 최적화
두줄요약
병리 슬라이드 뷰어의 대량 Gland Canvas 렌더링 지연을 분석했습니다. Spatial index와 화면별 필터링·그룹화로 렌더링 대상을 줄였습니다.
문제 상황
- 수십억 픽셀 규모 병리 슬라이드 위 수백 개 Gland와 1만 5천여 점 렌더링에 따른 초기 로딩 및 조작 지연
- 확대·축소·이동과 Gland 추가·수정·삭제를 동시에 지원해야 하는 HTML5 Canvas 기반 뷰어
해결 방법
- viewport 범위의 Gland만 조회하는 range query와 확대 비율별 중복 점 제거 적용
- 수정 불가한 낮은 확대 레벨에서 인접 Gland를 convex hull로 그룹화
- Gland 수신 시 Spatial index를 구축하고 화면 이벤트마다 렌더링 대상 재계산
구조와 흐름
- OpenSeadragon의 타일 이미지 로딩과 React 기반 UI 구성
- rangeQuery로 화면 영역 조회, pruneByZoom으로 점 축소, kNN 기반 merge로 Gland 통합
- 작은 면적 Gland 우선 힙과 면적 임계값을 이용한 반복 그룹화
성능/운영 포인트
- Gland 수 62%, 점 수 78% 감소
- 확대·축소·이동마다 호출되는 getGlands 처리 시간 70ms 미만
