[UX/UI 사전캠프_2일차] UXUI 용어정리

UXUI 용어정리

 

UX(User Experience) : 유저(사용자) 경험. 서비스를 이용하면서 느끼는 감정, 태도, 인식 등

 

UI(User Interface) : 유저(사용자)가 제품을 사용하기 위한 상호작용의 모든 것. 텍스트, 이미지, 영상 등

 
 
 

Feature(피처) : 서비스에서 하나의 기능 단위를 뜻하는 단어로, 핵심이 되는 기능을 키 피처(Key Features)라고 지칭한다.
 
Feasibility : 디자인 -개발 리소스, 기간, 예산 등을 현실적으로 따져보았을 때 실현 가능성이 있는지를 의미.

개발해야 하는 피처를 정할 때 팀이 가지고 있는 리소스는 충분한지, 실현 가능한 일정인지 확인하기 위해 사용한다.
 
 
 
VOC(Voice of Customers) : 고객의 목소리. 고객으로부터 접수된 피드백이나 불만, 리뷰 등. 

UX에서 리서치를 위해 VOC를 이용하는 경우가 많음

UGC(User Generated Content) : 사용자가 생성한 콘텐츠. 틱톡 콘텐츠나 스타일쉐어의 코디 등

 
 

Fidelity : 충실도. 디자인의 디테일한 정도나 컬러, 폰트 등이 얼마나 최종 디자인에 가까운지를 나타내는 말.
Low Fidelity(Lo-Fi)는 최소한의 구성 요소는 갖추고 있는 정도. 반대로 High Fidelity(Hi-Fi)는 완성에 거의 가까운 형태다.

오른쪽으로 갈수록 Hi-Fi (출처:Decode, 링크연결)

 
Wireframe(와이어프레임) : 와이어프레임을 통해 아이디어 표현, 피처가 어떤 흐름을 통해 구현되어야 하는지를 표현.

기획 단계에서  제작하며, 각 페이지들의 정보와 UI 요소 등에 대한 배치를 표현한다. 

보통 모노톤으로 진행되는 와이어프레임 (출처:decode, 링크연결)

 
 
Storyboard(스토리보드) : 서비스의 각 페이지 구성요소나 콘텐츠의 설명, 페이지 간의 이동 흐름, 로직 등을 기술한 문서
와이어프레임에 시나리오, 콘텐츠 설명 등이 첨부되면 스토리보드가 된다.
 
Prototype(프로토타입) : 서비스에 대한 기능 및 사용성을 등을 테스트하기 위해 제작한 움직이는 디자인 시안. 사용성 테스트에 사용
 
IA(Information Architecture) : IA 혹은 정보 구조도. 제품, 서비스를 구성하는 정보의 구조와 우선순위, 흐름의 설계 등.

스포티파이 IA

 
UT(Usability Testing) : 사용성 테스트. 기획/디자인 된 프로덕트를 실제 사용자(혹은 테스터)가 프로덕트를 사용하는 과정에서 불편함 없이 의도대로 사용하여 목적한 바를 달성할 수 있는지 알아보기 위한 과정
 
 
 
슬라이더 (Slider) : 사용자가 제한된 범위 안에서 입력 값을 선택하게 해주는 UI 요소. 일반적으로 가로 방향으로 이동하는 막대 형태, 사용자가 이동시키는 위치에 따라 값을 선택

스피너(Spinner) : 숫자 입력 컨트롤. 편집 필드와 위아래 화살표 버튼으로 구성. 편집 필드에 직접 숫자를 입력하거나 화살표 버튼으로 조절하여 원하는 숫자를 입력

L:슬라이더, R:스피너 (출처:링크)

 

입력 필드 (Input Field) : 사용자가 키보드를 사용하여 직접 텍스트를 입력하는 곳. 검색창, 로그인 폼, 회원가입 폼 등.

드롭다운 리스트 (Drop-down List) : 사용자가 선택할 수 있는 여러 옵션 중 하나를 선택

체크박스 (Checkbox) : 여러 옵션 중 동시에 여러 가지 항목을 선택. 하나 이상의 항목을 선택할 수 있다는 점에서 라디오 버튼(한가지만 선택 가능)과 차이가 있다.
 

라디오버튼, 토글 스위치, 드롭다운 리스트, 체크박스 (왼쪽 위부터 시계방향)

 
 
CTA (Call To Action) : 사용자가 구매, 구독, 방문 등 원하는 행동을 하도록 유도하는 장치. 

특정 행동을 유도하는 자극적인 문구와 눈에 띄는 시각적 요소로 구성한 버튼을 주로 활용.

티스토리의 '자세히보기' CTA 버튼

카드 (Card) : 이미지와 텍스트 등으로 구성하여 다양한 정보를 담는 직사각형 요소.

시각적으로 눈에 띄게, 정보를 한눈에 쉽게 확인할 수 있다.

캐러셀 (Carousel) : 한 화면에서 두 개 이상의 여러 콘텐츠를 보여줄 때 사용. 

주로 슬라이드 형태로 이미지 혹은 영상 등을 순환하며 노출시키는 형태로 이커머스 메인 페이지에서 가장 흔히 볼 수 있습니다.

티스토리의 캐러셀

헤더 (Header) & 푸터 (Footer) : 헤더는 웹페이지의 상단 영역, 푸터는 웹페이지의 하단 영역. 

헤더에는 주로 브랜드 로고와 네비게이션바가 포함, 푸터에는 회사 정보, 개인정보 정책, 소셜 미디어 정보 등이 포함.

티스토리의 헤더

티스로리의 푸터

 
 
 
 
출처 : https://brunch.co.kr/@sue/34

[UX 스터디] 실무에서 쓰는 UX/UI 용어 정리

 
출처 : https://www.codestates.com/blog/content/uxui-%EC%9A%A9%EC%96%B4-%EC%B4%9D%EC%A0%95%EB%A6%AC?page=0

UX/UI 기획자를 위한 UX/UI 용어 총정리 - 코드스테이츠 공식 블로그