brunch

게임 UI 스터디 : 에이지 오브 엠파이어 2 HD

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

by 리플러스




여러 부족국가들이 전쟁을 벌이는 고전 전략 시뮬레이션. 오래된 게임이지만 HD 버전으로 리마스터한 AOE2. Aoe2의 게임 UI와 게임 시스템, 컨텐츠별 연출이나, 그 내용을 부분을 분석한 글





소개 영상

https://www.youtube.com/watch?v=q_MEFt7KrxQ

만들어진지는 상당히 오래된 고전게임이지만, 고해상도 시대에 맞게 리마스터되어 나온 Aoe2








2019-02-19_163237.png?type=w966

시작화면


옛날게임이라 그런건지. UI들의 배치가 굉장히 난잡하고, 정신없다. 가장 큰 이유는 비례와 크기의 차이일텐데. 투시 개념이 적용되어서 각 버튼의 비례가 제각각인게 가장 큰 이유일 거다. 거리의 간판들을 모티브로 만들어진듯한데. 그렇게 효과적이진 않은듯.







2019-02-19_163306.png?type=w966
2019-02-19_163309.png?type=w966
2019-02-19_163312.png?type=w966
2019-02-19_163315.png?type=w966


맵 에디터 메뉴 / 목록 / 맵 에디터 내 화면


버튼 스타일은 기본적으로 사각형을 벗어나기가 힘든 편. 특수한 경우를 제외하고는 밝은 갈색과, 어두운 갈색의 UI 스타일을 유지하고있는데. 이 역시도 가시성이 많이 떨어지는 편이다. 스타일적으로 볼품없는건 덤.







2019-02-19_163243.png?type=w966
2019-02-19_163246.png?type=w966


신규 플레이어 / 옵션 화면


어두운 고동색 바탕에 파란색이 강조점으로 쓰인 UI다. Aoe3에서 했던 바보같은 스타일링을 비교하면 오히려 과거 작품이 더 낫다고 여겨질 정도. 옵션화면에서는 옛날게임 답게 별다른 내용을 지원하진 않는다. 프로필과 사운드 크기 정도를 지원하며, UI 스케일링은 지원하지 않는다.








2019-02-19_163259.png?type=w966
2019-02-19_163301.png?type=w966


히스토리 (국가별 역사)


역사책의 느낌을 살리려한 것으로 보여지는 UI지만, 텍스트에 집중하기가 힘들다. 어두운 갈색 배경에 어두운 갈색 글씨라서, 대비가 확실하게 되지않는 탓이 크다. 게다가 4:3 비율에 맞추기 위해 레이아웃 배치가 중심정렬되어있다.






2019-02-19_163329.png?type=w966

싱글 플레이 - 선택화면 (1 뎁스)









2019-02-19_163343.png?type=w966
2019-02-19_163338.png?type=w966


캠페인 - 국가 선택 화면 (2뎁스)


개별 시각 아이콘을 부분을 누르면 개별 미션으로 진입할 수 있다. 다만 '더블클릭'을 해야한다. 다른 UI 화면들에서는 확인 / 취소 버튼 형식을 지원하는데. 왜 여기에서만 더블클릭을 하는걸까?







2019-02-19_163322.png?type=w966
2019-02-19_163354.png?type=w966

종족별 세부 시나리오 선택 (3 뎁스)





2019-02-19_163356.png?type=w966

미션별 난이도 설정 (4 뎁스)







2019-02-19_163334.png?type=w966


일반 게임 (스탠다드 / 스커미시)


맵과 상대를 설정해놓고 원하는 방식으로 게임 진행이 가능한 타입. 4:3 화면을 위해 중심정렬이되어있는게 보인다. 사실 하단의 애매하게 튀어나온 버튼 영역들이 많이 신경쓰인다. 굳이 저렇게 했어야했나 싶다.








2019-02-19_163400.png?type=w966


로딩 화면


양피지로 퉁치는게 너무 많다. 이 역시도 창 속에 창. 틀 속에 틀을 만들어놓은 것인데. 가장 큰 이유는 4:3 / 16:9 화면을 모두 지원해야한다는 점 때문인 것으로 보인다. 다만 그렇다 하더라도 저 의미없는 텍스트와 삽화그림의 위치는 - 전반적인 편집 디자인 수준을 가늠할 수 있게 만든다.








2019-02-19_163712.png?type=w966

인게임 메뉴


다른 메뉴들에서는 세로 메뉴를 지원해놓고서 다시 여기에서는 왜 하단 탭(?) 일관성 부분에서 많은 부분이 의문이 든다.





2019-02-19_163423.png?type=w966

세이브 / 로드


차라리 이 양피지 규격을 다른곳에서도 동일하게 사용하는게 낫지않았을까 싶다. 다만 그렇다해도 너무 갈색 계통이라 - 보기에 좋은 상태는 아니다. 파란색 강조색은 어디로 사라졌는지, 보이지도 않는다.







지도 UI. 큰 화면에서 볼 경우 - 개별 유닛들이나 건물들의 크기가 너무 작아서 거의 보이질 않는다.







2019-02-19_163652.png?type=w966
2019-02-19_163649.png?type=w966


단일 유닛 선택시 / 다수 유닛 선택시


창은 넓어도 25명 정도의 유닛을 선택하고나면, 더이상 동시 선택이 불가능하다. 이건 해상도는 늘어났어도, 기존 시스템을 수정하지 않은 탓인 것으로 보인다.





image.png?type=w966
image.png?type=w966


영웅 / 비영웅 유닛을 찾기가 어려운 편이다. 게다가 병종이 여러가지 겹쳤을 때는 더욱더 내가 원하는 유닛을 일일히 선택하기가 매우 어렵다. 아이콘을 따로 만들지 않고 - 인게임 스크린샷을 그대로 쓴 것 때문에 - 인식이 어려운 문제가 생긴다.







2019-02-19_164216.png?type=w966

건물 선택시


좌측 하단 화면을 보면. Aoe3에서도 문제가 되었던 - '이 빠진 아이콘들'의 문제가 동일하게 발생하고 있다.







image.png?type=w966
2019-02-16_122010.png?type=w966


Aoe2와 Aoe3의 비교


Aoe2 에서는 최대 15개까지 아이콘 표기가 가능하다. Aoe3에서도 - 실제 채워질 수 있는 아이콘 바탕은 18개지만. 그중에 일부만 사용이 가능하기 떄문에, 항상 텅 빈 화면을 볼 수 밖에 없다는게 문제가 되었었다.








2019-02-19_164149.png?type=w966
2019-02-19_163844.png?type=w966

단일 생산 / 다수 예약 생산시







2019-02-19_164632.png?type=w966
2019-02-19_164914.png?type=w966


다수 예약 생산 : 밀도 낮음(좌) / 밀도 높음 (우)


많은 유닛을 동시에 생산할수록 유닛들의 목록 간격이 좁아지는 방식. 이 역시도 기존 HD 리마스터 전의 규격에 맞추느라 - 좌우의 넓은 공간을 제대로 활용하지 못하고 있다.







2019-02-16_125020.png

Aoe 3의 다수 예약생산방식은 - 기본 UI창 상단에 또다른 창이 생겨나는 방식으로 변경되었다. 최대 생산 인원수도 칸에 맞게 제한이 되었다.





image.png?type=w966
image.png?type=w966


aoe2는 다수 생산시 간격이 좁아질 뿐. 개별의 선택 취소가 여전히 가능하다.










image.png?type=w966
image.png?type=w966
image.png?type=w966


아군 유닛 / 적군 건물 / 중립 자원의 표기방식






2019-02-19_165446.png?type=w966

패배시 UI 연출








총평


- HD로 리마스터링 된건 좋았지만, 화면과 그래픽 요소만 커졌을 뿐. 시스템은 거의 그대로다.

- 상대적인 최근작인 Aoe3가 Aoe2보다 퇴보한 UI를 갖고있다는게 믿어지질 않는다.

- 개별 유닛을 선택하고, 컨트롤하기엔 화면 비례가 너무 작다고 느껴지는 편

- 모든게 갈색 바탕인 UI 요소 특성상, 텍스트가 잘 보이질 않는다는 단점이 존재한다.

- 옛날게임인건 어쩔 수는 없다지만, 개별 화면들의 레이아웃, 배치 부분이 끔찍하게 느껴질 경우가 많다.

- 미니맵이 너무 작아서 거의 제기능을 못한다는게 가장 자주 체감되는 문제다.

- 최대 표기가능한 아이콘들과, 최소표기 가능한 UI간의 간극을 좁히기 위한 방법을 좀 더 고민했어야헀다.







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

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





단톡방 이용안내

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



keyword
작가의 이전글게임 UI 스터디 : 다키스트 던전