UI 기본 용어 - 기본 개념 5가지
UI 기본 요소, 버튼, 메뉴, 내비게이션, 탭바
예전에 10년 차 이상인 기획자가 기획서를 작성해서 리뷰를 할 때, 스플래쉬 화면을 인트로 화면이라고 지칭한 적이 있습니다. 이때 리뷰를 듣던 디자이너와 개발자 모두 인트로 화면이 스플래쉬 화면과 다른 것인지, 스플래쉬 화면을 뜻하는 것인지 등 질문이 쏟아졌어요. 당시 스플래쉬 용어를 몰랐던 기획자는 인트로 화면이 무엇인지 막 설명하기 시작했습니다. 설명을 듣고, 스플래쉬를 인트로라고 말한 것을 이해한 실무자들은 통용적인 용어를 사용하자고 하셨죠.
'10년 차 이상인데 기본 용어를 모를 수 있나?'
믿기 어려우시겠지만 그럴 수 있습니다. 팀이나 프로젝트에 따라 용어를 조금씩 다르게 사용하기 때문입니다. 또한, IT 업계는 변화가 빠르다 보니 이전에 없던 개념이 많이 생겨나는 편입니다. 당시에는 없었지만 지금은 많이 사용하는 용어일 수도 있는 거죠.
이처럼 협업을 위한 의사소통에서 혼선을 줄이려면, 어떤 일이든 업계에서 표준으로 사용하는 용어를 알아두어야 합니다. 이번 편에서는 IT 업계에서 기본적으로 알아야 할 표준 용어들에 대해 정리해 보도록 하겠습니다. 기획서를 작성하거나, 디자인 요소에 대해 설명할 때 표준화된 용어를 사용할 수 있길 바랍니다 :)
1. UI 기본 요소
이전 편에서 말씀드린 웹앱의 기본 구조 안에 구성되는 내용이 UI(User Interface)입니다. UI는 2가지 종류가 있어요. 화면에 표시되는 그래픽인 GUI(Graphic User Interface, 그래픽 사용자 인터페이스)와 음성 명령으로 사용되는 VUI(Voice User Interface, 음성 사용자 인터페이스)입니다. 웹과 앱에서는 주로 GUI를 많이 사용하고, 일반적으로 UI 용어는 GUI 용어를 의미합니다. 앞으로 말씀드릴 내용도 GUI 용어이므로, 'UI 용어 = GUI 용어'로 이해하고 읽어 주세요.
*(참고) VUI는 상대적으로 생소할 수 있지만 아이폰의 시리, 카카오의 인공지능 스피커처럼 음성 인식 기술을 사용하는 인터페이스로 이해하시면 됩니다. 예를 들어, "시리야 당근마켓 열어"라고 말하는 명령어 스타일, "제 능력 밖의 일이에요"라고 말하는 피드백 스타일을 설계하는 것이 VUI 디자인입니다.
UI 용어를 이해하기 위해 UI를 구성하는 내용, 즉 UI 기본 요소에 대한 용어를 먼저 알아보겠습니다. UI마다 구성하는 요소들이 모두 다르게 포함되지만, 아래 3가지 요소는 UI를 구성하는 공통 요소입니다.
1. 레이블(Label) : 사용자가 이해할 수 있는 텍스트
2. 아이콘(Icon) : 상징적인 그림
3. 고정값(Default) : 사용자가 실행하지 않으면 유지되는 값
예를 들어, 드롭다운 리스트(Dropdown List)라는 UI를 보시면 위 이미지처럼 구성되어 있습니다. 현재 위 이미지의 상태는 사용자가 처음 화면을 접속했을 때 보이는 UI입니다.
이때 해당 UI는 어떤 리스트인지에 대한 정보가 있고(❶), 고정값으로 사용자가 선택하기 전에 기본으로 설정되어 있는 리스트명(❷)이 나오고, 아래로 리스트를 펼쳐볼 수 있다는 의미의 화살표 아이콘(❸)이 있습니다. 해당 UI는 '드롭다운 리스트(Dropdown List)'라고 부르지만 UI의 기본 요소들로 구성되어 있습니다. 이처럼 UI는 레고 블럭 각각의 하나가 서로 결합되어 또 다른 블럭을 만드는 것과 같습니다.
2. 버튼 Button
버튼(Button)은 IT 업계만 아니라 일상에서도 자주 사용되는 UI 요소입니다. 어떤 UI 요소든 동작을 실행한다는 측면에서 항상 포함되기 때문이에요. 버튼을 디자인할 때 상태값(활성화, 비활성화 등)과 유형(기본형, 아이콘형 등)을 알아야 합니다. 버튼은 다양한 모양과 스타일로 제공될 수 있어서 역할이나 스타일에 따라 UI 용어가 파생됩니다. 먼저 상태값에 대해 알아보겠습니다.
1. 상태값 5가지
디자인할 때 모든 상태값을 고려하는 것이 이상적이지만, 실제로는 필요한 상태값만 작업하는 경우가 많습니다. 예를 들어, 필수 정보를 입력하지 않더라도 버튼이 활성화될 수 있습니다. 사용자가 버튼을 클릭할 수는 있지만, 필수 정보가 입력되지 않았기 때문에 클릭해도 동작하지는 않습니다. 이런 경우에는 활성화 상태의 버튼만 디자인하면 됩니다. 하지만 필수 정보가 입력되지 않았을 때 사용자가 버튼을 실행할 수 없음을 인식하도록 하려면, 비활성화 상태의 버튼도 디자인해야 합니다.
1) Enabled(활성화) : 버튼 실행 가능한 상태 *Active라고도 함
2) Hover(호버) : 마우스 커서가 버튼 위에 올려져 있는 상태
3) Focused(포커스) : 키보드 Tab 혹은 음성 등의 입력으로 선택된 상태
4) Pressed(프레스) : 버튼을 클릭 혹은 터치하는 순간 상태
5) Disabled(비활성화) : 버튼 실행 불가능한 상태
즉, 어떻게 동작할 것인가에 대한 설계에 따라 필요한 버튼 상태값만 선택적으로 디자인해야 합니다. 디자이너가 일방적으로 잘 인지되는 버튼 동작을 만들어 설계된 내용과 달라지는 경우, 협업하는 기획자와 개발자는 새로 작업해야 할 수 있어요. 따라서 설계 당시 협의한 내용을 바탕으로 작업하는 것이 중요합니다.
*물론 디자인하며 프로토타입을 만들어 기획자와 개발자에게 아이디어를 제안 후 협의하면 괜찮습니다. 중요한 것은 함께 협업하는 사람들과 공통의 결과물을 만드는 것이니까요.
Tip
처음 공부하시는 분들이 간과할 수 있는 부분이 있습니다. 바로 예시로 보여드린 이미지처럼 모든 상태값이 디자인되어야 한다는 착각입니다. 상태값은 '상태 정의'에 집중해야 합니다. 위 예시는 대표적인 예시일 뿐, UI 요소마다 상태값에 따라 다르게 작업할 수 있습니다.
*아래 네이버와 브런치의 예시 이미지를 참고
예. 네이버의 탭 버튼 - 호버(Hover) 상태값 디자인
예. 브런치 키보드 Tab 눌렀을 때 - 포커스(Focused) 상태값 디자인2. 유형 5가지
지금 소개해 드리는 유형들은 상위 역할을 기준으로 구분한 버튼입니다. UI 용어를 익힐 때 중요한 것은 '어떤 모양이 이런 이름이야'가 아니라, UI 요소가 가지는 역할입니다. 버튼은 사용자가 어떠한 동작을 수행하는 역할이고, 어떤 역할을 수행하는가를 기준으로 UI 요소가 구분되기 때문이에요. 역할에 따라 5가지 유형으로 나눌 수 있습니다.
1) 기본 버튼
: 일반적으로 많이 사용되는 버튼으로, 텍스트나 텍스트&아이콘에 색상이나 스타일을 넣은 것
2) 아이콘 버튼
: 텍스트 대신 아이콘으로만 구성된 버튼으로 툴바나 메뉴에서 많이 사용
3) 링크 버튼
: 일반적인 버튼 형태보단, 클릭 시 다른 페이지로 이동하는 링크값을 가진 텍스트 스타일
4) 플로팅 버튼(Floating Action Button, FAB)
: 스크롤 여부와 상관없이 화면 위에 떠 있는 형태로 중요 기능 강조하고 싶을 때 주로 원형 모양으로 작업
예. 페이지를 내렸을 때 맨 위로 이동5) CTA 버튼(Call to Action)
: 사용자에게 특정 행동을 유도하는 목적을 갖는 버튼으로, 행동을 구체적으로 지시하는 카피를 포함
예. 배달의 민족 앱 - 배달팁 무료로 추가 구매 행동을 유도일반 버튼과 CTA 버튼의 차이는 목적에 있습니다. 일반 버튼은 동작을 실행하는 것이 전부이지만, CTA는 동작 실행을 '유도 혹은 촉진'한다는 목적이 있다는 점에서 둘은 구분됩니다.
*일반 버튼 안에 CTA 버튼 개념이 포함되는 것으로 이해하셔도 됩니다.
3. 메뉴 Menu
메뉴는 서비스에서 제공하는 기능을 사용자가 언제든지 접근할 수 있도록 돕는 역할인 UI 요소입니다. 그래서 서비스의 여러 링크 항목을 모아둔 UI 요소를 메뉴라고 부릅니다. 메뉴는 나열되는 형식에 따라 UI 종류가 구분됩니다.
대표적으로 5가지가 있습니다. 각 메뉴의 모양에 따라 이름이 정해졌지만, 목록이 나열되는 형태와 메뉴의 실행 목적에 따라 사용되는 메뉴가 다릅니다. 아래 예시와 함께 보겠습니다.
1) 햄버거 메뉴(Hamburger) : 간결한 리스트 모양의 목록
예. 네이버 블로그 모바일 앱전체 메뉴 용도로 많이 쓰이고, 주로 리스트 형태로 서비스 메뉴가 나열되어 있음을 알 수 있습니다.
2) 벤토 메뉴(Bento) : 격자 모양의 목록
예. 구글 메인 홈페이지 & 네이버 웹툰 앱벤토 메뉴 또한 전체 메뉴로 쓰이지만, 햄버거와 달리 서비스 메뉴들이 격자 형태로 모여 있음을 확인할 수 있습니다. 주로 슈퍼앱(일상에서 필요한 서비스를 하나의 앱으로 제공하는 모바일 앱)처럼 여러 서비스가 연결되어 있을 때 많이 사용합니다.
3) 도너 메뉴(Doner) : 추가 옵션이나 숨겨진 기능 목록 or 필터링 목록
예. Dribble 검색 화면
예. 인프런 강의 검색 페이지고정값으로 숨김 처리되어 있다가 메뉴를 눌렀을 때 노출되는 메뉴에 사용되는 것을 확인할 수 있습니다. 주로 필터 기능을 표현할 때 많이 사용하는데요. 점차 사용하지 않는 추세입니다. 요즘은 레이블을 필터로 처리하거나 '+' 아이콘을 활용해 필터 추가를 표현하는 편입니다.
4) 케밥 메뉴(Kebab) : 설정이나 더 보기 목록
메뉴를 선택했을 때 리스트 목록으로 나열되지만, 서비스 내에서 세부 설정처럼 더 많은 설정을 원하는 목적으로 많이 사용합니다.
5) 미트볼 메뉴(Meatball) : 보조 옵션이나 추가 기능 목록
케밥 메뉴의 세부 설정과 같은 목적으로 사용됩니다. 서비스 전체 메뉴보다 기타 메뉴, 추가 기능에 대한 설정이 필요할 때 사용합니다.
Tip
케밥 메뉴와 미트볼 메뉴는 유사한 목적으로 사용되므로, 디자인 레이아웃을 고려해 선택하는 경우가 많습니다. 그럼에도 굳이 둘을 차이를 정리하면, 메뉴를 실행했을 때 보이는 모습이 다른 점입니다. 케밥 메뉴는 실행했을 때 대부분 목록창이 뜨지만 미트볼 메뉴는 실행했을 때 전체 페이지 혹은 옆으로 펼쳐지는 식으로 동작합니다. 하지만 이는 대표적인 것이지 디자이너가 어떻게 인터랙션을 설계하느냐에 따라 달라지므로, 정답처럼 정해진 것은 없어요. 주로 시각적인 선호도 차이로 선택한다는 것이 핵심입니다.
4. 내비게이션 Navigation
내비게이션은 사용자가 이동 경로를 선택하거나 확인하는 역할을 수행합니다. 여기에 페이지 이동을 유도하는 부가적인 목적이 포함되어 있어요. 메뉴와 달리 사용자가 서비스를 '탐색'하는 데 도움을 주는 것에 초점이 있습니다. 즉, 메뉴는 기능을 모아둔 형태를 의미한다면 내비게이션은 탐색 영역을 의미합니다. 내비게이션이 메뉴를 포함하는 더 넓은 개념이라 할 수 있습니다.
1) 내비게이션(Navigation)*기본형 : 상위-하위 구분 없이 '이동 경로 탐색' 영역
예. iOS 내비게이션페이지 이동 시 이전 페이지에 대한 정보를 보여주거나, 페이지 위치를 타이틀로 표시해 사용자의 현재 위치를 안내합니다.
예. 내비게이션 세로 형태 - Navigation Rail주로 좌측에 있는 내비게이션은 이렇게 세로 형태로 메뉴를 나열해 줍니다. 사용자가 선택한 메뉴를 구분해 주어 현재 위치를 인지할 수 있습니다.
2) GNB(Global Navigation Bar) : 서비스의 최상위 메뉴
*상위-하위 개념이 존재하는 경우 GNB와 LNB로 용어를 구분합니다.
3) LNB(Local Navigation Bar) : 서비스의 하위 메뉴
*GNB에서 메뉴를 선택했을 때 등장하기도 하고, 호버 상태에서 노출되기도 합니다.
예. Giphy 웹사이트 하위 메뉴4) SNB(Side Navigation Bar) : GNB, LNB와 상관없이 좌측 혹은 우측에 존재하는 메뉴
*주로 좌측에 메뉴를 위치하기 때문에 LNB(Left Navigation Bar)라고 부르기도 합니다.
예. Inflearn 홈페이지5) FNB(Footer Navigation Bar) : 최하단에 위치한 메뉴
*웹앱 기본 구조 편에서 설명드린 푸터 영역에 위치한 메뉴로 보통 푸터(Footer)라고 부릅니다.
6) Bottom Navigation : 하단에서 등장하는 메뉴
*어떠한 기능을 눌렀을 때 하단에서 등장하는 메뉴입니다. Bottom Sheet라고 많이 불러요.
7) 브레드크럼 Breadcrumbs : 사용자의 탐색 경로와 위치 안내 메뉴
*브레드크럼 또한 메뉴처럼 이전 페이지를 선택하면 해당 페이지로 이동하며, 브레드크럼에 하위 메뉴 구조를 추가하기도 합니다. 주로 텍스트 링크로 많이 사용합니다.
5. 탭바 Tab bar
탭바는 단일 페이지 내에서 다양한 콘텐츠나 섹션 간의 전환을 제공하는 역할입니다. 서비스 내 여러 영역을 이동할 수 있어서 메뉴 혹은 내비게이션으로 부르는 경우가 있어요. 소통에 문제는 없겠지만 디자이너라면 개념은 정확하게 아는 것을 추천드립니다. 화면에서는 탭이 내비게이션처럼 보여도, 작업물에는 탭과 내비게이션이 동시에 있을 때 용어를 구분할 수 있어야 하니까요.
・탭바/탭 Tab/Tab bar : 현재 페이지에서 다른 내용(콘텐츠)으로 전환
내비게이션/메뉴와 탭바의 차이점은 바로 연관성입니다. 내비게이션/메뉴의 목록들은 서로 연관이 없는 페이지로 이동합니다. 하지만 탭바는 사용자가 보고 있는 페이지의 내용과 연관 있는 페이지로 이동합니다.
예시를 보시면 무신사 상품 상세 페이지에서 제공되는 탭바는 상품에 대한 정보를 카테고리로 구분하고 있습니다. 사이즈, 추천, 후기 등등 모두 상품 하나에서 파생되는 정보이죠. 네이버 웹툰 또한 해당 웹툰에 대한 정보와 해당 웹툰과 관련된 작품 정보를 보여주고 있습니다.
이처럼 완전히 무관한 페이지로 이동하는 것이 아닌, 보고 있는 페이지와 연관 있는 페이지로 이동한다는 점이 내비게이션/메뉴와 가장 큰 차이점입니다.
마무리하며
지금까지 UI 용어를 구성하는 기본 개념에 대한 용어들을 정리했습니다. 이번 편에서 중요한 것은 한 가지입니다. 앞서 언급한 '어떤 모양이 이런 이름이야'라는 식으로 용어를 외우면 안 된다는 사실이에요. UI 용어는 역할을 중심으로 정의되는 것을 알아야 합니다. 그리고 레고 블럭처럼 각각의 UI 요소들이 모여서 다른 UI 요소를 만들 수 있음을 기억해 주세요. 다음 편에서는 해당 개념들을 활용한 UI 용어들에 대해 알아보겠습니다.
정리
1. UI 기본 요소
1) 레이블 Label : 사용자가 이해할 수 있는 텍스트
2) 아이콘 Icon : 상징적인 그림
3) 고정값 Default : 사용자가 실행하지 않으면 유지되는 값
2. 버튼 button - 상태값 & 유형
- 상태값
1) Enabled(활성화) : 버튼 실행 가능한 상태 *Active라고도 함
2) Hover(호버) : 마우스 커서가 버튼 위에 올려져 있는 상태
3) Focused(포커스) : 키보드 Tab 혹은 음성 등의 입력으로 선택된 상태
4) Pressed(프레스) : 버튼을 클릭 혹은 터치하는 순간 상태
5) Disabled(비활성화) : 버튼 실행 불가능한 상태
- 유형
1) 기본 : 텍스트, 텍스트와 아이콘에 색상이나 스타일을 넣은 버튼
2) 아이콘 : 텍스트 대신 아이콘으로 구성된 버튼
3) 링크 : 다른 페이지로 이동하는 링크값을 가진 텍스트 스타일 버튼
4) 플로팅 : 스크롤 여부와 상관없이 화면 위에 떠 있는 버튼
5) CTA : 사용자에게 행동을 '유도 혹은 촉진'하는 카피와 함께 사용되는 버튼
3. 메뉴 Menu
1) 햄버거 Hamburger : 간결한 리스트 모양의 목록
2) 벤토 Bento : 격자 모양의 목록
3) 도너 Doner : 추가 옵션이나 숨겨진 기능 목록 or 필터링 목록
4) 케밥 Kebab : 설정이나 더 보기 목록
5) 미트볼 Meatball : 보조 옵션 or 추가 기능 목록
*케밥과 미트볼은 유사한 목적으로 사용되며, 디자인 레이아웃을 고려해 사용하는 경우 많음
4. 내비게이션 Navigation
1) 기본 : 상위-하위로 구분되지 않는 경우 내비게이션으로 부름
2) GNB(Global Navigation Bar) : 서비스의 최상위 메뉴
3) LNB(Local Navigation Bar) : 서비스의 하위 메뉴
4) SNB(Side Navigation Bar) : GNB, LNB와 상관없이 좌측 혹은 우측에 있는 메뉴
5) FNB(Footer Navigation Bar) : 최하단에 위치한 메뉴, 주로 Footer(푸터)라고 부름
6) 브레드크럼 Breadcrumbs : 사용자의 탐색 경로와 위치 안내 메뉴
5. 탭바 Tab bar : 연관 있는 페이지로 이동
- 내비게이션/메뉴와 차이점 : 내비게이션은 서로 연관 없는 페이지로 이동하지만, 탭바는 서로 연관 있는 페이지로 이동함
- 예) 카카오톡 앱에서 친구 목록과 채팅 목록은 탭바처럼 생겼지만 서로 다른 페이지로 이동하기 때문에 내비게이션이라 부르는 것이 적합하다.
