[TIL] 좋은 UI, UX?

lmimoh·2022년 10월 24일

TIL UI ux

TIL

목록 보기

17/26

UI와 UX?

User Interface

UI(사용자 인터페이스)는 사람들이 컴퓨터 혹은 전자기기와 상호작용하는 시스템을 의미한다.

보통 UI를 연상하면, 화면 상의 그래픽 요소를 상상하곤 한다. 하지만, UI는 전자기기와 사람이 상호작용하기 위한 시스템을 의미하며 이는 GUI 외의 CLI나 키보드, 마우스 등의 물리적 요소 도 UI에 포함됨을 의미한다.

오늘날, 발달된 과학 기술은 다양한 전자기기에서 이용자의 터치만으로 상호작용 할 수 있게 만들었고 이에 화면 상의 GUI가 중요한 역활 을 하게 되었다.

특히, 프론트엔드 개발자는 웹 APP에서 시각적인 영역의 개발을 담당하는 만큼 주로 GUI를 다루게 된다.

User Experience

UX(사용자 경험)은 사용자가 특정 시스템, 제품, 서비스를 직•간접적 이용하면서 느끼는 총체적 경험을 의미한다.

이때, UX에 영향을 주는 요소 중 가장 중요한 것은 UI 이다. 이는 UX가 UI를 포함하고 서로를 보완하는 관계로 하나의 개선을 통해 UI와 UX를 모두 발전시킬 수 있음을 의미한다.

즉, 좋은 프론트엔드 개발자는 제품이나 서비스의 UI가 사용자에게 좋은 UX를 선사할 수 있도록 심플하고 편리하게 만들 수 있어야 한다.

UI Design Pattern

Design Pattern 은 소프트웨어 프로그래밍 시 자주 반복되어 나타내는 작업을 해결하고자,
이전에 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴 을 의미한다.

이때, UI Design Pattern은 웹 개발 과정에서 자주 만나게 되는 UI를 구현하기 위해 제작한 UI 컴포넌트 라고 할 수 있다.

대표적인 UI Design Pattern은 다음과 같다.

Modal

화면 위에 오버레이 되는 창 을 의미하며, 모달을 닫기 전까지 하위 화면과의 상호작용이 불가하다.
이는 새로운 페이지를 여는 팝업과는 다른 개념이다.

Toggle

ON/OFF가 가능한 스위치 로 2개 이상의 옵션을 가진 Toggle도 사용될 수 있지만, 이때 해당 옵션을 직관적으로 알 수 있어야 하고 너무 많은 옵션은 지양해야 한다.

알아보기 힘든 Toggle은 사용자의 UX를 해친다.

Tap

콘텐츠를 분리해서 배치하는 UI, 가로로 한 줄인 경우가 일반적이나 세로 혹은 여러줄로 배열하는 경우도 존재한다. => 콘텐츠를 분리한다는 기능을 충족하고 UX를 해치지 않는 선에서..

이때, Tap은 각 섹션의 이름이 너무 길지 않고 구분이 명확해야 한다.

Tag

태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할 을 가진다. 사용자는 자신의 콘텐츠에 태그를 부여하여 분류하고, 이후 보다 자세한 검색(분류) 기능을 제공하는데 도움이 된다.

이때, Tag는 사용자가 직접 작성하거나 개발자가 사전에 정의할 수 있지만 태그의 제거와 추가가 자유로워야 한다.

AutoComplete

사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것 을 의미한다. => 사용자의 입력 시간 단축, UX 개선(주로 검색기능)

이때, 자동 완성 항목은 개수를 제한하는 것이 좋고, 키보드 혹은 클릭으로도 접근이 가능해야 한다.

개인적으로, 자동완성이 존재해서 불편한 경우도 존재하는 것 같다.

DropDown

드롭 다운은 선택 가능한 항목들을 숨겨두었다가, 펼치면서 선택하는 UI 디자인 패턴 을 의미한다. 보통 클릭 시, 오버 시 펼쳐지게 하는 게 일반적이다.

이때, 드롭 다운이 되는 조건 보다 자신이 선택한 항목을 정확히 알 수 있는 것이 중요하다.

Arcodion

아코디언은 접었다 필 수 있는 디자인 패턴 으로, 화면을 깔끔하게 구성하고 콘텐츠에 대한 핵심 내용을 사전에 제시하기 위해 사용된다.

트리 구조 혹은 메뉴 바에서 상하 관계를 표현하기 위해 사용되기도 한다(GLB, LNB)

Carousel

콘텐츠를 돌아가면서 표시해주는 디자인 패턴(슬라이딩 배너 등) 이다. 자동으로 돌아가거나, 사용자가 넘길 수 있는 방식이 일반적이며 콘텐츠가 변경되는 것을 직관적으로 알 수 있어야 한다.

이때, 버튼을 통해 특정 콘텐츠로 이동하거나, 옆으로 이동하는 기능이 필요하다. => UX 개선

Pagination(Paging)

한 페이지 내 모든 콘텐츠를 담기 어려울 경우, 책 페이지를 넘기는 것처럼 번호를 붙여 페이지를 구분하는 것 을 의미한다.

이는 사용자가 원하는 페이지로 접근 가능한 장점이 있으나, 페이지를 넘기기 위한 소요 동작이 필요하므로 UX를 해칠 수도 있다. => 각각의 케이스에 올바른 방법을 선택해야 한다.

infinite scroll

Paging처럼 콘텐츠의 양이 많을 때, 무한으로 스크롤을 내릴 수 있는 디자인 패턴 을 의미한다. 이는 Paging 보다 매끄러운 UX를 제공하지만, 콘텐츠의 끝을 예측할 수 없고 지나친 콘텐츠를 찾는 것이 힘든 점이 UX를 해칠 수 있다.

이때, 모든 콘텐츠를 불러온 뒤 일정 부분을 보여주는 것이 아닌 스크롤의 바닥에 도달했을 때 추가 콘텐츠를 로드하는 방식으로 만들어야 한다.

Global Navigation Bar & Local Navigation Bar

GNB는 어느 페이지에서나 사용할 수 있는 최상위 메뉴를 의미하고, LNB는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 사용되는 메뉴를 의미한다.

이때, 웹사이트 혹은 웹 APP에서 GNB는 항상 동일한 위치에 있어야 한다. GNB의 위치가 변하는 경우 사용자는 GNB를 찾는 소요가 발생하고 이는 UX를 해칠 수 있다.

더보기 : Ui-Patterns

Grid System ?

Grid는 수직, 수평으로 분할된 격자 무늬를 의미하며, 화면을 그리드로 나눈 뒤 콘텐츠를 배치하는 방식 을 의미한다.

이때, 웹 디자인에서는 화면을 세로로 몇개의 영역으로 나눌 것인지를 정하는 Column Grid System을 사용하며, 이는 Margin, Column, Gutter의 세가지 요소로 구성된다.

Margin

화면 양쪽의 여백을 의미하는 Margin은 절대 단위와 상대 단위를 모두 사용가능하며 페이지를 어떻게 디자인할 것 인가에 따라 결정된다.

Column

콘텐츠가 위치하게 될 세로로 나뉜 영역을 의미한다. 컬럼의 개수는 임의로 설정되나, 일반적으로 표준 스마트폰 키키는 4, 태블릿 PC는 8, 데스크톱 화면은 12 컬럼으로 구성된다.

이때, Column은 상대 단위를 사용하여 콘텐츠가 뷰어 크기에 맞춰지도록 설정하는 것이 좋다.

이는 기기마다 화면의 크기가 상이하고, 브라우저의 경우 사용자의 마음대로 크기를 설정할 수 있기 때문이다.

Gutter

Gutter 는 Column 사이의 공간을 의미하며, 콘텐츠를 구분하는 역할을 한다.

해당 간격에 따라 콘텐츠의 연관성을 나타낼 수 있고, 좁으면 높은 연관성을 멀수록 낮은 연관성을 연상시킨다.

이때, 너무 좁으면 콘텐츠를 구분하기 힘들고 답답한 느낌을 주며 너무 넓은 경우 콘텐츠가 따로 놀고 UI가 어수선해진다.

이처럼 Column Grid System을 활용할 때, 화면의 길이에 따라 상이한 컬럼 개수를 사용하고 Grid에 따라 변경된 UI를 제공한다면 다양한 디바이스와 환경에서 대응 가능한 UI를 제작할 수 있다.

이를 반응형 웹 이라고 부른다.

더보기 : material.io

피터 모빌의 7 요소

UX 필드의 선구자 중 한 명인 피터 모빌(Peter Morville)이 이야기한 UX(유저 경험)에 영향을 주는 7가지 요인 을 의미한다.

해당 요소를 통해 UX를 정의하고 평가할 수 있다.

Useful : 제품 혹은 서비스가 목적에 맞는 사용 가능한 기능 을 제공하고 있는가?
Usable : 본연의 기능이 사용하기 쉬운가?
=> 직관적이고 쉬운 UI를 제공하는가?
Desirable : 제품이 사용자에게 매력적인가?
=> 디자인, 이미지, 브랜딩, 마케팅 전략 등등
Credible : 사용자가 제품 혹은 서비스를 신뢰할 수 있는가?
=> 장기적으로 믿을 수 있는 브랜드 이미지를 구축했는가?
Accessible : 나이, 성별, 장애 여부를 떠나 누구든지 제품 혹은 서비스에 접근할 수 있는가?
=> 고연령자, 시각 장애인 등 다양한 사용자를 고려한 기능을 제공하고 있는가?
Findable : 사용자가 원하는 기능 혹은 정보를 찾기 쉬운가?
=> 검색 기능을 제공하고, 검색 영역을 찾기 쉬운가?
Valuable : 위 요소를 총합하여 사용자에게 가치를 제공하는가?
=> 모든 요소를 고르게 고려하여, 다양한 사용자에게 가치를 전달하고 있는가?
=> 사용자마자 중요시하는 가치가 다를 수 있기에 공통적인 요소를 극대화하는 전략 필요

Jakob's Ten Usablility Heuristics

제이콥 닐슨(Jakob Nuelsen) 의 이론과 경험을 바탕으로 한 일련의 규칙을 통해 웹 사이트의 사용성을 평가하는 것 을 의미한다.

시스템 상태의 가시성(Visibility of system status)
- 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황 등의 정보를 제공해야 한다.
시스템과 현실 세계의 일치 (Match between system and the real world)
- 어려운 전문 용어가 아닌, 사용자에게 친숙한 언어와 형태를 통해 기능을 제공해야 한다.
사용자 제어 및 자유 (User control and freedom)
- 사용자의 실수로 인해 발생한 문제에 대해 되돌아갈 수 있는 기능을 제공해야 한다.
일관성 및 표준 (Consistency and standards)
- 외부 일관성 : 일관적인 UX 제공을 위해 플랫폼 및 업계의 관습을 따라야 한다.
  => 잘 알려진 UI 디자인 패턴을 사용한다.
- 내부 일관성 : 사용자의 혼란을 배제하기 위해 인터페이스와 정보 제공에 일관성이 있어야 한다.
  => 제품 내 같은 인터페이스를 유지한다.
오류 방지 (Error prevention)
- 오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지해야 한다.
기억보다는 직관 (Recognition rather than recall)
- 사용자가 기억해야 하는 정보를 최소한으로 줄인다.
사용의 유연성과 효율성 (Flexibility and efficiency of use)
- 사용자(기능 사용 능력에 따라)에게 개별 맞춤 기능을 제공한다.
  => 초보자용, 전문가용을 별도로 나누거나 개별적으로 기능을 설정할 수 있도록 한다.
미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
- 인터페이스 내 불필요한 정보를 포함하지 않고, 우선 순위를 토대로 제공한다.
  => 사용 빈도가 적은 경우, 필요한 때에만 볼 수 있도록 숨겨두는 방식
오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
- 사용자가 이해할 수 있는 언어를 사용하여 문제와 해결 방법을 제안해야 한다.
도움말 및 설명 문서 (Help and documentation)
- 추가 설명이 없는 경우가 가장 좋지만, 상황에 따라 문서를 제공해야 한다.

위의 사용성 평가 기준에 따라 서비스 중인 웹 APP를 평가하거나, 설계 단계에서 보다 완성도 있는 APP을 기획하기 위해서 사용할 수 있다.

즉, 제품 설계 과정에서 위 10가지 기준을 지속적으로 확인하고 보완하는 노력이 필요하다.

느낀 점

웹 개발자는 단순히 웹 사이트 혹은 웹 APP을 구현하는 직업이 아니라는 생각이 들었다.

서비스 제공 과정에서 사용자에게 좋은 UX를 선사하기 위해서 직관적이고 편리한 UI를 고민해야 하고,
프로그래밍적으로는 사후 관리와 보다 원활한 사용 환경을 위한 APP의 설계도 고려해야 한다.

사실, 개발자는 슈퍼 히어로가 아닐까..? 하지만 그만큼 매력이 있는 일이라고 생각한다.

내 손으로 현실에 존재하지 않던 무언가를 만들어낸다는 것은 굉장히 즐거운 일이고, 사실 그 과정에서 고려해야할 사항들이 많은 것도 너무나 당연하다.

부모님이 나를 이쁘게 빚어준 것처럼, 자식을 낳는 마음으로 개발에 임하자.

끗.

lmimoh

성장하는 개발자, 이민훈입니다.

이전 포스트

[TIL] 재귀함수란?

다음 포스트