UIUX 용어 정리

1. 모바일/웹

GUI

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

네이티브 앱

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

웹앱 (반응형)

반응형 방식으로 모바일에서 사용하기 적합한 형태로 만든 웹사이트이다. 모바일 기종이나 운영체제와 상관없이 모든 단말기에서 같은 콘텐츠를 볼 수 있다. 앱 마켓에서 다운로드하여 사용하는 응용프로그램이 아니다.

하이브리드 앱

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

 

2. 업무 용어

배포

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

Persona

사용자 페르소나는 조사 결과와 정보에 기반하여 만들어진 특정 사용자를 말한다. 허구의 인물이지만 실제 정보들을 이용해서 만들어진다.

3. 기능

Placeholder

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

Dropdown

버튼을 클릭하거나 커서를 올렸을 때, 세부 항목이 펼쳐지고 하나의 값을 선택할 수 있는 요소를 말한다. 긴 옵션 목록 중 하나의 값을 선택할 때 사용된다.

Combobox

드롭다운+입력 필드의 기능을 결합한 형태이다.

Breadcrumbs

사이트 이동 경로라고도 하며, 사용자가 현재 어떤 위치에 있는지를 시각적으로 나타낸다.

API

API는 Application Programming Interface의 약자로, 기본적으로 앱과 웹 사이에서 서로 통신할 수 있게 해주는 코드이다. 

4. 디자인 패턴

생성
1) Builder : 생산 단계를 캡슐화 하여 구축 공정을 동일하게 이용하도록 하는 패턴
2) Prototype : 복사하여 새 개체를 생성할 수 있도록 하는 패턴
3) Factory Method : 객체를 생성하기 위한 인터페이스를 정의하여 어떤 클래스가 인스턴스화 될 것인지는 서브 클래스가 결정하도록 하는 패턴
4) Abstract Method : 생성군들을 하나의 모아놓고 팩토리 중에서 선택하게 하는 패턴
5) Singleton : 유일한 하나의 인스턴스를 보장하도록 하는 패턴

구조
1) Bridge : 추상과 구현을 분리하여 결합도를 낮춘 패턴
2) Decorator : 소스를 변경하지 않고 기능을 확장하도록 하는 패턴
3) Facade : 하나의 인터페이스를 통해 느슨한 결합을 제공하는 패턴
4) Flyweight : 대량의 작은 객체들을 공유하는 패턴
5) Proxy : 대리인이 대신 그 일을 처리하는 패턴
6) Composite : 개별 객체와 복합 객체를 클라이언트에서 동일하게 사용하도록 하는 패턴
7) Adapter : 인터페이스로 인해 함께 사용하지 못하는 클래스를 함께 사용하도록 하는 패턴

행위
1) Interpreter : 언어 규칙 클래스를 이용하는 패턴
2) Template Method : 알고리즘 골격의 구조를 정의한 패턴
3) Chain of Responsibility : 객체들끼리 연결 고리를 만들어 내부적으로 전달하는 패턴
4) Command : 요청 자체를 캡슐화하여 파라미터로 넘기는 패턴
5) Iterator : 내부 표현은 보여주지 않고 순회하는 패턴
6) Mediator : 객체 간 상호작용을 캡슐화한 패턴
7) Memento : 상태 값을 미리 저장해 두었다가 복구하는 패턴
8) Observer : 상태가 변할 때 의존자들에게 알리고, 자동 업데이트하는 패턴
9) State : 객체 내부 상태에 따라서 행위를 변경하는 패턴
10) Strategy : 다양한 알고리즘 캡슐화하여 알고리즘 대체가 가능하도록 한 패턴
11) Visitor : 오퍼레이션을 별도의 클래스에 새롭게 정의한 패턴

5. 컴포넌트

 

App bars

App bar는 상단과 하단으로 나뉜다. 상단 App bar는 보이는 화면과 관련된 제목과 작업 내용이 들어가고 하단 App bar는 흔히 모바일 장치에서 볼 수 있으며 최대 4개의 아이콘 버튼과 플로팅 버튼을 넣을 수도 있다.

Badges

라벨이나 숫자를 넣을 수 있고 아이콘 경계 상자 내부에 위치한다. 안에 들어가는 내용은 +를 포함하여 4글자 이내로 구성한다.

Buttons

● Common buttons

띄워진, 채워진, 연하게 채워진, 아웃라인, 텍스트와 같이 다섯 가지 종류의 버튼이 있다.

● FAB

Floating action buttons의 약자로 스크롤이 되어도 고정된 위치에 화면에 나타나게 되며 가장 일반적이고 중요한 작업에 적용된다. 이때 텍스트는 사용하지 않고 아이콘만 사용하게 된다.

●Extended FAB

조금 더 확장된 의미의 FAB이며 일반 FAB으로 의미 전달이 힘들 때 텍스트를 포함한 FAB버튼이라고 할 수 있다.

●Icon button

명확한 의미를 지닌 시스템 아이콘을 활용한 버튼이다.

●Segmented buttons

분할된 버튼 형태이고 2~5개 항목 사이에서 간단한 선택을 할 때 사용된다.

Cards

콘텐츠에 이미지, 헤드라인, 지원 텍스트, 버튼, 목록 등의 다양한 내용물이 들어갈 수 있다. 슬라이드 형태로 내용물이 순환하며 콘텐츠를 노출시키는 형태이다.

Carousel

이미지나 비디오 같은 시각적 항목과 선택적 레이블 텍스트에 쓰인다. 스크롤할 때 시각적 효과가 나타난다.

Checkbox

선택의 여부를 알 수 있으며, 선택한 항목이 선택되지 않은 항목보다 눈에 띈다.

Chips

특정 상황에 대한 옵션들을 칩들로 표현할 수 있다.

Date pickers

일반적인 캘린더의 패턴을 가지고 있다. 캘린더형 버튼이라고 보면 된다.

Dialogs

사용자가 정보에 따라 움직이게 하기 위해 사용된다. 이는 단일 작업을 완료하는 데에만 전념하게 된다. 

Divider

구분선이라고 하며 항목을 열린 공간으로 그룹화할 수 없는 경우에만 사용된다. 그래서 개별 항목을 분리하지 않고도 구분선 만으로 그룹화를 할 수 있다.

Lists

리스트는 사용자가 특정 항목을 찾게 도와준다. 이때 리스트의 항목들은 짧고 쉬운 내용이 보여서 쉽게 스캔할 수 있게 하며 정렬을 ABC순으로 하는 등의 논리적인 정렬을 한다. 

Menus

메뉴는 아이콘 버튼, 텍스트 필드 등 다양한 구성요소에서 열 수 있다.

Navigation

고정이 되는 것, 열고 닫을 수 있는 것, 지도 그 자체를 의미하는 것 이렇게 세 가지로 구분할 수 있다. 서비스의 원하는 목적지까지 안내하는 것이 목적이다.

Progress indicators

진행률 표시기는 장식용으로 사용될 수 없으며 선형과 원형으로 나뉜다. 보통 로딩 진행 상황을 나타내기 때문에 상황에 맞지 않게 사용하게 될 경우 사용자가 불편함을 느낄 수 있다.

Radio button

목록중에서 하나만 선택할 수 있는 경우에 사용하게 된다.

Search

검색창은 서비스 내에서 원하는 결과물을 직접적으로 찾게 도와주며 검색 결과가 항상 표시되어야 한다.

Sheets

시트는 하단과 사이드 두 가지로 나눌 수 있다. 하단은 추가적이고 부가적인 내용이 담기게 되고 사이드는 콘텐츠를 중단하지 않고 선택적 콘텐츠와 빠르게 작업을 할 수 있도록 도와줄 수 있게 한다. 사이드 시트를 통해 빠르게 다른 지역으로 이동할 수 있다.

Sliders 

밀어서 원하는 값을 조절할 수 있는 버튼이다. 선택 범위가 전체로 나와야 하고 연속형과 이산형 두 가지로 나눌 수 있다. 이산형은 일정 값마다 끊어져 있어서 애매한 수치를 제외시킨다.

Snackbar

일반적으로UI 하단에 위치하며 저절로 사라지거나 사용자가 조치를 취할 때까지 화면에 남아 있을 수 있다. 이는 사용자의 행동을 나타내는게 일반적이며 사용자 경험을 방해해서는 안 된다.

Switch

항목을 독립적으로 제어할 때 사용되며 ON과 OFF로 조절할 수 있다.

Tabs or Toggles

탭은 가로로 스크롤 할 수 있으므로 필요한 만큼 많은 탭이 있을 수 있다.

Text fields

일반적으로Dialogs에서 많이 쓰이며 하단에 입력 정보의 오류나 부가적인 정보를 확인할 수 있다.

Time pickers

시간 선택 모달이다.

Tooltips

도구 설명이 담긴 버튼이다.

Spinner

숫자 입력 컨트롤을 말하며, 위아래 화살표 버튼을 사용하여 값을 조절하거나 필드에 원하는 숫자를 입력하여 값을 추출한다.

Modals

웹에서 새 창을 띄우는 팝업창과 달리 같은 브라우저 내부에서 상위 레이어를 띄우는 방식을 사용하는 창이다. 이는 최우선 과제로 작동하며 이 창을 닫지 않으면 다른 레이어를 클릭할 수 없게 된다.

Pagenation

 현재 페이지를 표시할 때 사용하기 때문에 사용자에게 '시각적 단서'를 제공하는 수단이다. 

Stepper

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