SOMETHINK

노드와 간선을 캔버스에 그려주는 그래프 시각화 라이브러리 vis.js를 사용해 마인드맵의 편집·확대·이동 기능을 구현했습니다. 마인드맵에 이미지와 협업 기능을 추가할 수 있는 확장성과 개발 일정을 고려했습니다.

CRDT 기반의 Y.js를 연결해 노드·간선 데이터를 공유했습니다. 참여자가 노드를 생성·수정·삭제하면 각 클라이언트가 변경 내용을 받아 자신의 마인드맵에 반영하도록 구현했습니다.

참여자마다 화면의 확대 배율과 이동 위치가 달라, 같은 노드를 가리켜도 다른 화면에서는 커서가 엉뚱한 곳에 표시됐습니다. 전송할 때 DOM 좌표를 Canvas 좌표로 변환하고, 수신할 때 각 화면의 DOM 좌표로 되돌려 서로 다른 화면에서도 같은 위치를 가리키도록 보정했습니다.

다중 접속 시에는 mousemove마다 좌표를 전송하면서 커서 움직임이 끊겼습니다. 전송 간격을 10ms로 제한하는 스로틀링을 적용해, 당시 테스트에서 동기화 요청 빈도를 기존 대비 약 80% 줄였습니다.

전송 간격이 벌어지면서 커서가 띄엄띄엄 표시되는 문제는 수신한 좌표 사이를 보간해 개선했습니다. 전송 횟수를 줄이면서도 커서 움직임이 자연스럽게 이어지도록 했습니다.

외부 이미지를 추가한 마인드맵에서 캔버스 오염으로 화면 캡처가 실패했습니다. 이미지 프록시를 도입해 캡처 문제를 해결했지만, 이후 메모리 사용량이 2~3GB 이상으로 증가하고 일부 환경에서는 브라우저가 종료됐습니다.

개발자 도구로 분석해 공유 데이터에 담긴 Base64 이미지가 원인임을 확인했습니다. 이미지 하나가 약 20만 자의 문자열로 실시간 동기화되고 있어, 클라이언트에서 WebP 변환과 해상도 조정을 적용했습니다.

노드에 표시되는 이미지 품질을 확인하며 압축 크기를 조정한 결과, 당시 테스트에서 이미지 데이터가 평균 약 20만 자에서 2~3천 자로 줄었습니다. 수정 후에는 이미지 노드를 100개 이상 추가한 상태에서도 이전에 발생하던 버벅임이 개선됐습니다.

마인드맵은 자유롭게 이동하고 확대·축소할 수 있는 캔버스로 구성했습니다. 처음에는 CSS로 점 배경을 넣었지만, 화면을 이동해도 배경은 고정돼 노드가 배경 위에 떠다니는 것처럼 보였습니다. 노드와 배경이 같은 공간에 놓인 것처럼 움직이도록 캔버스에 패턴을 직접 그리는 방식으로 바꿨습니다.

createPattern으로 점 패턴을 만들었지만, 배경이 오른쪽 아래에만 그려지고 줌 아웃하면 빈 영역이 드러났습니다. vis.js의 캔버스는 화면 중심을 원점으로 양수·음수 좌표를 사용하고 있어, 좌측 상단을 원점으로 생각한 배경의 시작 위치가 맞지 않았습니다. 또한 자유롭게 이동하는 캔버스를 고정된 크기의 배경으로 덮는 데에도 한계가 있었습니다.

DOMtoCanvas로 화면 왼쪽 위를 캔버스 좌표로 변환해 배경의 시작 위치를 맞췄습니다. 시점이 바뀔 때마다 현재 보이는 영역을 충분히 덮도록 패턴을 다시 그려, 이동·확대·축소에도 빈 공간 없이 배경이 함께 움직이도록 구현했습니다.