[내일 배움 캠프] 15일차

UI 디자인은 예쁘게 구성하거나 텍스트를 정렬하는 것이 아니라, 사용자가 목적을 달성하기 위해 자연스럽게 행동할 수 있도록 흐름을 설계하는 일

사용자의 행동 경로를 따라 어떤 정보를 먼저 보여주고, 어디서 선택과 고민이 일어나야 할지 의도적으로 화면을 구성

UI가 불편하다는 것은 결과에 불과하기 때문에, 디자인 개선 전 무엇이 불편했는지 근본적인 원인을 파악

사용자 행동의 근본 원인을 파악하려면 "왜 결제를 하지 않았는지?" 등의 질문을 통해 표면적 디자인 문제가 아니라 근본적인 이유를 분석

5WHY 기법처럼 끊임없이 "왜?"라는 질문을 던지는 게 사고의 핵심이며, 디자이너의 대부분의 시간은 이러한 고민과 논리를 세우는 데 사용

좋은 디자인이라는 절대적 기준은 없으며, 디자인의 가치 판단은 사용자와 공급자, 그리고 상황에 따라 달라짐

사용자 중심의 디자인이 중요하며, 예를 들어 시력이 약한 어르신을 위한 ATM의 큰 글씨는 일반적 심미성 기준에 어긋날 수 있어도, 해당 사용자에게는 더 좋은 디자인

디자인에서 심미성만을 추구하는 것이 아니라, 사용자가 실제로 필요로 하는 기능과 사용 환경을 중심에 두어야 함

더 나은 디자인의 기준은 사용자가 서비스를 더 쉽고 편리하게 이용할 수 있도록 만드는 것

요약하자면 좋은 디자인은 없지만 더 나은 디자인은 존재함

사용자가 원하는 바를 더 빠르게 얻을 수 있는 디자인을 만드는 것이 디자인의 핵심 목표

사용자 행동을 중심으로 설계해야 하며, 이를 위해서는 사용자가 무엇을 원하는지 파악하고 행동을 설계하는 것이 필수적

디지털 제품의 사용자는 구체적인 원하는 바가 있기 때문에 앱이나 웹 등을 사용하며, 사용자가 원하는 목적지에 도달하도록 도와주는 것이 사용자 행동 설계의 역할

UI 디자인은 사용자가 고민할 틈 없이 바로 답을 찾을 수 있도록 행동을 설계하는 것이 핵심

사용자 행동 설계는 주로 세 가지 중심 요소

•목표
사용자가 이루고자 하는 핵심 목표
•행동
목표 달성을 위해 사용자가 중간에 취하는 행위들로, 버튼 누르기, 메뉴 열기 등이 이에 속함
•흐름
이러한 행동들을 하나의 줄기처럼 연결한 구조로, 플로우 차트, 와이어프레임, 프로토타입 등의 형태를 갖춥니다.

디자이너는 이 세 가지 요소를 중심에 두고 행동을 설계하는 것이 중요합니다.

UI 디자인의 목적은 단순한 시각적 설계가 아니라, 사용자의 숨겨진 니즈를 파악하고 충족시키는 데 있음

디자이너의 역할은 단순히 디자인에 머물지 않고, 비즈니스와 사용자의 심리적 이익을 함께 견인하는 전문직으로 확장

북극성 지표

북극성 지표는 회사가 가장 중요하게 생각하는 핵심 지표로, 반드시 올려야 하는 수치로 간주

유튜브는 1인당 시청 시간, 배달의민족은 주문 완료 건수, 에어비앤비는 예약 완료 수, 토스는 주간 활성 사용자 수 등이 북극성 지표의 대표 예시

북극성 지표는 서비스가 성공적으로 운영되고 있는지 판단할 수 있는 핵심 기준

배달 서비스 사례에서 사용자가 한 가게만 반복 주문해도, 주문 빈도가 높으면 서비스가 잘 운영되고 있다고 봄

핵심 지표는 "이것만큼은 꼭 올려야 한다"고 할 정도로 중요한 수치이며, 실제로 서비스를 개선할 중요한 방향성을 제시

북극성 지표의 수치가 높아질수록 사용자가 서비스 목적을 잘 달성하고 있음을 의미하며, 제품이 사용자에게 실질적 도움이 되고 있다는 확신을 줌

인게이지먼트 게임

인게이지먼트 게임은 서비스의 형태와 사용자 행동 패턴을 분류한 카테고리 개념

핵심 지표(북극성 지표)를 집요하게 달성하도록 설계하는 것이 중요하며, 사용자를 반복적으로 참여시키기 위해 리소스를 집중해야 함

이러한 핵심 지표의 유형 변화를 바탕으로 서비스를 Attention, Transaction, Productivity 등 세 가지 인게이지먼트 게임으로 분류할 수 있음

Attention 게임

Attention 게임은 사용자의 주목을 얻고, 앱에 오래 머무르고 자주 접속하게 만드는 것이 핵심인 서비스 유형

대표적인 핵심 지표는 체류 시간, 스크롤 깊이, 페이지 뷰 등이 있으며, 사용자가 서비스에 오래 머물수록 서비스 제공자에게 이득이 됨

유튜브, 인스타그램, 브런치, 미디엄 등은 Attention 게임에 속하며, 더 많은 영상 시청, 피드 스크롤, 글 읽기 및 구독과 같은 활동으로 몰입감을 유도

Transaction 게임

Transaction 게임은 실물 물건이나 서비스 등 다양한 형태의 거래가 발생할 때 이득을 얻는 서비스 유형

이용자는 앱 내에서 거래나 결과를 반복적으로 만들어내며, 주문수, 완료율, 구매 전환율 등이 핵심 지표가 됨

대표 서비스로 배달의 민족, 쿠팡이츠, 쿠팡, 숨고, 미소, 택시 앱 등이 해당되며 물건 또는 서비스를 구매 또는 거래하는 것이 중심

사용자가 쉽고, 빠르게, 헷갈림 없이 거래 목적을 달성할 수 있도록 명확한 UI가 필수적

Productivity 게임

Productivity 게임은 사용자가 업무를 완수할 때마다 이득과 성취감을 느끼도록 설계되어 있음

이 유형의 서비스는 사용자의 성취감, 효용감, 자기 효능감을 지속적으로 자극하는 것이 핵심

생산적인 활동이 많아질수록 더 많은 이득이 쌓이며, 대표적인 지표로는 생성된 콘텐츠 수, 정리된 데이터 수, 공유 빈도, 작성 문서 수 등이 있음

실제 서비스 예시로는 노션, 슬랙, 피그마, 포토샵, 일러스트레이터, 구글 캘린더 등 생산성과 업무 완수를 돕는 대부분의 도구와 SaaS 제품이 해당

UI 디자인에서 정보 구조화는 단순히 멋있는 화면을 그리는 것이 아니라, 정보를 체계적으로 분류하고 사용자가 쉽게 이해할 수 있게 전달하는 과정

정보 구조화를 통해 화면 내 정보들을 논리적으로 묶고 분류하여 사용자가 혼란에 빠지지 않도록 가이드하는 역할

정보 클러스터링

정보 클러스터링이란 서로 가까운 정보를 묶어 덩어리(클러스터)를 만들고, 이 덩어리들을 다시 더 큰 단위로 합치는 과정

클러스터링은 시선의 흐름을 자연스럽게 유도하고, 정보를 더 쉽게 이해할 수 있도록 도움

클러스터링은 여백, 간격, 비례 등 시각적 요소의 연습 기회를 제공하며, 이로 인해 정보가 잘 읽히게 됨

시각적 흐름은 화면에서 사용자의 시선이 자연스럽게 이동하도록 만드는 것으로, 물의 흐름에 비유할 수 있음

시각적 흐름을 만들기 위해 UI 요소마다 강조와 위계를 다르게 주어야 하며, 모든 요소를 동일하게 강조하면 사용자가 어디서부터 정보를 읽어야 하는지 혼란스럽게 됨

크기를 통한 위계는 대표적인 방법으로, 큰 요소가 작은 요소보다 먼저 시선을 끌어 자연스럽게 읽는 순서를 유도

실제 UI 예시에서 동일한 정보라도 강조와 크기, 비중이 비슷하면 중요한 정보가 구분되지 않고, 사용자는 읽는 대신 단순 관찰만 하게 되어 정보 전달력이 떨어짐

사용자는 크기, 굵기, 색상 등 디자인 요소를 통해 무엇을 먼저 봐야 할지 무의식적으로 안내받아, 가장 중요한 정보에 먼저 시선이 머무름

화면에서 강조되는 요소(예: 사진 속 인물, 진한 글씨, 큰 글자 등)는 반드시 먼저 인식되고, 이를 통해 메시지 전달과 행동 유도가 효율적으로 이루어짐

시선 흐름에 가장 큰 영향을 미치는 세 요소는 타이포그래피(글자), 컬러(색상), 그리고 정렬/여백(배치)이며, 이는 타고나는 것이 아니라 연습과 경험에 의해 달라짐

타이포그래피에서는 글자의 크기, 굵기, 줄 간격의 차이를 분명하게 두어 시선의 순서를 자연스럽게 유도하고, 3~4가지의 명확한 텍스트 스타일만 구분해도 대부분의 디자인에 활용할 수 있음

컬러는 강조할 정보를 위해 포인트 컬러(예: 파란색, 빨간색, 노란색 등)를 사용하는 것이 효과적이며, 색상 대비와 밝기(쉐이드) 차이를 통해 정보의 중요도에 따른 시각적 위계를 만들 수 있음

정렬과 여백은 정보의 덩어리를 구분하고 사용자가 읽는 순서를 명확히 하며, 왼쪽 정렬이 가장 일반적이고 일정한 간격 유지가 중요합니다; 가운데 정렬은 임팩트가 필요한 경우에만 사용

타이포그래피는 디스플레이(가장 큰 제목), 타이틀(제목/단락 제목), 서브 타이틀(부제목/보조), 바디(본문), 캡션(보조 정보/설명/유의사항) 등으로 분류하며, 각 스타일별로 장단점이 다름

캡션 스타일을 따로 지정하면 필요한 영역에 일괄 적용이 가능하지만, 관리해야 할 스타일 수가 늘어나는 단점이 있음

강조할 정보에는 더 진하고 선명한 포인트 컬러나 강렬한 색(빨간색, 노란색 등)을 사용하여 정보 위계를 명확히 할 수 있음

주요한 액션 버튼에 할당된 포인트 컬러(예: 파란색)는 다른 곳에는 사용을 피해야 하며, 일반적인 경고·확인 등에는 빨간색, 노란색, 초록색 같은 지시색을 활용할 수 있음

명도와 채도를 충분히 차이나게 하여 중요한 정보와 덜 중요한 정보의 색상 위계를 명확히 하며, 예를 들어 그레이 스케일(회색조)로 덜 중요한 정보를 처리해 구분할 수 있음

데스크탑, 태블릿, 모바일 등 플랫폼이 달라질 때마다 디자이너는 사용자 환경 변화를 고려해 레이아웃을 신경 써서 조정해야 함

디자인은 항상 사용자 맥락을 고려하며, 사용자가 어떤 환경, 어떤 디바이스로 서비스를 주로 이용하는지 파악하는 것이 중요함

동일한 서비스라도 콘텐츠 배치에 따라 시선 흐름이 바뀌고, 반대로 시선 유도를 위해 배치를 달리할 수도 있음

모바일, 태블릿, 데스크탑은 각각 사용자 환경과 조작 방식이 달라, 이에 맞춘 레이아웃 전략이 필요함

데스크탑은 넓은 화면 덕분에 정보가 많거나 복잡해도 여유롭게 레이아웃을 구성할 수 있고, 상대적으로 디자인이 쉽지만, 모바일처럼 정보를 과감히 덜어내는 문제와는 거리가 있음

데스크탑은 정보량이 많고 여러 컬럼과 로우로 나뉘며, 입력과 탐색 기능이 모두 가능하지만 어떤 정보가 중요한지 강조하기 어려운 경향이 있음

태블릿은 넓은 화면, 회전, 터치, 마우스 등 다양한 입력방식을 지원해 까다롭고, 데스크탑과 모바일 요소 모두를 고려해야 하기에 디자인 우선순위에서 밀리는 경우가 많음

모바일은 화면 너비가 좁아 위아래로 정보가 배치되며, 손가락(특히 검지와 엄지)의 자연스러운 인터랙션과 수직 스크롤이 핵심이고, 따라서 단순화와 중요한 정보의 단계별 강조가 필수적

UI 디자인의 적합성, 즉 사용자의 목적 달성을 돕는지 평가할 수 있는 7가지 기준이 존재

7가지 요소는 정렬, 공간감, 정보의 밀도, 시선의 무게중심, 시각적 위계, 정보 흐름, 목적 적합성이며, 서로 겹치는 부분이 있으나 각기 다른 가치를 가짐

정렬

정렬은 UI 디자인에서 매우 중요하며, 정렬이 맞지 않으면 컴포넌트가 아무리 잘 만들어져도 화면이 혼란스러워짐

공간감

공간감(스페이싱) 은 같은 정보 그룹은 가깝게, 다른 정보 그룹은 멀리 배치하여 시각적 덩어리를 형성하는 것이 핵심

정보의 밀도

정보의 밀도란 화면에서 정보가 얼마나 빽빽하게 혹은 드문드문 배치되어 있는지를 나타내며, 지나치게 많으면 답답하고 적으면 허전하게 느껴짐

시선의 무게 중심

시선의 무게 중심은 시선의 흐름, 시각적 위계와 밀접하게 관련되며, 화면 내에서 눈에 먼저 띄는 요소가 가장 시각적으로 무겁다고 인지됨

시각적 위계

시각적 위계란 사용자가 어떤 정보를 가장 중요하게 보고, 그 다음엔 무엇을 볼지 정보의 순서를 정해주는 원칙

정보 흐름

정보 흐름이란 사용자가 시선을 통해 습득하는 정보가 자연스럽게 이어지도록 UI를 설계해야 한다는 의미

목적 적합성

목적 적합성은 사용자의 목적에 디자인이 부합하는지 평가하는 것으로, 심미성만으로는 좋은 UI라 할 수 없음

MVP

MVP(Minimum Viable Product)는 핵심 가치를 최소한의 비용으로 빠르게 검증할 수 있는 사용자 흐름을 만드는 것이 목적

MVP 디자인은 플로우 차트를 통해 사용자의 흐름을 시각화하는 것이 무엇보다 중요

플로우 차트는 제품의 전체 구조와 흐름을 도형이나 상징으로 구조화하는 도구이며, UX 리서치와 기획 문서 등 다방면에 활용할 수 있음

정보 구조도(IA)

정보 구조도(IA)는 하나의 제품을 건물에 비유했을 때 층별 안내도와 같으며, 각 페이지가 어떻게 카테고라이징되어 있고, 각각의 기능들이 설계도 형태로 소개되는 문서

정보 구조도는 트리 형식이나 엑셀 등 다양한 형태로 작성