Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 정처기
- 정보처리기사실기
- GA
- 정처기합격률
- 정처기필기합격률
- 2022정처기실기
- 정보처리기사
- 기획자
- 개발자
- UX라이팅
- SB
- UX Writing
- IT기획
- 서비스기획
- 2022정보처리기사
- GoogleAnalytics
- 화면설계서
- 스토리보드
- IT개발자
- IT개발자자격증
- IT자기계발
- 2022정처기
- 정보처리기사합격률
- 서비스기획실무
- 구글애널리틱스
- 정처기실기
- 정처기실기합격률
- IT자격증
- 정처기시험
- 일상
Archives
- Today
- Total
어느 기획자의 기록 저장소
기획자가 알아야 할 UI 용어 정리 본문
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
'IT기획자' 카테고리의 다른 글
[서비스기획] 기획자가 자주 빠뜨리는 예외 케이스 (0) | 2023.05.07 |
---|---|
[서비스기획] 개발자가 좋아하는 기획안 쓰는 방법 (0) | 2023.05.07 |
[서비스기획] 프로젝트 단계별 업무 정의, 요구사항 분석, 상위 기획 (1) | 2023.05.07 |
2주차 심화화면설계_220709 (0) | 2022.07.09 |
1주차 심화화면설계_220702 (0) | 2022.07.09 |
Comments