[UXUI 사전캠프 2주차] UX/UI디자인 관련 용어 정리.

 

오늘은 UX/UI 디자인 관련된 용어를 정리 해보는 시간을 가져보겠습니다.

---

UX

UX는 User Experience(사용자 경험)을 줄인 말로, 제품이나 서비스를 사용하는 사용자가 느끼는 전반적인 경험.

사용자가 제품이나 서비스를 이용하는 과정에서 느끼는 감정, 태도, 인식 등 모든 측면이 UX에 포함.

제품이나 서비스의 편의성, 효율성부터 디자인적인 부분까지 고려.

 

UI

UI는 User Interface(사용자 인터페이스)를 줄인 말로.

사용자가 디지털 제품이나 서비스와 만나는 면이자 상호작용할 수 있도록 연결하는 매개체.

사용자가 누르고 클릭하는 버튼, 텍스트, 이미지, 애니메이션 등의 시각적 요소들이 모두 UI의 구성 요소.

 

GUI

GUI는 Graphical User Interface(그래픽 사용자 인터페이스)의 약자로, 사용자가 그래픽 기반으로 컴퓨터와 상호작용하는 방식.

복잡한 명령어 대신 마우스나 키보드 등을 사용하여 창, 버튼, 아이콘 등의 그래픽 요소들을 클릭하거나 조작하여 컴퓨터 제어 가능.

 

 

---

UI Elements

• Input control  버튼, 체크박스, 라디오 버튼, 리스트 박스, 토글 버튼, 텍스트 입력 필드, 날짜/시간 필드와 같이 유저의 인풋을 필요로 하는 요소들 을 의미한다.
• Navigational Component Breadcrumb, 페이지 네이션, 태그, Tab bar, Hamburger Menu 와 같이 다른 페이지던, 섹션으로 유저를 네비게이팅 해주는 요소들을 의미한다.
• Informational Component 툴팁, 아이콘, Notifications, 메시지 박스, 모달, 팝업, 그리고 Progress bar와 같이 유저에게 정보를 전달하는 요소들을 나타낸다.
• Container 아코디언, 카드 레이아웃, Carousel 과같이 콘텐츠를 담는 요소들을 나타낸다.

   

 

Input Control

 

1. Button   사용자가 취소, 확인, 로그인, 가입 등 수행할 수 있는 작업을 알리는 데 사용.

2. Check Box   사용자가 자유롭게 입력할 수 있는 텍스트 필드와 달리 여러 개의 옵션 중에 하나 또는 그 이상을 선택할 수 있는 요소.

3. Radio Button   Check Box와 달리 여러 개의 옵션 중에 하나를 선택해야 하는 요소.

4. Input Text   입력 필드는 사용자가 자유롭게 입력할 수 있는 요소. 일반적으로 한 줄의 텍스트 입력.

5. Text Area   사용자가 자유롭게 입력할 수 있는 요소. 일반적으로 여러 줄의 텍스트 입력.

6. Dropdown List   리스트 박스는 사용자가 선택 사항을 선택하는 데 사용. 라디오 버튼으로 리스트 하기에 옵션이 많은 경우 사용 용이.

7. Combobox   콤보 박스는 사용자가 선택 사항을 선택하는 데 사용, 입력 가능. 리스트 박스+텍스트 입력필드

8. Toggle Switch   토글 스위치는 사용자가 선택 사항을 끄거나 켜기, 혹은 선택하기로 사용. ex) 설정on/off 

9. Date Pocker   날짜 선택기는 사용자가 날짜를 선택할 수 있는 요소.

10. Inpput Spinner   숫자를 입력할 수 있는 요소 (+,-,직접입력 가능)

 

 

 

Navigational Component

 

1. Navigation bar   내비게이션 바는 일반적으로 웹사이트나 애플리케이션 상단에 나타남. 사이트의 다양한 섹션이나 페이지로 이어지는 링크를 포함하는 사용자 인터페이스 요소.

2. Tab bar   탭은 한정된 공간에서 많은 양의 정보를 얻을 수 있는 인터페이스. 탭으로 화면 전환 가능. 간편한 메뉴 이동.

3. Navigation + Tab bar   1번 2번이 결합된 형식의 인터페이스. 보통 2뎁스 형태의 내비게이션 메뉴를 만들 때 사용.

4. Breadcrumb   현재 위치를 시각적으로 표현하는 인터페이스 (ex. Home>메뉴보기>한식>분식류>떡볶이)

5. Flyover   자유롭게 페이지의 섹션들을 이동할 수 있는 버튼이나 텍스트.(ex. 아래로 스크롤시 보이는 ↥아이콘)

6. Tag   콘텐츠에 관련된 키워드를 입력하는 인터페이스. 블로그나 소셜미디어에 많이 사용.

7. Bottom Navigation   모바일에서 주로 사용되는 하단 메뉴. 보통 아이콘 or 아이콘+텍스트 형식.

8. Pagination   페이지를 순차대로 혹은 원하는 n번째 페이지를 이동할 수 있는 요소(ex. 《 1 2 3 4 5 》)

 

---

 

자주 사용하는 UI 용어

 

 

스피너(Spinner)

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

 

슬라이더 (Slider)

사용자가 제한된 범위 안에서 입력 값을 선택하게 해주는 UI 요소입니다. 일반적으로 가로 방향으로 이동하는 막대 형태이며, 사용자가 이동시키는 위치에 따라 값을 선택할 수 있습니다. 온라인 쇼핑몰에서 가격 범위를 선택할 때 사용하는 슬라이더가 대표적인 예입니다

 

입력 필드 (Input Field)

입력 필드는 사용자가 키보드를 사용하여 직접 텍스트를 입력하는 곳입니다. 검색창, 로그인 폼, 회원가입 폼 등에서 주로 접할 수 있습니다. 텍스트 입력 필드, 비밀번호 입력 필드, 날짜 입력 필드 등 다양한 종류가 있으며, 입력 필드 안에 미리 작성된 예시 문구나 안내 문구가 들어갈 수 있습니다. 또 입력 필수 요소가 생략되거나 정해진 양식에 맞춰 입력하지 않을 경우 오류 상태를 표시할 수도 있습니다.

 

드롭다운 리스트 (Drop-down List)

드롭다운 리스트는 사용자가 선택할 수 있는 여러 옵션 중 하나를 선택할 수 있도록 합니다. 드롭다운 리스트 버튼을 클릭하거나 커서를 올리면 선택지가 펼쳐지며, 그중 하나의 항목을 선택할 수 있습니다.

 

체크박스 (Checkbox)

체크 박스는 여러 옵션 중 동시에 여러 가지 항목을 선택할 때 사용합니다. 체크 박스 선택지가 너무 많을 경우 사용성에 문제가 생길 수 있어 주의해야 합니다. 하나 이상의 항목을 선택할 수 있다는 점에서 ‘라디오 버튼’과 차이가 있습니다.

 

CTA (Call To Action)

사용자가 구매, 구독, 방문 등 원하는 행동을 하도록 유도하는 장치입니다. 특정 행동을 유도하는 자극적인 문구와 눈에 띄는 시각적 요소로 구성한 버튼을 주로 활용합니다.

 

카드 (Card)

이미지와 텍스트 등으로 구성하여 다양한 정보를 담는 직사각형 요소. 시각적으로 눈에 띄게, 정보를 한눈에 쉽게 확인할 수 있는 장점이 있습니다.

 

캐러셀 (Carousel)

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

 

헤더 (Header) & 푸터 (Footer)

헤더는 웹페이지의 상단 영역, 푸터는 웹페이지의 하단 영역입니다. 헤더에는 주로 브랜드 로고와 네비게이션바가 포함되며 푸터에는 회사 정보, 개인정보 정책, 소셜 미디어 정보 등이 포함됩니다.

 

 

 

자주 사용하는 UX 용어

네이티브 앱

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

 

웹 앱 (반응형)

반응형 방식으로 모바일에서 사용하기 적합한 형태로 만든 웹사이트입니다.

외부 유입과 공유가 쉽고, URL로도 접근이 가능해 접근성이 좋다는 장점이 있습니다. 또 네이티브 앱처럼 새 기능을 추가할 때마다 앱 마켓의 심사를 거치지 않아도 되기 때문에 최신 버전으로 빠르고 쉽게 업데이트 가능합니다. 그렇지만 모바일 기기의 브라우저에서 동작하는 웹사이트이기 때문에 기능에 제약이 많은 단점이 있습니다.

 

하이브리드 앱

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

하지만 성능과 사용자 경험 측면에서는 제한이 있을 수 있습니다. 특히 웹 뷰를 사용하기 때문에 네이티브 앱보다 성능이 떨어질 수 있으며, 웹 앱처럼 다양한 디바이스에서 일관된 사용자 경험을 제공하기 어려울 수도 있습니다.

 

IA (Information Architecture, 정보구조)

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

 

배포

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

 

 

 

출저

https://m.blog.naver.com/hye_nii_/223061674740

https://blog.naver.com/hye_nii_/223062280870

https://www.codestates.com/blog/content/uxui-용어-총정리