[Section 3] UI/UX

UI

User Interface 사람들이 컴퓨터와 상호작용하는 시스템
.. 키보드, 마우스 등 물리적 요소도 포함

GUI

Graphical User Interface, 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다. 개발자로서의 UI는 GUI를 말한다.

UX

User Experience, 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. UX에 영향을 주는 요소가 UI이다.

---

모달 (Modal)

• 기존에 이용하던 화면 위에 오버레이 되는 창, 모달을 닫기 전까지는 기존 화면과 상호작용할 수 없음

토글 (Toggle)

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

탭 (Tab)

• 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴

태그 (Tag)

• 태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
• 자신이 작성한 콘텐츠에 태그를 붙임으로써 콘텐츠를 분류할 수 있고, 태그를 사용하여 관련 콘텐츠들만 검색

자동완성 (Autocomplete)

• 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것

드롭다운 (Dropdown)

• 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴 (= 객관식 문제)

캐러셀 (Carousel)

• 공항의 수하물 컨베이어 벨트, 또는 회전목마라는 뜻의 영단어로, 컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴

페이지네이션 (Pagination)

• 한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해 주는 것

무한 스크롤 (Infinite Scroll, Continuous Scroll)

• 말 그대로 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것을 말하며, 페이지네이션과 마찬가지로 한 번에 띄우기엔 정보가 너무 많을 때 사용하는 UI 디자인 패턴

• 단점: 페이지네이션과 같이 잠시 멈춰서 페이지를 선택할 필요가 없기 때문에 보다 더 매끄러운 사용자 경험을 제공합니다. 하지만 콘텐츠의 끝이 어딘지 알 수 없다는 점, 지나친 콘텐츠를 찾기 힘들다는 점 등의

GNB (Global Navigation Bar), LNB (Local Navigation Bar)

• GNB(Global Navigation Bar)는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴, LNB(Local Navigation Bar)는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴

UI 디자인 패턴 출처 ui-patterens.com

---

그리드 시스템

그리드(grid)는 수직, 수평으로 분할된 격자무늬를 뜻하며, 말 그대로 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법

화면이 세로로 나뉘는 영역에 따라 컬럼 그리드 시스템(Column Grid System)을 사용하며, Margin, Column, Gutter라는 세 가지 요소로 구성된다.

Margin

• Margin은 화면 양쪽의 여백을 의미합니다. 너비를 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고, vw, % 같은 상대 단위를 사용하여 유동성을줄 수도 있다.

Column

• Column은 콘텐츠가 위치하게 될, 세로로 나누어진 영역
• 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼

Gutter

• Column 사이의 공간으로, 콘텐츠를 구분하는데 도움을 줌
  - 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 각 콘텐츠가 독립적인 느낌

---

User Flow

용자 흐름(user flow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻한다.

1. 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
2. 다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
3. 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

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

Heuristic(휴리스틱)이란?

• '체험적인'이라는 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론을 말합니다.

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)
7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)
8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
10. 도움말 및 설명 문서 (Help and documentation)

---

와이어프레임

와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적

와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨로 나뉜다.
1. Low Fidelity Wireframe (Lo-Fi Wireframe)

• 손으로 빠르게 그린 수준의 와이어프레임을 Lo-Fi 와이어프레임이라고 한다. 아이디어를 구체화시키며 큰 그림을 잡을 때 사용한다.

2.Middle Fidelity Wireframe (Mid-Fi Wireframe)

• Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 후 보완 후 Mid-Fi 와이어프레임이 된다. Mid-Fi 수준에서는 와이어프레임을 봤을 때 페이지가 어떻게 작동할지 예상할 수 있다.

3.High Fidelity Wireframe (Hi-Fi Wireframe)

• 와이어프레임을 완성본에 가까운 Hi-Fi 와이어프레임이다. 목업에 가까운 형태이며, 시간도 많이 들고 수정도 어려워 와이어프레임을 작성하는 목적과는 맞지 않아 Hi-Fi한 수준까지 만드는 경우는 거의 없다.

프로토타입(prototype)

실제 제품과 거의 흡사하게 구현

---

UI툴로 피그마에 대해 배웠다.
피그마는 모바일 개발하면서 사용해본 경험이 있어서 익숙했지만 막상 기초부터 배워보니 부족했던 부분들이 채워지는 느낌이었다.

Figma란?

UI 디자인&프로토타이밍 툴로, 출시 이후로 꾸준히 점유율을 높여가다가 지금은 UI/UX 업계에서 가장 인기 있는 툴이다.

Figma의 특징

1. 실시간 협업 기능
2. 다양한 환경 지원
3. 자동 저장 및 버전 관리
4. 다양한 무료 폰트 지원
5. 오토 레이아웃 기능
6. 프로토타이핑