UX/UI 책 스터디 <사용자를 사로잡는 UX/UI 실전가이드> -2

• 책 이름 (부분 1-2) : UI의 구조와 요소 
  사용자를 사로잡는 UX/UI 실전가이드
  
  내용 요약 :
   
  UI의 구조와 요소 
  
  멘탈 모델 Mental Model : 난생처음 방문하는 웹사이트 또는 모바일 앱에서도 원하는 정보를 찾으려면 어디로 가야할 지 대략 감이 온다. 이런 예측가능성을 의미함. (예 : 링크를 클릭 하면 새로운 창이 뜰 거라는 기대감)
  → 그렇기 때문에 사용자 경험을 설명하는 것은 무에서 유를 만드는 창작 활동과는 다르다. 사람들에게 익숙한 경험을 통해 직관성을 높여야 한다. 만약 지나치게 창의적이거나 관습을 무시하고 UI를 디자인한다면 사용자는 이를 낯설게 여길 것이다. (이를 멘탈 부조화라고 한다. Mental Model Discordance) → 사용자들의 익숙한 경험을 통해 경험을 높여야 한다.
• 그래서 디자이너는 통상적으로 활용하는 UI구조와 요소에 무엇이 있는지와 어떤 역할을 하는지 알아야 함.
  
  UI 구조
• 웹사이트 : 가로 구조형과 세로 구조형이 있고 '헤더, 콘텐츠 영역, 푸터'가 있다.
• 모바일 사이트 : 보통 화면 위에 내비게이션을 배치하거나 맨 아래에 탭 바를 함께 사용해 주요 페이지로 이동하거나 기능을 한 눈에 볼 수 있게 한다.
  
  UI 요소
• 체크 박스 (다중 선택 필요할 때)
• 라디오 버튼 (한 번에 한 항목만)
• 드롭다운 목록 (한 번에 한 항목만, 클릭하면 펼쳐져서 공간을 아낄 수 있다. 그렇다고 한 번에 제공하지 않도록 주의해야 한다.)
• 스피너 (Datepicker, Timepicker: 주로 날짜, 시간 입력에 쓰이며 웹 보다 모바일에서 자주 발견)
• 토글 버튼 (2가지 모드 중 1가지를 선택할 때 사용, 즉각적 응답 필요시 자주 사용 - 와이파이 또는 다크 모드 설정)
• 날짜/시간 피커 (화면 크기에 한계있는 모바일, 공간 절약하며 날짜/시간 선택할 수 있는 영역. 보통 달력 모양으로 디자인하며 사용자가 선택한 날짜와 시간은 시스템에 입력됨)
• 텍스트 필드
• 검색 필드
• 브레드크럼 (사용자의 위치 파악)
• 페이지pagination (한 페이지에 나오는 콘텐츠 양이 정량을 넘을 때 분류하고 남은 페이지가 얼마나 되는지를 보여주는 UI)
• 슬라이더 (사용자가 원하는 대로 값을 조정하는 영역, 음량 및 밝기 조절에 사용, 여행 앱에서 날짜 같은 범위를 적용할 때도 사용)
• 태그 (유사한 콘텐츠를 분류하기 위한 인터페이스, 사용자가 원하는 태그를 추가할 수 있는 형태도 있음)
• 이미지 캐러셀 image carousel 여러 장의 이미지를 좌우로 이동하며 볼 수 있는 인터페이스, 이미지가 얼마만큼 더 있는지를 알려 주는 인디케이터가 하단에 있음)
• 알림 notification (새로운 정보가 도착했다는 것을 알리는 인터페이스, 알림확인하면 사라짐
• 진행바 progress bar (로딩이 길 때 사용하는 인터페이스)
• 스피너 로딩 spinner loading (진행 바보다 짧은 로딩에 사용하는 인터페이스, 4초 이하라 진척도 알 수 없음)
• 툴팁 tooltip (기능 아이콘에 추가 설명이 필요할 때, 마우스 포인트를 얹으면 나타나는 설명 창, 모바일에서는 툴팁유도를 위해 물음표 아이콘을 사용하기도 함)
• 팝업 (사용자 진행을 돕거나 시스템 오류 같은 공지가 필요할 때 사용)
• 아코디언 (전달할 내용이 많고 항목에 따라 내용이 나뉠 때 사용하는 인터페이스)
• 툴바 Tool bar (주요 기능을 모아 높은 인터페이스로, 도구 모음이라고도 부른다. 주로 오피스 제품군, 그래픽 편집기, 같은 소프트웨어에서 볼 수 있음)
• GNB global navigation bar (주로 웹 페이지 상단에 있으며 클릭하면 링크된 페이지로 이동할 수 있다.)
• LNB left navigation bar (일반적으로 화면 왼쪽에 위치하는 메뉴 형태로  SNB side navigation bar라고도 불림)
• 탭바 tab bar (모바일 앱 하단에 표시되는 아이콘 모음, 페이지 이동 가능)
• 모달 윈도우 modal window (기존 페이지와 부모-자식 관계의 창이 뜰 때 집중력을 높이기 위해 배경을 이동하는 인터페이스. 이 때 창을 제외한 영역은 제어할 수 없다. 모달 윈도우는 배경과 구분되도록 명도를 확실히 조정하는 것이 좋다.)
• 토스트 팝업 toast pop up (진행에 필요한 간단한 피드백을 제공할 때 사용하는 인터페이스. 모달 윈도우와 달리 팝업을 제외한 영역을 제어할 수 있다. 토스터에서 빵이 튀어나오는 모습과 비슷해서 지어진 이름)
• 빈 화면 Empty Data (표시할 데이터가 없을 때 띄우는 화면)
• 코치 마크 Coach Marks (사용자가 처음 앱을 열었을 때, 중요 기능을 미리 알려 주는 인터페이스, 진행에 필요한 기능을 사전에 학습시키는 역할을 한다. 단, 사전 학습이 필요할 정도로 기능이 다양하거나 인터페이스가 낯설 때만 사용하는 것이 좋으며 설명이 필요 없을 정도로 간단한 앱에는 지양함)

• 좋았던 점:
• 심플하면서도 잘 이해가는 설명 : 기존에 알고 있던 요소들이지만 이미지들과 함께 전체적으로 한 번 보니 복습도 되고 정리가 된다. 
• 이미 알고 있는 부분이지만 간혹 가다 몰랐던 부분도 있어서 유익했다.
  
• 아쉬웠던 점:
  • 이 요소들이 어떻게 실제로 적용이 되는지 영상으로 볼 수 있는 큐알코드가 있으면 좋았을 것 같다.
• 알게 된 개념:
  • UI 요소들