[나만무] 🎨 우리가 왜 'Pick-px'를 만들게 되었는지 — 기획 배경과 개발 의도

" 픽셀 하나로 시작해서, 수많은 손길로 만들어지는 거대한 그림"

이 글은 우리 팀이 진행한 실시간 협업 기반 픽셀 아트 프로젝트 Pick-px의 기획 배경과 주요 기능, 기술적인 구현 고민들을 담은 소개글이다.

이 프로젝트는 단순한 그림판이 아니다.
“같이 만든다”는 경험을 웹 안에 구현하려는 시도였고, 그 안에는 꽤 많은 고민과 기술적인 도전이 들어 있었다.

---

프로젝트 주제 선정 배경

Pick-px의 시작은 한 팀원의 꽤 단순한 호기심에서 출발했다.
“실시간으로 수많은 사람이 하나의 캔버스를 같이 그리면 어떤 일이 벌어질까?”

사실 이와 비슷한 서비스는 이미 존재했다.
대표적인 사례는 Reddit의 만우절 이벤트인 r/place.

수십만 명이 동시에 한 픽셀씩 그림을 찍어 완성해 나가는 거대한 프로젝트였다.
동시 참가자가 6만명을 기록하는 미친듯한 인기를 구사했다.

참고 - 나무위키

https://www.youtube.com/watch?v=XnRCZK3KjUY

---

왜 이게 그렇게 재미있을까?

'별거 아닌 픽셀 찍기일 뿐인데, 이게 사람들을 끌어모을 수 있을까?'
처음 팀원의 아이디어를 들었을 때 나도 의문이 들었다.

이것의 재미는
협업과 경쟁 에 있었다.

• 사람들은 팀을 만든다.
• 다른 팀이 그린 그림을 방해하거나, 자기 그림을 지키기 위해 협력한다.
• 여기에 제한적인 행동(쿨타임)이 더해져 재미가 더해진다.

---

Q1.기존의 플랫폼과의 차이점

1. r/place에서는 단발성 이벤트로만 운영되었다.

• 우리는 "지속적으로 즐길 수 있는 웹 사이트"를 지향한다.
• 상시 열려 있는 '기본 캔버스'와, 일정 시간 동안만 활성화되는 '이벤트 캔버스'를 병행 제공할 것이다.
• 사용자에게 다양한 모드의 캔버스를 선택할 수 있다.

2. 협업 시 소통의 부재

• r/place에서는 실시간으로 수많은 유저가 협업했지만,정작 소통 수단은 외부 플랫폼(예: 디스코드)에 의존해야 했다.
• 우리는 서비스 내에서 바로 소통할 수 있도록, 캔버스 단위 그룹 채팅 기능을 제공한다.
• 이를 통해 전략 공유, 역할 분담, 실시간 대응이 가능해진다.

3. 그룹 커뮤니케이션 - 이미지 가이드 공유

" 그룹별 원하는 이미지를 어떻게 공유하면 그릴수 있을까? "
" 실시간 이미지 공유 기능을 제공하자 !"

협업 그림판에서 '무엇을 그릴지'를 공유하는 건 생각보다 어려운 문제다.

• 우리는 이를 해결하기 위해, 그룹별 실시간으로 참고 이미지를 공유할 수 있는 기능을 기획했다.
• 채팅창을 통해 원하는 이미지를 공유하면, 해당 그룹의 사용자들이 투명 오버레이로 이미지 가이드를 보며 작업할 수 있게 확장할 예정이다.

---

Q2. 기술적 챌린지

구현 단계에서는 수많은 기술적 도전이 있다.

1. 대규모 실시간 동기화

수십 명 이상이 동시에 캔버스에 접근하는 상황에서, 실시간으로 픽셀 데이터를 주고받는 건 생각보다 무겁다.
유저 수가 늘어날수록 이벤트 트래픽도 급증하고, 서버/클라이언트 모두 부담이 커질 것이다.

2. 대용량 데이터 처리와 렌더링 최적화

Pick-px의 기본 캔버스는 최대 1024 x 1024 사이즈이다.
초기 로딩 시 수십만 개의 픽셀 데이터를 불러와 렌더링해야 한다.

이후에도 유저의 입력과 다른 유저의 작업 내용을 실시간으로 반영해야하면서
지연 없는 사용자 경험을 유지해야 한다.
데이터 처리 속도와 렌더링 최적화가 핵심 과제가 될 것이다.

3. 채팅 및 이미지 공유 시스템

실시간 채팅과 이미지 오버레이 기능은 모두 실시간 동기화가 필요한 만큼,
UI 구성부터 데이터 처리까지 신중한 설계가 요구될 것이다.

4. 쿨다운(Cooldown) 시간 동기화

Pick-px는 일정 시간마다 한 픽셀만 그릴 수 있도록 쿨타임 제약을 두고 있다.
문제는 클라이언트 간 시간 오차나 새로고침/재접속 시점에 따라 쿨다운 정보가 달라질 수 있다는 점이다.
이를 어떻게 동기화할 지가 핵심 과제일 것이다.

---

기술 스택 및 시스템 구조

프론트엔드

• React + TypeScript: 컴포넌트 기반 UI 구성과 타입 안정성 확보
• Canvas API: 픽셀 렌더링
• Zustand: 캔버스/유저/채팅 등 글로벌 상태 관리
• Socket.io-client: 실시간 이벤트 처리

백엔드

• NestJS: 구조적 & 확장성
• JWT + OAuth2 (Google): 사용자 인증 및 권한 관리
• Redis: 실시간 픽셀/채팅 데이터를 처리하기 위한 인메모리 저장소, Pub/Sub 구조 사용
• PostgreSQL: 유저 정보, 캔버스 메타데이터, 채팅 로그 등 영속적 데이터 저장소

인프라 & 통신 구조

• Docker / Docker Compose: 개발 및 운영 환경 통합 관리
• Kubernetes: 스케일링과 마이크로서비스 운영을 위한 클러스터 관리 도구
• AWS: 클라우드 인프라 (EC2, RDS 등 활용 가능)

협업 도구

• Jira : 일정 및 이슈 관리, Git과 연동하여 커밋/PR과 이슈를 연결할 예정