UIUX용어 모음집

UI, UX 작업할 때 알아두면 편리한 기본적인 용어에 대해서 알아보겠습니다. 이름하여 UIUX용어 모음집입니다.

 

 

UIUX 기본적인 용어모음

 

프로토타입(Prototype)

: 핵심기능한 구현 해 제작한 시제품으로 생각하시면 됩니다.

출처 : 피그마커뮤니티

 

 

 

와이어프레임(WireFrame)

: 레이아웃, UI요소가 들어간 것으로 화면설계를 말합니다. 기획자가 주로 작업하는 영역입니다.

와이어프레임을 작성할 때는 정확한 메뉴명을 기입해야 됩니다. 컬러나 이미지 등을 반영하게 되면 고객은 화면구성보다는 컬러나, 이미지에 집중하기 때문에 그레이톤으로 와이어프레임을 작성하는 것이 좋습니다.

출처 : 피그마커뮤니티

 

 

워크플로우(Workflow)

: 작업의 흐름도를 말합니다. 예를 들면 A화면의 버튼을 클릭하면 어떤 화면으로 이동하는지에 대한 흐름도라고 이해하시면 됩니다.

 

출처 : 피그마커뮤니티

 

 

 

 

상태바(Status bar)

: 최상단의 시간, 와이파이, 배터리 잔량 등이 표시되는 영역을 말합니다. 폰에서 자동으로 띄워지는 부분입니다.

 

출처 : 피그마커뮤니티

 

 

 

입력필드(Text input Field)

: 사용자가 직접 텍스트는 입력하는 영역입니다. 검색, 정보의 입력 등 여러 목적으로 사용됩니다.

 

출처 : 피그마커뮤니티

 

 

 

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

: 최초 진입 시에 지정한 값이 기본적으로 노출되며, 화살표 버튼을 누리면 숨어있는 다른 항목들을 표시해주는 영역입니다.

 

출처 : 피그마커뮤니티

 

 

 

라디오버튼(Radio Button)

: 하나의 항목만 선택 또는 취소하기 위해 만들어진 버튼입니다. 

 

출처 : 피그마커뮤니티

 

 

 

 

 

 

 

 

 

 

체크박스 (Check Box)

: 라디오버튼과 달리 체크박스는 여러개를 선택할 수 있도록 만들어졌습니다.

출처 : 피그마커뮤니티

 

 

 

토글(Toggle Button/Switch)

: On/Off를 설정할 때 주로 사용됩니다. 토글버튼 또는 토글스위치라고 부릅니다. 손가락으로 스위치를 좌우로 움직이면 On/Off 상태를 선택할 수 있습니다.

출처 : 피그마커뮤니티

 

 

 

 

슬라이더(Slider)

: 입력가능한 범위를 조절하여 선택할 수 있습니다. 소리조절, 밝기조절 등 입력값의 범위가 있는 영역에 사용됩니다.

출처 : 피그마커뮤니티

 

 

 

 

프로그래스바(Progress Bar)

: 로딩바에서 가장 많이 사용됩니다. 작업의 진행률을 직관적으로 볼 수 있습니다. 사용자가 컨트롤할 수 없습니다.

출처 : 피그마커뮤니티

 

 

 

데이터피커 (DatePicker)

: 달력형태로 날짜를 선택할 수 있습니다.

출처 : 피그마커뮤니티

 

 

 

 

 

 

 

 

 

 

타임피커 (TimePicker)

: 시간을 선택할 수 있습니다.

출처 : 피그마커뮤니티

 

 

라이트박스(Light Box)

: 팝업이 뜰때 백그라운드 화면이 밝거나 어두워지는 것(dim)을 라이트 박스라고 합니다. 사용자가 팝업창에 집중할 수 있도록 합니다.

출처 : 피그마커뮤니티

 

 

 

 

토스트 팝업(Toast Pop-up)

: 모바일에서 주로 사용하며, 토스트기에서 토스트가 나오는 것 같다고 해서 토스트 팝업이라고 합니다. 모바일 상단 또는 하단 중앙에서 노출됩니다. 

출처 : 피그마커뮤니티

 

 

 

 

 

 

 

 

 

레이블(Label) / 플레이스 홀더(Placeholder)

: 레이블 - 어떤 정보에 대한 것인지 알려주는 기능을 합니다.

플레이스 홀더 - 텍스트필드 안에 주로 연한 회색으로 입력되어 있는 텍스트로 사용자가 입력 시 사라집니다. 어떤 내용을 입력해야 되는지 알려주는 역할을 합니다.

출처 : 피그마커뮤니티

 

 

 

툴팁 (Tooltip)

: 마우스를 올리거나 클릭했을때 나타나는 말풍선 형태로 해당 기능의 정보를 제공하는 기능 합니다.

출처 : 피그마커뮤니티

 

 

 

 

 

Splash Screen

: 애플리케이션을 처음 시작할 때 나타나는 화면으로 브랜드에 대해서 소개하거나, 로딩바가 나오기도 합니다.

 

출처 : 피그마커뮤니티

 

 

 

Drawer(=Sliding Menu, Side Bar)

: 햄버거 메뉴라고 부르며, 클릭 시 전체메뉴가 보이는 경우가 많습니다.

출처 : 피그마커뮤니티

 

 

 

 

 

 

 

 

Alert

: 팝업에 버튼이 하나만 있는 경우로 알림의 기능을 합니다.

출처 : 피그마커뮤니티

 

 

Confirm

: 예, 아니오 버튼이 있는 팝업으로 선택할 수 있습니다.

출처 : 피그마커뮤니티

 

 

Prompt

: 팝업에 텍스트 입력칸이 있어 입력할 수 있는 것을 말합니다.

출처 : 피그마커뮤니티

 

 

 

코치마크(Coach mark)

: 사용법 등의 도움말이 적힌 화면으로 사용자에게 사용법을 알려주는 역할을 합니다.

 

 

 

탭 (Tap)

: 화면을 눌렀다가 떼는 것을 말합니다.

 

 

드래그 (Drag)

: 눌러서 이동하거나 끌어서 떼는 것을 말합니다. 스와이프라고도 합니다.

 

 

스크롤 (Scoll)

: 좌우, 수직으로 이동하는 것을 말합니다.

 

 

 

 

 

추천글

컬러이름 색상이름 색상값찾는방법

색상대비 검사기(명도대비 비율계산기)

무료일러스트사이트

피그마무료강좌

어도비온라인사진편집기 무료