UX(User Experience)에 사용되는 용어와 관련 산출물

웹기획이라는 말대신 요즘은 UX/UI 디자이너라는 말이 많이 사용되는 것 같습니다. 다양한 현장을 경험하게 되면 각 현장에서 최신의 트렌드에 맞춰 용어들이 변화되는 것들을 느끼게 되는데요. PM이라는 용어 대신 웹기획이라고 하기도 하고 PL이라는 이름을 붙이기도 하더군요. 조금씩 그 역할의 범위가 다르긴 하지만, 대체로 고객의 요구사항을 파악하여 그 요구사항을 구현하도록 가이드라인을 잡는 사람 정도가 적합하지 않을까 하는 생각을 해봅니다. 좁고 깊게 들어가느냐 넓게 두루 보느냐에 따라 역할의 범위가 조금씩 달라지는 것 같습니다.

 

이 글은 UX에 대해 정의하고 UX업무를 수행할 때 주로 사용되는 용어가 무엇이 있는지 각 용어에 따른 산출물들은 무엇이 있을지에 대해서 정리해보고자 합니다. 

 

UX(User Experience)란

UX는 제품이나 서비스와 상호 작용하는 사용자 경험을 말합니다. 이는 처음 접하는 단계부터 사용 후 발생하는 경험에 이르기까지 모든 것을 포함합니다. UX 디자인은 사용자의 니즈와 요구 사항을 파악하고 이를 바탕으로 사용자 중심의 디자인을 구현하는 과정입니다. 제가 IT분야 초기 일할 때는 이러한 고려 없이 기능 구현에만 신경을 썼지만 이젠 컴퓨터와 인터넷 기술이 발전하면서 UX 분야도 발전하고 있는 것 같습니다.

 

UX 분야에서 사용되는 용어들 중 자주 듣게 되는 것들은 대체로 아래와 같습니다. 이런 용어들은 업무와 연관된 이들과 소통할 때 사용하게 되며 UX 디자이너는 서비스를 이용하는 과정에서 불필요한 어려움이나 혼란을 줄이기 위해 사용자를 이해하고 개선하는데 주력하게 됩니다.

1. 웹 사이트 흐름 (Website Flow)
2. 유저 테스트 (User Testing)
3. 정보 아키텍처 (Information Architecture)
4. 사용자 프로파일 (User Profile)
5. 원격 사용자 테스트 (Remote User Testing)
6. 디자인 시안 (Design Mockup)
7. 인터랙션 디자인 (Interaction Design)
8. 사용자 중심 디자인 (User-Centered Design)
9. 유저 인터페이스 (User Interface, UI)
10. 키즈 테스트 (A/B Testing)

 

웹사이트흐름(Website Flow)

웹사이트 흐름(Website Flow)은 웹사이트의 사용자 경험을 디자인하기 위해 사용되는 개념입니다. 웹사이트 흐름은 사용자가 웹사이트를 탐색하면서 어떤 단계들을 거쳐 이동하는지를 나타냅니다. 즉, 사용자가 웹사이트를 방문할 때 어디서부터 시작해서 어떤 경로를 따라 이동하며 웹사이트의 각 페이지를 방문하는지를 표시하는 것입니다.

 

웹사이트 흐름은 웹사이트 디자인 및 사용자 경험을 개선하기 위해 중요한 개념입니다. 올바른 웹사이트 흐름을 디자인하면 사용자가 웹사이트를 더욱 쉽게 이해하고 사용할 수 있으며, 이는 웹사이트의 성능과 성공에 큰 영향을 미칩니다. 웹사이트 흐름은 주로 와이어프레임, 플로우 차트, 또는 마인드맵과 같은 도구를 사용하여 시각화합니다.

 

업무흐름 모형 또는 표기법에 관하여 : BPMN

플로우차트, BPMN, 마인드맵, 와이어프레임 제작 툴 : diagrams.net, figma

※ 위 표기법,툴은 웹기획을 하면서 주로 사용했던 것을 정리했지만, 매우 다양한 툴과 방법론들이 있으니 자신에게 적합한 것을 찾으면 되겠습니다.

 

유저 테스트(User Testing)

유저 테스트(User Testing)란 제품 또는 서비스를 사용하는 사용자를 대상으로 테스트를 실시하는 것입니다. 유저 테스트는 사용자의 행동, 반응, 선호도 등을 이해하기 위해 사용됩니다. 이를 통해 제품 또는 서비스의 잠재적인 문제점을 파악하고 개선할 수 있습니다. 유저 테스트는 일반적으로 사용자를 대상으로 특정 임무를 수행하도록 요청합니다. 이를 통해 사용자가 제품 또는 서비스를 사용하는 과정에서 마주치는 문제점과 어려움을 파악할 수 있습니다. 유저 테스트는 종종 직접적으로 사용자와의 인터뷰, 설문 조사, 시나리오 기반 테스트, A/B 테스트, 그리고 사용자의 행동을 기록하는 등의 방법으로 수행됩니다.

 

유저 테스트는 제품 또는 서비스를 개발하거나 디자인하는 과정에서 매우 중요한 역할을 합니다. 제품 또는 서비스를 사용하는 사용자의 요구 사항과 니즈를 이해하는 데 도움이 되며, 이를 통해 제품 또는 서비스를 보다 사용자 친화적으로 개선할 수 있습니다.

 

정보 아키텍처 (Information Architecture)

정보 아키텍처(IA)는 디지털 제품이나 서비스에서 정보를 구성하고 조직하는 방법입니다. IA는 사용자가 제품이나 서비스 내에서 정보를 찾고 이를 이해하기 쉽게 구성하는 것을 목표로 합니다. IA는 메뉴 구조, 카테고리 구성, 탐색 방식, 정보 구성 등으로 구성되며, 사용자의 정보 수요와 기업의 비즈니스 목표를 고려하여 설계되어야 합니다. 따라서 IA 설계 과정에서는 사용자 조사, 콘텐츠 분석, 사용자 테스팅, 유저 플로우, 와이어프레임 등의 방법을 활용하여 정보 구성을 최적화할 수 있습니다. 정보아키텍처(IA)를 설계하기 위해서 주로 사용되는 방법은 아래와 같습니다. 이 외에도 다양한 방법들이 있으며 자신에게 적합한 것을 선택하여 사용하면 되겠습니다.

1. 카드 정렬 (Card Sorting) : 사용자들이 원하는 정보들을 카테고리별로 분류하는 과정에서 사용되는 방법입니다. 카드에 적힌 정보를 사용자들이 그룹화하여 사용자의 시각으로 정보 아키텍처를 설계하는데 도움을 줄 수 있습니다.
2. 유저 플로우 (User Flow) : 사용자가 디지털 제품을 사용하는 과정에서 어떤 경로로 이동하는지 시각화하는 방법입니다. 사용자들이 원하는 정보를 찾아가는 과정에서 중요한 정보들을 시각적으로 파악할 수 있습니다.
3. 와이어프레임 (Wireframe) : 디지털 제품이나 서비스의 기본적인 레이아웃과 정보 구성을 표현하는 방법입니다. UI 요소의 위치와 크기, 콘텐츠의 배치 등을 표현하여 정보 아키텍처를 구성하는데 도움을 줄 수 있습니다.
4. 특성 트리 (Characteristic Tree) : 대량의 콘텐츠나 정보들을 구조화하고, 중요한 정보와 그렇지 않은 정보를 구분하는 데 사용되는 방법입니다. 이를 통해 사용자가 가장 필요한 정보들을 우선적으로 보여줄 수 있습니다.
5. 사이트 맵 (Site Map) : 디지털 제품이나 서비스의 전체 정보 구성을 시각화하여 보여주는 방법입니다. 사용자가 원하는 정보를 쉽게 찾을 수 있는 구조를 설계하는데 도움을 줄 수 있습니다.

 

사용자 프로파일 (User Profile)

사용자 프로파일(User Profile)은 특정 사용자나 고객층에 대한 정보를 담은 문서입니다. 이 정보는 해당 사용자나 고객의 인적 사항, 관심사, 선호도, 행동 패턴, 구매력 등을 포함할 수 있습니다. 사용자 프로파일은 디자인, 마케팅, 제품 개발 등에 활용됩니다. 예를 들어, 제품 개발 단계에서 사용자 프로파일은 제품 디자인, 기능 개발 및 사용성 테스트에 활용될 수 있습니다. 또한, 마케팅 단계에서는 특정 고객층을 대상으로 한 광고, 콘텐츠, 이벤트 등을 기획할 때 유용하게 활용됩니다.

 

이를 위해서는 사용자 데이터를 수집하고 분석해야 합니다. 사용자 프로파일을 작성하기 위해서는 사용자 설문조사, 인터뷰, 사용자 행동 분석 등 다양한 방법으로 사용자 데이터를 수집하고 분석해야 합니다.

1. 인적 사항: 이름, 성별, 나이, 국적, 직업, 학력 등
2. 관심사 및 취미: 관심 분야, 취미, 선호하는 브랜드나 제품 등
3. 사용 습관: 사용하는 기기, 사용하는 시간대, 주로 이용하는 앱이나 웹사이트 등
4. 구매력 및 구매 습관: 구매하는 빈도, 구매 대상, 구매 시기, 결제 방법 등
5. 행동 패턴: 사용자가 제품이나 서비스를 이용하는 방법, 목적 등

이 외에도, 사용자 프로파일을 구성하는 요소는 다양합니다. 사용자 프로파일을 작성할 때는 해당 분야나 제품의 특성에 맞게 적절한 요소를 선택하여 활용하는 것이 중요합니다.

 

원격 사용자 테스트 (Remote User Testing)

원격 사용자 테스트(Remote User Testing)는 지리적으로 분산된 사용자를 대상으로 한 사용성 테스트입니다. 이 방법은 실제 사용자가 원격으로 테스트를 진행하고, 제품의 사용성 문제를 파악하고 개선하는 데 사용됩니다.원격 사용자 테스트는 지리적 제약이 없고 비용이 저렴하므로 다양한 도구와 기술을 활용할 수 있습니다. 화상 회의 도구, 사용자 비디오 녹화, 원격 제어 소프트웨어 등이 있습니다. 이 방법은 실제 사용자들이 제품을 사용하고 있는 모습을 관찰할 수 있어 보다 현실적인 사용성 테스트 결과를 얻을 수 있습니다.

 

하지만, 원격 사용자 테스트에는 일정한 제약 사항이 있습니다. 예를 들어, 테스트 환경이 사용자들의 실제 환경과 다르다는 점, 소프트웨어 오작동 등의 기술적 문제 등이 있을 수 있습니다. 따라서, 적절한 테스트 방법과 도구를 선택하여 이러한 제약 사항을 고려해야 합니다.

1. 화상 회의 도구: Zoom, Google Meet 등의 화상 회의 도구를 이용하여 실시간으로 사용성 테스트를 진행할 수 있습니다. 사용자와 직접 대화하면서 제품을 사용하는 과정을 관찰할 수 있습니다.
2. 원격 제어 소프트웨어: TeamViewer, AnyDesk 등의 원격 제어 소프트웨어를 이용하여 사용자의 컴퓨터를 원격으로 조작하여 테스트를 수행할 수 있습니다.
3. 원격 녹화 소프트웨어: Camtasia, OBS 등의 원격 녹화 소프트웨어를 이용하여 사용자의 화면과 음성을 녹화하여 테스트 결과를 분석할 수 있습니다.
4. 테스트 자동화 도구: Selenium, Cypress 등의 테스트 자동화 도구를 이용하여 사용자의 행동을 자동으로 시뮬레이션하여 테스트를 수행할 수 있습니다.
5. 사용자 피드백 도구: UserTesting.com, Usabilla 등의 사용자 피드백 도구를 이용하여 사용자의 피드백을 수집하고, 분석하여 개선 방향을 도출할 수 있습니다.

이 외에도 다양한 원격 사용자 테스트 방법과 도구가 존재합니다. 테스트의 목적과 테스트 대상의 특성에 맞게 적절한 방법과 도구를 선택하여 사용할 필요가 있습니다.

 

디자인 시안 (Design Mockup)

디자인 시안 또는 모형은 디자이너가 웹사이트, 앱, 프로덕트 등의 외관 디자인을 보여주는 시각적인 모형입니다. 디자인 시안은 UI와 UX 요소를 포함하여 전반적인 느낌과 레이아웃을 보여줍니다. 일반적으로 디자인 프로세스의 초기 단계에서 작성되며, 검토와 피드백을 거쳐 디자인을 수정하고 최종적으로 코딩을 시작합니다. 디자인 시안은 프로젝트 진행 상황을 확인할 수 있도록 클라이언트나 개발자에게 제공되며, 사용자의 반응을 확인하고 개선할 부분을 파악할 수 있습니다. 이러한 이유로 디자인 시안은 디자인 프로세스에서 매우 중요한 역할을 합니다.

디자인 시안을 위한 추천할만한 툴은 다양하게 있습니다. 몇 가지 추천할만한 툴을 아래에 소개합니다.

1. Adobe XD는 디자인 시안 작업에 최적화된 툴입니다. 다양한 기능과 라이브러리를 지원하여 디자인 프로세스를 빠르고 효율적으로 진행할 수 있습니다.
2. Figma는 협업 기능이 강화된 툴로, 다수의 디자이너들이 동시에 작업할 수 있는 환경을 제공합니다. 디자인 시안 작업 뿐만 아니라 프로토타이핑까지도 가능합니다.
3. Sketch Sketch는 macOS에서만 사용 가능한 툴로, 웹사이트나 앱 등의 디자인 시안 작업을 위해 개발된 툴입니다. 다양한 플러그인과 라이브러리를 지원하여 높은 수준의 디자인 시안을 작성할 수 있습니다.
4. InVision Studio InVision Studio는 프로토타이핑과 디자인 시안 작업을 함께 지원하는 툴입니다. 디자인 시안 작업과 프로토타이핑을 동시에 진행할 수 있어 디자인 프로세스를 효율적으로 관리할 수 있습니다.
5. Canva Canva는 비디오, 소셜 미디어, 웹, 인쇄 등 다양한 채널에서 사용할 수 있는 디자인 시안 작업을 지원하는 툴입니다. 초보자들도 쉽게 사용할 수 있도록 다양한 템플릿과 도구를 제공합니다.

개인적으로 Adobe XD 보다는 좀더 가볍고 유연한 Figma가 최근 더 유용하게 사용하고 있습니다. 고전적으로 가장 오래 사용한 파워포인트는 목업 컴포넌트등을 활용하여도 화면레이아웃이 사용자가 보기에 거친 부분이 있어 Figma로 작업하여 디자이너, 개발자가 참고할 수 있도록 설명글을 덧붙이는 작업을 다시 PPT로 하는 형태로 작업하기도 했습니다. 모든 프로젝트 참여자가 Figma를 함께 사용한다면 이런 중간 작업 없이 좀 더 빠르고 효율적으로 작업속도를 낼 수 있지 않을까 생각해 보게 됩니다.

 

인터랙션 디자인 (Interaction Design)

인터랙션 디자인(Interaction Design)은 사용자와 디지털 기기 사이의 상호작용을 디자인하는 것을 의미합니다. 즉, 사용자가 디지털 기기와 상호작용하는 과정에서 느끼는 경험을 디자인하는 것입니다. 인터랙션 디자인은 사용자가 디지털 기기를 사용하는 과정에서 발생할 수 있는 문제점을 예방하고 사용자가 원하는 결과를 얻을 수 있도록 설계하는 것을 목적으로 합니다. 이를 위해 인터랙션 디자인은 다양한 방법론과 기술을 활용합니다. 예를 들어, 사용자 인터페이스(UI) 디자인, 정보 아키텍처(IA), 프로토타이핑, 테스팅 등이 인터랙션 디자인의 일부입니다. 

 

대표적인 인터랙션 디자인 툴은 아래와 같습니다. 이 외에도 인터랙션 디자인을 위한 다양한 툴이 존재하며, 필요에 따라 적절한 툴을 선택하여 사용할 수 있습니다.

1. Sketch: 벡터 기반의 디자인 툴로, 사용자 인터페이스(UI) 디자인을 위해 개발되었습니다. 플러그인을 통해 다양한 기능을 추가할 수 있어 매우 유연하게 사용할 수 있습니다.
2. Figma: Sketch와 비슷한 기능을 제공하지만, 브라우저 상에서 작업할 수 있기 때문에 여러 사람이 동시에 작업할 수 있습니다.
3. Adobe XD: Adobe의 디자인 툴로, UI 및 UX 디자인을 위해 개발되었습니다. 프로토타이핑, 테스팅, 공유 등의 기능을 제공합니다.
4. InVision Studio: 인터랙션 디자인, 애니메이션, 프로토타이핑 등 다양한 기능을 제공하는 툴입니다.
5. Axure: 프로토타이핑 및 와이어프레임 툴로, 인터랙션 디자인 및 테스팅을 위한 기능을 제공합니다.
6. Principle: 애니메이션을 위한 툴로, 간단한 모션 그래픽 및 프로토타이핑을 제공합니다.

 

사용자 중심 디자인 (User-Centered Design)

사용자 중심 디자인은 제품이나 서비스를 디자인할 때 항상 사용자의 경험을 우선시하는 접근 방식입니다. 사용자들의 니즈와 요구사항을 이해하고 그에 따라 디자인을 진행하므로 사용자가 제품이나 서비스를 쉽게 이해하고 사용할 수 있도록 도와줍니다. 사용자 중심 디자인은 디자인 프로세스에서 사용자와의 상호작용을 강조하며, 사용자를 중심으로 한 피드백 및 테스트를 통해 지속적으로 개선하는 방식으로 진행됩니다. 이를 통해 최종 제품이 사용자에게 적합하고 유용한 제품이 되도록 보장할 수 있습니다. 

 

유저 인터페이스 (User Interface, UI)

유저 인터페이스 (User Interface, UI)란 사용자가 제품, 서비스, 소프트웨어 등과 상호작용할 수 있는 인터페이스를 말합니다. 예를 들어 모바일 앱의 UI는 화면 상의 아이콘, 버튼, 텍스트, 이미지 등을 통해 사용자가 앱과 상호작용할 수 있도록 합니다. UI는 제품, 서비스, 소프트웨어 등의 외형과 기능을 결정하는 중요한 역할을 합니다. 따라서 UI를 디자인할 때는 사용자가 직관적으로 이해하고 쉽게 사용할 수 있도록 구성해야 합니다. 또한, 사용자가 불편하거나 혼란스러워하지 않도록 UI를 간결하고 일관성 있게 구성하는 것이 중요합니다. UI 디자인은 사용성, 시각적 디자인, 인터랙션 디자인 등 다양한 요소를 고려해야 하므로 디자인 업무에 있어서 중요한 부분입니다.

 

1. Dribbble: 디자인 커뮤니티 사이트로서, UI/UX 디자인을 비롯한 다양한 디자인 작업물을 확인할 수 있습니다.
2. Behance: Adobe가 운영하는 크리에이티브 작업물 공유 플랫폼으로서, UI/UX 디자인을 비롯한 다양한 작업물을 참고할 수 있습니다.
3. UI Design Daily: UI 디자인 작업물을 매일 무료로 제공하는 웹사이트로서, 디자인 아이디어를 참고할 수 있습니다.
4. UI8: UI 디자인 리소스를 판매하는 웹사이트로서, 다양한 UI 키트, 아이콘, 모션 그래픽 등을 구매하여 디자인 작업에 활용할 수 있습니다.
5. Sketch App Sources: Sketch 플러그인, 템플릿, 아이콘 등 Sketch 리소스를 공유하는 웹사이트입니다.
6. medium.com UX Magazine : 다양한 분야의 글이 포스팅되어 있으며 UX Magazine에서 UX에 관련된 글을 읽을 수 있습니다.

 

AB 테스트 (A/B Testing)

A/B 테스팅은 두 개의 버전(A, B)을 만들어 각각의 버전을 랜덤으로 사용자에게 제공하여 어떤 버전이 더 좋은 성과를 내는지 비교하는 실험적인 방법입니다. 이를 통해 사용자들이 더 많이 클릭하거나 구매하는 등의 목표를 달성하는데 어떤 디자인이나 기능이 더 효과적인지 검증할 수 있습니다.

 

예를 들어, 어떤 웹사이트에서 로그인 버튼의 색상을 파란색에서 노란색으로 변경하였을 때, 이를 A/B 테스트를 통해 비교하여 더 많은 사용자가 노란색 버튼을 클릭하는 것을 확인할 수 있습니다. 이렇게 효과적인 디자인이나 기능을 찾아내어 적용함으로써 사용자 경험을 개선할 수 있습니다.

 

A/B 테스팅은 웹사이트, 앱, 이메일, 광고 등 다양한 디지털 채널에서 사용될 수 있으며, Google Analytics, Optimizely, VWO 등의 툴을 이용하여 쉽게 구현할 수 있습니다.

 

마무리

UX(User Experience)에 관해 나올 수 있는 용어와 각 용어가 뜻하는 내용 그리고 작업을 위해 어떤 산출물을 만들어 내야 하며 그 산출물을 만들어낼 때 유용하게 사용할 수 있는 툴에 대해서 알아봤습니다. 어느 것 하나 딱 떼어 이것만 해야 하는 것이 아니라 복합적으로 모두 사용되는 것들입니다. 기본적인 흐름은 요구사항을 파악 - 설계 - 포로토타이핑 - 테스트 - 다시 반복하면서 고객의 요구사항을 더 잘 이해하고 맞춰나가면서 가치를 생산해 내는 것일 것입니다. 

 

 

자료수집 출처 : chatGPT, 인터넷검색, 개인적인 사용경험