DEVOCEAN

안녕하세요😃 현재 CX Design팀에서 UX디자이너로 근무하고 있는 kaka입니다.

저는 현재도 그렇고 개발자 분들과 꽤 긴 시간 협업을 해왔었는데, "UX디자이너? UI디자이너? 둘의 차이가 뭐야?" 라고 질문하시는 경우가 많았습니다.

IT업계 재직자 또는 목표로 하시는 분들이라면 UX/UI라는 단어를 많이 들어보셨겠지만 두가지가 정확히 어떻게 구분되는지 잘 모르시는 분들도 있을 겁니다.

SW업계 디자인에서 ‘사용자 경험(UX)’와 ‘사용자 인터페이스(User Interface)’는 서로 다른 목적과 정의에도 불구하고 자주 혼용되는 용어 입니다.

이러한 UX/UI 디자인의 차이점과 사용자 경험을 구성하는 요소에 대해 소개해보고자 합니다.

Image) designerrs.com

UX 디자인의 정의

UX 디자인은 ‘사용자 경험 디자인(User eXperience Design)’의 약자로 주로 User Interface가 있는 제품의 사용자의 경험을 향상시키는 디자인이라고 알고 계실 겁니다.

UI(User Interface), UX(User Experience)는 인터랙티브 제품의 디자인과 사용 및 그 밖에 대해 비판적으로 생각하기 위한 일련의 개념, 가이드라인, 워크플로우를 설명합니다(Garrett, 2010).

이때 ‘사용자 경험(UX)’은 사용자가 제품 또는 서비스와 상호작용할 때의 여정을 말합니다.

UX디자인은 브랜딩(branding), 사용성(usability), 기능(function), 디자인(design) 등 제품 개발의 다양한 영역을 포함하여

사용자에게 의미 있는 경험을 제공하는 제품이나 서비스를 만드는 프로세스입니다.

따라서, 훌륭한 사용자 경험을 제공하는 제품 또는 서비스는 사용자의 소비나 사용, 구입, 소유, 심지어 문제 해결까지의 전체 프로세스를 염두에 두고 설계됩니다.

또한, UX디자이너는 사용가능한 제품을 만드는 것 뿐만 아니라 즐거움, 효율성, 재미와 같은 사용자의 다른 측면에도 중점을 둡니다.

따라서 좋은 사용자 경험에 대한 단적인 정의는 없는 것이죠!

좋은 사용자 경험은 제품을 사용하는 특정 상황에서 특정 사용자의 요구 사항을 충족하는 것이라고 볼 수 있습니다.

국제표준화기구 ISO에서는 사용자 경험(User Experience)를 다음과 같이 정의합니다.

"제품, 시스템 또는 서비스의 사용 또는 예상되는 사용으로 인해 발생하는 사람의 인식과 반응"

“A person's perceptions and responses that result from the use or anticipated use of a product, system or service.”

— ISO 9241-210, Ergonomics of human-system interaction—Part 210: Human-centered design for interactive systems

이 정의를 다음과 같이 두 가지로 분류할 수 있습니다.

1. 사람의 인식과 반응

2. 제품, 시스템 또는 서비스의 사용

사용자 경험에서 디자이너는 첫번째 정의인 '사람의 인식과 반응'을 제어할 수는 없습니다.

제품을 사용할때 누군가의 느낌, 손가락 제스쳐, 시선 같은 것들 말입니다. 하지만, 두번째 정의인 '제품, 시스템 또는 서비스의 작동 및 모양'을 제어할 수는 있습니다.

따라서, UX디자이너는 특정 사용자의 요구 사항을 충족시키는' 제품 또는 서비스 디자인'을 통해 사람의 인식과 반응을 '불러일으킬 수 있는' 것입니다.

사용자 인터페이스 디자인?

그럼 UI 디자인은 뭘까요?

‘UI(User Interface)디자인’은 사용자가 참여(engage)하는 실제 인터페이스(actual Interfaces)를 뜻합니다.

이때 사용자는 인터페이스의 화면, 버튼, 아이콘 등 시각적 요소와 상호작용하게 됩니다.

다시 말해 UI 디자인은 인터페이스에 기여하는 시각적 요소를 통해 제품과 서비스의 전반적인 스타일과 기능을 만드는 것입니다.

시각 & 인터랙션 디자인 영역에서 디지털 엔티티(digital entity)의 개별 요소를 구축하고 최적화하는 작업을 포함하게 됩니다.

UX디자인은 사용자 경험이 되는 총체적인 디자인을 뜻하며, UI디자인은 이러한 경험 디자인을 사용자가 느낄 수 있도록 시각적인 디자인을 제공한다 할 수 있습니다.

UX와 UI의 가장 큰 차이점은 다음과 같이 정리할 수 있습니다.

1. UX디자인의 목적은 사용자의 문제를 정의하고 해결하는 것

2. UI의 목적은 매력적, 인터랙티브한, 그리고 직관적인 Interface를 창조하는 것.

사용자 경험(User Experience)의 5가지 요소

그렇다면, 좋은 사용자 경험을 설계하기 위해서는 어떠한 요소가 필요할까요?

Garrett은 사용자 경험을 5가지 계층으로 정의하였습니다(Garrett,2000). 당시에는 웹 사이트를 구성하는 구조를 전제되었지만,

UX디자인을 기반하는 제품이나 서비스 전반에 적용할 수 있는 개념입니다.

사용자 경험(UX)은 전략층, 골격층, 구조층, 범위층, 전략층으로 구성되어 있습니다.

UX디자인은 이러한 요소의 전체 프로세스를 포괄하는 반면에 UI디자인은 표면(Surface)에 중점을 둡니다.

5가지 계층은 아래의 내용으로 정의 및 설계될 수 있습니다.

1. 전략층 : 사용자, 비즈니스 요구사항(User needs, business goals)

• 이 제품은 어떤 문제를 해결하려고 하는지?

• 모델의 가장 추상적인 계층인 전략층은 서비스의 목표를 설정하는 단계로 목표 고객을 설정하고 사용자에 대한 분석을 진행합니다.

2. 범위층 : 기능, 콘텐츠 요구사항(Functional and content requirements)

• 문제를 해결하기 위해 만들어질 제품은 무엇인지?

• 사용자 요구사항을 수집하여 기능(구축할 기능)과 콘텐츠(시각적 정보)의 요구사항을 정의합니다.

3. 구조층 : IA(Information Architecture)설계

• 디자인은 어떻게 구성되고 상호작용은 어떻게 작동하는지?

• 서비스에서 제공하는 정보의 구조와 인터랙션 방법을 설계하는 단계로, 콘텐츠의 구조 및 구성인 IA와 제품의 상호작용 경험이 포함됩니다.

4. 골격층 : Wireframe

• 정보가 어떻게 제시되고 배열되는지?

• 설계된 정보구조를 어떤 형태로 보이게할지 정하는 단계로 UI 요소를 구성하고 효과적인 정보 전달을 위한 정보디자인을 설계합니다.

  일반적인 아웃풋은 와이어프레임으로 산출됩니다.

5. 표면층 Visual Design

• 제품이 사용자에게 어떻게 보여지고 느껴지는지?

• 이 단계는 어떤 색상과 서체를 사용하는지 등 시각적 디자인을 강조하며 UI 디자인이 중심에 있는 단계입니다.

  감각적인 디자인과 제품의 골격을 구상하는 논리를 표현하는 방식을 결정하며, 우리가 흔히 ’디자인’이라고 할때 떠오르는 시각화 요소들이 표면층에 해당합니다.

'전략층(strategy)'에서는 제품이나 서비스의 최종적인 형태에 대해서는 전혀 신경쓰지 않으며,

'제품과 서비스가 사용자의 요구를 충족하는가?'에 대해서만 관심이 있습니다.

가장 높은 층인 표면층(surface)에서는 제품의 형태에 대한 아주 상세한 세부사항에 집중합니다.

한 층씩 높아질때마다 더욱 더 구체적인 수준의 결정을 내려야하고, 좀 더 세부적인 내용을 고려합니다.

일반적으로 UX디자인을 진행할때 추상적인 ‘전략층’부터 점점 더 구체적인 레이어를 거쳐 ‘표면층’의 순서로 작업하지만

실제로 실무에서 화면설계 또는 서비스 디자인을 진행할때는 레이어 간에 중복과 반복이 있습니다.

마치며

UX와 UI의 차이점 및 사용자 경험의 요소에 대해 작성해보았는데...

UX디자이너/기획자와 협업 할 기회가 있으신 분들도 이러한 개념을 알고계시면 디자인 프로세스를 이해 & 협업에 도움이 될 것 같습니다.

읽어주셔서 감사합니다! 👍

Reference

1. Elements of User Experience by Jesse James Garrett (2000)

2. Garrett’s 5 elements of User experience design, Jesse James Garrett (2000)

3. What is UX Design? Differences Between UX and UI Design, Columbia engineering boot camps

4. Roth, Robert. (2017). User Interface and User Experience (UI/UX) Design. Geographic Information Science & Technology Body of Knowledge.

5. why do people confuse UI with UX? An understanding of UI and UX, designers.com

6. UX vs. Service Design, nngroup (2021)