사전캠프 02 - UX/UI 용어 정리

UX(User Experience): 사용자 경험. 제품이나 서비스를 사용하는 사용자가 느끼는 전반적인 경험(감정,태도,인식 등등)을 뜻함. UX기획/디자인은 사용자의 경험을 분석하고, 사용자의 필요와 행동을 고려하여 제품이나 서비스를 구상하는것을 뜻한다.

 

사용자 여정과 관련된 UX 용어

• 사용자 여정 지도(User Journey Map): 사용자가 서비스를 이용하면서 겪는 과정을 단계적으로 시각화한 것. 문제점을 구체화하고 원인을 발견해 해결방안을 모색하는 자료로 활용 가능.
• 페르소나(Persona): 일반적인 사용자를 나타내는 가상의 캐릭터. 타겟층의 니즈 등을 최대한 구체화하여 설정한다.
• 엔드유저: 최종적으로 제품을 사용하는 사용자
• 스토리보드: 스토리를 시각화하기위해 배열된 일러스트레이션 - 제품에대한 사용자경험을 예측하고 탐색하는 도구

 

업무 방법론과 관련된 UX 용어

• 애자일(Agile) 방법론: 최소기능제품(MVP)을 빠르게 개발하여 피드백을받으며 지속적으로 개선해나가는 개발 방법론. 미리 모든것을 계획하고 시작하는 Waterfall 방법론과 다른방식.
• 스크럼(Scrum): 대표적인 애자일 방법론. 솔루션에 포함할 기능에 대해 우선순위를 정하고 개발주기를 설정해 결과를 만들어내는 방법
• 스프린트(Sprint): 스크럼이 이루어지는 반복적인 개발 주기.
• 프로덕트 백로그(Product Backlog): 제품 개선을 위해 진행되어야 할 요구사항
• 칸반: 또다른 대표적인 애자일 개발 방법론. 특정 단계의 작업이 완료되었을 때 다음 단계로 끌어오는 방식으로 진행. 팀의 업무량과 진행상황을 시각적으로 확인할 수 있는 장점이 있음.
• MVP (Minimum Viable Product): 최소한으로 실행 가능한 제품. 디자인컨셉을 검증하는 프로토타입과 비슷하지만 다른개념, 비즈니스 모델에 대한 기본가설(아이디어의 검증, 기능테스트 등등)을 테스트 할 수 있으며, 출시 기간을 단축하고 시장 적합성을 확인할수 있음. 적은기능으로 핵심기능을 동작하도록 해야하며, MVP를 설정할때는 어떠한 가설을 검증하려하는지, 그것을 위해 필요한 핵심기능은 무엇인지 고려해야 한다.
• OKA(Objectives & Key Results): 목표와 핵심 결과, 달성하고자 하는것과 그것을 위한 이정표이며 정량적으로 층정 가능한 항목이어야 함.
• AB Test: 임의로 나눠진 집단에게 서로 다른 UI/UX를 제시하고 그 성과를 정량적으로 평가하는 방식. '목표 설정, 가설 수립, 실험 설계및 진행, 결과 검증' 이라는 단계를 거친다.

 

개발과 관련된 UX 용어

• 프론트/백엔드: 프론트는 웹/앱에서 사용자에게 보여지는 부분, 백엔드는 사용자에게 보여지지않는 정보처리와 관련된 부분(서버, 데이터 등등..)
• 네이티브 앱/웹, 앱/하이브리드 앱: 네이티브 = 모바일 기기에 최적화된 언어로 개발된 앱(안드로이드, iOS기반의 api로 개발됨), 웹 앱 = 웹기술을 통해 개발된 후 서비스를 앱으로 감싼 형태(안드로이드, iOS전부 배포가능), 하이브리드 = 앞의 두가지를 함께 사용하는 앱
• 반응형 웹: PC, 스마트폰, 태블릿 등 다양한 디스플레이 종류에 따라 화면의 크기가 변하도록 최적화된 웹페이지
• QA(Quality Assurance): 제품의 기능,환경을 테스트. 버그, 결함을 고치고 배포일자를 조율할수있다.
• 플로우차트: 특정 기능, 서비스 플로우의 흐름을 순서도나 기호를 사용해 도식적으로 표현한 다이어그램
• 상세기획서: 스토리보드 중심으로 페이지 구성, 기능, 정책 등 서비스와 관련된 모든 내용을 담음

---

 

UI (User Interface): 사용자 인터페이스. 사용자가 디지털 제품이나 서비스와 상요작용 할 수 있도록 연결하는 매개체. 레이아웃, 버튼, 텍스트, 이미지, 애니메이션 등등의 시각적 요소들이 이에 해당된다. 직관적인 디자인의 좋은 UI는 사용자가 디지털 제품이나 서비스를 쉽게 사용할수 있게 만드는 등, 사용자 경험과 크게 연관되므로, UI는 UX의 중요한 요소이기도 하다.

• GUI(Graphical User Interafce): 사용자가 그래픽 기반으로 컴퓨터와 상호작용하는 방식. 마우스, 키보드 등을 사용하여 창, 버튼, 아이콘 등의 그래픽 요소들을 조작하여 컴퓨터를 제어할 수 있는것이 그 예시이다. 1970년대 말에 최초 개발 되었으며, GUI를 통해 키보드와 마우스로 컴퓨터와 상호작용함으로써 그전보다 좀더 쉽고 직관적이게 컴퓨터를 사용할 수 있게됨.
• 와이어프레임 Wireframe: 선으로 틀을 잡는다는 뜻, 기획 단계에서 페이지를 어떻게 구상할 것인지 구조를 잡기위한 목적으로 만든다
• 프로토타입 Prototype: 개발 전 단계에서 실제 제품과 거의 비슷하게 구현된것으로 페이지 이동과 상호작용이 가능
• 모달(Modal): 기존 브라우저위에 오버레이(레이어)를 까는것, 기존 브라우저와 종속적관계 (부모-자식의형태)를 가지며 브라우저 옵션과 관계없이 띄울수 있음
• 팝업(Pop-up): 브라우저위에 또다른 브라우저를 띄우는것, 기존 브라우저와 독립적인 관계, 브라우저 옵션을통해 열리지않게 할 수 있음
• GNB(Global Navigation Bar): 어느페이지에 들어가든 사용 가능한 최상위 메뉴
• LNB(Local Navigation Bar): 서브메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴
• CTA(Call To Action): 행동을 유도하는 버튼 또는 탭. 보통 가장 눈에 띄도록 제작
• 브레드크럼(Breadcrumbs): 사이트 이동경로, 사용자가 현재 어느위치에있는지 보여줌
• 알럿(Alert): 주의를 주거나 알림을 주는 경우에 사용, 버튼이 포함된다 (예시: 삭제하시겠습니까 ?예/아니오)
• 토스트(Toast): 알럿과 비슷하게 나타나지만 버튼이 없으며 일정시간이 지나면 스스로 사라짐(예시: 결제가 완료되었습니다/장바구니에 상품을 담았습니다)
• 스피너(Spinner): 숫자를 직접 입력할수있는 편집 필드와, 위 아래 화살표 버튼으로 구성된 숫자 입력 컨트롤

드롭다운, 아코디언, 캐러셀 등과 같은 나에게 이미 익숙한 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 용어 총정리 - 코드스테이츠 공식 블로그

 

https://brunch.co.kr/@zero-base/20

IT 회사의 비전공자를 위한 UX 용어 모음집

https://velog.io/@tata-v_vlelog/UIUX-UIUX-%EC%9A%A9%EC%96%B4-%EC%A0%95%EB%A6%AC#span-stylebackground-color-e7e7e7--ux--span

[UIUX] 📱UIUX 용어 정리🕹️

https://ahnsisters.tistory.com/20

[UIUX] 실무에서 자주 사용되는 UI 용어

https://brunch.co.kr/@fastfive/428

담당자도 헷갈리는 UX/UI 용어 모음.zip