게임 UI 스터디 : 리그 오브 레전드
UI 디자이너가 바라보는 게임 UI 이야기
알 사람은 다 아는 PC게임. 리그 오브 레전드. 게임 UI인데도 왜이렇게 정보 정리가 잘 되어있는가를 들여다보니, 웹 UI 문법을 상당수 차용했다는걸 확인할 수 있었다. 게임 UI 디자인과 정보 설계에 있어서 모범이 될만한 사례일듯 하다.
소개영상
https://www.youtube.com/watch?v=BEbPi89HZ0I
기존 클라이언트 화면
- 혼자서 우측으로 배치된 로그인 화면이 눈에 띤다.
- 시즌별로 영상배경이 바뀌는 형태이며, 좌측 상단에 업데이트 진행상황이 등장한다.
크로미움 기반으로 업데이트된 클라이언트 화면
- 변경된 이후에는 좌측에 로그인 화면을 배치해주었다.
- 로그인시 내가 어떤 계정으로 들어왔는지 체크가 가능하게 해뒀다.
설정
- 상단 타이틀에 정보 위계를 알 수 있도록 breadcrumb (빵가루) UI를 사용했다
- 상단에는 타이틀, 좌측에는 메뉴인 구조가 게임 전체에서 동일하게 사용되고있다.
- 슬라이드같은 특이 케이스에서는 마우스로 드래그시 툴팁 형태로 퍼센티지가 따로 표기된다.
선택 가능한 오브젝트 / 버튼 크기를 거의 동일하게 처리했고, 금색 라인처리로 다른 오브젝트들과 구분값을 주었다. 또한 마우스 호버시 살짝 하이라이트 처리해준다.
좌측 메뉴의 아이템들도 구분값이 다섯가지나 된다.
- 서브헤더 (회색) : 선택 불가능함
- 선택 가능한 텍스트 (금색) :
- 선택 가능한 텍스트 + 마우스 호버 (금색)
- 선택된 텍스트 (흰색 + 좌측에 강조처리)
- 선택된 텍스트 + 마우스 호버 (흰색 + 배경 강조 + 좌측 강조처리)
1. 홈 화면 : 여정 탭
홈 상세 : 레벨업 보상 (팝업)
- 선택불가 : 어두운 배경 + 퍼센티지 + 금색 테두리 없애기
- 선택가능 : 살짝 밝은 배경 + 퍼센티지 + 금색 테두리처리
홈 상세 : 일일 플레이 보상 (팝업)
1. 홈 화면 : 개요 탭
1. 홈 화면 : 패치노트 탭
2. 내 정보 : 개요 탭
3. 컬렉션 메뉴 : 챔피언 탭
컬렉션 상세화면
4. 홈화면 : 전략적 팀 전투 탭
5. 홈화면 : 나만의 상점
- 텍스트로 된 중요메뉴들과, 아이콘으로 된 비필수 화면들. 두 가지를 확실하게 나누어두었다.
- 러시아어나 인도어 버전의 경우, 좌우 텍스트 길이가 길어지기 때문에, 우측 메뉴를 아이콘처리한것으로 보인다.
6. 홈화면 : 전리품 상자
7. 홈화면 : 상점 / 검색
상점 상세 페이지들
상점에서의 검색 필터처리 (오름차순 / 내림차순)
메신저 (좌) / 친구추가 (우)
소환사 아이콘 및 테두리 선택
- 선택 가능한 아이템은 대부분 사각형이고, 둥근 셰이프는 대부분 정보성으로 사용되고있다.
홈 : 게임 시작
정보위계의 기준은 현재 선택되어있는 아이템보다. 사용자가 마우스를 올려둔 아이템에 더 중점을 두고있음.
- 선택된 아이콘 (좌측) : 금색 라인 아이콘 + 푸른색 fill 타입
- 마우스 hover된 아이콘 (중간) : 강한 콘트라스트의 라인 아이콘 + 푸른색 fill 타입
- 선택 가능한 아이콘 (우측) : 금색 라인 아이콘 처리
커스텀 게임 로비
- 단순 리스트 처리 / 아이템이 선택되기 전까지는 리스트 모두 강조처리 없음
게임시작 로비 (좌) / 게임 참가여부 팝업화면 (우)
- 동그라미는 정보성 / 각진 형태는 액션성 아이템으로 표기하는 통일성을 지키고있음
챔피언 선택 (좌) / 스킨 선택화면 (우)
- 동그라미는 정보성 / 각진 형태는 액션성 아이템으로 표기하는 통일성을 지키고있음
게임 결과창
- 적군은 빨강, 아군은 파랑, 본인은 노란색으로 강조
기본 게임 화면 / 확대샷 (+ 툴팁 활성화)
스킬 및 버튼 툴팁
- 툴팁 내에 단축키를 제공하여 툴팁을 보지않고도 사용할 수 있게 안내하는 형태
상점 팝업 : 추천 탭
상점 팝업 : 모든 아이템 - 아이콘 보기 / 리스트 보기
인게임 설정
- 기본적인 설계는 홈화면 설정과 동일 (상단 타이틀 + 좌측 메뉴)
- 인게임 오브젝트 대비 강조가 부족할 것으로 판단하여 채도를 추가한 것으로 보임
- 인게임 스타일링은 낮은 명도의 청록색 + 금색이 주된 테마
총평
- 게임임에도 불구하고 일반 웹 UI 문법을 상당히 충실하게 따르고있음
- 색상의 강조와 중요도에 대한 구분을 확실하게 처리함
- 정보성 시각물과, 액션성 아이템의 구분을 shape의 차이로 구분 (원형 / 사각형)
- 버튼 타입은 거의 금색 테두리를 쳐놓은 경우가 많으며, 대부분이 사각형 shape.
- 마우스로 호버한 상태와, 일반, 눌림, 선택불가 처리에 대한 확실한 시각적 힌트 제공
- 게임에 필수적인 정보탭들과 부가적 화면에 대한 정보 위계를 잘 정리해둠
- 정보위계 중요도 : 파란색 fill 타입 (최상) / 금색 라인 타입 (중) / 텍스트 (중하)
- 완벽하진 않더라도, 자체적인 규칙을 만들고 통일성을 꾸준히 지키고있음.
-정보의 우선순위와 시각적 간결함, 스타일링 모두 적절하게 잡았다고 보여짐
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
