UI/UX

UI

User Interface
사람들이 컴퓨터와 상호 작용하는 시스템
그래픽 요소 뿐만 아니라 물리적 요소도 UI라고 볼 수 있음.
컴퓨터와 상호 작용하기 위한 시스템이기 때문.

점점 그래픽 요소가 차지하는 영역이 많아지면서 현대에서는 GUI가 굉장히 중요한 역할을 하게 되었음.

UX

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

가능하면 좋은 UX를 가져갈 수 있는 UI를 제공하기 위해 노력해야 함.
UX는 UI를 포함하는 개념이다.
좋은 UX가 좋은 UI를 의미하지 않으며,
좋은 UI 또한 좋은 UX를 보장하지 않음.

UI 디자인 패턴

자주 반복되어 나타나는 문제점을 해결하고자 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴
자주 사용되는 UI 컴포넌트들은 다음과 같다.

1. Modal

네이버 블로그

기존에 이용하던 화면 위에 오버레이 되는 창
닫기 버튼이나 모달 범위 밖을 클릭하면 닫히는 것이 일반적임.
팝업창과는 구분되는 개념. 모달은 브라우저 설정에 영향받지 않음.

2. Toggle

옵시디언 설정

on/off를 설정할 때 사용하는 스위치 버튼 

대표적인 예시로 다크모드 버튼이 있다.

3. Tab

Material Design

콘텐츠를 분리해서 보여주고 싶을 때 사용하는 디자인 패턴
각 섹션의 이름이 길지 않아야 하고, 구분이 명확해야 하며, 어떤 섹션을 보는 중인지 표시해야 함.

4. Tag

내 노션 테이블..

라벨을 붙이는 역할
태그의 추가 및 제거가 자유로워야 함

5. Autocomplete

구글

개수 제한, 키보드 방향키나 클릭으로 접근 가능해야 함

6. Dropdown

옵시디언 하이라이터 플러그인

선택지 제공
자신이 선택한 항목을 정확히 알 수 있게 해야 함.

7. Accordion

Carbon Design System 예시

접었다 폈다 할 수 있는 컴포넌트
핵심 내용을 먼저 전달하려는 목적을 가질 때가 많음

Carbon Design System

8. Carousel

yes24

돌아가면서 컨텐츠를 표시해주는 방식.

9. Pagination

백준 질문게시판

페이지 구분
페이지를 넘길 때 잠시 멈춰야 하기 때문에 사용자 경험과는 거리가 멀 수도 있음

10. Infinite Scroll

유어클래스 메인화면

매끄러운 사용자 경험 제공
콘텐츠의 끝이 어딘지 알 수 없음, 지나간 콘텐츠를 다시 찾기 힘들다

11. GNB, LNB

최상위 메뉴, 종속되는 메뉴
항상 동일한 위치에 있어야 함.

 

그리드 시스템

Material Design

웹 디자인 -> 컬럼 그리드 시스템을 사용함
Margin, Column, Gutter

1. Margin: 화면 양쪽의 여백, 절대 단위, 상대 단위 디자인에 따라 사용
2. Column: 콘텐츠가 위치하게 될 세로로 나누어진 영역
   표준적으로 휴대폰에서는 4개, 태블릿은 8개, PC는 12개 칼럼
   화면 크기의 구분선 breakpoint
   상대 단위로 설정하는 것이 좋음. 기기마다 화면의 크기가 조금씩 다르고 브라우저의 크기가 변동될 수도 있기 때문
3. Gutter: Column 사이의 공간, 좁을수록 연관성 있어 보이고 넓을수록 독립적인 느낌을 줌.
   아무리 넓어도 컬럼 너비보다는 작게 설정할 것.