UI (User Interface, 사용자 인터페이스)알아보기
UI 란,
- 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.
- 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템도 UI를 의미한다.
- 대부분의 UI는 GUI(Graphical User Interface, 그래픽 사용자 인터페이스)를 의미한다.
- GUI : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
UI 디자인 패턴
- 모달 : 화면 위에 오버레이 되는 창
- 토글 : On/Off를 설정할 때 사용하는 스위치 버튼
- 탭 : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴
- 태그 : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
- 자동완성 : 말 그대로 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것
- 드롭다운 : 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴
- 아코디언 : 접었다 폈다 할 수 있는 컴포넌트로, 보통 같은 분류의 아코디언을 여러 개 연속해서 배치
- 캐러셀 : 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴
- 페이지네이션 : 한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해 주는 것
- 무한스크롤 : 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것을 말하며, 페이지네이션과 마찬가지로 한 번에 띄우기엔 정보가 너무 많을 때 사용하는 UI 디자인 패턴
- GNB,LNB : GNB(Global Navigation Bar)는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, LNB(Local Navigation Bar)는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 뜻한다.
UI 레이아웃
- 그리드 시스템 : 질서 있는 구조의 UI를 구성할 수 있게 도와주는 시스템이다.
- 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법
- 컬럼 그리드 시스템을 사용한다.
- Margin, Column, Gutter 세 가지 요소로 구성
Margin : 화면 양쪽의 여백을 의미
Column : 콘텐츠가 위치하게 될 세로로 나누어진 영역, 표준적으로 휴대폰 : 4개 , 태블릿 : 8개, PC : 12개의 컬럼으로 나눈다.
Gutter : Column 사이의 공간으로, 콘텐츠를 구분하는데 도움을 준다.
UX (User Experience, 사용자 경험)알아보기
UX란,
- 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 의미한다.
UX 디자인
좋은 UX를 만들기에 고려해야 할 7가지 요소
- 👇🏻 피터 모빌의 벌집 모형
피터 모빌의 벌집 모형은 UX를 위해서 고려해야 할 7가지 요소를 제시해 줌과 동시에, 아래 이미지처럼 그래프를 활용하여 UX를 얼마나 고려했는지, 혹은 사용자가 얼마나 좋은 UX를 경험했는지 평가하기 위한 척도로도 사용될 수 있다.
UI와 UX의 관계
- UX는 UI를 포함한다.
- 좋은 UX가 항상 좋은 UI를 보장하지 않는다.
- 좋은 UI가 항상 좋은 UX를 보장하지 않는다.
- 나쁜 UI는 보통 나쁜 UX를 유발한다.
- UI와 UX는 서로를 보완을 하며,서로를 계속 발전시킬 수 있다.
UI / UX 사용성 평가
- 제이콥 닐슨의 10가지 사용성 평가 기준
- 시스템 상태의 가시성
- 시스템과 현실 세계의 일치
- 사용자 제어 및 자유
- 일관성 및 표준
- 오류 방지
- 기억보다는 직관
- 사용의 유연성과 효율성
- 오류의 인식, 진단, 복구를 지원
- 도움말 및 설명 문서
제이콥 닐슨의 10가지 사용성 평가 기준은 언제 사용되나요 ?
- 서비스 중인 애플리케이션을 평가하기 위한 목적으로 사용
- 제품 설계 단계에서 더 완성도 있는 애플리케이션을 기획하기 위해서 사용
따라서, 제이콥 닐슨의 10가지 사용성 평가 기준을 사용하면 사용성과 효율성을 크게 높일 수 있다.
결론적으로 UI/UX 디자인은 한마디로,
사용자가 네트워크를 효과적으로 사용하고 관리하는 데 도움을 주며,
사용자의 만족도와 편의성을 향상시키는 역할을 한다.
'Front end > 개발 지식' 카테고리의 다른 글
| [사용자 친화 웹] 웹 표준 & 접근성 (0) | 2023.05.04 |
|---|---|
| [ UI / UX ] 와이어프레임 & 프로토타입 (0) | 2023.04.15 |
| [ SOP / CORS ] 기본 개념 알아보기 (0) | 2023.04.06 |
| [ 네트워크/HTTP ] REST API_기초 알아보기 3편 (0) | 2023.03.29 |
| [ 네트워크/HTTP ] HTTP Requests / HTTP Responses_기초 알아보기 2편 (0) | 2023.03.29 |
