SVG와 수학적 렌더링으로 구현한 브라우저 기반 디자인 툴 설계

Context

브라우저 내에서 Photoshop 수준의 정밀한 제어와 즉각적인 프리뷰 구현 필요. 단순 렌더링을 넘어 전문 인쇄 공정에 적합한 벡터 포맷 출력 요구사항 존재.

Technical Solution

• 픽셀 기반의 Canvas 대신 DOM 노드 기반의 SVG를 채택하여 객체별 개별 수정 및 벡터 출력 호환성 확보
• SVG 와 의 sweep-flag 조절을 통해 상단과 하단이 서로 반대 방향으로 굽은 원형 텍스트 구조 설계
• 기본 letter-spacing의 시각적 불균형 해결을 위해 각 글자의 좌표와 회전값을 수학적으로 계산하여 배치하는 개별 글리프 렌더링 방식 도입
• 상태 관리의 원자성 확보를 위해 불변 객체 패턴 기반의 Command 패턴을 적용하고 Undo/Redo 스택 구현
• 사용자 업로드 SVG의 보안 취약점 해결을 위해 위험 태그를 제거하는 엄격한 Sanitization 프로세스 적용
• 모바일 환경의 렌더링 성능 저하 방지를 위해 Path 노드 500개 초과 시 Canvas로 전환하는 폴백 전략 수립

Key Takeaway

복잡한 벡터 그래픽 도구 설계 시 렌더링 엔진의 특성(Retained vs Immediate mode)과 출력 포맷의 호환성을 최우선으로 고려해야 함.