UI / UX

Sujeong Ji·2022년 6월 27일
0

사용자친화웹

목록 보기
1/2
post-thumbnail

keyword UI, UX, 사용자인터페이스, 사용자경험, UI디자인패턴, UI레이아웃, Columm Grid Systemm, 사용자흐름, User nterface, User xperience, User Flow

💡UI

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

: 사용자와 컴퓨터 간의 상호 작용하는 시스템을 의미합니다.

: UI는 인간과 기계를 연결하는 매개체이기 때문에 MMI(Man-Machine Interface)라고 부르기도 합니다.

🌿 UI의 종류


  1. CLI (Command Line Interface)

    • 명령어를 텍스트로 입력해 조작한다.
    • 사용자가 인터페이스에 단일 명령을 입력하면 컴퓨터가 수신하고 같은 방식으로 프롬프트에 응답하는 구조이다.

  2. GUI (Graphic User Interface)

    • 그래픽 환경을 기반으로 마우스를 이용해 조작한다.
    • 아이콘이나 그림과 같은 그래픽 요소를 배치하고, 마우스 등의 포인팅 장치를 이용해 조작한다.

  3. NUI (Natural User Interface)

    • 사람의 말과 행동으로 기기를 조작한다.
    • 사용법을 배우지 않고도 사람이 감각이나 행동, 인지 능력을 통해 마우스나 키보드를 비롯한 어떤 부가적인 장치 없이, 자연스럽게 사용할 수 있는 인터페이스를 말한다.
    • 예) 멀티터치, 음석인식, 동작인식 등

🌿 UI 디자인 요소


  1. UI 디자인 패턴
    • 화면에 배치할 수 있는 자주 사용되는 UI 컴포넌트
    • 예시 : 모달, 토글, 탭, 태그, 자동완성, 드롭다운, 아코디언, 캐러셀, 페이지네이션, 무한스크롤, GNB (Global Navigation Bar), LNB (Local Navigation Bar)


  2. UI 레이아웃 :
    • 컬럼 그리드 시스템(Column Grid System) 사용
      • 웹 디자인에서는 화면을 "세로"로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템을 사용합니다.
      • Margin, Column, Gutter라는 3가지 요소로 구성됩니다.
      • 컬럼을 나눌 때, 화면 크기에 따라 휴대폰은 4개, 태블릿은 8개, PC는 16개의 컬럼으로 화면을 나눕니다.


💡UX

: UX(User Experience, 사용자 경험)

: 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다.

🌿 UX의 종류들 (사용자 경험이란?)

  • 제품 / 서비스 경험 +
  • 홍보, 접근성, 사후 처리 등 직/간접적으로 관련된 모든 경험

🌿 좋은 UX란? (평가 요소)

피터 모빌(Peter Morville)의 7요소로 UX를 평가할 수 있습니다.

  • 유용성
  • 사용성
  • 매력성
  • 신뢰성
  • 접근성
  • 검색가능성
  • 가치성

🌿 UX 디자인 요소

사용자 흐름(user flow)를 분석하여 다이어그램을 작성하여 디자인합니다.

사용자 흐름이란?

  • 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻합니다.
  • 사용자 흐름을 다이어그램으로 작성할 때, 기본적으로 3가지 요소를 사용합니다.
    • 직사각형(화면), 다이아몬드(행동), 화살표(연결)



💡UI와 UX


✔️ 관계

: UX는 UI를 포함합니다.

  • 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다.


✔️ 역할

UX와 UI는 서로를 보완하는 역할을 합니다.

  • UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 합니다.

✔️ 차이


👉 UI

: 디자인을 와이어프레임 ⇒ 세련된 그래픽 사용자 인터페이스로 변환하는 과정입니다.

: 시각적 인터페이스 요소에 초점

  • 예: 타이포그래피, 색상, 메뉴 표시줄 등

👉 UX

: 많은 사용자 인터페이스(UI)로 구성되며, 이는 제품을 형성하기 위해 원활한 흐름을 만들어 사용자에게 다양한 경험을 제공합니다.

: 사용자와 제품을 통한 여정과 경험 초점을 맞춥니다.






<참고 자료>

이영주, UI/UX 디자인 이론과 실습 with Adobe XD, 한빛아카데미(2020), p24-40.

https://blog.naver.com/PostView.naver?blogId=innogrid&logNo=222468585197&parentCategoryNo=&categoryNo=6&viewDate=&isShowPopularPosts=true&from=search

<더 공부하기>

https://velog.io/@oneook/프론트엔드-개발자라면-반드시-알아두어야-할-32가지의-UI-요소-번역

profile
Studying Front-end Development 🌼

0개의 댓글