r/vibecoding•4개월 전•107•42
조사 보드가 필요했는데… 얼떨결에 3일 동안 vibecoding으로 이걸 만들어버렸네요
Needed an investigation board… accidentally spent 3 days vibecoding this instead
핵심 요약
간단한 캔버스 도구를 만들려다 3일간의 몰입 끝에 실시간 협업 조사 보드를 완성한 개발자의 이야기.
- 프로젝트 배경 — 조사 및 네트워크 매핑을 위한 시각적 보드 필요성
- 개발 과정 — 2시간 예상 작업이 3일간의 몰입형 vibecoding으로 변모
- 기술 스택 — React, React Flow, WebSockets 등을 활용한 실시간 협업 구현
- 핵심 기능 — 무한 캔버스, 실시간 동기화, 노드 관계 연결 및 SVG 내보내기
Linkchart.art - 조사나 네트워크 매핑 아이디어를 위해 사람, 차량, 위치, 이벤트를 연결할 시각적 보드가 필요했습니다.
원래는 간단한 드래그 가능한 캔버스를 만드는 데 2시간 정도 쓸 계획이었습니다.
그런데 어쩌다 보니 3일 내내 이걸 붙잡고 실시간 협업 조사 보드로 만드는 'vibecoding'을 하고 있더군요.
현재 스택/도구:
- React
- React Flow
- Tailwind
- WebSockets for live collaboration
- SVG export system
- A concerning amount of caffeine
제가 집중한 주요 기능:
- Large zoomable infinite canvas
- Smooth dragging/panning
- Realtime multi-user collaboration
- Live syncing between users
- Investigation-style UI
- Relationship lines between nodes
- Editable SVG export instead of flat screenshots
솔직히 가장 큰 도전은 여러 사용자가 동시에 노드를 움직일 때 캔버스가 버벅거리지 않게 실시간 동기화를 구현하는 것이었습니다.
또한 "간단한 노드 캔버스"라는 말이 소프트웨어 개발에서 가장 큰 거짓말 중 하나라는 걸 아주 빠르게 깨달았습니다.
아직 초기 단계지만, 지금까지 나온 UI 결과물은 꽤 만족스럽습니다.
이름은 LinkChart.art입니다.
