[FE 45] _23.06.13 _ Day 43 ( [UI/UX] )

 UI와 UX _사용자 인터페이스와 사용자 경험의 차이점

UI와 UX는 현대의 디지털 제품 및 서비스 개발에서 필수적인 개념입니다.

좋은 UI와 UX는 사용자들에게 만족스러운 경험을 제공하고 제품 또는 서비스의 성공을 이끌어냅니다.

따라서 개발자와 디자이너는 UI와 UX를 모두 고려하여 사용자 중심의 디자인을 추구해야 합니다.

---

UI와 UX는 웹 및 모바일 애플리케이션 개발에서 핵심적인 개념으로 사용됩니다.
이들은 사용자에게 좋은 디자인과 훌륭한 경험을 제공하는 데 중요한 역할을 합니다.

 

1. UI (사용자 인터페이스) 정의

 

    : UI는 사용자와 시스템 간의 상호 작용을 위한 인터페이스를 디자인하는 과정 또는 결과물을 의미합니다. UI는 사용자가 시스템과 상호 작용할 때 직면하는

      그래픽적인 요소들을 포함합니다. 이는 버튼, 메뉴, 아이콘, 폼 등과 같은 요소들을 통해 시각적으로 표현됩니다. UI는 사용자에게 직관적이고 효과적인

      상호 작용을 제공하기 위해 디자인되며, 애플리케이션의 시각적인 측면을 담당합니다.

 

2. UX (사용자 경험) 정의

 

  : UX는 사용자가 제품 또는 서비스를 사용하는 동안 느끼는 전반적인 경험을 나타냅니다. 이는 사용자가 제품을 어떻게 인식하고, 사용하며, 그 결과로 어떤

    감정을 느끼는지에 대한 통합적인 요소를 포함합니다. UX는 사용자의 만족도와 편의성을 향상하는 것을 목표로 하며, 디자인, 콘텐츠, 성능, 접근성 등

    다양한 측면을 고려합니다.

 

3. UI와 UX의 차이점

 

    범위와 관점

     : UI는 주로 디자인적인 요소를 다루며, 시각적인 측면과 인터페이스 요소에 초점을 맞춥니다. 반면에 UX는 사용자의 전반적인 경험을 고려하며,

     사용자의 목표 달성과 만족도에 초점을 맞춥니다.

 

    디자인 대상

     : UI는 주로 시각적인 디자인 요소에 대해 다루며, 레이아웃, 색상, 아이콘 등을 포함합니다.

     반면에 UX는 인터페이스의 전반적인 흐름과 상호 작용을 고려하며, 사용자의 행동과 목표 달성을 중심으로 합니다.

 

    목표

     : UI는 사용자에게 직관적이고 시각적으로 매력적인 인터페이스를 제공하여 효과적인 상호 작용을 돕습니다.

      UX는 사용자에게 편리하고 만족스러운 경험을 제공하여 제품이나 서비스를 유용하게 만듭니다.

 

    연관성

     : UI와 UX는 서로 긴밀하게 연관되어 있습니다. 좋은 UI는 사용자에게 좋은 UX를 제공하는 데 중요한 역할을 합니다.

       UI는 UX를 구현하는 도구이며, UX는 UI를 통해 실현되는 결과물입니다.

 

4. 결론

 

      : UI와 UX는 애플리케이션 개발에서 핵심 개념으로 사용됩니다. UI는 사용자와 인터페이스 요소를 디자인하는 과정이며,

        UX는 사용자의 전반적인 경험을 개선하는 데 초점을 맞춥니다. 이 둘은 서로 연관되어 있으며, 함께 조화롭게 작동하여 사용자에게 편리하고 유익한

        경험을 제공합니다.

---

UI

UI 디자인 패턴

UI 디자인 패턴은 사용자 인터페이스(UI)를 구성할 때 반복적으로 발생하는 문제를 해결하고 일관성을 유지하기 위해 사용되는 구조적인 접근 방식입니다. 다양한 UI 디자인 패턴이 존재하며, 이를 사용하면 사용자 경험을 향상시키고 효율적인 디자인 작업을 수행할 수 있습니다.

 

마스터-디테일(Master-Detail) 패턴
: 대시보드나 앱의 메인 화면에서 주요 정보를 요약하여 표시하는 마스터(목록) 부분과 선택한 항목에 대한 상세 정보를 표시하는 디테일 부분으로 구성됩니다.

카드(Card) 패턴
: 여러 정보를 카드 형태로 표현하여 사용자가 각각의 정보를 쉽게 식별하고 상호 작용할 수 있도록 하는 패턴입니다. 카드는 독립적인 유닛으로서 사용되며, 이미지, 제목, 요약, 액션 등을 포함할 수 있습니다.

네비게이션(Navigation) 패턴
: 애플리케이션 내에서 사용자가 다양한 화면 사이를 이동하는 데 사용되는 패턴입니다. 일반적인 내비게이션 패턴에는 탭 바, 사이드 바, 드롭다운 메뉴, 햄버거 메뉴 등이 있습니다.

위젯(Widget) 패턴
: UI 요소를 재사용 가능한 독립적인 단위로 만들어 관리하는 패턴입니다. 위젯은 버튼, 폼 필드, 알림, 알림창 등과 같은 구성 요소로 구성되며, 일관성과 유지보수성을 높이는 데 도움을 줍니다.

플로팅 액션 버튼(Floating Action Button) 패턴
: 중요한 작업 또는 추가 작업을 수행하기 위해 화면의 두께 위에 떠있는 원형 버튼을 사용하는 패턴입니다. 주로 주요한 작업을 강조하고 사용자의 주의를 끌기 위해 사용됩니다.

그리드(Grid) 패턴
: 요소들을 그리드 형태로 배치하여 정보를 구성하고 표시하는 패턴입니다. 그리드 패턴은 콘텐츠의 구조를 시각적으로 정렬하고 일관성을 유지하는 데 도움을 줍니다.

마법사(Wizard) 패턴
: 복잡한 작업이나 정보 수집 과정을 단계별로 안내하는 패턴입니다. 사용자는 각 단계를 순차적으로 진행하며, 이전 단계로 돌아가거나 다음 단계로 진행할 수 있습니다.

모달(Modal) 패턴
: 모달 창을 사용하여 사용자에게 중요한 정보나 작업을 위한 인터랙션을 제공하는 패턴입니다. 모달은 잠시 화면을 가리고 나타나며, 사용자의 주의를 요구합니다.

타일(Tile) 패턴
: 격자 형태로 배열된 작은 사각형 또는 직사각형 요소들로 구성되는 패턴입니다. 각 타일은 이미지, 제목, 간단한 설명 등을 포함하며, 대시보드, 홈페이지 등에서 많이 사용됩니다.

마이크로 인터랙션(Microinteraction) 패턴
: 작은 규모의 인터랙션 요소를 설계하는 패턴입니다. 버튼 클릭, 체크박스 선택, 메뉴 열기 등과 같은 작은 인터랙션을 디자인하여 사용자와의 상호작용을 개선합니다.

와이어프레임(Wireframe) 패턴
: 초기 디자인 단계에서 사용되는 패턴으로, 인터페이스의 구조와 레이아웃을 표현하는 간단한 선이나 형태를 사용합니다. 흐름과 계층 구조를 시각화하여 디자인에 대한 이해도를 높입니다.

스크롤(Scroll) 패턴
: 긴 페이지나 컨텐츠를 스크롤로 탐색하는 패턴입니다. 사용자는 스크롤하여 추가 콘텐츠를 볼 수 있으며, 반응형 웹사이트에서는 스크롤로 화면을 탐색하는 패턴이 많이 사용됩니다.

참고 사이트 - Design patterns

Design patterns

---

UI  컴포넌트

UI 컴포넌트는 사용자 인터페이스(UI)를 구성하는 다양한 요소들을 말합니다.

 

버튼(Button)
: 사용자의 상호 작용을 유도하거나 특정한 동작을 수행하기 위해 사용되는 컴포넌트입니다. 예를 들어, "확인", "저장", "취소" 등의 버튼이 있습니다.

입력 필드(Input Field)
: 사용자로부터 데이터를 입력받기 위해 사용되는 컴포넌트입니다. 텍스트 입력, 숫자 입력, 날짜 선택 등 다양한 형태의 입력 필드가 있습니다.

선택 컨트롤(Selection Control)
: 사용자가 옵션을 선택하거나 토글 할 수 있는 컴포넌트입니다. 예를 들어, 체크박스, 라디오 버튼, 스위치 등이 있습니다.

리스트(List)
: 항목들을 목록 형태로 표시하는 컴포넌트입니다. 단순 목록, 드롭다운 메뉴, 셀렉트 박스 등 다양한 형태의 리스트가 있습니다.

탭(Tabs)
: 여러 개의 섹션 또는 페이지를 구분하고 탐색하기 위해 사용되는 컴포넌트입니다. 사용자는 탭을 선택하여 해당 섹션으로 이동할 수 있습니다.

메뉴(Menu)
: 다른 기능 또는 화면으로 이동하기 위해 사용되는 목록 형태의 컴포넌트입니다. 주 메뉴, 드롭다운 메뉴, 사이드바 메뉴 등이 있습니다.

알림(Notification)
: 사용자에게 메시지, 경고, 알림 등을 표시하는 컴포넌트입니다. 예를 들어, 경고 팝업, 투명한 알림 창 등이 있습니다.

폼(Form)
: 사용자로부터 여러 필드를 입력받는 컴포넌트의 그룹입니다. 예를 들어, 로그인 폼, 회원가입 폼 등이 있습니다.

이미지(Image)
: 그래픽이나 사진을 표시하는 컴포넌트입니다. 사용자에게 시각적인 정보를 제공하거나 디자인적인 요소로 활용될 수 있습니다.

페이지네이션(Pagination)
: 긴 목록이나 컨텐츠를 여러 페이지로 나누어 표시하는 컴포넌트입니다. 사용자는 페이지를 전환하여 콘텐츠를 탐색할 수 있습니다.

 

---

UX

User Flow

사용자 플로우(User Flow)는 사용자가 애플리케이션 또는 웹사이트를 통해 탐색하는 과정을 시각적으로 나타내는 도구입니다.

 

사용자 플로우 구성요소

시작점(Entry Point)
: 사용자가 애플리케이션에 처음 접근하는 지점입니다. 예를 들어, 로그인 화면이나 홈페이지가 시작점이 될 수 있습니다.

화면(Screen)
: 사용자가 탐색하는 애플리케이션의 각 화면입니다. 예를 들어, 메인 화면, 상세 정보 화면, 설정 화면 등이 있을 수 있습니다.

액션(Action)
: 사용자가 화면에서 수행하는 동작이나 상호 작용입니다. 예를 들어, 버튼 클릭, 입력 필드 작성, 메뉴 선택 등이 있을 수 있습니다.

전환(Transition)
: 사용자가 한 화면에서 다른 화면으로 이동하는 과정을 나타냅니다. 예를 들어, 버튼 클릭에 따라 새로운 화면이 열리거나, 스크롤을 통해 다른 섹션으로 이동하는 것 등이 있을 수 있습니다.

분기(Branch)
: 사용자 행동에 따라 여러 경로 중 하나를 선택하는 경우를 나타냅니다. 예를 들어, 사용자가 로그인 성공 시 메인 화면으로 이동하고, 실패 시 오류 메시지를 표시하는 분기가 있을 수 있습니다.

- User Flow 다이어그램 사이트 (피크마)

https://www.figma.com/figjam/

---

UI, UX는 간단한 정도로만 알고 있었는데 공부할게 많구나.. 따로 포스팅하면서 다시 정리하는 시간을 더 가져야겠다!