닮은 정도로 점수를 매기는 화상 게임 똑딱

웹캠으로 찍은 사진이 문제 이미지와 얼마나 닮았는지 점수로 겨루는 웹 게임입니다.

고객사
SSAFY 교육 과정 팀 프로젝트
분야
캐주얼 웹게임
기술
Vue 3 · Spring Boot · MySQL · Redis · OpenVidu · OpenCV · Amazon Rekognition · AWS Lambda · S3 · CloudFront · Jenkins · Ansible · Docker · Grafana · Prometheus

팀이 한 일

공통 프로젝트 팀 6명이 처음 만들고 자율 프로젝트 팀 5명이 다시 설계했습니다. 포너즈 팀원은 자율 프로젝트 팀의 한 명입니다.

  • OpenVidu 기반 화상 게임방과 PIN 번호 입장
  • 영상 특징 알고리즘 네 가지를 합친 같이 하기 채점
  • Amazon Rekognition 얼굴 비교로 채점하는 혼자 하기
  • 혼자 하기 랭킹·초상권 동의와 베스트 컷 신고 처리
  • 카카오·구글 로그인과 카카오톡 방 공유
  • Jenkins·Ansible·Docker 배포와 Grafana·Prometheus 모니터링

문제

누가 더 닮았는지 가릴 기준이 없던 닮은꼴 놀이

똑딱은 SSAFY 교육 과정 팀 프로젝트로 만든 웹 게임입니다. 팀은 친구끼리 사람이나 사물을 두고 서로 더 닮았다고 다투는 장면에서 주제를 잡았습니다.

이런 놀이에는 판정 기준이 없습니다. 누가 더 닮았는지는 결국 말싸움으로 끝납니다. 함께 하려면 한자리에 모여야 합니다.

얼굴이 찍힌 사진을 다른 사람이 보게 되는 서비스라 공개 기준도 정해야 했습니다. 게임 중 찍힌 사진은 베스트 컷과 랭킹에 쓰려고 S3에 저장합니다.

팀은 떨어져 있어도 같은 이미지를 따라 하고 점수로 가리는 게임을 만들기로 했습니다.

해결

여럿이 할 때와 혼자 할 때 다른 채점

방장이 문제 이미지를 골라 방을 열면 참가자가 PIN 번호로 들어와 따라 합니다. 게임 중에 찍힌 사진은 게임 방식마다 다른 방법으로 채점합니다. 자율 프로젝트에서는 혼자 하는 얼굴 비교 모드와 랭킹을 더했습니다.

  • 화상 게임방: OpenVidu(WebRTC)로 참가자 영상을 한 화면에 모읍니다.
  • 같이 하기 채점: KAZE 특징점, 색 히스토그램, Perceptual Hashing, SSIM 점수를 가중 합산합니다. 비교 전에 GrabCut으로 배경을 걷어 냅니다.
  • 채점 위치: 자율 프로젝트에서는 이 채점을 AWS Lambda의 OpenCV 함수로 옮겼습니다.
  • 혼자 하기 채점: 문제 이미지와 웹캠 사진을 Amazon Rekognition 얼굴 비교에 보내 유사도를 받습니다.
  • 랭킹과 동의: 점수가 20위 안에 들고 사진 수집·이용과 공개에 동의하면 사진을 랭킹에 올립니다.
  • 담당자 확인: 신고가 들어온 베스트 컷과 문제는 관리자가 확인해 처리합니다.
첫 화면에서 혼자 하기·같이 하기·베스트 컷을 고르거나 PIN으로 방에 들어간다

같이 하기는 알고리즘 네 개의 가중 합으로 채점

네 점수 가운데 특징점과 히스토그램 점수의 가중치가 가장 큽니다. 두 점수는 자세와 윤곽, 색 구성을 봐서 따라 한 정도가 잘 드러납니다. 해시와 SSIM은 위치가 조금만 어긋나도 크게 흔들려 보조 점수로 두었습니다. 방마다 다른 배경이 점수를 가르지 않도록 배경부터 걷어 냅니다.

얼굴만 비교하는 혼자 하기에는 관리형 API

혼자 하기는 직접 만든 알고리즘 대신 Amazon Rekognition의 얼굴 비교 결과를 점수로 씁니다. 같이 하기의 알고리즘은 배경과 옷 색까지 함께 비교합니다. 혼자 하기는 문제 속 얼굴과 참가자 얼굴을 비교하는 모드라 얼굴만 보는 편이 맞았습니다. 얼굴 모델을 따로 학습시킬 데이터가 없어 관리형 API를 골랐습니다.

랭킹 사진은 동의를 받은 경우에만 공개

랭킹 사진은 다른 사용자가 볼 수 있어 등록 화면에 필수 동의 항목을 뒀습니다. 동의 문구는 "제3자가 열람이 가능합니다"라고 알립니다. 얼굴 사진은 개인정보라 남에게 보이기 전에 본인 동의가 있어야 합니다. 동의하지 않은 사람도 점수는 받고 랭킹에만 오르지 않습니다.

결과

떨어져 있어도 한 방에서 겨루는 닮은꼴 게임

운영하는 동안 참가자는 한자리에 모이지 않고 PIN 번호로 같은 방에 들어왔습니다. 누가 더 닮았는지는 말 대신 채점 점수로 가렸습니다. 혼자 온 사람은 얼굴 비교 점수로 랭킹에 도전했습니다.

같이 하기
이전한자리에 모여 서로 보고 누가 더 닮았는지 말로 겨룸(사람)
이후방 만들기와 문제 고르기(사람) → PIN으로 입장(사람) → 문제 이미지 따라 하기(사람) → 캡처 채점(시스템) → 결과 확인과 베스트 컷 올리기(사람)
혼자 하기
이전사진을 찍어 친구에게 보내고 닮았는지 물어봄(사람)
이후문제 고르기(사람) → 웹캠 촬영(사람) → 얼굴 비교 점수(시스템) → 20위 안이면 동의 후 랭킹 등록(사람)
사진 공개
이전찍은 사진을 단체 대화방에 올려 돌려 봄(사람). 공개 범위를 따로 묻지 않음
이후20위 안 점수(시스템) → 초상권 동의 체크(사람) → 랭킹 공개(시스템) → 신고 접수(시스템) → 관리자 확인과 처리(사람)
이 사례 공유

비슷한 프로젝트를 준비하고 있다면

무엇을 만들지 아직 정리되지 않아도 괜찮습니다. 지금 상황을 알려 주시면 진행 방식과 범위를 함께 잡습니다.

상담 신청하기