프로토파이 Basic 1.
오브젝트 만들기
인터랙션 구현의 기본 컨셉
프로토파이에서 정의하고 있는 인터랙션 구현의 기본 컨셉은 실제 우리가 말로 표현하는 무수한 인터랙션의 양상들과 크게 다르지 않다. 사용자의 입력이 들어갈 대상과 입력의 방법과 그에 대한 반응의 양상은 흔히 이렇게 표현된다.
첫 번째 시간에는 사용자의 입력이 들어갈 대상인 오브젝트 위주로 설명하려 한다. 매우 기초적인 내용이 될 수 있으므로, 프로토파이를 한 번이라도 사용해 본 사람이라면 다소 지루하게 느껴질 수도 있겠다.
오브젝트의 종류
최신의 프로토타이핑 툴 답게 프로토파이에서는 자주 사용할 법한 오브젝트를 상당수 기본 제공하고 있다. 특히 스크롤 컨테이너, 페이징 컨테이너를 활용하면 왠만한 인터페이스는 뚝딱 만들어 낼 수 있다.
이미지, 비디오는 기존 파일을 가져오는 방식이며, 나머지는 모두 새로 만드는 방식이다. 하지만 이 방식 이외에도 외부 디자인 툴에서 작업하던 내용을 그대로 불러오는 방법도 있다.
스케치를 기준으로 설명하자면, 스케치의 아트보드와 프로토파이의 작업 디바이스를 동일하게 설정해야 동일한 사이즈로 디자인을 불러올 수 있다.
만약 디바이스 프리셋 아트보드의 가로/세로 길이를 일정 비율만큼 변경했다면, 최초 선택한 디바이스 프리셋과 동일한 사이즈의 프로토파이 작업 디바이스를 선택하고, 가로/세로 길이를 계산하여 불러오기 배율을 입력하면 된다.
스크롤, 페이징 컨테이너
스크롤 컨테이너에 컨테이너보다 긴 오브젝트를 넣으면 자동으로 이를 인식해 스크롤 인터랙션이 구현된다. 컨테이너 추가 후에는 스크롤, 페이징 여부와 가로/세로 방향을 선택할 수 있다.
페이징 컨테이너의 사용법은 스크롤 컨테이너와 크게 다르지 않다. 페이지로 사용할 오브젝트들을 컨테이너 안에 채우면 자동으로 페이징 인터랙션이 구현된다.
스크롤과 페이징 컨테이너를 활용하면 트리거와 리스폰스를 추가하지 않더라도 몇 가지 인터랙션을 구현할 수 있다. 아래는 과제로 냈던 것들이다.
학습 링크
프로토파이는 커뮤니티도 상당히 활성화 된 편이고, 튜토리얼도 다양하게 구비되어 있다. 왠만한 내용은 아래 링크들을 통해 상당 부분 해결할 수 있다.
관심을 환기시키는 수준으로 스터디의 첫 번째 차수를 가볍게 진행했던 탓에 기본적인 내용들은 많이 생략한 편이다. 하지만 포토샵이나 스케치 같은 디자인 툴을 다뤄본 사람이라면, 별도의 가이드가 없더라도 프로토파이의 인터페이스에 쉽게 적응할 수 있을 것이다.
