Canvas SVG 시각화 프로젝트 결
개인 프로젝트에서 Canvas API를 활용해 간단한 차트 라이브러리를 직접 구현한 경험이 있습니다. 기존 라이브러리를 쓰면 빠르지만, 커스텀 애니메이션이나 특수 레이아웃이 필요할 때 내부 동작을 알아야 확장이 가능하다고 생각해 직접 만들어보기로 했습니다.
requestAnimationFrame으로 부드러운 진입 애니메이션을 구현했고, 히트 테스트는 투명 오프스크린 캔버스에 고유 색상으로 요소를 그려 클릭 위치를 판별하는 방식을 썼습니다. SVG는 다른 프로젝트에서 인터랙티브 지도 컴포넌트를 만들 때 사용했는데, viewBox 설정과 좌표 변환이 까다로워 처음에는 시간을 많이 쏟았습니다. Canvas와 SVG의 가장 큰 차이는 DOM 기반 여부로, 이벤트 처리와 접근성 측면에서 각각 적합한 상황이 다르다는 것을 직접 비교하며 배웠습니다. 시각화 도구는 목적에 맞는 렌더링 방식을 먼저 선택하는 것이 좋은 결이었습니다.