UI/UX의 기초. 실무 용어 정리

기본용어

 

UX (User Experience)

사용자 경험. 제품이나 서비스를 사용하는 사용자가 느끼는 전반적인 경험을 뜻한다. 사용자가 제품이나 서비스를 이용하는 과정에서 느끼는 감정, 태도, 인식 등 모든 측면이 UX에 포함된다.

 

UI (User Interface)

사용자 인터페이스. 사용자가 디지털 제품이나 서비스와 만나는 면과 상호작용할 수 있도록 연결하는 매개체이다. 사용자가 누르고 클릭하는 버튼, 텍스트, 이미지, 애니메이션 등의 시각적 요소들이 모두 UI 구성 요소이다.

 

GUI (Grapical User Interface)

그래픽 사용자 인터페이스. 사용자가 그래픽 기반으로 컴퓨터와 상호작용하는 방식을 말한다. 복잡한 명령어 대신 마우스나 키보드 등을 사용하여 창, 버튼, 아이콘 등의 그래픽 요소들을 클릭하거나 조작하여 컴퓨터를 제어할 수 있다.

 

GNB (Global Navigation Bar)

웹 화면을 구성하는 요소로, 웹에 표시되는 하이퍼링크들의 집합 영역을 말한다. 즉, 웹에 접속했을 때 메인 페이지에 항상 보이는 네비게이션 메뉴로 일반적으로 웹의 좌측 혹은 최상단에 위치한다.

 

LNB (Local Navigation Bar)

서브메뉴라고 불리며 웹사이트의 좌측에 주로 위치한다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공된다. GNB가 대분류 메뉴라고 한다면 LNB는 중분류 / 소분류 메뉴라고 볼 수 있다.

 

레이아웃 (Layout)

보통 인쇄 매체를 보기 좋게 편집하고 구성하는 작업을 일컫는 말로, 한 페이지 내에 구성요소와 콘텐츠를 배치하는 일을 의미한다. 사용자가 보는 웹페이지는 한정적이기 때문에 웹의 목적과 기능에 따라 중요한 구성요소를 잘 노출해야 한다.

 

그리드 (Grid)

레이아웃을 구현할 때 이용하는 격자를 말한다. 원고지에 글자를 쓸 때 칸 안에 깔끔하게 맞춰 쓰는 것처럼 그리드를 기반으로 화면 구성요소를 배치해야 웹페이지의 시각적 질서와 일관성이 유지된다.

 

벡터 (Vector)

점, 선, 면으로 이루어진 도형 형태의 오브젝트를 칭한다. 점과 점을 연결해 수학적 원리로 그림을 그려 위치와 색상 값을 기억하는 방식이라 아무리 크게 확대해도 이미지가 깨지지 않는다.

 

UX 실무 용어

 

네이티브 앱

안드로이드, iOS 등 각각 다른 모바일 운영 체제에 최적화되어 개발된 앱이다. 안드로이드 플레이스토어나 애플 앱스토어에서 다운로드해 설치하는 앱으로 컴퓨터로는 접속이 불가능하다. 하지만 각 운영 체제에 최적화하여 개발했기 때문에 각 모바일의 모든 기능 등 성능을 최대치로 활용할 수 있어 사용성이 매우 좋다는 큰 장점이 있다.

 

웹 앱 (반응형)

반응형 방식으로 모바일에서 사용하기 적합한 형태로 만든 웹사이트이다. 모바일 기종이나 운영 체제에 상관없이 모든 단말기에서 같은 콘텐츠를 볼 수 있다. 외부 유입과 공유가 쉽고, URL로도 접근이 가능해 접근성이 좋다는 장점이 있다. 또 네이티브 앱처럼 새 기능을 추가할 때마다 앱 마켓의 심사를 거치지 않아도 되기 때문에 최신 버전으로 빠르고 쉽게 업데이트 가능하다.

 

하이브리드 앱

네이티브 앱과 웹 앱의 장점을 결합한 앱이다. 네이티브 앱의 사용성과 웹 앱의 접근성을 모두 갖추고 있는데 기본적으로 웹 기술을 사용해 구현하지만, 네이티브 앱에서 사용되는 API와 연동하여 더욱 강력한 기능을 제공할 수 있다. 네이티브 앱과 웹 앱 각각의 장점을 살리면서 비교적 빠르고 쉽게 개발할 수 있는 장점도 있다. 하지만 성능과 사용자 경험 측면에서는 제한이 있을 수 있다.

 

IA (Information Architecture)

정보구조로, 서비스의 전체 그림과 흐름을 파악하고 결정할 때 쓰인다. 제품과 서비스를 구성하는 정보와 콘텐츠의 구조, 우선순위, 흐름을 설계하는 가장 기초적인 작업이며 사용자에게 언제, 어떤 방식으로 정보를 제공할지 결정하는 중요한 단계이기도 하다.

 

배포

준비 완료된 서비스를 사용자에게 제공하는 단계이다.

 

UI 실무 용어

헤더 (Header)

헤더는 웹페이지의 상단 영역이다. 헤더에는 주로 브랜드 로고와 네비게이션바가 포함된다.

 

푸터 (Footer)

푸터는 웹페이지의 하단 영역이다. 푸터에는 회사 정보, 개인정보 정책, 소셜 미디어 정보 등이 포함된다.

 

카드 (Card)

이미지와 텍스트 등으로 구성하여 다양한 정보를 포함하는 직사각형, 정사각형 모듈이다. 주로 시각에 많이 의존하게 되는데, 이때 사용자의 시선을 효과적으로 끌 수 있고 정보를 한눈에 쉽게 확인할 수 있다.

 

캐러셀 (Carousel)

한 화면에서 두 개 이상의 여러 콘텐츠를 보여줄 때 사용한다. 주로 슬라이드 형태로 이미지 혹은 영상 등을 순환하며 콘텐츠를 노출시키는 형태로 이커머스 메인 페이지에서 가장 흔히 볼 수 있다.

 

스피너 (Spinner)

숫자 입력 컨트롤로, 편집 필드와 위아래 화살표 버튼으로 구성되어 있다. 편집 필드에 직접 숫자를 입력하거나 화살표 버튼으로 조절하여 원하는 숫자를 입력할 수 있다.

 

슬라이더 (Slider)

입력 값이 제한되어 있음을 시각적으로 인지하고, 버튼을 밀고 당기며 사용자가 이동시키는 위치에 따라 값을 선택할 수 있다. 일반적으로 가로 방향으로 이동하는 막대 형태이다.

 

텍스트 입력 필드 (Text Input Field)

사용자가 키보드를 사용하여 직접 텍스트를 입력하는 곳을 말한다. 입력 필드 안에 미리 작성된 예시 문구나 안내 문구가 들어갈 수 있다. 필수 요소가 생략되거나 정해진 양식에 맞춰 입력하지 않을 경우 오류 상태를 표시할 수도 있다.

* 연관 용어 : Text Box, Text Field, Text Area

 

플레이스홀더(Placeholder)

사용자가 값을 입력하기 전에 도움을 줄 수 있는 힌트를 Input박스 안에 표시해 주는 것을 말한다. 사용자가 값을 입력하면 문자는 사라진다.

* 연관 용어 : Label

 

CTA (Call To Action)

사용자의 클릭을 통해 즉각적인 응답을 유도하거나 즉각적인 판매를 장려하는 행동유도버튼을 의미한다. 특정 행동을 유도하는 자극적인 문구와 눈에 띄는 시각적 요소로 구성한 버튼을 주로 활용한다.

 

드롭다운 (Drop down)

버튼을 클릭하거나 커서를 올렸을 때, 사용자가 선택할 수 있는 세부 항목이 펼쳐지고, 그중 하나를 선택할 수 있는 요소를 말한다.

 

콤보박스 (Combo Box)

드롭다운(Drop down) + 입력 필드 기능을 결합한 형태이다.

 

라디오 버튼 (Radio Button)

어느 하나를 선택/ 취소하기 위해 사용하는 버튼이다. 하나만 선택할 수 있다.

 

체크박스 (Checkbox)

여러 옵션 중 동시에 여러 가지 항목을 선택할 때 사용한다. 하나 이상의 항목을 선택할 수 있다는 점에서 ‘라디오 버튼’과 차이가 있다.

 

브레드크럼 (Breadcrumbs)

'헨젤과 그레텔'에서 따온 용어로, 직역하면 빵 부스러기. 사용자가 현재 어떤 위치에 있는지 시각적으로 나타내며, 사이트 이동 경로라고도 한다.

 

토글 (Toggle)

on/off 등 특정 기능을 켜고 끌 때 사용된다. 주로 모바일에서 활용되고, 스위치(Swich)와 많이 통용되고 있다.

 

툴팁 (Tool Tip)

웹사이트에서 부연 설명을 표시할 때 사용되는 유용한 요소이다.

 

스플래시 (Splash)

모바일 앱 실행 시 가장 처음 만나게 되는 화면으로, 보통 1~3초 정도 이어진다.

 

스켈레톤 (Skeleton)

사용자가 접속한 화면의 실제 데이터가 렌더링 되기 전에 윤곽을 먼저 보여주는 애니메이션 화면이다. 로딩 중임을 유저에게 알려 사용자의 이탈을 방지하고, 어떤 것들과 마주하게 될지 미리 알려주는 역할을 한다.

 

코치마크 (Coach Mark)

앱을 처음 실행하였을 때, 앱을 처음 사용하는 사용자를 위해 간단한 사용법을 안내해 주는 서비스로 도움말 또는 사용 방향을 지시해 주는 화면이다. 보통 최초 실행 시에만 볼 수 있도록 설계되어 있다.

 

새로고침 (Pull to Refresh)

당겨서 새로고침이라는 뜻으로, 스크롤 최상단에서 위로 쭉 당겨 새로고침하는 행동을 말한다.

 

프로그레스 인디케이터 (Progress Indicator)

흔히 알고 있는 '로딩바'의 하위 개념으로 직선의 형태 또는 원의 형태가 일반적이다. 사용자가 현재 얼마만큼 기다렸고, 앞으로 얼마만큼 기다려야 하는지 직관적으로 알 수 있는 지표이다.

 

고정값 (Default)

기본적으로 적용되어 있는 명령을 말하며, 초기 설정 상태 및 기본 상태를 말한다.

* 연관 용어 : Disable, Pressed

 

모달 (Modal)

사용자의 이목을 집중시키기 위해 기존에 이용하던 화면 위에 또 다른 화면이 오버레이 되는 창을 말한다. 새로 열린 창을 완료하기 전까지는 기존 창을 클릭할 수 없다.

* 연관 용어 : 레이어 팝업, 라이트 박스

 

팝업 (Pop-up)

페이지 위에 또 하나의 브라우저 페이지를 띄우는 것이다. 차단되는 경우도 있어서 필수적인 것은 모달이 좋다. 새로운 창이 열려도 기존 창을 클릭할 수 있다.

 

토스트 팝업 (Toast Pop-up)

토스트기에서 토스트가 나오는 모양과 같다고 붙여진 이름이며, 알림을 위한 팝업의 일종이다. 화면에 몇 초간 나타났다가 사리지는 형태를 가지고 있다.

 

딤드 (Dimmed)

팝업이나 이미지 뒷배경을 어둡게 처리한 것이다.

 

아코디언 (Accodion)

접었다 폈다 할 수 있는 컴포넌트이다. 대부분 제한된 공간 내에서 많은 양의 정보를 보여주고자 할 때 사용한다. 보통 같은 분류의 아코디언을 여러 개 연속해서 배치하며, 효과적인 레이아웃 구축이 가능하다.

 

디바이더 (Dividers)

그룹화된 각 항목을 분리하거나 아코디언에서 탭할 수 있는 영역을 정의하는데 사용된다. 흔히 구분선이라고도 칭하는데 되도록이면 레이아웃에서 눈에 거슬리지 않는 정도의 후순위로 배치되어야 하며, 최소한 사용할 뿐만 아니라 요소를 구분할 수 없는 경우에만 사용하는 것을 권한다.

 

내비게이션 (Navigation)

사용자가 구매, 탐색 등의 목표를 달성할 수 있도록 제품 내의 여러 콘텐츠를 탐색하고 들어갔다 나올 수 있게 만드는 요소이다. 초기 단계부터 생각되어야 한다.

 

메뉴 (Menu)

일반적으로 많이들 알고 있는 메뉴가 햄버거 메뉴인데, 그 외에도 정말 다양한 메뉴들이 존재하고 있다.

- 벤토메뉴 (Bento) : 3*3 형태로 놓인 9개의 점. 도시락 메뉴라고 하기도 하며, 동일한 제품 내에서 다른 애플리케이션을 열 때 자주 사용한다.

- 케밥메뉴 (Kebab) : 3개의 세로 점. 그룹화된 옵션 세트를 나타낸다.

- 미트볼메뉴 (Meatballs) : 3개의 가로 점. 더 많은 옵션을 보여주고자 할 때 사용된다.

- 햄버거메뉴 (Hambuger) : 3개의 가로 선. 일반적으로 상단 모서리에 위치해 있으며, 하나의 네비게이션을 안에 담을 수 있어 흔하게 사용된다.

- 도너메뉴 (Doner) : 햄버거 메뉴의 변형으로, 이 메뉴는 필터 그룹을 나타낸다.

 

픽커 (Picker)

시간 혹은 날짜와 같은 범위 내 특정 숫자를 선택할 때 사용한다. 상단에 있는 픽커는 원하는 항목으로 빨리 이동할 수 있는 것이 장점이며, 흔히들 휠(Wheel) 형태라고 한다.

 

스텝퍼 (Stepper)

주로 수량 변경과 같은 상황에서 자주 사용되며, (-), (+)아이콘을 활용하여 입력 필드 안에 있는 값을 변경시켜준다.

 

뱃지 (Badge)

사용자에게 새로운 정보가 있음을 알려주고자 할 때 많이 사용된다.

 

페이지네이션 (Pagination)

한 페이지에 띄우기에 정보가 너무 많은 경우 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해 주는 것을 말하며, 다음 또는 이전 페이지로 넘어가기 위해 사용하는 버튼이다. 현재 페이지를 표시할 때 사용하기 때문에 사용자에게 시각적 단서를 제공하는 수단이다.

 

무한 스크롤 (Infinite Scroll)

페이지 최하단에 도달했을 때 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것을 말한다. 바로바로 콘텐츠가 로드가 된다는 점에서는 유저 사용성에 편이하지만 푸터를 볼 수 없고, 원래의 위치로 돌아오는 것이 어려운 단점이 있다.

 

파비콘 (Favicon)

웹사이트 브라우저 탭 좌측에 나타나는 아이콘으로, 주로 로고를 활용하여 해당 사이트의 특징을 나타내는 기능을 한다.

 

탭 (Tab)

콘텐츠를 분리해서 보여주고 싶을 때 사용한다.

 

태그 (Tag)

콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할을 말한다.

 

자동완성 (Autocomplete)

사용자가 내용을 입력 중일 때, 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것이다.

 

플로팅버튼 (Floating Action Button)

보통 스크롤 다운 시에 생성이 되며 위로 올라가는 버튼으로 많이 쓰인다. 중요한 액션에 사용한다.

 

스낵바 (Snack Bar)

사용자가 수행한 작업에 대한 결과를 간단한 텍스트 레이블 형태로 보여준다. 액션 버튼이 함께 표시되며 4초 뒤쯤 화면에서 사라진다.

 

알럿 (Alert)

사용자에게 주의를 주거나 알림을 일방적으로 주는 경우에 사용한다. 버튼이 포함되어 있다.

* 버튼 1개만 있다면 Alert, 버튼 2개(예/아니오)일 경우 Confirm, 텍스트 입력 칸이 있는 경우 Prompt

 

제스처 인터렉션 (Gestures)

화면을 컨트롤하는 UI의 기본 요소 중 하나로, 모바일 서비스는 터치와 제스처를 기반으로 움직이고 있다. 터치스크린 중심의 인터렉션을 이해하고, 잘 활용한다면 사용자는 더 좋은 서비스를 접할 수 있을 것이다.

 

 

 

 

↓ (참고) 설명 + 간단한 이미지 ↓

https://ahnsisters.tistory.com/20?category=1062059

[UIUX] 실무에서 자주 사용되는 UI 용어