Uuno 에디터 개발 최종욱

DOM기반 방식보단 캔버스 방식을 택한 이유

프로젝트 구상과 초기 기술 선택

처음 프로젝트를 구상할 때 React-DnD와 React-RnD를 이용해 명함 편집 도구를 구현하는 방식을 택했다. DOM 기반의 편집 방식이 React와의 친화성이 높고, 드래그 앤 드롭과 리사이징 기능을 쉽게 관리할 수 있을 것이라 생각했기 때문이다.

기획 변화와 UX 중심의 고민

하지만 상세하게 기획을 하다보니 조금씩 퀼리티 높은 편집툴을 만드는 방향으로 가게 되었다. 또한 사용자입장에서 생각해보면 보다 정밀하고 고급스러운 편집툴이 훨씬 더 ux적인 측면에서 좋지 않을까라는 생각을 했다.

DOM 기반 방식의 한계

DOM 요소를 기반으로 한 편집 방식은 요소가 많아질수록 성능 저하가 발생할 가능성이 높아진다. DOM 방식은 브라우저의 DOM 트리 구조를 직접 조작하는 방식으로, 각각의 요소가 브라우저에 개별적으로 렌더링되기 때문에 요소가 많아질수록 리플로우(reflow)와 리페인트(repaint) 작업이 빈번해진다.

리플로우는 요소가 추가되거나 스타일이 변경될 때 발생하며, 이 과정에서 브라우저는 전체 레이아웃을 다시 계산해야 하므로 성능 저하가 일어난다. 특히, 빈번한 드래그 앤 드롭, 리사이즈와 같은 실시간 인터랙션이 많아질수록 성능 저하가 더욱 심각해진다.

또한 DOM 방식은 정밀한 그래픽 제어가 어렵다는 단점이 있다. DOM과 CSS를 활용하면 위치 지정과 간단한 변형(transform)이 가능하지만, 세밀한 픽셀 단위의 위치 조정이나 자유로운 형태의 변형(회전, 스큐 등)을 정확하게 구현하는 것이 어렵다. 특히, CSS transform 속성의 한계로 인해 미세한 조정에서 부자연스러운 현상이 발생할 수 있고, 다양한 브라우저에서 일관된 결과를 보장하기도 어렵다.

또한 DOM 구조는 계층적인 HTML 구조를 기반으로 하기 때문에 복잡한 레이어 관리가 까다롭고, z-index 관리가 복잡해지면 유지 보수가 힘들어진다. 더불어 DOM 요소 간의 이벤트 처리가 복잡해질 수 있으며, 이벤트 위임(event delegation) 방식으로 성능 최적화를 진행하더라도 일정 수준 이상의 인터랙션이 발생하면 처리 비용이 증가하게 된다.

이러한 여러 한계점 때문에 DOM 방식이 사용자에게 직관적이고 전문적인 편집 경험을 제공하는 데 적합하지 않다고 판단하게 되었다.

캔버스 기반 기술로의 전환

이러한 문제를 해결하기 위해 캔버스 기반의 Konva.js(미정)를 선택하게 되었다. 캔버스는 픽셀 단위의 정밀한 제어와 고성능 렌더링을 지원하며, 요소의 회전, 레이어 관리 등 복잡한 그래픽 작업에 특화되어 있다. 결과적으로 캔버스를 통해 더욱 전문적인 디자인 툴에 가까운 사용자 경험을 제공할 수 있게 되었다.

포트폴리오 관점에서의 고민과 결정

캔버스로의 전환을 고민하는 과정에서, 포트폴리오로 작성할 내용을 충분히 확보할 수 있을지에 대한 걱정이 있었다. 처음에는 DOM 기반의 DnD 방식이 직접적인 로직과 상태 관리 부분에서 설명할 부분이 많아 포트폴리오로 적합해 보였지만, 실제로 캔버스 방식을 택하고 개발을 진행하게 된다면 노가다적이고 반복적인 로직(상태 관리, 이벤트 처리 등)을 최소화 시킬 수 있다는 장점이 있다. 또한 캔버스 기반의 기술적 특성과 렌더링 최적화, 정밀한 기능 구현 등 더 깊이 있는 기술적 도전과 해결 과정을 제시할 수 있어, 결과적으로 포트폴리오의 퀄리티를 높일 수 있다는 생각을 하게 되었다.

기술 방식 비교

결론