콘텐츠

웹에서 프리 드로잉 밑바닥부터 구현하기

역량 개발 · 콴다 블로그 · 2024.03.25

콴다(QANDA)에서 태블릿 환경의 사용자들에게 더욱 자연스러운 문제 풀이 경험을 제공하기 위해, 웹 Canvas API를 활용하여 프리 드로잉 알고리즘을 밑바닥부터 구현한 기술적 여정을 공유합니다. 단순히 점들을 직선으로 잇는 기초적인 방식에서 벗어나, 베지어 곡선(Bezier curve)을 이용한 곡선화 과정과 스플라인(Spline)을 부드럽게 만드는 기법, 그리고 Safari와 Chrome의 좌표 처리 방식 차이로 발생하는 문제를 해결하기 위한 점 간소화(Simplification) 전략까지 상세히 다룹니다. 또한, 펜 이벤트(Pen Event) 대응을 통해 드로잉의 즉각적인 반응성을 높이는 방법 등 실제 개발 현장에서 마주한 다양한 Challenge와 그 해결책을 통해 완성도 높은 드로잉 모듈을 만들어가는 과정을 확인해 보세요.