오늘의 학습내용

1. UI / UX

UX는 UI를 포함하는 상위 개념

1) UI

서비스와 상호작용하는 시스템(User Interface)
사용자가 그래픽을 통해 PC와 정보를 교환하는 작업 환경인 GUI(Graphic User Interface)가 대표적임.

2) UX

사용자가 서비스를 이용하면서 느끼는 경험(User Experience)

2. UI 디자인

1) 디자인 패턴 유형

• 모달
  기존에 이용하던 화면 위에 오버레이 되는 창

• 토글
  On/Off를 설정할 때 사용하는 스위치 버튼

• 탭
  콘텐츠 분리 기능

• 태그
  키워드 라벨링 기능

• 자동완성
  검색 시 주로 사용하며 갯수를 어느정도 제한하는 것이 좋음

• 드롭다운
  선택지 제공 가능

• 아코디언
  접었다 폈다 할 수 있는 컴포넌트

• 캐러셀
  돌아가면서 콘텐츠를 표시해주는 기능

• 페이지네이션
  컨텐츠가 많다면 페이지를 분리하여 보여주는 기능

• 무한스크롤
  마찬가지로 모든 컨텐츠를 불러올때까지 무한 스크롤으로 보여주는 기능

• GNB(Global Navigation Bar) / LNB(Local Navigation Bar)
  GNB는 최상위 메뉴 개념으로 위치가 고정되어 있는 것이 좋음

2) 그리드 시스템

2-1) Margin

화면 양쪽의 여백

2-2) Column

콘텐츠가 위치하게 될, 세로로 나누어진 영역
주로 스마트폰은 4개, 태블릿은 8개, PC는 12개로 나누는 것이 일반적임

2-3) Gutter

Column 사이의 공간. 콘텐츠를 구분해주는 역할을 함.

3. UX 디자인

1) 좋은 UX를 위한 요소

• 유용성(Useful) : 사용 가능한가?
• 사용성(Usable) : 사용하기 쉬운가?
• 매력성(Desirable) : 매력적인가?
• 신뢰성(Credible) : 신뢰할 수 있는가?
• 접근성(Accessible) : 접근하기 쉬운가?
• 검색 가능성(Findable) : 찾기 쉬운가?
• 가치성(Valuable) : 가치를 제공하는가?

2) User Flow

• User Flow 다이아그램
  직사각형 : 서비스 화면
  다이아몬드 : 사용자 행동(ex. 로그인, 업로드 등)
  화살표 : 화면과 행동의 연결고리

4. UI/UX 사용성 평가

Jakob’s Ten Usability Heuristics

• 적절한 피드백을 통해 사용자에게 진행사항 정보를 제공한다.
• 친숙한 단어와 개념을 사용한다.
• 사용자가 작업중이거나 실수로 수행한 부분을 취소할 수 있는 탈출구를 제공한다.
• 일관적인 사용자 경험을 제공한다.(익숙한 UI, 서비스 내 같은 인터페이스 유지)
• 오류가 발생하기 쉬운 상황을 제거한다.(ex. 실행취소 버튼 등)
• 직관적인 서비스를 제공한다.
• 유저별로 맞춤형 서비스를 제공할 수 있도록 한다.(ex. 단축키 설정 등)
• 미니멀하고 직관적인 디자인을 제공한다.
• 사용자가 오류를 만났을 때 직관적으로 이를 복구 할 수 있게끔 한다.
• 필요 시 도움말이나 안내문서를 제공한다.