UX/UI 디자인 정의, 특징, 차이점 완벽하게 파악해봅시다

우리는 경험경제의 시대에 살고 있습니다. 당장의 효용보다 지속적으로 어떤 경험을 얻고 있는지가 소비자에게 더 중요하고, 얼마나 매력적인 경험을 제공하느냐가 기업의 가치를 평가하는 기준이 되고 있습니다. 경험에 관심이 있는 분들은 누구나 사용자 경험 디자인 (UX Design)에 대해 많이 들어봤을텐데요. UI Design 등 비슷한 용어들이 많아서 낯설고 그 차이점이 궁금한 분들이 많으실 것 같습니다. UX, UI의 정의와 특징을 통해 그 차이점을 알아보고 좋은 UX를 만들기 위한 원칙과 예시까지 함께 알아봅니다.

UX/UI란 (정의와 특징)

UX(User experience, 이하 UX)의 정의에 대해서 살펴보려면 빠질 수 없는 한 명이 있습니다. 바로 <The Design of Everyday Things>라는 책으로 유명한 인지심리학자 도널드 노먼(Donald Norman, 1935~ )입니다. 원래 UX(User experience)라는 단어는 사람과 컴퓨터의 상호작용에 관한 다양한 주제를 연구하는 학문인 HCI(Human computer interaction)에서 사용자 중심 디자인(User centered design)을 설명할 때 종종 언급되곤 했습니다. 하지만 도널드 노먼이 1993년 애플 컴퓨터의 부사장으로 재직하던 때, 자신의 직함을 ‘User experience architect’로 사용함으로써 UX라는 단어가 점차 세상에 알려지기 시작했습니다.

도널드 노먼은 휴먼 인터페이스나 사용성(Usability) 같은 표현이 지나치게 제한적이었기 때문에 UX라는 용어를 만들었는데 디자인 뿐 아니라 인터페이스, 물리적 상호작용, 매뉴얼 등 사용자가 시스템을 경험하는 과정에 관련한 모든 측면을 아우르고 싶었다고 합니다.

이후 도널드 노먼은 이후 제이콥 닐슨(Jacob Nielsen)과 함께 두 사람의 이름에서 따온 The Nielsen Norman Group(NN/g)를 설립하여 현재까지 UX에 대한 다양한 강의, 워크샵 등을 진행해 오고 있습니다. NN/g는 UX에 대한 정의를 다음과 같이 정의하고 있습니다.

💡 UX(User experience, 사용자 경험)은 최종 사용자가 회사, 서비스 및 제품과 상호 작용하는 모든 측면을 포함한다
“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

위에 내린 정의를 쉽게 풀이하면, UX란 사용자가 어떤 시스템, 서비스, 제품 등을 직, 간접적으로 이용하면서 느끼는 총체적 경험이라고 할 수 있습니다. 예를 들어, 우유를 사기 위해 쇼핑앱을 사용한다고 가정해 봅시다. 앱을 처음 실행했을 때 우리가 보게 되는 앱의 화면에서, 내가 원하는 메뉴를 쉽게 찾을 수 있는 지, 우유에 대한 정보(가격이나 유통기한 등)는 명확하게 제공되는 지, 결제 프로세스는 쉬운지, 배달이 잘못되었을 때는 어떻게 대응하는지와 같은 우유를 사기 위한 과정상의 경험 모두가 UX라고 생각할 수 있습니다. 맞습니다! 시작부터 끝까지, 하나하나 신경써야 하는 UX, 그렇다면 과연 훌륭한 UX를 위해서는 어떠한 조건이 필요할까요?🤔

NN/g에서는 훌륭한 사용자 경험을 만들기 위한 UX에서는 필요한 두 가지 요소가 존재한다고 말하고 있습니다. 첫번째는 고객을 번거롭게 하지 않으면서도 사용자의 요구 사항을 정확하게 충족시키는 것이고, 두 번째는 단순함(Simplicity)와 우아함(Elegance)입니다. 이는 사용자가 소유하고 싶고, 즐기고 싶어하는 제품을 만드는 기준이 되어야 합니다. 이러한 면에서 UX란 단순히 고객이 원하는 것을 제공하는 것 이상이라고 말할 수 있는데요. 이를 위해서는 마케팅, 엔지니어링, 디자인 등 다양한 분야를 아우리는 통합적인 시선으로 사용자와 사용자의 경험을 관찰하는 것이 필요합니다.

UI(User interface)

상호작용과 의사소통을 원활하게 해주는 접점에 존재하는 것이 UI(User Interface)입니다. UI란 사용자가 사용하는 서비스나 제품의 화면 안에 모든 것을 의미합니다. 사용자가 마주하게 되는 디자인, 레이아웃을 아우르는 개념이라고 할 수 있습니다. 쉽게 예를 들어볼께요!

예전에 입고 있던 옷이 찢어져서 급하게 옷핀을 사러 편의점에 간 적이 있었습니다. 빨리 옷핀🧷을 찾아야 한다는 생각에 뛰어들어가긴 했는데, 급할수록 안보이는 건지, 눈에 보이는 건 과자와 컵라면, 우유와 같은 식품류였고 마음은 다급해져만 갔습니다. 미로같은 편의점안을 몇 바퀴를 돌고 나서야 편의점 구석의 생활용품 코너, 맨 아래에서 옷핀을 찾을 수 있었습니다. 어찌나 땀이 나던지요 🥵. 그 짧은 시간이 영겁의 시간처럼 느껴졌습니다.

그렇다면 여러분, 여기서 어떤 부분을 UI라고 할 수 있을까요?

https://www.blacklink.co.kr/blogs/Food/must-try-korean-snacks-and-beverages-in-convenienc/

바로 편의점 진열대의 어디에 어떤 제품을 배치하느냐에 대한 설계가 UI라고 할 수 있을 것입니다. 그냥 보기 좋게 진열해놓은 줄만 알았던 편의점에 제품 배치가 사실은 한국 사람들의 평균 신장, 동선, 상품의 매출 데이터 등을 기반으로 설계한 과학적인 UI라는 거 알고 계셨나요? 더 나아가서 생각하면, 저처럼 급하게 특정 제품을 찾는 사람들을 위해서 어떻게 짧은 시간내에, 그리고 쉽게 그 제품을 찾게 하고, 그 경험이 즐겁게 하느냐에 대한 고려가 바로 UX라고 할 수 있을 것입니다.

UX/UI 디자인의 차이점은 무엇일까요?

UX 디자인은 ‘사용자 경험 디자인’ 이라는 용어를 말하며 UI는 ‘사용자 인터페이스 디자인’을 나타냅니다. 두 가지 모두 제품에 중요하며 긴밀하게 함께 작동하지만 제품 개발 프로세스에서의 역할은 상당히 다릅니다.

https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

UX 디자인은 경험의 전반적인 느낌에 관한 것이고 UI 디자인은 제품의 인터페이스가 어떻게 보이고 기능하는지에 관한 것입니다.UX 디자이너는 특정 문제를 해결하기 위해 사용자의 전체 여정을 고려해야 합니다.

UX 디자인 작업의 대부분은 사용자가 어떤 종류의 문제와 고충을 겪고 있는지, 그리고 특정 제품이 이를 어떻게 해결할 수 있는지 알아내는 데 중점을 둡니다. 대상 사용자가 누구인지, 특정 제품과 관련하여 그들의 요구 사항이 무엇인지 알아내기 위해 광범위한 사용자 조사를 수행합니다. 그 후 정보 아키텍처(예: 제품 전체에서 콘텐츠가 구성되고 레이블이 지정되는 방식)와 사용자에게 필요한 기능 종류를 고려하여 제품 전반에 걸친 사용자의 여정을 계획합니다. 또한 제품의 기본 청사진을 설정하는 와이어프레임을 만듭니다.

제품의 와이어프레임이 정해지면 UI 디자이너가 제품에 생명을 불어넣습니다. UI 디자이너는 사용자가 접할 수 있는 모든 개별 화면과 터치포인트를 포함하여 사용자 여정의 모든 시각적 측면을 고려합니다. 버튼을 누르거나, 페이지를 아래로 스크롤하거나, 이미지 갤러리를 넘기는 동작을 생각해 볼 수 있습니다.

• UX 디자인은 사용자 문제를 식별하고 해결하는 것입니다. UI 디자인은 직관적이고 심미적으로 만족스러운 대화형 인터페이스를 만드는 것입니다.
• UX 디자인은 일반적으로 제품 개발 프로세스에서 먼저 나오고 UI가 그 뒤를 따릅니다. UX 디자이너는 사용자 여정의 뼈대를 그려냅니다. 그런 다음 UI 디자이너는 시각적 및 대화형 요소로 채웁니다.
• UX는 모든 종류의 제품, 서비스 또는 경험에 적용될 수 있습니다. UI는 디지털 제품 및 경험에 따라 다릅니다.

UX / UI 디자인의 업무적 역할의 차이를 세부적으로 살펴보면 하기와 같습니다.

UX 디자이너가 하는 일 

• 전략 및 콘텐츠 : 경쟁사 분석, 고객 분석 및 사용자 조사, 제품 구조 및 전략, 콘텐츠 개발
• 와이어프레임 및 프로토타이핑 : 와이어프레임, 프로토타이핑, 테스트 및 반복, 개발 계획
• 실행 및 분석 : UI 디자이너와의 조율, 개발자와의 조정, 목표 추적 및 통합, UX 분석 및 테스트

UI 디자이너가 하는 일 

• 제품의 모양과 느낌 : 고객 분석, 디자인 연구, 브랜딩 및 그래픽 개발, 사용자 가이드 및 스토리라인
• 반응성 및 상호작용성 : UI 프로토타이핑, 상호 작용 및 애니메이션, 모든 장치 화면 크기에 맞게 조정, 개발자와 함께 구현
• 실행 및 분석 : UI 디자이너와의 조율, 개발자와의 조정, 목표 추적 및 통합, UX 분석 및 테스트

지금까지 정의와 개념을 기준으로 해서 차이점을 알아보았지만 UX, UI에 대한 실제적인 역할에 대한 정의는 각 회사의 유형에 따라서 크게 다릅니다. UX와 UI의 구분을 두지 않고 디자인 하는 경우도 있고, UI에 대해서도 UI, GUI(Graphic User Interface), AUI (Auditory User Interface) 등 세부적으로 역할을 나누는 경우도 있습니다. UX 디자인과 또 비슷한 역할을 하는 디자인으로 서비스 디자인(Service Design)이 있습니다.

UX 디자인은 사용자의 상호 작용의 모든 측면을 포함합니다. 앱, 키오스크, 웹사이트 등 최종 사용자가 접하는 모든 것이 포함됩니다. 사용자 경험을 ‘ 무엇 ‘, 즉 사용자가 브랜드와 상호작용하는 모든 것을 생각하면 됩니다. 서비스 디자인은 고객 경험을 제공하기 위해 비즈니스 리소스(사람, 소품 및 프로세스)를 계획하고 구성합니다. 서비스 디자인을 경험을 위한 방법으로 접근해볼 수도 있습니다. 즉, 사용자 경험이 생성되는 방법과 해당 경험을 제공하기 위해 내부적으로 조율합니다. 고객과 서비스 제공자, 시스템, 프로세스 간의 총체적 상호작용을 고려하는 것으로 서비스를 설계하고 전달하는 과정 전반에 디자인 방법론을 적용함으로서 사용자의 생각과 행동을 변화시키고 경험을 향상시키는 분야라고 할 수 있습니다.

https://www.nngroup.com/articles/ux-vs-service-design/

좋은 UX 디자인을 위한 3가지 원칙

우리는 일상 속에서 그 본연의 목적을 충분히 달성함으로써 인생의 의미를 풍요롭게하고 시작과 끝을 선명하게 구분할 수 있는 어떤 경험들을 하곤 한다. 이처럼 우리의 삶에 필수적인 요소로서 ‘참 좋은 경험이었어.’하고 자연스럽게 회상할 수 있는 바로 그 경험이 ‘진정한 경험’이다.

경험학습 이론을 대표하는 미국의 교육학자이자 철학자였던 John Dewey (존 듀이)는 진정한 경험에 대해 위와 같이 정의하였습니다. 그렇다면, 사용자에게 ‘참 좋은 경험’을 제공하는 것이 UX의 본질이란 사실을 염두에 두고 그가 제시한 3가지 경험의 원리를 살펴보시죠.

1. 상호작용의 원리
   • 경험의 주체와 경험의 객체인 환경이 서로 주고 받는 상호작용. 인간이 행하는 행동과 그 행동의 결과로 환경이 인간에게 되돌려주는 반응을 포함. 즉 능동적으로 무엇을 행하는 것과 그 결과를 통해 겪게 되는 것을 합한 상태, 그리고 그 관계를 인식하는 것 까지 모두 상호작용이다
2. 연속의 원리
   • 일시적으로 독립적인 감각 작용만 있는 것이 아니라 과거의 경험과 앞으로 다가올 미래의 경험이 관련되어 있다고 볼 수 있다
3. 성장의 원리
   • 사람의 경험은 단순히 과거, 현재, 미래로 이어지기만 하는 것이 아니라 끊임없이 재구성되며 통합적으로 성장해나간다

UX에서는 좋은 경험을 위해 상호작용(Interaction)의 원리에 집중하고 있습니다. 우리 주위에 쉽게 일어나는 상호작용이 어떠한 것들이 있는 지 한번 생각해볼까요? 여러분은 어떤 게 떠오르시나요? 먼저 귀에 못이 박히게 들었던 “인간은 사회적 동물이다”라는 말을 바탕으로 생각해보면 우리는 쉽게 사람과 사람사이의 상호작용을 떠올릴 수 있습니다. 아기가 부모, 선생과 학생과 같이 사람과 사람이 대화를 통해 서로의 경험과 정보를 공유하고 성장하는 것을 예로 생각할 수 있겠죠.

두 번째로는 사람과 기계의 상호작용이 있는데, 요즘 저의 절친이 누구인가 생각해보면, 아마도 제 스마트폰이 아닐까 싶습니다. 코로나 이후에 야외활동이 힘들어지고 실내 생활이 늘어나면서 더 스마트폰과 친해진 것 같은데요. 솔직히 저는 자기 직전까지 제 스마트폰으로 인스타그램을 봅니다. 이 뿐 아니라 길을 찾을 때도, 맛집을 찾을 때도, 심지어 바로 옆에 있는 친구와 대화할 때도 가끔 스마트폰으로 이야기하곤 합니다 🤭. 스마트폰을 통해 정보를 얻고 더 나아가 받은 정보에 대한 피드백을 열정적으로 주는 것도 모두 일종의 (열렬한😎) 상호작용이라고 표현할 수 있을 것 같습니다.

마지막으로는 기계와 기계간의 상호작용을 들 수 있는데, 혹시 애플 제품을 사용하신다면 Airdrop 서비스를 이용해보신 적이 있으신가요? Airdrop 서비스는 애플 제품간에 어떠한 연결없이 무선으로 파일을 주고 받을 수 있는 서비스입니다. 저는 맥북과 아이폰을 사용해서 이 기능을 맘껏 누리고 있는데요. 앞으로는 IoT(Internet of things, 사물인터넷)로 인해 집에서, 사무실에서, 길거리에서, 기계와 기계의 상호작용이 더욱 늘어날 것으로 예상됩니다.

우리가 일상에서 접하고 있는 모든 제품과 서비스에는 UX 디자인이 스며져 있습니다. UX, UI 디자이너의 노력 덕분에 즐겁고 편리한 사용 경험이 만들어지는 것이겠죠. 사람에 대한 애정과 관찰, 이를 상호작용하는 관점에서 더 좋은 경험을 만들어 가는 UX 디자인은 경험 경제 시대에 더 중요해지는 연구 분야라는 생각이 듭니다.

참고자료
The Difference Between UX and UI Design – A Beginner’s Guide
UX vs. Service Design
모두의연구소 AI UX LAB – UX란 무엇일까요? 크리에이터 김진영님 콘텐츠

Flutter 배우는데 Dart 언어 찍먹해서 되겠어요?

모두의연구소 오름캠프 [Flutter 모바일 앱 과정] 수강생의 인터뷰입니다.다른 프레임워크에 비해 꾸준하게 개발되서 플러터를 선택했는데,가장 근간인 Dart를 제대로 배울 수 있어서 좋았다고 하는데,자세한 내용은 영상에서 만나요!모두의연구소 오름캠프 [Flutter 모바일 앱 과…