개요
사이드 프로젝트로, 제페토 플랫폼에 '스푸키 프렌즈'라는 이름의 간단한 캐주얼 수집형 (포켓몬 고 느낌의) 게임을 만들었던 과정을 정리해보고자 글을 쓰게 되었습니다.
스푸키 프렌즈는 게임 내 셀프 카메라를 통해 사진을 찍어 유령을 포획하거나, 포획한 유령을 상위 등급으로 진화시켜 여러 유령을 수집하고, 몬스터와 클리커 형식의 전투를 진행하기도 하는 게임입니다.
프로젝트 팀원과 목표했던 주안점은 '제페토'의 SNS와 연결되어 게임의 외연을 SNS로도 확장시킬 수 있도록 하는 부분이었습니다.
1차적인 요소로는 수집한 유령 캐릭터를 장착해 필드에서 타인에게 과시할 수 있도록 했고, 이어지는 요소는 게임 내에서 찍은 사진을 제페토 피드상에 올려 SNS와 연결되는 지점이 생기도록 했습니다.
기획적인 이야기는 이만 줄이고 UI 이야기로 조금 넘어가자면,
게임 자체는 유니티로 개발할 수 있어 엔진 작업에 큰 어려움은 없었지만, 개발 언어가 C#이 아닌 타입스크립트이다 보니 C# 스크립트 컴포넌트에서 제공해주는 기능들을 사용할 수 없어 약간의 불편함은 존재했던 것 같습니다.
(DoTween 을 쓸 수 없다거나, 타입스크립트이기 때문에 애니메이션 키프레임으로 스크립트의 변수 값 조작이 불가능하다던가 등)
UI·UX 설계
첫 스펙은 게임 내에서 한 사이클 (수집 - 성장 - 전투) 이 돌아가게 하는 게 목표였고, 따라서 각각의 시스템의 볼륨이 크지 않다 보니, UX도 회의를 진행하면서 적당히 빠르게 진행되었습니다.
시스템에 맞는 화면 구성이 어떻게 될지 그 명세와 큰 흐름을 잡는 것을 위주로 작업하고, 세부 UX는 플로우상에 정리해두진 않고 개발하며 팀원과 티키타카하며 진행했습니다. 테스트 플레이를 진행하면서 추가해야겠다 싶으면 추가하는 방식이었는데, 이게 소규모 개발의 맛 아닐까요. 😋
그렇게 UX와 화면 명세를 먼저 구성한 뒤, 와이어프레임을 작업하며 레이아웃을 확정했습니다.
UI 레이아웃과 UX 설계 과정에서 고민했던 부분은 '닫기 버튼'의 위치였습니다.
UI 상의 공통 규칙으로 대부분의 화면에서 닫기 버튼을 좌측 하단에 위치시켰는데 (전투 화면에서의 전투 포기 버튼 또한 동일한 성격의 UI이므로 좌측 하단에 위치),
카메라 화면에서는 좌측 하단에 조이스틱이 위치하고 있었기 때문에 카메라 화면에서는 닫기 버튼을 기존 규칙에 따라 위치시킬 수 없었습니다.
결국 카메라 화면에선 닫기 버튼을 우측 상단에 위치시키게 되었는데, 지인분들과 테스트 플레이를 진행했을 때 닫기 버튼의 위치가 규칙과 달라지는 부분에서 오는 사용자들의 불편함은 없었습니다. 따라서 더 고민하지 않고 넘어가기로 했습니다.
GUI 컨셉
GUI 작업을 진행하면서 신경썼던 부분은 귀엽고 캐주얼하면서 약간의 호러가 곁들여진, 유령 느낌을 GUI 상에서 표현하는 점이었습니다.
형태
GUI의 형태는 캐주얼하게 너무 원에 가깝지 않은 선에서, 둥글둥글하게 느껴지는 라운드를 최대한 넣은 사각형을 주 형태로 사용했습니다.
팝업 헤더의 배경 부분과 같이 포인트로는 물결 형태를 사용했는데,
물결 형태가 포인트 요소로서 전체적인 형태의 구성이 단조롭지 않도록 만들어주기도 했고, 유령의 하단부 형태와 유사해 유령의 느낌을 은유적으로 줄 수 있다고 생각했기 때문이었습니다.
색상
'캐주얼 + 약간의 호러' 라는 비주얼 키워드에 맞춰서 주 색은 남보라색으로 설정했습니다.
너무 밝은 색상은 호러보다는 캐주얼 분위기에 무게가 과도하게 쏠려서 배제했고, 후보군은 남색~보라색 범위로 좁혀졌습니다. 보라색 후보는 인게임 색상과 같은 색상 범위였기 때문에 인게임과 UI간의 시각적인 대비가 약해지는 것이 문제였고, 남색은 게임 전체적인 색상과 너무 결이 달라지는 것이 문제였습니다. 따라서, 두 색상을 적절히 조합해 각 색상의 문제점을 희석시킨 남보라색이 채택되었습니다.
포인트 색상으로는 귤색을 고르게 되었습니다.
주 색상과 어울리면서도 포인트로서의 대비도 존재했고, 할로윈 분위기도 느껴지는 색상이라 잘 어울린다고 생각했어요.
나머지 색상들은 주 색에서 너무 튀지 않도록, 채도가 너무 높지 않은 선에서 선택해나갔습니다.
컨셉 레퍼런스
GUI 컨셉은 마술양품점과 모여봐요 동물의 숲 위주로 참고하며 작업했습니다.
마술양품점에선 물결 형태를 유령 느낌을 살리는 요소로 차용했고, 보라색과 다른 색상들을 사용하는 표현 방식도 많이 참고했습니다. 동물의 숲에서는 플랫한 색감, 아기자기한 표현과 패턴을 사용하는 방식 등을 참고했습니다.
최종 GUI
최종 작업에서는 단순한 구성과 적은 묘사로 자칫 지루해보일수 있던 화면에, 패턴 애니메이션을 추가함으로 시각적인 요소를 더했습니다. 팝업 열기 / 닫기, 버튼, 결과 등의 UI에 간단한 동작 연출도 추가해서 게임으로서의 구색은 어느정도 갖춰지게 된 것 같습니다.
회고
UX와 와이어프레임은 프로젝트 초기에 2~3주 정도, 프로젝트 후반부에 진행한 GUI와 엔진 작업이 한달 반 가량 걸린 것 같습니다. 퇴근 뒤와 주말로 작업시간이 한정되었기 때문에 빠듯했지만, 심플한 GUI 덕분인지, 어느정도 디자인 시스템이 확립되고 나서는 빠르게 화면을 쳐내갔던 것 같습니다.
작업하면서 여러 차례 실감하지만, 플로우나 와이어프레임 같은 설계 작업에선 Figma가 확실히 편리하다고 느낍니다. XD도 사용해봤지만 뭔가 파워포인트 스러운... 기획용 툴 느낌이 너무 강해서 편하게 와이어프레임 작업하기에는 뭔가 애매한 부분이 있었습니다. (그래서 어도비가 피그마를 인수하는 걸까요) Mac OS용 프로그램인 스케치는 사용해보지 못해서 넘기겠습니다.
사이드 프로젝트로 어느 정도의 볼륨을 가진 게임의 UI를 마무리한 건 이번이 처음 같습니다.
빠르게 작업하는 게 중점이다 보니, 연출도 공통으로 최소화하고, UI 애니메이션이 있구나 느껴질 정도로 간단하게 작업했습니다. 리소스나 프리팹 작업도 점점 효율화되어 가는 것 같아요.
퇴근하고 작업하는게 일상이 되다 보니 마음이 꺾일 뻔한 적도 조금 있었는데, 꾸준히 열심히 작업하는 팀원에게 자극받아서 마음을 붙잡을 수 있었습니다. 🏃♂️
번외로, UI 배경의 패턴 애니메이션은 셰이더를 통해 회전시키고, UV Offset에 Time 값을 더해 이동시켰는데,
Raw Image 오브젝트를 Rect Transform 을 통해 회전시키고, Raw Image 컴포넌트의 Offset 값을 애니메이션을 통해 움직이는 방법도 있다는 것을 진행 도중에 알아버렸습니다.
어떤 방식이 더 코스트가 저렴한지는 추후에 시간 될 때 확인해보고 싶습니다.
이미지 출처
마술양품점 - 게임 스크린샷
놀러와요 동물의 숲 - 게임 스크린샷
'UI·UX > Game' 카테고리의 다른 글
| 모바일 게임 반복 컨텐츠에서의 사용자 편의성 (0) | 2022.11.27 |
|---|---|
| 프로젝트 별 GUI 컨셉 (0) | 2022.09.18 |
| 균열점 - V-llage 버튜버 방송 웹 게임 콘텐츠 (0) | 2022.09.10 |
