목차
1. UI와 UX
A. UI
UI란, User Interface의 준말로 사람들이 컴퓨터와 상호작용하는 시스템을 의미한다.
UI에는 화면상의 그래픽(GUI)뿐만 아니라, 키보드, 마우스 등도 포함된다.
구글 메인 화면에는 상단, 하단에 여러 버튼들이 있고, 중앙에 구글 로고와 검색창이 있다. 각 요소들을 클릭하거나 키보드로 입력하면, 거기에 맞는 기능들을 수행하게 된다.
이때 내가 '마우스로 버튼을 클릭'하면, 컴퓨터는 '버튼에 맞는 기능을 수행'하는 상호 작용이 일어난다.
이 상호작용을 일어나게 하는 매개체는 '마우스'와 '버튼'이다. 따라서, 버튼과 마우스 모두 UI라고 할 수 있는 것이다.
B. UX
UX는 User Experience의 준말로, 사용자가 어떤 시스템 또는 서비스를 이용하고 느끼거나 생각하는 모든 경험을 말한다.
실체가 있는 UI와는 다르게, UX는 말그대로 '경험'이므로 사람마다 제각각이다.
어떤 사람은 단순히 이용 경험만 UX라고 할 수 있지만, 어떤 사람은 사전 홍보, 실제 사용, 사후 처리 등의 모든 경험을 UX라고 할 수도 있다.
C. UI와 UX의 관계
만화를 보고싶어서 구글에 이런저런 검색을 하다가 우연히 한 사이트에 들어가게 되었다고 해보자.
그런데, 원하는 만화는 나오지도 않고 들어가자마자 수많은 불법 도박 사이트 광고로 도배되어 있다
그렇다면 이 페이지는 사용자에게 좋은 UX를 제공하는 페이지일까?
절대 아닐 것이다.
참고로 저런 만화 사이트도 전부 불법이니 절대 이용하면 안된다!
좋은 UX를 제공하기 위해서는 여러 요소가 필요하지만, 그중 가장 중요한것은 좋은 UI이다.
내가 원하는 정보만, 쉽고 간편하게 얻을 수 있는 UI를 가진 페이지일수록 좋은 UX를 제공할 확률이 높다.
프론트엔드 개발자라면 제품이나 서비스의 UI가 사용자로 하여금 가능하면 좋은 UX를 가질 수 있도록, 최소한 나쁜 경험은 하지 않도록 해야 한다.
물론 UX가 좋다고 해서 무조건 UI가 좋은 것도 아니고, 반대로 UI가 좋다고 무조건 UX가 좋은 것도 아니다.
아주 깔끔한 UI를 가진 페이지(ex.구글)에 '사과'를 검색했는데 '강아지'라는 검색 결과가 뜬다고 생각해보자.
좋은 UI에 비해 제공하는 UX는 아주 형편없어질 것이다.
정리하자면, UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며, 서로를 보완하는 역할을 한다.
UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다.
이렇게 UX와 UI는 서로를 계속해서 발전시켜나간다.
2. UI 디자인
UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 말한다.
쉽게 말하면 자주 사용되는 UI 컴포넌트라고 할 수 있습니다.
자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM 과의 의사소통도 원활해져 협업 효율도 높아질 수 있다.
네이버에서 몇개의 예시를 살펴보자.
A. 토글
토글은 On/Off를 설정할 때 사용하는 스위치 버튼이다.
색상, 스위치의 위치, 그림자 등의 시각적 효과를 주어 사용자가 토글의 상태를 확인할 수 있어야 한다.
B. 탭
토글로 표현하기에는 옵션이 너무 많은 경우 탭을 사용한다.
탭은 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 디자인 패턴이다.
탭을 사용하려면 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시해 주어야 한다.
C. 자동완성
사용자가 정보를 직접 입력하는 시간을 줄여주기 위해 사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여준다.
자동 완성 항목은 너무 많은 항목이 나오지 않도록 개수를 제한하는 것이 좋으며, 키보드 방향 키나 클릭 등으로 조작할 수 있게 해야 한다.
D. 캐러셀(Carousel)
컨베이어 벨트처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴이다.
자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나, 아니면 둘 중 선택할 수 있도록 만들 수 있습니다.
다음 콘텐츠의 일부를 옆에 배치하거나, 콘텐츠를 넘길 수 있는 버튼을 배치하기도 한다.
기타 다른 디자인 패턴들은
등의 사이트에서 확인할 수 있다.
3. UI 레이아웃
좋은 UI는 어떻게 만드는 것일까?
아무리 기능이 좋아도 GUI들이 여기저기 중구난방으로 퍼져있다면 좋은 UI라 할 수 없을 것이다.
이를 해결하기 위해 사용하는 것이 바로 '그리드 시스템'이다.
그리드 시스템은 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법이다.
웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용하며, Margin, Column, Gutter라는 세 가지 요소로 구성된다.
A. Margin
Margin은 화면 양쪽의 여백을 의미한다. 너비를 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고, vw, % 같은 상대 단위를 사용하여 유동성을 주어도 된다.
B. Column
Column은 콘텐츠가 위치하게 될, 세로로 나누어진 영역이다. 컬럼 개수를 임의로 나눌 수도 있지만, 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다.
이미지 속 화면 크기의 구분선을 break point라고 한다. 내가 만들고자 하는 UI가 어디에 속하는지 파악하고 컬럼 개수를 정한 뒤, 디바이스 크기에 따라 Columm의 크기를 정한다.
- 소형 휴대폰 : 0 ~ 480px
- 일반 스마트폰 & 태블릿 세로 화면 : 481 ~ 768px
- 태블릿 가로화면 & 노트북 : 769 ~ 1279px
- PC : 1280px ~
C. Gutter
Gutter는 Column 사이의 공간으로, 콘텐츠를 구분하는데 도움을 준다. Gutter의 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 각 콘텐츠가 독립적인 느낌을 준다.
다만 너무 좁거나, 너무 넓게 설정하지 않도록 주의해야 합니다. Gutter가 너무 좁으면 가독성이 매우 떨어지고, 그렇다고 너무 넓으면 UI가 어수선해질 수 있다. 그러므로 Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정하는 것이 좋다.
4. UX 디자인
- 유용성(Useful) : 사용 가능한가?
- 사용성(Usable) : 사용하기 쉬운가?
- 신뢰성(Credible) : 신뢰할 수 있는가?
- 검색 가능성(Findable) : 찾기 쉬운가?
- 매력성(Desirable) : 매력적인가?
- 접근성(Accessible) : 접근하기 쉬운가?
- 가치성(Valuable) : 가치를 제공하는가?
피터 모빌의 벌집 모형은 UX를 위해서 고려해야 할 7가지 요소를 제시해 줌과 동시에, UX를 얼마나 고려했는지, 혹은 사용자가 얼마나 좋은 UX를 경험했는지 평가하기 위한 척도로도 사용될 수 있다.
후에 UX를 개선하고자 할 때, 사용자 설문 조사를 통해 개선점을 찾아낼 수도 있다.
5. User Flow
사용자 흐름(user flow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며, 보통 사각형, 다이아몬드, 화살표로 이루어진 다이어그램을 이용해 작성한다.
- 사각형 : 사용자가 보게 될 화면
- 다이아몬드 : 사용자가 취하게 될 행동
- 화살표 : 화면과 행동을 연결
예를들어, 비행기 예매 페이지를 만든다고 해보자.
예매 페이지에서, 항공편 정보를 클릭하면 클릭한 항공편의 정보를 보여주는 가장 간단한 flow이다.
하지만, 이 flow에는 여러가지 기능들이 빠져있다.
- 원하는 항공편을 검색하는 기능
- 항공편 정보 페이지에서 예매 페이지로 넘어가는 기능
- 항공편 정보 페이지에서 탑승객 정보 입력으로 넘어가는 기능
위 기능들을 추가해준 flow는 다음과 같다.
물론 위 flow도 완벽한 flow는 아니지만, 이러한 과정을 통해, User flow 다이어그램을 그리면서 사용자 흐름을 빈틈 없이, 보다 더 편리하게 다듬어 나가는 과정을 거치면 UX를 개선할 수 있다.
6. UI/UX 사용성 평가
#1: 시스템 상태 가시성
이 설계는 항상 적절한 시간 내에 적절한 피드백을 통해 사용자에게 무슨 일이 일어나고 있는지 알려주어야 한다.
ex)다운로드시 다운로드 진행 상태를 알려준다
#2: 시스템과 현실 세계의 일치
디자인은 사용자의 언어를 사용해야 한다. 내부 전문 용어가 아닌 사용자에게 익숙한 단어, 구문 및 개념을 사용하며, 정보를 자연스럽고 논리적인 순서로 표시해야 한다.
ex)'이진법을 이용하여 논리 연산, 저장을 수행하는 전자 기계'가 아닌 '컴퓨터'라고 쓴다
#3: 사용자 제어와 자유
사용자가 실수로 작업을 수행하는 경우가 많다.. 그들은 원치 않는 행동을 다시 되돌리기 위해 명확하게 표시된 "비상 출구"가 필요하다.
ex)탭을 닫으면 실행 취소 버튼이 뜬다
#4: 일관성 및 표준
- 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따르는 것이 좋다.
- 내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스 정보 제공에 일관성이 있어야 한다
ex)로그인 창은 항상 아이디와 비밀번호, 로그인 버튼으로 이루어져 있다
#5: 오류 방지
좋은 오류 메시지도 중요하지만, 최상의 설계는 애초에 문제가 발생하는 것을 방지하는 것이다.
오류가 발생하기 쉬운 조건을 제거하거나, 오류를 확인하고 사용자가 작업을 수행하기 전에 확인 옵션을 제공한다.
ex)파일 삭제시 '삭제하시겠습니까?'라는 메시지가 뜬다
#6: 기억보다는 직관
요소, 작업 및 옵션을 표시하여 사용자의 메모리 로드를 최소화한다. 떄문에 사용자는 인터페이스의 한 부분에서 다른 부분으로 넘어갈 때 정보를 기억할 필요가 없다.
ex)뒤로가기 버튼을 누르면 바로 직전에 방문했던 페이지로 돌아간다
#7: 사용의 유연성과 효율성
경험이 부족한 사용자와 숙련된 사용자 모두에게 적합하도록 설계할 수 있어야 한다. 또한 사용자가 직접 여러 작업들을 편리하게 정의할 수 있다.
ex)원하는 단축키를 설정하고 사용한다
#8: 미학적이고 미니멀리즘적인 디자인
인터페이스는 관련이 없거나 불필요한 정보를 포함하지 않아야 한다.
ex)더보기 창을 눌러야만 기타 메뉴들이 뜬다
#9: 사용자가 오류를 인식, 진단 및 복구할 수 있도록 지원
오류 메시지는 누구든 알아볼 수 있는 언어로 표시하고, 문제를 정확하게 표시하며 해결책을 제안해야 한다.
ex)비밀번호를 입력하지 않으면 '비밀번호를 입력하세요'라는 메시지가 뜬다
#10: 도움말 및 설명서
시스템에 추가 설명이 필요하지 않으면 가장 좋지만, 사용자가 작업을 완료하는 방법을 이해하는 데 도움이 되는 문서를 제공해야 할 필요도 있다.
ex)페이지에 처음 들어가면 각 기능별 안내 팝업이 뜬다
'Frontend Study' 카테고리의 다른 글
| [FE_Bootcamp] 46일차_Component Driven Development (0) | 2023.04.20 |
|---|---|
| [FE_Bootcamp] 35일차_Effect Hook (0) | 2023.04.17 |
| [야간자율학습반 ] 재귀 (0) | 2023.04.12 |
| [FE_Bootcamp] 42일차_재귀 (0) | 2023.04.11 |
| [FE_Bootcamp] 41일차_Section2 회고 (0) | 2023.04.10 |
