[React] 사용자 인터페이스(UI)

1. UI

---

사용자 인터페이스는 흔히 UI로 불리는 것들이다.

User Interface라는 말에서 알아볼 수 있듯 사용자와 시스템 사이의 접속기다.

interface 정의

다시 말해, 사용자가 사물 혹은 시스템 사이에서 의사소통할 수 있도록 만들어진 매개체다.

UI는 사람들이 컴퓨터와 상호작용할 수 있도록 만든 시스템이며, 하드웨어와 소프트웨어를 포함한다.

 

 

사용자 인터페이스 = UI

2. 원칙

---

이러한 사용자 인터페이스는 4가지 기본 원칙에 의해 제작된다.

 

✔ 직관성
✔ 유효성
✔ 학습성
✔ 유연성 

직관성은 해당 UI가 판단이나 추론따위를 사용하지 않아도 직접적인 인식이 가능해야한다는 의미다.

우리가 설명서를 보지 않고도 인식 가능한 프로그램을 만들어야한다는 의미다.

 

유효성은 사용자의 목적에 맞는 기능이어야한다는 의미다.

UI를 사용해서 사용자의 니즈에 맞는 동작이 되어야한다.

사용자가 원하는 결과에 적합한 출력을 내보내야한다.

 

학습성은 누구나 배울 수 있게 만들어야한다는 의미다.

사용방법이 너무 어려운 UI는 아무리 좋은 기능이라할지라도 기본원칙에 어긋나는 좋지 않은 인터페이스다.

 

유연성은 사용자의 요구사항을 최대한 수용해 오류를 최소화해야한다는 의미다.

사용자의 요구사항을 최대한 수용한 유연한 설계란 무엇일까?

 

카카오톡 업데이트한 친구 기능을 생각해보자.

프로필 업데이트

일전의 우리는 일일이 스크롤을 내리면서 친구목록에서 동그라미 표시가 뜬 변화를 찾아봐야했다.

업데이트한 친구

하지만 카카오톡이 업데이트한 후로 프로필을 변경한 친구들만 모아볼 수 있게 됐다.

이처럼 사용자가 원하는 요구사항을 다양한 경로를 나누어 좀 더 간편하게 해결해주는 것이 유연성이다.

 

3. 종류

---

UI는 입력형태에 따라 총 3가지로 구분된다.

 

CLI(Command Line Interface) : 텍스트를 통한 인터페이스 

이런 식의 터미널이나 프롬프트에 해당한다.

CLI

GUI(Graphic User Interface) : 아이콘이나 메뉴를 통한 인터페이스

흔히들 사용하는 컴퓨터나 모바일 전자기기를 통한 UI다.

이러한 검색창도 모두 GUI다.

 

NUI(Natural User Interface) : 말이나 행동을 통한 인터페이스

요새 한창 개발 중인 인터페이스로, 기가지니나 시리 등을 생각하면 좋다.