캔버스 편집 기능을 다듬으며 배운 것

오늘은 홈페이지의 캔버스 편집 경험을 실제 사용 흐름에 맞춰 다듬었다.

시작점

처음 요청은 꽤 넓었다. 캔버스 노드 복사와 붙여넣기, 중첩 그룹, 연결선 스냅, 펜툴과 도형, 직접선택툴, 정렬 단축키까지 한 번에 개선하고 싶었다. 실제로 구현해 보니 가능한 것과 지금 제품에 맞지 않는 것이 분명히 갈렸다.

남긴 것

가장 의미 있었던 개선은 다중 그룹이다. 이제 그룹 안에 또 다른 그룹을 만들 수 있고, 그룹을 움직이거나 정렬할 때 내부 요소가 따로 떨어지지 않도록 재귀적으로 같이 이동한다. 캔버스를 정리하는 기본 동작에 가까운 기능이라 유지하기로 했다.

캔버스 내부 노드 복사와 붙여넣기도 추가했다. 기존에는 옵시디언 캔버스나 외부 텍스트를 붙여넣는 흐름은 있었지만, 현재 캔버스에서 선택한 노드를 그대로 복사해서 다시 붙이는 작업은 부족했다. 이제 선택한 노드와 그 사이의 연결선을 JSON 형태로 복사하고, 붙여넣을 때 새 ID로 복제한다.

연결선도 개선했다. 노드 핸들에서 연결할 때 가까운 노드에 스냅되고, 점선 프리뷰와 대상 하이라이트가 보이도록 했다. 빈 공간에 살짝 놓았을 때 실수로 새 노드가 만들어지는 문제도 줄였다.

걷어낸 것

펜툴, 도형, 직접선택툴, 선택 화살표 툴, 정렬 단축키는 제거했다. 처음에는 일러스트레이터 같은 벡터 편집 경험을 캔버스에 넣어 보려 했지만, 현재 캔버스의 핵심은 노드와 그룹, 연결선을 다루는 것이다. 벡터 편집기는 별도의 선택 모델과 패스 편집 모델이 필요하고, 어설프게 섞으면 오히려 작업 흐름이 무거워진다.

정렬 단축키도 브라우저 기본 단축키와 충돌이 많았다. 특히 Ctrl+Shift+Q, Ctrl+U 같은 조합은 브라우저나 시스템 동작과 겹칠 수 있어 캔버스에 억지로 넣지 않는 쪽이 낫다고 판단했다. 정렬 버튼은 남겨 두되, 단축키는 제거했다.

정리

오늘의 결론은 기능을 많이 넣는 것보다 캔버스의 정체성을 지키는 편이 낫다는 것이다. 지금 단계에서 캔버스는 노드 기반 사고 정리 도구에 가깝다. 그래서 다중 그룹, 복사/붙여넣기, 연결선 스냅처럼 노드 편집을 직접적으로 돕는 기능은 남기고, 벡터 드로잉 도구는 과감히 걷어냈다.

결과적으로 캔버스는 더 단순해졌고, 필요한 부분은 더 강해졌다.