Client-side Canvas 기반의 Circular QR 및 곡선 텍스트 렌더링 구현

Context

기존 Square QR 코드가 제공하는 단순 유틸리티적 디자인의 한계를 극복하고 브랜드 자산으로서의 시각적 가치를 높일 필요성 대두. 서버 통신 없는 즉각적인 생성과 데이터 보안 유지를 위해 Client-side 렌더링 구조 채택.

Technical Solution

• QRCodeStyling 라이브러리를 활용한 Circular Module 패턴 기반의 기본 QR 생성
• Canvas API의 clip() 메서드를 이용한 원형 마스킹 처리로 깔끔한 경계선 구현
• 텍스트 각 문자별 너비를 measureText로 정밀 계산하여 호(Arc)를 따라 배치하는 좌표 산출 알고리즘 설계
• 상단 텍스트는 반시계 방향, 하단 텍스트는 시계 방향으로 회전 각도를 제어하는 drawArcText 로직 구현
• 원본 QR 대비 contentScale(0.85)을 적용하여 텍스트 배치 공간을 확보하는 계층적 캔버스 구조 설계
• JSZip 라이브러리를 통한 다수 QR 코드의 Base64 데이터 일괄 처리 및 Client-side 압축 다운로드 구현