brunch

게임 UI 스터디 : 워해머40k - 던 오브워 2

UI 디자이너가 바라보는 게임 UI 이야기

by 리플러스



스타크래프트보다 오래된 고전 전략시뮬레이션의 명작. 워해머 40k 시리즈. 그러나 UI와 편집 디자인은 끔찍한 작품. 워해머 40k - Dawn of war 2 (dow 2) 카오스 라이징 의 게임 UI와 게임 시스템, 컨텐츠별 연출이나, 그 내용을 부분을 분석한 글





소개 영상

https://www.youtube.com/watch?v=FSAXbd-vhDE

끊임없이 전쟁을 벌이는 여러 종족들간의 우주전쟁. SF적 배경을 지녔지만, 판타지 소설을 읽는 것 같은 이야기 흐름의 전략 시뮬레이션. 세계관을 모두 이해하려고하면 복잡하니, 그냥 SF 판타지 오페라 ~ 같은 거라고 생각하면 될 것 같다.







2019-02-15_111509.png?type=w966
2019-02-15_111517.png?type=w966

dow2 메인 캠페인 이후, 신규로 나온 확장팩이 카오스 라이징.인데. 말 그대로 카오스.라는 혼돈의 종족이 등장하기 위한 이야기라고 보면 될듯.






2019-02-15_112335.png?type=w966
2019-02-15_112751.png?type=w966


시작화면


중심부에 모아둔 애매한 UI 배치와, 기괴할 정도로 흩뿌려진 버튼들이 인상적이다. 심지어 멀티플레이어는 펼쳐지는 형식이었다. 초록색 버튼이 기본색상에 노란색 하이라이트... 심지어 하이라이트된 텍스트가 노란색이다.





2019-02-15_115319.png?type=w966

싱글 미션 선택시 - 미션팩을 선택해야하는데... 배경화면 변화없이 버튼만 등장한다. 게다가 기존의 메뉴가 갑자기 사라져버린다. 왜 백버튼이 좌측 하단에 생기는지도 미지수.








2019-02-15_115322.png?type=w966
2019-02-15_115328.png?type=w966


캠페인 프로필 선택


위계질서가 정말 엉망인 편집디자인. 들쭉날쭉한 라인도 거슬리는데. 프로필을 선택하면 더욱더 들쭉날쭉함이 심해진다. 심지어 개별 정보에 써있는 내용은 - 미션 진행 위치를 표기하는게 아니라. 캐릭터의 레벨을 중심으로 표기하기 때문에. 내가 어디쯤에서 게임을 끝냈었는지가 확인이 안된다.





2019-02-15_115721.png?type=w966
2019-02-15_115736.png?type=w966


캠페인 프로필 삭제 / 신규 캠페인 진행


총 네가지 난이도를 제공하는데, 2~3단계까지는 할만하다. 4단계는 거의 사기적인 열세를 극복해야하는 수준이다.







2019-02-23_000650.png?type=w966


2019-02-15_115405.png?type=w966
2019-02-23_005133.png?type=w966


싱글미션 로비 / 영역 호버시 정보팝업


지도 상에 있는 아이콘에 마우스를 가져다대면 추가 팝업이 등장하고. 클릭시 개별 브리핑 팝업으로 연결되는 방식.







2019-02-23_000658.png?type=w966
2019-02-23_005135.png?type=w966


개별 미션 브리핑


해당 행성 / 환경 정보 / 미션 정보 / 미션 보상 등을 표기해준다. 이렇게 복잡한 화면이었을거면 차라리 전체화면으로 전환해서 다른 페이지에 보여주는게 낫지않았을까싶다.







2019-02-15_115413.png?type=w966


팝업형 지역이동


도저히 저렇게 배치를 해둔 이유를 알 수 없는 레이아웃 중 하나. 편집디자이너의 실력개선이 시급해보인다.








2019-02-15_115415.png?type=w966
2019-02-15_115452.png?type=w966

캐릭터 장비창


좌측은 아이템 목록 / 우측은 캐릭터 장비창과 상태. 하단은 스킬트리 표기다. 4:3 비율 지원을 위해 좌측 정렬을 해두었으나. 우측의 화면이 너무 텅 비어보인다는걸 알 수 있다.게다가 위계상으로 좌측 상단의 장비창 메뉴가 - 우측의 캐릭터 목록과 연동되어있다는건. 정말 말도안되는 설계다.








2019-02-15_115418.png?type=w966

아이템 정보 툴팁


배경도 색상이 많은데, 내부에도 색이 너무 다양해서 전혀 대비가 되지 않는다.








2019-02-15_115441.png?type=w966

파티 선택


캐릭터들을 끌어다가 우측에 집어넣는 형태인데. 굳이 이런 UI를 썼어야하는 이유가 무엇이었을까... dow3에서도 그렇고. 끌어다 넣는 UI 참 좋아하는듯.






2019-02-23_005119.png?type=w966


캠페인 랭크


현재까지 진행해온 게임 내용에 대한 평가표기인데. 사실 '저 화면이 있는줄도 모르는' 사람이 더 많다. 위계상으로 버튼처럼 보이지도않는 곳에 위치되어있기 때문에. 눈여겨보지않으면 그냥 넘어가게되는 화면.






2019-02-15_115506.png?type=w966


인덱스 (정보 사전)


게임에 연관된 내용들을 정리해두긴 했는데. 시각적으로 정리된게 거의 없다시피해서 아무도 안읽는 화면. 차라리 게임 속에서 직접 배우는게 더 낫다.







2019-02-15_115504.png?type=w966

미션 메뉴


인게임 - 미션 내에서는 세이브가 불가능하고, 브리핑 화면에서만 세이브가 가능한 기적의 구조. 왜 이렇게 불편하게 게임을 만들어놨는지 잘 이해가 안간다.






2019-02-23_000700.png?type=w966
2019-02-23_005139.png?type=w966


미션 로딩창 : 미션목표 / 툴팁


개별 미션마다 전략적으로 파악 / 해결해야하는 내용들이 달라진다. 그래서 해당 내용들을 표기해두는 화면이기도하다. 초심자들에게는 생각보다 너무 알아야할게 많아서, 복잡하다고 느껴질만하다. 게다가 배경 자체가 밝은 톤인 경우는 많지 않으나, 우측 시안의 경우는 - 밝은 배경 때문에 하얀 텍스트가 제대로 보이질 않는다.





2019-02-23_011704.png?type=w966
2019-02-23_013151.png?type=w966
2019-02-23_021909.png?type=w966
2019-02-23_023549.png?type=w966


미션 로딩창 : 인물표기


개별 미션마다 여러 인물들에 대한 설명과, 이야기가 등장한다. 이런 부분들은 게임 몰입에 나름 도움을 주는 부분이어서 긍정적으로 평가할만 하다.






2019-02-23_003530.png?type=w966
2019-02-23_003539.png?type=w966


인게임 화면 (캐릭터 확대)


THQ의 dow 시리즈나 coh 시리즈 모두 - 개별 캐릭터 모델링 수준이 매우 높은 편이다. 그래서 인게임 컷신을 찍을때나, 영상을 만들때도 이런 인게임 모델링을 그대로 이용하는 경우가 많다.








2019-02-22_235758.png?type=w966
2019-02-23_004725.png?type=w966


보호미션 (좌측, 초록색 체력바) / 보스 미션 (우측, 붉은색 체력바)






2019-02-23_004744.png?type=w966
2019-02-23_030855.png?type=w966
2019-02-23_031027.png?type=w966


보스전 연출


싱글 미션들은 대부분이 생산형 전략시뮬레이션이라기보다 - rpg형 미션이 많다. 그래서 아이템을 파밍하고, 보스를 파괴하거나, 특정 인물을 보호하는 등의 미션들이 많다. 이펙트도 화려하고 강한 적군을 떄려눕히는 재미가 있다.


-


상세한 인게임 UI는 글 끝부분의 - 멀티플레이 쪽에서 다시 다루도록 하겠다.








2019-02-23_004827.png?type=w966


미션 클리어시 1단계 팝업 : 미션명 / 보상 아이템 표기


팝업인데 무려 3단계 구조다. 첫 단계에서는 미션명과 아이템 보상을 보여준다.







2019-02-23_004835.png?type=w966


미션 클리어시 2단계 팝업 : 미션 점수 평가 / 경험치 표기


전체 미션에 대한 - 적군 살상 / 생존률 / 클리어 속도를 점수로 표기해준다.저 황금 코인들은 미션 랭크와 연관된 내용이지만. 해당 메뉴가 어디에있는지도 모르는 사람이 많아서, - 사용자에게 다횣차 플레이나 / 개선을 하도록 자극제가 되어주지 못한다는게 아쉽다.







2019-02-23_004841.png?type=w966

미션 클리어시 3단계 팝업 : 파티원별 경험치 / 스탯 변경 / 개별 아이템 습득 목록


세가지 팝업의 내용들이 분명 다른 정보위계를 갖고있다는건 인정하는데. 굳이 이걸 팝업형태로 이렇게 좁게 보여줄 필요가 있었을까. 예를 들어서 첫 화면에서의 미션 클리어 / 아이템 목록은 이 화면과 합칠 수 있을 것 같다








2019-02-15_115340.png?type=w966
2019-02-15_115350.png?type=w966
2019-02-23_031753.png?type=w966
2019-02-23_031820.png?type=w966


미션팩 모두 클리어시 - 랭크 표기 (상단 : 제국에 충성하는 엔딩 / 카오스에 물들어서 사형당하는 엔딩


게임 내에서 해결해야하는 문제들과 / 미션을 모두 클리어했을 때. 나름대로 랭크 표기를 해준다. 다만 이런 랭크시스템이 사용자에게 크게 영향을 주진 않는편. 분명 UI 요소들도 여럿 들어갔는데, 그렇게 기억에 남는 것들이 많지 않다.







2019-02-15_112519.png?type=w966


멀티 / 스커미시 게임 진행시 UI 화면


그나마 안정성이 높아보이지만. 지도화면 우측의 비어있는 공간은 여전히 문제가 있어보인다. 게다가 버튼 기본 스타일이 점선처럼 중간중간 끊겨있어서, 지저분한 느낌을 많이 받는듯.





2019-02-15_112530.png?type=w966
2019-02-15_112533.png?type=w966
2019-02-15_112535.png?type=w966
2019-02-15_112537.png?type=w966
2019-02-15_112538.png?type=w966


종족 및 영웅 선택 UI 화면


대부분의 컨텐츠들은 좌우 여백을 남기고 중심정렬을 해둔 상태인데. 유닛별 스케일이 달라서 화면이 많이 비어보이는걸 알 수 있다. 또한 UI 요소 배치를 굳이 저렇게 좌우로 둘 필요가 있었을까 싶은게. 종족선택을 상단으로 나누고. 하단 중심부로 UI를 두개로 쪼개어서 - 캐릭터 선택을 할 수 있게 했어도 좋았을 것 같다.







2019-02-15_112612.png?type=w966
2019-02-15_112702.png?type=w966


멀티 및 스커미시 로딩창 (좌) / 일반 로딩창 (우)


중간중간 로딩이 많이 발생하는데. 게임 자체가 무거워서 그런지 - 데이터를 불러오고, 다시 설정하는 모양. 그래서 게임 종료시에 메인 메뉴로 돌아가는 데에도 로딩창이 등장한다.








2019-02-15_112335.png?type=w966
2019-02-15_112632.png?type=w966


시작화면 / 멀티플레이 - 인게임 화면 비례 비교


전체 게임 해상도를 변경하더라도 시작화면의 비례는 변경되지 않는데. 실제 인게임 비례는 변경되는, 이해할 수 없는 스케일링 방식.







2019-02-15_113424.png?type=w966

메인화면 UI





좌측 상단 : 정보성 메시지






좌측 하단 : 미니맵







SE-b2d67c5e-5e9b-4be4-a5d0-aa556c43b0b9.png?type=w966
SE-9a4fa007-4157-423e-8de4-e9153551d128.png?type=w966


상단 : 점령 포인트 상태값


푸른색이 아군. 빨간색이 적군이다. 3개의 전략지점을 점령하면, 적군의 점수가 하락하는데. 상대의 점수가 0이 되면 이기는 방식. 전략지점을 많이 차지할수록, 포인트 감소 속도가 빨라진다.







SE-f1cc3bd1-f8c0-4dd4-939c-d0855ae54900.png?type=w966

우측 상단 : 메뉴 버튼과 영웅 / 일반유닛 목록


상단의 커다란 아이콘이 영웅이고, 일반 유닛은 절반 정도의 크기로 표현된다.






SE-77b05aee-5da5-494f-9980-545660ea5fd5.png?type=w966

우측 하단 : 기본 정보 패널 (미 선택시)


패널 상단에는 기본적으로 전략자원 / 전기자원 / 인구수 제한이 표기된다.








SE-38c258a8-0ea4-4656-aa73-88a8d4dd6596.png?type=w966
SE-0e78b274-14cd-4df0-bb7d-00b846e20467.png?type=w966


정보패널 : 유닛 / 건물 선택시


유닛 선택시에는 업그레이드 가능한 목록과, 캐릭터의 행동조건을 설정할 수 있다.

건물 선택시에는 최대 18칸 내에 - 테크트리 업그레이드 / 생산 가능한 목록들이 등장한다.









우측 하단 : 스킬 패널


전투에따라 쌓이는 수치를 기반으로 전략 스킬을 사용할 수 있게 되어있다.







2019-02-15_114215.png?type=w966

개별 건물이나 유닛에서 - 유닛 , 건물, 생산, 업그레이드 관련 툴팁을 확인할 수 있다.








2019-02-15_115259.png?type=w966


승리 UI



깃발모양 오브젝트가 형태가 불안정해서, 별로 좋아보이진 않는다. 게다가 이미지가 등장하는 방식이 - 단일 이미지를 애니메이팅없이 슬라이드하듯 그대로 등장시키는 바람에. 굉장히 어색하다.





2019-02-15_112640.png?type=w966
2019-02-15_112700.png?type=w966

인게임 메뉴 / 게임 나가기 팝업








2019-02-15_112642.png?type=w966

인게임 옵션


메인 메뉴에서의 옵션에 비해 한정된 옵션만을 제공한다.








2019-02-15_115307.png?type=w966
2019-02-15_115310.png?type=w966
2019-02-15_115311.png?type=w966
2019-02-15_115312.png?type=w966
2019-02-15_115314.png?type=w966


통계화면


통계화면에서도 스케일링은 동작하지 않는다. 이로서 인게임 UI만 해상도에 영향을 받게 해뒀다는걸 알 수 있다. 통계 내에 색상이 여러가지가 쓰이는데. 사실 저 색상들이 무슨 의미가 있는지 명확하지 않아서. 내용을 확인하기가 어렵다.





2019-02-15_112700.png?type=w966
2019-02-15_112452.png?type=w966


인게임에서 등장하는 팝업은 스케일링이 먹히고, 그렇지 않은 화면들은 모두 스케일링 없이 강제 규격을 적용한다. 일관성이 정말 엉망이다.










2019-02-15_112443.png?type=w966
2019-02-15_112445.png?type=w966
2019-02-15_112446.png?type=w966
2019-02-15_112452.png?type=w966


옵션 메뉴


편집디자인은 고만고만하다. 4:3 비율을 위해 팝업모듈 형태로 좌우 여백을 둔 레이아웃이라던가. 버튼 스타일이 굉장히 위계질서가 부족해보인다던가 하는 문제는 - dow3 가 나와서도 별로 해결이 되질 않았다. 전반적으로 dow시리즈는 UI 디자인 부분에서, 배치와 레이아웃 부분에서 신경을 안쓰는것같다.


-


심지어 하이라이트 색상이 시작화면의 노란색이 아니라, 다시 기본색상으로 바뀐듯. 일관성이 엉망이다.







2019-02-15_112452.png?type=w966

해상도를 변경하더라도 UI 스케일링은 불가능하다. 그러나 팝업창을 확인해보니 - 화면 대비 크기에 스케일을 맞춰둔듯 하다. 40인치 이상 화면에서는 다른 버튼들에 비해 - 팝업창 크기가 매우 작게 보이는걸 알 수 있다.









2019-02-15_112504.png?type=w966

크레딧 화면


4:3 화면을 위해 좌측 정렬을 했다는건 알겠는데. 우측의 여백이 너무 심하게 남았다.






2019-02-15_112754.png?type=w966

게임 히스토리


기존에 진행한 게임들의 기록을 리플레이 형식으로 확인할 수 있다.








2019-02-15_112800.png?type=w966
2019-02-15_112810.png?type=w966


유닛 페인터



멀티플레이에서 사용되는 유닛들의 색상 팔레트를 설정할 수 있다. dow 시리즈의 전통같은 것인데. dow 3에서도 거의 동일한 방식을 제공하고있다.







2019-02-15_112810.png?type=w966
2019-02-16_140408.png


dow3와의 비교사례


그나마 dow2에서는 유닛의 영역과 팔레트 영역이 서로 겹치지는 않았는데. dow3에서는 그나마도 유닛과 팔레트 영역이 겹쳐서. 색상 선택이 매우 어려워졌다. (도저히 개선이 되질 않는 레이아웃)







총평


- 전반적인 UI 디자인의 레이아웃이 개판이다. 전체화면을 사용하는게 훨씬 나았을만한 규격들이 많이 보인다

- 4:3 비율을 위해서 좌측 정렬을 한 경우 - 엉망으로 보이는 UI들이 많이 발생한다. 차라리 중앙 정렬을 하지그랬니.

- 화면이 많은데 비해, 기본적인 UI 스타일링이 깔끔하지가 못한데다, 버튼들의 배치나 실루엣이 들쭉날쭉하다.

- 색상이 전반적으로 너무 다양하게 사용되었고. 정보 위계나 중요도가 한눈에 파악되질 않는다. 메뉴구조도 조악하다.

- 게임으로서야 재미가 있는데, 배워야하는 정보가 너무 많아서, 확인도 힘들고, 걸러서 보는게 매우 힘들지경.

- UI 화면은 정말 많다. 그래서 dow 3에 들어와서 화면을 대폭 줄이고, UI에 들어가는 규격들을 단순화한것으로 추정된다.

- 전략시뮬레이션을 좋아하는 사람들이라면, 충분히 인기있을만한 게임이지만. 전반적으로 매니악하다는 느낌이 강하다.

- 워해머 팬들이나, 세계관 덕후들에게야 - 워해머 시리즈. 특히 dow 시리즈는 매우 추천하겠지만. 일반적인 게이머에겐 글쎄...

- 워낙 끔찍한 편집디자인이 눈에띠는 게임이었지만. dow3 에 와서는 크게 개선된 부분들이 많다.





dow 3에 대한 내용은 이곳에서 확인하시라

https://brunch.co.kr/@clay1987/126






이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.

저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!





단톡방 이용안내

https://brunch.co.kr/@clay1987/113


keyword
작가의 이전글Node.js와 비동기 데이터 처리방식