📱

UXUI 용어집

UXUI용어 여기저기 찾아다니지 마시고 피그마 피디아에서 해결해보세요! 앞으로 꾸준히 업데이트할 예정! 용어 추가 제보 대환영

용어집리스트

Search

텍스트는 UI를 이루는 가장 기본적인 요소 중 하나로, 폰트, 크기, 굵기, 색상 등을 조절할 수 있습니다. 사용자의 이해를 돕기 위해 아이콘 혹은 이미지와 함께 사용하기도 하며, 텍스트를 활용 하여버튼을 제작하기도 합니다.

드롭다운 메뉴 또는 콤보박스라고 하며, 여러 가지의 옵션 중 한 가지를 선택할 때 사용합니다. 클릭 시 하단에 감춰져 있던 옵션이 모두 보여지며, 일반적으로 욥선 중 하나를 선택하면 선택한 옵션으로 상단의 텍스트가 변경됩니다.

텍스트는 UI를 이루는 가장 기본적인 요소 중 하나로, 폰트, 크기, 굵기, 색상 등을 조절할 수 있습니다. 사용자의 이해를 돕기 위해 아이콘 혹은 이미지와 함께 사용하기도 하며, 텍스트를 활용 하여버튼을 제작하기도 합니다.

이미지는 UI를 이루는 가장 기본적인 요소 중 하나로 사진,일러스트 등을 삽입한 요소를 일컫습니다. 경우에 따라 버튼의역할을 하기도 하며, jpg, png, gif 등 여러 유형으로 삽입할 수 있습니다.

아이콘은 UI를 이루는 가장 기본적인 요소 중 하나로 서비스의 페이지, 기능 등을 시각적으로 표현한 이미지입니다. 사용자가 아이콘을 통해 필요하거나 원하는 것을 빠르고 쉽게 식별할 수 있도록 아이콘을 해당하는 페이지, 기능을 대표하는 이미지로 제작해야 효과적입니다.

버튼은 사용자가 화면을 제어할 수 있는 기본적인 요소로,텍스트, 아이콘 등 다양한 형태로 표현되며 같은 버튼이라도 중요도 및 상태에 따라 다른 GUI로 표현하여 사용자의 이해를 도울 수 있습니다.

인풋 또는 텍스트 필드라고 하며, 사용자가 텍스트를 입력할 수 있는 요소입니다. 주로 이름, 아이디, 비밀번호 등 범주화할 수 없는 정보를 입력하는 경우에 사용합니다. 또한 필요에 따라 입력한 글자 수를 함께 보여주기도 하며, 비밀번호와 같은 개인정보는 텍스트를 마스킹 처리하여 나타내기도 합니다.

사용자가 인풋에 텍스트를 입력할 때, 사용자가 올바르게 텍스트를 입력할 수 있도록 적절한 예시를 알려주는 요소입니다. 텍스트를 입력하면 자동으로 사라지며 입력한 텍스트에 대한 결과를 보여주기도 합니다.

데이트 피커는 사용자가 연, 월, 일과 같은 시간 범위를 선택할 때, 보다 쉽게 시간을 선택할 수 있도록 돕는 요소입니다.날짜를 클릭하면 선택된 날짜로 옵션이 변경되며, 특정 날짜 하루를 선택하거나 필요에 따라 이틀 이상의 날짜 범위를 선택할 수도 있습니다.

팝업은 기존 페이지와 별개의 정보를 제공할 때, 페이지 위에 노출시키는 요소입니다. 기존 페이지와 독립적인 관계를 가지며, 브라우저 옵션을 통해 노출되지 않도록 강제할 수 있습니다. 또한, 가독성 및 시인성을 고려하여 팝업 외에 모든 영역이 비활성화(dimmed) 시키는 경우가 일반적입니다.

모달은 기존 페이지와 종속적인 관계를 가지기 때문에 주로 기존 페이지에서 사용자의 선택을 필요로 할 때 사용하는 요소입니다. 또한, 팝업과 반대로 브라우저 옵션과 관계없이 노출시킬 수 없습니다.

바텀 시트는 화면 하단(주로 모바일 환경에서)에 작은 화면을 띄워 자세한 정보를 제공하거나 화면을 제어하는 기능을 제공하는 요소입니다. 화면 하단을 활용하는 것으로 사용자가 상단에 보이는 기존 화면의 정보와 함께 볼 수 있도록 도와주는데 용이합니다.

서비스 이용에 필요한 정보를 일시적으로 제공하는 팝업입니다. 일반적으로 화면에 3~5초간 노출된 후 제거되며 페이지에서 사용자가 바로 인식할 수 있는 위치에 노출됩니다.

툴팁 또는 도움말 버튼이라고도 하며, 사용자가 마우스를 아이콘에 올리면 텍스트를 통해 해당 영역에 대한 부가적인 정보를 알 수 있도록 해주는 요소입니다. 경우에 따라 마우스를 아이콘에 올리지 않아도 상시적으로 노출할 수도 있으며, 텍스트 박스에 버튼을 추가하여 링크를 연결하거나 화면을 제어하는 기능을 넣기도 합니다.

GNB는 ‘Global Navigation Bar’의 약자이며, 애플 ‘human interface guidelines’에서는 내비게이션 바 라고도 합니다. 모든 페이지 최상단에 동일하게 위치하며 서비스의 로고 및 사용자가 주로 접근하는 페이지 및 기능을 목록화하여 배치합니다. 경우에 따라 페이지 좌, 우측에 배치되어 있는 경우 ‘SNB(Side Navigation Bar)’, 클릭 혹은 마우스 호버로 노출되는 경우에는 ‘LNB (Local Navigation Bar)’라고 합니다.

푸터, 또는 FNB(Foot Navigation Bar)라고 하며, 페이지의 최하단에서 서비스에서 찾아볼 수 있는 페이지 목록, 서비스에 대한 부가적인 정보를 담고 있는 요소입니다.

스테이터스 바는 알림, 시간, 데이터 수신상태, 잔여 배터리량 등 현재 기기에 대한 정보를 보여주는 요소입니다. 모바일 환경에서는 화면 상단에서 찾아볼 수 있으며, 운영체제에 따라 보여주는 정보 및 UI디자인은 상이할 수 있습니다.

내비게이션 바는 애플 ‘human interface guidelines’에서는 ‘Tab bar’ 라고도 합니다. 서비스 최 하단 영역에 사용자가 주로 접근하는 페이지 및 기능을 목록화하여 배치합니다. 주로 모바일 환경에서 쉽게 찾아볼 수 있는 요소이며, 현재 접근한 페이지와 그 밖의 페이지를 색상, 아이콘 스타일 등으로 구분 지어야 사용자의 이해를 돕는데 효과적입니다.

토글 버튼, 또는 토글스위치라고도 합니다.서로 상반되는 옵션 중 하나를 선택하는 경우 사용하며, 두 옵션을 서로 다른 GUI로 표현하여 사용자가 긍정, 혹은 부정의 상태를 알기 쉽게 인식할 수 있어야 효과적입니다.

라디오 버튼은 여러 옵션 중에서 하나의 옵션을 선택하도록 할 때 사용하는 요소입니다 . 일반적으로 라디오 버튼을 선택하면 자연스럽게 선택한 라디오 버튼 외의 라디오 버튼은 해제됩니다.

스태퍼는 숫자를 클릭, 탭 등의 간단한 조작으로 입력하고자 할 때 사용합니다. +(plus), -(minus)를 누를 경우 중앙의 숫자가 조작한 버튼에 맞게 변경되며, 경우에 따라 숫자를 인풋으로

지정하여 직접 숫자를 입력하기도 합니다.

슬라이더는 동영상의 타임라인 혹은 사운드의 볼륨을 조절할 때사용하는 요소입니다 . 사용자는 핸들이나 바를 터치 혹은 드래그하여 좌, 우로 조작할 수 있습니다.

페이지네이션은 배너, 게시글 등 2개 이상의 항목을 한 화면에 보여주기 어렵거나 불러오는데 시간이 오래 걸리는 경우, 목록화하여 표시하는 요소입니다. 주로 숫자나 간단한 도형으로 지금 보여주는 항목이 여러 항목 중에서 몇 번째 순서인지 사용자에게 알리는 역할을 합니다.

인디케이터는 숫자나 간단한 도형으로 지금 보여주는 내용이 목록화된 내용 중에서 몇 번째 순서인지 사용자에게 알리는 요소입니다. 타 요소를 클릭, 터치 등으로 조작했을 때 순서가 자동으로 변경되는 게 일반적이며, 필요에 따라 직접 조작을 통해순서를 변경시킬 수도 있습니다.

페이지네이션은 배너, 게시글 등 2개 이상의 항목을 한 화면에 보여주기 어렵거나 불러오는데 시간이 오래 걸리는 경우, 목록화하여 표시하는 요소입니다. 주로 숫자나 간단한 도형으로 지금 보여주는 항목이 여러 항목 중에서 몇 번째 순서인지 사용자에게 알리는 역할을 합니다.

세그먼티드는 내용을 나눠 보여주고자 할 때, 혹은 내용을 정렬하고자 할 때 사용하는 요소입니다. 선택한 메뉴와 그 밖의 메뉴를 색상, 아이콘 스타일 등으로 구분 지어야 사용자의 이해를 돕는데 효과적입니다.

아코디언은 한 개 이상의 내용을 하나의 메뉴로 묶어 필요에 할 경우에 노출시키는 요소입니다 . 메뉴를 클릭 혹은 탭을 하면 하위의 내용을 표시하거나 숨길 수 있습니다.

브레드 크럼은 주로 페이지 상단 좌측에 있으며, 사용자가 어느 페이지에 접근했는지 알려주는 요소입니다. 사용자가 어떤 루트로 현재 페이지이에 접근했는지 알려주며, 페이지 이름이 들어간 텍스트를 클릭하여 이전의 페이지로 되돌아갈 수도 있습니다.

캐러셀, 또는 스위퍼라고도 하며 여러 가지의 요소를 한 위치에서 보여 주고자 할 때 사용합니다. 클릭, 탭, 드래그 등 다양한 방법으로 순서를 조작할 수 있으며, 경우에 따라 일정한 시간차를 갖고 자동으로 순서가 조작되기도 합니다.

플로팅 버튼은 플로팅 액션 버튼이라고도 부르며, 페이지에 고정적으로 노출시키는 요소입니다. 자주 사용하는 기능을 플로팅 버튼으로 배치하여 서비스의 사용성을 높일 수도 있고, 배너 등 비즈니스 목적으로 강조하고 싶은 요소를 플로팅 버튼 으로 배치하여 사용자로 하여금 특정 액션을 하도록 유도할 수 있습니다.

Floating button

배지, 또는 태그라고 하며 상위 요소의 상태, 개수 등 부가적인 정보를 나타내는 요소입니다. 경우에 따라 링크를 연결하기도 하며, 상태 및 중요도에 따라 색상의 단계를 갖고 제작합니다.

프로그레스 바는 단계, 진행도 등의 현재 상태를 표시하는 요소입니다. 경우에 따라 선형 외에도 원형 등의 다양한 형태로 표현할 수도 있습니다.

스켈레톤 UI는 특정 페이지를 간단한 도형으로 표현한 요소로, 페이지에 대한 레이아웃을 구상할 때 스켈레톤 UI로 표현합니다.또한, 스켈레톤 UI를 로딩 화면에 배치하면 사용자로 하여금 페이지 로딩이 빠르다고 느껴지도록 하는 효과를 가지고 있어 로딩 화면에 사용되기도 합니다.