[리뷰] UI/ UX

UI

UI(User Interface,사용자 인터페이스):  사람들이 컴퓨터와 상호 작용하는 시스템

보통 UI라고 하면 떠오르는 화면상의 그래픽 요소이지만 그 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.

GUI

GUI(Graphical User Interface, 그래픽 사용자 인터페이스): 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경

GUI의 예시는 우리가 보는 운영체제의 화면, 혹은 애플리케이션 화면이 있다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다.

 

UX

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

제품, 서비스에 대한 경험과 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 의미한다.

 

UI와 UX의 관계

UX는 UI를 포함한다. 하지만 항상 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 좋은 UX를 보장하지는 않는다.

계산기를 살펴보았을 때 세련된 디자인이(UI)라도 계산기의 기능을 수행하지 못한다면 UX는 좋지 않다고 말할 수 있다.

하지만 나쁜 UI는 보통 나쁜 UX를 유발한다.

결론적으로 UI와 UX는 서로 다르지만 뗄려야 뗄 수 없는 관계이며, 서로 보완하는 역할을 한다. UX가 좋지 않은 곳읓 찾아냄으로써 UI개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다. 이렇게 UX와 UI는 서로를 계속해서 발전시킬 수 있다. 

 

---

UI디자인 패턴

UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 말한다. 쉽게 말하면 자주 사용되는 UI 컴포넌트라고 할 수 있다.

자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM과의 의사소통도 원활해져 협업 효율도 높아집니다.

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

https://ui-patterns.com/patterns

Design patterns

---

UI레이아웃

그리드(Grid) display:grid;

화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용하며, Margin(양쪽 여백), Column(컨텐츠가 위치하게 될 세로로 나누어진 영역), Gutter(column사이의 공간)라는 세 가지 요소로 구성된다.

 

디바이스 별 컬럼 수

표준적으로 휴대폰에서 4개, 태플릿에서 8개, PC에서는 12개의 컬럼(break point)으로 나눈다.

각 디바이스의 화면 크기

작은 스마트폰	큰스마트폰, 패드 세로화면	패드 가로화면, 노트북	데스크탑
0~480	481~768	769~1279	1280~

컬럼 그리드 시스템을 활용할 때 화면 가로 길이에 따라서 컬럼 개수가 달라지도록 코드를 작성하면, 다양한 디바이스와 환경에 유연하게 대응하는 UI를 만들 수 있으며, 이를 반응형 웹이라고 한다.

material.io

Material Design

 

좋은 UX를 만드는 요소

피터모빌의 벌집모형

1. 유용성(Useful):사용 가능한가?

2. 사용성(Useable): 사용하기 쉬운가?

3. 매력성(Desirable): 매력적인가?

4. 신뢰성(Credible): 신뢰할 수 있는가?

5. 접근성(Accessible): 접근하기 쉬운가?

6. 검색 가능성(Findable) : 찾기 쉬운가? 직관적인가?

7. 가치성(Valuable) : 위의 모든 요소들을 총합하여 고객에게 가치를 제공하는가?

 

User Flow

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

작성법:

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

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

화살표: 직사각형과 다이아몬드를 연결시켜주는 화살표

 

장점:

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

있으면 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 삭제할 수 있음

 

userFlow 다이어그램 도구

- https://miro.com/ko/

모든 팀을 위한 시각 협업 플랫폼 | Miro

- https://www.figma.com/figjam/

The Online Collaborative Whiteboard for Teams

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

https://www.nngroup.com/articles/ten-usability-heuristics/

10 Usability Heuristics for User Interface Design

와이어프레임(wireframe)

제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다.

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

1. Low Fidelity Wireframe

큰 그림 잡을 때 사용

2. Middle Fidelity Wireframe

어느정도 구체화

3. High Fidelity Wireframe

완성본에 가깝게 작성, 만드는데 시간 오래걸리고 와이어프레임을 작성하는 목적과는 맞지 않아 이 수준까지 만드는 경우는 드물다.

 

프로토타입(prototype)

제품 개발 전 단계에서 UI상호작용 시뮬레이션을 목표로 만든다.

실제 제품과 거의 흡사하게 구현, 페이지 이동과 상호 작용이 가능하다

 

1. Low Fidelity Prototype

구체적인 내용이 작성되어있지 않은 상태에서 간단한 상호작용과 페이지 이동정도만 테스트

2. Middle Fidelity Prototype

Lo-Fi prototype보다 사용성 테스트하기 좋음.

3. High Fidelity Prototype

최종 결과물과 유사한 수준으로 만든 프로토타입. 테스트를 통해 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있음

 

와이어프레임, 프로토타입 만들기 좋은 도구

https://www.figma.com/

Figma: the collaborative interface design tool.