[C/F TIL] 43일차 - UI/ UX

Code States
Front-end boost camp
Today
I
Learned

🦊 확실히 섹션 2보단 숨통이 트입니다..!! 가벼운 맘으로 43일차 수업 고고링!

🦊 UI & UX

• UI(User Interface) : 사람들이 컴퓨터와 상호 작용하는 시스템
• GUI(Graphical User Interface) : 그래픽 사용자 인터페이스 - 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
  -- 프론트엔드 개발자로서의 UI는 대부분 이 UI를 의미함
• UX(User Experience) : 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험
• UI와 UX의 관계
  -- UX는 UI를 포함한다.
  -- 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
  
  

🦊 UI 디자인 패턴

• 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴
• 즉, 자주 사용되는 UI컴포넌트
• 종류
  -- 모달(Modal)
  -- 토글(Toggle)
  -- 탭(Tab)
  -- 태그(Tag)
  -- 자동완성(AutoComplete)
  -- 드롭다운(DropDown)
  -- 아코디언(Accordion)
  -- 캐러셀(Carousel)
  -- 페이지네이션(Pagination)
  -- 무한 스크롤(Infinite Scroll)
  -- GNB(Global Navigation Bar)

🦊 UI 레이아웃

• 그리드 시스템(Grid System) : 수직, 수평으로 분할된 격자무늬를 뜻하는 그리드를 활용해 말 그대로 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법
  -- Margin : 화면 양쪽의 여백
  -- Column : 콘텐츠가 위치하게 될, 세로로 나누어진 영역 (표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 칼럼)
  -- Gutter : Column사이의 공간, 콘텐츠 구분에 도움을 줌

🦊 좋은 UX를 만드는 요소

• 유용성 : 사용 가능한가?
• 사용성 : 사용하기 쉬운가?
• 매력성 : 매력적인가?
• 신뢰성 : 신뢰할 수 있는가?
• 접근성 : 접근하기 쉬운가?
• 검색 가능성 : 찾기 쉬운가?
• 가치성 : 가치를 제공하는가?

🦊 User Flow

• 사용자 흐름(User Flow)는 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동
  -- 예시 ▼
  
• User Flow 다이어그램 작성법
  -- 직사각형 : 사용자가 보게 될 화면 (회원가입, 로그인 페이지 등)
  -- 다이아몬드 : 사용자가 취하게 될 행동 (로그인, 버튼 클릭, 업로드 등)
  -- 화살표 : 직사각형(화면)과 다이아몬드(행동)을 연결
• User Flow 다이어그램 활용 장점
  -- 사용자 흐름 상 어색하거나 매끄럽지 않은 부분 수정 가능
  -- 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관없는 기능을 발견하고 삭제 가능
• User Flow 다이어그램 도구
  -- Miro
  -- FigJam

🦊 UI/ UX 사용성 평가

• 제이콥 닐슨의 10가지 사용성 평가 기준
  -- 시스템 상태의 가시성
  -- 시스템과 현실 세계의 일치
  -- 사용자 제어 및 자유
  -- 일관성 및 표준
  -- 오류 방지
  -- 기억보다는 직관
  -- 사용의 유연성과 효율성
  -- 미학적이고 미니멀한 디자인
  -- 오류의 인식, 진단, 복구를 지원
  -- 도움말 및 설명 문서