실시간 협업 픽셀 아트 프로젝트 Pick-px: 기획부터 기술 스택까지

핵심 기술: Pick-px는 실시간 협업을 위한 픽셀 아트 프로젝트로, 다수의 사용자가 동시에 캔버스에 그림을 그리고 소통할 수 있도록 웹 기반으로 구현되었습니다. 사용자 간의 실시간 동기화, 쿨타임 관리, 그룹 채팅 및 이미지 공유 기능 구현에 중점을 두었습니다.

기술적 세부사항:

• 기획 배경: Reddit의 r/place와 같은 실시간 협업 및 경쟁 경험을 웹 환경에서 구현하려는 시도에서 출발했습니다. '같이 만든다'는 경험을 제공하며, 단순한 그림판 이상의 재미 요소를 추구합니다.
• 주요 기능:
  • 실시간 캔버스: 수십만 개의 픽셀 데이터를 실시간으로 처리하고 렌더링하는 1024x1024 캔버스.
  • 협업 및 경쟁 요소: 쿨타임 제약, 팀 기반 협업 및 방해.
  • 상시 & 이벤트 캔버스: 지속적으로 즐길 수 있는 기본 캔버스와 기간 한정 이벤트 캔버스 제공.
  • 인앱 소통: 서비스 내 캔버스 단위 그룹 채팅 기능으로 전략 공유 및 실시간 대응 지원.
  • 이미지 공유: 그룹별 참고 이미지 실시간 공유 및 투명 오버레이 기능을 통한 그림 가이드 제공.
• 기술적 도전 과제:
  • 대규모 동시 접속 처리: 수십 명 이상의 사용자가 동시에 캔버스에 접근할 때 발생하는 실시간 픽셀 데이터 처리 부하 관리.
  • 데이터 처리 및 렌더링 최적화: 지연 없는 사용자 경험 유지를 위한 픽셀 데이터 처리 속도 및 렌더링 성능 확보.
  • 실시간 동기화: 채팅 및 이미지 오버레이 기능의 UI 및 데이터 처리 설계.
  • 쿨타임 동기화: 클라이언트 간 시간 오차 및 재접속 시 쿨다운 정보 일관성 유지.
• 기술 스택:
  • 프론트엔드: React, TypeScript, Canvas API, Zustand (상태 관리), Socket.io-client (실시간 이벤트)
  • 백엔드: NestJS, JWT + OAuth2 (Google) (인증), Redis (실시간 데이터, Pub/Sub), PostgreSQL (영속 데이터)
  • 인프라/운영: Docker, Docker Compose, Kubernetes, AWS
  • 프로젝트 관리: Jira

개발 임팩트: Pick-px는 실시간 협업 웹 서비스의 기술적 난제를 해결하며 사용자에게 몰입감 있는 협업 경험을 제공합니다. 이는 동시성, 실시간 통신, 프론트엔드 렌더링 최적화 등 여러 웹 개발 분야에서 귀중한 경험과 기술적 지식을 축적하는 계기가 됩니다.

커뮤니티 반응: (본문에서 직접적인 커뮤니티 반응 언급은 없으나, r/place 사례를 통해 유사 프로젝트의 높은 참여도와 관심을 확인할 수 있습니다.)