웹페이지 제작관련 공부하는 분들은 한 번씩 듣게 되는 용어가 있습니다. 바로 UI와 UX 디자인인데요.
거의 함께 쓰이기 때문에 두 개의 차이점을 잘 알지 못하는 경우가 많습니다.
함께 쓰이는 만큼 연관성이 깊은 UI, UX!
오늘은 초보 웹디자인, 기획러를 위해 UI, UX의 뜻을 살펴보고 차이점을 알아보도록 하겠습니다~~

이용자 인터페이스
휴대폰, 컴퓨터, 내비게이션 등 디지털 기기를 작동시키는 명령어나 기법을 포함하는 사용자 환경을 뜻한다. 이용자들이 IT기기를 구동하기 위해서 접촉하는 매개체로 컴퓨터를 조작할 때 나타나는 이른바 '아이콘'이나 텍스트 형태 구동화면도 포함된다. 스마트폰의 경우 애플리케이션 아이콘 형태 및 화면 구성을 가리킬 때가 많다.
출처 : 네이버 지식백과

사전적인 UI의 의미인데요. 이게 정말,, 무슨 뜻이람? 싶으시죠?
한마디로 디자인, 레이아웃 등 겉으로 보이는 모든 시각적 요소를 통칭한다고 보시면 됩니다.
눈으로 보이는 폰트, 레이아웃, 색상, 도형 등등 모~든~ 시각적인 요소를 뜻합니다.
예시로 이미지를 가져왔는데요! 아래 이미지에는 어떤 UI요소가 있는 지 한 번 볼까요?

사용자 경험
사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다. 단순히 기능이나 절차상의 만족뿐 아니라 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해서 알 수 있는 가치 있는 경험이다.
출처 : 네이버 지식백과

UX(user experience)도 쉽게 이야기하자면 어떤 서비스를 직/간접적으로 이용하면서 느껴지는 경험, 만족도, 느낌, 행동, 태도를 일컫습니다. 마찬가지로 UX의 예시도 한 번 살펴보도록 할게요

어떠신가요? 각각 나누어 설명하니 감이 좀 잡히시나요?

풀어서 설명해보자면,
UI는 우리가 페이지를 열었을 때 보게 되는 버튼, 레이아웃 등 시각적인 디자인을 말하고, 그에 반해 UX는 우리가 페이지를 열었을 때 하는 경험과 반응을 베이스로 한 디자인이에요.
익숙하게 사용하고 있는 카카오톡 대화창을 예시로 가져왔는데요!

어느 버튼을 주로 사용하는지, 어떤 위치에 있을 때 편한 지, 사용 빈도수는 얼마인지, 어떤 경로로 만들어야 콘텐츠 이해도가 빠른지 등의 데이터를 분석하여 사용자의 편의성을 높이는 것입니다. 따라서 "경험"이라고 부르는 거죠. 위의 카카오톡 대화창에서 좌측 상단의 햄버거 버튼이나 +버튼, 이모티콘 버튼 등등의 위치나 당위성은 편의성을 분석한 UX로부터 폰트나 줄 간격, 구성요소 등은 디자인을 기반으로 한 UI로부터 나온 것이죠.

이해가 되셨나요? 이러한 성격을 볼 때 두 개는 다르면서도 연결되어있다는 점. 
왜 두 단어를 같이 사용하는지 알 수 있을것 같아요! 오늘 파악한 UI와 UX의 의미와 특성을 가지고 떼려야 뗄 수 없는 두가지를 모두 고려해서 이용자의 편의성을 높인 훌륭한 결과물을 만들어보자구요!

그럼 여기서 마치겠습니다.
감사합니다~!