어느 기획자의 기록 저장소

기획자가 알아야 할 UI 용어 정리 본문

IT기획자

기획자가 알아야 할 UI 용어 정리

Alicia Jang 2022. 2. 20. 15:16
GNB
(Global Navigation Bar)
어느 페이지에서나 주로 상단에 항상 노출되는 메뉴 바 (네비게이션 시스템)
LNB
(Local Navigation Bar)
PC 화면에서 주로 사용되는 방식으로 특정 페이지에서 동일하거나 하위 Depth의 메뉴로 이동하기 위해 사용되는 왼쪽에 위치하는 하이퍼링크 메뉴 리스트
FNB
(Foot Navigation Bar)
화면의 하단 Footer 영역에 고정적으로 노출되는 하단 메뉴.
ex) 개인정보처리방침, 이용약관, 회사소개 등
SS
(Sky Scraper)
PC 화면에서 주로 사용되는 방식으로 스크롤에 따라 이동하며 항상 같은 자리에 위치하는 네비게이션 혹은 배너영역. 주로 오른쪽에 위치하며 '플로팅 배너'라 부르기도 한다.
헤더
(Header)
웹 사이트 상단에 노출되는 영역으로 CI나 햄버거 메뉴, GNB가 위치하는 영역.
푸터
(Footer)
웹 사이트 하단에 노출되는 영역으로 회사 정보나 사업자 정보가 노출되는 영역.
반응형 웹
(Responsive Web)
가로 크기에 변화를 줄 때, 콘텐츠들이 웹 브라우저의 가로 사이즈에 맞춰 유동적으로 재배치되는 형태. 웹 브라우저의 가로 너비에 따라 유동적으로 레이아웃, 이미지, 미디어 쿼리가 어우러져 환경에 반응하여 스스로 적응하는 방식.
적응형 웹과 큰 차이점은 브라우저 사이즈를 줄일 때 비율이 줄어드는 변화가 끊김없이 보여진다.
적응형 웹
(Adaptive Web)
PC, Tablet, Mobile 용으로 특정 사이즈를 정해놓은 해상도를 기준으로 만들어놓은 웹.
반응형 웹과 차이점은 브라우저 크기가 바뀔 때 콘텐츠가 변하며 끊김현상이 나타난다. 하지만 반응형 웹에 비해 각 기기에 최적화된 디자인이 적용되어 있어 어색한 영역이 적은 편인 경우가 많다.
얼럿
(Alert)
특정한 경우에 사용자에게 알림창을 띄울 때 사용하며 안내 메시지 문구와 [확인] 버튼으로 이루어져 있다.
컨펌창
(Confirm)
특정한 경우에 사용자에게 선택을 할 수 있는 메시지 문구를 띄우고 [확인]과 [취소] 버튼으로 2가지 분기 처리할 수 있는 창을 구현하고자 할 때 사용한다.
셀렉트 박스
(Select Box)
화살표를 누르면 선택할 수 있는 목록이 펼쳐지는 메뉴 박스.
'드롭 다운 (Drop Down) 메뉴' 라고도 한다.
라디오 버튼
(Radio Button)
선택시 동그라미가 까맣게 변하는 형태로 N개중 1개만 선택할 때 사용
(단일 선택만 가능)
체크 박스
(Check Box)
N개 중에서 여러개를 동시에 선택할 때 네모에 선택시 체크가 표시되는 형태
(다중 선택 가능)
Drawer
모바일 상에서 PC의 GNB처럼 사용되는 메뉴 영역으로 한쪽면에서 덮이듯이 노출된다. 평상시에는 닫혔다가 당길 때 열리는 서랍과 같다고 해서 'Drawer'라고 부르기도 하고 슬라이딩되면서 나오는 모션에서 착안하여 'Sliding Menu'라고도 부른다.
햄버거 버튼
주로 모바일에서 사용되고 석삼(三)처럼 생긴 drawer 메뉴 호출 버튼

▼ 출처 :

현업 기획자 도그냥이 알려주는 서비스 기획 스쿨

- 사수없이 시작하는 웹/앱 프로덕트 실전 입문서 -

https://book.naver.com/bookdb/book_detail.naver?bid=16378491

Comments