SVG 에디터에서 문서 상태와 편집 상태의 경계를 나눈 기준
SVG 에디터에서 저장해야 하는 문서 데이터와 선택, hover, drag 같은 편집 UI 상태를 분리해 히스토리와 렌더링을 안정화한 기준입니다.
2026년 6월 18일
5분 읽기
Writing
카테고리 단위로 작성 글을 빠르게 탐색할 수 있습니다.
- Three.js 렌더링 순서가 꼬일 때 depth와 renderOrder로 정리한 기준
- Three.js 오브젝트 선택이 실패할 때 확인한 것들
- SVG 에디터 인터랙션이 꼬일 때 디버깅한 순서
- SVG 에디터에서 문서 상태와 편집 상태의 경계를 나눈 기준
- 2D SVG 교구와 3D Three.js 교구를 하나의 캔버스 경험으로 묶기
- Three.js Raycaster 선택 영역 넓히기
- Three.js 3D 수학교구에서 depth buffer와 renderOrder로 정보 가림 문제 해결하기
- Three.js 좌표축 클릭 시 카메라 방향 꼬임 문제
- Three.js 카메라 상태 저장
- Three.js 겨냥도 구현하기
- Three.js LineGeometry 문제 해결
- SVG 에디터 undo/redo 스냅샷 설계
- useLine 로직 통합하기
- SVG 에디터 선택 상태와 렌더링 상태 분리하기
- SVG 도형 리사이즈 핸들 제약 조건 정리
- SVG 좌표 변환에서 포인터 위치가 어긋나는 문제
- 생성된 교구 객체를 store에 등록하고 선택·편집 흐름을 추적한 구조
- SVG 캔버스에서 PointerEvent와 KeyboardEvent를 함께 제어한 이유
- 교구마다 다른 drag·rotate·place 규칙을 안정적으로 분기한 방법
- SVG 수학교구 20종을 확장 가능하게 만든 DigitalMathElement 설계