UI_UX Design/UI Design 개론

Ch03_1_UX디자인설계

jsBae 2024. 10. 17. 10:15
학습목표
디자인 리서치 결과 분석 이후 UX 디자인 설계 프로세스를 학습한다.

디자인 리서치 결과 분석 이후 단계

디자인 리서치를 통해 사용자 이슈와 니즈를 분석하고 아이디어를 도출한 후 실제 UX 디자인을 시작하려면 작성해야 할 문서가 매우 많다.
리서치와 모델링을 마치는 단계에서는 클라이언트의 요구나 조직의 목표에 따라 이슈를 정하고
우리는 사용자 시나리오를 작성하게 되고 이를 바탕으로 보고서를 작성해 이에 따라 프로세스를 진행한다.

이러한 산출단계에서는

직접적으로 영향을 미치는 것은 사용자 시나리오, 사용자 시나리오에 기반해 IA, 이용흐름, 인터랙션 설계가 이루어 지면, 이러한 설계내용에 기반으로 와이어프레임과 디자인과 각각의 프로토타이핑으로 이루어 집니다.


정보 구조를 설계할 때는 (분해와 재조합)

사용자가 서비스를 쉽고 편리하게 이용할 수 있도록 정보를 재구성해야 한다.
이를 위해 디자이너는 모바일에 대한 이해와 논리적 사고를 바탕으로 메뉴와 콘텐츠를 구현 할 수 있어야 한다

먼저 해야 하는 일은 정보를 해체하고 재조합하는 과정을 반복하면서 탐색 구조를 논리적으로 설정하는 것이다.

다음으로 UI 디자인 작업에 들어가는데,

와이어프레임Wireframe을 통해 구현하되 효과적인 모바일 UI를 위해 구성 요소의 구체적인 사용 방법을 알고 있어야 한다. 구성 요소의 사용 방법을 익히고 모바일 UI 패턴을 파악하는 일은 사례를 통해 숙지하는 것이 좋다.
실제 운영되고 있는 사이트나 앱의 UI 패턴을 찾아보자.

다양한 상호작용 기법에 대해서도 UI 가이드라인을 바탕으로 운영체제별로 프로토타입Prototype을 제공해야 한다.

특히 고려해야 할 사항으로

PC 화면보다 작은 모바일 기기 화면의 공간 활용은 사용성과 가장 밀접한 관계가 있다
UI 디자인에는 서비스의 성격에 따른 은유 Metaphor를 충분히 활용하고 최적화된 색상을 적용해 브랜드와 조화를 이루도록 디자인 요소들을 배치해야 한다
이때 하드웨어의 기능도 고려해야 한다.

가이드라인 문서 

디자인을 완성하면 개발자가 디자인 파일을 이용해 작업할 수 있도록 가이드라인 문서를 작성한다.

사용성 테스트를 진행

모든 개발이 끝나면 사용성 테스트를 진행해 최종 수정 작업을 마치고 정식으로 제품이나 서비스를 출시한다.

2. 사용자 시나리오

앱을 개발할 때는 앱의 목적, 기존 앱과의 차이점, 앱에서 제공하는 서비스, 사용자의 활용법 등을 정리해보고, 특히 목표가 분명하면 정보 설계나 화면 설계 등에 좀 더 쉽게 접근할 수 있다이때 이용하는 사용자 시나리오User Scenario는 서비스가 제공할 사용자 경험을 이야기 형태로 기술하며 사용자 스토리보다 폭넓게 사용자 목표를 다룬다.

사용자 시나리오는 페르소나와 결합해 사용자의 테스트 목표와 동기를 이해하면서 서비스를 디자인하는데 유용하며, 사용자의 동기에 초점을 맞춰 프로세스를 문서화할 수 있게 한다.

이는 사용자가 서비스와 상호작용할 때 무엇이 동기부여를 하는지 이해할 수 있도록 하고 아이디어와 유용성 테스트를 도와준다이 과정에서 사용자가 앱을 사용하는 방법을 시각화하면 디자인 아이디어 를 생성하는 데 도움이 된다또한, 사용성 테스트를 할 가장 중요한 영역을 결정하고 각 테스트 수행 방법에 대한 지침을 제공하는 데 사용할 수도 있다.

사용자 시나리오는 사용자의 특성을 파악한 후 시놉시스Synopsis 작성 과정을 거쳐 완성한다.


2.1 사용자 특성 파악

페르소나는 가상의 사용자 또는 이를 통한 사용자의 역할 정의를 뜻한다.
즉 사용자에게 공통적으 로 나타나는 이용 패턴이나 이용 심리 등을 캐릭터로 특정짓는 것을 말한다.

예를 들어, 여행 관련 앱에서 특정 지역의 자유여행에 관심 있는 사용자 그룹을 다음과 같이 정의할 수 있다:

  • 해외여행에 관심이 있는 그룹
  • 배낭여행이나 자유여행을 떠나는 그룹
  • 특정 지역의 정보에 관심이 많은 그룹
  • 방학이나 휴가 등의 여가를 해외에서 자유롭게 보내려는 그룹

이때 간단한 줄거리나 개요가 포함된 시놉시스가 필요한데, 이 개념을 앱 개발에 적용해 앱 사용 동기와 니즈에 대한 개요를 가상으로 설정한 것을 말한다.

사용자 시나리오는 페르소나를 기반으로 하는 것이 일반적이며, 페르소나와 시놉시 스에서 대상으로 하는 사용자는 여러 명일 수 있지만 최대 일곱 명을 넘지 않도록 한다.

사용자 시나리오는 사용자가 경험할 이야기를 미리 그려 보면서 서비스 전체의 윤곽을 표현하는 것이다. 페르소나를 활용해 사용자의 앱 사용 시기와 목적, 사용자가 앱을 다루면서 하는 행동을 분석하고 예측하기 위해 작성한다또한, 모든 단계마다 일어나는 사용자와 서비스의 상호작용을 기술해 서비스 이용에서 발생할 수 있는 모든 과정을 체계적으로 정리하고 사용자가 서비스에 대 해 느낄 장단점을 예측한다.


2.2 시놉시스 (User Synopsis) 작성

시놉시스 (User Synopsis) 란
사용자를 통해 앱을 요약해 소개하는 내용으로, 사용자가 앱에서 무엇을 얻고자 하는지에 대한 이야기 구성된다.

주요 요소는 다음과 같다:

  • 사용자의 이름, 직업, 성격, 사진: 사용자를 구체적으로 묘사하는 요소들로, 앱에서 특정 행동을 하는 이유와 관련이 있다.
  • 오프라인 활동 및 앱 이용 패턴: 사용자가 일상에서 어떤 활동을 하며, 앱을 어떤 방식으로 사용하는지에 대한 정보를 포함한다.

예시로, 방학이나 휴가 기간을 해외에서 자유롭게 보내려는 그룹을 사용자 그룹으로 설정할 경우, 시놉시스는 이들이 앱에서 어떤 정보를 찾고, 어떤 기능을 주로 사용하는지에 대한 내용을 중심으로 작성된다. 이를 통해 UX 설계자는 해당 사용자 그룹에 적합한 경험을 디자인할 수 있다.


2.3 시나리오 User Scenario 작성

시놉시스를 작성했다면 이를 바탕으로 사용자의 니즈를 파악하고 불만 사항과 이를 해소할 수 있 는 대안을 마련한 후 이를 구체적으로 묘사해 서비스 시나리오를 작성한다.

사용자가 이렇게 하면 어떨까?’라는 질문을 통해 사용자의 맥락이나 상황을 설명할 수 있어야 하며, 문제점을 파악해 서비스나 앱이 사용자와 어떻게 상호작용할 것인지 예상해야 한다.

사용자 시나리오에 들어가야 할 조건 

  • 사용자: 페르소나로 정의된 가상의 사용자 또는 특정 사용자 그룹을 의미한다.
  • 향후 겪게 될 경험: 실제 사용자의 동기, 행동, 고충, 니즈, 태도 등을 고려하여 리서치 결과를 바탕으로 서술된다.
  • 아이디어: 사용자가 경험할 문제를 해결하기 위한 아이디어를 도출하는 단계이다.
  • 결과: 문제를 해결함으로써 제공하게 될 가치를 서술하며, 최종적으로 사용자가 얻게 될 경험을 기반으로 작성된다.

 

예를 들면 [3-1] 과 같이 표를 만들어 사용자 그, 시놉시스, 사용자 니즈, 불만 사항, 대안, 서비스 구성, 감성 요 소 등을 작성하고, 페르소나의 니즈와 앱의 사용 동기를 부여해 서비스 시나리오를 마련함으로써 앱을 앞으로 어떻게 사용할지 설정한다.

이때 사용자가 이렇게 하면 어떨까라는 질문을 통해 사용자의 맥락이나 상황을 설명할 수 있어야 하며, 문제점을 파악해 서비스나 앱이 사용자와 어떻게 상호작용할 것인지 예상해야 한다.

시나리오를 완성하면 페르소나의 동기와 니즈에 맞는 기능과 콘텐츠를 추출하고 사용자의 니즈를 달성하기 위해 할 일을 분석한다.사용자의 행동 패턴을 엮어 서비스와 서비스 간의 정보를 찾아 가는 과정을 일련의 연결고리로 구성하고 그룹화하여 사용자의 이동 동선도 파악한다.

이렇게 파악한 정보를 바탕으로 정보 구조와 사용자 플로우 User Flow를 설계한다.


3. 스토리 보드

건축물을 짓기 위해서는 구체적인 설계도가 필요하듯이 웹사이트 또는 앱을 제작하기 위해서는 설계도면이 필요함.
IT 현장에서는 이를

와이어프레임, 스토리보드, 프로토타입으로 구분

스토리보드Storyboard는 사용자의 경험을 예상하고 탐색할 수 있도록 도와주는 도구로,
사용자 스토리 또는 사용자 시나리오를 기반으로 만든다

간단하게 정의하면 작업자와 클라이언트가 이해 할 수 있도록 만든 스케치라고 할 수 있다.

작업 전에 클라이언트에게 프로젝트 결과물을 이해 시키거나, 디자이너, 코더, 프로그래머에게 작업 내용을 이해시키기 위해 서비스 화면의 구성과 기 능을 설명한 자료이다.

스토리보드에는 페르소나가 반드시 있어야 하며, 페르소나를 둘러싼 장소나 맥락, 상황과 역할이 명확하게 나타나고, 그에 대해 구체적으로 설명되어 있어야 한다.

일반적으로 스토리보드가 완성되면 디자이너는 그 내용을 바탕으로 화면 디자인부터 시작해 UI 데이터를 그린다또한 프로그래머는 스토리보드를 보고 프로그램 및 데이터베이스를 설계하고 각 세부 로직을 프로그래밍하거나 코딩한다따라서 개발 단계에서 필요한 부분이 있다면 당연히 프로그래머와도 충분히 협의해야 한다.

이 스토리보드는 사용자가 사무실 물품을 관리하고 주문하는 과정을 시각적으로 명확하게 설명한다. 이를 통해 UX 디자이너는 사용자의 행동 흐름을 이해하고, 필요한 인터페이스 기능을 설계할 수 있다.

 

 

 

728x90
반응형