하루 만에 실시간 협업 화이트보드를 만들었습니다 — 방법은 이렇습니다

Source: Dev.to

자정에 시작되었습니다

24시간, 무료 Replit 구독, 그리고 아이디어가 있었습니다: Miro와 같은 것을 만들되, 그 안의 모든 코드를 실제로 이해할 수 있다면 어떨까?

먼저 해결해야 했던 핵심 문제

멀티플레이어 동기화는 실제로 만들 때까지는 간단해 보입니다. 어려운 부분은 캔버스 업데이트를 보내는 것이 아니라, 무엇을 보낼지를 결정하는 것입니다.

// client side
canvas.on('object:modified', (e) => {
  socket.emit('canvas:update', {
    roomId,
    delta: e.target.toObject(['id', 'left', 'top', 'scaleX', 'scaleY'])
  });
});

서버에서는 방 상태를 메모리에 보관하고, 방에 있는 다른 모든 클라이언트에게 다시 방송합니다. 새로 들어온 사용자는 canvas:init 이벤트를 통해 전체 현재 상태를 받아 즉시 동기화됩니다.

CollabCanvas가 실제로 하는 일

• 실시간 멀티플레이어 캔버스와 실시간 그리기 동기화.
• 연결된 모든 사용자를 위한 색상 구분 커서 표시.

기술 스택

• 프론트엔드: React + Vite
• 백엔드: 간단한 Node.js 서버 (데이터베이스 없음).
• 캔버스 상태는 방마다 서버 메모리에 저장되며, 비활성 상태가 1시간 지속되면 삭제됩니다. 이는 하루 만에 만들기 위해 범위를 좁히면서도 완전하게 동작하도록 해줍니다.

놀라웠던 점

커서 동기화는 거의 건너뛰려 했던 기능이었지만, 데모에서 가장 인상적인 요소가 되었습니다. 같은 캔버스 위에서 세 개의 색깔 있는 커서가 독립적으로 움직이는 모습을 보면, 단순히 그림만 동기화된 경우보다 멀티플레이어가 실제로 존재하는 느낌을 줍니다.

// client side cursor handling
canvas.on('mouse:move', ({ e }) => {
  const { x, y } = canvas.getPointer(e);
  socket.emit('cursor:move', { roomId, userId, x, y });
});

교훈: 존재감(presence) 기능을 다듬으세요. 이것이 멀티플레이어를 살아있게 만드는 요소입니다.

사용해 보기

실시간 데모는 Replit에 배포되어 있습니다. 두 개의 탭에서 열고, 첫 번째 탭에서 링크를 클릭한 뒤 “Share” 버튼을 사용해 방 ID를 두 번째 탭에 공유하고 그리기를 시작하면 제가 말한 바로 그 모습을 확인할 수 있습니다.

https://collab-canvas—dhruvaugust1.replit.app

Replit Buildathon을 위해 24시간 안에 제작했습니다. 피드백 환영합니다.