brunch

You can make anything
by writing

C.S.Lewis

by Willlink Nov 22. 2018

A_11  UI|UX 쉽게 맛만보기.

간 보는 설명글

사실 이 글은 정말 대략적으로 느낄 수 있는 정도의 글이다._(아직까지도 많은 연구와 토론이 이어지고 있기 때문에.) 참고 정도만 하기를 바라며 글을 쓴다.


그냥 자신을 UX|UI 디자이너라고 설명하는 웹앱 디자이너들이 많다. 혹은 디자이너를 구할 때 UX와 UI의 차이점을 모르면서 구하는 사람도 많을 것이다. 과연 UX는 무엇이고 UI는 무엇일까? 여러 가지 다양한 해석이 있다. UX와 UI를 구분하고 상위 개념과 하위 개념을 나누는 다양한 방법과 이론과 설명들이 있다.


예를 들자면

UX는 사용성을 UI는 포장을 이라던가

배치는 UI 반응하는 것은 UX

UI는 기술과 논리 UX는 감성의 영역 등등

같은 여러 해석과 구분이 나온다. 기획자 입장에서, 혹은 이제 막 디자인을 하는 디자이너 입장에서는 사실 구분이 명확하기보다는 추상적인 느낌이 든다는 것이다. 찾아보고 여러 글들을 읽어본 결과 이것은 너무나 방대했고 기술과 감성의 상위를 구분하는 것은 닭이 먼저인가 달걀이 먼저인가 같은 느낌의 개개인의 아주 주관적인 느낌이라고까지 생각이 들었다.


다수가 동의하는 기본적인 개념은 다음과 같은 정의였다.

UX(User Experience)는 사용자 경험을 기반으로 한 총체적인 것들을 말한다. 

UI(User Interface)는 디자이너가 계획한 서비스 웹앱의 얼굴이다.

하지만 여전히 차이가 뭔지 잘 들어오지 않을 것이다. 감정이나 뭐 그런 추상적인 느낌에 대한 구분보다 더 명확하게 선을 그어보려고 한다.


선을 그어내기 전에 입장의 차이에 따라 자신의 업무에 따라 많은 차이가 있다고 느꼈고 그중 내가 공감한 2가지의 입장에서의 해석을 예시를 들어 보려 한다.



결국은 매장이 있어야 장사를 한다._ UI 디자이너


디자이너 입장에서 예시를 들어 설명하자면 손님이 "사용자", UI는  "서비스를 제공하는 매장" 그리고 그 "매장의 서비스"가 UX이다. 디자이너는 매장의 인테리어나 분위기 조명등으로 손님에게 선호도와 지각력, 감정, 인지적 결과에 대한 영향을 주기 위해 매장을 디자인한다. 그리고 그러한 매장 속에서 서비스는 종업원의 친절함이라던가, 손님의 이동 동선이나 고객의 편의를 최대한 고려한다. 이러한 서비스는 기억과 감정을 극대화시키며 상호작용성을 갖는다. 손님의 돌발상황에 대한 매뉴얼이나 기본 서비스들은 매장에 들어오는 순간부터 나가는 순간까지의 모든 경험에 대해 좋은 인상과 기억에 남을만한 일을 만드는 기능을 한다.


눈에 보이는 분위기가 공간을 이야기한다.


매장의 인테리어를 구성할 때는 객관적이며 체계적일 것이다. 미학적으로 냉정한 완벽함을 추구하는 게 보통이다. UI도 비슷하다. 버튼의 생김새나 메뉴의 폰트, 컬러 같은 영역은 브랜드의 이미지에 맞게 체계적이고 보편적인 아름다움을 추구한다.



서비스는 같은 매장이라도 타깃에 따라 달라진다. 같은 인테리어는 같은 업종에 어디든 적용이 가능하지만 키즈카페를 하는가 애견카페를 하는 가 2030 세대가 많이 오는가 등등 그에 따른 서비스는 언제든지 달라진다. UX는 이러한 타깃에 맞춰 좋은 경험을 주기 위한 장치를 도와주는 개념인데 버튼의 위치나 메뉴바의 위치 혹은 편의 기능의 위치 같은 사용자가 주관적으로 느끼는 느낌의 영역에서 편안함과 편리함을 주려는 노력이다. UX는 사용자 그룹 전체의 피드백이나 통계 등을 통해 사용자 그룹을 하나의 객체로 인지하고 사용자의 대부분에게 좋은 인상을 주기 위해 노력한다.


그렇다고 실제로 눈에 보이는 것만 UI냐 라는 질문에는 아니다고 이야기하고 싶다. 디자인적인 관점에서는 눈에 보이는 시각적인 부분만이 UI일수 있지만 개발(퍼블리싱)이 들어간다면 이야기가 또 달라지기 때문이다. 눈속임을 위해 만드는 보이지 않는 개발적, 디자인적 장치들도 UI로 해석 가능할 수 있기 때문이다. 물론 이러한 부분은 UX에 더 해당하지만 그것을 구현하는 것도 UI의 영역에 해당하기 때문에 꼭 눈에 보이는 것 = UI는 아니다.


사용자에게 제공할 서비스가 우선 고려되어야 하고 매장은 그냥 그것을 담는 그릇이다.

_ UX 디자이너


콘텐츠가 없는 사업은 없고 그 콘텐츠는 사용자에게 좋은 경험을 남겨야 사업에 혹은 제품에 생명력을 부여할 수 있다. 결국 기업의 총체적인 경험과 반응, 사용성을 어떤 식으로 서비스에 반영할지 구상을 해야 그에 맞는 매장을 만들 수 있다는 이야기이다. 우리가 어떤 콘텐츠를 제공할 것인가 그리고 그 콘텐츠를 담기 위해 무엇을 중요하게 여길 것인가에 대한 개념을 먼저 잡아야 하고 이것의 일부가 매장에 담긴다는 이야기이다.


카페라는 형태보다 더 중요한것은 사용자에게 어떤 경험을 줄것인가에 대한 고민이다.


매장을 열기 전에 우리는 무엇을 어떻게 누구에게 판매할 것인가에 대한 고민을 할 것이다. 이것은 미학적인 속성의 범위를 넘어 브랜딩을 하는 과정과도 연결된다. 정말로 그(고객)들이 원하는 그들만을 위한 서비스나 제품을 먼저 생각을 해야 한다. UX도 비슷하다. 디자인적인 퍼포먼스에 앞서 우리 서비스, 제품에 어떻게 더 만족하게 만들 것인가에 대한 것들을 추구한다.  


서비스나 제품이 어떻게 효율적으로 좋은경험을 줄수있는지 고민해야한다.


매장의 디자인은 서비스를 따라 달라진다. 애견카페와 키즈카페 다들 이용자의 편의에 맞추어 벽에 쿠션을 넣거나 강아지들을 막는 철장을 설치하거나 하는 디테일한 요소들이 바뀌기 때문이다. 누구에게 어떤 브랜드로 남을 것인가 어떤 서비스를 제공할 것인가에 대한 충분한 고려를 하고 그것을 버튼의 위치나 크기 등의 디자인적인 부분에 반영하는 것이다.


BX  >  CX  >  UX  >  UI


사용자에게 전하고자 하는 경험이 곧 브랜딩(브랜드 경험은 BX)이며 그 안에 UX가 있고 이것을 시각적으로 담아내는 것이 UI라는 것이다. 무조건 고객에게 객관적인 편의를 주는 게 아닌 실 사용 고객에게 주관적인 만족감을 먼저 담아야 한다. 이것을 CX라고 부른다. 그리고 그런 설계 아래 디자인이 나와야 한다는 것을 의미한다. UX는 사용자 그룹 전체의 피드백이나 통계 등을 통해 사용자 그룹을 하나의 객체로 인지하고 사용자의 대부분에게 좋은 인상을 주기 위해 노력하는 장치가 UX이다. 그리고 그것의 일부를 시각적이고 직관적으로 담아내는 것이 바로 UI이다.



쉽게 설명하기


쉽게 UI는 얼굴 UX는 인간성과 성격 같은 눈에 보이지 않는 분위기이다. 당신은 사람을 만났을 때 어떤 것을 더 중요하다고 생각하는가? 혹은 어떤 것에 그 사람에 대한 인식이 달라지는가 같은 류의 이야기이다. 사람은 분명 외모에 의해 첫인상을 좌우하며 그것을 뒤집을 수 있는 것은 그 사람과의 대화를 통해 보는 인간적인 부분에 대한 이야기일 것이다. 반대로 대화나 글 같은 생각이나 철학만으로도 호감을 느낄 수 있으며 그것을 강화하는 게 외모가 될 수도 있다.


무엇이 중요한가?


인간을 표현하는 가장 중요한 요소는 개인의 생각과 철학이 맞다 하지만 좋은 생각과 성격에 좋은 외모를 갖고 있다면? 좋은 경험을 주는 사람이 되기 더 편할 것이다. 개인적으로 내가 내린 결론은 다음과 같다


개념의 큰 범위는 대부분 UX > UI 그 사람의 철학과 감정 대화방식이 사람을 구성하는 더 넓고 큰 범위라는 생각을 한다. 하물며 식당을 가더라도 더 '맛'있는 곳을 간다. '맛'은 본질이고 '인테리어'는 서브이다. 허름한 맛집을 왜 가는지 생각해보자.


하지만 실질적 중요성에 대해서는 둘 다 50:50이라고 생각한다. 내가 아무리 철학적이고 좋은 성격을 갖고 있더라도 누군가의 만남에 눈곱 끼고 떡진 머리를 하고 나온다면 그러한 알맹이를 전달하기가 쉽겠는가 하는 문제의 이야기이다. 만약 맛도 있고 매장의 분위기도 좋은 매장과 맛만 좋은 매장 분위기만 좋은 매장이 있다면 당신은 어디를 가겠는가.


좌뇌와 우뇌 중 어느 하나 중요하지 않은 게 없듯 논리적으로 풀어내는 감성이냐 시각적으로 보이는 즐거움이냐에 대해서 적절한 발란스를 유지하는 게 중요하지 않을까? 결론은 하나 버릴 게 없다.



참고자료 목록

http://story.pxd.co.kr/562

http://story.pxd.co.kr/565

https://brunch.co.kr/@aw2sum/36

http://jayzzz.tistory.com/59

https://m.blog.naver.com/PostView.nhn?blogId=jm_315&logNo=221265415244&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

http://www.yamestyle.com/177

http://kipfanews.tistory.com/145

https://brunch.co.kr/magazine/normaluxer

https://www.nngroup.com/articles/definition-user-experience/

https://medium.com/@brebren/ux-cx-bx-adcafcfd155d

https://blog.naver.com/minwook74/120187584759

https://brunch.co.kr/@ebprux/158

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari