IT 회사의 비전공자를 위한 UX 용어 모음집
성장을 고민하는 직장인을 위해 #8
기본 UX 용어가 알고 싶은 PM 지망생, 김제로
경영학과 졸업 후, 유망하다는 PM·서비스 기획자로 진로를 준비하고 있는 김제로 님. 대학 조별과제 때 팀을 잘 이끌고, 매일 사용하는 앱서비스를 직접 개선해보고 싶은 마음에 진로를 PM·서비스 기획자로 정했지만 채용 공고의 JD(Job Description)를 보면서 용어에 숨이 턱 막히고 맙니다.
IT 기업의 서비스 기획자, PM 직무를 준비하고 계시다면 이번 포스트를 꼭 확인하세요. 멀게만 느껴지던 UI, UX. 기본 용어부터 하나씩 알려드리겠습니다!
* 목차
1) UI, UX 기본 용어
1-1) UI의 구성요소
1-2) 콘텐츠를 담을 때 자주 쓰는 UI 요소
1-3) 특정 영역을 구성하는 UI 요소
2) 개발과 관련된 UX 용어
3) 업무 방법론과 관련된 UX 용어
4) 사용자 여정과 관련된 UX 용어
1) UI, UX 기본 용어
*UI(User Interface)
사용자가 제품을 사용하기 위해 상호작용할 수 있는 모든 것으로, 화면, 팝업창, 배너, 아이콘 등 시각적, 기능적 요소가 UI를 구성합니다.
*UX(User Experience)
사용자 경험. 최종 사용자가 회사, 서비스, 제품과 상호작용하는 모든 측면이며, 특정 제품에 대해 상호작용하며 얻는 경험의 질을 일컫습니다. 90년대 초반, 애플 사에서 일하던 도널드 노먼에 의해 처음 등장한 개념입니다.
*UI element 또는 UI Component
아이콘, 메뉴, 체크박스 등 UI를 구성하는 요소입니다. 1-1) UI의 구성요소에서 자세히 알아보겠습니다.
*GUI(Graphic User Interface)
그래픽 사용자 인터페이스. 아이콘, 버튼, 메뉴 등을 통해 명령, 컴퓨터와 상호 작용하는 것을 말합니다.
1-1) UI의 구성요소
*드롭다운 : 긴 옵션 목록에서 하나의 항목을 선택할 수 있는 요소입니다. 공간 절약을 위해 사용하며, ‘필수 선택’ 등의 문구로 안내하기도 합니다.
▲ 네이버쇼핑, 지그재그, 아마존에서 발견한 드롭다운*라디오 버튼 : 상호 배타적인 옵션 세트 중 단 한 가지를 선택할 때 사용합니다.
▲ 라디오 버튼이 사용된 예시. 왼쪽부터 컨비니, 오디오클립*브레드크럼(breadcrumb) : ‘헨젤과 그레텔’에서 따온 용어로, 직역하면 빵부스러기. 사용자가 어떤 위치에 있는지 시각적으로 나타내는 요소입니다.
▲네이버쇼핑에서 발견한 브레드크럼*토글 : on/off 등 특정 기능을 켜고 끌 때 사용합니다.
▲토글 사용 예시. 왼쪽부터 아이폰 시계- 알림, 오디오클립-설정*슬라이더 : 정해진 범위 내에서 선택하거나 움직여 설정합니다.
▲ 가격 범위 설정에서 슬라이더를 사용한 서비스. 왼쪽부터 직방, 에어비앤비*체크박스 : 1개 또는 그 이상의 항목을 선택할 때 사용합니다.
▲ 약관 동의를 위한 체크박스. 왼쪽부터 신한은행, 컨비니*텍스트필드 : 사용자가 텍스트를 입력하고 수정할 수 있는 영역을 일컫습니다.
▲ 텍스트필드 사례. 제로베이스 회원가입 화면, 마켓컬리 검색 화면, 오늘의집 리뷰 작성 화면.*CTA(Call To Action) : 행동을 유도하는 버튼 또는 탭. 설계된 목적으로 행동하도록 자극하는 문구를 넣어, 사용자를 설득하고 행동으로 옮기는 데 사용합니다. 가장 눈에 띄어야 하는 부분 중 하나로 밝은 색, 쉽게 구분 가능한 색으로 시각적 계층 구조를 사용합니다.
▲넷플릭스 회원가입 버튼, 제로베이스 프론트엔드 스쿨의 수강신청 버튼.1-2) 콘텐츠를 담을 때 자주 쓰는 UI 요소
*카드 : 다양한 정보를 포함하는 직사각형, 정사각형 모듈입니다. 메인/서브 텍스트, 이미지/GIF 등 미디어 요소를 활용해 구성됩니다.
▲ 카드 요소의 용례. 토스피드와 텍스처*캐러셀 : 하나의 화면에서 두 개 이상의 콘텐츠를 보여줄 때 사용합니다.
▲ 캐러셀을 활용한 사례. 왼쪽부터 제로베이스, 마켓컬리, 솜씨당1-3) 상하단, 메뉴 등 특정 영역을 구성하는 UI 요소
*헤더
UI를 탐색하는 기반이 되는 것으로, 사이트 제목을 포함하며, 드롭다운 메뉴나 아이콘 버튼을 포함하고 있기도 합니다. 브라우저 창의 최상위 요소로, 전체 너비에 걸쳐져 있습니다. 제품 로고, 메뉴가 앉혀져 있으며, 우측에는 내 계정, 알림, 검색 등이 위치하는 경우가 일반적입니다.
▲ 제로베이스의 헤더 영역. 사용성을 고려하여 2022년 3월 UX 개편을 마쳤습니다.
▲토스피드와 배민다움의 헤더 영역.*푸터
모든 페이지 하단, 본문 아래에 있는 영역을 말합니다. 요소로는 연락처, 개인정보 정책, 이용약관, 사이트 맵, 계열사 정보, 채용, 뉴스레터, 소셜미디어 등이 사용됩니다. 상위-하위 페이지 구분 등 정보에 계층구조가 없을 때는 혼란을 줄 수 있으므로 유의합니다.
▲ 제로베이스의 푸터 영역. 개인정보 정책, 연락처, SNS 등의 정보 요소를 포함합니다.*내비게이션
사용자가 구매, 탐색 등의 목표를 달성할 수 있도록 제품 내의 여러 콘텐츠를 탐색하고 들어갔다 나올 수 있게 만드는 요소. 초기 단계부터 생각되어야 하며, 내비게이션 서랍, 상·하단 내비게이션 등 여러 형태로 사용됩니다.
▲ 지메일, 티빙에서의 내비게이션 용례*햄버거 메뉴 : 3개의 가로 선으로 목록 메뉴를 나타내며, 일반적으로 상단 모서리에 위치합니다.
*미트볼 메뉴 : 3개의 가로 점. 햄버거 메뉴와 같이, 목록 메뉴를 함축합니다.
*도시락 메뉴 : 3*3 형태로 놓인 9개의 점. 동일한 제품 내에서 다른 애플리케이션을 열 때 자주 사용.
▲ 햄버거, 미트볼, 도시락 메뉴의 활용 예시. 위에서부터 제로베이스, 와디즈, 구글2) 개발과 관련된 UX 용어
*프론트엔드/백엔드 : 프론트엔드는 웹이나 앱 상에서 사용자에게 보여지는 부분, 백엔드는 사용자에게 보여지지 않는 정보 처리와 관련된 부분을 일컫습니다.
*네이티브 앱/웹 앱/하이브리드 앱
-네이티브 앱은 모바일 기기에 최적화된 언어로 개발된 앱으로, 안드로이드, IOS 기반의 API로 개발됩니다. -웹 앱은 웹 기술을 통해 개발된 후 서비스를 앱으로 감싼 형태입니다. 안드로이드, iOS. 전부 배포가 가능합니다. -하이브리드 앱은 위 두 가지를 함께 사용하는 앱으로, 중간 형태라고 생각할 수 있습니다.
*배포 : 빌드가 완료된 서비스를 사용자에게 제공하는 것.
*반응형 웹 : PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이 종류에 따라 화면의 크기가 변하도록 만든 웹페이지입니다.
*QA(Quality Assurance) : 제품이 안정적이고 예측 가능하게 작동되도록 제품의 기능, 환경을 테스트합니다. 버그, 결함을 시정하고, 릴리즈 일자를 조율합니다.
*IA (Information Architecture) : 정보구조도. 주로 서비스 전체 아웃라인을 조망하기 위해 사용합니다.
*상세 기획서 : 스토리보드를 중심으로 페이지 구성, 기능, 정책 등 서비스와 관련된 모든 내용을 담은 최종 산출물입니다.
*플로우 차트 : 특정 기능, 서비스 플로우의 흐름을 순서도나 기호를 사용해 도식적으로 표현한 다이어그램을 말합니다.
3) 업무 방법론과 관련된 UX 용어
*애자일(Agile) 방법론
미리 모든 것을 계획하고 개발을 시작하는 전통적 방법론(waterfall)과는 다르게, 최소 기능 제품(MVP)을 빠르게 개발하여 피드백받고, 지속적으로 개선해나가는 개발 방법론.
*스크럼(Scrum)
대표적인 애자일 방법론. 전통적 개발 방법론과는 다른 개념으로, 솔루션에 포함할 기능에 대해 우선순위를 부여하고, 개발 주기를 설정해 실제 동작할 수 있는 결과를 만들어내는 방법을 말합니다.
*스프린트(Sprint)
스크럼이 이루어지는 반복적인 개발 주기. 1주에서 4주 정도의 주기를 가지고 진행하는 방식으로 제품을 개발하거나 개선합니다. 일일 단위의 스프린트 미팅을 통해 어제 한 일, 오늘 할 일, 장애 요소가 있는지를 공유하고 계획합니다.
*프로덕트 백로그(Product Backlog)
제품 개선을 위해 진행되어야 할 요구사항. 요청자, 시간, 요구에 대한 상세한 사항, 우선순위를 기록합니다.
*칸반
또 다른 대표적인 애자일 개발 방법론으로, 특정 단계의 작업이 완료되었을 때 다음 단계로 끌어오는 방식으로 진행하는 업무 방식을 말합니다. 팀의 업무량과 진행 상황을 시각적으로 확인할 수 있다는 장점이 있습니다.
▲ 아날로그 형식의 칸반 보드. 이미지 출처 : 언스플래시*MVP(Minimum Viable Product)
최소한으로 실행 가능한 제품. 디자인 콘셉트를 검증하는 프로토타입과는 비슷하지만 다소 다른 개념으로, 비즈니스 모델에 대한 기본 가설을 테스트할 수 있습니다. 아이디어를 검증하고, 기능을 테스트하고, 신제품 출시 기간을 단축하고, 시장 적합성을 확인할 수 있습니다.
좋은 MVP는 적은 기능을 가지고 있되, 핵심 기능은 완전히 동작해야 하며, 고객의 니즈나 욕구를 충족시켜야 합니다. MVP를 설정할 때에는 다음 2가지를 반드시 고려해야 합니다. ‘어떠한 가설을 검증하려 하는가?’, ‘가설을 검증하기 위해 필요한 핵심 기능은 무엇인가?’
*OKR(Objectives & Key Results)
목표 및 핵심 결과를 말하며, 달성하고자 하는 것과 이를 위한 이정표까지 해당됩니다. 이는 정량적으로 측정 가능한 항목이어야 합니다. UX/UI 디자이너에게 OKR이 필요한 이유는 매출 증대, 리드 생성, 이탈 감소, 브랜드 이미지 개선, 신제품 출시 등으로 필요, 정량화하여 판단할 수 있습니다.
*AB Test
임의로 나눠진 집단에게 서로 다른 UI/UX를 제시하고, 어떤 집단이 더 높은 성과를 보이는지 정량적으로 평가하는 방식. 대부분의 IT기업이 의사결정의 도구로 활용합니다. AB Test는 ‘목표 설정, 가설 수립, 실험 설계 및 진행, 결과 검증’이라는 단계를 거쳐 이루어집니다.
4) 사용자 여정과 관련된 UX 용어
UI와 UX의 중심에는 모두 ‘사용자’가 있습니다. 이번 파트에서는 특히 사용자가 목적을 달성하기까지의 여정, 우리 제품을 사용하는 가상의 인물을 설정하는 용어 등을 살펴봅니다.
*사용자 여정 지도(User Journey Map)
서비스를 이용하면서 겪는 과정을 단계적으로 시각화한 것을 말합니다. 사용자가 제품을 발견하고, 처음으로 경험하고, 원하는 것을 위해 탐색하고, 예약/구매 등 목표를 이루는 과정을 일컬으며, 그 과정에서의 소요되는 시간, 목표, 감정, 페인 포인트를 단계별로 표현합니다.
사용자 여정 지도는 문제점을 구체화하고, 원인을 발견해 해결방안을 모색하는 자료로 활용될 수 있습니다. 또한, 팀원이 제품에 대해 갖고 있는 콘텍스트를 이해, 합일시키는 데 도움이 됩니다.
*페르소나(persona)
UX/UI에서 앱, 웹 등의 일반적인 사용자를 나타내는 가상의 캐릭터. 나이, 성별, 결혼 여부, 직업, 소재지, 수입, 취미생활, 서비스와 관련한 불만사항 또는 니즈 등을 최대한 구체적으로 설정합니다.
'20대 초반 대학생'과 같은 막연한 설정보다는, '23세 남자, 컴퓨터공학을 전공하는 대학생 김제로, 서울 마포구 거주, 복학 후 과외로 매월 60만 원 아르바이트비의 수입이 있으며, 취미생활은 컴퓨터 게임과 게임 유튜브 시청, 전공은 잘 맞으나 직무를 고르지 못하고 있음, 향후 게임 분야서 일하고 싶음'등과 같이, 실제로 살아갈만한 인물을 설정해 내러티브를 부여합니다.
*엔드유저 : 최종적으로 제품을 사용하는 사용자가 되는 사람으로, 일반적인 고객과는 다른 개념입니다.
*스토리보드
영화에서 비롯된 것으로, 스토리의 이미지를 보드에 고정했던 것에서 시작된 개념입니다. 스토리를 시각화하기 위해 배열된 일러스트레이션 시퀀스로 제품에 대한 사용자 경험을 예측하고 탐색하는 도구로 쓰이며, 새로운 제품이나 서비스를 만들 때, 제품을 빌드하면서 작성합니다.
| UI, UX의 차이
여기까지 기본 용어들을 훑어봤지만, UI와 UX의 차이에 대해 명확히 말할 수 없다면 다음 전문가의 한 마디를 참고해보세요.
"UI는 가고자 하는 곳으로 데려다주는 다리이고, UX는 도착했을 때 느끼는 느낌이다."
-Jason Ogle, User Defenders 팟캐스트의 호스트 및 프로듀서. CACI International의 디자이너
"UX는 문제를 해결하기 위한 사용자의 여정에 초점을 맞추고 UI는 제품 표면의 모양과 기능에 초점을 맞춘다."
-Ken Norton, Google Venturs의 파트너, 전 Google 제품 관리자
| UI, UX 좀 더 자세히 알고 싶다면
UX 디자인의 용어는 조금씩 변화하고 있고, 전문가마다 다른 의견을 내기도 합니다. 하지만, 기본적인 개념을 익혀두는 것만으로 앞으로의 업무에는 꽤나 큰 도움이 될 거라는 점!
UI, UX, 조금 더 본격적으로 배우고 싶다면, 현업에서 활발하게 활동하고 있는 전문가가 있는 부트캠프를 경험해보세요.
제로베이스에서부터 UXUI 디자이너로 성장할 수 있는 UIUX 스쿨,
서비스 기획자, PM으로 다가갈 수 있는 PM 스쿨이 여러분을 기다립니다.
> 제로베이스 UIUX 스쿨, PM스쿨 바로가기
>> 성장에 대한 더 다양한 이야기, 제로베이스 미디어에서 확인해보세요.
*참고자료
· 제로베이스 서비스 기획서 완성하기 완주반, UI/UX 포트폴리오 완성 완주반
https://www.usertesting.com/blog/ui-vs-ux#UX
https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/
https://uxplanet.org/ui-ux-design-glossary-navigation-elements-b552130711c8
https://www.smashingmagazine.com/2017/10/storyboarding-ux-design/
https://www.keka.com/ui-ux-team-okr-examples.
https://www.productboard.com/glossary/minimum-viable-product-mvp/
https://www.boldare.com/blog/first-version-of-your-app-mvp-vs-prototype/
https://material.io/components
