피드백·2개월·243

[사이드프로젝트][DeskFlow] 프론트엔드 캔버스 크기를 5000px로 넓혔더니 생긴 일 (v1.1.6 업데이트)

안녕하세요! 퇴근 후 밤마다 사이드 프로젝트로 '데스크 셋업 시뮬레이터'를 깎고 있는 로켓다람쥐입니다.

최근 DeskFlow를 운영하면서 "화면이 너무 좁아서 모니터랑 허브 몇 개 올리면 꽉 차요"라는 피드백을 자주 받았습니다. 저 역시 듀얼 모니터 세팅을 그리다 보니 케이블이 서로 꼬여서 보기 불편하더라고요.

그래서 이번에 UX를 크게 개선하는 v1.1.6 업데이트를 진행했습니다. 노드 기반 시각화 툴이나 화이트보드 앱을 기획 중이신 분들께 소소한 팁이 될까 하여 공유해 봅니다.

캔버스 2.5배 확장 (2000 -> 5000px) 기존 2000픽셀 고정이었던 캔버스를 5000픽셀로 대폭 늘렸습니다. 면적으로 치면 6배 이상 커진 셈입니다. 문제는 화면을 넓히고 나니 노드(장비)를 드래그할 때 특정 구역 이상으로 안 넘어가는 버그가 터졌습니다.
확인해 보니 과거에 짜둔 이동 범위 제한(Clamp) 로직에 하드코딩된 2000이라는 숫자가 3군데나 박혀 있더군요. 상수화의 중요성을 다시 한번 깨달았습니다.

모눈종이(Graph Paper) 배경 도입 기존의 단순 점선(Dot) 배경은 줌아웃을 하면 거리감이 잘 안 느껴졌습니다. 이번에 40px 간격의 얇은 선과 200px 간격의 굵은 선을 교차시킨 모눈종이 패턴으로 CSS를 갈아엎었습니다. 확실히 "이 굵은 칸 하나가 모니터 암 위치"라는 식으로 구획을 나누기가 훨씬 편해졌습니다.
피그마 스타일의 Pan Mode (단축키 H) 화면이 커진 만큼 이동 편의성이 핵심이었습니다. 기존 스페이스바 누르고 이동하는 것에 더해, 키보드 H키를 누르거나 손 모양 버튼을 토글하면 마우스 클릭만으로 화면 전체를 끌고 다닐 수 있는 팬 모드를 추가했습니다. 피그마나 미로 같은 툴의 익숙한 UX를 차용하니 유저분들의 반응이 제일 좋았습니다.

시각적인 툴은 기능만큼이나 '만지는 맛'과 '공간감'이 중요하다는 걸 많이 느끼고 있습니다. 다음엔 이 거대한 5000픽셀 캔버스를 한눈에 볼 수 있는 미니맵 구현에 도전해 볼 생각입니다.

데스크테리어나 케이블 정리에 관심 있으신 분들은 설치 없이 바로 브라우저에서 테스트 가능하니 가볍게 즐겨주세요!

프론트엔드단에서 캔버스나 드래그 앤 드롭 구현해 보신 선배님들의 조언이나 피드백은 언제든 환영합니다! 읽어주셔서 감사합니다.