Creative Dialogue

교실에서 만나는 UX: 어도비 XD로 학생의 참여를 유도하는 방법

모든 프로젝트는 양질의 리서치와 반복 디자인 프로세스를 통해 펜과 종이를 사용한 아이디어 탐색으로부터 출발합니다. 작업이 어떻게 진행되는지 살펴보는 일은 인터랙티브한 리치 디지털 제품을 설계 및 구축하는 방법에 대한 학습에서 중요한 부분입니다. 어도비 XD는 학생들이 자신의 콘셉트를 프로토타입으로 구현하고 다양한 가정 및 기능을 테스트하기 위한 라이브 데모를 구축하는 데 사용하도록 교사가 권장할 수 있는 디지털 툴입니다.

XD에는 학생들이 콘셉트에서 프로토타이핑까지 디자인 작업을 신속하게 수행하는 데 필요한 툴셋과 기능이 포함되어 있습니다. XD는 크로스 플랫폼이며, 이는 학생들이 특정 플랫폼의 제약을 받지 않는다는 의미입니다. 프로젝트 그룹에는 PC와 맥(Mac) 사용자가 모두 포함되며 이들 사용자들은 프로젝트 파일을 손쉽게 공유하고 디자인 과제 및 프로젝트를 공동으로 작업할 수 있습니다.

클라이언트와 함께 작업 시 공유 기능과 라이브 데모 기능을 사용하면 인터랙티브한 프로토타입을 제공할 수 있으므로 디자인 프로세스와 의사 결정 과정에 프로젝트 이해 관계자를 참여시킬 수 있습니다. 인터랙티브한 프로토타입을 사용하면 학생들이 사용자 사전 테스트 세션을 설정하여 사용자가 제품과 상호 작용하는 방식을 확인할 수 있습니다. XD의 디자인 및 프로토타이핑 기능은 UX 원칙을 배우는 학생이 쉽게 이용할 수 있으며 디자인 솔루션의 실행 가능성에 대한 인사이트를 얻을 수 있는 방법을 제공합니다.

디자인 효율성

UI 키트 및 구성 요소는 학생이 아이디어를 훼손하거나 직접 구현하지 않고도 디자인을 계획하고 구조를 구성할 수 있는 디자인 리소스입니다. UI 키트 구성 요소는 서로 연동되도록 설계되어 있으므로 학생들이 버튼 또는 위젯을 다시 만드는 것이 아니라 솔루션을 디자인하는 데 집중할 수 있습니다. UI 키트와 구성 요소를 찾고 있는 경우 XD에서 UI 키트 받기*를 누르면 애플, 구글 및 마이크로소프트의 UI 키트로 직접 연결됩니다. UI 키트에는 각 OS의 휴먼 인터랙션 가이드라인(HIG)에서 업데이트된 디자인 에셋 및 템플릿이 포함되어 있습니다. 또한 새로운 UI 와이어프레임 키트가 어도비 XD용으로 제공되고 있습니다.

*UI 키트 받기는 기본 메뉴 시스템의 파일 탭 아래에 있습니다.

공통 디자인 요소를 만들어 반복하는 기능은 디자인의 효율성을 높이는 핵심으로, 반복적인 복사/붙여넣기 작업을 줄여줍니다. XD의 반복 그리드 기능을 사용하면 한 번 디자인한 다음 디자인 요소 또는 기타 시각적인 에셋을 복사해 아트보드에 붙여넣거나 위치를 조정하지 않고도 반복할 수 있습니다. 반복 그리드는 가로 및 세로 방향을 모두 지원하므로 모든 유형의 콘텐츠를 생성할 수 있습니다. 라이브 드래그 앤 드롭 기능을 사용하여 이미지 갤러리 또는 기타 이미지 중심의 콘텐츠를 제작할 수 있습니다. 간편한 아트보드 관리, 고급 안내션 및 그리드를 통해 학생들은 더욱 향상된 디자인 작업을 수행할 수 있습니다. 학생들은 드롭박스(Dropbox)와 제플린닷아이오(Zeplin.IO)를 비롯한 서드파티 통합 서비스를 활용하여 보다 손쉽게 공동 작업을 수행하고 프로젝트 파일을 공유할 수 있습니다. 학생들이 프로토타입을 미리 보고, 간편한 디자인/개발 워크플로우를 만들고, 레이아웃 및 사양 전달 작업을 수행할 수 있으므로 프로젝트 그룹은 프로젝트 업무에 집중할 수 있습니다. 프로젝트 에셋의 경우 추가 문서 작성 또는 코드 단편 라이브러리를 만들지 않고도 작업 프로젝트 파일에 쉽게 통합할 수 있습니다.

이미지 출처: 어도비

실제 문제 해결

학생들의 참여를 늘리기 위해 실제 문제를 해결하고 XD를 이용하여 실제 솔루션을 만드는 과제 및 프로젝트를 만들 수 있습니다. XD를 활용한 실제 솔루션을 만들면 사용자에게 중요한 아이디어와 경험을 구현하는 방법을 학생들에게 제공할 수 있습니다. 과제와 프로젝트에 사용할 수 있는 콘텐츠가 다양하게 있습니다. 학생들의 실제 경험을 고려하여 이들이 이해하고 공감할 수 있는 문제를 과제로 내줄 수 있습니다. 예를 들어 향상된 강의 등록 시스템 또는 온라인 강의 카탈로그, 그리고 취소된 강의를 위한 공지 시스템 등을 제작할 수 있습니다. 교통 문제 해결책으로 평상시 이용자나 이용 빈도가 낮은 이용자에게 대중 교통 이용을 고려하게 할 수 있고, 또는 사람들이 어떤 재활용품이 허용되는지 확인하도록 도와주는 지역/도시 재활용 앱을 만들 수 있습니다.

실제로 존재하는 문제는 상황을 제공하므로 학생들은 문제를 쉽게 식별하여 반복 디자인 프로세스를 통해 디지털 솔루션을 디자인할 수 있습니다. 프로토타입, 검토, 세부 조정은 학생의 아이디어를 구현할 수 있는 단순한 방법입니다. 초기 단계에서는 학생은 충분한 시간 동안 프로젝트의 목표를 세우고 가능한 솔루션을 브레인스톰한 다음 사용자/그룹 피드백과 사용자 경험 모범 사례를 적용한 솔루션의 목업을 만듭니다. 그런 다음 다른 학생들과 초기 개념을 검토하고 사용자의 기대에 부응하는지 평가합니다. 피드백을 받은 다음에는 사용자 피드백을 적용하거나 프로토타입의 기존 기능과 프레젠테이션을 변경하여 콘셉트를 세부적으로 손질하는 과정을 거칩니다.

“실제 문제를 해결하고 XD를 사용하여 실질적인 솔루션 제작”

수업 예시:

  • 문제 또는 프로젝트 범위 정의(필요한 기능 또는 작업) 15분
  • 브레인스톰 및 프로토타이핑 45-60분
  • 프로세스에 집중하도로록 학생 그룹 모니터링
  • 프로토타입 검토/피드백 세션 15-20분
  • 세부 조정 45분
  • 검토/피드백 세션 15-20분

인터랙티브한 프로토타입 제작

학생들이 자신의 디자인 솔루션을 스케치한 다음 XD에 인터페이스 레이아웃을 적용했다면 작업에 사용할 인터랙티브한 프로토타입을 비교적 빠르게 설정할 수 있습니다. 이 프로토타이핑 뷰를 통해 클릭 또는 손가락으로 누를 수 있는 요소를 다른 아트보드의 각 요소와 연결하여 사용자 또는 작업 흐름을 설정할 수 있습니다. 그런 다음 연결 핸들 및 전환 팝업 상자를 이용하여 아트보드 및 인터페이스 구성 요소를 통해 진행 상태를 생성할 수 있습니다.

이미지 출처: 어도비

하이 피델리티의 인터랙티브한 프로토타입을 구축함으로써 얻을 수 있는 이점 중 하나는 사실감으로, 학생들이 사용자 결과 사전 테스트에 집중하는 동안 의구심을 배제하게 하여 높은 성취감을 얻을 수 할 수 있습니다. 인터랙티브한 프로토타입을 통해 학생들은 내비게이션 요소, 인터페이스 구성 요소 및 정보 계층 구조를 테스트할 수 있습니다. 학생들이 인터랙티브한 프로토타입 사전 테스트를 마치면 디자인 솔루션에서 효과적인 기능과 그렇지 않은 기능을 취합할 수 있습니다.

취합

프로토타이핑 연습에 일련의 제약 사항을 추가하고 학생이 수행 가능하거나 해결할 수 있는 도전 과제를 추가할 수 있습니다. 초기 프로토타입 및 사용자 사전 테스트를 모두 완료한 다음에는 학생들이 제약 사항 카드를 선택하고 해당 사항을 자신의 디자인 솔루션에 적용하도록 합니다. 프로토타입 작업에 이러한 어려운 과제를 추가하면 학생들 스스로 솔루션의 접근 방식을 다시 생각하고 클라이언트가 적용한 변경 사항을 시뮬레이션해 볼 수 있습니다.

이미지 출처: Constraint.co

이미지 출처: Constraint.co

결과

학생들은 사용이 간편한 유저 인터페이스와 프로토타이핑을 포함한 다양한 측면에서 어도비 XD의 유용한 점을 발견하게 될 것입니다. 디자인 프로세스 간소화, 재사용 가능한 콘텐츠 제작 및 외부 에셋 라이브러리를 통해 작업할 수 있는 추가적인 이점으로 인해 학생들이 효율적인 공동 작업 방식으로 디자인하는 데 도움이 될 것입니다. 다이내믹한 애니메이션과 인터랙티브한 요소를 활용하여 여럿이 공유할 수 있는 인터랙티브한 프로토타입을 만들어 보십시오. 모든 스킬이 그렇듯이, 부단한 연습은 툴을 습득할 수 있는 지름길이며, 학습이 이루어진 이후에는 즐겁고 유용한 디지털 제품 구축 방식을 처음 시작할 때보다 더욱 잘 이해할 수 있습니다.

추가 리소스:

어도비 XD 튜토리얼

어도비 XD 아트보드

어도비 XD 팁 및 기법

UX에 대한 유용한 정보를 이메일로 받아보려면 어도비의 경험 디자인 뉴스레터를 구독하십시오.

 

원문보기

디자인, 앱 및 웹 디자인

Join the discussion