canvas.d-sket.dev를 만든 이야기 — 빌드로그
팀 협업 화이트보드를 직접 만들기로 한 날이 있었다.
Miro는 너무 복잡했다. 처음 쓰는 팀원이 기능을 찾다가 회의 시간 10분을 날려먹는 일이 반복됐다. FigJam은 Figma 없이는 반쪽짜리였고, Mural은 가격이 숨막혔다. 스타트업 팀이 쓰기에 이 셋 다 뭔가 하나씩 부족했다.
결국 "그냥 만들자"가 됐다.
우리가 원한 건 단순했다
- 5분 안에 팀 전체가 같이 그릴 수 있는 공간
- 링크 하나로 팀원이 바로 들어올 수 있는 것
- 복잡한 온보딩 없이 바로 쓸 수 있는 것
그게 없어서 만들기 시작했다.
첫 번째 기술 결정: 무한 캔버스
가장 먼저 마주한 문제는 무한 캔버스였다.
기존 라이브러리 위에 빌드하면 빠르지만 UX에 한계가 생긴다. 우리가 원하는 느낌 — 핀치하고, 줌하고, 그냥 자연스럽게 펼쳐지는 그 느낌 — 을 기존 라이브러리가 줄 수 없었다.
처음부터 만들기로 했다. 느렸지만 우리 것이 됐다.
실시간 협업이 제일 어려웠다
가장 오래 걸린 부분은 실시간 커서 동기화였다.
여러 명이 동시에 캔버스를 움직이면 누군가의 화면은 항상 버벅였다. 지연 100ms 이하로 줄이는 데 몇 주가 걸렸다. 지금은 거의 자연스럽다. 같은 공간에 있는 것처럼.
지금 canvas.d-sket.dev에서 할 수 있는 것
→ 무한 캔버스에서 자유롭게 그리기
→ 팀원과 실시간으로 함께 작업
→ 포스트잇, 다이어그램, 플로우차트
→ 워크샵 모드 (닷보팅, 아이디어 그룹핑)
아직 완성형은 아니다. 하지만 쓸 수 있다. 그리고 계속 만들고 있다.
다음에 올 것
AI가 캔버스를 읽고 보고서를 만들어주는 기능을 개발 중이다. 회의를 마치고 캔버스에 펼쳐진 내용을 AI가 정리해서 액션 아이템과 요약을 뽑아주는 것. 회의 후 정리에 드는 시간을 없애는 게 목표다.
이건 다음 빌드로그에서 더 자세히 공유할 예정이다.
무료다. 링크 하나로 팀을 초대할 수 있다.
써보고 불편한 게 있으면 말해줘. 그게 제일 도움이 된다.
다음 글: 빌드로그 #2 — AI 캔버스 기능을 만드는 과정