UI/UX

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

• 사람들이 컴퓨터와 상호 작용하는 시스템
• EX) 화면상의 그래픽 요소와 키보드, 마우스 등의 물리적 요소

1-1) GUI(Graphical User Interface, 그래픽 사용자 인터페이스)

• 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
• 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미함
• EX) 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면

1-2) UI 디자인 패턴

1-2.1) 모달(modal)

• 기존에 이용하던 화면 위에 오버레이 되는 창
• 브라우저 설정에 영향을 받지 않음

1-2.2) 토글(toggle)

• on/off를 설정할 떄 사용하는 스위치 버튼

1-2.3) 탭(tab)

• 콘텐츠를 분리해서 보여줄 때 사용하는 디자인 패턴

1-2.4) 태그(tag)

• 콘텐츠를 설명하는 키워드를 사용하여 라벨을 붙이는 역할

1-2.5) 자동완성(Autocomplete)

• 사용자가 내용을 입력 중일 때 입력하고자하는 내용과 일치할 가능성이 높은 항목을 보여주는 것

1-2.6) 드롭다운(Dropdown)

• 선택가능한 항목을 숨겨놓았다가 펼쳐지면서 선택할 수 있게 해주는 패턴

1-2.7) 아코디언(Accordion)

• 접었다 폈다 할 수 있는 컴포넌트, 트리구조로 렌더링 할 때 사용

1-2.8) 캐러셀(Carousel)

• 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해주는 디자인 패턴

1-2.9) 페이지네이션(Pagination)

• 책 페이지를 넘기듯이 번호를 붙여 구분해 주는 것

1-2.10) 무한스크롤(Infinite Scroll)

• 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것

1-2.11) GNB(Global Navigation bar)

• 최상위 메뉴

1-2.12) LNB(Local Navigation bar)

• GNB에 종속되는 서브메뉴로 특정 페이지에서만 볼 수 있는 메뉴

1-3) 그리드 시스템(Grid System)

• 질서 있는 구조의 UI를 구성할 수 있게 도움
• 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법
• 웹디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템을 사용
• Margin(화면 양쪽 여백), Column(세로로 나누어진 영역), Gutter(칼럼 사이의 공간)라는 세 가지 요소로 구성

2) UX

• 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 제품 서비스 경험, 홍보, 접근성, 사후 처리 등 모든 경험을 포함한 총체적 경험
• UX에 영향을 주는 이 많은 요소 중에 프론트엔드 개발자에게 가장 중요한 요소는 UI임

2-1) 피터 모빌의 벌집 모형

UX를 위해서 고려해야 할 7가지 요소: 유용성, 사용성, 매력성, 신뢰성, 접근성, 검색 가능성, 가치성

2-2) User flow

→ 사용자 흐름(user flow)는 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 의미

2-2.1) 직사각형

사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )

2-2.2) 다이아몬

사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )

2-2.3) 화살표

직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

3) UI와 UX의 관계성

• UX는 UI를 포함하는 관계
• 일반적으로 UI의 형태에 따라 UX가 결정되는 경우가 많음
• 반대로 좋은 UX가 좋은 UI를 의미하지는 않음
• UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며, 서로를 보완하는 역할

3-1) UI VS UX

→ UI는 빠르고 편리하게 제품/서비스를 사용할 수 있도록 디자인UX는 사용자의 경험이나 만족도를 고려하여 디자인

4) UI/UX 사용성 평가

4-1) 제이콥 닐슨의 10가지 사용성 평가 기준