[사이드프로젝트][DeskFlow] 듀얼 모니터, 허브 연결할 때 필요한 케이블 계산해 주는 시뮬레이터 만들었습니다

안녕하세요! 퇴근하고 아이 재운 뒤, 밤마다 사이드 프로젝트를 만드는 1인 개발자 로켓다람쥐입니다.

맥북에 모니터 두 대 연결하려고 할 때 허브에 포트가 모자라지는 않은지, 케이블은 C to DP를 사야 할지 머릿속으로만 상상하다가 규격이 안 맞아서 반품했던 슬픈 기억... 다들 한 번쯤 있으시죠?

장비 세팅할 때마다 하드웨어 연결 스트레스 받는 게 싫어서, 아예 웹에서 미리 꽂아보고 테스트할 수 있는 데스크 셋업 시뮬레이터(DeskFlow)를 만들어봤습니다.

[주요 기능]

드래그 앤 드롭 배치: 좌측 패널에서 맥북, 모니터, 칼디짓 독 같은 장비를 캔버스로 쓱 끌어와서 마음대로 배치할 수 있습니다.
직관적인 케이블 연결: 장비의 포트 부분을 클릭해서 다른 장비랑 이으면 초록색 선이 연결됩니다. 가상으로 선을 꽂아보며 포트가 모자라지 않은지 확인할 수 있습니다.
쇼핑리스트 자동 계산: 이게 제가 가장 필요했던 기능인데요, 캔버스에서 선을 연결할 때마다 우측 패널에 TB4, DP, USB-C 등 필요한 케이블 품목과 수량이 실시간으로 계산되어 나타납니다.
설계도 캡처: 예쁘게 연결해 둔 셋업 망을 깔끔한 이미지 파일로 다운로드할 수 있습니다.

새 장비 들일 때 케이블 깜빡해서 배송 며칠 더 기다리는 불상사를 막기 위해 만들었는데, 데스크 세팅 새로 구상 중이시거나 장비 구매 계획 있으신 분들 가볍게 한번 써보시면 좋을 것 같습니다.

혹시 사용하시다가 본인이 쓰는 장비가 리스트에 없다면 사이트 내 피드백 기능으로 편하게 남겨주세요. 짬 날 때마다 추가해 두겠습니다. 감사합니다!