UI는 User Interface의 줄임말로 사용자가 마주하게 되는 시각적인 요소를을 의미한다. 화면상의 그래픽 요소 외에도 키보드, 마우스 등 물리적 요소도 UI라 할 수 있다.
UI 디자인 패턴 예시로는 모달, 토글, 탭, 태그, 자동완성, 드롭다운, 페이지네이션 등 다양한 디자인 패턴이 있다.
GUI란 Graphical User Interface의 줄임말로 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 환경을 의미한다. 눈으로 확인할 수 있는 컴퓨터의 화면 혹은 애플리케이션 화면이 있다. 프론트엔드 개발자로서 UI는 대부분 이 GUI를 의미한다.
UX는 User Experience의 줄임말로 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 종합적인 만족도를 의미한다.
즉, 사용자에게 만족스러운 경험을 제공하는 UI를 디자인 하는 것을 UX라 한다.
이 UX는 UI를 포함하고 있다.
좋은 UX를 만들기 위해 피터 모빌의 벌집 모형에 대해 기억해두자.
UI는 시각적으로 보여지는 디자인이다. 예시로 아이콘, 배너, 폰트 등 이 있다.
UX는 이러한 UI 디자인을 이용해 이용자가 어떤 방식으로 사용할 때 편리할 지를 생각해 위치나 구도를 잡아 표현방식을 정하는 것이라 할 수 있다.