✏ 컴포넌트 종류를 알기전 미리 알아두어야할 요소의 상태값
Enabled: 상호작용이 가능한 상태Disabled: 동작할 수 없는 비활성화 상태Hover: 마우스 포인터가 올려진 상태Focused: 키보드 or 음성 등의 입력을 통해 강조된 상태Pressed: 마우스 또는 포인터로 클릭 or 터치
✅ GNB
웹사이트 최상단에 위치한 메뉴바를 'GNB(Global Navigation Bar)'라고 부른다.
약자의 뜻에 맞게 웹, 앱 전체에 동일하게 노출되는 메뉴이며, 이탈률과 전환율에 가장 큰 영향을 미치기 때문에 배열 순서를 충분히 고려해서 배치해야 한다.
✅ LNB
GNB 메뉴를 클릭하거나 마우스를 hover 했을 때 나타나는 소메뉴(sub menu)를 LNB(Local Naviation Bar)라고 부른다.
최상위 카테고리 하위에 위치한 특정한 메뉴로 이동할 수 있다.
✅ Hero Banner (Main Banner)
웹사이트, 앱등 메인 상단에 위치하는 대형 배너를
히어로배너또는메인배너라고 부른다.
헤더 영역에서 사용자 눈에 띄게 배치되기 때문에 사용자의 주목을 끄는데 효과적이다.
그렇기에 사용자에게 가장 중요한 콘텐츠를 전달하는 역할로 사용된다.
단순 이미지, 캐러셀 등 다양한 형태로 실험되고 있는 영역이다.
✅ Drop Down List
출처: Unity
버튼을 클릭하거나 커서를 올렸을 때, 세부 항목이 나타나며 그 중 값을 선택할 수 있는 요소를 말한다.
주로 여러 값이 있고, 특정 하나를 선택해야할 때 사용된다.
항목을 여러개로 나열하지 않고 드롭 다운으로 간결하게 표현할 수 있는 장점이 있다.
✅ 모달과 팝업의 차이
모달은 기존에 열려있던 페이지 위에 새로운 레이어를 덮은 요소이다.
팝업은 모달과 달리 페이지 위에 또 하나의 브라우저를 띄우는 요소이다.
두 요소 모두 주의사항 또는 공지사항 등 사용자의 이목을 끌고 중요한 정보를 전달할 때 사용되지만, 사용자의 환경에 따라 팝업이 차단되는 경우가 있기 때문에 필수적인 노출 사항은 모달을 통해 노출하는 편이 좋다.
✅ 스낵바, 토글, 툴팁
스낵바(Snack Nar) : 사용자가 수행한 작업 결과를 간단한 텍스트 레이블 형태로 나타냄
대략 4초 뒤 자동으로 사라지며,토스트 팝업과 차이가 있다.
토글(Toggle) : 설정 켜기/끄기와 같은 항목들에 적용된다.
툴팁(Tooltip) : 마우스를 hover한 상태에 노출되며 부연 설명을 표시할 때 유용하게 사용된다.
💡 알아보기
토스트 팝업: 토스트기에서 토스트가 튀어나오는 것처럼 작동하여 토스트 팝업이라고 불린다.
✅ Accordion
내용을 펼쳤다 접었다 할 수 있는 컴포넌트를 말한다.
리스트 접기, 펼치기의 형태로 표현할 수 있다.
콘텐츠나 메뉴를 접었다 펼칠 수 있기 때문에 효과적인 레이아웃 구축이 가능한 장점이 있다.
✅ Bread Crumb
브래드 크럼은 정보 구조 기법이다. 빵 부스러기라는 이름처럼 사용자가 지나온 위치를 포함하여, 현재의 위치를 시각적 계층 구조로 나타내는 내비게이션이다.
