디자이너가 알아야할 필수 UI 용어 2편

2024.02.13(화)

UI 용어 정리 2편

화면설계를 하거나 개발자 혹은 다른 부서 팀원들과 효율적인 소통을 위해 알아두면 좋은 UI 용어 1편에 이어
2편을 공유드립니다.

01. SNB(Side Navigation Bar) 혹은 LNB(Left Navigation Bar)이라고 부릅니다.

02. 아코디언(Accodian): 내용을 펼쳤다 접을 수 있는 컴포넌트, 'V'버튼은 아코디언 토글 버튼이라 부릅니다.

03. 디바이더(Dividers): 구분선이라고도 불리며 그룹화된 항목을 분리하는 데 사용합니다.

01. 메뉴(Menu): 목록

02. 메뉴 버튼 종류

01. 체크박스(Check Box): 사용자가 하나 이상의 항목을 중복으로 선택할 수 있는 UI 요소

02. 라디오 버튼(Radio Button): 여러 옵션 중 하나만 선택할 수 있는 UI 요소

01. 캐러셀(Carousel): 스와이퍼 슬라이드(Swiper Slide)라고도 불리며 한 영역에서 여러 이미지나 콘텐츠를 순환
하여 보여주는 컴포넌트

02. 페이징 버튼 혹은 페이지 인디케이터

03. 좌우버튼

스낵바(Snack Bar)

사용자가 수행한 작업에 대한 결과를 간단한 텍스트로 보여주는 형태(메일이 성공적으로 전송되었습니다)로 메시지는 몇 초 뒤 자동으로 사라집니다. FAB(Floating Action Button) 버튼이 있을 경우, 주로 FAB 버튼 위로 노출이 됩니다.

데이트 픽커(Date Pickers): 주로 날짜, 시간을 선택할 수 있는 부분에 사용됩니다.

01. 텍스트 필드 드롭 다운(Text Field Drop-down) 방식

02. 직접 입력하는 형태로 해당 구역 클릭 시 숫자 패드 노출

03. 스피너 데이트 픽커(Spinner Date Picker) 또는 Wheels 타입 데이트 픽커 라고도 불립니다.

01. 라디오 버튼(Radio Button): 중복 선택이 불가능한 버튼

02. 드롭다운 리스트(Drop Down List): 'v' 토글 버튼 클릭시 리스트 노출

03. 플레이스 홀더(Place Holder): 어떤 정보를 입력해야하는지 입력 필드에 표시되는 메시지

[화면설계 예시]

✅ 검색방법: 임의어 default

✅ 검색 구분

- 검색 제목: 전체(default), 리스트(현행00법 A, B, C 법령) 선택

- 구분: 전체(default), 리스트(A,B,C,D) 선택

- 검색어: 입력된 검색어

- 검색시 검색 결과 페이지 노출

01. 패비콘(Favicon): 파비콘이라고도 불리기도 하며 웹 사이트를 볼 때 브라우저 탭에 표시되는 아이콘으로 일반적으로 표시되는 크기는 16x16픽셀입니다. (최대 32x32)

[크기]

- 브라우저용: 16x16

- 작업 표시줄 단축키용: 32x32

- 데스크탑 단축키용: 96x96

- 애플 터치용: 180x180

02. 브라우저별 패비콘 지원

UI 용어들을 정리하면서 저도 다시 한 번 배움의 시간을 가졌습니다. 앞으로 더 알게 되는 부분들이 있으면 하나씩
공유드릴 수 있도록 하겠습니다. 위 내용 혹은 궁금한 부분이 있으시면 아래 '주제 제안하기' 링크로 문의 주세요.
감사합니다. 😊

📌 주제 제안하기

<참고자료>

2. 위키피디아