[TIL] Day44 #UI/UX

2022.06.27(Mon)

[TIL] Day44
[SEB FE] Day43

☑️ UI/UX

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

사람들이 컴퓨터와 상호 작용하는 시스템
✋ 물리적 요소(키보드, 마우스 …)도 UI

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

사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경

📎 UX (User Experience, 사용자 경험)

사용자가 어떤 시스템/제품/서비스를 직/간접적으로 이용하면서 느끼고 생각하는 총체적 경험

📎 UI & UX 관계

UI ⊂ UX (서로를 보완하는 역할)

🙅‍♀️ But, good UX 👍 🔁 good UI 👍 의미 ❌ (빛 좋은 개살구일 수도 있다는 뜻!)

---

☑️ UI Design

📎 UI Design Pattern

프로그래밍 시 자주 반복되는 문제점 해결을 위해, 과거 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴
👉 자주 사용되는 UI Component

1. Modal: 기존에 이용하던 화면 위에 오버레이 되는 창 / 모달 닫기 전까진 기존 화면과 상호작용 ❌

   ✋  팝업창(다른 브라우저 페이지를 엶)과 다른 개념

   ↔️ 모달은 브라우저 설정 영향 ❌ → 반드시 보여줘야 하는 내용은 모달 사용 권장

2. Toggle: On/Off 설정시 사용하는 스위치 버튼 (3개 이상의 여러 옵션이 있을 때도 사용 가능)

   ✋ But, 너무 많은 옵션이 존재할 땐 Tab 사용 권장

3. Tab: 콘텐츠를 분리해서 보여주는 싶을 때 사용 (가로 한 줄 배열 형태를 주로 사용)

   ➕ 세로 배열 / 여러 줄로 배열도 가능

4. Tag: 콘텐츠를 설명하는 키워드를 사용해서 라벨 붙이는 역할

   ➕ Tag로 콘텐츠 분류 / 원하는 콘텐츠들만 검색 가능

5. Autocomplete(자동완성): 사용자가 내용 입력 중일 때 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것

   👉 사용자의 정보 입력 시간 단축해주며, 정보 검색시 많이 사용
   ✋ 자동 완성 항목에 so many 항목 나오지 않도록 개수 제한하는 것이 좋음 👍

6. Dropdown: 선택할 수 있는 항목을 숨겨놨다가, 펼쳐지면서 선택할 수 있도록 해줌

   👍 사용자가 자신이 선택한 항목을 정확히 알 수 있게 만드는 것이 중요!

7. Accordion(아코디언): 접었다 폈다 할 수 있는 컴포넌트 / 보통 같은 분류 아코디언 여러개 연속 배치

   ➰ 보통 깔끔한 화면 구성을 위해 사용
   ➰ 트리 구조 / 메뉴바로 사용할 경우엔 상하 관계 표현을 위해 사용
   ➰ 콘텐츠 담는 용도로 사용할 경우엔 핵심 내용을 먼저 전달하기 위해 사용

8. Carousel(캐러셀): like 회전목마 🎠 👉 빙글빙글 돌아가면서 콘텐츠 표시

   ➰ 자동으로 콘텐츠가 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가도록 선택 가능

9. Pagination: 한 페이지에 띄울 경우가 너무 많을 경우, 번호를 붙여 페이지 구분해주는 것
   👍 사용자가 원하는 페이지로 바로바로 접근 가능
   👎 페이지를 넘기기 위해선 잠시 멈춰야 하므로 매끄러운 사용자 경험과는 거리가 멀 수도..

10. Infinite Scroll, Continuous Scroll(무한 스크롤)
    : 모든 콘텐츠를 불러올 떄까지 무한으로 스크롤 내림 가능
    ➰ 한 번에 띄우기엔 정보가 너무 많을 때 사용
    ➰ 보통 페이지 맨 아래에 도달하면 추가 콘텐츠 로드해오는 방식으로 만듦
    ✋ 모든 콘텐츠를 한 번에 받아온 후 보여주는 것은 무한 스크롤이라고 볼 수 없음

    👍 잠시 멈춰서 페이지 선택할 필요 ❌ 👉 보다 더 매끄러운 사용자 경험 제공
    👎 지나친 콘텐츠 찾기 힘듦 / 콘텐츠 끝이 어딘지 알 수 없음 where.. 🤷‍♀️
    

11. GNB(Global Navigation Bar) & LNB(Local Navigation Bar)
    ✔️ GNB: 어느 페이지에서든 사용할 수 있는 최상위 메뉴로, 항상 동일한 위치에 있어야 함
    ✔️ LNB: GNB에 종속되는서브 메뉴 / 특정 페이지에서만 볼 수 있는 메뉴

📎 UI Layout

✔️ Grid System

질서 있는 구조의 UI 구성을 도와주는 system으로써,
화면을 격자로 나눈 다음, 그 격자에 맞춰 콘텐츠를 배치하는 방법

✔️ Column Grid System
: 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점
➰ Margin, Column, Gutter 3가지 요소로 구성

1. Margin: 화면 양쪽 여백

2. Column: 콘텐츠가 위치하게 될, 세로로 나누어진 영역

   ➰ 표준적으로 📱Phone: 4개, Tablet: 8개, 💻 PC: 12개 column으로 나눔
   ➰ break point: 이미지 속 화면 크기 구분선

   👍 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋음

3. Gutter: Column 사이 공간으로, 콘텐츠 구분에 도움

   ➰ Gutter 간격이 좁을수록 콘텐츠들간의 연관성이 있어 보이며, 넓을수록 각 콘텐츠가 독립적인 느낌을 줌
   ✋ Gutter는 아무리 넓어도 Column 너비보다는 작게 설정하기

---

☑️ UX Design

📎 Good UX를 만드는 요소 - Peter Morville 벌집 모형

✋ UX 평가에도 사용될 수 있음

1. 유용성(Useful): 사용 가능한 기능을 제공하고 있는가?
2. 사용성(Usable): 사용하기 쉬운가?
3. 매력성(Desirable): 제품이 사용자들에게 매력적인가?
4. 신뢰성(Credible): 사용자가 제품/서비스를 믿고 사용할 수 있는가?
5. 접근성(Accessible): 누구든지 제품/서비스에 접근하기 쉬운가?
6. 검색 가능성(Findable): 사용자가 원하는 기능/정보를 쉽게 찾을 수 있는가?
7. 가치성(Valuable): 고객에게 가치를 제공하고 있는가?

📎 User Flow

사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 다이어그램을 그려서 정리

👍 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정 가능
👍 있으면 좋은 기능을 발견하여 추가 / 없어도 상관 없는 기능을 발견하고 삭제 가능
👉 UX 개선 가능 ٩( ᐛ )و

1. 직사각형 ◽️: 사용자가 보게 될 화면
2. 다이아몬드 🔸: 사용가 취하게 될 행동
3. 화살표 ➡️: 화면과 행동을 연결시켜주는 화살표

---

☑️ UI/UX 사용성 평가

📎 Jakob’s Ten Usability Heuristics (제이콥 닐슨의 10가지 사용성 평가 기준)

1. 시스템 상태의 가시성(Visibility of system status)
   : 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황 정보 항상 제공
2. 시스템 & 현실 세계 일치(Match between system and the real world)
   : 전문용어 대신 친숙자 단어, 구문, 개념 사용
3. 사용자 제어 & 자유(User control and freedom)
   : 진행 중인 작업에서 벗어날 수 있는 방법 / 실수로 수행한 작업을 취소할 수 있는 방법, 즉 ‘탈출구' 제공
4. 일관성 & 표준 (Consistency and standards)
   ➰ 외부 일관성: 일관적인 사용자 경험 제공을 위해 플랫품 / 업계 관습 따르기
   ➰ 내부 일관성: 사용자가 혼란스럽지 않도록 제품 인터페이스 / 정보 제공에 일관성 ⭕️
   
5. 오류 방지(Error prevention)
   : 오류 발생 쉬운 상황 제거 👉 사용자 실수 방지
6. 기억보단 직관(Recognition rather than recall)
   : 사용자가 기억해야 하는 정보 줄이기 ⬇️ (ex. 최근 검색 목록 확인)
7. 사용의 유연성 & 효율성(Flexibility and efficiency of use)
   : 초보자&전문가 모두에게 개별 맞춤 기능 제공
8. 미학적이고 미니멀한 디자인(Aesthetic and minimalist design)
   : 인터페이스에 관련이 없거나 불필요한 정보 포함되지 않도록 함.
   ✋ 콘텐츠와 기능 우선순위를 정하고 우선순위가 높은 것을 잘 제공하고 있는지 확인
9. 오류 인식, 진단, 복구 지원(Help users recognize, diagnose, and recover from errors)
   : 사용자가 이해할 수 있는 언어로 문제가 무엇인지 정확히 표시 👉 해결 방안 제안
10. 도움말 & 설명 문서(Help and documentation)
    : 상황에 따라 이해하는 데 도움이 되는 문서 제공

---

✍️ 오늘 학습한 내용은 UI/UX로 그나마 부담없는 내용이라 coplit 문제를 처음 푼지 2달만에 '변수와 자료형(10)', '조건문(17)', '문자열(17)', '반복문(21)' 문제를 복습했다. 반복문을 제외한 나머지 챕터는 1~2문제 빼고 술술 풀린 편이었지만 반복문에선 무려 7문제나 어떻게 접근했었는지 기억도 안 났다.. 잘 안 풀렸던 문제는 github에 따로 기록해두기!

✅ 오늘은 Programmers - Lv.1_나누어 떨어지는 숫자 배열.js 알고리즘 문제 품