brunch

You can make anything
by writing

C.S.Lewis

by 티그리스 디자인팀 Nov 28. 2022

UI 용어를 정리해야 하는 이유

한눈에 보는 UI 용어 A to Z(1)



배경

일을 하다 보면 비슷한 UI 용어들이 생각보다 많이 보이는데요.
이 용어들을 각자 쓰고 싶은 대로 쓰다 보면 서로 의미를 잘못 이해하거나 정확히 파악하기 어려운 경우가 종종 발생합니다. 

실제로 회사별, 팀별로 다른 용어를 사용하기도 하며, 심지어 UI용어를 정리한 포스팅끼리도 서로 다르게 소개하는 경우가 많습니다. 

결국은 팀 내, 타 부서와의 원활한 소통을 위해서 UI 용어는 한 번쯤 정리가 필요하다고 생각했습니다.

가장 최적화된 소통을 위해 UI 용어는 국내에서 가장 많이 사용하는 기준으로 정리하였습니다.


이 글을 쓰기 위해 많은 블로그를 읽으며 도움을 받았고, 정리 중 모달과 팝업의 늪에 빠지면서 이 부분을 제외한 용어들 먼저 공유하기로 했습니다. (모달과 팝업은 to be contined...)

※ 모든 작업물은 티그리스 홈페이지 및 서비스 위주로 이미지를 가공하였고, 그 외에 추가로 필요한 화면들은 하단에 출처를 기재하였습니다. 모든 자세한 내용은 하단 pdf 첨부파일로 다운로드하여 보실 수 있습니다.




메뉴 종류

1) GNB

웹사이트 최상위 메뉴를 GNB라고 부릅니다. 모든 페이지에서 공통적으로 보이는 메뉴바로 대부분 상단에 위치합니다.   


2) LNB

GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉴로 서브 페이지, 특정 메뉴로 이동할 수 있습니다.




(좌)SNB / (우)FNB

3) SNB

상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB(Left Navigation Bar)라고 부릅니다.


4) FNB, Footer

최하단 메뉴로 FNB라고 부릅니다. 로고, 주소, 전체 메뉴 영역 외에도 SNS 채널, 패밀리 사이트 등을 배치하기도 합니다.




(좌) Tab Menu / (우) FAB

5) Tab Menu

병렬형 콘텐츠를 보여줄 경우 상단에 Tab 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있습니다.


6) FAB

플로팅 버튼은 페이지 내에서 관련성이 높거나 자주 사용되는 동작을 주로 우측 하단에 표시합니다.




(좌) Splash Screen / (우) Hamburger

7) Splash Screen

앱이 시작할 때 보여주는 화면으로 앱의 로고나 성격이 보이는 콘텐츠로 홍보합니다. (보통 3초 내외)


8) Hamburger

웹이나 모바일 상단에 위치한 버튼으로 이 버튼은 전체 메뉴를 한눈에 볼 수 있는 역할을 합니다.

 



9) Drawer

드로어는 평상시에는 닫혀있다가 클릭하면 열리는 방식으로 보통 앱의 상단에 위치합니다.


10) Accodian

내용을 펼쳤다 접을 수 있는 컴포넌트로 모바일에서 리스트 형식을 효과적으로 표현합니다.




11) BTN, Button

버튼은 크게 활성화된 상태와 비활성화된 상태 2가지로 나뉩니다.

그 외에 사용자의 행동에 따라 다양한 상태로 표현합니다.




(좌) Label, Text Field / (우) Place Holder, Text Area, Place Holder Images

12) Label

주로 입력 필드 상단이나 좌측에 입력할 정보에 대해 설명해 주는 문구입니다.


13) Text Field

한 줄 텍스트를 입력하는 폼 필드로 텍스트 입력 혹은 수정하는 필드입니다.


14) Place Holder 

텍스트 필드 안에 짧은 힌트를 입력 상자에 표시하여 사용자의 입력을 유도합니다.


15) Text Area

주로 긴 문장의 텍스트를 입력하는 경우 텍스트 에어리어를 사용합니다.


16) Place Holder Images

이미지를 사용자가 입력할 수 있는 공간을 플레이스 홀더 이미지 혹은 아바타라고 부릅니다.




(좌) Check Box, Radio BTN / (우) Toggle, Slider

17) Check Box

중복 선택이 가능한 선택 수단입니다.


18) Radio BTN

중복 선택이 불가한 버튼 형식의 선택 수단입니다.


19) Toggle

활성화된 상태와 비활성화된 상태 2가지로 표현합니다.


20) Slider

양쪽 끝에 위치한 아이콘을 선택하여 움직이며 수치 값, 카테고리의 배율을 지정하여 표현합니다.




(좌) Select Box, Drop Down / (우) Progress Bar, Loader

21) Select Box

셀렉트 박스는 사용자에게 어떤 특정 값을 선택하게 할 때 사용합니다.


22) Drop Down 

버튼 뒤로 숨겨진 메뉴를 표현할 때는 드롭다운 메뉴로 사용합니다.


23) Progress Bar

작업의 진행 상태를 사용자에게 알려줄 때 사용하는 컴포넌트로 디자인은 원형, 바 형태 등으로 표현합니다.


24) Loader

화면이 진행 중일 때 보이는 표현 방식으로 보통 5초 내외로 표시합니다.




(좌) Tooltips, Carousel / (우) Navigation

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




브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari