타부서와 원활한 소통을 위해서는 UI용어를 정리하는 것이 중요하다.
'티그리스 디자인팀'의 글을 참고하여 국내에서 가장 많이 사용하는 기준으로 이번 아티클을 분석하려고 한다.
UI 용어를 정리해야 하는 이유 (brunch.co.kr)
#1 오늘의 아티클
▼ UI 용어를 정리해야 하는 이유
#2 아티클 정보 요약
▼ 메뉴종류
1) GNB
- 웹사이트 최상위 메뉴. 모든 페이지에서 공통적으로 보이는 메뉴바로 대부분 상단에 위치.
2) LNB
- GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉼 서브 페이지, 특정 메뉴로 이동할 수 있는 메뉴.
3) SNB
- 상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB(Left Navigation Bar).
4) FNB, Footer
- 최하단 메뉴. 로고, 주소, 전체 메뉴 영역 외에도 SNS채널, 패밀리 사이트 등을 배치하기도 함.
5) Tab Menu
- 병렬형 콘텐츠를 보여줄 경우 상단에 Tap 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있음.
6) FAB
- 플로팅 버튼은 페이지 내에서 고나련성이 높거나 자주 사용되는 동작을 주로 우측 하단에 표시.
7) Splash Screen
- 앱이 시작할 때 보여주는 화면으로 앱의 로고나 성격이 보이는 콘텐츠로 홍보.(보통 3초 내외)
8) Hamburger
- 웹이나 모바일 상단에 위치한 버튼으로 이 버튼은 전체 메뉴를 한눈에 볼 수 있는 역할.
9) Drawer
- 드로어는 평상시에는 닫혀있다가 클릭하면 열리는 방식. (보통 앱의 상단에 위치)
10) Accodian
- 내용을 펼쳤다 접을 수 있는 컴포넌트로 모바일에서 리스트 형식을 효과적으로 표현.
11) BTN, Button
- 버튼은 크게 활성화 된 상태와 비활성화된 상태 2가지로 나뉜다. 그 외에 사용자의 행동에 따라 다양한 상태로 표현.
12) Label
- 주로 입력 필드 상단이나 좌측에 입력할 정보에 대해 설명해 주는 문구.
13) Text Field
- 한 줄 텍스트를 입력하는 폼 필드로 텍스트 입력 혹은 수정하는 필드.
14) Place Holder
- 텍스트 필드 안에 짧은 힌트를 입력 상자에 표시. (사용자의 입력을 유도하는 기능)
15) Text Area
- 주로 긴 문장의 텍스트를 입력하는 경우 텍스트 에어리어를 사용.
16) Place Holder Images
- 이미지를 사용자가 입력할 수 있는 공간. (or 아바타라고도 부름)
17) Check Box
- 중복 손택이 가능한 선택 수단.
18) Radio BTN
- 중복 선택이 불가한 버튼 형식의 선택 수단.
19) Toggle
- 활성화된 상태와 비활성화된 상태 2가지로 표현.
20) Slider
- 양쪽 끝에 위치한 아이콘을 선택하여 움직이며 수치 값, 카테고리의 배율을 지정하여 표현.
21) Select Box
- 사용자에게 어떤 특정 값을 선택하게 할 때 사용.
22) Drop Down
- 버튼 뒤로 숨겨진 메누를 표현할 때 주로 사용.
23) Progress Bar
- 작업의 진행 상태를 사용자에게 알려줄 때 사용하는 컴포넌트. (디자인은 원형, 바 형태 등으로 표현)
24) Loader
- 화면이 진행 중일 때 보이는 표현 방식. (보통 5초 내외로 표시)
25) Tooltips
- 레이블, 아이콘 등에 간단한 설명 텍스트가 필요한 경우 사용.
26) Carousel
- 하나의 화면에서 두 개 이상의 콘텐츠를 보여주는 방식. (콘텐츠를 나열해서 보여줄 때 주로 사용)
27) Navigation
- 앱에서 하단의 위치한 내비게이션으로 보통 4-5개 정도 카테고리와 레이블을 함께 표시.
28) Breadcrumbs
- 웹 혹은 앱에서 현재 위치를 보여주는 내비게이션으로 표현.
29) Pagination
- 콘텐츠가 많은 경우 스크롤이 길어져 페이지네이션으로 표현.
30) Favicon
- 특정 웹싸이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘.
#3 인사이트
- 알고있는 명칭도 있지만 완전히 생소한 명칭이 있어 신기하면서도 타 직군과 커뮤니케이션을 할 때 많은 주의가 필요하겠구나 생각이 들었다.
- 디자이너뿐만 아니라 다른 직군들도 UI용어가 헷갈릴 수 있다고 생각이 든다. 그림과 함께 명칭을 언급하면서 소통하는 것이 원활한 커뮤니케이션이 가능할 듯 싶다.
- 회사마다 언급하는 명칭은 다르겠지만 UI를 정리하는 것은 '소통'을 더 쉽고 즐겁게 하기 위함이니 틈틈히 용어에 관한 공부를 하는 것이 좋아보인다.
'Article Study' 카테고리의 다른 글
[아티클 인사이트 #10] 네이버 UI 업데이트 분석 (0) | 2024.02.08 |
---|---|
[아티클 인사이트 #9] UI를 위한 색 (0) | 2024.02.07 |
[아티클 인사이트 #7] 휴리스틱 평가로 내 ux ui가 좋은지 확인하기 (0) | 2024.02.05 |
[아티클 인사이트 #6] 문제를 해결하는 디자이너 관점의 다양한 해법 (0) | 2024.01.31 |
[아티클 인사이트 #5] 2024 UI/UX 디자인 트렌드 (0) | 2024.01.30 |