게임 UI 스터디 : 컴패니 오브 히어로즈 2
UI 디자이너가 바라보는 게임 UI 이야기
세계 2차대전을 현실적으로 구현한 실시간 전략시뮬레이션의 명작 / 물리엔진이 일품인 COH 시리즈의 두번째 작품. 캠퍼니 오브 히어로즈 2의 게임 UI와 게임 시스템, 컨텐츠별 연출이나, 그 내용을 부분을 분석한 글
소개 영상
https://www.youtube.com/watch?v=iUkbG1Kb1ug
실시간 전략시뮬레이션 게임들 중에는 가장 유명한 게임 타이틀 중 하나. 게임이라 과장된 측면도 없진 않겠지만 역사적 고증도 나름 잘 되어있는 편. 인게임 모델링도 매우 사실적이고, 물리엔진 구현도도 높아서 - 꽤나 현실적인 시뮬레이션을 즐길 수 있다.
시작화면
타 게임들에 비해서 화면이 많이 복잡한 편인데. 그건 컨텐츠 업데이트 배너를 크게 두고, 우측에 트위치 영상까지 연결하는 특이한 구조를 갖고있기 때문이다. 싱글플레이 이후 멀티플레이로의 유입을 강화 / 추가 컨텐츠 판매를 위한 전략으로 보면 될듯.
마치 스타크래프트2가 그러하듯이 - 시작화면의 로비 영역이 추가 컨텐츠를 계속 판매 / 알리는 역할을 한다.
옵션 메뉴
인게임에서와 동일한 메뉴 등장을 위해 팝업 모듈 형식으로 되어있다. 게임플레이 / 그래픽 / 사운드 / 방송 관련 옵션이 있으며. 실시간 방송을 위한 트위치 관련 컨텐츠가 상당히 눈에띤다.
온라인 상점 화면
멀티플레이에서 사용하는 국가별 팩션 / 유닛 스킨 / 국가별 장군 등을 따로 판매한다. 싱글미션팩을 판매하기도하지만, 일정 기간 이후에는 더이상 미션팩을 발매하고있지는 않은 상태.
유닛 스킨 목록 / 구매팝업
그리드도 군더더기없이 깔끔한 편이고, 갤러리 형태로 되어있어서 금방 배울 수 있는 UI가 대부분이다. 목록을 보고, 상세 화면을 확인한 후 - 실제 인게임 재화 / 혹은 캐시로 구매를 할 수 있게 해두는 방식.
미션팩의 경우 유튜브영상을 연결시키고, 구매타입에 따라 스팀 계정과의 연동고 가능하다.
메인 화면에서의 - 국가 선택
크게 소비에트 연방 / 서독 / 미국 / 동독 / 영국 중 하나의 국가를 선택할 수 있다. 선택된 국가에따라 배경의 국기와 배경화면이 달라지고. 해당 국가에 설정된 장군 / 유닛 프리셋등이 자동으로 적용된다.
추가 메뉴창에서 UI들의 투명도를 조절할 수도 있는데. 이 기능이 왜 필요한 것인지는 잘 모르겠지만. UI를 투명화하니 뒷 배경이 정확히 보이게된다. 사실, 이 부분도 눈여겨보지 않으면 - 각국의 국기나, 배경이 어떻게 생겼는지도 확인하기가 힘든 편이다.
상세 프리셋
보유한 장군 / 유닛 추가옵션 / 스킨팩 등을 장착할 수 있다. 기능에는 크게 영향을 주지않고, 타인이나 자신에게 보여지는 유닛 모양이 달라지는 정도라고 생각하면 된다. 다만 장군의 경우는 - 멀티게임 내에서 사용할 수 있는 스킬 / 유닛 / 병과등이 달라지므로. 원하는 장군을 미리 잘 설정해두어야한다.
싱글 : 미션팩
소비에트 연방으로 플레이하는 싱글 미션팩과 / 아르덴 전투를 미군으로 플레이하는 정복전 형식의 미션을 제공한다.
개별미션
미션팩이 쭉 이어지는 하나의 시나리오라면. 개별 미션은 하나의 미션으로 이야기가 끝나는 여러 옴니버스식 미션들이 여럿 모여있는 방식이다. 미션팩에 비해 완성도가 낮거나, 일정 조건을 주고 - 싸우라고 하는 방식이 많다.
온라인 / 멀티플레이
플레이어와의 자동매치 / AI전 / 개별 커스텀 게임 / 공개된 게임에 참여하기 - 총 네가지 방식의 메뉴를 제공한다.
멀티플레이 / 전투 관전
목록형태에서 내용을 선택하면 - 누가 어떤 맵에서 전투를 벌였는지. 총 시간과, 전투 타입은 어땠는지 등을 확인할 수 있다.
리플레이 로딩 / 리플레이 화면
총 4:4까지의 배치를 위해 칸이 비워져있는 모듈 형식이고. 기본적으로 16:9에 최적화된 레이아웃이다. 그나마 최신게임이라 그런지 UI 스케일링도 제공하고, 개별 모듈의 완성도도 높은 편.
리플레이 화면 : 메뉴
리플레이 화면에서는 제한된 메뉴만을 제공하는데. ui 표기를 단순화하기위해 DIM / 잠금 형식으로 표기를 처리했다. 이로서 개별 모듈창이 뜨지않고. 동일한 모듈창을 반복사용하되, 기능으로의 진입만을 막은 형택가 되어있다.
겹치는 팝업 형태의 추가메뉴 / 업적 (메달) 화면
Coh2는 인게임 내에서 미션 내 업적 / 추가 목표를 바로 확인할 수 없는 구조다. 그래서 개별 미션을 깰 때마다 , 어떤 업적들이 있고, 그걸 얻었는지. 를 메인 화면에서 개별로 확인해야한다. 이렇다보니 - 눈여겨서 화면을 살펴보지 않는 플레이어들 중에는 - Coh2에 업적 개념이 있다는걸 모르는 경우가 많다.
스타크래프트2의 경우 모듈 형태로 만들어져- 게임 진행시에 자신이 얻을 수 있는 업적이 무엇이 있는지를 보기좋게 표현했다. 게다가 싱글 미션 메인화면에 - 개별 미션팩마다 업적 달성률을 퍼센티지로 표기해서. 업적을 달성하기 위해 재도전하는 것을 권장하는 형태로 만들어졌다.
멀티 / 스커미시 기준으로 개별 매치에 대한 통계화면
어떤 유닛이 가장 많이 사용되었고, 활약했는지. 그리고 개별 건물과 유닛 생산수 / 킬수 / 손실 수 등의 경기 관련 통계를 상세하게 제공한다. 이런 부분은 시각적인 부분이 좀 아쉽긴 하지만, 스타2에 비해서 훨씬 자세한 정보를 담고있다. 그러나 더 보기에 좋지않은 시각구조를 갖고있다.
COH, 워해머 dow 류 게임에 항상 등장하는 퍼포먼스 테스트 ( 벤치마크 )
THQ라는 게임사가 개발하는 게임 스타일은. 개별 모델링 뿐 아니라. 물리엔진까지 복잡해서. 상당히 많은 자원을 잡아먹게된다. 그래서 일정 수준 이상의 유닛이나, 전투가 동시다발적으로 이뤄지게되면 - 성능 저하를 피하기가 매우 어려워진다. 그런 면에서 '최적의 게임환경'을 제공하기위해 퍼포먼스 테스트를 제공하게되는데. 자동으로 - 이 컴퓨터에서 해당 옵션을 사용했을 경우 - 평균 fps / 최소, 최대 fps값을 표기해준다.
coh 관련 계정 생성 / 연결
게임들 중에서 이렇게 게임 내에서 커뮤니티성이 활발한 / 적극적인 경우도 찾아보기 힘들듯. 업데이트 관련 정보소식을 주기위해 계정을 만들라는 화면이 따로 존재한다. 물론 스팀 커뮤니티와의 연결이 되어있어서 크게 필요는 없겠지만. 트위치 방송의 연결을 기본으로 제공하는 것도 그렇고. 주변 사람들에게 알리고 / 함께 즐길수있게 연결성을 강화해두는 측면은 긍정적으로 보인다.
워크샵 / 설정
스팀의 창작마당을 자체 UI를 통해 재구성해두었다.내부에서 간단하게 설명을 보고 클릭 / 다운로드를 진행할 수 있다. 워크샵에서는 유저들이 만든 개별 스킨이나, 유닛, 설정, 맵, 개별 미션 등을 모두 공유할 수 있다.
싱글 미션 진행 : 난이도 설정 / 로딩창
싱글 미션의 경우 개별 미션에 대한 설명과 그림. 난이도 설정이 상당히 직관적으로 배치되어있다. 로딩창의 경우도 개별 미션에 대한 설명을 로딩시에 진행하고, 로딩 이후에는 미션별 인트로 영상을 통해 - 어떤 공간에서. 어떤 전략을 사용해야할지를 미리 알려준다.
미션별 인트로 영상 / 인게임 컷신
인트로 영상은 유튜브에 올려져있는 영상을 그대로 플레이하는 형식이고, 스킵이 가능하다. 하지만 인게임 컷신은 - 상 / 하단에 레터박스를 치고 - 인게임 오브젝트로 구성된 강제시청을 해야하는 형식. 스킵이 불가능하다.
인게임 컷신을 스킵하려고 메뉴를 누르는 경우. 저장도/ 로딩도 안되고. 오로지 -진행 / 나가기만 가능하다.
상단에 미션 목표가 등장하고, 상황에따라 목소리와 함꼐 텍스트로 캐릭터들의 대화가 이어진다.
메인 화면
메인 화면 : 좌측 상단 - 미션 목표
붉은색 별이 메인 목표이고, 노란색 역삼각형은 추가목표를 표기한다. 해당 목표는 지도 상에서도 동일하게 표현되어서, 직관성을 높였다.
메인 화면 : 우측 상단 - 보유 유닛 (병과 표기)
개별 유닛들이 어떤 상태에 놓여있는지. 경험치는 얼마나 높은지. 체력상태는 어떻고, 장비는 뭘 착용하고있는지를 - 한눈에 보기좋게 표기한다. COH2에서 이런 방식을 참고하여 dow3도 비슷한 형식을 취했으나. coh2만큼의 직관성을 살리지는 못했다.
던오브워 3의 UI 화면. UI 하단에 모든 유닛 목록이 표기되는 Dow3의 형식. 다만 병과부분보다 유닛 초상화가 강조되어서, 직관성이 많이 떨어져보인다.
메인 화면 : 좌측하단 - 전투메시지
메인 화면 : 좌측하단 - 미니맵
메인화면 : 하단 - 자원표기
좌측부터 맨파워 (인력) / 탄환 / 기름 / 그리고 인구제한표기다.
메인 화면 : 우측하단 - 생산 / 명령창
상단의 아이콘들이 기지 종류이고. 해당 기지에서 개별 유닛들을 생산할 수 있다. 유닛을 선택할 경우는 최대 12칸의 명령창 내에 개별 명령 아이콘이 등장한다.
메인화면 : 하단 - 추가업그레이드
하단 유닛 정보 UI 구분
아군 단일 유닛 선택시 : 개별 유닛에 대한 설명이 등장한다
아군 다수 유닛 선택시 : 단순화된 병과 아이콘 / 상태값만이 등장한다.
동맹 단일 유닛 선택시 : 노란색 표기, 개별 유닛에 대한 설명이 등장한다. (적군도 동일)
적군 다수 유닛 선택시 : 빨간색 표기, 단순화된 병과 아이콘 / 상태값만이 등장한다.
최신게임이라 그런지 UI 단위의 UI 스케일링을 제공한다. (폰트크기는 조절 불가능 / 스케일 크기에 대한 단위표기가 없어서 감으로 맞춰야함)
4K / 40인치 이상에 최적화시킨 경우
배율을 줄인 경우
메인 UI의 크기비교 (배율 낮음 / 중간 / 배율 높음)
최대확대시에 개별 유닛들의 얼굴까지 확인할 수 있는 디테일한 모델링. 전반적으로 화면밀도가 높은 편이다.
coh 2(좌) / coh1 (우) 기본 UI 비교
기존에비해 밀도나, 색상이 좀 밝아진 편이지만. 강조가 필요하지않은 부분을 과감히 쳐내고, 전반적으로 회색조가 강해졌다. 그래서 필요한 정보를 확인하기에는 더 편리해진 상태다. 게다가 맵 화면과 UI적 정보표기도 좀더 명확해져서, 환경과 사물을 인식하기에도 좋은편.
총평
- 전작의 장점을 잘 살리면서, 그래픽적으로나, 물리엔진적인 강점 모두 그대로 가져왔다. 명작 반열에 충분히 들만하다.
- UI 디자인적 완성도도 높은 편이고. UI 스케일링에 대응하기 위해 많은 고민을 한 흔적이 느껴진다.
- coh1에 비해 해상도나 밀도가 높아지고, 정보의 정리 방식도 많이 개선되었다.
- 레이아웃이 종종 아쉬운 메뉴들이 존재하긴 하지만. 전반적인 완성도가 높고, 편의성도 좋은편이다.
- 스타크래프트2와 비교했을 때, 업적이나 개별 정보 화면등의 메뉴 연결 플로우가 많이 아쉬운 편
- 유닛 병과와, 상태값을 우측 상단에 모아서 - 압축적으로 표현한 것은 매우 좋은 선택이었다.
- 맵 정보와 땅따먹기 상태구분 등은 이후 워해머 dow 시리즈에도 큰 영향을 주었다.
- coh2 이후에 워해머의 dow3 시리즈가 나와서, 기존보다 더 나은 UI가 나올줄 알았는데. dow3는 coh2에 비해 퇴보한 모습을 보인다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
