목차
  1. 서비스 소개
    1. 1. 게임 생성 및 초대
    2. 2. 역할 선정
    3. 3. 키워드 그리기
    4. 4. 악동 미술가 투표
    5. 5. 키워드 추측
    6. 6. 결과 발표
  2. 플레이 영상
  3. 마무리

Flutter로 만든 “Trouble Painter - 드로잉 마피아 게임” 서비스를 소개합니다.

서비스 소개

Trouble Painter는 착한 미술가들 사이에 숨어있는 악동 미술가를 찾아내는 드로잉 마피아 게임입니다.
👉 Android & iOS : 다운로드 링크


우측 하단의 귀여운 햄찌가 악동 미술가입니다 🐹우측 하단의 귀여운 햄찌가 악동 미술가입니다 🐹

1. 게임 생성 및 초대

친구들과 플레이를 하고 싶다면, 방을 생성한 뒤 초대하기 버튼을 눌러주세요.
생성된 QR 코드를 보여주거나 참여코드를 공유하여 친구들을 초대할 수 있어요. 최소 3명 이상의 유저가 모여야 플레이가 가능하며 최대 10명까지 함께 플레이할 수 있습니다 :)


입장시 랜덤으로 색상이 부여됩니다.입장시 랜덤으로 색상이 부여됩니다.
QR 코드 또는 참여코드를 공유해 주세요.QR 코드 또는 참여코드를 공유해 주세요.

친구가 만든 방에 손쉽게 참가할 수 있도록 총 3가지 방법을 준비했어요.

  • QR 코드를 통한 게임 입장 : 참여코드로 입장하기 → QR 코드 스캔하기
  • URL Scheme을 통한 입장 : 친구가 공유해준 초대 링크 클릭
  • 초대 코드를 직접 입력하여 입장 : 참여코드로 입장하기 → 참여코드 입력하기

QR 코드 스캔하여 입장하기
URL Scheme으로 입장하기
초대코드 직접 입력하여 입장하기

2. 역할 선정

게임이 시작되면 무작위로 악동 미술가 한 명이 선정되며, 나머지 플레이어들은 모두 착한 미술가 역할을 수행하시면 됩니다.

악동 미술가

  • 그림으로 그림 키워드를 모른체로 시작합니다.
  • 착한 미술가들에게 정체를 들키면 안됩니다.
  • 정체를 들키더라도 그림 키워드를 맞추면 승리할 수 있어요.

착한 미술가

  • 그림으로 그릴 키워드를 알고 있습니다.
  • 악동 미술가에게 키워드를 들키면 안 돼요.
  • 누가 키워드를 모르는 악동 미술가인지 그림을 보고 찾으세요.
귀여운 햄찌가 나타났다면<br>당신은 악동미술가!귀여운 햄찌가 나타났다면
당신은 악동미술가!
푸근한 곰도리가 나타났다면<br>당신은 착한미술가!푸근한 곰도리가 나타났다면
당신은 착한미술가!

3. 키워드 그리기

게임은 한 턴씩 돌아가면서 그림을 그리며 총 2라운드로 진행됩니다. 내 차례가 되면 배경 색상이 변경되며 한 턴에 오직 한 획만 그릴 수 있기 때문에 한 획만 그릴 수 있어요라는 드로잉 애니메이션이 가이드로 나타납니다.

처음엔 한 획이라는 조건이 답답하게 느껴지실 순 있지만, 친구들과 몇 판 플레이를 해보시면 오히려 적게 그리고 추상적으로 그릴수록 게임이 재미있어진다는 것을 경험을 하실 수 있습니다 😋

악동 미술가 내 차례 화면악동 미술가 내 차례 화면
착한 미술가 내 차례 화면착한 미술가 내 차례 화면

그림은 방 입장 시 랜덤으로 선택된 색상으로 한 획을 그릴 수 있습니다. 한 턴에 15초 동안 진행되며, 그림을 수정하고 싶은 경우 우측 하단에 삭제 버튼을 누르시면 됩니다. 턴 넘기기 버튼도 함께 활용하시면 더 스피드한 게임을 즐길 수 있습니다.

또한 내 차례가 아닌 경우에도 다른 유저와 소통할 수 있도록 여섯 가지 리액션이 구현되어 있어서 게임을 더욱 풍성하게 즐길 수 있습니다. 🙌


첫 턴인데 악동 미술가라니..?!
친구들의 그림에 리액션을 보내보세요!

4. 악동 미술가 투표

악동 미술가를 실시간 투표로 찾는 시간입니다. 프로필의 배경 색상과 드로잉 팬 색상이 동일하니 키워드를 모르고 그린 것 같은 플레이어에게 투표해 주세요! 🗳️

가장 많은 표를 받은 플레이어가 <span style=color:#FF774C>악동 미술가</span>로 지목됩니다.가장 많은 표를 받은 플레이어가 악동 미술가로 지목됩니다.

5. 키워드 추측

투표에서 악동 미술가를 찾았다면 키워드 추측하는 시간이 진행됩니다. 악동 미술가가 입력하는 키워드를 착한 미술가들이 실시간으로 볼 수 있어요.

악동 미술가 키워드 입력 화면악동 미술가 키워드 입력 화면
키워드를 지켜보는 착한 미술가 화면키워드를 지켜보는 착한 미술가 화면

같은 팀 한 명 없이 홀로 싸우는 악동 미술가를 위해 Gemini API를 이용하여 AI 힌트 기능을 구현해 두었어요. 플레이어들이 그린 그림을 Gemini가 보고 악동 미술가에게 힌트를 주는 기능이랍니다.

Gemini 도와주세요!

6. 결과 발표

각 역할의 승리 조건은 다음과 같으며, 게임 종료 후 15초 뒤에 대기방으로 이동됩니다.

착한 미술가 승리

  • 투표로 악동 미술가를 찾았고, 키워드도 들키지 않은 경우

악동 미술가 승리

  • 정체를 들키지 않은 경우
  • 정체를 들켰지만, 키워드를 맞춘 경우

착한 미술가의 승리착한 미술가의 승리
키워드를 맞춘 악동 미술가의 승리키워드를 맞춘 악동 미술가의 승리
정체를 들키지 않은 악동 미술가의 승리정체를 들키지 않은 악동 미술가의 승리

플레이 영상

악동 미술가 데모 영상

마무리

이번 프로젝트는 YAPP 24기를 계기로 모인 7명의 팀원들과 함께 만든 프로젝트이며, 앞으로도 계속 서비스할 계획을 가지고 있습니다.

YAPP 24TH DEMO DAY 대상 ✌️YAPP 24TH DEMO DAY 대상 ✌️

이번 프로젝트는 오픈 소스로 진행하였으며 아래 Github 링크에서 확인하실 수 있습니다.
👉 Flutter : 링크
👉 Backend : 링크

Trouble Painter를 플레이해 보고 싶으신 분은 아래 링크에서 다운받아 주세요 🫶
👉 Android & iOS : 다운로드 링크

다음 글에선 Trouble Painter 개발기를 공유하도록 하겠습니다 :)