UI 용어를 정리해야 하는 이유
한눈에 보는 UI 용어 A to Z(1)
배경
일을 하다 보면 비슷한 UI 용어들이 생각보다 많이 보이는데요.
이 용어들을 각자 쓰고 싶은 대로 쓰다 보면 서로 의미를 잘못 이해하거나 정확히 파악하기 어려운 경우가 종종 발생합니다.
실제로 회사별, 팀별로 다른 용어를 사용하기도 하며, 심지어 UI용어를 정리한 포스팅끼리도 서로 다르게 소개하는 경우가 많습니다.
결국은 팀 내, 타 부서와의 원활한 소통을 위해서 UI 용어는 한 번쯤 정리가 필요하다고 생각했습니다.
가장 최적화된 소통을 위해 UI 용어는 국내에서 가장 많이 사용하는 기준으로 정리하였습니다.
이 글을 쓰기 위해 많은 블로그를 읽으며 도움을 받았고, 정리 중 모달과 팝업의 늪에 빠지면서 이 부분을 제외한 용어들 먼저 공유하기로 했습니다. (모달과 팝업은 to be contined...)
※ 모든 작업물은 티그리스 홈페이지 및 서비스 위주로 이미지를 가공하였고, 그 외에 추가로 필요한 화면들은 하단에 출처를 기재하였습니다. 모든 자세한 내용은 하단 pdf 첨부파일로 다운로드하여 보실 수 있습니다.
메뉴 종류
1) GNB
웹사이트 최상위 메뉴를 GNB라고 부릅니다. 모든 페이지에서 공통적으로 보이는 메뉴바로 대부분 상단에 위치합니다.
2) LNB
GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉴로 서브 페이지, 특정 메뉴로 이동할 수 있습니다.
3) SNB
상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB(Left Navigation Bar)라고 부릅니다.
4) FNB, Footer
최하단 메뉴로 FNB라고 부릅니다. 로고, 주소, 전체 메뉴 영역 외에도 SNS 채널, 패밀리 사이트 등을 배치하기도 합니다.
5) Tab Menu
병렬형 콘텐츠를 보여줄 경우 상단에 Tab 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있습니다.
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
이미지를 사용자가 입력할 수 있는 공간을 플레이스 홀더 이미지 혹은 아바타라고 부릅니다.
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
특정 웹사이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘입니다.
마치며
UI 용어를 정리하면서 그동안 헷갈렸던 내용에 대해 다시 한번 공부할 수 있는 시간이었습니다.
디자인팀은 다양한 직군과 협업을 해야 하는 사람들이기에 더 좋은 방향으로 끊임없이 제안하고 소통해야 한다고 생각하는데요.
이왕 일하는 거 제대로 ‘소통’하면 좀 더 쉽고 즐겁게 일을 할 수 있지 않을까요?
사실 용어를 정리하는 이유도 결국은 소통을 더 잘하기 위한 일이기 때문이니깐요.
다음은 모두가 헷갈리고 어려워하는 모달과 팝업에 대한 글을 들고 오겠습니다.
긴 글 읽어주셔서 감사합니다 :)
준비 중인 이야기
한눈에 정리하는 UI 용어 모음집 A to Z (2) - 모달과 팝업
티그리스 홈페이지 리뉴얼 이야기
서비스 캐릭터 리뉴얼 이야기
IT기업에서 많이 사용하는 아이콘 배포하기
디자인팀 매뉴얼 만들기
참고자료
https://blog.naver.com/dldlfduek/222549009210
https://oriyong.tistory.com/57#recentEntries
https://yozm.wishket.com/magazine/detail/1302/
https://brunch.co.kr/@b30afb04c9f54dc/3#comment
2편
https://brunch.co.kr/@tigrisdesign/3
제작. 티그리스 디자인팀
궁금한 점이나 다양한 의견은 아래 메일로 연락 주세요.
design@tigrison.com
