DESKFLOW
케이블 호환성 체크부터 자동 쇼핑 리스트 생성까지 한 번에 끝내는 시각적 데스크 셋업 플래너
rocketsquirreldev-byte
@rocketsquirreldev-byte
스크린샷
소개
🖥️ 완벽한 데스크 셋업을 위한 시각화 플래너, DeskFlow
새로운 모니터나 허브를 살 때마다 "이 케이블이 물리적으로 연결되나?", "대역폭이나 전력 공급이 충분할까?" 고민하며 구글링에 시간을 낭비한 적 있으신가요?
DeskFlow는 장비를 캔버스에 드래그 앤 드롭하고 선을 연결해 보는 것만으로, 데스크 셋업의 복잡한 '호환성 수학(Setup Math)'을 완벽하게 해결해 주는 웹 기반 다이어그램 툴입니다.
✨ 주요 기능
- 🖱️ 직관적인 드래그 앤 드롭: 맥북, 모니터, KVM 스위치 등 다양한 장비 라이브러리를 캔버스에 자유롭게 배치하세요.
- ⚡️ 자동 호환성 체크: 두 기기의 포트를 클릭해 연결해 보세요. 대역폭, 물리적 규격 등을 계산해 연결 가능 여부를 즉시 판별하고, 불가능한 연결은 사전에 차단합니다.
- 🛒 스마트 쇼핑 리스트: 내 셋업에 필요한 케이블과 어댑터의 수량을 정확히 계산하여 우측 패널에 리스트업 해줍니다.
- 🔗 원클릭 구매 연동: 어떤 케이블을 사야 할지 헤맬 필요 없이, 검증된 스펙의 제품을 바로 구매할 수 있는 링크를 제공합니다.
🛠️ 기술 스택
- Frontend: Flutter Web (단일 코드베이스로 부드러운 캔버스 인터랙션 구현)
- Backend/DB: Supabase (장비 및 케이블 카탈로그 데이터베이스)
- Hosting: Vercel
빈 캔버스가 두려우신가요? 가벼운 온보딩 튜토리얼을 따라 5초 만에 나만의 데스크 셋업을 시작해 보세요!
월 운영 비용
무료 🎉
- →주요 키워드를 포함한 H1 태그를 하나 추가하세요.
- →Add <link rel='canonical' href='your-url'>
- →<html> 태그에 lang 속성을 추가하세요.
- →H1, H2, H3 등 헤딩 태그를 사용하세요.
- →내부 링크를 추가하여 내비게이션을 개선하세요.