웹캠 앞에서 몸으로 벽 구멍을 통과하는 게임을 만들었습니다 (브레인월)

예전에 일본 예능에서 벽에 뚫린 구멍 모양대로 몸을 맞춰서 통과하는 거 보신 적 있을 거예요. '브레인월'이라고. 그거 보면서 저거 브라우저로 만들면 웃기겠다 싶어서 만든 게 실루엣 러시입니다. 웹캠 앞에서 포즈를 잡아 다가오는 벽의 구멍에 몸을 맞춰 통과하는 전신 게임이에요.

카메라를 켜면 웹캠에 잡힌 내 몸이 네온 실루엣으로 바뀝니다. MediaPipe 셀피 세그멘테이션으로 사람 영역만 실시간으로 따내서 그려주는 건데, 브라우저에서 GPU로 돌아가서 생각보다 부드러워요. 그리고 벽이 다가오면 그 구멍 모양대로 팔다리를 벌리거나 웅크려서 통과하는 거죠.

진짜 고생한 건 판정이었어요. 처음엔 화면 좌표 그대로 포즈를 비교했는데, 사람마다 방 크기도 다르고 카메라까지 거리도 다르니까 똑같은 자세를 잡아도 어떤 사람은 통과, 어떤 사람은 충돌로 나오더라고요. 키 큰 사람은 유리하고 작은 사람은 불리하고. 이게 게임으로 치명적이잖아요. 그래서 게임 시작 전에 가만히 서 있으면 3·2·1 카운트다운 동안 그 사람의 머리·발·중심을 캡처해서 '기준 몸'으로 잠그게 바꿨어요. 그 다음부턴 화면 어디에 서 있든, 얼마나 작게 보이든 기준 몸 대비 포즈만 맞으면 통과로 쳐줍니다. 방 크기나 정확한 프레이밍이 더는 필요 없어진 거죠. 이거 넣고 나서야 누가 해도 공평한 게임이 됐어요.

네온 룩으로 간 것도 이유가 있어요. 처음엔 웹캠 영상을 그대로 보여줬는데, 내 방 배경이랑 빨래 걸린 것까지 다 나오니까 몰입도 안 되고 좀 민망하더라고요. 그래서 사람 영역만 떼어내서 네온 실루엣으로 칠하고 배경은 어두운 그리드로 깔았더니, 갑자기 게임 화면처럼 보이기 시작했어요. 내 방이 무대가 된 느낌이랄까요.

React 19 + TypeScript + Vite에 Tailwind, 포즈 인식은 MediaPipe로 했습니다. 라운드가 올라갈수록 벽이 더 빨리 오고 포즈도 더 비대칭적이고 어려워져요. 하트 세 개 다 잃으면 게임 오버고요. 영상은 전부 브라우저 안에서만 처리돼서 기기 밖으로 안 나갑니다. 웹캠 없어도 데모 모드로 어떻게 돌아가는지 볼 수 있으니 한번 구경해보세요. 친구들이랑 같이 하면 몸치 인증 대회가 됩니다.