brunch

You can make anything
by writing

C.S.Lewis

by 리플러스 Mar 12. 2019

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

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




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





소개 영상

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

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








시작화면


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








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


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








신규 플레이어 / 옵션 화면


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









히스토리 (국가별 역사)


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






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










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


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







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





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








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


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









로딩 화면


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








인게임 메뉴


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





세이브 / 로드


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







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








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


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






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







건물 선택시


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








Aoe2와 Aoe3의 비교


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








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








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


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







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






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











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






패배시 UI 연출








총평


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

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

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

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

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

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

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







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

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





단톡방 이용안내

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



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari