키노트로 프로토타이핑 하기
Magic Move is really magic itself
Photo by Teemu Paananen on Unsplash [https://unsplash.com/photos/bzdhc5b3Bxs]프로토타이핑 툴의 범람 속에서 나에게 맞는 도구를 찾기란 참 어려운 일이 되었습니다. 일일이 비교하고 평가하기에는 당장 눈앞의 프로젝트를 해내기에도 벅찬 것이 사실입니다. (우리 모두 힘내요!!)
만약, 복잡한 툴을 사용하기에는 부담스럽지만, 그래도 무언가 간단히 보여주고 싶을 때에는 어떻게 하는 것이 좋을까요?
여기 기가 막힌 제품을 하나 가지고 왔습니다.
네, 맞습니다. 바로 ‘키노트’ 입니다!!!
누구나 다 알지만 누구도 잘 알지 못하는 그것, 지금 바로 알려드립니다.
우선 새 파일을 하나 열고, 슬라이드 크기를 원하는 디바이스의 해상도로 설정합니다. 저는 750x1334로 만들어 보겠습니다.
우측 상단 도큐멘트 > 슬라이드 크기 > 슬라이드 크기 사용자화그런 다음, 준비한 오브젝트들을 차곡차곡 슬라이드 안에 배치해 줍니다. 인터랙션이 발생하는 요소들은 모두 별도의 오브젝트로 준비해야 합니다.
오브젝트를 배치하는 방법은 두 가지인데,
인터랙션이 발생하기 전의 모습으로 배치하는 것과
인터랙션이 발생하고 난 후의 모습으로 배치하는 것입니다.
저는 후자를 택해서 배치해 보겠습니다.
준비한 이미지를 슬라이드 위에 착착착배치가 끝났으면, 슬라이드 전체를 복사해서 하나 더 만들어 줍니다.
첫 번째 슬라이드는 프로토타입의 첫 번째 장면이 되고, 두 번째 슬라이드는 프로토타입의 두 번째 장면이 됩니다.
다시 말하자면, 인터랙션이 발생하기 전과 후의 상태를 두 장의 슬라이드로 각각 구분해 주는 것입니다. (플로우에 따라 슬라이드는 더 늘어날 수도 있습니다.)
우리 모두의 친구 복붙 cmd+c, cmd+v 아시죠?슬라이드를 복붙하고 난 후에는 오브젝트들을 재배치 합니다.
처음 오브젝트를 배치할 때에 인터랙션이 발생하고 난 후의 모습으로 배치했으니, 첫 번째 슬라이드를 인터랙션이 발생하기 전의 모습으로 정리합니다. (오브젝트 배치 방법에 따라 전후가 달라질 수 있습니다.)
저는 다음과 같이 오브젝트를 재배치 했습니다.
dim 레이어의 불투명도를 0%로 변경
채팅방 만들기 각 버튼 레이블의 x값을 닫기 버튼과 동일하게 변경하고 불투명도를 0%로 변경
채팅방 만들기 각 버튼의 x, y값을 닫기 버튼과 동일하게 변경
닫기 버튼 회전 각도를 45도에서 0도로 변경
인터랙션 이전 상태로 오브젝트 재배치이제 이 부분이 포인트 입니다. 눈도 깜박이지 마시고 잘 보셔야 합니다. 첫 번째 슬라이드를 선택한 후, 우측 상단 애니메이션 탭에서 전환 효과로 ‘이동 마법사(Magic Move)’를 선택합니다.
이동 마법사(Magic Move)는 화면이 전환될 때에 앞 뒤 슬라이드에 있는 같은 오브젝트를 서로 연결시켜 줍니다.
예를 들어,
첫 번째 슬라이드에 도형을 추가하여 윗쪽에 배치하고,
두 번째 슬라이드에 위 1번의 도형을 그대로 복사해서 붙여넣은 후, 위치를 변경했다면,
이동 마법사는 도형의 처음과 마지막 상태를 자연스럽게 이어서, 화면이 전환될 때에 도형이 움직이는 효과를 만듭니다.
이동 마법사는 오브젝트의 위치 뿐만 아니라, 각도, 불투명도 등 여러 상태값을 모두 이어주며, 덕분에 인터랙션 발생 전과 후의 슬라이드가 하나의 동작처럼 자연스럽게 연결될 수 있습니다.
우측 상단 애니메이션 > 전환 효과 추가 > 이동 마법사이제 준비가 끝났습니다. 두근거리는 마음으로 ‘재생’을 눌러 봅시다.
짜잔~!!
‘샤샤샥~ 올라와요'를 보여주는 법.gif화면이 전환되면서 오브젝트들이 움직이는 모습을 확인할 수 있습니다.
만약 슬라이드를 아이클라우드에 저장했다면, 아이폰 키노트 앱에서도 확인이 가능합니다. 역시 모바일 인터랙션은 모바일 디바이스에서 확인해 봐야겠죠 :)
간단한 인터랙션을 빠르게 전달해야 할 때에는 키노트의 이동 마법사를 활용한 방법도 좋을 것 같습니다. 예제 파일과 더욱 유용한 관련 아티클은 아래 링크 참고 바랍니다.
2017년 12월 28일에 발행한 미디엄 원문 링크를 첨부합니다.
