[데일리미션 1-1] UXUI 용어 정리

📖 UX, UI 디자인 관련 용어들을 검색하고, 정리하기.

 

 

UX

[사용자 경험, User experience의 약자]

사용자가 어떤 시스템, 제품을 사용하면서 느낀 총체적 경험. 기능과 절차상의 만족 뿐만 아닌 참여, 사용, 관찰, 상호 교감 속 가치 있는 경험

 

 

UI

[사용자 인터페이스, User Interface의 약자]

사용자와 서비스의 웹과 모바일 사이에서 의사소통을 할 수 있도록 만들어진 물리적 가상적 매개체

 

 

Interface

[인터페이스]

사물 간 또는 사물과 인간 간의 의사소통이 가능하도록 일시적 혹은 영속적인 접근을 목적으로 만들어진 물리적 가상적 매개체

 

 

GUI

[그래픽 사용자 인터페이스, Graphic User Interface]

버튼이나 메뉴, 창 등의 그래픽요소를 사용해서 사용자가 소프트웨어와 상호작용하는 방식

 

 

Usability

[사용성]

쌍방향 제품인 interactive product의 이용과정에서 사용자가 원하는 목적을 제대로 달성하였는지, 목적을 가능한 편리하게 수행하였는지, 전반적인 사용만족도는 어떠한지와 같은 요소들로 측정될 수 있는 복합적인 이용편의성을 의미한다.

 

 

User journey map

[사용자 여정 지도]

사용자의 서비스 또는 제품 사용과정을 지도화하여, 사용자의 행동감정 등을 시간 흐름에 따라 가시화한 지도 또는 그래프를 말한다.

* 테스크 플로우보다 저니맵이 더 큰 개념

 

 

Navigation

[내비게이션]

하이퍼링크를 따라 웹 공간의 정보를 요청하고 받아오는 웹 브라우징 행위를 의미. 우리가 일상적으로 말하는 자동차 내비게이션처럼 우리가 찾고 싶은 정보를 알려주는 이정표 역할을 한다.

 

 

Utility nevigation

[유틸리티 메뉴]

연락처, 도구, 저장, 로그인, 공유, 보기변경, 인쇄와 같은 보조 작업 및 도구로 구성된 메뉴. 사용자들이 자주 사용하는 메뉴바이기 때문에 첫 화면에서 한 번에 이동할 수 있는 편리한 메뉴바와 같다.

 

 

Accordion

[아코디언]

제한된 공간에 정보를 표현하고, 사용자가 원하는 정보만 선택적으로 볼 수 있게 접을 수 있는 내용 패널. 숨겨져 있다가 아래로 펼쳐지는 메뉴라고 생각하자.

 

 

Label

[레이블]

입력폼을 구성하는 다양한 입력필드를 식별하기 위해 사용하는 명칭

 

 

Selection

옵션을 선택하는데 주로 쓰이는 요소

• Drop-down List : 밑으로 쏟아지는 옵션
• Combo Box : 검색가능한 드롭다운 리스트
• Radio Button : 한 가지 옵션을 선택할 때
• Check Box : 다수의 옵션을 선택할 때
• Toggle box / Switch : 상태 on/off 전환 

 

 

Tools

입력, 선택, 조정 등 상호작용이 만드는 요소

• Butcon : 아이콘 형태의 버튼 (toolbar)
• Tooltip : 버튼에 올려놨을 때 안내메시지
• Spinner : 숫자 입력 컨트롤
• Dial : 스피어모피즘 → 현실의 라디오 다이얼 조작방식을 그대로 가져옴
• Slider : 직관적인 바 컨트롤. 유튜브 재생바를 생각하면 된다.
• Text Input Field : 텍스트를 입력할 수 있는 영역. (= 편집필드, 텍스트상자)

 

 

Menus

메뉴 구조와 관련된 요소들

• Drop-down Menu : 아래로 쏟아지는 메뉴
• Ribbon Menu : 툴바에 탭을 접목 아이콘 + 라벨
• Tree Menu : 구조를 파악하기 쉬운 메뉴 탐색기

 

 

Navigations

메뉴를 담고 있는 내비게이션과 관련된 요소

• GNB (Global Navigation Bar) : 사이트 공통메뉴바
• LNB (Local Navigation Bar) : GNB를 눌렀을 때 나오는 세컨드(소제목) 내비게이션바
• SNB (Side Navigation Bar) : 사이드 메뉴 소제목 안으로 들어갔을 때 옆에 나와있는 메뉴바
• FNB (Foot Navigaton Bar) :  이름 그대로 하단메뉴, 하단로고, 주소, 카피라이팅 영역

 

 

Communication

시스템 소통, 결정에 관련된 요소

• Digital box : 팝업이라고도 불림.

 

 

기타

• WSG (web style guide) : 한 웹페이지의 일관성 부여를 위한 스타일가이드
• Toast pop-up : 알림을 위해 만들어진 팝업의 일종
• Light box : 팝업이 뜰 때 팝업 배경이 어두워져서 팝업이 잘 보이는 기능