GPU 가속 프리뷰와 Canvas API로 구현한 고성능 이미지 회전 도구

Context

이미지 회전 시 출력 캔버스가 회전된 결과물 크기에 정확히 맞지 않아 외곽이 잘리는 현상 발생. 고해상도 이미지의 빈번한 Canvas 재렌더링으로 인한 UI 지연 문제 직면. 회전과 반전의 적용 순서에 따른 결과값 불일치 해결 필요.

Technical Solution

• GPU 가속 기반의 CSS transform을 활용한 프리뷰 경로와 Canvas API 기반의 다운로드 경로를 분리한 듀얼 렌더링 전략
• Bounding Box 공식을 적용하여 회전 각도에 따라 동적으로 가변하는 출력 캔버스의 최적 너비와 높이 계산
• translate → rotate → scale → drawImage 순서의 렌더링 파이프라인을 구축하여 회전 후 반전을 적용하는 사용자 중심의 변환 로직 설계
• (rotation % 360 + 360) % 360 공식을 통해 음수 각도를 포함한 회전 상태를 0~360도 범위로 표준화하는 정규화 프로세스 도입
• HTMLImageElement를 ref에 캐싱하여 매 다운로드 시마다 발생하는 이미지 로딩 오버헤드 제거

Key Takeaway

사용자 인터랙션이 빈번한 UI 요소는 GPU 가속을 활용한 가벼운 뷰로 처리하고, 실제 데이터 생성 단계에서만 무거운 연산을 수행하는 렌더링 경로 분리 설계의 중요성.