UXUI 용어 정리
UI(User Interface) - 화면에 보여지는 인터페이스
UX(User Experience) - 사용자 경험
BX(Brand Experience) - 브랜드 경험
CX(customer Experience) - 고객 경험
UI Element UI Component - 아이콘,메뉴 토글 등 UI를 구성하는 요소
GUI(Graphical User Interface) - 그래픽으로 컴퓨터와 상호작용하는 방식
UI 구성 요소
드롭다운 - 긴 옵션목록에서 하나의 항목을 선택할 수 있는 요소 (공간절약) (옷 사이즈 선택)
아코디언 - 접었다 펼쳤다 할 수 있음(공간 절약) (여성복 > 아우터 ㅣ 상의 ㅣ 하의 // 남성복 > 아우터 ㅣ 상의 ㅣ 하의)
자동완성 - 사용자가 내용을 입력 중일 때 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여줌(검색어 창)
디바이더 - 아코디언에서 탭할 수 있는 영역을 정의 (구분선)
라디오 버튼 - 상호 배타적인 옵션 세트 중 한 가지를 선택할 때 사용 (성별 선택)
브레드크럼 - 사용자가 어떤 위치에 있는지 시각적으로 나타내느 요소 (파일 탐색기 상단에 있는 내pc> 다운로드)
토글 - on/off 기능 (알람)
픽커 - 시간, 날짜등 범위 내 특정 숫자를 선택할 때 사용 (캘린더 어플)
픽커 휠형태 - 원하는 항목으로 빨리 이동할 수 있음 (지도 앱 출발 시간 설정)
슬라이더 - 정해진 범위 내에서 선택하거나 움직일 수 있는 요소 (영상시청시 하단에 위치한 선)
스피너 - 숫자 입력 컨트롤을 말하며, 위아래 화살표 버튼을 사용 값을 조절 (구매 갯수 설정)
체크박스 - 1개 이상의 항목일 서택할 때 사용 (해당하는 사항을 모두 선택하시오)
텍스트필드 - 사용자가 텍스트를 입력하고 수정할 수 있는 영역 (검색어, 리뷰작성 등)
플레이스홀더 - 사용자가 값을 입력하기 전에 도움을 줄 수 있는 힌트 (ID,password)
CTA(Call To Action) - 행동을 유도하는 버튼 or 탭 (지금 바로 다운로드)
툴팁 - 보통 ⓘ 모양 아이콘으로 부연설명을 줌(비밀번호는 영어, 숫자, 특수기호가 포함되어야 합니다.)
컨포넌트 - 독립된 모듈
카드 - 다양한 정보를 포함하는 사각형모듈로 미디어(텍스트, 이미지 GIF)로 구성
캐러셀 - 하나의 화면에 두 개 이상의 콘텐츠를 보여줄 때 사용 (카드+카드)
스켈레톤 - 데이터가 렌더링 되기 전 윤곽을 먼저 그려주는 로딩 애니메이션
팝업 - 기존 열려있는 브라우저 페이지 위에 또 다른 브라우저 페이지를 띄우는 것 (오늘 하루 이 창을 열지 않음)
모달 - 기존 열려있는 브라우저 페이지 위에 레이어를 까는 것
페이지네이션 - 현재 페이지를 표시 할때 사용 (< ① 2 3 4 5>)
뱃지 - 새로운 알림
프로그래스 인디케이터 - 시각적으로 대기 중임을 알려주는 반복적인 행동을 하며 완료시 사라짐(로딩중)
알럿- 유저에게 주의를 주거나 알림을 일방적으로 주는 경우 (버튼이 하나)(시청에 주의하십쇼 확인)
컨펌 - 유저에게 주의를 주거나 알림을 일방적으로 주는 경우 (버튼이 두개)(삭제 하시겠습니까? 예/ 아니오)
프롬프트 - 유저에게 주의를 주거나 알림을 일방적으로 주는 경우 (텍스트 필드)
토스트 - 알럿과 다르게 유저가 개입할 수 없는 알림 (결제 완료 알림)
디폴트 - 컴포넌트의 기본 상태값(이메일을 입력해 주세요)
disabled - 비활성화 상태 (회원가입 단계에서 필수 입력을 입력하지 않았다면 다음 단계로 갈 수 없도록 하는 것)
active - 버튼이 눌리는 순간 눌렸음을 표시해주는 상태 (선택됨)
hover - 마우스를 올려 두면 선택할 수 있다는 힌트를 주는 역할 (웹에서만 가능)
코치마크 - 앱을 처음 실행했을때 사용방향을 지시 해주는 화면 (가이드)
새로고침 - 모바일 앱에서 위에서 아래로 당기면 새로고침됨
플로팅 버튼 - (배민 장바구니)
제스처 인터렉션 - 화면 컨트롤 하는 기본 요소 (확대, 더블클릭, 밀어서 삭제 등)
특정영역 UI 구성 요소
스플래시 - 모바일 앱 실행시 가장 처음 뜨는 화면 (대체로 로고화면)
헤더 - 사이트제목, 드롭다운, 메뉴, 아이콘 버튼들 포함. 페이지 맨위에 위치
GNB(Global Navigation Bar) - 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴
LNB(Llobal Navigation Bar) - GNB에 종속되는 서브메뉴 혹은 특정 페이지만 볼 수 있는 메뉴
푸터 - 페이지 하단 영역. 연락처(회사정보), 개인정보정책, 이용약관 등
네비게이션 - 사용자가 페이지를 탐색하고 들어갔다 나올 수 있게 만든 요소
탭 - 한 화면에 콘텐츠를 분리해서 보여줌 (> 펼치기)
햄버거 메뉴 - 3개의 가로선으로 나타넨 아이콘 모양 (좌우 상단 모서리에 주로 있음)
도너 메뉴 - 3개의 가로선이지만 아래로 갈 수록 짧아짐(필터선택 모양)
미트볼 메뉴 - 3개의 가로 점 (흔하게 보는 더보기 아이콘 모양)
케밥 메뉴 - 3개의 세로 점(그룹화 된 옵션)
도시락 메뉴 - 3x3 형태로 놓인 9개의 점 (어플리케이션 서랍 모양)
개발과 관련된 UX 용어
프론트엔드 - 사용자에게 보여지는 부분
백엔드 - 사용자에게 보여지지안는 부분
네이티브 앱 - 모바일 기기에 최적화된 언어로 개발된 앱
네이티브 웹 앱 - 웹기술을 통해 개발된 후 서비스를 앱으로 감싼 형태
하이브리드 앱 - 네이트브 앱과 네이티브 웹 앱의 중간형태
배포 - 서비스를 사용자에게 제공하는 것 (출시)
반응형 웹 - pc, 모바일, 태블릿 등 접속하는 디스플레이에 맞춰 화면의 크기가 변하도록 만든 웹
QA - 제품의 품질, 서비스를 테스트하고 버그나 결함을 수정
IA - 정보구조도. 서비스 전체 아웃라인을 조망
상세기획서 - 스토리보드를 중심으로 페이지 구성, 기능, 정책 등 서비스와 관련된 모든 내용을 담은 최종 산출물
플로우 차트 - 특정 기능, 서비스 플로우의 흐름을 도식적으로 표현한 다이어그램
업무방법
에자일(Agile) - 최소 기능(MVP)을 빠르게 개발하여 피드백받고 지속적으로 개선해나가는 개발 방법
스크럼(Scrum) - 대표적인 에자일 방법론, 솔루션에 포함할 기능에 대해 우선 순위를 부여하고 개발 주기를 설정해 실제 동작할 수 있는 결과를 만들어내는 방법
스프린트(Sprint) - 스크럼이 이루어지는 반복적인 개발 주기. 1~4주 정도의 주기를 가지고 진행하는 방식으로 제품을 개발하거나 개선.(미팅을 통해 어제 한 일, 오늘 할 일, 장애요소 등 공유하고 기획)
프로덕트 백로그 - 제품 개선을 위해 지행되어야 할 요구사항, 요청자, 시간, 요구에 대한 상세한 사항과 우선순위를 기록
칸반 - 또 다른 에자일 방식으로 특정 단계의 작업이 완료되었을 때 다음 단계로 끌어오는 방식으로 진행(팀의 업무량과 진행 상황을 시각적으로 확인 가능)
MVP(Minimum Viable Product) - 최소한으로 실행 가능한 제품. 디자인 컨셉을 검증하는 프로토타입과 비슷하지만 비즈니스 모델에 대한 기본 가설을 테스트할 수 있다. 아이디어 검증, 기능 테스트, 신제품 출시 기간 단축, 시장 적합성을 확인 (완전히 동작, 고객의 니즈 충족) (A를 만들어서 Z까지 발전시킴)
Production - MVP에서 시장 검증이 끝났다면 품질을 높임(완벽한 Z를 만들자)
OKR(Objectives & Key Results) - 목표 및 핵심결과. 달성하고자 하는 것과 이를 위한 이정표. (측정가능한 항목. 매출 증대, 리드 생성, 이탈 감소, 브랜드 이미지 개선, 신제품 출시)
A/B 테스트 - 임의로 나눠진 집단에게 서로 다른 UX/UI를 제시하고 어떤 집단이 더 높은 성과를 보이는지 평가하는 방식
사용자와 관련된 용어
사용자 여정 지도 - 서비스를 이용하면서 겪는 과정을 단계적으로 시각화한 것
페르소나 - 사용자를 나타내는 가상의 캐릭터를 설정해서 사용자의 니즈를 구체적으로 설정
엔드유저 - 최종적으로 제품을 사용하는 사용자
기타 용어
와이어프레임 - 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만듬 (기획 단계, 화면 구조 설계)
워크 플로우 - 작업 흐름도
프로토타입 - 실제 제품과 거의 흡사하게 구현한 것으로 페이지 이동과 상호 작용이 가능 (개발 전 단계, UI 상호작용 시뮬레이션)
스토리보드 - 컨셉을 시각적으로 표현한 것
