신입디자이너에게 필요한 UI 용어

안녕하세요.

 

이번 글에서는 신입 디자이너라면 한 번쯤 선배들이나 직장동료가 쓰는 단어를 몰라 어떤 말인지 이해를 못 한 경험이 있었을 것입니다.

 

이런 경우를 최소화하기 위한 현 직장에서 자주 쓰이는 UI기본 용어들을 정리하여 설명드리고자 합니다.

 

저 또한 개발자 및 선배분들이 쓰는 용어를 모르고 있어 무슨 내용인지 100% 이해 못 하는 경우도 있고 이럴 경우 앞에서는 아는척하지만 뒤에서 검색해보며 열심히 공부 중입니다.

 

여러분들은 대화 도중 이런 상황이 없길 바라며 지금부터 UI 디테일 기본 용어 설명을 시작하겠습니다.

 

---

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

드롭다운 메뉴란, 마우스를 가져가면 숨겨져 있던 하위 메뉴가 나오는 방식의 메뉴입니다. 계층구조의 메뉴에 사용하기 적합하고, 상위 메뉴만 보여주고 필요한 경우에만 하위 메뉴를 보여주므로 공간적으로도 유용합니다.

 

 

 

2. 라디오 버튼 (Radio Button)

라디오 단추 또는 옵션 단추는 그래픽 사용자 인터페이스의 요소 가운데 하나로, 사용자가 미리 정의된 선택 사항의 모임 하나만 선택할 수 있게 합니다. 라디오 버튼, 또는 옵션 버튼이라고도 부르며 쇼핑몰 등 다양한 선택사항이 많은 곳에서 사용하기도 합니다.

 

 

 

3. 체크 박스 (Check Box)

사용자가 수많은 선택 사항에서 여러 개를 선택할 수 있게 합니다. 일반적으로 체크 상자는 그림과 같이 화면 위에 사각형 모양의 상자로 보이며 체크를 하지 않은 흰 상자를 포함하거나 체크를 하였다는 체크 표시로 된 상자를 보여 줄 수 있습니다.

 

4. 토글 (Toggle Button/Switch)

 

On/Off를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼(위) 혹은 토글스위치(아래)라고 부릅니다. 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각(눌린) 상태로 변하는데 해당 항목이 실행되고 있음(On)을 의미하며, 다시 누를 시에는 볼록한 원래 상태(Off)로 되돌아옵니다. 토글스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다. 이때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요합니다.

 

 

5. 툴바 (Tool Bar)

 

 

GUI 기반 운영체제, 혹은 응용프로그램에서 사용하는 각종 시각적인 요소를 위젯(widget)이라고 합니다. 각종 버튼이나 메뉴, 아이콘, 슬라이드, 창 등이 대표적인 위젯이다. 그리고 이러한 위젯 중 사용자가 자주 쓰는 기능을 모아 가로나 세로 방향의 막대에 가지런히 배치한 위젯을 툴바(Toolbar: 도구 모음, 도구 막대)라고 합니다.

 

6. 텍스트 필드 (Text Input Field)

사용자가 키보드로 직접 텍스트를 입력하는 곳으로써 편집 필드 또는 텍스트 상자 등으로도 불립니다. 특정 항목의 속성을 입력할 때 외에도 검색, 정보 입력 등 상황에 따라 각기 다른 목적으로 사용됩니다. 여러 줄을 입력할 수 있을 때는 입력 영역(Text Area)이라고도 부릅니다.

 

 

 

7. GNB (Global Navigation Bar)

웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말합니다. 쉽게 말해 웹사이트에서 항상 표시되는 메뉴로서 탑 메뉴, 메인 메뉴라고도 불립니다. 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치하며 바(Bar), 탭(Tab), 드롭다운 메뉴 등의 메뉴 형태로 제공됩니다.

 

 

 

8. LNB (Local Navigation Bar)

 

 

서브 메뉴라고 불리며 웹사이트의 좌측에 주로 위치합니다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공됩니다.

 

9. 토스트 팝업(Toast Pop-up)

 

마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름입니다. 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모바일의 경우 화면의 중앙에 주로 위치하거나, 최상단에 나오는 경우는 '토스트 노티피케이션(Toast Notification)'이라고 불립니다. 화면 중앙에서 무언가를 알려줄 경우, 작업자의 현재 작업을 너무 많이 방해하게 되고, 그렇다고 PC 하단의 태스크 바나 핸드폰 상단의 노티피케이션 바에서만 표시될 경우 너무 눈에 띄지 않는 단점을 극복하기 위하여 중간적인 형태를 띠고 있는 알림이라 많이 선호되고 있습니다.

 

 

10. Splash Screen

 

프로그램을 로드하는 동안 표시되는 이미지를 말합니다. 평균 2~3초간 지속되는 시간 동안 애플리케이션의 로고와 함께 앱에 대해 간략한 소개를 하거나, 로딩 진행률을 애니메이션으로 표시하기도 합니다. Splash Screen에 사용되는 로고나 텍스처를 통해 애플리케이션의 아이덴티티를 표현할 수 있어야 합니다.

 

---

아는 용어가 많이 있으신가요? 보통 신입 디자이너라면 처음 듣는 단어 또는 어깨너머 들어 본 용어 일 것입니다.

주로 현업에서 많이 쓰는 UI용어를 간략하게 설명하였는데요. 외워두시면 앞으로 업무나 대화를 할 때 분명 도움이 되는 자료이니 한 번쯤 외워두시는 것도 좋은 방법입니다.

아직 설명드릴 용어가 많지만 오늘은 여기까지 설명을 드리고 다음번에 더 다양한 용어들을 설명하도록 하겠습니다.