Cesium 지도 성능 개선 — 문제 · 해결 · 수치 요약

한눈에 보기

구분Before (개선 전)After (개선 후)변화

JS Heap 노드 수	52,179	20,674	−60%
JS Heap self_size 합	2.45 MB	0.35 MB	−86%
스타일 condition (건물 5,000건·구간 10개)	약 5,000	약 10–20	−99%
POI 가시성 갱신 (60fps)	최대 약 15회/초	0회/초 (이동 중), 1회/moveEnd	줌 중 부하 제거
분석 중 타일 SSE	16	28	패널 열림 때만
패널 닫은 뒤 타일 스타일	구간 색 잔존	1조건 reset + trim	—

---

1. Heap Snapshot

문제

• Memory 스냅샷만 보면 JS 힙이 2–3 MB 수준으로 여유 있어 보임
• GPU, 3D Tiles 캐시, Worker는 스냅샷에 거의 안 잡힘
• OOM·슬로우 원인을 힙만으로 파악하기 어려움

해결

• 병목을 JS / GPU·타일 / 메인 스레드 CPU 로 구분해 측정
• 작업 관리자(Memory·GPU) + Performance + Heap을 동일 시나리오로 병행

개선된 성능 (수치)

지표BeforeAfter변화

Heap 노드 수	52,179	20,674	−31,505 (−60%)
JS self_size 합계	2.45 MB	0.35 MB	−2.1 MB (−86%)
스냅샷 파일 크기	3.9 MB	1.7 MB	−56%
Detached DOM	0	0	동일

---

2. 3D Tiles 스타일

문제

• API 응답 건물 수(수천–수만)만큼 color.conditions에 ID 일치 조건 생성
• 건물 5,000건 → 조건 약 5,000쌍 + 긴 문자열
• 타일 렌더마다 조건 평가 → 분석·색 적용 직후 CPU·메모리 스파이크

해결

• 색은 구간(높이·층수·노후도) 기준으로 타일 속성만 비교
• 구조 분류는 카테고리 수만큼만 조건 유지
• 지도 스타일에는 구간 개수만 반영, 응답 건수는 로그용

개선된 성능 (수치)

지표BeforeAfter변화

condition 개수 (5,000건·구간 10개)	약 5,000	약 10–15	−99%
condition 데이터 (JS)	응답 건수 비례	구간 수 비례	수 MB → 수 KB 급
styleConditionCount / renderDataCount	동일 수준	10–20 / 수천	분리

---

3. 분석 패널 · 그리기

문제

• 그리기·임시 데이터가 컴포넌트 밖에 남아 패널 재진입 시 핸들러·엔티티 누적
• destroy 후에도 입력 핸들러가 남는 경우
• 대용량 renderData를 React state에 두어 리렌더·복사 발생

해결

• 그리기·데이터 소스를 패널 수명에 묶고 unmount 시 해제
• 그리기 종료 시 핸들러·임시 소스까지 정리
• 분석 결과는 ref, state는 개수 등 최소만

개선된 성능 (수치)

지표BeforeAfter

Detached DOM	0	0
패널 재진입 시 handler·DataSource	누적 가능	unmount 시 제거
React 리렌더	대용량 배열 state	ref 중심

---

4. POI 라벨

문제

• postRender(4프레임마다)마다 POI 전 entity 가시성 계산
• 줌·패닝 중에도 화면 좌표 변환·거리 계산 반복
• Performance trace: Cesium FunctionCall 50–130ms, 입력과 겹침
• POI OFF여도 일부 경로 동작

해결

• camera.moveEnd 에서만 로드·가시성 갱신
• 위치 40m 또는 고도 20m 이상 이동 시에만 갱신
• POI OFF 시 리스너 미등록 + 데이터 소스 제거
• 멀리 있으면 일괄 숨김, show·position 변경 시에만 갱신

개선된 성능 (수치)

지표BeforeAfter

POI 가시성 루프 (60fps)	최대 약 15회/초	0회/초 (이동 중), 1회/moveEnd
POI OFF 시 CPU 부담	일부 동작	거의 0
라벨 맞춤 시점	이동 중 매 프레임	카메라 정지 후

---

5. 건설계획 · 3D Tiles

문제

• 분석 패널 사용 시 LOD 타일 촘촘 로드 (SSE 16)
• 줌 시 입력·GPU·타일 부담 동시 증가 (trace 입력 합 2.3–9.8s)
• 패널 닫아도 스타일·타일 캐시 잔존

해결

• 패널 열림·분석 중 SSE 28 (이후 로드 타일 포함)
• 종료 시 SSE 복원
• 스타일 단일 기본색 reset + trimLoadedTiles + 미사용 타일 정리

개선된 성능 (수치)

지표BeforeAfter

maximumScreenSpaceError (분석 중)	16	28
패널 닫은 뒤 스타일	구간 white 등	1조건 reset
타일 캐시	잔존	trim

---

6. Chrome DevTools (측정 환경)

문제

• Performance 녹화 시 DevTools 카테고리 약 66% (28s 중 14.6s)
• CPU 프로파일 시작 약 0.8–1.0초 단발 스파이크
• 도구를 켠 상태가 평소 체감과 다름

해결

• 앱 성능과 측정 오버헤드를 분리해 해석
• Performance 짧게 녹화, CPU 프로파일 동시 시작하지 않음

측정 수치 (trace)

지표수치

DevTools timeline 비중	약 52–66%
CpuProfiler 시작	약 830–980 ms
GC 비중	약 2%

---

7. React 메뉴 레이아웃

문제

• flushSync + layout effect → React 18 경고, 불필요한 동기 렌더

해결

• flushSync 제거, DOM ref 측정 후 setState 1회

개선된 성능 (수치)

지표BeforeAfter

콘솔 경고

있음

없음

---

8. Performance trace (개선 전 baseline)

지표Trace A (약 7초, 가벼운 줌)Trace B (약 11초, 활발한 줌)

메인 스레드 활성 구간	6.9 s	11 s
DevTools 비중	66%	66%
입력 처리 합 / 최대	2.29 s / 58 ms	9.82 s / 136 ms
rAF 평균 / 최대	1.1 ms / 12 ms	7.2 ms / 101 ms
60fps 예산(16.6ms) 초과	거의 없음	8.7% (41/469)
FunctionCall >30ms	2건	다수 (Cesium)

---

9. 요약

• Heap: 노드 −60%, JS self −86%
• 스타일: condition 약 5,000 → 약 15 (−99%)
• POI: 약 15회/초 → 0회/초 (이동 중), moveEnd당 1회
• 타일: SSE 16 → 28 (분석 중), 종료 시 reset + trim
• Trace (baseline): 입력 최대 58–136 ms, rAF 최대 12–101 ms