UI/UX 용어 : 실무에서 꼭 알아야 할 핵심 용어 가이드

UI/UX 정의

UX 디자인이 제품이나 서비스의 전체적인 사용자 경험 및 설계를 다룬다면, UI 디자인은 그 경험을 시각화하는 구체적인 인터페이스를 다룹니다. 두 분야는 밀접하게 연관되어 있으며, 성공적인 제품 개발을 위해서는 UX와 UI가 조화롭게 설계되어야 합니다.

UI (User Interface) : 사용자 인터페이스

사용자가 디지털 제품과 상호작용하는 시각적 접점입니다. 버튼, 아이콘, 색상, 폰트 등 사용자가 직접 마주하는 모든 시각적 요소를 포함합니다. UI 디자이너의 역할은 서비스나 제품을 사용자가 어떻게 이용하도록 시각적으로 구현할지 고민하고 디자인(톤앤무드, 레이아웃, 컬러, 타이포 등)하는 것입니다.

UI 디자이너의 역할 : 

• 사용자가 제품이나 서비스와 상호작용하는 시각적 접점을 설계하는 것입니다.
• 버튼, 아이콘, 레이아웃, 색상 등 사용자가 직접 마주하는 시각적 요소들을 디자인합니다.
• 사용자에게 직관적이고 매력적인 인터페이스를 제공하는 것이 목표입니다.
  
  

UX (User Experience) : 사용자 경험

사용자가 제품이나 서비스를 이용하면서 느끼는 전반적인 경험을 의미합니다. 1990년대 초 Donald Norman이 처음 만든 용어로, 사용자의 감정, 태도, 인식 등 모든 측면을 포함합니다. 
UX 디자이너의 역할은 사용자 입장에서 제품이나 서비스를 설계(디자인) 하는 것이고 이는 사용자가 서비스 등을 이용하면서 느끼는 반응이나 행동과 같은 다양한 경험을 분석하여 총체적으로 설계합니다. 

UX 디자이너의 역할 : 

• 사용자가 제품이나 서비스를 이용하면서 느끼는 전반적인 경험을 설계하는 것입니다. 
• 사용자의 요구사항, 행동, 목표를 이해하고 이를 바탕으로 긍정적이고 의미 있는 경험을 제공하는 것을 목표로 합니다.
• 제품의 전체적인 사용성, 접근성, 만족도 등을 고려합니다.
  
  

 

디자인 접근 방법

1. 사용자 중심 디자인 (UCD, User-Centered Design)
최종 사용자를 디자인 프로세스의 중심에 두는 접근 방식입니다. 사용자의 요구와 필요를 최우선으로 고려합니다.

2. 인터랙션 디자인 (IXD, Interaction Design)
사용자가 제품, 페이지, 애플리케이션과 어떻게 상호 작용하는지 연구하는 분야입니다.

 

디자인 프로세스 관련 용어

1. 와이어프레임 (Wireframe)
페이지의 구조와 레이아웃을 간단히 표현한 스케치입니다. 기획 단계에서 각 페이지의 정보와 배치를 표현. 와이어프레임에 컨텐츠를 담으면 스토리보드가 된다.

2. 스토리보드 (Storyboard)
각 페이지의 구성요소, 컨텐츠, 이동 흐름 및 로직을 기술한 문서입니다.

3. 목업 (Mockup)
사용자 평가를 위한 최종 버전에 가까운 디자인입니다.

4. 프로토타입 (Prototype)
서비스의 기능과 사용성을 테스트하기 위한 동적인 모형입니다.

5. 충실도 (Fidelity) : 디자인의 완성도를 나타내는 척도
- Low Fidelity: 최소한의 구성요소만 표현
- High Fidelity: 완성에 가까운 상태

Low → Medium → High Fidelity  (출처:https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/)  

 

주요 UX 용어

1. 어포던스 (Affordance)
사용자가 대상이나 서비스의 사용 방법을 직관적으로 인지하거나 행동을 유도하는 것을 의미합니다. 

2. IA (Information Architecture)
서비스를 구성하는 정보의 구조와 흐름을 설계하는 것입니다.

3. 사용자 여정 지도 (User Journey Map)
서비스 이용 과정을 단계별로 시각화한 문서로, 사용자의 목표, 감정, 페인포인트를 분석합니다.

4. 페르소나 (Persona)
target 사용자의 특성을 대표하는 가상의 프로필입니다.

5. F자 패턴
사용자들이 웹 페이지를 F 모양으로 읽는 경향을 말합니다.

6. 3클릭 규칙
제프리 젤드먼(Jeffrey Zeldman)이 2001년 제안한 이론으로, 사용자가 3번의 클릭 내에 원하는 작업을 완료하지 못하면 웹사이트를 떠날 것이라는 가설입니다. 하지만 이는 과학적 근거가 부족한 추정입니다.

 

UI 컴포넌트 관련 핵심 용어 

UI 컴포넌트는 표준화된 디자인 컨테이너로, 빠르고 쉬운 디자인을 위해 사용됩니다.  

1. 정보 컴포넌트 (Informational Components) : 사용자에게 정보를 전달하는 역할
- 예시: 콘텐츠 카드, 비디오 컴포넌트
- 주요 요소: 텍스트, 버튼, 이미지/비디오

2. 내비게이션 컴포넌트 (Navigational Components) : 사용자의 페이지 이동을 돕는 요소
- 예시: 헤더 내비게이션 바, CTA(Call to Action) 버튼
- 주요 요소: 버튼, 아이콘, 텍스트

3. 입력 컨트롤 컴포넌트 (Input Control Components) : 사용자가 직접 정보를 입력할 수 있는 요소
- 예시: 온보딩 컴포넌트, 체크아웃 컴포넌트
- 주요 요소: 입력 필드, 드롭다운, 슬라이더, 체크박스, 라디오 버튼

주요 UI 컴포넌트 예시

1. 버튼 (Button)
클릭 시 특정 작업을 트리거하는 요소로 폼 제출, 페이지 이동 등에 사용

2. 드롭다운 (Dropdown)
여러 옵션 중 하나를 선택할 수 있는 메뉴, 공간 절약과 선택의 편의성 제공

3. 체크박스 (Checkbox)
여러 옵션 중 동시에 여러 개를 선택 가능, 폼과 데이터베이스에서 자주 사용

4. 토글/스위치 (Toggle/Switch)
ON/OFF 기능을 제공하는 요소, 앱 설정이나 개인화 옵션에서 활용

UI 컴포넌트의 특징

- 재사용성: 표준화된 디자인 요소로 일관성 유지
- 모듈성: 여러 UI 요소를 조합하여 복잡한 인터페이스 구현 가능
- 사용자 경험 개선: 직관적이고 일관된 인터페이스 제공

 

결론

UI/UX는 사용자 중심의 디자인 철학입니다. 이러한 용어들을 이해하고 적절히 활용함으로써, 더 나은 사용자 경험을 창출할 수 있습니다.