[사이드프로젝트][DeskFlow] 5000픽셀 캔버스에서 유저가 길을 잃지 않게 만드는 법 (미니맵 & 화면 맞춤)
안녕하세요! 퇴근 후 플러터(Flutter Web)로 사이드 프로젝트를 깎고 있는 로켓다람쥐입니다.
현재 데스크 셋업 시뮬레이터인 DeskFlow를 만들어서 운영 중인데요. 지난 업데이트에서 유저들이 장비를 마음껏 넓게 배치할 수 있도록 캔버스를 5000x5000으로 대폭 키웠습니다.
그런데 공간이 너무 넓어지니까 장비 구역에서 조금만 벗어나 패닝을 해도 "내 장비 다 어디 갔지?" 하고 하얀 빈 화면에서 미아가 되어버리는 치명적인 UX 문제가 발생하더군요. 이 문제를 해결하기 위해 이번 주말에 내비게이션 기능 2가지를 추가했습니다.
캔버스 미니맵 (Minimap) 좌측 하단에 전체 5000픽셀 영역을 축소한 미니맵을 띄웠습니다. 현재 배치된 장비들의 좌표 데이터를 가져와 청록색 블록으로 찍어주고, 현재 뷰포트를 하얀 사각형 박스로 맵핑했습니다. 미니맵의 특정 부분을 클릭하면 캔버스 좌표가 즉시 해당 위치로 이동합니다.
컨텐츠 화면 맞춤 (Fit to Content - 단축키 F) 이게 캔버스 앱의 핵심이더라고요. 유저가 화면 어디에 있든, 현재 활성화된 장비 노드들의 전체 bounding box 좌표를 계산해서 모니터 중앙에 꽉 차게 자동으로 줌과 위치를 맞춰주는 기능입니다. 키보드 F 키를 누르면 바로 발동하도록 붙였습니다.
F키 눌러서 전체 보기 -> 미니맵 찍어서 특정 장비로 순간이동 -> 케이블 연결 -> 다시 F키 눌러서 전체 보기. 이 사이클을 만들어주니 광활한 캔버스에서의 UX 스트레스가 완전히 사라졌습니다.
혹시 프론트엔드에서 캔버스 기반 툴(노드 에디터, 화이트보드 등)을 기획 중이신 분들이 계시다면, '화면 맞춤(Fit to bound)' 기능은 초기 스펙에 꼭 넣으시는 걸 추천해 드립니다!
데스크테리어나 케이블 정리 구상할 때 브라우저에서 가볍게 쓰기 좋으니 한번 테스트해 보시고 피드백 주시면 감사하겠습니다.
👉 앱 링크: https://deskflow-gold.vercel.app/(Vercel로 배포해 두어서 접속이 빠릅니다!)
