프로토타입이란?

📍내 아이디어를 가장 빠르고 저렴하게 테스트하는 방법!

휴대폰 매장에 가시면 흔히 '목각'이라고 불리는 모형을 보셨을 거예요. 프로토타입 역시 내 아이디어의 목각이자 모형이라고 생각하시면 됩니다.

프로토타입은 내가 만들게 될 제품/서비스의 아이디어를 빠르고 저렴하게 테스트하거나 검증하는데 사용되는 실사판 모형입니다.

📍전체 디자인 단계에서는 어디쯤 위치해 있는지 볼까요?

UX 디자인 프로세스를 위와 같이 5단계로 생각해 볼게요. 모형을 만드는 프로토타이핑 단계는 이 중 4단계쯤에 위치해 있습니다.

우리가 설계한 모형을 통해 실제 제품이 끼칠 수 있는 영향력을 가늠하고, 이후 실험을 통해 개선하거나 변경까지 해볼 수 있는 단계가 바로 프로토타이핑 단계입니다.

아이디어를 구체화 하세요

_{Adobe Xd}

_Protopie

✅ UX/UI 디자인에 관심이 있는 취준생

✅ UI 디자인은 할 줄 알지만 인터랙션 기능을 추가하는 법을 알고 싶은 디자이너

✅ 진행하고 있는 UX 프로젝트에 멋진 UI 애니메이션을 넣고 싶은 IT 기업 현직자

UI 프로토타이핑으로 내 아이디어를 구체적으로 표현하고 싶은 분들을 위해 클래스를 개설했어요. 기대하셔도 좋습니다!

안녕하세요!

UI 디자이너 아폴로 그래픽입니다.

📍가장 재미있는 프로토타이핑부터 배워보세요.

저는 현재 미국에서 프리랜스 UI 디자이너로 일하면서, '아폴로 그래픽'이라는 활동명으로 유튜브에서 UI 디자인 영상을 제작하고 있어요.

이번 클래스를 UX 전체 프로세스 중 UI 프로토타이핑에 중점을 둔 이유는 가장 재미있으면서도 실용적으로 활용하기 좋기 때문이에요.

제가 UI 디자이너로서 터득한 노하우를 클래스101에서 아낌없이 공개하겠습니다.

수많은 디자인 툴 중에서,

당신에게 꼭 필요한 툴부터 알려드려요.

📍"넌 무슨 툴을 써?"

프로토타이핑 단계로 가면, 항상 클라이언트나 팀원들끼리 자주 물어보는 얘기가 있어요. "넌 무슨 툴을 써?"라는 질문이죠. 취준생은 물론이고, 현직자들끼리도 그런 이야기를 한다는 게 신기하지 않나요?

현재 2021년을 기점으로 너무 많은 디자인 툴이 있어요. 다 좋아 보이고, 화려하니까 고르는데 어려움이 있는 게 당연해요. 그래서 이번 클래스에서 먼저 어떤 툴들이 있는지, 또 상황에 맞는 툴을 고르는 방법은 무엇인지를 함께 담아보려고 해요.

프로토타이핑에는 빠르게 만들 수 있는 Low Fidelity(최소한의 구성요소를 갖춘 형태)부터, 정교한 인터랙션을 구현해낼 수 있는 High Fidelity(완성에 가까운 형태)가 있습니다.

이번 클래스에서는 완성에 가까운 UI 디자인에 어도비 Xd와 프로토파이로 인터렉션을 적용하는 법을 배워보려고 합니다.

어도비 Xd & Protopie의 조합!

📍어도비 Xd하고 프로토파이는 짝꿍.

자, 그러면 커리큘럼을 구체적으로 이야기해볼까요?

우선 어도비 Xd라는 디자인 툴 사용법과 간단한 인터렉션을 적용해보고, 프로토파이라는 프로그램으로 조금 더 난이도 있는 마이크로 인터랙션을 적용시켜 볼 거예요.

이번 클래스에서 사용하게 될 어도비 Xd와 Protopie라는 툴을 시용하고 있는 저만의 노하우도 알려 드릴게요.

툴의 기초 사용법부터 만들어진 예제에 프로토타이핑을 적용해보는 것까지 이번 클래스를 통해서 모두 배울 수 있습니다!

프로토타이핑 개념부터

실제 인터랙션 구현까지!

📍48강으로 알차게 담았어요.

1챕터: 우선 처음에는 프로토타이핑이 정확하게 무엇인지, 그리고 UI 인터렉션에 모션 디자인이 어떤 역할을 하는지 알려드릴게요.

UI 인터랙션의 중요한 요소인 모션은 사용자들이 인터페이스를 쉽게 사용할 수 있게 도와주는 기능을 해요. 그리고 UI 디자인 요소들의 관계를 설명하고 이해를 도와주기도 해요. 모션의 기초, 그리고 속도와 Easing에 대해서 알려 드릴게요.

2챕터: 어도비 Xd 기본기를 배울 차례입니다. 설치부터 각각의 필요한 기능들을 차근차근 알려드릴게요. 한 번도 써보지 않은 분들도 따라오실 수 있어요!

3챕터: 기본기를 배웠으니, 배운 기능으로 간단한 쇼핑몰 테마로 UI 디자인을 로그인부터 검색, 제품, 장바구니 스크린까지 같이 만들어 볼 거예요.

4챕터: 자 이제 프로토타입 한 번 만들어 볼까요?! 자동 애니메이트 기능을 통해서 Xd에서 다양한 인터렉션을 추가해 볼 거예요.

5~6챕터: 어도비 Xd를 배운 것처럼, 더 견고한 인터랙션이 가능한 프로토파이 기본기를 알려드리고, 마이크로 인터렉션을 적용한 프로토타입까지 이어서 만들어 볼게요!

당신의 값진 아이디어가

실제 결과물로 나올 수 있도록

📍인생은 프로토타입을 배우기 전과 후로 나뉜다..?!

너무 과한 말 같나요😅?

하지만 정말 어도비 Xd와 Protopie를 배우고 나면 많은 것들이 달라질 거라고 확신해요.

사람들에게 내 머릿속 생각을 눈앞에 움직이는 아이디어로 보여주세요. 진행하던 프로젝트는 속도가 붙고, 당신의 커리어는 더 화려해질 거예요.

그럼, UI 프로토타이핑 클래스에서 뵐게요 :)