UI UX 차이를 검색해 보면 두 낱말이 항상 붙어 다니지만 가리키는 것은 서로 다르다. UI는 사용자 인터페이스의 줄임말로 화면에 실제로 보이고 손으로 만지는 요소, 즉 버튼과 글자, 색과 배치를 가리킨다. UX는 사용자 경험의 줄임말로 그 화면을 쓰는 사람이 처음 들어와 원하는 일을 마치고 나가기까지 겪는 흐름 전체를 가리킨다. 이 기사는 두 말이 왜 다르고, 실무에서 왜 자주 헷갈리는지, 그리고 어떤 순서로 이해하면 되는지를 처음부터 끝까지 정리한다.
구조로 나눠 보면 어떻게 다른가
건물에 비유하면 UI는 벽지와 문손잡이, 조명 스위치의 모양처럼 눈에 보이고 손에 닿는 마감이다. UX는 그 건물에 들어와 원하는 방을 찾고 나가는 동선 전체, 즉 설계 단계에서부터 고려하는 흐름이다. 홈페이지나 앱을 만들 때도 마찬가지여서, UI는 버튼의 모양과 색, 글자 크기 같은 화면 요소를 다루고 UX는 회원가입부터 결제까지 몇 단계를 거치는지, 중간에 헷갈리는 지점은 없는지를 다룬다. 그래서 같은 화면이라도 UI만 예쁘고 UX는 불편한 경우가 있고, 반대로 화면은 수수해도 흐름이 편해서 UX가 좋은 경우도 있다.
왜 이렇게 나눠서 부르게 되었나
화면을 만드는 일이 커지면서 보이는 것을 다듬는 일과 흐름을 설계하는 일이 서로 다른 전문성을 요구하게 되었다. 색과 글자, 아이콘을 다루는 감각과 사람이 어디서 멈추고 어디서 이탈하는지를 분석하는 감각은 훈련되는 방향이 다르다. 그래서 채용 공고나 외주 스펙에서 두 역할을 나누어 적는 경우가 늘었고, 자연히 두 낱말도 따로 굳어졌다. 다만 작은 조직에서는 한 사람이 두 역할을 함께 맡는 경우도 많아서, 명함에 적힌 직함만으로 그 사람이 어떤 일을 하는지 단정하기는 어렵다.
실제로는 어디서 혼동이 생기나
외주 스펙이나 채용 공고를 읽다 보면 ui ux 디자인이라는 말이 한 덩어리처럼 붙어 있어서 마치 한 가지 작업처럼 보이기 쉽다. 그러나 결과물을 받아 보면 화면 시안만 나오고 사용 흐름에 대한 설계는 빠져 있는 경우도 있고, 반대로 흐름표는 자세한데 정작 화면 디자인이 부실한 경우도 있다. 이런 어긋남은 발주자가 원하는 것과 작업자가 이해한 범위가 서로 다를 때 생긴다. 그래서 계약이나 업무 범위를 정할 때 화면 디자인을 말하는 것인지, 사용 흐름과 구조를 말하는 것인지를 먼저 구분해서 물어보는 것이 도움이 된다.
경우를 나눠서 보면 답이 달라진다
이미 사용 흐름이 잘 짜여 있는 서비스를 새 단장하는 경우라면 UI 쪽 손질만으로도 충분할 수 있다. 반대로 화면은 깔끔한데 사람들이 원하는 기능을 찾지 못해 헤맨다면 UX 쪽, 즉 메뉴 구조나 진행 단계를 다시 짜야 한다. 신규 서비스를 처음부터 만드는 경우에는 두 가지를 같이 고려해야 하는데, 흐름이 먼저 정해져야 그 위에 화면을 앉힐 수 있기 때문이다. 그래서 순서로 보면 흐름과 구조를 먼저 정하고 그 다음에 화면 요소를 다듬는 편이 일반적이다.
ai 도구가 등장하며 달라진 점
최근 화면 시안을 빠르게 만들어 주는 여러 도구가 등장하면서 UI 쪽 작업의 속도는 눈에 띄게 빨라졌다. 다만 이런 도구들은 주어진 지시를 바탕으로 그럴듯한 화면을 빠르게 뽑아 주는 데 강점이 있을 뿐, 실제 사용자가 어디서 멈추고 어디서 이탈하는지를 관찰하고 흐름을 고치는 UX 쪽 판단까지 대신해 주지는 않는다. 그래서 도구를 쓰더라도 사용 흐름을 검토하고 다듬는 사람의 역할은 그대로 남는다. 도구 이름이나 특정 서비스 이름을 나열하기보다, 화면을 빠르게 만드는 도구와 흐름을 판단하는 사람의 역할이 따로 있다는 정도로 이해해 두면 충분하다.
흔한 오해 바로잡기
UI가 예쁘면 UX도 좋을 것이라고 생각하기 쉽지만 실제로는 그렇지 않은 경우가 많다. 화면은 화려한데 정작 원하는 기능을 찾는 데 여러 단계를 거쳐야 한다면 UX는 떨어지는 것이다. 또 하나는 UX를 디자인의 일부로만 여기는 오해인데, 실제로는 정보를 어떻게 나열할지, 어떤 순서로 안내할지를 정하는 기획에 가까운 작업이다. 그래서 UX를 잘 하는 사람이 반드시 그림을 잘 그리는 사람일 필요는 없다.
무엇을 먼저 확인해야 하나
외주나 채용 공고에서 ui ux라는 말을 만났다면 먼저 그 작업이 화면을 다듬는 일인지, 사용 흐름을 설계하는 일인지, 아니면 둘 다인지를 분명히 물어보는 것이 순서다. 결과물을 받을 때도 화면 시안 파일만 확인하지 말고 사용자가 첫 화면부터 목표 지점까지 어떻게 이동하는지 보여주는 흐름도가 함께 있는지 살펴보는 것이 좋다. 이렇게 확인 순서를 정해 두면 계약 범위를 둘러싼 오해를 줄일 수 있다.
| 구분 | 다루는 것 |
|---|---|
| UI | 화면에 보이는 버튼, 색, 글자, 배치 등 시각 요소 |
| UX | 사용자가 목표를 이루기까지 거치는 전체 흐름과 구조 |
| 겹치는 지점 | 화면 요소가 흐름을 방해하지 않도록 함께 다듬는 작업 |
ui ux 차이를 둘러싼 궁금증은 결국 화면을 만드는 일과 흐름을 설계하는 일이 서로 다른 작업이라는 점에서 출발한다. 외주 계약서나 채용 공고를 볼 때는 그 안에 적힌 작업이 어느 쪽에 가까운지 먼저 구분해서 확인하고, 결과물을 받을 때도 화면 시안과 흐름도를 각각 챙겨서 살펴보면 된다.
· · · · · · · · · ·
스페셜타임스는 AI 기술의 도움을 받아 더 빠르고 다양한 뉴스를 독자에게 전달하기 위해 노력하고 있습니다.