프론트엔드 개발자라면 알아야 할 UI 용어

UI 요소의 상태

UI 요소의 상태는 UI 요소들이 사용자의 입력에 따라 변화하는 것을 말한다.

• 일반
• 활성
• 비활성
• 포커스
• 선택

GNB & LNB

GNB와 LNB는 웹사이트의 내비게이션을 구성하는 요소이다

GNB는 Global Navigation Bar의 약자로, 웹사이트 최상단에 위치한 주요 메뉴를 말한다.

LNB는 Local Navigation Bar의 약자로, GNB 메뉴를 클릭하거나 마우스 오버 상태일 때 나타나는 소메뉴를 말한다

메인 배너 또는 히어로 배너

메인 배너 또는 히어로 배너는 웹사이트 메인 상단에 위치하는 대형 배너이다.

이 영역은 사용자의 주목을 끄고 중요한 콘텐츠를 전달하는 역할을 한다. 메인 배너 또는 히어로 배너에는 이미지, 텍스트, 버튼 등의 요소가 포함될 수 있다.

드롭 다운 리스트

드롭 다운 리스트는 버튼을 클릭하거나 커서를 올렸을 때, 세부 항목들이 펼쳐지고 그중 하나의 항목을 선택할 수 있는 요소이다. 드롭 다운 리스트는 공간을 절약하고 사용자에게 선택의 폭을 제공하는 장점이 있다.

모달과 팝업

모달과 팝업은 사용자에게 추가적인 정보나 작업을 제공하는 요소이다. 모달은 기존에 열려있던 페이지 위에 새로운 레이어를 덮는 기능이고, 팝업은 페이지 위에 또 하나의 브라우저 페이지를 띄우는 개념이다. 모달과 팝업은 사용자의 집중도를 높이고 중요한 내용을 강조할 수 있지만, 남용하면 사용자 경험을 저해할 수 있다.

스낵바와 토글

스낵바와 토글은 사용자가 수행한 작업에 대한 결과나 설정을 보여주는 요소이다. 스낵바는 사용자가 수행한 작업에 대한 결과를 간단한 텍스트 레이블 형태로 보여주는 요소이고, 토글은 설정 켜기/끄기와 같은 항목에 적용할 수 있는 요소이다. 스낵바와 토글은 사용자에게 피드백을 제공하고 인터랙션을 증진시킬 수 있다.

툴팁과 인풋 필드

툴팁과 인풋 필드는 사용자에게 도움이 되는 요소이다. 툴팁은 특정 화면 요소에 마우스를 가져가면 나타나는 설명이고, 인풋 필드는 사용자가 텍스트를 입력하고 편집할 수 있는 입력란이다. 툴팁과 인풋 필드는 사용자에게 정보를 제공하고 입력을 도와준다.

체크박스와 아코디언

체크박스와 아코디언은 여러 개의 목록을 다루는 요소이다. 체크박스는 여러 개의 목록에서 값을 다중 선택해야 할 경우 사용하는 컴포넌트이고, 아코디언은 내용을 펼쳤다가 접을 수 있는 컴포넌트이다. 체크박스와 아코디언은 사용자에게 선택의 자유와 내용의 가시성을 제공한다.

브레드 크럼

브레드 크럼은 PC 웹 환경에서 자주 활용되는 정보 구조 기법이다. 브레드 크럼은 사용자가 지나온 위치를 포함하여 현재의 위치를 시각적 계층 구조로 나타내는 내비게이션이다. 브레드 크럼은 사용자에게 현재 위치를 인식하고 이전 단계로 쉽게 돌아갈 수 있도록 도와준다.