본문으로 바로가기


여러분은 UI와 UX의 개념에 대해 정확하게 알고 계신가요?  요즘 채용공고를 살펴보면, "UI/UX기획자 모집"이라는 공고가 자주 보입니다. 저조차도 이력서에 UI와 UX설계 전문가라고 작성하고 있는데.. 최근 면접자리에서 UI와 UX의 개념이 뭔가요? 라는 질문을 받았습니다.

그때 어디선가 들어 본 듯한 밥상에 비유해서 답변을 하긴 했는데, UI(User Interface)란 밥,국,반찬 등을 보기 좋고 먹기 좋게 배치하는 것이고, UX(User Experience)란.. 그 사람의 특성과 경험을 고려하여 된장국을 좋아하는 사람 근처에는 된장국을, 그리고 왼손잡이에게는 국과 수저를 왼쪽에 배치하는 것이라고 대답했습니다.  이 대답을 면접관들이 어떻게 받아들였는지는 모르겠지만, 제가 느끼기에는 그 분들도 유저 인터페이스(UI)와 사용자 경험성(UX)의 개념을 정확히 이해하지 못하고 있구나라는 생각이 들었고, 현업에서도 저처럼 이 개념을 정확히 이해하지 못하는 사람이 많을 것 같아서 정리해봤습니다.


UI/UX 너의 정체는 뭐니?

- UX is Not UI
- UX는 UI디자인이라는 것으로 실체화되어 일부가 눈에 보일 뿐이다.

※ 자료 출처 : http://www.slideshare.net/nicolasdemange/ux-is-not-ui-10294039


위 그림에서 알 수 있듯이 UI는 UX의 아주 작은 파트입니다.  

UX란.. 사용자들이 서비스에 대해 느끼는 경험을 토대로 만족감 혹은 긍정적인 느낌을 가질 수 있도록 사용자의 전체적인 경험을 디자인합니다. (감성적이며 추상적인 개념)  

UI란.. 사용자와 서비스가 만나는 접점이며, 단순히 보기좋고 아름답게 표현하는것이 아니라 레이아웃, 색상, 타이포그래피나, 이미지 등을 통해 이 서비스의 가치를 사용자에게 명확하게 전달할 수 있는 형태로 표현하는 영역입니다. (기술적인 부분)

쉽게 말하면 UI/UX설계는 사용자 개개인의 경험과 특성을 고려하여 서비스를 사용하도록 설계하는 과정이며, 눈에 보이는 것은 UI 보이지 않는 것은 UX입니다.

아직도 좀 애매하시죠? 이번엔 예시를 통해 정리해보겠습니다.


▶ 예시1. 김수현을 통해 보는 UI/UX

 UI


 UX

ㆍ아름다운 외모
고독한 눈빛
ㆍ센스있는 스타일
ㆍ훤칠한 키

용자욕구 : 가지고 싶다 

ㆍ꽃미남 이미지 (UI)
ㆍ전신에서 풍겨오는 따뜻한 향기
ㆍ중저음의 매력적인 목소리


 
예시2. 네이버를 통해 보는 UI/UX

 UI


 UX

ㆍ검색박스는 최상단에 배치
ㆍ로그인은 우측 상단에 배치
ㆍ우선순위가 떨어지는 부가정보는 하단에 배치

사용자욕구 : 쓰고싶다

ㆍ사용자를 고려한 배치 (UI)
ㆍ정보검색은 당연히 네이버
ㆍ메일확인도 당연히 네이버
ㆍ실시간 이슈 확인도 네이버

 
 예시3. 밥상을 통해 보는 UI/UX

 UI


 UX

ㆍ밥과 국은 주식으로 내 자리 바로앞에 위치(가까운 동선)
ㆍ가운데 찌개는 전부 공유하는 위치
ㆍ정보의 순위가 떨어지는 밑반찬은 외곽으로 위치

사용자욕구 : 먹고싶다

ㆍ사용자를 고려한 배치 (UI)
ㆍ밥의 김이 모락모락함과 윤기
ㆍ된장국의 맛있는 냄새
ㆍ찌게의 보글보글함과 소리


이제 좀 이해가 되시나요? 결국..  UX 설계는 사용자의 욕구 중심으로 서비스로 만들어 내는 과정이며 UI 는 사용자와 서비스가 실제로 마주치는 부분입니다.


야메군이 진행하는 "웹기획 마인드 강좌"는 오프라인 강좌 뿐만 아니라, 온라인 강좌로도 만나보실 수 있습니다. 지식 동영상 스토어 "AirKlass", 지구상 가장 큰 학교 "EDUCAST", 전문가의 지식노하우 플랫폼 "TOC6"에서 강좌를 확인해보세요!! 




야메군. Web와 Mobile, Digital 카테고리 SME(Subject Matter Expert). 웹기획 15년차로 네이버 웹기획자 커뮤니티 "웹(WWW)를 만드는 사람들"에서 운영진으로 활동하고 있으며, 딴지일보를 시작으로 아이러브스쿨, 짱공유닷컴, YES24 등의 회사를 거쳐, 현재는 민간 IT 원천기술 연구소 "Valhalla Lab"에서 Pattern recognition과 Machine learning, Natural Language Processing 기술의 상업적 이용방법에 대해 연구했으며, 2016년 7월 7일, 기획자의 업무능력 향상으로 위한 Guide Book "처음부터 다시배우는 웹기획(정재용, 최준호, 조영수 공저)" 출간.



댓글을 달아 주세요

  1. 익명 신고">2012.11.30 17:14 신고

    항상 두개가 애매모호하고 헷갈리던 부분이였는데
    직접 예시로 들어주신부분을 보니
    바로 이해가 쏙쏙 되네요+_+)b

    • Favicon of http://www.yamestyle.com BlogIcon 야메군 신고">2012.12.01 01:34 신고

      영수이야기님이 UI와 UX에 대한 인사이트가 있다보니, 저 역시도 글을 읽으면서 많은 부분을 다시 생각하게 되네요..^^

    • Favicon of http://yslab.kr BlogIcon 웹기획자 조영수 신고">2012.12.02 10:41 신고

      현업에서 UI와 UX를 구분지어 이해하기는 참 어려운 것 같아요. 저도 이 글을 정리하면서 개념을 다시 잡았네요. 댓글 감사합니다 ^^

  2. Favicon of http://www.healtree.kr BlogIcon 힐트리 신고">2012.12.12 23:34 신고

    .
    여태까지 봤던 UX의 설명으로는 정확한 이해가 어려웠는데

    역시 예를 들어주시고 비교해주시니 한번에 이해가 가는군요... 감사...꾸벅..^^

    이런분은 책을 쓰셔야 함니다. 어린백성이 제뜻을 시러펼수 있도록... ㅋ. 쵝오...
    .

  3. 조이진 신고">2012.12.17 23:56 신고

    블로그에 담아갈께요 유용한 정보 감사합니다

  4. 내림뿡 신고">2013.03.02 02:27 신고

    와... 이해가 쏙쏙 됩니다 ㅠㅠ 감사합니다!

  5. 이서진 신고">2013.05.08 18:50 신고

    블로그에 담아 갈께요~

  6. 양지선 신고">2013.06.04 14:09 신고

    UI가 반드시 보이는 결과물은 아니죠.
    Auditory UI도 있으니까요. UX의 구성요소가 되는, 기기(인공물)과 사용자의 매개체..라고 이해해야 되지 않을까요?

    • Favicon of http://www.yamestyle.com BlogIcon 야메군 신고">2013.06.04 18:54 신고

      좋은 지적 감사합니다.
      깊게 생각한다면 말씀하신 부분도 분명히 포괄해야 하겠지만, 웹이라는 제한적인 관점에서 봤을 때, 아직까지 말씀하신 Auditory UI를 제대로 구현하거나 그런 의지를 가진 곳이 없다고 본다면, 위의 내용도 크게 벗어나지 않다고 봅니다..^^

  7. 한지영 신고">2015.03.19 10:02 신고

    !!!!!너무 좋아요 !!! 많은 사이트들, 외국사이트들도 모두 정의가 조금씩 달라서 힘드네요 ㅠ

티스토리 툴바