배경
U
사용성
기존 빌드로 팀 테스트를 했는데,
대부분 자기가 어디서
뭘 하고 있는지 몰랐음
I
몰입감
캐릭터는 비용 때문에 인게임 전투에서만 움직이나, 바깥 일반 피쳐에서도 몰입감이 있으면 좋겠음 (전투는 코어 게임플레이)
M
멀티플랫폼
원래 모바일 게임으로 개발하던 것을
PC 게임으로 변경
(더해, 다양한 플랫폼에 대응되면 좋겠음)
인게임과 아웃게임에 대해, 게임마다 다양한 기준을 갖고 있지만
이 프로젝트에서는 아래와 같이 정의
업무 범위
리서치
10가지 사용성 휴리스틱 체크
!
일관성이 없어
직관적 인지가 어려움
!
제한적이고 비효율적인 아웃게임 구조
!
낮은 가독성과
불친절한 시각 표현
자세히 보기
경쟁작 분석
경쟁 게임들을 분석하여 프로젝트가 가야 하는 방향을 탐색
관련된 GDC 세션, Medium 글 같은 오픈소스는 팀에 공유해 공감대 형성
• 프로젝트
• 타겟 유저
• 경쟁작
여러 캐릭터와 자원을 통해 군대를 성장시키고, 거대한 몬스터를 레이드하는 MORPG
콘솔게임을 즐기고 스토리-성장-협동컨텐츠(레이드)를 좋아하는 한국 게이머
2015년 이후 / PC-콘솔 플랫폼 대응 / 스토리-성장-협동 요소 / 글로벌 발매 / + 몰입이 좋은 게임
몬스터 헌터:월드는 규칙적인 UI 모듈을 사용하지 않아 제외
핵심 요약
1
게임 환경 활용 시
몰입감이 좋지만
정보 전달에 한계
2
웹에 가까운 UI는
몰입감이 낮지만
직관적 정보 제공
3
코어 게임 플레이와
관련된 피쳐는
상시 접근
4
PC와 PS4/XBOX는
보통 함께 대응되는
두가지 방식 있음
데스크 리서치
플랫폼 별 특징을 파악하여 PC 환경에 적합한 UI/UX를 만들고자 함
콘솔로 확장 고려, 한 화면에 하나의 컨트롤러 셀렉터를 움직이므로 이동 경로가 예측 가능하도록 디자인
화면 크기
조작
구성
화면
일감 크기
모바일
작음
손가락 제스쳐
스크롤
가로 · 세로
실험적 · 작은 단위
PC
큼
커서
(웹) 그리드
넓은 가로
큰 단위
콘솔
PS4 · XBOX + Switch
다양함
컨트롤러
그리드
넓은 가로
게임에 따라 다름
목표
아웃게임
처음 플레이해도 게임 피쳐들을 이해하기 쉬운 구조
비용 이슈를 수용하고, 편의와 기능성을 우선한 UI/UX
게임 피쳐 분류
• 플레이어의 집중도에 따라
피쳐의 종류와 UI mapping degree를 정의 (Source)
• 이에 맞춰 프로젝트의 피쳐들을 분류하고
3D 오브젝트와의 인터렉션 수준과 화면 레이아웃을 정의
• 유저 플로우를 따라 게임 피쳐를 배치하고
플레이어의 사용 빈도와 패턴을 체크
• 높은 빈도의 게임 피쳐는 유연한 접근성을
의무적이고 지루한 반복 피쳐는 편의성을 고려하여 디자인
3D viewer와 UI의 명확한 분리 및 활용
■ 네비게이션
■ UI
■ 3D 뷰어
■ 키 매핑
핵심 게임플레이인 멀티플레이 전투 관련 게임 피쳐 상시 접근
흐리게 출력되던 3D 모델링 위 UI를 제거하고, 2D space의 UI로 명확한 조작
조작에 따라 3D 모델링이 피드백, 몰입감과 직관적인 정보를 함께 제공
뒤로가기는 항시 표기하여 플레이어가 자신의 액션을 실행/취소 가능, 유연한 추가 키 표기
AS-IS
TO-BE
유연하게 조립 가능한 카드 모듈
• 유사 개념끼리 묶어 동일 위치 출력, 직관적 인지
• 가변 대응할 수 있도록 구성하여 게임 디자인이 바뀌어도 유연하게 재조립
• 게임 디자이너가 자유롭게 조합해 사용
AS-IS
TO-BE
다양한 모듈
모듈 • 캐릭터
모듈 • 팝업
플레이어 예상 루틴에 맞춘 메뉴 구성
• 게임의 모든 피쳐에 대한 멘탈모델을 쉽고 빠르게 형성하고, 효율적으로 플레이
• 일상적으로 수행할 멀티 플레이와 간헐적으로 발생하는 스토리로 분리
• 예상 루틴에서 자주 사용할 멀티 플레이 / 코어 게임 플레이(전투) 관련 편의 기능 제공
AS-IS
시작 페이지 - 전투 준비
TO-BE
시작 페이지 - 메인 화면
시즌 프로모션 영상으로 새 목표를 안내하거나
수집한 캐릭터를 보여주어 성장에 대해 성취감 부여
AS-IS
TO-BE
익숙해진 후 지루해질 의무적인 반복 과업은
한곳에서 빠르게 확인+사용
인게임
높은 몰입감을 위한 간결하고 명료한 HUD
UI 표기를 최소화하고, 중앙을 피해 배치하여 높은 몰입감 제공
사운드 또한 중요한 요소이나 제외
빠른 판단과 순간적인 인지(시스템1)를 고려한 가변 UI
• 필요한 순간에 필요한 정보만 제공 (hp, 스테미나, 인터렉션 등)
• HUD 근처 2d 공격 방향 표시 / 화면 가장자리 공격 방향 표시
• 강한 타격 받았을 시, 피격의 강도 화면 전체 표시
• 체력 N% 이하일 때 / 기절 상태 화면 전체 표시
AS-IS
TO-BE
■ On-off
기호로서 중요한 색상
• 중요한 의미는 색상을 정의하여, 빠르게 색상만 인지해도 인식
• 그 외 UI는 인지 부하를 낮추기 위한 중립적인 흰색
AS-IS
TO-BE
타겟팅
배운 점
• 기반 UX 설계부터 구현까지 첫 PC 언리얼 프로젝트
폴더 구조 - 이름 컨벤션 - 엔진 미지원 기능 등을 알 수 있었음
• 멋있는 세계관, 개성 있는 미술 위 UI를 올릴 수 있는 흔치 않은 기회
• 콘솔/PC 웰메이드 게임을 시간 들여 분석
로컬리제이션, 플렛폼 대응 방식, 스트리밍 고려 등 배울 점이 많았음
Thank you
for
watching
