[PROJECT: The Game King] - 플레이어 점수 합산기를 만들어보자!(3) - [프로토타입 만들기]

## 들어가기 전에

아래 포스트에서 이어지는 글입니다.
해당 내용을 먼저 읽으시면 이해하기 좋습니다.

 

[PROJECT: The Game King] - 플레이어 점수 합산기를 만들어보자!(2) - [기획]

 

## [PROJECT: The Game King] 프로토타입 만들기

이제 핵심 스펙을 정의했으니, 프로토타입을 만들어서 다음 모임때 실제 사용도 해보고, 친구들의 반응도 볼까합니다.
간단한 앱일것 같은데,
제가 디자인 시안이 없으면 개발 못하는 프론트병에 걸려서... 간단히 피그마로 디자인 시안도 만들까 합니다.
 

### 피그마로 디자인 시안 만들기

가끔, 왜인지는 모르겠으나 회사에서 와이어프레임을 제가 그립니다.(개발잔데..!)
그리고 그걸로 디자이너분과 이야기를 나누기도 하구요.
그 경험을 살릴때입니다! (역시 모든 경험은 필요가 있따!)
 
1. 플레이어 추가화면

더게임킹-프로토타입 플레이어 추가화면

 
핵심스펙 2:  사용자는 플레이어를 추가 할 수 있다. 를 위한 플레이어 추가화면입니다.
이름을 입력하면, 하단에 아이콘 형태로 플레이어가 추가됩니다.
 
 
2. 게임 스코어 보드 화면

게임 스코어 보드 화면

 
핵심스펙 3: 게임 라운드마다 각 플레이어의 점수를 입력할 수 있다.
핵심스펙 4: 게임이 종료되면 각 플레이어의 입력된 점수를 알 수 있다.
를 위한 게임 스코어 보드 화면입니다. 
앞서 추가한 참여자가 있고, 각 라운드별 점수를 기록할 수 있습니다. 
핵심 스펙 4를 조금 수정해
그냥 현황판 보듯이 현재 어떤점수인지 알게하는게 더 UX적으로 좋을 것 같아서 수정했습니다.
 
3. 게임 결과 화면

결과 화면

 
앞서 두 화면 정도면 앞서 정의한 스펙상 필요 기능은 다 구현이 되지만,
게임 종료 시점을 명확히 하면 UX적으로 좋다 판단하여

게임 결과 화면을 추가했습니다!
 
추후에  '짝짝짝~ 축하해요~', '누구누구님 꼴등이네요~ 노력하세요'
등의 재밌는 워딩을 넣어도 좋을거 같아요!
 

### Flutter & Firebase로 프로토타입 배포하기.

핵심스펙 1: 프로젝트는 웹 어플리케이션이다.
을 위해 웹배포가 가능한 방식들을 생각해보았는데요.
최근 글을 올리고있는 Flutter vs Next.js 중 Flutter로 할까 했습니다.
 
 플러터 안 한지 너무 오래되기도 했고, Firebase배포는 정말 간단하거든요! 3분컷? 물론 Vercel도 매우 간단하긴 합니다만..
 
그래서 쨔쟌~
개발은 정말 쉬웠어요. 애초에 간단하거든요!
저 와이어프레임? 디자인? 고민이 더 오래걸린듯 합니다...!
물론 디자인 시안과 조금 다르지만 ...!
 

근데 플러터 웹 초기 로드는 아직도 느리군요..! 
로딩화면을 추가하던가 해야겠습니다.
 
저의 프로토타입은 https://the-game-king.web.app/ 서 확인해보실 수 있습니다.
**초기 로딩이 살짝 기니 조금만 기다려주세요~!
**어떠한 에러처리도 안 되어있습니다! exception에 주의하세요!
 
 

## 앞으로..

완성된 프로토타입을 가지고, 친구들과 약속을 잡아서 보드게임을 해볼까 합니다.
그리고 주변에 보드게임덕후 분들을 찾아내서 피드백이나, 더 강화할 요소등이 있을지 알아볼까해요!
만약 친구들 반응도, 보드게임을 좋아하시는 분들도 반응이 안 좋고, 가능성도 없다면...
내 첫번째 사이드프로젝트는 빠이빠이...ㅠ

 

반응이 조금이라도 있음하네요! 그러면 UX나 디자인을 강화하고 기능도 추가할텐데! 
 
위의 피드백을 위해 [Project: The Game King] 다음 포스팅은 조금 걸릴 것 같습니다~!
어떤 결과가 와도 포스팅 꼭 마무리 포스팅은 꼭 하겠습니다!