Draw it

Draw it은 프런트엔드에 Flutter를, 백엔드 동기화에 Node.js + Express와 WebSocket을 사용하여 개발된 실시간 협업 캔버스 애플리케이션입니다. 이 앱을 통해 여러 사용자가 공유 보드에 동시에 그림을 그릴 수 있으며, 크로스 플랫폼 UI 개발과 실시간 네트워크 통신 모두에 대한 전문성을 입증합니다.

🚀 주요 목표:

성능이 뛰어난 이벤트 기반 아키텍처를 사용하여 공유 드로잉 보드에서 원활한 실시간 협업을 지원합니다.

🧱 기술 스택:

Flutter(Dart): 제스처 처리 및 커스텀 렌더링 기능을 갖춘 크로스 플랫폼 모바일 프런트엔드

Node.js + Express.js: 지속적인 양방향 통신을 위한 WebSocket 지원 백엔드 서버

WebSocket(ws): 사용자 간 스트로크 실시간 동기화

CustomPainter: 캔버스에 프레임 단위로 효율적인 드로잉

Permission Handler 및 RepaintBoundary: 드로잉을 기기에 이미지로 저장

🖌️ 핵심 기능:

✍️ 공유 실시간 드로잉: 모든 참여자는 WebSocket 브로드캐스트를 통해 서로의 스트로크를 즉시 볼 수 있습니다.

📡 상태 비저장 WebSocket 서버: 경량 Node.js 서버는 활성 소켓 연결을 유지하고 낮은 지연 시간으로 스트로크 이벤트를 전달합니다.

🎨 Canvas Engine: 터치 제스처는 그리기 가능한 벡터 경로로 변환되고 Flutter의 CustomPainter를 사용하여 렌더링됩니다.

📁 캔버스 내보내기: 사용자는 자신의 아트워크를 이미지로 저장할 수 있습니다.

🔧 모듈형 아키텍처: 그리기 로직, 서버 이벤트 및 플랫폼 통합을 위한 별도의 레이어를 제공합니다.