UI와 UX
UI(User Interface, 사용자 인터페이스)는 사용자가 서비스를 쓸 때 눈으로 보고 손으로 만지는 화면 요소이고, UX(User Experience, 사용자 경험)는 그 서비스를 쓰는 처음부터 끝까지 사용자가 느끼는 전체 경험입니다. 많이 들어 본 말이지만 차이를 설명하라고 하면 막히기 쉬워서, 웹 프로젝트를 했다고 하면 면접에서 자주 나오는 질문입니다.
한눈에 보기
- UI는 "무엇이 보이는가", UX는 "써 보니 어떤가" 입니다.
- 비유: 식당으로 생각하면 UI는 메뉴판, 의자, 숟가락의 디자인이고, UX는 들어가서 자리에 앉고 주문하고 먹고 계산하고 나오기까지 느낀 모든 것입니다. 메뉴판이 예뻐도 주문하는 데 20분이 걸리면 UX는 나쁩니다.
- 그래서 UX는 UI를 포함하는 더 넓은 개념입니다. 좋은 UI는 좋은 UX를 만드는 중요한 재료이지만, UI만으로 UX가 완성되지는 않습니다.
┌──────────────────── UX (사용자 경험) ────────────────────┐
│ 서비스를 알게 됨 → 가입 → 원하는 기능 찾기 → 사용 → 재방문 │
│ │
│ ┌────────── UI (사용자 인터페이스) ──────────┐ │
│ │ 버튼, 색상, 글꼴, 아이콘, 레이아웃, 애니메이션 │ │
│ └──────────────────────────────────────────┘ │
│ + 속도, 오류 메시지, 고객 지원, 접근성, 흐름의 단계 수 ... │
└──────────────────────────────────────────────────────────┘UI (User Interface)
UI에 포함되는 것
사용자가 서비스를 쓸 때 직접 마주하는 디자인, 레이아웃, 기술적인 요소입니다.
| 구분 | 예 |
|---|---|
| 시각 디자인 | 글꼴, 색상, 줄 간격, 여백, 아이콘 |
| 레이아웃 | 메뉴 위치, 카드 배치, 화면 크기에 따른 재배치(반응형) |
| 인터랙션 | 버튼을 눌렀을 때의 반응, 호버 효과, 애니메이션 |
| 컴포넌트 | 버튼, 입력창, 드롭다운, 모달, 토스트 알림 |
좋은 UI의 기준
- 일관성: 같은 역할의 버튼은 어디서나 같은 색, 같은 위치, 같은 모양입니다. 그래서 디자인 시스템(색상, 간격, 컴포넌트 규칙 모음)을 만들어 씁니다. CSS 변수로 색상과 간격을 한곳에서 관리하는 것도 같은 목적입니다. (CSS 변수 참고)
- 눈에 잘 들어옴: 중요한 것은 크고 진하게, 덜 중요한 것은 작고 연하게 보여서 시선이 자연스럽게 흐릅니다.
- 피드백: 버튼을 누르면 눌렸다는 표시가, 저장하면 저장됐다는 표시가 바로 나타납니다.
- 읽기 쉬움: 글자와 배경의 명암 차이(대비)가 충분해야 합니다. 아래 코드 예제에서 직접 계산해 봅니다.
UX (User eXperience)
UX에 포함되는 것
서비스를 쓰는 사람들의 경험을 분석해서, 원하는 일을 더 쉽고 빠르고 기분 좋게 끝낼 수 있도록 흐름을 설계하는 일입니다.
| 구분 | 예 |
|---|---|
| 흐름(Flow) | 회원가입이 몇 단계인지, 결제까지 몇 번 눌러야 하는지 |
| 속도 | 페이지가 뜨기까지 걸리는 시간, 버튼을 누른 뒤 반응 시간 |
| 오류 대응 | 잘못 입력했을 때 무엇이 왜 틀렸는지 알려 주는지 |
| 접근성 | 키보드만으로, 화면 낭독기로도 쓸 수 있는지 |
| 맥락 | 이동 중 한 손으로 쓰는지, 책상에서 큰 화면으로 쓰는지 |
UX는 데이터로 개선한다
UX는 감으로 정하지 않고, 사용자 데이터와 관찰을 근거로 계속 바꿔 나갑니다.
| 방법 | 설명 |
|---|---|
| 사용자 인터뷰, 설문 | 사용자가 무엇을 불편해하는지 직접 듣기 |
| 사용성 테스트 | 실제 사용자에게 과제를 주고 어디서 막히는지 관찰 |
| 행동 데이터 분석 | 어느 단계에서 이탈이 많은지(퍼널), 어디를 많이 누르는지(히트맵) 확인 |
| A/B 테스트 | 두 가지 안을 사용자 일부에게 나눠 보여 주고 결과가 좋은 쪽을 선택 |
UX 벌집: 좋은 경험의 7가지 조건
정보 설계 전문가 피터 모빌(Peter Morville)은 좋은 사용자 경험의 조건을 벌집 모양으로 정리했습니다. 가운데의 가치 있음(Valuable)을 나머지 여섯 가지가 둘러싸고 있습니다.
그림 출처: Wikimedia Commons (CC0)
| 조건 | 뜻 |
|---|---|
| Useful (유용함) | 실제로 필요한 문제를 해결해 주는가 |
| Usable (쓰기 쉬움) | 헤매지 않고 원하는 일을 끝낼 수 있는가 |
| Desirable (매력적임) | 디자인과 브랜드가 다시 쓰고 싶게 만드는가 |
| Findable (찾기 쉬움) | 필요한 메뉴와 정보를 금방 찾을 수 있는가 |
| Accessible (접근성) | 장애가 있는 사람도 쓸 수 있는가 |
| Credible (믿을 수 있음) | 내용과 서비스를 신뢰할 수 있는가 |
| Valuable (가치 있음) | 사용자와 서비스 운영자 모두에게 가치를 주는가 |
UX 설계 원칙 몇 가지
- 사용자가 기억하지 않아도 되게: 이전에 고른 설정을 저장해 두고, 다음에 다시 묻지 않습니다.
- 실수를 막고, 실수해도 되돌릴 수 있게: 삭제 전에 확인을 받거나 "실행 취소" 버튼을 줍니다.
- 익숙한 방식을 따르게: 로고를 누르면 홈으로 가고, 돋보기 아이콘은 검색이라는 약속을 깨지 않습니다.
- 기다림을 알려 주게: 로딩이 길어지면 로딩 표시나 진행률을 보여 줍니다. 무엇이 일어나는지 모르는 기다림이 가장 길게 느껴집니다.
UI와 UX 비교
| 구분 | UI | UX |
|---|---|---|
| 질문 | 어떻게 보이고 어떻게 조작하나 | 쓰면서 무엇을 느끼고, 목적을 쉽게 이루나 |
| 범위 | 화면 요소 | 서비스 이용의 전 과정 (화면 밖 경험 포함) |
| 결과물 | 디자인 시안, 컴포넌트, 스타일 가이드 | 사용자 조사 결과, 사용자 흐름도, 와이어프레임, 프로토타입 |
| 평가 방법 | 일관성, 가독성, 시각적 완성도 | 과제 성공률, 걸린 시간, 이탈률, 만족도 |
| 관계 | UX를 이루는 중요한 한 부분 | UI를 포함하는 더 넓은 개념 |
원래 많이 쓰이던 "UI는 포장, UX는 내용물"이라는 비유는 둘이 따로 떨어져 있다는 오해를 주기 쉽습니다. UX는 포장을 뜯고, 꺼내 쓰고, 다 쓴 뒤 버리기까지의 경험 전체이고 포장(UI)도 그 경험에 들어갑니다.
이 사이트와 포트폴리오에서 보는 UX 사례
직접 만든 기능을 UI와 UX 관점으로 나눠 보면 이해가 쉽습니다.
| 기능 | UI 관점 | UX 관점 |
|---|---|---|
| 반응형 레이아웃과 햄버거 메뉴 | 768px 이하에서 메뉴가 버튼 안으로 들어가는 배치 | 휴대폰에서도 메뉴를 한 손으로 열 수 있고, 링크를 누르면 메뉴가 저절로 닫혀 한 번 더 누를 필요가 없음. aria-expanded로 화면 낭독기 사용자도 열림 상태를 알 수 있음 |
| 다크 모드 | 어두운 배경과 밝은 글자 색 조합 | 처음 방문하면 OS 설정을 따르고, 한 번 바꾸면 localStorage에 저장해 다시 방문해도 유지됨. 사용자가 같은 선택을 반복하지 않게 함 |
| 폼 유효성 검사 | 틀린 칸 아래 빨간 에러 문구 | 제출 전에 무엇이 틀렸는지 칸별로 알려 줘서 다시 처음부터 쓰지 않게 함. 입력 중 실시간 검사가 더해지면 UX가 더 좋아짐 |
코드로 감 잡기: 글자가 잘 읽히는지 숫자로 확인하기
"읽기 쉬운 UI"는 느낌이 아니라 숫자로도 확인할 수 있습니다. 웹 접근성 기준(WCAG)은 일반 본문 글자와 배경의 명암 대비가 4.5:1 이상이어야 한다고 정합니다(AA 등급). 다크 모드 글에 나온 실제 색상과, 흔히 쓰는 연한 회색 글자를 계산해 봅니다.
def luminance(hex_color):
rgb = [int(hex_color[i:i + 2], 16) / 255 for i in (1, 3, 5)]
lin = [c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4 for c in rgb]
return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]
def contrast(fg, bg):
hi, lo = sorted([luminance(fg), luminance(bg)], reverse=True)
return (hi + 0.05) / (lo + 0.05)
pairs = [
("라이트 모드 본문", "#182230", "#f8fafc"),
("다크 모드 본문", "#f8fafc", "#0f172a"),
("연한 회색 글자", "#aaaaaa", "#ffffff"),
]
for name, fg, bg in pairs:
r = contrast(fg, bg)
print(f"{name:10} {fg} on {bg} -> {r:5.2f}:1 {'통과' if r >= 4.5 else '미달'} (AA 기준 4.5:1)")실행 결과:
라이트 모드 본문 #182230 on #f8fafc -> 15.32:1 통과 (AA 기준 4.5:1)
다크 모드 본문 #f8fafc on #0f172a -> 17.06:1 통과 (AA 기준 4.5:1)
연한 회색 글자 #aaaaaa on #ffffff -> 2.32:1 미달 (AA 기준 4.5:1)luminance()는 색이 사람 눈에 얼마나 밝게 보이는지(상대 휘도)를 계산합니다. 사람 눈은 초록에 가장 민감해서 초록 값에 가장 큰 가중치(0.7152)를 줍니다.- 포트폴리오의 라이트/다크 모드 본문 색은 둘 다 기준을 넉넉히 통과합니다.
- 흰 배경에
#aaaaaa같은 연한 회색 글자는 세련돼 보여도 2.32:1로 기준에 크게 못 미칩니다. 보기 좋은 UI가 항상 좋은 UX는 아니라는 예입니다. 개발자 도구의 색상 선택기에서도 이 대비 값을 바로 확인할 수 있습니다.
면접에서 자주 나오는 질문
Q. UI와 UX의 차이를 설명해 주세요. UI는 버튼, 색상, 레이아웃처럼 사용자가 서비스와 만나는 화면 요소이고, UX는 서비스를 이용하는 전 과정에서 사용자가 느끼는 경험입니다. UX가 더 넓은 개념이고 UI는 UX를 이루는 중요한 한 부분입니다.
Q. UI는 좋은데 UX가 나쁜 예를 들어 주세요. 디자인은 깔끔하지만 회원가입에 입력 칸이 20개이고, 제출 후에야 오류를 한꺼번에 알려 주며, 오류가 나면 입력한 내용이 모두 지워지는 가입 화면이 있습니다. 보기에는 좋아도 사용자는 중간에 포기합니다.
Q. 개발자가 UX를 위해 할 수 있는 일은 무엇인가요? 로딩 속도 개선, 로딩과 오류 상태를 분명하게 보여 주기, 입력 중 실시간 검사, 사용자 설정 저장, 키보드 조작과 aria-* 속성 같은 접근성 처리가 있습니다. 디자이너가 그린 화면을 "빈 데이터일 때, 실패했을 때, 느릴 때"까지 고려해서 구현하는 것이 개발자의 UX 기여입니다.
Q. UX가 좋아졌는지는 어떻게 알 수 있나요? 과제 성공률, 걸린 시간, 이탈률, 전환율 같은 지표를 바꾸기 전과 후로 비교하거나 A/B 테스트로 확인합니다. 사용자 인터뷰와 사용성 테스트로 숫자에 드러나지 않는 불편도 함께 봅니다.
정리
- UI: 사용자가 보고 조작하는 화면 요소 (글꼴, 색상, 레이아웃, 버튼, 애니메이션)
- UX: 서비스를 쓰는 처음부터 끝까지의 경험 (흐름, 속도, 오류 대응, 접근성)
- UX는 UI를 포함하는 더 넓은 개념이고, 데이터와 사용자 관찰을 근거로 계속 개선합니다.
- 보기 좋은 UI가 곧 좋은 UX는 아닙니다. 명암 대비처럼 숫자로 확인할 수 있는 기준도 함께 챙깁니다.