[사용자 친화 웹] UI/UX

UI(User Interface)

UI는 User Interface의 줄임말로 사용자 인터페이스, 다시말해 사용자가 컴퓨터와 상호작용하는 접점을 의미한다. 보통 우리가 생각하는 화면상의 그래픽 버튼 외에도 마우스, 키보드 또한 UI라고 볼 수 있다.(컴퓨터랑 상호작용하니깐..) 특히 물리적 UI(휴대폰의 볼륨 버튼 등)와 그래픽 UI(키오스크의 메뉴판 등)중에서 그래픽 UI는 오랜 시간 컴퓨터에서 중요한 비중을 차지하고 있다.

UX(User Experience)

UX는 사용자 경험, 즉, 사용자가 어떤 서비스와 제품을 사용하면서 느낀 총체적인 경험을 의미한다. 말 그대로 '총체적'인 경험이기 때문에, 제품과 서비스 그 자체에 대한 경험, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 의미한다. UX에 영향을 주는 요소 중 프론트엔드 개발자에게 가장 중요한 요소는 UI이다.

UI와 UX의 관계

UX는 UI를 포함한다. 다만 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하는 것은 아니다. 하지만 나쁜 UI는 보통(사실상 거의) 나쁜 UX를 의미한다. 이를 항상 기억해야 한다.

UI 디자인 패턴

UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴이다. 다음은 자주 쓰이는 디자인 패턴이다.

모달

기존에 이용하던 화면 위에 오버레이 되는 창. 모달은 브라우저 설정에 영향을 받지 않아, 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋다.

토글

on/off를 설정할 때 사용하는 스위치. 어느 옵션이 선택되어 있는지 직관적으로 알 수 있어야 하며, 옵션의 개수가 너무 많다면 탭을 사용하는 것을 고려해야 한다.

탭

콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴. 각 섹션의 이름이 너무 길지 않아야 하고, 섹션의 구분이 명확해야 하며, 현재 어떤 섹션을 보고 있는지 표시해 주어야 한다.

태그

콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할. 키워드는 사용자가 직접 작성하게 만들 수도 있고, 개발자가 종류를 아예 정해놓을 수도 있다. 어떤 방식이든 태그의 추가와 삭제는 자유로워야 한다.

자동완성 (Autocomplete)

사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것. 너무 많은 항목이 나오지 않도록 개수를 제한하는 것이 좋으며, 키보드 방향 키나 클릭 등으로 접근하여 사용할 수 있는 것이 좋다.

드롭다운

선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴. 사용자가 자신이 선택한 항목을 정확히 알 수 있게 만드는 것이 중요하다.

아코디언

아코디언은 접었다 폈다 할 수 있는 컴포넌트로, 보통 같은 분류의 아코디언을 여러 개 연속해서 배치한다. 화면을 깔끔하게 구성하기 위해서 사용하며, 트리 구조나 메뉴바로 사용할 경우에는 상하 관계를 표현하기 위해서 사용하는 경우가 많고, 콘텐츠를 담는 용도로 사용할 때에는 핵심 내용을 먼저 전달하려는 목적을 가질 때가 많다.

캐러셀

컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴이다. 사용자가 넘겨야만 넘어가도록 만드는 경우, 콘텐츠가 넘어갈 수 있음을 직관적으로 알 수 있어야 한다.

페이지네이션

한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해주는 것을 말한다.

무한스크롤

말 그대로 모든 콘텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있는 것을 말하며, 페이지네이션과 마찬가지로 한 번에 띄우기엔 정보가 너무 많을 때 사용하는 UI 디자인 패턴이다. 처음부터 모든 콘텐츠를 로드해온 후 조금씩 보여주는 방식으로 구현하는 것은 진정한 의미의 무한스크롤이라고 할 수 없으므로 주의한다.

GNB, LNB

GNB(Global Navigation Bar)는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴
LNB(Local Navigation Bar)는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴
(위 예시에서는 탭 형식으로 최상단에 위치한 메뉴가 GNB, 마우스를 올렸을 때 드롭다운 형식으로 내려오는 서브 메뉴가 LNB)

GNB는 말했듯이 어느 페이지에 있든 사용할 수 있도록 항상 동일한 위치에 존재해야 한다.

컬럼-그리드 시스템

그리드(grid)는 수직, 수평으로 분할된 격자무늬를 뜻하며, 말 그대로 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법이다. 1970년대부터 사용되었으며, 책, 신문과 같은 인쇄물은 물론 건축, 미술과 같은 다양한 분야에서 사용되었고, 기술이 발전함에 따라 웹 디자인에도 적용하여 사용되고 있다. 웹 디자인에서는 화면을 세로로 몇 개의 그리드로 나눌 것인가에 초점을 맞춘 컬럼-그리드 시스템을 사용한다.

1. Culumn
2. Gutter
3. Margin

1. Culumn

Column은 콘텐츠가 위치하게 될, 세로로 나누어진 영역을 말한다. 컬럼 개수를 임의로 나눌 수도 있지만, 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다.
내가 만들고자 하는 UI가 어디에 속하는지 파악하고 컬럼 개수를 정하면 된다. 기기마다 화면의 크기가 조금씩 다르고, 브라우저의 크기를 사용자 마음대로 바꿀 수도 있기 때문에, Column은 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다.

2. Gutter

Gutter는 Column 사이의 공간으로, 콘텐츠를 구분하는데 도움을 준다. Gutter의 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 각 콘텐츠가 독립적인 느낌을 준다. 다만 너무 좁거나, 너무 넓게 설정하지 않도록 주의한다. 너무 좁으면 콘텐츠를 구분하기 힘들어지고 답답한 느낌을 주는데, 그렇다고 너무 넓으면 콘텐츠가 따로 노는 느낌을 주면서 UI가 어수선해진다. Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정한다.

3. Margin

Margin은 화면 양쪽의 여백을 의미한다. 너비를 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고, vw, % 같은 상대 단위를 사용하여 유동성을 주어도 좋다.

User Flow

사용자 흐름(user flow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 의미하며 보통 다이어그램을 그려 정리한다.

다이어그램 작성법

사용자 흐름을 다이어그램으로 작성할 때, 기본적으로 세 가지 요소를 사용한다.

직사각형 : 사용자가 보게 될 화면
( ex. 회원 가입 페이지, 로그인 페이지 … )

다이아몬드: 사용자가 취하게 될 행동
( ex. 로그인, 버튼 클릭, 업로드 … )

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

이 외의 요소를 필요에 따라 추가하여 사용해도 좋지만, 이 세 가지 요소는 거의 필수적으로 사용한다. 이 요소들을 활용하여 사용자가 보게될 화면과 취할 수 있는 행동을 최대한 꼼꼼하게, 빠짐 없이 작성한다.