[We All Lion 웹게임 제작기] #2 UX/UI

지난번 브랜딩에 이어 UXUI 과정도 기록해보고자 한다.

 

 

<디자인 시스템>

 

오렌지와 블랙을 메인으로 컬러를 제한적으로 사용해 게임에 집중할 수 있도록 했다.

폰트 또한 기본적인 프리텐다드를 사용해서 총 5가지 계층으로 구성했다.

이번 프로젝트에서 피그마를 처음 사용해봐서 어려운 점이 많았지만, 유튜브와 강의를 찾아보면서 하나씩 배워나갔다.

 

 

 

 

<플로우 차트와 와이어 프레임>

 

게임 접속부터 플레이까지 고려해 플로우 차트를 작성했다. 작성하다 생각하지 못했던 시나리오가 등장하는 등, 전체적인 플로우 차트를 짠 뒤에도 고려해야 할 부분이 생겨났기 때문에 실제로 게임을 진행하는 것처럼 흐름을 보며 차트를 완성해나갔다. 이후 작성한 플로우 차트를 기반으로 와이어 프레임을 그려나갔는데, 멘토님에게 피트백을 받으면서 혼자서는 생각할 수 없었던 관점으로 몇 차례 프레임을 수정했다. 처음 그렸던 와이어 프레임은 집중되어야 할 부분이 명확하지 않았기 때문에 중요한 부분과 그렇지 않은 부분을 구분해서 다시 설계했다.

 

 

---

 

1. 메인 로비

 

이번 작업의 컨셉에 맞춰 '신문에 띄워진 카드' 형태를 살리고자 노력했다. 좌측은 게임 방 리스트, 우측은 채팅창으로 구성했고 리스트의 경우 easy 모드 / hard 모드 필터링을 넣어 유저가 쉽게 원하는 난이도의 방을 선택할 수 있도록 했다.

 

 

 

 

2. 게임 방

 

스파이를 검거하는 '스파이폴' 게임 컨셉이 UI에 녹아들 수 있도록 몇 가지 재미있는 요소를 사용했다. 스파이를 투표하는 기능에서는 검거 도장이 찍히는 액션을 넣어 좀 더 재미있는 경험이 되도록 했다. 

 

게임 페이지의 구성은 상단 알림 메세지 / 타이머 / 현재 진행 상황 안내카드 / 화상화면 순으로 구성해서 유저가 집중해야 할 부분부터 차례로 배치했다.

 

 

 

3. 화상화면과 실시간 채팅

 

게임 중에도 실시간 채팅과 화상화면이 공유되어 더 재미있는 플레이가 가능하다. '거짓말'이 중요한 게임이기 때문에 상대의 표정과 말투를 살펴가며 게임을 진행할 수 있어서 실제로 만나 게임하는 것처럼 재미있게 몰입할 수 있다. 처음 UI 디자인을 진행했을 때 색상을 너무 과하게 넣어서 멘토님에게 피드백을 받았는데, 확실히 피드백을 적용하니 게임 진행 영역에 더 집중이 잘 되었다.

 

 

처음 사용해본 피그마와 처음 디자인해본 게임 UI는 아쉽고 부족한 점이 많은 작업이었다. 하지만 정해진 기간 내에 하나의 프로덕트를 만들어가는 과정이 생각보다 더 재미있는 경험이라는 걸 깨달았다. 새로운 작업은 고통스럽기도 하지만 끝난 뒤에는 수많은 깨달음을 가져다 준다. 개발자 팀원들과 소통하는 과정도 좋았고 무엇보다 해보지 못했던 작업을 했던 게 가장 큰 수확이었다.

 

 

- 포트폴리오 보러가기 👉 https://notefolio.net/zooni/341168

---

🤔 깨달은 점

   ✔ UXUI 작업에서 명확한 위계를 설계하는 것은 기본 중의 기본이다.

   ✔ 중요한 부분과 그렇지 않은 부분을 구분하는 능력이 필요하다.

 

🥺 아쉬운 점

   ✔ 피그마를 좀 더 깊이 공부하고 진행했으면 어땠을까 하는 생각이 든다. 하지만 직접 프로젝트를 진행하면서 필요에 의해 배워나가는 것도 큰 도움이 되었다.

   ✔ 디자인 시스템을 더 체계적으로 짰으면 하는 아쉬움. 다른 디자인 시스템을 참고해서 공부해야겠다.