UI 용어 컴포넌트 이름 소개

UI 용어 컴포넌트 이름 소개

UI/UX 디자인을 하다 보면 다양한 모습의 컴포넌트(구성요소)들을 보게 됩니다. 화면 속에서 버튼 등의 구성요소를 볼 때 사람마다 부르는 이름이 다릅니다. IT 관련 일을 하는 사람이 아닐 경우 이름을 모를 수도 있습니다. 보통은 프로젝트가 시작되면 이런 구성요소의 이름들을 정하는 정의 과정이 있지만, 정하고 나서도 실무에서는 이런저런 이름이 중구난방으로 사용됩니다. 듣고 빨리빨리 알아야 하는 현장에서 모르는 용어 때문에 소통 효율이 떨어지는 경우가 많습니다. 오늘은 주로 사용하는 UI/UX용어로서 UI 컴포넌트의 이름들을 알아보겠습니다.

 

글은 아래의 규칙으로 작성되었습니다.

• 혼동을 없애기 위해 예쁘지는 않지만, 가장 기본 형태 사진을 첨부했습니다.
• 제목은 제가 표준이라고 생각하는 단어로 뽑았습니다. (현장마다 차이가 있습니다)

버튼(Button)

가장 기본적인 컴포넌트입니다. 클릭이나 탭을 통해 기능 동작할 때 사용합니다.

 

드롭다운 리스트(Drop-down List)

클릭 하면 세부 항목들이 보이고 그중 하나의 항목을 선택하는 기능입니다.

다른 이름: 드롭다운목록, 드롭다운(Drop-down), 드롭메뉴(Drop Menu), 셀렉트박스(Select Box) 등

추가사항: 드롭다운리스트 형태로 되어 있는 메뉴를 드롭다운메뉴(Drop-down Menu)라고 합니다.

 

리스트 박스(List Box)

리스트박스는 목록 중 원하는 항목을 선택하는 형태입니다. 만들기에 따라 여러 개를 선택할 수도 있습니다.

다른 이름: 목록박스, 리스트(List), 셀렉트리스트(Select List)

 

텍스트인풋박스(Text Input Box)

칸 안에 글자를 입력하는 형태입니다. 가장 기본적인 형태이다 보니, 다양한 표현이 많습니다.

다른 이름: 텍스트박스(Text Box), 인풋박스, 입력필드, 텍스트필드(Text Field), 텍스트입력필드, 텍스트에어리어(Textarea, 여러 줄일 경우)

 

콤보박스(Combo Box)

콤보박스는 텍스트인풋박스, 드롭다운 리스트, 리스트 박스가 통합된 형태입니다. 입력 창에 글자를 입력하면 그에 관련된 내용이 아래쪽에 펼쳐지는 경우입니다. 구현에 따라 목록에 있는 것만 선택하게 할 수도 있고, 목록에 없는 내용을 선택하게 할 수도 있습니다. 목록에만 있는 걸 선택하게 한다면 드롭다운 리스트와 별반 다르지 않지만, 아래 펼쳐지는 항목이 많다면 검색 후 선택하는 개념이 됩니다. 이런 맥락으로 키워드 추천, 자동완성으로 불리기도 합니다.

다른 이름: 콤보상자, 자동완성(Autocomplete, 다른 기능이지만 콤보박스를 가리킬 때가 있음)

 

라디오 버튼(Radio Button)

항목 중 하나를 선택할 때 사용합니다.

다른 이름: 라디오인풋

 

체크박스(Checkbox)

항목 선택을 위한 컴포넌트입니다. 라디오 버튼과 다른 점은 체크박스는 여러 항목을 선택할 수 있는 구조입니다.

다른 이름: 체크리스트

 

스크롤바(Scrollbar)

보이는 영역보다 내용이 많을 경우 사용됩니다. 현재 영역의 위치와 다른 영역을 볼 때의 구간을 표시하며, 스크롤바의 이동을 통해 보이는 영역을 옮겨주기도 합니다.

다른 이름: 스크롤

 

툴팁(Tooltip)

사용자가 마우스를 올렸을 때 추가로 표시되는 정보입니다. 보통은 마우스 오버 시 1 ~ 2초 후에 표시되지만, 구현하기에 따라 다릅니다. 이미지로 버튼 기능을 사용할 경우, 툴팁은 버튼의 용도를 확인할 수 있게 도와줍니다.

다른 이름: 알트(HTML에서 이미지 표시할 때 alt 속성으로 툴팁을 정의해서 알트라고 부를 때도 있습니다)

 

스피너(Spinner)

숫자 입력할 때 자주 나오는 컴포넌트입니다. 입력 창과, 위아래 버튼을 통해 숫자를 올리고, 내릴 때 사용합니다.

 

그리드뷰(Grid View)

여러 항목을 표 형태로 보여주는 컴포넌트입니다. 그리드뷰라는 이름보다 HTML에서 사용하는 태그로 인해 테이블이라는 이름으로 많이 불리기도 합니다.

다른 이름: 데이터그리드(Data Grid), 테이블(Table), 테이블뷰(Table View)

 

트리 메뉴(Tree Menu)

목록이 계층 구조를 가지고 있을 경우 활용됩니다. 계층 구조는 다양한 영역에서 트리라는 이름으로 불립니다.

다른 이름: 트리 구조

 

GNB(Global Navigation Bar), LNB(Local Navigation Bar)

GNB는 웹사이트에서 상단에 고정되어 보이는 상위 메뉴입니다.

다른 이름: 메인 메뉴(Main Menu), 상단 메뉴, 탑 메뉴(Top Menu)

 

LNB는 상위 메뉴 진입에 따라 변경되는 하위 메뉴를 이야기합니다. 주로 좌측이나 우측에 표시됩니다.

다른 이름: 서브 메뉴(Sub Menu), 하위 메뉴

 

프로그레스 인디케이터(Progress indicator)

프로그레스 인디케이터는 시간이 오래 걸리는 작업에서 진행상황을 보여주는 보여줄 때 사용합니다.

다른 이름: 프로그레스바(Progress Bar), 진행바, 상태바

 

슬라이더(Slider)

정해진 범위에서 슬라이더를 움직이거나 클릭해서 선택하는 형태입니다. 사용자는 한눈에 설정 가능 범위를 알 수 있습니다. 범위를 벗어나서 선택할 수 없으므로, 사용자 입력 범위 오류가 없습니다. 범위 제시가 필요할 때, 선택 값 오류를 방지할 때 많이 활용됩니다.

다른 이름: 선택바

 

스플래시 스크린(Splash Screen)

앱이 시작할 때 보여주는 화면입니다. 보통은 기본 데이터를 읽어오는 동안 보여줍니다. 2초 내외로 보이며, 프로그레스 인디케이터와 함께 표시되기도 합니다.

다른 이름: 로딩화면, 초기화면, 시작화면

 

로딩 스피너(Loading Spinner)

프로그레스 인디케이터처럼 시간이 걸리는 작업이 있을 때 기다리는 화면을 제공해줄 때 사용합니다.

다른 이름: 스피너스(Spinners), 로딩 화면, 로딩 아이콘, 로더(Loader), 로딩 인디케이터(Loading Indicator) 등

 

햄버거 버튼(Hamburger button)

모바일 등 화면이 좁을 경우 메뉴를 줄일 때 사용합니다. 클릭 시 메뉴가 펼쳐지는 구조로 되어 있습니다. 햄버거 버튼이 정식 명칭인가 몰라서 여기저기 찾아봤는데요. 원래는 트리플 바에서 온 듯 하지만, 여러 이름 중에 햄버거 버튼을 가장 범용 적으로 쓰이는 듯해서 제목으로 했습니다. 기본 의미는 보이는 것보다 내용이 더 있다는 뜻으로 사용됩니다.

다른 이름: 트리플 바(Triple Bar), 메뉴 버튼(Menu Button), 메뉴 아이콘

 

마무리

UI에 사용하는 컴포넌트들을 알아봤습니다. 다양한 프로그래밍 언어와 환경들에서 같은 기능을 하는 모양도 다른 이름으로 부르는 경우가 있습니다. 그러다 보니 회사의 주력 제품이나 언어에 따라서 소통용 단어가 결정되는데요. 특히 웹을 다루는 경우와 네이티브 앱을 다루는 팀은 다르게 사용할 수 있습니다. 다양한 용어들을 알아두고 학습해 두시면 어떻게 말하는 사람을 만나더라도 소통에 끊김이 없습니다. 한 번쯤 확인하시길 추천드립니다.