1. 오늘의 아티클(UX/UI):
2. 아티클 정보 요약
UI 용어를 정리해야 하는 이유
원활한 소통을 위해 용어의 의미를 정확히 파악하기 위해서
-
GNB(Global Navigation Bar)
웹사이트 최상위 메뉴
모든 페이지 상단에 공통적으로 표시되는 메뉴바에 위치 -
LNB(Local Navigation Bar)
GNB메뉴 클릭이나 hover 상태에서 보이는 메뉴
서브 페이지, 특정 메뉴로 이동 -
SNB(Side Navigation Bar) or LNB(Left Navigation Bar)
상단 메뉴를 제외한 좌측 메뉴바 -
FNB(Foot Navigation Bar),Footer
로고, 주소, 전체 메뉴 영역 등을 배치한 최하단 메뉴 -
Tab Menu
Tab으로 표현된 병렬형 콘텐츠
클릭하여 화면 전환 -
FAB(Floating Action Button)
주로 우측 하단에 표시
페이지 내 관련성이 높거나 자주 사용되는 동작을 표시한 버튼 -
Splash Screen
앱이 시작할 때 보여주는 화면 -
Hamburger
웹이나 모바일 상단에 위치
전체 메뉴를 한눈에 볼 수 있는 버튼 -
Drawer
주로 앱 상단에 위치
열고 닫을 수 있는 방식 -
Accodian
내용을 펼치고 접을 수 있는 컴포넌트
리스트 형식을 효과적으로 표현 -
BTN, Button
크게 활성/비활성된 상태로 나뉨
사용자 행동에 따라 다양한 상태로 표현 -
Label
입력할 정보에 대해 설명해 주는 문구 -
Text Field
한 줄 텍스트를 입력하는 폼 필드 -
Place Holder
텍스트 필드 입력을 유도하는 힌트 -
Text Area
긴 문장의 텍스트를 입력하는 경우 사용 -
Place Holder Images or Avatar
사용자가 이미지를 입력할 수 있는 공간 -
Check Box
중복 선택이 가능한 선택 수단 -
Radio BTN
단일 선택만 가능한 선택 수단 -
Toggle
활성/비활성된 상태로 표현 -
Slider
양쪽 끝의 아이콘을 선택하여 움직임
수치 값, 카테고리의 배율을 지정하여 표현 -
Select Box
사용자가 특정 값을 선택할 때 사용 -
Drop Down
버튼 뒤로 숨겨진 메뉴를 표현할 때 사용 -
Progress Bar
작업의 진행 상태를 사용자에게 알려줄 때 사용 -
Loader
화면이 진행 중일 때 보이는 표현 방식 -
Tooltips
간단한 설명 텍스트가 필요할 때 사용 -
Carousel
하나의 화면에서 두 개 이상의 콘텐츠를 보여줄 때 사용
주로 콘텐츠를 나열해서 보여줄 때 사용 -
Navigation
앱 하단에 위치
카테고리와 레이블 함께 표시 -
Breadcrumbs
현재 위치를 보여줄 때 표시 -
Pagination
콘텐츠가 많아 스크롤이 길어질 때 표시 -
Favicon
웹사이트 주소나 브라우저 탭 옆에 나타나는 아이콘
-
Feature(피처)
제품이나 서비스에서 하나의 기능 단위
핵심이 되는 기능: Key Features(키 피처) -
Feasibility
디자인 - 개발 리소스, 기간, 예산 등 현실적으로 보았을 때의 실현 가능성 -
VOC(Voice of Customers)
고객으로부터 접수된 피드백이나 불만, 리뷰 등을 의미 -
UGC(User Generated Content)
사용자가 생성한 콘텐츠
다른 사용자들의 서비스에 대한 신뢰로 이끌 수 있음 -
Fidelity
디자인의 디테일한 정도나 컬러, 폰트 등이 얼마나 최종 디자인에 가까운지를 의미
Low Fielity(Lo-Fi): 최소한의 구성요소는 갖추고 있는 정도
High Fidelity(Hi-Fi): 완성에 거의 가까운 형태 -
Wireframe(와이어프레임)
아이디어를 표현하거나 피처가 어떤 흐름을 통해 구현되어야 하는지 표현
주로 기획 단계에서 제작
각 페이지들의 정보와 UI 요소 등에 대한 배치를 표현 -
Storyboard(SB, 스토리보드)
서비스 각 페이지 구성요소나 콘텐츠의 설명, 페이지 간의 이동 흐름, 로직 등을 기술한 문서
와이어프레임과의 차이점: 시나리오, 플로우, 설명 추가 -
Prototype(프로토타입)
서비스에 대한 기능 및 사용성 테스트를 위한 움직이는 디자인 시안
어떤 흐름으로 구동되는지 볼 수 있음 -
Affordance(행동 유도성)
사용자가 제품 또는 서비스를 어떻게 사용해야 하는지 알거나, 디자이너의 의도대로 행동을 유도하는 것을 의미 -
IA(Information Architecture, 정보구조도)
서비스 구축의 가장 기초적인 작업
제품, 서비스를 구성하는 정보의 구조와 우선순위, 흐름의 설계 등을 포함 -
UT(Usability Testing, 사용성 테스트)
기획/디자인된 프로덕트를 사용자가 의도대로 사용하여 목적한 바를 달성할 수 있는지 알아보기 위함
3. 인사이트
평소에 앱이나 웹에서 자주 볼 수 있는 구성요소들의 종류와 용어를 알게 되었고, 구성요소들의 표현 방법에 대해서도 알게 되었다.
디자인 시작 전 기획 단계와 디자인 완료 후의 과정에서 진행하는 것들에 대한 용어를 알 수 있었다.
