UX/UI로 사용자 친화 웹 제작

웹 개발에서 UX와 UI를 떼어놓을 수 없는 개념입니다. 디자인과 설계가 깔끔하고 올바르게 되어 있어야, 사용자는 편리함을 느끼고 만족스러운 서비스를 경험할 수 있겠죠. 

예전부터 UX/UI부분에 관해 더 공부해보고 싶었는데 좋은 기회를 얻었습니다.

 

🚩UX/UI?

왜 UX 사전조사가 중요한가?...

UI, 즉 유저 인터페이스user interface란 '사람이 컴퓨터와 상호작용하는 시스템'을 말합니다. 화면상 나타난 그래픽 요소 외에 키보드, 마우스 등 물리적인 것들도 상호작용을 위한 시스템으로, UI의 일종입니다. 버튼, 키보드 등을 물리적 UI라고 할 수 있겠네요. 다만 현대에 들어서면서 직관적인 그래픽 UI(GUI)의 중요성이 높아졌습니다. 터치 스크린이 어디에나 상용화 되고, 마우스를 통해 컴퓨터 화면으로 상호작용 하는 경험이 우리에게 더 익숙해졌으니까요. 

GUI(그래픽 사용자 인터페이스)는 사용자가 그래픽을 통해 컴퓨터와 정보 교환하는 작업 환경입니다. GUI는 우리가 사용하는 윈도우, 맥과 같은 운영 체제의 화면이나 애플리케이션 화면 등이 있는데요. 프론트에서 흔히 말하는 UI는 GUI를 말한다고 생각해도 무방합니다.

 

UX, 즉 사용자 경험user experience은 사용자가 어떤 시스템, 제품, 서비스를 이용하며 느끼고 생각하는 총체적 경험이라고 할 수 있습니다. 여기서 총체적인 경험이라는 표현에 주목해야 합니다. 즉 제품에 관하여 사용자가 경험하는 모든 요소들이 UX라는 개념에 포함되는 것이고, 이 UX 중에서도 프론트엔드 개발자가 가장 중시해야 할 요소가 UI입니다. 즉 프론트엔드 개발자는 자신의 UI가 사용자에게 최대한 좋은 UX를 제공하도록 고민해야 합니다.

 

 

보자마자 사용자가 공포에 질려 달아나게 하는 Bad UX

이처럼 UX는 UI를 포함합니다. 그러나 좋은 UX가 좋은 UI를 보장하지는 않으며(기본 계산기 어플의 UX는 훌륭하지만, 특별히 보기 좋은 디자인이라곤 할 수 없습니다), 좋은 UI도 나쁜 UX일 수 있습니다(완벽한 디자인의 계산기가 엉뚱한 답만 도출한다고 생각해보세요.). 

반면 나쁜 UI는 나쁜 UX를 보장합니다. 위의 예시 사진을 보세요. 끔찍한 디자인은 사용자가 중간에 헤매게 만들고, 제품을 사용하고 접근하는 데에 불편함을 느끼도록 만듭니다. 프론트엔드 개발자라면 이러한 UI는 지양해야 합니다. 

 

---

UI

🚩자주 쓰이는 UI 패턴

이쯤 하여 프론트엔드에서 자주 쓰이는 UI의 패턴들에 대해 알아볼까요. UI 디자인 패턴은 과거 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 말합니다. 한마디로 자주 쓰이는 컴포넌트라고 할 수 있겠죠. 

이러한 '자주 쓰이는 패턴'은 사용자에게 이미 친숙하기 때문에 이점을 갖습니다. 

 

1. 모달 : 기존에 이용하던 화면 위에 오버레이 되는 창
2. 토글: 토글은 On/Off를 설정할 때 사용하는 스위치 버튼
3. 탭: 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴 
4. 태그: 콘텐츠 설명을 위한 키워드 라벨, 추가와 제거가 자유롭다.
5. 자동완성: 사용자가 입력 중일때 입력하고자 하는 내용과 일치될 가능성 높은 항목을 보여준다. 
6. 드롭다운: 선택할 수 있는 항목을 숨겨두었다가, 펼쳐지면서 선택 가능하게 만든다.
7. 아코디언: 접었다 폈다 할 수 있는 컴포넌트로, 보통 같은 분류의 아코디언을 여러 개 연속해서 배치
8. 캐러셀: 수하물 컨베이어 벨트, 또는 회전목마라는 뜻의 영단어. 컨베이어 벨트나 회전목마처럼 옆으로 넘어가면서 콘텐츠를 표시해 주는 UI 디자인 패턴(스와이퍼)
9. 페이지네이션: 한 페이지에 띄우기에 정보가 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해 주는 것
10. 무한 스크롤: 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것(맨 아래 도달하면 추가 로딩 발생.)
11. GNB/LNB: 어느 페이지에 들어가든 사용하는 최상위 메뉴/그 메뉴에 종속되는 서브 메뉴 

 

더 많은 UI 디자인의 정보 ui-patterens.com

Design patterns

 

 

🚩그리드 시스템 Grid System 

질서 있는 구조의 UI를 구성할 수 있게 도와주는 시스템입니다. grid는 수직, 수평으로 분할되는 격자를 뜻하는데요. 화면을 격자로 이렇게 나눈 뒤, 그 격자에 맞추어서 콘텐츠를 배치하면 쉽고 깔끔한 디자인을 만들 수 있습니다.

출처: https://uxcel.com/glossary/grid-system

웹 디자인 분야에서는 주로 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용합니다. 이는 Margin, Column, Gutter라는 세 가지 요소로 구성됩니다.

 

• Margin: 화면 양쪽의 여백. px처럼 절대단위를 써도 되고, vw나 %를 쓸 수도 있다.
• Column: 세로로 나누어진 영역. 보통 휴대폰에서는 4개, 태블렛은 8개, PC는 12개 컬럼으로 나눈다. Column은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다.
• Gutter: Column사이의 공간, 콘텐츠 구분에 도움을 준다. 간격에 따라 독립적인 느낌을 주기도 한다. 아무리 넓어도 컬럼 너비보다는 좁게 설정하는 게 좋다.

---

UX

🚩좋은 UX를 만드는 요소

피터 모빌(Peter Morville)의 벌집 모형이라고 들어보셨나요? 이 모형은 7가지 요소를 통해 좋은 UX를 제시합니다.

• 유용성: 사용 가능한가? 목적에 맞는 기능을 제공하고 있는가? 
• 사용성: 사용하기 쉬운가? 직관적인가? 자주 쓰이는 패턴은 높은 사용성을 지닌다.
• 매력성: 매력적인가? 보기 좋은 디자인, 이미지, 브랜딩 등을 포함한다.
• 신뢰성: 신뢰할 수있는가? 사용자가 제품을 믿고 사용하는가?
• 접근성: 접근하기 쉬운가? 성별, 나이, 장애 여부를 고려해야 한다.
• 검색 가능성: 찾기 쉬운가? 검색 가능성을 고려해서 직관적으로 검색 기능을 추가한다.
• 가치성: 이 모든 것의 총합으로, 사용자에게 사용할 만한 가치를 제공하는가? 

위의 조건들을 잘 충족시키면 바람직한 UX입니다. 이 모형은 그렇다면 UX 평가를 위한 '척도'로도 사용 가능하겠네요. 우리는 각 요소를 개선하고 최적의 결과를 사용자에게 제공할 수 있도록 노력해야 합니다.

 

🚩User Flow

유저 플로우, 즉 사용자 흐름은 사용자가 제품에 진입한 이후부터 취하는 모든 행동을 뜻합니다. 

 

따라서 사용자 흐름을 사용자 흐름 다이어그램으로 우선 작성할 필요가 있습니다.

기본적으로는 아래처럼 세 가지 요소를 자주 사용하는데요. 

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

이러한 간단한 도형을 사용하여 사용자 흐름 다이어그램을 그려보면 매끄럽지 않은 부분 혹은 삭제하고 추가할 기능들을 쉽게 파악하고 개선할 수 있습니다. 

 

사용자 흐름 다이어그램을 쉽게 그릴 수 있는 사이트: https://www.figma.com/figjam/

 

---

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

제이콥 닐슨은 10가지의 사용자 평가 기준을 제시했습니다.

사용성 평가 기준은 당연히, 평가를 목적으로도 사용할 수 있지만, 더 완성도 있는 애플리케이션을 기획하기 위해서도 얼마든지 사용할 수 있어요. 따라서 우리는 10가지 기준을 고려하며 제품을 설계하도록 노력해야 합니다.