저희 팀은 ProtoPie School을 마련했습니다. 여기에서 ProtoPie를 A부터 Z까지 사용하는 방법에 대한 학습 콘텐츠를 모두 무료로 이용할 수 있습니다. 학습자가 자신의 속도와 시간에 맞춰 공부할 수 있도록 큐레이션했습니다. 하지만 새로운 도구를 익히기 위해 충분한 시간을 내는 일이 때로는 쉽지 않다는 점도 잘 알고 있습니다.
그래서 ProtoPie Bootcamp도 함께 소개드리고자 합니다. 이는 ProtoPilot의 Darren Bennett가 만든 과정입니다. 이 과정의 유일한 초점은 속도입니다. 빠르게 시작할 수 있도록 설계되었습니다.
2시간도 채 안 되어, 여러분은 ProtoPie로 직접 자신 있게 만들 수 있는 프로토타입에 놀라게 될 것입니다.
과정 내용
처음 9개의 영상은 놀랍도록 사실적이고 역동적인 프로토타입을 만드는 방법을 알려줍니다. 마지막 2개의 영상은 추가 자료로, 만든 결과물을 재사용 가능하고 확장 가능하게 만드는 방법을 보여줍니다.
가져오기
인터랙션 만들기
스크롤 및 페이지 이동
조건
씬
텍스트 입력
변수
수식
변화 감지하기
컴포넌트
메시지
1. 가져오기
Figma, Sketch 또는 Adobe XD의 디자인을 ProtoPie로 가져오는 방법을 알아보세요.
ProtoPie는 디자인 도구를 대체하지 않습니다. 대신 ProtoPie는 Figma, Sketch, Adobe XD와 함께 사용됩니다. ProtoPie를 땅콩버터라고 생각하고, 앞서 언급한 도구들을 잼이라고 생각해 보세요. 둘 다 개별적으로도 맛있습니다. 하지만 함께라면? 천생연분입니다.
다음 에셋을 참고해 보세요:
2. 인터랙션 만들기
객체, 트리거, 응답이 어떻게 작동하는지 알아보세요. 이 세 가지로 첫 인터랙션을 만들어 보세요.
이전 비유를 이어가자면, 첫 인터랙션을 만드는 것은 땅콩버터와 젤리 샌드위치의 첫 입을 베어 무는 것과 조금 비슷합니다. 여기서 배우는 내용은 기본 중의 기본입니다. 여러분이 만드는 모든 인터랙션—작든 크든, 조건 기반이든 동적이든—은 같은 개념 모델을 따릅니다.
다음 에셋을 참고해 보세요:
3. 스크롤 및 페이지 이동
프로토타입에 스크롤과 페이지 이동을 추가하는 방법을 알아보세요.
스크롤 및 페이지 이동은 현대 모바일 앱과 웹 디자인의 핵심 동력입니다. 프로토타입의 기반으로서 이 둘 중 적어도 하나는 항상 필요할 가능성이 큽니다. 정적인 레이어들을 스크롤과 페이지 이동을 통해 어떻게 상호작용 가능한 무언가로 바꾸는지 알아보세요.
다음 에셋을 참고해 보세요:
4. 조건
인터랙션을 조건부로 만드는 방법을 알아보세요.
ProtoPie의 장점은 특정 조건에 따라 프로토타입의 동작을 다르게 만들 수 있다는 점입니다. 하나의 고정된 "행복 경로"에만 머무르는 대신, ProtoPie의 프로토타입은 현실적이며 여러분이 떠올리는 모든 실제 시나리오를 아우를 수 있습니다.
다음 에셋을 참고해 보세요:
5. 씬
실제 예제를 통해 씬을 언제, 어떻게 사용하는지 알아보세요.
씬은 Figma의 최상위 프레임, Sketch와 Adobe XD의 아트보드와 비슷합니다. 씬을 연결하면 클릭형 전환을 만들 수 있습니다. 클릭형 프로토타이핑이 ProtoPie의 주된 목적은 아니므로, 여러 씬을 언제 어떻게 사용하는지 알아보세요.
다음 에셋을 참고해 보세요:
6. 텍스트 입력
실제 텍스트 입력을 받아 그 입력을 인터랙션에 활용하는 방법을 알아보세요.
사용자가 실제 제품을 사용할 때와 같은 방식으로 프로토타입과 상호작용하는 것이 중요합니다. 종종 간과되고 과소평가되는 텍스트 입력은 프로토타입에 추가할 수 있는 요소입니다. 거기서 끝나지 않습니다. 그 입력을 사용해 동적인 인터랙션을 만들 수 있습니다.
다음 에셋을 참고해 보세요:
7. 변수
변수를 사용하고 재사용 가능한 정보를 저장하는 방법을 알아보세요.
간단히 말해, 변수는 값의 저장소입니다. 값이 계속 바뀔 수 있기 때문에 변수라고 부릅니다. 간단한 예로는 카운터를 업데이트하는 것이 있습니다. 다른 활용 사례로는 입력된 이름을 저장하거나, 바구니에 담긴 항목 수를 유지하거나, 은행 계좌의 총액을 기억하는 것 등이 있습니다. 가능성은 무궁무진합니다.
다음 에셋을 참고해 보세요:
8. 수식
프로그래밍 지식 없이 수식을 사용하는 방법을 알아보세요.
Microsoft Excel이나 Adobe After Effects 같은 앱에서 수식을 접해 보셨을 수 있습니다. 수식은 동적인 인터랙션을 만들기 위한 한 줄짜리 지시문입니다. 수식이 "코드 같다"거나 복잡하게 들릴 수 있지만, 사실은 그렇지 않습니다. 조금만 알면 엔지니어만 할 수 있을 것 같았던 놀라운 인터랙션을 직접 만들 수 있습니다.
다음 에셋을 참고해 보세요:
9. 변화 감지하기
프로토타입의 어떤 변경 사항이든 일련의 응답을 트리거할 수 있는 방법을 알아보세요.
감지는 여러분이 활용할 수 있는 가장 유용한 트리거 중 하나입니다. 프로토타입의 어떤 변화든, 무엇이든, 일련의 응답을 트리거할 수 있습니다. 이 객체가 움직였나요? 이 버튼이 탭되었나요? 변수가 변경되었나요?
다음 에셋을 참고해 보세요:
10. 컴포넌트
인터랙션을 재사용하고 컴포넌트를 만드는 방법을 알아보세요.
ProtoPie의 강점을 알아가고 나면, 레이어와 인터랙션을 재사용 가능한 세트로 만드는 방법이 궁금할 수 있습니다. 컴포넌트는 Figma의 컴포넌트나 Sketch의 심볼과 비슷합니다. 차이점은 ProtoPie의 컴포넌트에는 인터랙션이 들어 있다는 것입니다. 재사용 가능한 UI 요소를 더 많이 컴포넌트화할수록 프로토타이핑은 더 빨라집니다.
다음 에셋을 참고해 보세요:
11. 메시지
컴포넌트가 서로 "소통"하도록 만드는 방법을 알아보세요.
컴포넌트의 맥락에서 메시지는 컴포넌트가 서로는 물론, 사용되는 씬과도 소통할 수 있도록 필요합니다. 예를 들어 검색 컴포넌트를 생각해 보세요. 검색 컴포넌트는 씬의 다른 UI 요소와 함께 작동해야 합니다. 그런 다음 입력된 검색어와 함께 메시지를 씬에 보내고, 수신한 메시지에 따라 특정 응답이 발생하도록 만들 수 있습니다.
다음 에셋을 참고해 보세요:
더 알아보고 싶으신가요?
Total ProtoPie 과정으로 ProtoPie의 세부까지 배워보세요.
ProtoPie에 흥미가 생겨 더 깊이 알아보고 싶으신가요? Darren의 심화 과정인 Total ProtoPie에 대한 심화 강의를 확인해 보세요. 여기서 그는 7시간 동안 ProtoPie에 대해 알아야 할 모든 것을 알려줍니다. 또한 Patreon에서 제공하는 Darren의 독점 ProtoPie 튜토리얼도 확인해 보세요.
질문을 하고 Darren 자신을 포함한 ProtoPie 전문가들에게 더 많은 것을 배울 수 있는 ProtoPioneers 커뮤니티에 참여해 보세요.
