프론트엔드
웹에서 프리 드로잉 밑바닥부터 구현하기
두줄요약
웹 Canvas에서 자연스러운 프리 드로잉을 구현한 과정을 소개했습니다. 브라우저와 펜 입력 특성 차이를 보정하며 필기감을 개선했습니다.
핵심 내용
- 콴다 태블릿 풀이 경험을 웹 Canvas API로 자연스럽게 구현하기 위한 프리 드로잉 알고리즘 개선 과정
- 외부 라이브러리의 커스터마이징 한계와 성능 이슈로 인해 의존성 없이 밑바닥부터 재구현
- 점 연결, 베지어 곡선, 스플라인 보정, 즉각적 렌더링, 펜 이벤트 대응, 인접 점 간소화로 자연스러운 필기감 보정
- Safari와 Pen 환경의 좌표 정수화, 중복 이벤트, 빠른 곡선 입력 같은 플랫폼별 문제를 추가 보정으로 해결
적용해볼 점
- 입력 좌표만 잇는 방식에서 시작해 곡선 보정과 사용자 반응성까지 단계적으로 개선하는 접근
- 브라우저와 입력 장치별 이벤트 특성 차이를 고려한 별도 보정 로직 설계