brunch

매거진 프로덕트 매니징 입문

라이킷 100 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 영이순 Mar 26. 2023

기획자를 위한 UI/UX 용어 정리

용어와 개념, 작동방식 이해부터 시작이다

들어가는 말

프로덕트를 개발하고 매니징하기 위해서는 비즈니스 및 개발 지식과 더불어 디자인, 즉 UX와 콤포넌트의 명칭과 작동방식에 대한 지식도 필요하다. 어떤 UI가 좋은 사용자 경험(UX)을 선사할지를 고민하는 습관을 들이기 위해서라도 다양한 UI 작동 방식과 콤포넌트 유형을 알아두면 유리하다. 물론 기획자는 팔방미인이 되어야 하지만, 그렇다고 해서 각 분야를 해당 분야의 전문가만큼 깊게 알아야 하는 것은 아니다. 단 고객의 행동을 이해하기 위해서는 다양한 작동 방식을 이해할 필요가 있다.

메뉴 (Way Finding)

아코디언 (Accordion)

벤토 메뉴 (Bento Menu)

그리드 목록으로 나열되는 메뉴

햄버거 메뉴 (Hamburger Bar)

네비게이션 메뉴

미트볼 버튼 (Meatballs Menu)

더 많은 내용(옵션, 메뉴)를 담는 메뉴

케밥/꼬치구이(?) 메뉴 (Kebab Menu)

주로 설정/옵션 등을 담는 메뉴

도너/되네르 메뉴 (Doner Menu)

트리 메뉴 (Tree Menu)

GNB (Global Navigation Bar)

웹의 상단에 고정된 메뉴바. 주로 메뉴가 다양하고 복잡한 경우에 많이 사용됨.

LNB (Local Navigation Bar)

GNB의 서브 메뉴로 롤오버(roll over) 혹은 호버 (Hover)라 불리는 즉, 마우스를 특정 위치에 올려놓을 때 나타나는 메뉴를 뜻한다. 모바일로 전환된 지금은 잘 쓰이지 않고 통상 터치/클릭했을 때 메뉴가 나타나는 메인메뉴 아래의 서브메뉴를 말한다고 보면 된다

SNB (Side Navigation Bar)

사이트의 좌/우측에 배치된 사이드메뉴를 뜻하며, LNB의 하위 메뉴이다

사이드 바 (Side Bar)

페이지의 측면, 하단 등에서 탐색, 콘텐츠 그룹 표시를 할 때 활용

FNB (Foot Navigation Bar)

사이트 하단에 배치된 메뉴

Multi-Level-Menu

출처 : 40 Free Responsive CSS Menu

브레드크럼 (breadcrumb)

브레드크럼은 사이트 내에서 사용자가 어디에 있는지 알려주는 역할을 한다.

프로그레스바 (Progress bar)로 불리기도 한다.

탭 바 (Tab Bar)

사용자가 각 섹션으로 빠르게 이동할 수 있도록 하는 요소

입력 (Input Data)

버튼 (Button)

함께 읽으면 좋을 글 : 모바일 UI 디자인 기본요소 - 버튼

체크 박스 (Checkbox)

체크박스는 사용자가 다양한 옵션을 선택할 때 도움을 주는 콤포넌트

드롭 다운 (Dropdown)

많은 옵션이 있을 때, 화면에 수많은 옵션을 다 보여줄 수 없을 때 (즉, UX상 혼란만 가중시킬 때) 활용할 수 있는 콤포넌트

리스트 박스 (List box)

여러 항목 중 원하는 항목을 선택할 수 있는 요소.

드롭다운과는 달리 리스트 목록이 처음부터 모두 노출되어 있다

콤보 박스 (Combo Box)

텍스트 입력과 리스트 선택을 함께 할 수 있는 요소

폼 (Form)

사용자가 시스템에 연계된 정보를 입력하고 제출하기 위한 도구

인풋 필드 (Input Field)

간단히 사용자가 문자, 숫자 등의 정보를 입력해서 시스템에 전달하기 위한 도구

텍스트필드나 데이트필드 외에 여러 종류가 존재

픽커 (Picker)

흔히 데이트 타임 픽커로 알려진, 날짜와 시간을 선택하는 요소

라디오 버튼 (Radio Button)

슬라이더 컨트롤 (Slider Control)

특정 범위 값을 지정할 때 사용

스텝퍼 (Stepper)

사용자가 두 개의 요소를 사용해 값을 조절할 수 있도록 함

스피너 (Spinner)

토글 (Toggle)

On/Off가 가능한 스위치

출력 (Output Data)

카드 (Card)

카드는 사용자의 진입점 역할을 하고, 각기 다른 콘텐츠를 나열하고 표시한다.

캐러셀 (Carousel)

캐러셀은 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트이다.

이커머스 서비스, 넷플릭스 등에서 흔히 볼 수 있는 컴포넌트이다.

참고 :: 좋은 캐러셀 디자인을 위한 가이드 5가지

로더 (Loader)

시스템이 백그라운드의 작업의 완료를 기다려야 한다는 것을 사용자에게 알려주는 UI

스플래시 스크린 (Splash Screen)

앱을 구동할 때 보여지는 화면으로 데이터를 로딩할 때 화면이 보여지기 전 1~2초간 노출되는 화면

꼭 필요한 것은 아니나 브랜딩의 목적, 서비스의 아이덴티티를 지속적으로 노출하기 위한 브랜딩의 관점에서 구현하곤 한다.

모달 (Modal)

모달은 사용자와 상호작용하거나 특정 정보를 제공하기 위해 콘텐츠를 담고 있는 작은 박스를 레이어로 띄우는 것

예) 스크롤 중 구독 설정 레이어가 노출되거나, 스마트폰에서 앱을 삭제할 때 확인 레이어가 노출되는 것

뱃지 (Badge)

인터페이스에서 알림을 나타내는 작고 빨간 점

사용자가 새로운 내용을 확인해야 한다고 알림을 주는 용도

페이지네이션 (Pagination)

여러 페이지로 구성된 콘텐츠의 페이지 넘버를 나타내기 위한 콤포넌트

프로그레스 바 (Progress Bar)

특정 작업의 진척도를 나타내는 요소

툴팁 (Tooltip)

팝업 알림 (Pop-up Notification)

몇 초간 팝업 레이어가 나타났다가 사라지는 등 특정 용도의 알림을 주는 형태의 레이어. 자세한 구현 예시는 아래 사이트를 참조하자.

참고 :: What Is a Popup Notification? The Definitive Guide to Popups

Walkthroughs (워크스루)

앱 초기 실행 시 앱 사용 관련 도움말을 나타내는 UI

이미지 출처 : 링크

검색 (Search)

검색 필드 (Search Field)

증분 검색 (Incremental Search)

사용자가 특정 검색어를 검색필드에 입력할 때, 검색어를 예상해서 리스트로 제공하는 ‘자동 완성’과는 달리, 사용자가 입력할 검색어를 모두 입력하기 전에 완성 검색어를 예상하고 검색 결과화면을 제공하는 것을 ‘순간 검색’이라고 부른다.

자동 완성

맺는 말

사실 이제는 모바일 시대이고, AI 시대로 넘어가는 중이라 해당 자료는 고시대 유물이 될지도 모르겠다. 다만 PDP(Product Detail Page, 상품상세화면), SRP(Search Result Page, 검색결과화면), PLP(Product List Page, 상품목록화면) 혹은 슬로우 쿼리(Slow Query, DB에 정보검색을 위해 요청(쿼리)했지만 일정 이상 처리하지 못한 쿼리), NoSQL(Mongo DB, 비관계형 데이터베이스 : 스키마 비정의, 유연하고 쉬운 확장, 데이터 중복, 확장에 용이)나 SQL(MySQL, 관계형 데이터베이스 : 완벽한 스키마, 데이터 무결성, 중복x, 확장에 한계) 같은 것들은 현직자라면, 누구나 알 수 있는 개념 및 용어일 수도 있겠지만, 해당 용어를 사용하지 않거나 기획자처럼 알고는 있으되 개념이 명료하지 않은 사람들은 초반에 어려움을 겪기 쉽다. 나 또한 그랬다. 아무도 알려주지 않는 상황에서 기업 내부에서 커뮤니케이션 코스트를 줄이기 위해 약어를 쓰기도 하지만 다른 용어나 은어로 부르기도 하기 때문이다.

그럼에도 한번씩은 새로운 콤포넌트와 작동방식, 개념과 용어에 대해 정리해두고 넘어가야 한다. 점차 기획자와 디자이너의 역할이 명료하게 구분되어가는 추세지만, 개념과 작동방식을 이해하고 있는 기획자와 아닌 기획자의 결과물은 천양지차일 수밖에 없다.

기획은 해당 분야에서 사용하는 용어와 개념, 작동방식의 이해부터 시작된다. 최소한의 이해가 있는 상태에서 사용자를 관찰해보자. 아직 늦지 않았다.