프런트엔드 개발자가 알아야 할 기본적인 UI 용어

프런트엔드 개발자로서 UI에 대한 기본적인 용어를 알고 있어야 합니다. UI는 사용자와 상호작용하는 인터페이스를 의미하며, 다양한 요소들로 구성됩니다. 이번 글에서는 UI 요소의 상태, GNB와 LNB, 메인 배너 또는 히어로 배너, 드롭 다운 리스트, 모달과 팝업, 스낵바와 토글, 툴팁과 인풋 필드, 체크박스와 아코디언, 브레드 크럼에 대해 간단히 설명하겠습니다.

UI 요소의 상태

UI 요소의 상태는 UI 요소들이 사용자의 입력에 따라 변화하는 것을 말합니다. 예를 들어, 버튼은 일반 상태에서는 회색이지만, 클릭하면 파란색으로 바뀌고, 비활성화되면 흐릿하게 보이는 등의 변화가 있습니다. UI 요소의 상태는 일반, 활성, 비활성, 포커스, 선택 등 다섯 가지의 상태 값을 가질 수 있습니다.

GNB와 LNB

GNB와 LNB는 웹사이트의 내비게이션을 구성하는 요소입니다. GNB는 Global Navigation Bar의 약자로, 웹사이트 최상단에 위치한 주요 메뉴를 말합니다. LNB는 Local Navigation Bar의 약자로, GNB 메뉴를 클릭하거나 마우스 오버 상태일 때 나타나는 소메뉴를 말합니다.

메인 배너 또는 히어로 배너

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

드롭 다운 리스트

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

모달과 팝업

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

스낵바와 토글

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

툴팁과 인풋 필드

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

체크박스와 아코디언

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

브레드 크럼

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

마치며

이상으로 프런트엔드 개발자가 알아야 할 기본적인 UI 용어에 대해 설명했습니다. UI는 사용자와 웹사이트 간의 소통의 매개체이므로, UI 요소들의 의미와 기능을 잘 이해하고 적절하게 활용하는 것이 중요합니다.