SVG와 Canvas 선택 판단
SVG는 의미 있는 벡터 요소를 문서처럼 다루고, Canvas는 픽셀을 빠르게 다시 그리는 작업에 어울린다.
| 상황 | 추천 | 이유 | 확인할 점 |
|---|---|---|---|
| 아이콘·로고 | SVG | 확대해도 선명하고 CSS 제어 가능 | 불필요하게 복잡한 path인지 |
| 소형 차트 | SVG | 축과 데이터 요소에 의미 부여 가능 | 데이터 포인트 수가 적절한지 |
| 게임 화면 | Canvas | 매 프레임 전체 redraw에 유리 | 상태와 충돌 판정을 직접 관리 |
| 이미지 처리 | Canvas | 픽셀 단위 조작 가능 | 성능과 메모리 사용량 측정 |
| 혼합 UI | SVG + Canvas | 정적 UI와 고빈도 렌더 분리 | 두 레이어의 좌표 동기화 |
그래픽 기술을 고를 때는 “무엇을 그릴까”보다 “그린 뒤 무엇을 조작하고 얼마나 자주 바꿀까”를 묻는다.