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를 사용하여 렌더링됩니다.
📁 캔버스 내보내기: 사용자는 자신의 아트워크를 이미지로 저장할 수 있습니다.
🔧 모듈형 아키텍처: 그리기 로직, 서버 이벤트 및 플랫폼 통합을 위한 별도의 레이어를 제공합니다.
업데이트 날짜
2025. 5. 29.
예술/디자인
데이터 보안
arrow_forward
보안은 개발자가 데이터를 수집 및 공유하는 방식을 파악하는 것에서 시작됩니다. 데이터 개인 정보 보호 및 보안 관행은 사용자의 앱 사용, 지역, 연령에 따라 다를 수 있습니다. 다음은 개발자가 제공한 정보이며 추후 업데이트될 수 있습니다.