Section 3 - Unit 2 [사용자 친화 웹] UI/UX

UI

: 사용자와 컴퓨터간의 상호작용을 위한 시스템으로, 그래픽요소와 마우스와 같은 물지적인 요소 또한 UI에 포함됨

• GUI, CLI, NUI, AUI

UI 디자인 패턴

• 모달(Modal)
  : 기존에 사용되면 화면에 새로운 창의 구성으로 오버레이(겹치게)하는 것을 의미하며, 모달 화면을 종료하기 전까지 기존의 화면에서 사용되면 상호작용은 동작하지 않음
  --> 모달 사용시 새로운 브라우저가 열리는 것이 아닌 기존의 브라우저에서 동작함

• 토글(Toggle)
  : 기능적으로 관리할 수 있는 상태를 on/off 가능하게하며 직관적으로 상태를 확인할 수 있도록 구현해야함
  --> 너무 많은 옵션 상태를 관리하도록하면 직관성을 잃어버릴수 있음

• 탭(Tab)
  : 콘텐츠를 분리해 원하는 콘텐츠만 화면에 출력되도록 하는 기능, 탭 구분이 명확하도록 구현해야함

• 태그(Tag)
  : 키워드를 사용해 사용자가 해당 콘텐츠에 대한 라벨을 붙이는 기능으로, 자유롭게 제거 및 추가가 가능하도록 구현해야함

• 자동완성(Autocomplete)
  : 사용자가 입력하는 키워드의 내용을 추측해 자동으로 완성된 키워드를 항목을 보여주는 기능으로, 알맞은 관련 키워드와 키워드 노출 개수를 관리해야함

• 드롭다운(Dropdown)
  : 평소에는 노출하지 않다가 펼치기 버튼 클릭시 선택햐야하는 항목을 보여주는 기능으로, 원하는 방식으로 항목을 노출을 관리할 수 있어야함

• 아코디언(Accordion)
  : 컴포넌트의 콘텐츠 내용을 일부만 평소에 노출하다 내용전체를 클릭혹은 원하는 동작시 전부 노출되도록 관리하는 기능

• 캐러셀(Carousel)
  : 여러 콘텐츠 내용을 원하는 방식(옆으로 넘기기, 회전, 업 다운)으로 순차적으로 노출되도록 하는 방식으로 직관적으로 방식을 사용자가 이해하고 활용도록 구현해야함

• 페이지네이션(Pagination)
  : 한 구성에 노출되는 콘텐츠 개수를 관리하는 기능으로, 이상적으로 노출되는 콘텐츠의 개수를 알맞게 구현하는 것이 중요

• 무한스크롤(Continuous Scroll)
  : 모든 콘텐츠가 노추될 때까지 끊임없이 스크롤을 하면 추가적으로 계속 추작 콘텐츠가 노출되도록하는 기능

• GNB & LBN (전체, 지역 Navigation Bar)
  : 사용자가 원하는 페이지를 들어갈 수 있도록 안내해주는 항목관리 기능으로, GNB는 전체적인 큰흐름에서 구분되는 페이지항목들을 LBN은 큰흐름으로 나누어진 항목들을 추작적으로 세부적으로 나누는 기능을 함

UI 레이아웃

• 그리드 시스템(Grid System) +(세로 : colum)
  : 웹 디자인 분야에서 주로 사용되는 컬럼 그리드 분야에 대해 설명하며 화면을 세로를 기준으로 영역을 나누며 Margin, Column, Gutter 3가지로 구성됨

  • Margin
    : 콘텐츠와 콘텐츠사이를 구분하는 한 콘텐츠 양쪽의 여백을 의미하며, px와 같은 고정적인 단위 혹은 vw, %와 같은 반응형으로 구현가능한 유동적인 단위를 사용해 구현할 수 있음
  • Column
    : 세로로 나누는 영역을 의미하며 일반적으로 스마트폰 - 4개, 태블릿 - 8개, pc - 12개, 그이상의 큰 화면 - 12개 이상으로 나누며, 영역이 나누어지는 것에 따라 다르게 화면을 구성해 사용자에게 제공되도록 구현하는것이 이상적임
  • Gutter
    :Column으로 나누어진 영역들 사이의 공간을 의미하며, 세로영역간의 콘텐츠적으로 구분감을 주기 위한 구성요소로, Column의 너비보다는 작게 구성하는것을 권장함

UX

: 사용자가 어떤 시스템을 사용할 때 경험하는 모든 직접 및 간접적인 경험을 총제적으로 의미하며 긍적적인 UX 목표로 설계해야함

• UX와 UI와의 관계
  : UX는 UI를 내표하는 개념으로, UX와 UI는 서로의 평가의 결과를 보장하지 않지만 긍-부정적인 영향이 있을수 있으며, 예시로 UI 디자인 적으로 완벽한 계산기가 기능적으로 하자가 많아 UX에서는 부정적인 평가를 받는 경우가 있음

피터 모빌의 좋은 UX를 위한 7가지 요소

• 유용성
  : 해당 서비스가 목적에 맞는 기능을 사용가능하게 제공하고 있는가

• 사용성
  : 해당 서비스 기능을 단순하고 직관적으로 구현해 사용하기 쉬운가

• 매력성
  : 사용자에게 서비스가 매력적으로 다가오는가

• 신뢰성
  : 서비스 사용에 사용되는 데이터와 가치가 불변적이고 안전하게 제공-사용되는가

• 접근성
  : 서비스 사용하는 사용자들의 다양한 특징에 따라 접근할 수 있도록하여 사용자들이 접근하기 쉬운가

• 검색 가능성
  : 사용자 서비스 사용시 원하는 기능과 정보를 찾기 쉬운가

• 가치성
  : 위의 요소를 종합적으로 사용해 사용자에게 제공되는 가치가 적절하게 제공되고 있는가

User Flow

: 다이어그램으로 표현하며 사용자가 서비스에서 경험할 수 있는 경험의 흐름의 경우의 수를 표현함

• 구성요소

1. 직사각형 : 사용자에게 노출되는 페이지
2. 화살표(->) : 사용자가 해당 페이지에서 경험할 수 있는 흐름의 가지
3. 다이아몬드 : 사용자가 경험할 수 있는 행동

• 장점
  : User Flow를 통해 사용자 입장에서 생각하고, 사용자에게 필요한 기능과 흐름을 구현할 있게 도와주며 결과적으로 UX적으로 더 발전된 서비스를 구현할 수 있도록 함

제이콥 닐슨의 UI/UX 사용성 평가 기준 10가지

• 시스템 상태의 가시성
  : 시스템 진행상황에 대한 적절한 피드백을 적당한 때에 제공해 사용자가 시스템 상태를 인지할 수 있도록 해야함

  피드백 유무, 피드백 제공 시점, 피드백의 직관성

• 시스템과 현실 세계의 일치
  : 사용자 입장에서 시스템 UI/UX를 설계해 사용자가 사용하기 친숙한 구성을 가져야함

• 사용자 제어 및 자유
  : 사용자가 작업한 동작과 변경한 상태에 대한 취소 및 변경을 지원해 상태를 제어할 수 있도록 해야함

• 일관성 및 표준
  : 시스템 내부적으로 비슷한 선택에 대한 일관적인 결과와 동작을 제공해 혼란을 막고, 시스템 외부에 통념적으로 사용되는 방식을 일관적으로 구현함으로 사용자가 사용하기 편하게 구현해야함

• 오류 방지
  : 시스템을 사용자가 사용하는 과정에서 의도치 않은 결과가 발생하는 것을 막기 위해, 해당 상황 발생시 사용작에게 상황에 대한 대처를 할 수 있도록 의사를 다시 묻는 방법과 사전에 해당 상황이 발생할 수 있는 경우를 제거하는 방식으로 구현해야 함

• 기억보다는 직관
  : 직관적으로 사용자가 이해하고 사용할 수 있도록 구현해, 사용자가 정보를 기억해 사용해햐하는 상황으로 최소한으로 구현해야 함

• 사용의 유연성과 효율성
  : 사용자의 시스템 이해도와 숙련도에 따라 적합하고 효율적으로 시스템을 사용할 수 있도록 맞춤형으로 구현해야 함

• 미학적이고 미니멀한 디자인
  : 단순하고 필요한 기능만으로 시스템을 디자인해 직관적이으로 사용자에게 기능이 제공되도록 구현해야함

• 오류의 인식, 진단, 복구를 지원
  : 시스템에 요구하는 요구사항에 대한 정보를 사용자가 이해하고 문제 상황을 해결할 수 있도록 적절하게 제공해야함

• 도움말 및 설명 문서
  : 사용자가 기능을 사용하는 과정에서 필요한 정보를 도움말과 설명 문서를 통해 지원해 적절하게 사용할 수 있도록 구현해야함

와이어프레임 (wireframe)

: 제품의 기획 단계에서 사용하는 방법으로, 선를 사용해 ui의 구성의 틀을 잡으며 구조를 기획하는 목적으로 사용됨

• Low Fidelity Wireframe
  : Lo-Fi Wireframe으로 알려져 있으며 Low 낮은 Fidelity 정확성 와이어프레임이라는 뜻으로, 세부적으로 정확하게 작성하는 와이어프레임이 아닌 기획 아이디어의 큰 흐름과 틀을 잡을 때 사용하며, 세부적인 내용이 아직 작성되지 않아 추가적인 아이디어를 반영하기 쉬운 와이어프레임

• Middle Fidelity Wireframe
  : Mid-Fi Wireframe으로 알려져 있으며 Lo-Fi Wireframe보다는 구조적으로 많은 Hi-Fi Wireframe보다는 적은 구조적인 내용이 작성되어 있으며, 페이지를 동작 방식정도까지 일반적으로 작성하는 와이어프레임

• High Fidelity Wireframe
  : Hi-Fi Wireframe으로 알려져 있으며 실질적인 구성 구조가 세부적부분까지 모두 표현되어있는 목업과 가까운 형태로 위의 특징으로 추가적인 아이디어를 반영하기위해 완전한 구조를 수정해야하며 이에 어려움이 있어 추가적인 아이디어 반영이 어려워 와이어프레임으로서의 구조의 틀을 잡고 아이디어를 반영하는 역할에 적합하지 않아 잘 작성되지 않는 와이어프레임

프로토타입 (prototype)

: 제품 구현-개발 전 단계에서 사용하는 방법으로, UI의 동작과 상호작용을 시뮬레이션을 통해 전체적인 흐름과 틀을 확인하는 목적으로 사용됨

• Low Fidelity Prototype
  : Lo-Fi Prototype 알려져 있으며 간단한 상호작용과 페이지 이동 정도를 확인해 User Flow를 전체적으로 검토할 수 있는 프로토타입

• Middle Fidelity Prototype
  : Mid-Fi Prototype 알려져 있으며 Lo-Fi Prototype와 High Fidelity Prototype 사이의 최종본과의 유사성을 가지며 좀 더 세부적인 기능 동작과 좀 더 정확한 UI/UX를 예상할 수 있어 테스트를 위한 최소한의 구현정도로 권장되는 프로토타입

• High Fidelity Prototype
  : Hi-Fi Prototype 알려져 있으며 실질적인 모든 동작과 UI/UX를 구현해 최종본과 거의 유사하게 만들어 거의 정확한 사용자 입장에서의 시스템 사용을 확인해 볼 수 있으며, 발생할 수 있는 문제를 테스트해 볼 수 있어 출시후 문제를 해결하는 상황보다 출시 이전에 문제를 확인하고 해결할 수 있게 해줌으로 문제해결에 대한 비용 절감을 기대할 수 있는 프로토타입

피그마 (Figma)

: UI와 프로토타입 디자인을 검토할 수 있는 툴로, UX/UI 업계에서 가장 많이 사용되는 툴 중 하나

• 피그마를 사용해 UI 설계와 협업을 경험해 봄