(아티클 분석) UI 용어 정리

2025.01.10

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

https://brunch.co.kr/@tigrisdesign/2

위 링크에 있는 이미지 첨부된 원본 글 참고

팀 내, 타 부서와의 원활한 소통을 위해서 UI 용어 정리

 

메뉴 종류

1) GNB

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

 

2) LNB

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

 

3) SNB

상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB라고 부른다.

 

4) FNB, Footer

최하단 메뉴로 FIB라고 부릅니다. 로고, 주소, 전체 메뉴 영역 외에도 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) Sclcet Box

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

 

22) Drop Down

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

 

23) Progress Bar

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

 

24) Loader

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

 

25) Tooltips

툴팁은 레이블, 아이콘 등에 간단한 설명 텍스트가 필요한 경우 사용한다.

 

26) Carousel

하나의 화면에서 두 개 이상의 콘텐츠를 보여주는 방식으로 콘텐츠를 나열해서 보여줄 때 주로 사용한다.

 

27) Naigation

앱에서 하단에 위치한 내비게이션으로 보통 4~5개 정도 카테고리와 레이블을 함께 표시한다.

 

28) Breadcrumbs

웹 혹은 앱에서 현재 위치를 보여주는 내비게이션으로 표현한다.

 

29) Pagination

콘텐츠가 많은 경우 스크롤이 길어져 페이지네이션으로 표현한다.

 

30) Favicon

특정 웹사이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘이다.

 

인사이트

좋았던 점

평소에 어떤 기능인지는 알고 있어도 UI 용어로 뭐라고 부르는지 잘 몰랐었는데 이번 아티클을 읽으면서 많은 UI 용어를 배울 수 있었고, 이미지에 번호로 표시해서 있어서 어떤 기능을 설명하는 건지 이해하기 쉬웠다.

아쉬운 점

이미지랑 같이 봐야 어떤 용어인지 잘 생각이 나서 나중에 내가 스스로 쓴 아티클은 잘 안 읽게 될 것 같다.

알게 된 개념

몇 개 빼고 거의 다 처음 알게 된 개념이었다.