UI/UX

🐕 UI/UX

UX(User Experience)는 사용자 경험을 의미합니다.

사용자가 어떤 시스템이나 제품, 서비스 등을 직간접적으로 이용하면서 느끼고 생각하는

총체적 경험을 의미한다고 하며 넓은 범위의 의미를 가지기 때문에

자연스럽게 UI(User Interface)는 UX의 하위 개념으로 인식하는 것도 가능합니다.

 

UX는 UI를 포함하지만 좋은 UX가 좋은 UI를 의미하거나

좋은 UI가 좋은 UX를 보장하지는 않습니다.

 

프론트엔드에서의 UI 디자인패턴으로는 대표적으로

모달, 토글, 탭 , 태그 , 자동완성 , 드롭다운 , 아코디언, 캐러셀, 페이지네이션, 한무스크롤, GNB , LNB 등이 있습니다.

---

👻컬럼 그리드 시스템

웹 디자인 분야에서는 화면을 세로로 몇개의 영역으로 나눌 것인가에 대해 초점을 맞춘

컬럼 그리드 시스템을 사용합니다.

이 컬럼 그리드 시스템은 margin, Column, Gutter라는 세가지 요소로 구성됩니다.

 

컬럼 그리드 시스템에서 margin은 화면 양쪽의 여백을 의미합니다.

px을 사용해도 괜찮고 vw , %같은 상대단위를 사용해도 좋습니다.

 

Column은 콘텐츠가 위치하게 될 세로로 나누어진 영역입니다.

컬럼 개수를 임의로 나눌수도 있지만 표준적으로는

스마트폰에서 4개 태블릿에서 8개 PC에서는 12개의 컬럼으로 나눕니다.

 

margin과 column은 익숙한데 Gutter는 조금 생소하네요

Gutter란 Column 사이의 공간으로 콘텐츠를 구분하는데 도움을 줍니다.

Gutter의 간격이 좁을 수록 콘텐츠들이 연관성 있어보이고 넓을수록 독립적이어 보입니다.

Gutter는 아무리 넓어도 컬럼 너비보다는 작은 편이 좋습니다.

0~480px	481~768px	769~1279px	1280~
작은 스마트폰	큰스마트폰 타블렛 세로	타블렛가로 노트북	데스크탑

아하..이래서 미디어쿼리를 줄때 768픽셀이 국룰이었군요

https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

Material Design

좀 더 자세한 컬럼그리드의 정보는 여기서 참고할 수 있네요

---

🥶 좋은 UX를 만드는 요소

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

위 7가지 평가요소를 갖고 평가를하는 피터 모빌의 벌집 모형이라는게 있다네요 ok..

---

🌞User Flow

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

보통 다이어 그램으로 작성하는데 이것도 작성법이 다 존재하네요

 

직사각형 : 사용자가 보게 될 화면

다이아몬드 : 사용자가 취하게될 행동

화살표 : 화면과 행동을 연결시키는 매개체

 

유저플로우를 그리면

1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있고

2. 있으면 좋은 기능을 추가하거나 없어도 상관없는 기능을 삭제할 수 있읍니다.

---

 

이해했다고 생각할 때가 가장 무서울 때다.