안녕하세요.
딩딩입니다.
이번 포스팅은 UX/UI의 개념과 컴포넌트 명칭에 대한 내용을 포스팅해보려고 합니다.
이슈등을 리포팅할 때,
그냥 화면에 뭐가 떴다? 등의 애매한 언급은 좋지 못하므로, 특정 컴포넌트 명칭을 정확하게 말해주면 더 빠른 전달이 가능합니다~!
UX/UI란?
사용자 경험(UX)
사용자 경험(User Experience, UX)은 사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족을 의미합니다.
UX 디자인이란 사용자에게 만족스러운 경험을 제공하는 UI를 디자인 하는 것이며, 사용자 중심적으로 설계되어 사용자가 만족할 수 있게 디자인하는 것입니다.
Ex) 모바일 게임의 좌하단의 조이스틱, 우측의 스킬 슬롯이 있는 이유 :
사용자가 왼손으로 조이스틱 조작하고 오른손으로 스킬을 자주 사용하므로 대부분 이와 같은 형태로 배치됨(사용자의 편의성을 위함)
즉 왜 해당 UI들이 그 위치에 배치가 되었는지에 대한 개념(유저 편의성에 대한)
유저 인터페이스 (UI)
UI는 사용자가 제품/서비스와 상호작용할 수 있도록 만들어진 시각적인 매개체입니다.
레이아웃 / 폰트 / 색상 / 이미지와 같이 사용자가 마주하게 될 시각적인 디자인을 말합니다.
또한 특정 이벤트(터치, 슬라이드 등)에 반응하여 사용자가 게임의 일부 측면 을 제어 할 수 있도록 하는것이 UI입니다. (버튼, 팝업등)
추가로 Windows와 같은 아이콘과 마우스를 통한 작업이 가능한 컴퓨터 인터페이스를 ‘그래픽 유저 인터페이스(Graphic User Interface, GUI)’라고 합니다. GUI는 약간 포괄적인 의미로 화면 내 사용자에게 표시되는 모든 것을 말합니다.
Ex) 팝업, 화면에 나타나는 아이콘, 화면에 하단에 배치된 체력 게이지, 아이템 슬롯
아래의 스크린샷 내 보이는 것 모두가 UI입니다.
[UI 예시]
허드 (HUD)
허드 (Head-up Display) 앞글자를 따서 HUD, 편의상 허드라고 합니다.
사용자가 시선을 이동시키지 않은 채 원하는 정보를 인식할 수 있는 것을 말하는데, 정보만 표시하며 클릭, 드래그, 닫기 등을 할 수 없습니다.
화면(고개)을 아래위로 움직이지 않고 바로 눈앞에서 확인 가능한 것들을 HUD라고 합니다.
(HUD 단어의 유래는 전투기 조종사가 하단의 계기판이나 대시보드등을 내려다보지 않고 바로 정면 혹은 캐노피 상단에서 정보를 확인할 수 있도록 해서 헤드업 디스플레이라고도 합니다.)
Ex) 뷰포트 내 캐릭터 위 체력 게이지바, 타격 시 노출되는 피해량 수치, 캐릭터 선택되었다는 장판 형태, 핫타임/버프가 적용되었을때 아이콘 등
[HUD 예시]
UI 컴포넌트
게임에서 유저가 상호작용을 할 수 있는 것들은 UI컴포넌트라고 합니다. 이러한 UI 컴포넌트는 사용 형태에 따라 크게 3가지로 구분됩니다.
(더 많은 컴포넌트들도 있지만! 대표적으로) 게임에서 주로쓰는 컴포넌트는 파란색으로 표시하였습니다.
1. 탐색 컴포넌트
2. 입력 컴포넌트
3. 정보 컴포넌트
탐색 UI 컴포넌트
메뉴 (Menu)
- 게임 내 흔하게 볼 수 있는 UI중 하나입니다. 선택 시 해당 메뉴에 포함된 세부 내역이 나타납니다.
- 일반적인 메뉴 외에도 하나의 메뉴를 누르면 세부 정보가 화면 전체로 펼쳐지는 메뉴들은 오버플로우 메뉴, 햄버거 메뉴라는 형태로도 부릅니다.
[오버플로우 메뉴]
탭 (Tab)
- 게임 내 UI중 가장 흔하게 볼 수 있으며(도감류), 상단 탭, 좌측 탭 형태로 가장 많이 보입니다. (간혹 우측, 하단 탭의 경우도 있습니다.)
[탭]
리스트 (List)
- 흔히 볼 수 있는 리스트 형식의 UI입니다. 상하, 좌우로 리스트 슬라이드가 가능합니다.
[리스트]
카드 (Card)
- 이미지와 텍스트로 이루어진 UI형태입니다.
[카드]
갤러리 (Gallery)
- 뉴스, 맛집, 사진과 같은 콘텐츠를 실시간으로 게시하고 이를 바둑판 형식으로 이미지가 나열된 형태로 보여주는 UI입니다.
(핀터테스트 - 그리드 형태의 갤러리)
[그리드형 갤러리]
캐로셀 (Carouel)
- 캐러셀이라고도 하며, 주로 게임 패키지 및 이벤트 배너에서 주로 볼 수 있습니다.
(게임에서는 보통 롤링배너라고 합니다.)
입력 UI 컴포넌트
버튼
- 버튼입니다. 터치 혹은 클릭을 통해서 인터렉션하는 기본적인 UI입니다.
텍스트 박스, 입력필드, 인풋박스(Textbox, Input field, Input box)
- 사용자가 키보드를 이용해서 직접 텍스트를 입력할 수 있는 UI입니다.
드롭다운박스(드롭다운리스트)(Drop-Down List)
- 항목 중 선택하는 방식의 UI입니다.
콤보박스 (Combo Box)
- 드롭다운 리스트와 입력 필드 기능을 동시에 수행하는 UI 입니다.
라디오 버튼(Radio Button)
- 다수의 선택 항목 중에 1개만 선택하기 위한 UI
체크박스(Check Box)
- 다수의 선택 항목 중에 다수의 항목을 선택하기 위한 UI
토글버튼(Toggle Button, Switch)
- On/Off상태를 전환하는 상태를 설정할때 사용하는 UI, 토글 또는 스위치라고도 부릅니다.
툴바, 도구모음(Toolbar)
- 다양한 버튼과 아이콘을 묶어놓은 UI입니다. 게임에서보단 엑셀과 같은 프로그램에서 주로 볼 수 있습니다.
스피너(Spinner)
- 대표적인 숫자입력 UI, 편집 필드 외에 옆의 위아래 버튼으로 수치 값 변경 가능한 것이 특징
슬라이더(Slider)
- 좌우, 상하로 슬라이드를 할 수 있는 UI입니다.
피커(Picker)
- 색상 선택하는 컬러피커와 달력 선택을 하는 데이트 피커가 있습니다.
(색상 피커의 경우 캐릭터 생성화면에서 주로 볼 수 있습니다.)
정보 UI 컴포넌트
라벨(텍스트) (Label, Text)
- 화면 내 텍스트를 표현합니다.
헤더
- 화면의 상단에 위치해서 특정 정보를 담고 보여주는 경우가 많습니다.
ex) 재화헤더, 유저정보헤더(레벨, 닉네임 정보, 페이지 정보) 등
프로그레스바 (Progress Bar)
- 콘텐츠 로딩 및 지연 등의 상태를 시각적으로 알려주기 위한 UI입니다.
팝업, popup 또는 Dialog 대화상자
- 팝업창은 팝(pop)하고 튀어나오는(up) 표시방법을 말합니다.
새창을 표시하기 위해 기존페이지를 전환하는 방식 아닌, 새로운 창을 하나 더 추가시키는 기능이라 할 수 있다.
또는 사용자의 지시사항이나 결정을 묻기위한 사용자의 행동을 잠시 멈추게 하는 창을 말합니다.
툴팁
- 설명 툴팁 등이며 터치를 통해서 설명 말풍선을 켜고 끌 수 있는 형태입니다.
네비게이터
- 레드닷, 빨간콩등으로 부르는 부분입니다. 무엇인가 갱신되었을때, 유저에게 알리기 위한 UI입니다.
플로팅 메시지(플로팅 알람, 토스트메시지)
- 화면에서 시스템 메시지 또는 알림으로 많이 보이는 부분입니다.
외에도 더 많은 종류의 UI컴포넌트가 있습니다.
또한 복합적으로 구성된 것들도 있고 웬만한 내용들은 위의 부분에서 체크가능하긴합니다.
그리고 리포팅 시 이슈 부분을 체크한 스크린샷을 포함하는게 제일 정확합니다! :)
약간의 융통성이 있는데,
팀, 프로젝트마다 컴포넌트를 공통적으로 부르는 명칭이 있을 수 있습니다.
그런 경우에는 해당 용어에 맞춰서 언급해 주는것이 제일 좋습니다.
'[QA지식정보] > QA 지식' 카테고리의 다른 글
| [지식/경험] 앱 스토어 프로세스와 IPA빌드 종류 (0) | 2022.03.03 |
|---|---|
| [지식/경험] 게임 구조 (0) | 2022.03.03 |
| [지식/경험] QA의 보안 등급 (0) | 2022.03.02 |
| [지식/경험] Test Case 작성 방법 (0) | 2022.03.02 |
| [지식/경험] 성공 테스트와 실패 테스트 (0) | 2022.03.02 |