[월]▸ UI/UX 디자인 용어 정리

UXUI 용어 정리

• GNB : 웹사이트 최상위 메뉴를 GNB라고 부름. 모든 페이지에서 공통적으로 보이는 메뉴바. 대부분 상단에 위치
• LNB : GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉴로 서브 페이지, 특정 메뉴로 이동 가능
• SNB : 상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB(Left Navigation Bar)라고 부름
• FNB : Footer : 최하단 메뉴로 FNB 라고 부름. 로고, 주소, 전체 메뉴 영역 외에도 SNS 채널, 패밀리 사이트 등을 배치
• Tab Menu : 병렬형 콘텐츠를 보여줄 경우 상당에 Tab 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있음.
• FAB : 플로팅 버튼은 페이지 내에서 관련성이 높거나 자주 사용되는 동작을 주로 우측 하단에 표시함.
• Splash Screen : 앱이 시작할 때 보여주는 화면으로 앱의 로고나 성격이 보이는 콘텐츠로 홍보 (보통 3초 내외)
• Hamburger : 웹이나 모바일 상당에 위치한 버튼으로 이 버튼은 전체 메뉴를 한눈에 볼 수 있는 역할
• Drawer : 드로어는 평상시에는 닫혀있다가 클릭하면 열리는 방식으로 보통 앱의 상단에 위치
• Accodian : 내용을 펼쳤다 접을 수 있는 컴포넌트로 모바일에서 리스트 형식을 효과적으로 표현
• Enavled=Default : 사용자가 터치하기 전으로, 상호작용이 가능한 상태일 때(버튼)
• Hover : 사용자가 버튼 위에 마우스를 올렸을 때 (버튼)
• Focus : 사용자의 키보드 혹은 음성 입력을 통해 강조된 상태 (버튼)
• Pressed : 사용자가 버튼을 눌렀을 때 상태 (버튼)
• Disabled : 비활성화 상태로, 버튼을 탭할 수 없는 상태 (버튼)
• Progress : 버튼 클릭 시 진행 중인 상태- 보통 다운로드, 저장 등 전환중인 상태에 표현 (버튼)
• BTN, Button : 버튼은 크게 활성화된 상태와 비활성화된 상태 2가지. 
• Label : 주로 입력 필드 상단이나 좌측에 입력할 정보에 대해 설명해 주는 문구
• Text Field : 한 줄 텍스트를 입력하는 폼 필드로 텍스트 입력 혹은 수정하는 필드
• Place Holder : 텍스트 필드 안에 짧은 힌트를 입력 상자에 표시하여 사용자의 입력을 유도
• Text Area : 주로 긴 문장의 텍스트를 입력하는 경우 텍스트 에어리어를 사용
• Place Holder Images : 이미지를 사용자가 입력할 수 있는 공간을 플레이스 홀더 이미지 혹은 아바타라고 부름
• Check Box : 중복 선택이 가능한 선택 수단
• Radio BTN : 중복 선택이 불가한 버튼 형식의 선택 수단
• Toggle : 활성화된 상태와 비활성화된 상태 2가지 표현
• Slider : 양쪽 끝에 위치한 아이콘을 선택하여 움직이며 숮치 값, 카테고리의 배율을 지정하여 표현
• Select Box : 셀렉트 박스는 사용자에게 어떤 특정 값을 선택하게 할 때 사용
• Drop Down : 버튼 뒤로 숨겨진 메뉴를 표현할 때 사용
• Progress Bar : 작업의 진행 상태를 사용자에게 알려줄 때 사용하는 컴포넌트로 디자인은 원형, 바 형태 등으로 표현
• Loader : 화면이 진행 중일 때 보이는 표현 방식으로 보통 5초 내외 표시
• Tooltips : 툴팁은 레이블, 아이콘 등에 간단한 설명 텍스트가 필요한 경우 사용
• Carousel : 하나의 화면에서 두 개 이상의 콘텐츠를 보여주는 방식으로 콘텐츠를 나열해서 보여줄 때 사용
• Navigation : 앱에서 하단에 위치한 내비게이션으로 보통 4~5개 정도 카테고리와 레이블을 함께 표시
• Breadcrumbs : 웹 혹은 앱에서 현재 위치를 보여주는 내비게이션 표현
• Pagination : 콘텐츠가 많은 경우 스크롤이 길어져 페이지네이션으로 표현
• Favicon : 특정 웹사이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘