Back_to_Basics

{3줄 요약}

UX는 전체 경험을, UI는 그 경험을 눈앞의 요소로 구현하는 영역이에요.
둘은 역할이 다르지만 함께 작동해야 사용자가 흐름과 화면을 동시에 이해해요.
이 차이를 알면 같은 문제도 경험의 문제인지 화면의 문제인지 구분하게 돼요.

"UX랑 UI가 같은 거 아닌가요?"라는 오해

현장에서 자주 듣는 질문이에요.
특히 업계 밖에서는 두 용어를 혼용하기도 해요.

하지만 UX 디자이너와 UI 디자이너가 하는 일은 달라요.
같은 프로젝트에서 두 역할이 따로 존재하기도 해요.

그런데 "UX가 더 넓은 개념이고 UI는 그 일부"라는 설명도 완전하지 않아요.
실제로는 둘이 서로 다른 질문을 다루는 영역이에요.

이 차이를 명확히 이해하면 "나는 지금 어떤 문제를 풀고 있는가"를 더 잘 구분할 수 있어요.

UX는 경험 전체를 설계해요

UX(User Experience)는 사용자가 제품·서비스를 통해 겪는 모든 경험이에요.

화면을 열기 전부터 시작해요.
"왜 이 앱을 설치했지?" "처음 실행했을 때 어떤 느낌이었지?" "원하는 걸 찾는 게 쉬웠나?" "다시 쓰고 싶다는 느낌이 드나?"

이 질문들이 UX 영역이에요.

더 구체적으로 말하면 UX는 아래 요소를 다뤄요:

사용성: 사용자가 목적을 달성할 수 있는가
정보 구조(Information Architecture): 콘텐츠가 논리적으로 구성되어 있는가
사용자 흐름(User Flow): 목표를 달성하는 경로가 자연스러운가
에러 처리: 뭔가 잘못됐을 때 사용자가 회복할 수 있는가
접근성: 다양한 사용자가 쓸 수 있는가

Don Norman이 《The Design of Everyday Things》에서 설명한 것처럼,
좋은 UX는 사용자가 시스템에 대해 갖는 정신 모델(Mental Model, 사용자가 제품이 어떻게 작동할 것이라 예상하는 내부 이미지)과 실제 시스템이 일치할 때 만들어져요.

UI는 그 경험이 눈에 보이는 방식이에요

UI(User Interface)는 사용자가 시스템과 상호작용하는 시각적 요소예요.

버튼, 아이콘, 타이포그래피, 컬러, 레이아웃, 애니메이션 - 이것들이 UI예요.

UI는 UX에서 설계한 흐름과 구조를 시각적으로 구현해요.
"사용자가 결제를 쉽게 완료할 수 있어야 한다"는 UX 요구가 있다면, 결제 버튼을 어떤 색으로, 어디에, 얼마나 크게 배치할지가 UI 결정이에요.

UI 디자인이 다루는 것:

시각적 위계(Visual Hierarchy): 무엇이 먼저 눈에 들어오는가
컴포넌트 디자인: 버튼, 폼, 카드 등의 시각적 형태
타이포그래피: 텍스트의 크기·굵기·간격
컬러 시스템: 색이 어떤 의미와 기능으로 쓰이는가
인터랙션 피드백: 행동에 대한 시각적 반응

둘이 따로 놀면 어떻게 되나요

좋은 UX, 나쁜 UI: 흐름은 논리적인데 화면이 읽기 어렵고 버튼이 눈에 안 들어요.
사용자가 "할 수는 있는데 하기 싫다"는 상태예요.
실제로 오래된 관공서 온라인 민원 서비스들이 이런 경우가 많았어요.

좋은 UI, 나쁜 UX: 화면은 예쁘고 버튼도 잘 보이는데, 사용자가 원하는 기능을 찾기 어렵거나 과정이 불필요하게 복잡해요.
멋있어 보이는 랜딩 페이지인데 실제로 회원가입이 7단계인 서비스가 여기에 해당해요.

좋은 제품은 UX와 UI가 함께 잘 작동해요.
토스가 "쓰기 편하다"고 느껴지는 건 UX(송금 흐름이 4단계 이내로 단순함)와 UI(버튼이 크고 명확하고 에러 메시지가 친절함)가 모두 잘 설계되어 있기 때문이에요.

커피숍으로 이해하기

커피숍에 비유하면: UX는 커피숍 전체 경험이에요.
들어올 때 어색하지 않은지, 주문이 쉬운지, 기다리는 동안 편한지, 커피가 만족스러웠는지.
UI는 메뉴판 디자인, 카운터 배치, 컵 디자인, 직원 유니폼이에요.

메뉴판(UI)이 예뻐도 주문 흐름(UX)이 복잡하면 손님은 불편해요.
반대로 주문은 편해도(UX) 메뉴판이 읽기 어려우면(UI) 그것도 문제예요.

UX와 UI는 따로 있는 게 아니라 함께 경험을 완성해요.

사용자는 생각하지 않는다에서 UX의 핵심 원칙을 더 깊이 다뤄요. 이 개념을 실제 사용자 흐름에 적용하는 방법은 사용자 여정에서 볼 수 있어요.

참고 문헌

Don Norman, 《The Design of Everyday Things》(2013) - UX의 개념적 기반인 멘탈 모델, 어포던스, 피드백 개념의 출처예요.

UX vs UI 차이