[인디게임 개발일지 #9] UIUX 디자인 수난시대

0️⃣ UX를 고려하며 디자인 하기

 사실 UIUX 디자인에서 UI와 UX가 구체적으로 어떤 차이가 있는지 알기까지는 좀 걸렸었다. 게다가 대기업은 UI 디자이너와 UX 디자이너를 따로 뽑기도 하는데, 이번에 왜 그런지 드디어 알았다! UX가 너무 어려워서다!! 근데 UI도 똑같이 어렵다!!!

 

 우리는 우선 UIUX 디자인 원칙을 세웠다.

1. 도트 아트와 일반 일러스트가 잘 어우러질 것.
2. 현대적인 UI는 지양하고, 손그림 느낌을 적당히 살릴 것.
3. 패드 대응을 고려할 것.
4. 키보드 캡핑을 고려할 것.
5. '차가운 북유럽 설원'의 세계관을 녹여낼 것.

이 5가지 원칙을 어떻게 살려서 디자인했는지 살펴보자. 그 전에, 이전 디자인은 어땠는지 한 번 더 살펴보고 오면 그동안 얼마나 많은 디자인을 고도화 했는지 알 수 있을 것이다.

[인디게임 개발일지 #6] 생존을 위한 전략적 선택! 완주를 목표로 하기.

 

1️⃣ 도트 아트와 일반 일러스트가 잘 어우러질 것.

 도트 아트가 일반 일러스트와 가장 직관적으로 마주치는 화면은 바로 메인 HUD 화면이 아닐까 싶다. 이 화면을 구성하느라 정말 많은 시행착오를 겪고, 또 많은 고민을 하면서 고통스러워 했었다. 적당히 손그림 요소를 살리는 것도 우리 게임의 UI원칙이었기 때문에

너무 구려서 모자이크 처리

 이렇게 맵 이름을 띄워주는 연출을 시도하기도 했었는데 이때 정말 난관에 봉착 했었다. 도저히 헤쳐나갈 방법이 생각 나지 않아 한참을 미뤄두다, 결국 떠오른 것은 적당히 현대적인 요소를 곁들이는 것이었다.

 처음 맵에 진입했을 때는 유저가 직접 마주하는 화면이었기 때문에 현대적인 UI를 보여주어도 괜찮다고 생각했기 때문에 연출은 비교적 많이 덜어냈다. 그리고 좌측 상단에 게임 정보를 보여주어야 하는데 개인적인 욕심으로 조금 귀엽게 표현하고 싶어서 주인공 머핀의 아이콘을 화려하게 그렸는데 지금 보니 어째 눈에 너무 띄는 것 같기도 하다. 🥹

 또한 도트 아트와 일반 일러스트가 가장 직관적으로 마주치는 화면, 대화 dialouge이다. 피그마로 막상 배치해보니 생각보다 잘 어우러져서 나쁘지 않다고 생각했었지만...

 할머니의 성격을 표현하는 '손'이 정확하게 박스에 가려지는 것 아니겠는가! 다른 게임 UI들을 참고해보니 확실히 우리 게임 대화 dialouge가 유난히 가로로 긴 편이었다. 나는 조금 더 많은 스크립트를 보여주기 위해 그런 선택을 했었던 것인데, 원화가 아닌 대화 일러스트를 배치해보니 캐릭터 성격과 특징을 가릴 수 있을 정도로 dialouge가 컸다는 걸 알 수 있었다. 결과적으로 대화 dialouge 길이는 줄이는 선택을 하게 되었다.

 

2️⃣ 현대적인 UI는 지양하고, 손그림 느낌을 적당히 살릴 것.

 동화적인 연출을 하고 싶어서 현대적인 UI는 거의 다 드러냈다. 이 부분은 앞서 링크해둔 개발일지 6편의 1번 항목에 상당히 잘 나와있으므로 어떻게 손그림 느낌을 '적당히' 살리고 현대적인 UI를 적절히 배치했는지 이야기 해보겠다.

 여전히 고쳐야할 게 정말 많은 화면이지만 현대적인 UI는 지양했지만 레이아웃 구성 자체는 사람들에게 익숙할 수 있는 구성을 선택했다. 또한 '적당히' 손그림 느낌을 살린 방법으로는 레이아웃 테두리의 선을 거칠게 표현하고 강조해야할 박스는 거친 종이 질감을 표현하고, 그 외에 강조하지 않아도 되는 부분은 opacity를 넣음으로서 '적당히' 살리는 데에 매우 큰 성공을 했다고 생각한다.

 다만 완전히 손그림 느낌의 UI로 대체하기에는 매우 어려웠는데 이 때문에 또 새로운 원칙을 하나 세웠다.

플레이어블 캐릭터로서 마주하는 것이 아닌, 유저가 직접 마주하는 UI는 조금 더 현대적이어도 되겠다!

 경고 Toast와 같이 유저에게 직접 말을 걸고 정보를 제공하는 것까지 동화적으로 연출하면 전달성이 떨어진다고 판단했기 때문이다. 때문에 맨처음 HUD 화면처럼 유저에게 직접 노출되는 정보는 보다 현대적인 UI를 선택했다.

 

3️⃣ 패드 대응을 고려할 것.

 나는 사실 강경 키마 유저지만 비교적 최근에 패드를 구입하여 여러 게임을 플레이해보며 패드가 재밌구나...! 하고 깨달은 적이 있었다. 그리고 강경 패드 유저 같은 경우엔, 패드 대응을 하면 패드로 플레이한다는 것을 알게 되어 우리 게임도 패드 대응을 해줘야겠다는 생각을 하게 되었다.

 그 고민이 가장 많이 녹여져있는 것이 바로 이 화면들이 아닐까 싶다. 키보드로 편리하게 이동할 수 있으면서도, 패드를 고려햇을 때 편하게 조이스틱이나 버튼으로 이동할 수 있음을 고려하며 화면을 짜다보니 머리가 정말 많이 아팠다. 마우스는 편하게 클릭하거나 호버 했을 때 정보가 드러나지만 조이스틱 같은 경우엔 호버, 스크롤과 같은 개념은 없다보니 하나하나 선택해야 한다. 때문에 패드로 게임을 즐겨하는 친구에게도 이 화면을 보여주며 많은 조언도 구하고 내가 직접 패드로 플레이하는 상상을 하며 개선한 점이 많았다.

 덕분에 내 생각으론, 패드로 플레이 했을 때 큰 불편함이 없을 거라 생각된다. 물론 직접 플레이를 해봐야 알겠지만!

 

4️⃣ 키보드 캡핑을 고려할 것.

 지난 14일에 인프챌 3기 첫 수업?을 다녀오며 어떤 피드백을 받을까 짧은 순간 고민하여 내놓은 것은 아래와 같다.

1. 픽셀 아트와 일반 일러스트 / UIUX가 잘 어우러지는지?
2. 전투 UX가 튜토리얼 없이도 이해하기 쉬운가?

 아직 전투 시스템은 구현되지 않은 것도 많았고 실제로 고쳐지지 않은 버그도 많았기 때문에 전투 시스템에 대한 것보단 UI, UX 위주의 피드백을 받기로 했다.

 처음에 피드백을 받기 위해 우리가 구현해갔던 전투 시스템이다. 이땐 급해서 UIUX 디자인도 임시로 구성한 뒤에 제출했기 때문에 여러가지로 부족한 점이 많았지만 그래도 제법 많은 피드백을 받았다.

• 캐릭터의 좌에서 우로 이동하므로 전투도 캐릭터가 좌측에 있었으면 좋겠다.
• 카드가 우측 하단이 아닌 중앙에 있으면 더 가독성이 좋을 것 같다.
• End Turn 버튼은 삭제하지 않고 유지했으면 좋겠다.
• 좌측 하단 버튼이 무엇을 의미하는지 전혀 모르겠다. (심지어 이땐 기능 구현도 안 되어있어서 누르면 버그 났다.)
• 카드에 티어가 있음을 유저가 인식하지 못 했다.
• 몬스터 머리 위에 있는 것이 무엇을 의미하는지 모르겠다.
• 이동은 키보드, 전투는 마우스로만 진행해서 불편하다. 키보드 맵핑을 더 적극적으로 해주었으면 좋겠다.
• 튜토리얼 없이도 UX는 직관적으로 알 수 있었다.

 그 외에도 기획과 아트 쪽에서도 많은 피드백을 받았지만 오늘은 UIUX에 대해서 포스팅하고 있으므로 이 부분에서만 다뤄보겠다.

 

 늘 게임을 만들다보면 내가 하고 있는 것이 유저에게도 통할까? 라는 생각을 하고는 있지만 만든 당사자 입장에선 당연하게 인식되는 부분이 유저에겐 와닿지 않는다는 걸 다시 한 번 깨달은 날이었다. 아직 구현하지 못 한 부분, 그리고 미처 놓쳤던 부분까지 모두 피드백을 받아 당장 급하게 개발해야할 것이 무엇인지 또 알 수 있었다.

 덕분에 미뤄두었던 전투 UIUX를 빠르게 개선했다. 우선 임시로 개발해두었던 UI는 톤앤매너를 맞추되 일반적으로 유저가 바로 인식할 수 있도록 바꾸었다. 좌측 상단에 길게 배치되었던 전투 순서도 우측 상단으로 깔끔하게 이동 시키고 카드는 중앙 배치로 두었으며 좌측 하단의 아이콘들은 상징적인 매커니즘 '봉합'을 제외하고는 모두 텍스트 버튼으로 바꾸었다. 또한 마우스 없이도 플레이를 편하게 할 수 있도록 많은 고려를 하며 UX를 짜보았지만... 결과적으로 키보드 마우스 유저라면 마우스를 완전히 배제할 수 없다는 것을 또 깨닫게 된 것 같다.

 알아보기 힘들다고 했던 아이콘들도 좀 더 유저가 직관적으로 알아볼 수 있고 채도를 높여 조그맣게 들어가도 한 눈에 알아볼 수 있도록 디자인해보았다.

 그리고 키맵핑 UX를 디자인하며 고통스러워하는 나와 키맵핑을 개발하는 루시의 절규다. ... 진짜 너무 어렵다.

 이제 전투 진행 UX를 짜면 된다...^^ 힘을 내보자!

 

5️⃣ '차가운 북유럽 설원'의 세계관을 녹여낼 것.

 우리 게임의 상징적인 요소가 무엇일까? 북유럽 지방을 모티프로 따왔다보니, 해당 전통 무늬를 녹여내는 것이 어떨까? 하는 결론이 나왔다. 덕분에 이렇게 우리 UI 속에서 룬 문자와 노르딕, 바이킹 패턴을 많이 차용했다.

 하지만 우리가 완전히 북유럽 신화, 바이킹이 모티프는 아니었기 때문에 이를 우리 세계관만으로 해석하는 것이 또 좀 어려웠었다. 결과적으로는 상당히 예쁘게 나온 것 같아서 매우 마음에 든다.

 더 많은 패턴과 숨겨진 요소들도 있지만 이는 스포일러가 될 수도 있으므로 나중에 찾아주는 유저가 있기를 살며시 기대해본다...!