<주간 UIUX 디자인 : ui ux 디자인>

UIUX 디자인 완벽 이해하기! UIUX 우수 사례, 차이점까지 총 망라!

제로베이스 UIUX 디자인 스쿨

UIUX 디자인은 어떻게 등장 했을까요?

2009년 KT가 아이폰을 도입한 이후 스마트폰의 등장으로 데스크톱 위주의 웹 디자인은 모바일(mobile)이라는 새로운 디지털 생태계의 급성장을 이루게 되었습니다. 이러한 사회 현상에 따라 서비스나 애플리케이션의 개념이 탄생하며 트위터, 페이스북, 인스타그램과 같은 SNS를 통한 사용자의 상호작용 형태는 새로운 요구들을 제시하기 시작하였으며 마우스를 이용하던 환경에서 사용자의 손을 중심으로 하는 터치 인터페이스로의 전환과 같은 변화에 따라 UI와 UX의 개념과 영역은 확장되거나 변형되기 시작했어요.

UX(User eXperience)는 무슨 뜻일까요?

사용자 경험(User eXperience, 이하 UX)은 사용자와 컴퓨터의 상호작용을 연구하는 데 사용된 개념으로, UX의 다양한 원리는 소프트웨어와 하드웨어 개발에서 비롯되었어요. 현재 이 개념은 컴퓨터뿐만 아니라 서비스, 상품, 프로세스, 사회, 문화에 이르기까지 널리 응용되고 있죠.

UX의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 말해요. 기능이나 절차상의 만족뿐만 아니라 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해 알 수 있는 가치 있는 경험 전체를 뜻합니다. 즉 UX는 제품의 각 요소가 사용자에게 주는 개별 감정의 총합이라고 할 수 있습니다. 긍정적인 UX 창출은 산업 디자인, 소프트웨어 공학, 마케팅, 경영학의 중요 과제이며, 사용자 니즈 충족, 브랜드 충성도 향상, 시장에서의 성공 등을 가져올 수 있는 주요 사항으로 꼽히고 있죠. 부정적인 UX는 사용자가 원하는 목적을 이루지 못하거나 목적을 이루더라도 감정적, 이성적, 경제적으로 편하지 않거나 부정적인 반응을 일으키는 경험을 할 때 발생할 수 있어요.

사용자 경험의 단계에서는 사용자에게 좋은 UX를 제공해야 합니다. 좋은 UX는 긍정적이고 풍부하며 의미가 있어야 해요. 사용자는 디바이스와의 접점에서 새로운 학습 단계를 거치는 것을 좋아하지 않아요. 인간은 본능적으로 어렵고 힘든 것을 피하려는 경향이 있기 때문이죠. 사용자가 능동적으로 참여하게 하려면, 선택의 폭이 넓고 풍부하며 사용자의 요구와 필요가 충분히 반영되는 의미 있는 경험을 제공해야 합니다. 사용자에게 최적화된 긍정적인 경험을 통해 새로운 단계에서 즐거움을 느낄 수 있게 하는 거죠! 긍정적인 사용자 경험을 개발, 창출하기 위해 학술적, 실무적으로 이를 설계하는 일을 UX 디자인이라고 합니다. UX 디자인은 주로 제품 디자인, 상호작용 디자인, UI 디자인, 정보 아키텍처, 사용성 등의 분야에서 연구 개발되고 있어요.

UX 디자인에 대해서 본격적으로 알아볼까요?

사용자 경험 디자인으로 불리는 UX 디자인(User eXperience Design)은 사용자 경험을 바탕으로 긍정적인 요소를 반영하여 디자인, 설계, 구성하는 일을 말합니다. 여기서 디자인이란 시각 디자인이나 그래픽 디자인을 통해 시각적으로 아름답게 꾸미는 일만 의미하지는 않아요. 디자인이란 단어의 기본 의미가 ‘계획’ 또는 ‘설계’인 것을 안다면 UX 디자인이 뜻하는 바를 좀 더 직관적으로 알 수 있을 거예요.
UX 디자인에 대해서는 연구자마다 주장이 달라 일반적으로 ‘정의가 없다.’라고도 한다죠. 하지만 전문가의 이야기를 종합하면 조금씩 차이점이 있기는 하지만 정의할 수 없는 것은 아니예요.

전문가들은 UX 디자인을 어떻게 정의하는 지 들어볼까요?

1) 도널드 노먼(Donald Norman): 닐슨노먼 그룹 창시자

“사용자 경험은 사용자가 기업, 서비스, 제품과 상호작용하면서 얻는 모든 측면의 경험을 의미하며 UI의 품질 속성인 사용성과는 구별된다.”

2) 로라 클라인(Laura Klein): 린 스타트업 실전의 저자

“UX가 제품과 상호작용하는 동안 사용자가 경험한 것이라면, UX 디자인은 정의에 따라 그 경험이 무엇인지 결정하는 프로세스로 사용자와 비즈니스 모두의 요구를 이해하고 충족시키는 방식이다.

다양한 전문가의 의견을 종합하면, UX 디자인은 유용하고 사용하기 쉬우며 상호작용하기에 즐거운 제품을 디지털 또는 물리적으로 설계하는 프로세스로, 사용자가 제품과 상호작용하면서 경험을 향상시키고 가치를 찾을 수 있도록 하는 것입니다.

대체적으로 UX 디자인은 UI(User Interface-사용자 인터페이스) 디자인보다 조금 더 큰 개념이라고 이해하여 UX 디자인이 UI 디자인을 포함하는 것으로 생각하는 경우가 있어요. 하지만 사용자 경험을 디자인한다는 것은 ‘경험’이라는 눈에 보이지 않는 실체를 다양한 측면에서 밀접하게 조사하여 기존의 UX가 갖는 새로운 사용자 경험을 설계한 후, 그것을 형태나 정보구조, UI, 상호작용 등으로 실체화해나가는 프로세스 즉, 사용자의 문제를 해결하는 과정이라고 보는 것이 마땅합니다.

UX 디자이너의 역할은 무엇일까요?

UX 디자이너의 역할은 제품, 기능 또는 개념이 의도한 대상에 얼마나 잘 맞는지를 알아보는 것에서 시작하여 버그를 수정하거나 마찰을 제거하거나 사용자 경험에 즐거움을 더하는 개선 기회를 포착하는 것입니다. 즉, 서비스나 제품에 대한 사용자 경험과 관련된 모든 것에 연관이 있죠. 크기, 포장, 휴대성, 서비스의 업데이트 등과 같이 서비스의 기본 기능을 넘어서 관여하게 됩니다. 반면 UI디자인은 웹 사이트, 앱 서비스 또는 자동차 대시보드의 터치스크린과 같은 디지털 디바이스에서 직관적인 메뉴, 선호 색상, 만족스러운 촉감 등 디지털 인터페이스에 포커싱 되구요.

UI 디자인과 UX 디자인은 무엇이 다를까요?

UI(User Interface-사용자 인터페이스)는 인간과 컴퓨터의 접점인 사용자 인터페이스를 의미해요. 사용자 인터페이스는 사용자와 각각의 시스템 사이의 정보 채널을 뜻하고요, 구체적인 정보차원의 디자인을 통해 사용자와 입력과 출력의 과정을 거쳐 커뮤니케이션하는 방법에 관한 것으로, 협의적으로는 ‘사용자와 컴퓨터 시스템 간의 상호작용’을 의미합니다.
즉 UI 디자인은 그 둘 간의 의사소통의 효과성과 효율성을 극대화하기 위해 인간, 환경, 기술 요소를 통합하는 활동이라 할 수 있죠.

UI 디자이너와 UX 디자이너는 긴밀하게 협력하고 협업하는 관계지만, 두 분야는 디자인 프로세스의 개별 측면에서 구분돼요. UX 디자인은 제품 또는 서비스의 사용성과 접근성을 향상시켜 사용자의 만족도를 높이는 과정을 말하고 UI 디자인은 서비스의 인터페이스 디자인 즉, 사용자가 제품과 상호작용할 때 사용하는 컬러나 타이포그래피에 이르기까지 실제 시각적으로 보이는 모양과 느낌을 책임지거든요. 그렇다고 해서 미적인 아름다움만을 추구하는 것은 아니예요.

UI 디자인은 사용자의 선호도를 예상하고 이해하며 충족하는 인터페이스를 만드는 작업이 포함되어 미학에 중점을 둘 뿐만 아니라 서비스의 반응성, 효율성 및 접근성을 극대화하는 작업에 더 가깝죠. 간혹 UI 디자인은 정적인 부분을 담당하고 UX는 동적인 인터랙티비티(interactivity)를 담당하는 것이라는 오해도 발생하지만 시각적 인터렉티브 요소에 대한 디자인 책임은 오히려 UI 디자이너에게 있다는 점!

UX와 UI는 어떤 관계가 있을까요?

아마도 UI디자인, UX디자인이라고 사용을 하다 보니 많은 사람들은 UI와 UX를 동일시 하기도 하고 또 혹자는 UI와 UX의 차이를 명확하게 하려고 하기도 하죠. UX디자이너라는 직업군은 점차 세분화 되고 있어 여러 유사한 분야와 협업을 하게 되는 경우가 많은데 그 중에서 가장 대표적인 직업군이 바로 UI디자이너라고 할 수 있어요.

위 이미지처럼 댄 섀퍼(Dan Schaffer)가 분류한 UX 분야의 도표를 보면 다양한 분야가 UX 디자인과 관련이 있다는 것을 알 수 있어요. UX디자인 분야는 매우 복잡하고 다양한 전공이 이어져 있어 분리해서 생각하기 힘든 점이 있죠. 인터넷에서 UI와 UX로 검색해 보면 가장 많이 등장하는 이미지는 바로 케첩병 사진인데요.

UI와 UX에 차이를 구분하기 위한 논쟁에 자주 등장하는 사진으로 전통적인 형태의 병 디자인은 많은 사람이 내용물을 꺼내기 위해 힘들어하거나 실망한 경험을 가지고 있을 텐데요. 그러한 실망에 대한 사용자의 경험을 반영하여 거꾸로 세워진 형태의 케첩 병 디자인이 제안된 것이고, 그로 인해 사용자에게 더 편리한 경험을 제공할 수 있었죠. 하지만 거꾸로 된 케첩 병 디자인 자체가 UX인 것은 아닙니다!

세워진 형태에 따라 UI와 UX를 구분하는 이미지이지만, 결국 사용자의 경험을 반영한 디자인의 결과물인 UI인 것이죠. 하지만 두 케첩 병은 모두 자체 사용자 경험을 가지고 있기에 UI와 UX를 이분법적으로 구분하는 일은 합리적이지 않으며 사용자 경험을 디자인한다는 것은 도출된 결과물이 아닌 프로세스의 과정으로 보는 것이 합당합니다.

UX와 UI는 어떤 차이점이 있을까요?

그럼에도 굳이 UX디자인과 UI디자인을 구분하고 싶다면 UX기획과 UI디자인으로 구분하는 것이 좀 더 쉽게 이해할 수 있는 방법일 거예요. 우리는 누구나 기획과 디자인을 구분할 줄 알기 때문이죠.
UX기획자는 사용자와 가까이에 있는 직군으로 사용자의 행동을 분석하고 서비스에서 개선할 부분을 정량적 또는 정석적으로 조사하고 분석하여 그 결과를 동료들에게 이해할 수 있도록 전달합니다.

UI디자이너는 UX기획자에게 전달받은 문제점의 분석 결과를 사용자가 사용하기 쉬운 UI로 구상하고 시나리오로 정리한 후 UI 구성 요소의 일관성 있는 시각적 표현 및 프로토타입을 구현한다는 것에서 차이가 있다고 할 수 있어요.

즉 UX 디자인은 경험의 전반적인 느낌에 관한 것이고 UI디자인은 제품이나 서비스의 인터페이스가 어떻게 보이고 기능하는지에 관한 것입니다.

UX디자이너는 특정 문제를 해결하기 위해 사용자의 전체 여정을 고려하며 사용자가 어떤 종류의 문제에 직면하고 있는지, 특정 제품이나 서비스가 이를 어떻게 해결할 수 있는지 알아내는데 중점을 두고 있죠. 대상 사용자가 누구인지, 특정 제품이나 서비스와 관련하여 그들의 요구사항이 무엇인지를 알아내기 위해 광범위한 사용자 조사를 수행합니다. 그런다음 콘텐츠가 제품 전체에서 구성되고 레이블이 지정되는 정보 아키텍처를 구성하여 기본 청사진을 설정하는 와이어프레임을 만들어요.

이렇게 제품의 골격이 매핑되면 UI디자이너가 개입할 차례예요. 사용자가 접할 수 있는 모든 개별 화면과 터치포인트를 포함하여 사용자 여정의 모든 시각적 측면을 고려합니다. 버튼, 탭, 페이지 아래로 스크롤 또는 이미지 갤러리를 통해 스와이프 하는 것까지 말이죠! 이는 UI디자이너가 보이는 것에 관한 전부 뿐 아니라 서비스가 접근 가능하고 포괄적인지 여부에까지 큰 영향을 미친다는 것을 의미합니다.

👩‍🏫 UX / UI 디자인의 차이를 표로 정리해봤어요

👩‍🏫 UX 디자이너와 UI 디자이너의 역할 차이도 한 눈에 확인해보세요.

마지막으로 UIUX 디자인 시스템의 우수 사례 여섯 가지를 알아볼까요?

디자인 시스템의 우수 구축 사례를 살펴보면 일반적으로 브랜딩, 디자인 구성요소, 코드 등과 같이 주요 범주를 보여주는 최상위 탐색방식으로 설정됩니다. 이러한 디자인 시스템은 어떻게 활용하면 좋을까요? 예를 들어 사이트 내에 드롭다운 메뉴가 필요하다고 가정을 하면 우수 구축 사례를 표본으로 삼아 화살표가 드롭다운 메뉴와 얼마나 떨어져 배치되어야 하는지 또는 완전히 확정되었을 때의 모습을 샘플로 삼아 손쉽게 적용하고 구현할 수 있어요.

즉 모든 것을 새롭게 구축하는 것보다는 UIUX 디자인 시스템 우수 사례를 통해 디자인 시스템의 구현과 사용 방법을 이해하는 것이 도움이 됩니다.

1. 구글 머티리얼 디자인 시스템

구글의 머티리얼 디자인 시스템은 안드로이드, iOS, 플러터 및 웹을 위한 고품질 디지털 경험을 구축할 수 있도록 만든 디자인 시스템이에요. 2009년 공개 이후 낯선 모바일 환경에 대해 많은 사람들이 따를 수 있는 길을 열어주었습니다.

UIUX 디자인에 있어 머티리얼 디자인은 이전에 볼 수 없었던 방식으로 구성요소를 분류하고 그리드, 내비게이션, 컬러 등에 관해 가이드라인을 제공하고 있는 교과서적인 존재예요. 사이트에서는 스케치나 XD 등의 디자인 소프트웨어 구성요소 소스 파일을 직접 다운로드 할 수도 있고요.

또, 아래의 인터페이스 요구 사항을 충족하는 UI 구성요소 라이브러리도 제공하고 있어요!

2. 애플 휴먼 인터페이스 가이드라인스

디자인 언어의 시초라고도 할 수 있는 애플의 휴먼 인터페이스 가이드라인은 애플의 다양한 제품군에서 사용할 수 있는 템플릿과 지침을 제공하고 있습니다. 고인이 된 스티브잡스의 디자인 철학은 여전히 애플의 6가지 주요한 설계원칙으로 구성되어 사용되고 있죠.

애플은 이러한 휴먼 인터페이스 가이드라인을 통해 애플 제품군 간에 일관성을 부여하고 감성을 제공하면서 애플 고유의 사용자 경험을 유지하고 제공하고 있습니다.

3. 마이크로소프트의 플루언트 디자인

마이크로소프트는 아마도 컴퓨터를 사용하는 사람들에게는 가장 익숙한 기업일 텐데요. 마이크로 소프트는 디지털 환경에 대한 고려를 통해 포괄적인 디자인 방법론에 대해 고민했고, 편견을 배제하여 문제를 해결하고 새로운 아이디어를 통해 다양한 관점을 가진 사람들이 포괄적인 디자인을 생성하여 다양성을 배우기를 권장하고 있습니다.

웹, 윈도우, iOS 그리고 안드로이드 플랫폼에서 일관된 버전을 만들고 마이크로소프트의 제품의 논리와 모양을 이해할 수 있도록 돕고 있죠. 또한 UIUX 디자인을 가능한한 포괄적으로 만드는 방법에 대해 다양한 의견을 청취하고 있다고 해요.

4. 우버 디자인 시스템

우버는 승차공유 서비스 회사로 P2P승차공유, 승차 서비스 호출, 배달 서비스를 제공하고 있는 기업으로 잘 알려져 있어요. 그럼에도 불구하고 우버는 자신들만의 다양한 서비스 플랫폼에 브랜드의 정체성과 일관성을 유지하기 위해 디자인 시스템을 개발하였습니다.
우버의 디자인 시스템은 디자인 기업이 그대로 모방해도 좋을 만큼 디자인 시스템의 원칙을 그대로 반영하고 있어요. 브랜드 아키텍처와 로고의 사용 방법, 인터랙션과 목소리 톤에 이르기까지 디자인 시스템이 갖추어야 할 소재들을 모두 망라하여 카탈로그 형태로 제공합니다.

우버만의 독특한 정체성을 통해 승차 공유 서비스 기업에서 여행, 운송, 우주 공간 분야에 이르기까지 우버는 가고 싶은 곳과 상관없이 이동과 관련된 문제를 디자인 시스템을 통해 해결하려는 모습을 보여줍니다.

5. 쇼피파이의 폴라리스 디자인 시스템

쇼피파이는 우리에게 익숙한 기업은 아니지만 올인원 전자 상거래 플랫폼으로 전 세계 백 만개 이상의 기업을 지원하고 있어요. 전자 상거래 플랫폼의 디자인 시스템을 구축함으로써 전자 상거래가 모든 사용자를 위해 개선되고 더 쉽게 접근할 수 있도록 지원하죠.
쇼피파이의 경험 가치 중 주요 고려사항은 접근성과 국제화, 그리고 정보구조를 모바일에 적용하는 것입니다. 쇼피파이는 전자상거래 플랫폼이기 때문에 배려와 신뢰를 중요시하거든요. 어느 나라에서 어떤 플랫폼을 사용하던 상관없이 모든 화면, 모든 플랫폼, 모든 언어에서 작동하는 경험을 구축하는 것을 기반으로 해요.

쇼피파이의 디자인 시스템 역시 온라인에서 카탈로그 형태로 제공되며 GitHub, GraphQL API 그리고 피그마 UI키트를 제공하여 새로운 사이트를 구축할 수 있도록 디자인 가이드라인을 제공하고 있으니 꼭 한번 살펴보기를 추천해요!

6. 에어비앤비 디자인 시스템

에어비앤비는 모바일 환경이 구축되기 이전부터 자신들만의 브랜드 정체성 구축을 위해 시각적 언어를 디자인하기 시작했어요. 2016년, 엔지니어와 디자이너팀을 주축으로 일관된 경험과 플랫폼 간 통합을 목표로 DLS(Design Language System)의 첫 버전을 만들어 동기화 상태를 유지하기 위한 공통 언어 구축에 성공했죠.

에어비앤비의 디자인 부사장인 알렉스 슈라이퍼(Alex Schleifer)는 “구축하는 방법을 먼저 혁신하지 않고는 제품을 혁신할 수 없다”며 다자인 시스템을 구축하는 것이 투자 가치와 큰 도약으로 이어졌다고 말합니다.

에어비앤비는 2018년까지 디자인시스템 북을 인쇄물로 제공하고 있었으나 현재는 블로그 기사를 통해 디자인 시스템 구축과정에 대한 내용을 게시하고 있고, 디자인 시스템을 외부에 제공하고 있지는 않아요.
그럼에도 에어비앤비의 디자인 시스템 구축과정은 디자인 시스템을 구축하는데 큰 도움이 되기 때문에 한 번씩 방문하여 어떤 프로세스로 팀원들이 참여하고 디자인 시스템을 구축하고 발전시켜 나가는지 공부해 볼 필요가 있어요.

최근에는 에어비앤비 씨리얼이라는 타이포그래피를 개발했고, 그에 대한 사이트도 별도로 제공하고 있어요.
또 JSON기반의 애니메이션 오픈소스 라이브러리를 제공하는데요. 로티는 벡터 기반의 애니메이션으로 gif의 단점을 보완해 용량이 적고 해상도 저하가 없다는 장점이 있습니다. 여러 다양한 서비스들을 제공하고 있는 에어비앤비를 지켜보자면 에어비엔비는 디자인시스템은 물론 디자인 생태계에 얼마나 진심인지 느껴지죠?

UI? UX? 아리송했던 UIUX 디자인! 이해가 되셨나요? 주변에 “UIUX 디자인이 대체 뭐야?🤔”라고 물어보는 사람이 있다면, 이 글을 추천해주세요! 그럼 다음 시간에 더 재밌는 UIUX 디자인 콘텐츠로 다시 만나요! 안녕~

UIUX 디자이너의 꿈을
이룬 이야기도 만나보세요.