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

최근 많은 브랜드가 사용자 경험과 인터페이스를 중요하게 여기는 추세입니다. 기술 경쟁이 치열해진 시장에서 제품이나 서비스의 기능만으로 경쟁 우위를 확보하기 어려워졌기 때문이죠.

비슷한 기능을 가진 제품과 서비스라면 긍정적인 사용자 경험과 인터페이스가 사용자의 구매와 사용 결정하는 데 중요한 역할을 하기도 합니다. 또 계속해서 더 나은 사용자 경험을 제공해 사용자들이 제품이나 서비스를 더 자주, 오래 사용함에 따라 더 많은 매출을 창출할 수 있죠.

이런 이유로 많은 기업에서 사용자 경험을 기획하고 디자인하는 UX/UI 기획자를 필수 직무로 손꼽기도 합니다. UX/UI 관련 용어를 이해하는 것은 성공적인 UX/UI 기획자 커리어를 쌓는 데 필수인데요. UX/UI 분야에서 커리어를 쌓고 싶은 분들을 위해 필수로 알아야 할 중요한 UX/UI 용어들을 자세히 알아보겠습니다.

UX/UI 기본 용어

사용자 경험(UX)과 사용자 인터페이스(UI)는 UX/UI 분야에서 가장 핵심적인 개념입니다. 그렇지만 여전히 두 용어를 명확하게 구분하지 못해 혼용하는 경우가 왕왕 있는데요. UX, UI의 정확한 개념을 먼저 알아보겠습니다.

UX

UX는 User Experience(사용자 경험)을 줄인 말로, 제품이나 서비스를 사용하는 사용자가 느끼는 전반적인 경험을 뜻합니다. 사용자가 제품이나 서비스를 이용하는 과정에서 느끼는 감정, 태도, 인식 등 모든 측면이 UX에 포함되는데요. 제품이나 서비스의 편의성, 효율성부터 디자인적인 부분까지 고려됩니다.

따라서 UX 기획 혹은 디자인은 사용자의 요구사항과 행동을 고려하여 제품이나 서비스를 구성하는 것을 말합니다. 사용자 경험을 분석하고 반영한 제품이나 서비스는 사용자 만족도와 충성도를 높일 수 있습니다.

UI

UI는 User Interface(사용자 인터페이스)를 줄인 말로, 사용자가 디지털 제품이나 서비스와 만나는 면이자 상호작용할 수 있도록 연결하는 매개체입니다. 사용자가 누르고 클릭하는 버튼, 텍스트, 이미지, 애니메이션 등의 시각적 요소들이 모두 UI 구성 요소이죠.

UI 디자인을 통해 인터페이스를 구성하는 레이아웃, 색상, 폰트, 아이콘 등을 결정하는데요. 이런 디자인은 사용자가 제품 또는 서비스를 사용하는 동안 어떻게 반응하고 동작해야 하는지 알려주는 중요한 역할을 합니다. 좋은 UI는 사용자가 쉽게 찾아 따라 할 수 있는 직관적인 디자인으로 구성되죠. 따라서 UI는 사용자 경험(UX)의 중요한 요소이기도 합니다.

GUI

GUI는 Graphical User Interface(그래픽 사용자 인터페이스)의 약자로, 사용자가 그래픽 기반으로 컴퓨터와 상호작용하는 방식을 말합니다. 복잡한 명령어 대신 마우스나 키보드 등을 사용하여 창, 버튼, 아이콘 등의 그래픽 요소들을 클릭하거나 조작하여 컴퓨터를 제어할 수 있는 것이죠.

1970년대 말에 최초로 개발된 GUI는 컴퓨터 사용의 패러다임을 바꾸었습니다. GUI를 통해 사용자들이 키보드와 마우스로 컴퓨터와 상호작용하며 더 쉽고 직관적으로 컴퓨터를 사용할 수 있게 됐죠. 현재는 대부분의 운영체제, 소프트웨어, 애플리케이션, 게임 등에 GUI가 제공됩니다.

---

자주 사용하는 UI 용어

스피너(Spinner)

숫자 입력 컨트롤로 편집 필드와 위아래 화살표 버튼으로 구성되어 있습니다. 편집 필드에 직접 숫자를 입력하거나 화살표 버튼으로 조절하여 원하는 숫자를 입력할 수 있습니다.

슬라이더 (Slider)

사용자가 제한된 범위 안에서 입력 값을 선택하게 해주는 UI 요소입니다. 일반적으로 가로 방향으로 이동하는 막대 형태이며, 사용자가 이동시키는 위치에 따라 값을 선택할 수 있습니다. 온라인 쇼핑몰에서 가격 범위를 선택할 때 사용하는 슬라이더가 대표적인 예입니다.

입력 필드 (Input Field)

입력 필드는 사용자가 키보드를 사용하여 직접 텍스트를 입력하는 곳입니다. 검색창, 로그인 폼, 회원가입 폼 등에서 주로 접할 수 있습니다. 텍스트 입력 필드, 비밀번호 입력 필드, 날짜 입력 필드 등 다양한 종류가 있으며, 입력 필드 안에 미리 작성된 예시 문구나 안내 문구가 들어갈 수 있습니다. 또 입력 필수 요소가 생략되거나 정해진 양식에 맞춰 입력하지 않을 경우 오류 상태를 표시할 수도 있습니다.

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

드롭다운 리스트는 사용자가 선택할 수 있는 여러 옵션 중 하나를 선택할 수 있도록 합니다. 드롭다운 리스트 버튼을 클릭하거나 커서를 올리면 선택지가 펼쳐지며, 그중 하나의 항목을 선택할 수 있습니다.

체크박스 (Checkbox)

체크 박스는 여러 옵션 중 동시에 여러 가지 항목을 선택할 때 사용합니다. 체크 박스 선택지가 너무 많을 경우 사용성에 문제가 생길 수 있어 주의해야 합니다. 하나 이상의 항목을 선택할 수 있다는 점에서 ‘라디오 버튼’과 차이가 있습니다.

CTA (Call To Action)

사용자가 구매, 구독, 방문 등 원하는 행동을 하도록 유도하는 장치입니다. 특정 행동을 유도하는 자극적인 문구와 눈에 띄는 시각적 요소로 구성한 버튼을 주로 활용합니다.

카드 (Card)

이미지와 텍스트 등으로 구성하여 다양한 정보를 담는 직사각형 요소. 시각적으로 눈에 띄게, 정보를 한눈에 쉽게 확인할 수 있는 장점이 있습니다.

캐러셀 (Carousel)

한 화면에서 두 개 이상의 여러 콘텐츠를 보여줄 때 사용합니다. 주로 슬라이드 형태로 이미지 혹은 영상 등을 순환하며 노출시키는 형태로 이커머스 메인 페이지에서 가장 흔히 볼 수 있습니다.

헤더 (Header) & 푸터 (Footer)

헤더는 웹페이지의 상단 영역, 푸터는 웹페이지의 하단 영역입니다. 헤더에는 주로 브랜드 로고와 네비게이션바가 포함되며 푸터에는 회사 정보, 개인정보 정책, 소셜 미디어 정보 등이 포함됩니다.

---

자주 사용하는 UX 용어

네이티브 앱

안드로이드, iOS 등 각각 다른 모바일 운영 체제에 최적화되어 개발된 앱입니다. 안드로이드 플레이스토어나 애플 앱스토어에서 다운로드해 설치하는 앱으로 컴퓨터로는 접속이 불가능합니다. 하지만 각 운영 체제에 최적화하여 개발했기 때문에 각 모바일의 모든 기능 등 성능을 최대치로 활용할 수 있어 사용성이 매우 좋다는 큰 장점이 있습니다.

웹 앱 (반응형)

반응형 방식으로 모바일에서 사용하기 적합한 형태로 만든 웹사이트입니다. 모바일 기종이나 운영 체제에 상관없이 모든 단말기에서 같은 콘텐츠를 볼 수 있습니다. 앱 마켓에서 다운로드해 설치하는 응용 프로그램이 아니라 모바일에서 사용하기 좋게, 앱과 유사한 디자인과 UX/UI를 제공하는 웹사이트입니다.

외부 유입과 공유가 쉽고, URL로도 접근이 가능해 접근성이 좋다는 장점이 있습니다. 또 네이티브 앱처럼 새 기능을 추가할 때마다 앱 마켓의 심사를 거치지 않아도 되기 때문에 최신 버전으로 빠르고 쉽게 업데이트 가능합니다. 그렇지만 모바일 기기의 브라우저에서 동작하는 웹사이트이기 때문에 기능에 제약이 많은 단점이 있습니다.

하이브리드 앱

하이브리드 앱은 네이티브 앱과 웹 앱의 장점을 결합한 앱입니다. 네이티브 앱의 사용성과 웹 앱의 접근성을 모두 갖추고 있는데요. 기본적으로 웹 기술을 사용해 구현하지만, 네이티브 앱에서 사용되는 API와 연동하여 더욱 강력한 기능을 제공할 수 있습니다. 네이티브 앱과 웹 앱 각각의 장점을 살리면서 비교적 빠르고 쉽게 개발할 수 있는 장점도 있습니다.

하지만 성능과 사용자 경험 측면에서는 제한이 있을 수 있습니다. 특히 웹 뷰를 사용하기 때문에 네이티브 앱보다 성능이 떨어질 수 있으며, 웹 앱처럼 다양한 디바이스에서 일관된 사용자 경험을 제공하기 어려울 수도 있습니다.

IA (Information Architecture, 정보구조)

IA는 정보구조도로, 서비스의 전체 그림과 흐름을 파악하고 결정할 때 쓰입니다. 제품과 서비스를 구성하는 정보와 콘텐츠의 구조, 우선순위, 흐름을 설계하는 가장 기초적인 작업인데요. 사용자에게 언제, 어떤 방식으로 정보를 제공할지 결정하는 중요한 단계이기도 합니다.

배포

준비 완료된 서비스를 사용자에게 제공하는 단계입니다.

---

UX와 UI의 차이

UX와 UI의 정확한 개념과 자주 사용하는 여러 UX/UI 용어까지 자세히 알고 나니, 두 용어의 차이도 잘 아시겠죠?

UI는 사용자가 디지털 제품이나 서비스와 상호 작용할 때 볼 수 있는 모든 것(버튼, 아이콘, 색상, 폰트 등)을 의미합니다. 시각적인 측면이라고 생각할 수 있죠. 반면에 UX는 사용자가 제품을 사용하는 과정에서 느끼는 모든 것을 의미합니다. 제품의 기능, 콘텐츠, 정보 구성, 디자인, 사용성 등 모든 측면에서 사용자의 만족도와 편리성을 고려하기 때문에 UI보다 더 넓은 범위를 다룹니다.

좋은 UI는 탄탄한 UX 분석에서 나오고, 좋은 UX는 잘 설계된 UI를 통해 실현됩니다. 이는 사용자가 제품을 쉽게 이해하고, 더 자주 그리고 더 오래 사용할 수 있도록 돕죠. 서로 연관성이 높은 UX/UI 두 요소는 디지털 제품의 디자인과 사용성을 개선하는 데 중요한 역할을 하며, 함께 작동해야 긍정적인 결과를 얻을 수 있습니다.

---

탄탄한 기초와 실무 역량 갖춘
UX/UI 커리어를 시작하고 싶다면

사용자들에게 사랑받는 제품과 서비스를 만들고 싶나요? 탄탄한 UX/UI 기초 이론부터 현업에 바로 투입 가능한 실무 역량까지 갖출 수 있는 코드스테이츠 UX/UI 기획자 부트캠프에서 실력을 키워보세요. IT 유망 분야로 손꼽히는 만큼 UX/UI 디자이너, UX 리서처, UX 라이터, 프로덕트 디자이너 등 다양한 가능성이 있습니다. UX/UI 커리어 입문을 위한 AtoZ, 성공적인 UX/UI 기획자 커리어를 쌓는 첫 시작을 코드스테이츠와 함께하세요.

_{글・편집 최인성 Content Manager
원고 검수 민지영 Growth Manager 서한교 Consultant 한정민 Content Development Manager (UX/UI 기획자 부트캠프)}

---