Information/📱 IT│Tech / / 2019. 12. 18. 15:52

UX, UI 디자인 이란?

반응형

 

UX (User Experience)에서 Experience는 말 그대로 경험을 말합니다. 사용자의 경험이란 것이죠.

예를 들어 처음에 아이폰이 나왔을 때 터치하는 것은 알아도 슬라이드 기능이라든지 꾸욱 누르고 있으면 옵션이 나온다든지 하는 것이 처음에는 몰랐었지만 지금은 누가 가르쳐 주지 않아도 그런 방식으로 해 보면 되는 기능들이 있습니다.

그런 환경이 익숙해 지고 자연스럽게 체득되어 당연한 듯이 사용을 하게 되는 것이죠.

 

좀 더 쉽게 설명하기 위해 식판의 배치로 예를 들어 보겠습니다.

 

 

왼쪽 하단에는 밥이 들어가고 바로 우측에는 국이 놓이게 됩니다. 그리고 상단에는 반찬이 놓여지게 되고 맨 우측에는 식기구를 놓고 먹습니다. 식판을 굳이 사용하지 않아도 밥은 왼쪽 국은 오른쪽에 놓고 식사를 하죠. 만약에 반대로 놓고 먹는다면 부모님들은 그런 것들을 바로 잡아주곤 했죠.

이런 것들은 반드시 지킬 필요는 없습니다. 먹는 데엔 지장이 없으니까요.

 

식판을 뒤집어 보았습니다

 

먹는 데에는 지장이 없지만 이렇게 놓고 먹는다면 무언가 불편하게 느껴질 것입니다. 어색하니까요. 반찬은 위에 밥은 왼쪽 아래 국은 오른쪽에 있는 경험(Experience) 때문인 것이죠. 그것이 요즘 말하는 UI, UX에서의 User Experience 즉, 사용자 경험입니다. 앱을 개발할 때 반드시 그곳에 그 버튼이나 기능이 존재할 이유는 없지만 익숙한 곳에 존재해야 빨리 찾고 편하게 사용 가능합니다. 그런것들의 기획이  UX입니다.

 

그렇다면 UI는 무엇일까요?

 

UI는 UX에 기반하여 놓을 곳을 정한 뒤 그것을 좀 더 시각적으로 돋보이게 만드는 것이라고 보면 되겠습니다. UX로 러프하게 위치를 잡았다면 UI단계에서는 그 스케치를 기반으로 디자인을 하는 것이죠.

 

 

 

 

 

상단 이미지는 똑같은 역할을 하는 버튼들입니다. 상단 좌측에 이미지는 윈도우에서 창 내리기, 창 크기 조절, 닫기입니다. 시각적으로도 그런 기능을 할 것 같다는 느낌이 듭니다.

상단 우측 이미지는 MAC OSX에서의 창닫기, 창 내리기, 전체 화면 키입니다. OSX에서는 모양보다는 색으로 구분을 해 놓았습니다. 

 

이처럼 같은 역할을 하는 버튼이지만 그것을 꾸며주거나 디자인하는 것을 UI라고 합니다.

 

즉, 좋은 UI가 만들어지려면 좋은 UX의 기획이 선행되어야 할 것입니다.

 

반응형