MathCanvas는 교사가 수학교구를 직접 배치하고 조작해 수업 자료를 만들고 공유할 수 있도록 만든 서비스입니다. 저는 SVG 기반 편집 인터랙션과 Vue 서비스 UI, 그리고 Three.js 기반 3D 교구 흐름을 함께 다뤘습니다.
특히 쌓기나무, 공간좌표, 평면도형처럼 조작 규칙이 서로 다른 교구를 하나의 캔버스 경험 안에서 자연스럽게 다루게 만드는 일이 핵심이었습니다. drag, rotate, place, selection 흐름을 교구별 규칙에 맞게 분기하고, PointerEvent와 KeyboardEvent를 함께 묶어 안정적으로 제어했습니다.
서비스를 계속 확장해야 하는 제품이었기 때문에 클래스 기반 모듈 구조와 store 중심 흐름을 설계해 신규 교구 추가 비용을 줄였습니다. 결과적으로 46종 중 20종의 교구를 직접 설계·구현했고, 실제 수업 현장에서 사용할 수 있는 2D·3D 인터랙션 품질을 확보했습니다.
What I worked on
46종 중 20종의 SVG 기반 수학교구를 직접 설계·구현하고, 마우스·터치 기반 drag, rotate, place 로직을 교구 특성에 맞게 세분화했습니다.
하나의 SVG 태그 내부에서 DOM 요소를 제어하고 PointerEvent, KeyboardEvent 흐름을 통합해 복합 상호작용을 안정적으로 관리했습니다.
DigitalMathElement 상위 클래스를 중심으로 클래스 기반 모듈 구조를 설계해 신규 교구 추가 시 수정 범위를 최소화했습니다.
생성된 교구 객체를 store에 등록해 전체 목록, 선택 상태, 편집 흐름을 추적하고 Vue 기반 서비스 화면과 자연스럽게 연결했습니다.
