[사이드프로젝트][DeskFlow] 데스크 셋업 시뮬레이터에 다중 선택 기능을 붙여봤습니다

안녕하세요! 퇴근 후 틈틈이 사이드 프로젝트를 진행하고 있는 1인 개발자 로켓다람쥐입니다.

제가 만들고 있는 DeskFlow는 장비 배치와 케이블 연결 구조를 시각화해 주는 툴인데요. 장비가 많아질수록 배치를 바꿀 때마다 노드 하나씩 옮기는 게 너무 노가다 같더라고요.

그래서 이번에 다중 선택(Multi-select)과 그룹 이동 기능을 구현해 보았습니다.

버스 드래그로 범위 선택 가능 (주황색 점선 박스)

• Shift / Cmd 클릭으로 개별 다중 선택 지원

• 그룹 이동 시 연결된 엣지(케이블) 실시간 팔로잉 지원

• 선택 그룹 일괄 삭제(Delete) 기능

Canvas 위에서 여러 객체를 동시에 다뤄야 하는 UX라 고려할 점이 꽤 있었지만, 붙여놓고 나니 확실히 배치가 훨씬 쾌적해졌습니다.

데스크 셋업이나 서버 랙 장비 연결 구조 같은 거 짤 때 가볍게 쓰기 좋게 만들고 있습니다. 설치 없이 브라우저에서 바로 되니까 필요하신 분들 한번 써보시고 피드백 주시면 감사하겠습니다!

👉 서비스 링크: https://deskflow-gold.vercel.app/
👉 개발 일지(네이버 블로그): https://blog.naver.com/hjinha2/224253749551