인체공학적 모바일 레이아웃 가이드라인
기간
약 2개월
구성원
UX 디자이너 1명 (개인 프로젝트)
사용 툴
피그마, 미로
문제
새 피쳐 디자인에 영향을 주는 공용 레이아웃의 낮은 확장성
상점 리디자인의 문제를 해결하기 위해서는 공용 레이아웃의 낮은 확장성을 먼저 해소해야 했습니다.
또한 공용 레이아웃은 신규 피쳐 디자인에도 영향을 주는데, 이러한 확장성 부족으로 인해 디자인 제약이 있었습니다.
비일관적인 조작과 테크니설 리소스를 발생시키는 비일관적 레이아웃
유사한 기능과 화면임에도 레이아웃이 일관되지 않아, 플레이어의 조작 경험이 일관되 지 않았습니다.
또한 유사 레이아웃이 공용 (유니티) 프리팹으로 통합되어 있지 않아, 수정 시 화면별로 개별 대응이 필요했습니다.
모바일에서 조작이 불편한 레이아웃
상점 피쳐 문제를 분석하던 중, 모바일에서의 조작이 불편한 점을 발견했습니다. 터치 요소 간 거리가 멀거나, 필요한 정보가 숨겨져 있어 매번 터치해야 했습니다.
해결
확장 가능하고 모바일 친화적인 공용 레이아웃 가이드라인을 정의합니다.
문제 발견 & 문제 정의
데스크 리서치 - 모바일 앱 디자인 시 고려해야 하는 인체공학적 특징
경쟁작 벤치마킹
배운 점
✔️ 엄지 영역를 고려해 상호작용 요소는 좌/우 측면에, 시각 요소는 중앙에 배치합니다.
✔️ 상호작용 요소는 대체로 오른쪽 엄지 영역을 우선적 고려해 배치합니다.
✔️ 터치가 필요한 요소는 관련된 요소끼리 서로 인접해 동선을 최소화합니다.
➕ 화면의 시각적 미니멀함은 중요하지만, 필수 정보가 많을 경우 화면이 작아 복잡한 경우가 있었습니다.
해결 #1
레이아웃이
모바일 친화적인지
판단 가능한 시각적 템플릿
데스크 리서치를 바탕으로, 레이아웃이 모바일 친화적인가 판단할 수 있는 시각적 템플릿을 정의했습니다. 이를 통해 다양한 게임의 모바일 사용성 점검, 기존 레이아웃 평가, 신규 레이아웃의 방향성 제시가 가능해졌습니다. 또한 템플릿은 범용적으로 활용 가능해, 모바일 게임뿐 아니라 가로 화면의 일반 앱에도 적용할 수 있습니다.
레인보우 식스 모바일에서는 상점처럼 리디자인이 필요한 피쳐에 실제로 적용해볼 수 있었습니다.
해결 #2
세로 탭을
주 네비게이션으로 활용
양손 엄지 영역을 번갈아 사용하는 가로 탭 대신, 왼손만으로 조작 가능한 세로 탭을 활용합니다. 탭은 게임 메뉴 전반의 주 네비게이션으로서 플레이어의 UI 사용 습관에 밀접하게 연결되어 있습니다.
일관된 위치에 엄지 영역을 고려한 탭을 사용하면 플레이어들은 보다 매끄럽게 게임 전반을 탐색할 수 있습니다. 또한 세로 탭은 스크롤을 활용해 더 많은 하위 메뉴를 추가할 수 있어 확장성 측면에서도 유리합니다.
해결 #3
가장 자주 사용되는
3가지 레이아웃
패턴 정의
상기 시각적 템플릿을 기준으로, 게임 메뉴 전반에서 가장 자주 쓰이는 3 가지 레이아웃 패턴을 모바일 친화적으로 정리했습니다.
-
통합 프리팹을 제작 · 연결해, 개발 및 유지보수 효율 개선
-
모바일 친화적이며 일관된 경험을 제공하도록 레이아웃 개선
다음 단계
모바일 레이아웃 가이드라인은 게임 전반에 영향을 주는 변경이므로, 이해관계자 조율이 필요하며 단기간에 일괄 적용하기 어렵습니다. 따라서 리소스와 우선순위를 고려해 신중하게 단계적으로 진행되어야 합니다.
-
세로 탭을 게임 메뉴 전반에 적용합니다. 대부분의 화면은 이미 업데이트 되었고, 우편함 화면만 남았습니다.
-
유사한 레이아웃 패턴을 가진 화면의 프리팹을 점진적으로 통합합니다.
-
모바일 친화적이며 플레이어에게 일관성있는 경험을 줄 수 있도록 레이아웃을 개선합니다. 특히 오퍼레이터처럼 주요 상호작용까지 뎁스가 깊은 피쳐는, 레이아웃 개선만으로도 네비게이션의 불편함이 개선될 수 있습니다.