프린서플 > 인터랙션 만들기


프린서플에서는 다른 프로토타이핑 툴에 비해 다음 세 가지 인터랙션을 즉각적으로 사용할 수 있다. 드래그(Drag), 스크롤(Scroll), 페이징(Paging)이 그것이다. 요 아이들을 수직이나 수평으로 마음껏 사용할 수 있다.


드래그 (Dragging)

먼저 아트보드(아이폰6 기준)에 카드 한 장을 만든다.

그리고 캔버스 좌측 상단의 인스펙터를 확인해 보자.

우리는 일단 이 카드를 수직으로 움직일거니까 ‘Vertical’에서 ‘Drag’를 선택한다.

이제 미리보기에서 카드를 움직여 보자.

요렇게 나오면 제대로 만든거다. 스스로에게 박수 짝짝짝~

이번에는 박스를 원하는 범위 내에서만 움직여 보자. 방법은 간단하다. 박스 레이어를 그룹으로 만들고 그 그룹을 선택한 채로 영역을 조정한다.

마스크 영역을 만드는 것과 동일하다

그 다음 인스펙터에서 ‘Clip Sublayers’를 체크해 준다.

자, 아래와 같이 동작하면 성공 거다.

이제 이 작업 파일을 ‘01_Dragging’으로 저장해 놓는다.


스크롤 (Scrolling)

아트보드에 카드 한 장을 만들고 그 카드를 아래로 쭉 복제해서 SNS의 피드처럼 만들어 준다.

SNS 피드 카드

여기까지 쉽게 만들 수 있으면 대단한거다. 이제 자신감을 갖고 본격적으로 인터랙션을 추가해 보자.미리보기 창에 마우스를 대면 터치 포인트가 나온다. 위아래로 카드를 움직여보자.

위아래로 스크롤 해 보자!

아무 변화가 없을 것이다. 왜냐면 아무 것도 안 했으니까. 그럼 이제 아트보드 위의 모든 카드들을 선택해서 그룹으로 만든다.

Feed 그룹 탄생

Command+G로 그룹을 만들 수 있다. 레이어 목록에서 그룹 이름을 ‘Feed’로 변경했다.(안 바꿔도 된다. 그냥 내 버릇이다.) 그 다음 캔버스 좌측 상단의 인스펙터를 확인한다.

우리는 수직으로 스크롤되는 SNS 피드를 만들거니까 오른쪽 ‘Vertical’에서 열어서 ‘Scroll’를 선택한다.

이제 스크롤이 되는지 미리보기에서 움직여 보자. 아마 움직일 것이다. 신기해서 몇 번 움직이다가 무언가 이상함을 발견할 것이다. 스크롤이 쭉 안 움직이고 답답하게 움직인다고 느낄 것이다.

간단하게 이를 해결해 보자. 그룹 레이어가 선택된 상태에서 그룹 레이어의 마스킹 영역을 다음과 같이 아트보드 크기에 맞게 조절한다.

그리고 다시 미리보기에서 스크롤을 테스트해 보면 시원하게 움직이는 카드들을 볼 수 있을 것이다. 아트보드 상에서 하단의 카드가 눈에 거슬리면 인스펙터에서 ‘Clip Sublayers’를 체크하면 된다.

마지막으로 방금 작업한 작업 파일을 ‘02_Scrolling’이라는 이름으로 잘 저장해 두길 바란다.


페이징 (Paging)

페이징은 기본적으로 스크롤과 동일하다. 다만 손가락을 스크린에서 떼어낼 때 자동으로 컨텐츠의 위치가 고정된다. 먼저 아래 그림과 같이 275*300px 크기의 카드를 아트보드 중앙에 배치한다.

그리고 2개의 카드를 더 복제한다. 카드 사이의 간격은 100px로 유지한다.

이때 카드의 X 위치가 헷갈리면 다음과 같이 계산하면 된다. 레이어 목록에서 두 번째 카드를 복제한 다음,

  1. 아트보드의 가로 크기는 375px
  2. 카드의 크기가 275px이니까 좌우로 50px 여백 발생
  3. 두 번째 카드를 선택하고 인스펙터에서 다음과 같이 입력

그럼 아래와 같이 100px 간격으로 두 번째 카드가 이동한다.

마찬가지로 두 번째 카드에서 세 번째 카드를 복제 후 아래와 같이 입력하면 된다.

그 다음 세 개의 카드를 모두 선택한 후 그룹으로 만들고 그룹 이름을 ‘Paging’으로 바꿔준다.

그 다음은? 맞다. 인스펙터에서 ‘Horizontal’ 값을 ‘Page’로 변경하면 된다.

그럼 다음과 같이 좌우로 카드가 넘어갈 것이다.

이상하다. 동영상이 잘못된 것이 아니다. 아직 더 작업이 필요하다는 얘기다. 그럼 이제 스크롤과 마찬가지로 그룹 레이어의 클리핑 영역을 아트보드의 가로 크기로 맞춰 보자.

그리고 다시 카드를 넘겨보자!

잘되는가 싶더니 세 번째 카드가 덜 넘어간다. 첫 번째 카드의 왼쪽에 50px의 여백이 있는데 비해 세 번째 카드의 오른쪽에는 이것이 없는 것이 문제다. 50px 크기의 정사각형 두 개를 만들어서 다음과 같은 위치에 배치한다. 이때 ‘Paging’ 그룹 내에 이 정사각형들이 들어 있어야 한다.

인내심의 한계가 느껴지는 순간, 카드들을 옆으로 넘겨보자!

대성공이다! 이제 이 작업 파일을 ‘03_Paging’으로 잘 저장해 놓자.


다른 프로토타이핑 툴에 비해…

프린서플은 스케치와 유사한 인터페이스에서 인터랙션을 삽입할 수 있기 때문에 쉽게 느껴진다. 스케치 내에서 플러그인 형태로 프로토타이핑을 지원하는 ‘Silver Flow’가 정식 릴리즈되면 얘기가 좀 달라질 수 있겠지만 현재까진 그렇다. 위 과정을 2~3번만 더 반복 연습해 보면 금새 체득할 수 있을 것이다.