왜 다들 혼동할까
'UI/UX'가 하나의 단어처럼 너무 자주 언급되다 보니 대부분 이것을 하나의 직무라고 생각한다. 그렇지 않다 — 그리고 이 혼동은 무해하지 않다. 실제 문제가 'UX'인데 'UI'라고 생각하는 창업자는, 사실 결제 흐름에 있는 문제를 고치기 위해 비주얼 디자이너를 고용하고, 예산을 더 예쁜 버튼에 쓰고, 같은 비율의 사용자가 같은 단계에서 이탈하는 것을 지켜보게 된다. 해결책은 애초에 비주얼의 문제가 아니었다. 구조의 문제였다. 자신이 실제로 어떤 문제를 안고 있는지 아는 것이 돈을 쓰는 것과 낭비하는 것의 차이를 만든다.
돌려 말하지 않는 정의
UI — 사용자 인터페이스
눈으로 보고 물리적으로 조작할 수 있는 모든 것: 버튼, 색상, 타이포그래피, 아이콘, 여백, 애니메이션. UI는 표면이다 — 사람과 시스템 사이의 시각적·상호작용적 레이어. 스크린샷으로 담아낼 수 있는 장인정신이다.
UX — 사용자 경험
어떤 일을 이루기 위해 사람이 거치는 전체 여정 — 얼마나 쉬운지, 몇 단계가 필요한지, 논리적으로 말이 되는지, 그 사람이 자신감을 느끼는지 아니면 길을 잃었는지. UX는 구조적이다 — 스크린샷으로 담을 수 없고, 완료된 작업과 포기된 작업으로만 측정할 수 있다.
둘을 구분하는 8가지 방법
초점
UI
제품이 어떻게 보이고 느껴지는가 — 색상, 타이포그래피, 여백, 아이콘.
UX
사용자에게 제품이 어떻게 작동하는가 — 처음부터 끝까지의 전체 여정.
답하는 질문
UI
"이게 보기에 괜찮은가?"
UX
"이게 말이 되는가?"
결과물
UI
목업, 스타일 가이드, 컴포넌트 라이브러리, 픽셀 퍼펙트 화면.
UX
사용자 플로우, 와이어프레임, 페르소나, 여정 지도, 사용성 보고서.
사용하는 도구
UI
Figma, 색상 팔레트, 아이콘 세트, 타입 스케일.
UX
사용자 인터뷰, 여정 지도, A/B 테스트, 애널리틱스, 카드 소팅.
성공을 측정하는 방법
UI
시각적 일관성, 브랜드 정렬, 미적 매력.
UX
작업 완료율, 작업 소요 시간, 이탈률, 만족도 점수.
프로세스에 진입하는 시점
UI
나중에 — 플로우가 검증된 후, UI가 그것에 얼굴을 부여한다.
UX
먼저 — 픽셀 하나 존재하기도 전에, UX가 그 플로우가 무엇인지를 결정한다.
"좋음"의 모습
UI
클릭할 수 있어 보이는 버튼. 일관된 여백. 일관된 시각 언어.
UX
아무도 멈춰서 고민할 필요가 없어서 8단계가 아닌 3단계로 끝나는 결제 과정.
각자의 실패 방식
UI
아무도 사용법을 모르는 아름다운 인터페이스 — 스타일만 있고 지도는 없다.
UX
완벽하게 작동하지만 2004년처럼 보이는 폼 — 로직만 있고 다듬어지지 않았다.
차이를 구분할 자신 있어? 한번 해보자.
실제 제품 의사결정 6가지를 소개한다. 각각에 대해 UI를 고친 것인지 UX를 고친 것인지 판단한 다음 설명을 확인해보자. 가입도, 추적도 필요 없다. 그저 이 차이를 얼마나 잘 아는지 스스로에게 6초간 솔직해지면 된다.
결제 버튼이 보라색이 되고, 모서리가 둥글어졌으며, 호버 시 은은한 애니메이션이 추가됐다.
라이벌이 아니라 — 서로를 필요로 한다
혼란스러운 플로우를 멋진 UI로 감싸봤자 그 혼란을 더 비싸 보이게 만들 뿐이다. 훌륭한 UX가 투박하고 일관성 없는 인터페이스 아래 묻혀 있으면, 사람들은 실제로 작동하는 것을 신뢰하지 않게 된다. 실제로 전환율이 높은 사이트와 제품은 결코 둘 중 하나만이 아니다 — 무엇을, 어떤 순서로, 몇 단계로 만들지에 대한 UX의 결정이, 완성된 후 어떻게 보이고 느껴지는지에 대한 UI의 장인정신을 통해 표현되는 것이다. 둘 중 하나가 망가뜨린 것을 다른 하나가 고쳐주지는 못한다.
UX와 UI가 정말로 조화를 이루는 사이트가 필요하신가요?
상담하기 →About
Patrick Chen — Sublimearts.io를 운영하는 인디 개발자 겸 웹 디자이너. 실제 문제가 UI인 경우보다 'UI를 개선해달라'는 요청을 받는 경우가 더 많다. 보통은 플로우의 문제다. 이 글은 매번 설명하는 대신 그냥 보내주고 싶은 글이다.