UI_UX Design/UI Design 개론

Ch01_2.UX의 이해

jsBae 2024. 10. 17. 10:07
UX Design 개념을 이해한다

1.UX의 개념

•UX(User eXperience, 사용자 경험):
사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험
단순히 기능이나 절차상의 만족 뿐만 아니라 지각 가능한 모든 면에서 참여, 사용, 관찰하고 상호 교감을 통해 알 수 있는 가치 있는 경험

UX는 편리한 것보단 익숙함을 따른다.
UX는 발명이 아닌 발견이다.
UX는 제품이 아닌 가치를 제공한다.

UX의 중심 : 소비자가 아닌 사용자

 

UX 디자인의 핵심은 제품을 구매하는 소비자가 아니라 실제로 사용하는 사용자를 중심에 두는 것이다. 유모차 사례를 보면, 아기 중심 디자인은 아기의 편안함과 안전을 강조하지만 부모의 편의성이 부족할 수 있고, 부모 중심 디자인은 이동과 휴대성에 유리하나 아기의 경험이 희생될 수 있다. 이에 비해 아기와 부모 모두를 고려한 디자인은 아기의 안락함과 부모의 편의성을 동시에 충족시켜 균형 잡힌 사용자 경험을 제공한다. 이는 UX가 단순히 소비자의 선택이 아니라 사용자의 실제 경험에 뿌리를 두어야 함을 잘 보여준다.

UX 디자인의 목표는 멋진 디자인을 만드는 것이 아니라 탁월한 UX를 제공하는 것이다. 탁월한 UX란 사용자에게 즐거움을 전달하는 UX를 말하며, 탁월한 UX를 제공하려면 사용자를 깊게 이해하고 있어야 한다. 그러므로 비즈니스 목표가 설정되면 사용자에서 출발해야 한다.

사용자 경험의 여정(UX Journey) - 기대, 경험, 반성

  • User eXpect (기대): 사용자가 제품이나 서비스를 접하기 전, 갖게 되는 기대와 요구.
  • User eXperience (경험): 실제 사용 과정에서 느끼는 감각적·판단적 경험.
  • User eXcuse (반성/변명): 서비스 제공자가 사용자 불만이나 문제 상황을 접하고 개선을 고민하는 단계.

사용자 경험은 단순히 한 순간의 느낌이 아니라, 시간의 흐름에 따라 기대, 경험, 반성의 세 단계로 이어지는 여정이다. 먼저 User eXpect(기대) 단계에서는 사용자가 제품이나 서비스를 접하기 전에 갖게 되는 기대와 요구가 형성된다. 이어지는 User eXperience(경험) 단계에서는 실제 사용 과정에서 감각적, 판단적 경험이 축적되며, 사용자는 서비스의 편리함, 불편함, 만족감 등을 직접 체험하게 된다. 마지막으로 User eXcuse(반성/변명) 단계에서는 서비스 제공자가 사용자의 불만이나 문제 상황을 인식하고 이를 개선하기 위한 반성과 수정 과정을 거친다. 이처럼 사용자 경험은 시간적으로 흐르며 순환하는 과정으로, 같은 상황이라도 개인마다 경험은 다르게 나타난다. 결국 UX 설계의 핵심은 이러한 기대–경험–반성의 흐름을 이해하고, 사용자 중심에서 개선점을 탐색하는 데 있다.

경험의 3가지 차원

사용자 경험은 단순히 하나의 차원으로 설명되지 않고, 감각적 경험, 판단적 경험, 구성적 경험으로 나누어 이해할 수 있다.

  1. 감각적 경험
    • 사용자가 제품이나 서비스를 접하면서 시각, 청각, 촉각 등 감각을 통해 즉각적으로 느끼는 경험이다.
    • 예: 앱을 열었을 때의 색감과 소리, 버튼을 눌렀을 때의 촉감, 화면 전환의 부드러움.
    • 이는 제품에 대한 첫인상을 좌우하며, 사용자의 ‘호감’이나 ‘거부감’을 빠르게 결정짓는다.
  2. 판단적 경험
    • 사용자가 감각적 자극 이후에 합리적 사고와 비교를 통해 내리는 평가적 경험이다.
    • 예: “이 앱은 다른 앱보다 빠르네”, “가격 대비 기능이 괜찮네”와 같은 판단.
    • 감각적 경험이 직관적이라면, 판단적 경험은 비교와 분석을 통한 인지적 평가라고 할 수 있다.
  3. 구성적 경험
    • 사용자가 개별 경험을 종합하여 전체적인 의미와 가치를 스스로 구성하는 경험이다.
    • 예: “이 서비스는 나의 라이프스타일에 꼭 맞는다”, “이 브랜드는 나에게 신뢰감을 준다.”
    • 이는 단순한 사용을 넘어, 브랜드 충성도나 장기적 만족으로 이어진다.

감각적 경험은 즉각적 인상, 판단적 경험은 이성적 평가, 구성적 경험은 장기적 의미 형성으로 구분된다. 좋은 UX 디자인은 이 세 가지 경험이 유기적으로 연결되도록 설계해야 한다.

사용자 경험 발생 요인과 UX의 핵심

사용자 경험은 우연히 만들어지는 것이 아니라, 내적 욕구(Needs)를 중심으로 여러 요인들이 결합하여 발생한다.

먼저 배경(Context)은 시간, 장소, 상황과 같은 구체적인 맥락을 제공하며, 사용자가 어떤 환경 속에서 경험을 하게 되는지를 규정한다. 이어서 요인(Motivation)은 사용자가 행동하도록 유도하는 동기로, 색상, 폰트, 이미지, 할인 정책 등 시각적·심리적 자극이 포함된다. 이러한 배경과 동기를 바탕으로 사용자는 실제로 행동(Behavior)을 하게 되는데, 예를 들어 상품을 장바구니에 담거나 버튼을 누르는 등의 인터랙션이 대표적이다. 마지막으로 이 과정은 정서적 태도(Attitude)를 형성하며, 사용자는 편리함이나 불편함, 만족감이나 거부감 같은 감정적 반응을 경험한다. 결국 좋은 UX를 설계하기 위해서는 사용자의 니즈를 정확히 파악하는 것이 핵심이며, 이는 모든 UX 디자인의 출발점이자 기본 조건이라 할 수 있다.

  • 발생한 시간이나 장소 같은 구체적인 배경Con­text이 필요하다.
    모바일 앱에서는 배너를 클릭하고 접속한 이벤트 페이지가 될 수 있고, 커피숍이라면 점심시간이 다 끝나가는 오후 1시쯤 주문하는 카운터 앞일 수 있다.
  • 배경은 어떠한 행동을 일으키는 요인Mo­ti­va­tion을 만든다.
    버튼을 클릭하게끔 시선을 끄는 색상, 폰트, 이미지 혹은 다양한 할인 정책 등이 여기에 해당한다.
  • 이는 사용자가 실제로 서비스 혹은 제품과 인터랙션하는 특정한 행동 방식Be­ha­vior을 만든다.
    행동 방식에는 물건을 집는 행위나 버튼을 누르는 행위 등이 포함된다.
  • 이러한 행동 방식은 사용자의 정서적 반응Atti­tude을 형성하는데, 편리하다거나 부드럽다와 같은 다양한 감정, 혹은 적대심이나 우호성 같은 태도적인 측면이 여기에 해당한다. 그리고 이 모든 배경의 중심에는 사용자가 필요로 하는 내적 욕구Need­s가 존재한다. 
사용자 경험UX은 사용자의 내적 욕구, 즉 니즈가 없이는 발생하지 않기 때문이다.

"CTA 버튼"이라는 용어는 "Call to Action" 버튼의 약자입니다. 이러한 버튼은 웹사이트, 앱, 광고 등에서 사용자에게 특정 행동을 촉구하기 위해 설계되었습니다. 예를 들어, "지금 구매하기", "자세히 알아보기", "무료로 시작하기" 등의 문구가 이러한 CTA 버튼에 자주 사용됩니다.

CTA 버튼의 목적은 사용자가 원하는 정보나 서비스에 더 쉽게 접근할 수 있도록 도와주는 것이며, 동시에 사이트나 앱의 목표를 달성하기 위해 사용자를 이끄는 역할을 합니다. 디자인, 색상, 크기, 위치 등 여러 요소가 CTA 버튼의 효과에 영향을 미칠 수 있으므로, 이러한 요소들은 신중하게 고려되어야 합니다.

2.UX 디자인 이란?

•넓은 의미의 UX 디자인(User eXperience Design):
- 사용자 경험을 바탕으로 긍정적인 요소를 반영해 디자인, 설계, 구성하는 일을 말한다.
- 다양한 전문가의 의견을 종합하면, UX 디자인은 유용하고 사용하기 쉬우며 상호작용하기에 즐거운 제품을 디지털 또는 물리적으로 설계하는 프로세스로, 사용자가 제품과 상호작용하면서 경험을 향상시키고 가치를 찾을 수 있도록 하는 것이다.

•좁은 의미의 UX 디자인:

  • 서비스 자체를 시각화 시키고 제작하는 과정
  • 사용자가 가지고 있는 문제를 해결하는 방법 제시

UX 디자이너는 화려한 그래픽을 만드는 사람이 아니라, 탐정처럼 사용자의 경험을 분석하고 문제를 해결하는 사람이다. 이를 위해 다섯 가지 핵심 요소를 고려해야 한다.

  1. 심리(무의식)
    사용자가 서비스를 이용하면서 기분이 어떻게 형성되는지, 또 어떤 습관이 만들어지는지를 살펴야 한다. 이는 무의식적 경험이므로 미묘하지만 강력하게 UX에 영향을 준다.
  2. 사용성(의식)
    프로세스를 더 간소화할 수 있는가, 쉽고 명료한가를 따져야 한다. 사용자는 최소한의 노력으로 원하는 목표를 달성하고 싶어 하기 때문이다.
  3. 디자인(과정)
    시각적 일관성과 사용자 관점에서의 선호도를 고려하면서, 목적과 기능을 정확히 드러낼 수 있어야 한다. 단순히 예쁜 것이 아니라 과정 전체를 설계하는 디자인이다.
  4. UX 라이팅(텍스트)
    버튼이나 안내 문구 같은 텍스트는 사용자가 목표를 달성할 수 있도록 돕는 ‘언어적 인터페이스’이다. 따라서 가장 크게 보이는 텍스트가 정말 중요한 내용인지, 동기를 부여할 수 있는지 점검해야 한다.
  5. 분석(객관성)
    사용자가 왜 특정 행동을 했는지를 객관적 근거로 파악해야 한다. 성공뿐 아니라 실패 사례도 분석해야 향후 개선 방향을 찾을 수 있다.

UI/UX 디자인 영역

  • Information Architecture
  • 이용흐름
  • 인터랙션,
  • ui,
  • GUI

UX 디자인(User Experience Design) 영역

 

UX 디자인은 단순히 화면을 예쁘게 꾸미는 것이 아니라, 사용자가 어떤 서비스를 접하고 경험하는 전체 여정을 다룬다. 이는 사용자가 처음 그 존재를 듣는 순간부터 시작된다. 이후 사용자가 서비스를 이해하고, 실제로 사용하며, 필요할 때는 질문을 하고, 시간이 지나면 결국 잊게 되는 과정까지 이어진다.

이 중에서 UI 디자인은 주로 사용자가 직접 제품이나 서비스를 다루는 ‘사용한다’ 단계에 집중되지만, UX 디자인은 훨씬 넓은 범위를 포괄한다. 다시 말해, UX는 사용자가 서비스를 알게 되었을 때부터 잊을 때까지의 전 과정을 포함하며, 이러한 모든 순간이 사용자 경험을 형성하는 핵심적인 요소가 된다. 따라서 UX 디자이너는 사용자와의 접점을 넘어, 경험의 시작과 끝까지 고려하는 폭넓은 시각을 가져야 한다.

UX 디자인(User Experience Design)은 사용자가 제품, 서비스 또는 시스템을 사용하면서 느끼는 전반적인 경험을 디자인하는 과정입니다. 

  1. 사용자의 니즈를 듣기 (Listen to User Needs):
    • UX 디자인의 첫 번째 단계는 사용자의 니즈와 요구사항을 듣고 이해하는 것입니다. 이를 위해 사용자 조사, 인터뷰, 설문 조사, 사용자 테스트 등 다양한 연구 방법을 사용하여 사용자의 의견과 요구사항을 수집하고 분석합니다.
  2. 사용자의 니즈를 이해하기 (Understand User Needs):
    • 수집된 정보를 분석하고, 사용자의 니즈와 동작 패턴을 이해합니다. 사용자의 목표, 욕구, 고려 사항, 행동 패턴 등을 파악하여 제품 또는 서비스를 사용하는 사용자의 관점을 이해합니다.
  3. 사용자 경험을 디자인하고 사용하기 (Design and Use the User Experience):
    • 이해한 사용자의 니즈와 요구사항을 기반으로 제품 또는 서비스의 디자인을 시작합니다. 이 단계에서는 정보 아키텍처, 사용자 인터페이스 디자인, 워크플로우 및 기능 개발 등을 포함하여 사용자 경험을 디자인합니다. 이 디자인은 사용자의 요구 사항을 충족하고 직관적이며 효율적인 경험을 제공해야 합니다.
  4. 사용자에게 질문하기 (Ask the User):
    • 제품 또는 서비스를 개발하고 완성한 후에도 사용자와 지속적으로 소통하고 피드백을 받아야 합니다. 사용자 피드백은 제품 또는 서비스의 개선과 변경에 중요한 역할을 합니다. 사용자에게 질문하고, 사용자 피드백을 수집하여 제품 또는 서비스를 지속적으로 개선합니다.
  5. 잊기 (Forget):
    • 마지막으로, 사용자 경험이 종료되고 사용자가 제품 또는 서비스를 떠날 때까지의 전반적인 과정을 관찰하고 이해합니다. 사용자가 제품 또는 서비스를 떠나고 나면 그 경험을 평가하고 기억합니다. 이 평가와 기억은 미래의 개선을 위한 중요한 데이터와 통찰력을 제공합니다.

UX 디자이너가 갖춰야 하는 소양

§네이버(Naver)

–– 서비스 지표, 사용자 리서치 계획, 수행, VOC 분석을 통한 인사이트 도출 가능

–– 사용자 리서치의 양적, 질적 방법론 이해와 적용 경험

–– UX에 최적화된 유저 플로우User-Flow 정의 및 UX 프로토타이핑 가능

§카카오(Kakao)

–– 키노트, 스케치, 프로토파이 등 UI, 프로토타입으로 표현 가능한 툴 사용 가능

–– 모바일 서비스 UI 디자인 경험

–– 개발자와의 원활한 협업

–– 니즈와 목적에 맞는 결과물을 빠르게 도출 가능

§구글(Google)

–– 디자인, 인간-컴퓨터 상호작용, 컴퓨터 과학 또는 관련 분야의 석사 학위

–– 웹 기반 인터페이스 설계 가능

–– HTML, CSS, JavaScript, Android Studio 등과 같은 웹 또는 모바일 기반 기술

–– 시각적 디자인에 대한 이해

–– 리더십과 협업 기술

§애플(Apple)

–– 컴퓨터 과학, 정보 과학, 상거래, 인간-컴퓨터 상호작용 또는 관련 분야의 교육 배경

–– UX 디자인, 정보 아키텍처 관련 분야 8년 이상 경험

–– 대규모 마케팅 사이트, 상거래 사이트에 이르는 콘텐츠 전략 및 플랫폼 디자인 경험

–– 웹 및 앱 사용자 환경 디자인 가능

–– 현재의 웹 및 앱 개발 기술에 익숙

–– 분석, 유용성 테스트 및 기타 형태의 질적·양적 피드백에 능통

–– 뛰어난 디자인 감성

 

User Experience Design – Montparnas

User Experience

•댄 섀퍼가 분류한 UX 디자인 분야

§CX(CustomerExperience,고객경험)란?

•기타 디지털 상호작용에 있어 전체적인 경험을 설명하기 위해 제안된 UX와 달리, CX는 더 넓은 의미의 총체적 경험을 설명하기 위해 사용

§BX(BrandExperience,브랜드경험)란?

기업이 특정 제품이나 회사 이름에 대해 고객이 느끼는 감정에 영향을 주기 위해 만든 종합적이고 체험적인 마케팅의 일종

디자이너가 알아두면 좋은 심리법칙

• 제이콥의 법칙(Jacob’s Law)

✓ 사용자가 다른 서비스를 경험하며 누적된 UX를 바탕으로 새로운 서비스도 이해하 려는 특성

✓사용자에게 예측 가능한 경험을 제공해야 한다. (로그인의 방식이 급변하면 방문하지 않음)

 

• 피츠의 법칙(Fitts’s Law)

✓무엇을 획득하는 데 드는 시간은 대상의 크기와 위치한 거리에 따라 달라지는데, 대상이 작을수록 시간이 더 많이 걸린다는 것이다.

✓CTA 버튼은 가까운 곳에 ( Thumb Zone 안에)

• 힉의 법칙(Hick’s Law)

✓사용자가 대상과 인터랙션할 때 주어진 선택지가 많을수록 의사결정 시간이 길어진다는 원리를 설명한다.

✓좋은 사용자 경험을 설계하기 위해서는 선택지(메뉴)를 최소화하는 것이 중요

✓ 예를 들어, 모바일 앱 첫 화면에 수십 개의 버튼을 배치하는 것보다, 자주 쓰이는 기능 몇 가지만 눈에 띄게 배치하는 편이 훨씬 빠르고 긍정적인 사용자 경험을 제공한다.

• 밀러의 법칙(Miller’s Law)

- 밀러의 법칙은 인간이 한 번에 처리하고 기억할 수 있는 정보의 양, 즉 기억 범위(Memory Span)가 평균적으로 약 7개(±2) 정도라는 심리학 원리를 설명한다. 예를 들어, 전화번호가 11자리임에도 사람들이 외울 수 있는 이유는 이를 3자리–4자리–4자리처럼 그룹으로 나누어 기억하기 때문이다. UX 설계에서도 이 법칙은 매우 중요하다. 메뉴 항목이나 버튼이 한 화면에 너무 많이 나열되면 사용자는 금세 혼란을 느끼게 된다. 따라서 정보를 묶음(Chunking)으로 그룹화하고, 시각적으로 구분해 제시하면 사용자가 훨씬 쉽게 이해하고 기억할 수 있다. 결국 밀러의 법칙은 정보를 단순화하고 그룹화하는 것이 곧 사용성 향상의 핵심 전략임을 보여준다. 

- 대부분 7개 정도 , 그룹핑이 중요

• 폰 레스토프 효과(Von Restorff Effect)- 고립 효과Isolation Effect

✓여러 개의 사물 가운데 모양이나 특성이 다른 사물 하나를 가장 쉽게 기억할 가능성 이 크다는 개념

✓CTA 버튼이나 회원가입 버튼같이 가장 중요한 요소에 자주 사용하는 개념

 

• 자이가르닉 효과(Zeigarnik Effect)

✓미완성 효과라고도 부르는데, 이는 완료되지 않았거나 중단된 상황을 완료된 상황 보다 더 오랫동안 기억한다는 것(드라마 마지막 부분)

✓진행 표시줄을 사용해 작업이 완료되지 않은 부분을 시각적으로 표시 완료되지 않은 상황은 시각적으로 구별해 즉각적으로 기억할 수 있게 한다

 

• 서열 위치 효과(Serial-Position Effect)

✓사람은 특정 서열 안의 중간 항목은 잘 기억하지 못하고, 처음과 마지막 항목을 가장 잘 기억한다는 개념

✓최초의 것을 잘 기억하는 경향을 초두 효과Primacy Effect

✓마지막 것을 잘 기억하는 경향을 최신 효과Recency Effect

✓인터페이스 설계 시 헤드라인이나 히어로 배너 제작에 심혈

 

• 심미적 사용성 효과(Aesthetic-Usability Effect)

✓사용자는 대상이 미적으로 뛰어난 경우 그것의 실체와는 관계없이 사용하기 편하고 간단할 것이라고 생각하는 개념

✓시각적 매력이 높은 인터페이스가 높은 사용성으로 연결되는 심리적 패턴이 포착

 

• 게슈탈트 원리 (Gestalt Principles)

  • 게슈탈트 원리는 인간의 뇌가 개별 요소를 따로 인식하기보다는, 서로 관련된 요소들을 그룹화하고 전체적인 패턴으로 인식하려는 경향을 설명한다. 다시 말해 사람은 부분보다 전체를 먼저 이해하려는 특성이 있으며, 이를 UX/UI 설계에 적용하면 정보의 처리 효율을 높일 수 있다.
  • 디자인에서 게슈탈트 원리를 활용하려면 관련된 요소는 가까이 배치하고, 일관된 시각적 패턴을 적용하여 사용자가 자연스럽게 연관성을 파악할 수 있도록 해야 한다. 예를 들어, 버튼과 그에 해당하는 설명 텍스트를 시각적으로 가깝게 두거나, 같은 색상·모양을 반복 사용하여 일관성을 부여하면 사용자는 별도의 학습 없이도 쉽게 이해할 수 있다.
  • 실제 사례로 구글 플레이 스토어의 앱 목록을 보면, 앱 아이콘과 이름, 그리고 카테고리가 논리적으로 연결되어 그룹화되어 있다. 덕분에 사용자는 수많은 앱 중에서도 원하는 정보를 빠르게 찾을 수 있다.

 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)