Pretendard를 dynamic subset으로 바꿔 모바일 LCP 13.7초를 4.5초로 줄이기
블로그 홈의 모바일 LCP가 13초를 넘던 원인이 굵기당 770KB인 Pretendard 전체 글리프 파일이었습니다. 공식 dynamic subset으로 바꿔 폰트 전송량을 2,276KB에서 297KB로, LCP를 13.7초에서 4.5초로 줄인 과정과 측정 결과를 정리했습니다.
2026년 10월 21일
6분 읽기
카테고리
- SVG 에디터 인터랙션이 꼬일 때 디버깅한 순서
- SVG 에디터에서 문서 상태와 편집 상태의 경계를 나눈 기준
- Three.js 3D 수학교구의 가림 문제를 depthTest, depthWrite, renderOrder로 정리한 기준
- 수학교구 캔버스 구조: DigitalMathElement와 2D·3D 렌더러 경계
- 수학교구 SVG 캔버스의 인터랙션 구조: 입력 이벤트, store 선택 흐름, 교구별 조작 규칙
- SVG 에디터 undo/redo 스냅샷 설계
- SVG 좌표 변환에서 포인터 위치가 어긋나는 문제
- SVG 도형 리사이즈 핸들 제약 조건 정리
- Three.js 오브젝트 선택 디버깅: Raycaster 대상, hit area, 선택 우선순위 정리
- Three.js 좌표축 클릭 시 카메라 방향 꼬임 문제
- Three.js 겨냥도 구현하기
- Three.js LineGeometry 문제 해결
- useLine 로직 통합하기