디자인 작업물을 가져왔으니 이제 모션을 입혀, 간단한 프로토타입을 만들어 보겠습니다.
일반적으로 많이 사용하는 스크롤, 사이드메뉴, 메뉴 간 전환 기능입니다.
스크롤_Scroll
가장 쉽고 기본적인 인터랙션인, 상하 스크롤을 만들어봅시다.
좌측 상단에서 Container 만들기
좌측 오브젝트 창에 Container가 생겼다
컨테이너 영역을, 스크롤 시 보이는 범위(화면 영역)로 지정해줍니다.
그리고 우측 Scroll / Paging 탭에서 None을 Scroll로 변경 후, 상하 스크롤을 선택합니다.
방금 만든 컨테이너 안에 스크롤 할 레이어(긴 이미지)를 넣습니다.
그러면 프리뷰 창에서 상하로 스크롤 되는 내용(이미지, 콘텐츠 등)을 확인할 수 있습니다.
탭 → 모션 | 사이드 메뉴
햄버거 버튼을 누르면, 사이드메뉴가 좌에서 우로 슬라이딩 할 수 있도록 만들어봅시다.
사이드메뉴를 화면 밖에 둔다
Add Trigger → Tap 선택 → 햄버거 버튼 지정
Move 추가 → 움직일 대상인 사이드 메뉴 지정
이후 사이드메뉴 위치를 0으로 설정
Position 값은 컨테이너를 기준으로 정해집니다.
Move 등에서 Position을 정할 때 X를 0으로 해 두면, 오브젝트가 컨테이너 왼쪽 끝에 붙게 됩니다.
사이드메뉴 뒷쪽에 어둡게 처리할 화면을 위해, 오브젝트 추가
트리거 아래 리스펀스 설정, Opacity 50으로 설정
트리거창 아래 리스펀스 항목에 Opacity를 추가합니다.
앞에서 만들었던 검정 Shape(dim)을 지정해주고, Opacity to ‘50’으로 설정합니다.
프리뷰에서 확인하기 위해 햄버거 버튼을 탭 하면,
메뉴가 좌에서 우로 슬라이딩해서 등장하며, 뒷배경이 어둡게 처리됩니다.
그럼 이제, 검정 Shape을 누르면 원상태로 돌아가도록 설정해봅시다.
되돌리는 방법은 더 간단합니다. 나온 방향 역순으로 설정하면 되죠.
검정 Shape(dim)에 Tap 트리거 설정
리스펀스에 이전과 동일하게 Move, Opacity 추가
검정 Shape(dim)에 Tap 트리거를 추가합니다.
그리고 트리거 아래 리스펀스에 Move를 추가합니다.
사이드메뉴가 원래 자리로 돌아가기 위해서는 Position이 원위치로 돌아가야겠죠?
X 좌표를 기존 값(dim 오브젝트 가로 길이)에 마이너스를 붙여 입력합니다.
사이드메뉴가 등장하면서 dim 오브젝트 Opacity가 변화됐으니,
되돌리기 위해서 리스펀스에 Opacity를 추가합니다.
검정 dim을 지정한 뒤, Opacity를 0으로 설정해줍시다.
화면 전환_Scene Jump
이번에는, 카드를 눌렀을 때 화면(Scene)간 전환을 알아보겠습니다.
새 Scene 추가
상단 중앙, 디바이스 설정 옆 Scene 버튼을 누르면 드로우 메뉴가 나타납니다. 여기서 Add New Scene을 눌러줍니다.
그럼 좌측과 같이 Scene 2 라는 화면이 생성됩니다. 원래 화면으로 돌아가려면 Scene 1 을 선택하면 됩니다.
카드 레이어 선택
카드를 누르면 Scene 2로 화면을 전환하고자 합니다.
카드 레이어를 선택하고, Tap 트리거를 설정합니다.
Jump 리스펀스 설정
Tap 트리거 아래에 Jump 리스펀스를 추가하고, Scene 2를 지정합니다.
프리뷰에서 해당 카드를 탭 하면, 화면이 Scene 2로 넘어가는 것을 볼 수 있습니다.
그럼 이번에도 동일하게, 뒤로가기 화살표를 탭 하면 Scene 1(첫 페이지)로 돌아가도록 설정해 보겠습니다.
뒤로가기 버튼에 Tap 트리거 설정
Tap 트리거 아래에 Jump 리스펀스 설정
마치며
여기까지가 프로토파이 사용기였습니다.
저희가 실제 업무에 프로토파이를 활용했을 때, 와이어프레임, 시나리오, 인터랙션과 모션 등 복잡한 과정을 프로토파이 하나로 끝냈습니다.
그럼에도 크게 부족함을 느끼지 못했고, 툴 자체의 직관적인 UI/UX 덕분에 편리한 활용이 가능해서 생산성을 더 높일 수 있었죠.
즉, 디자인 퀄리티에 집중할 수 있었습니다.
물론 단점이 없지는 않습니다.
레이어를 켜고 끌 수 없기 때문에, 레이어가 많이 쌓이면 구분이 어려워집니다. 그리고 데스크탑 프리뷰에 녹화기능이 필요하다고도 생각했습니다.
그 외에도 “아직 미완성 아닌가?” 싶은 부분이 보이긴 합니다.
하지만, 크고 다양한 장점이 작고 소소한 단점을 덮고도 남죠.
프로토타입은 실제 개발 전 테스트를 위해 제작하므로, 빠른 속도가 생명입니다.
완성품을 제작하는 단계가 아니며, 디자인 프로세스의 일부분일 뿐이죠.
따라서 완성도에 집중할 필요가 없고, 다음의 역할을 잘 수행하는지 확인해야 합니다.
- 서비스의 플로우, 구조를 점검할 수 있는가?
- 서비스 사용 시 발생할 수 있는 문제를 미리 확인할 수 있는가?
- 구성원들의 프로젝트에 대한 이해도를 높이는 커뮤니케이션 도구인가?
위의 세 기준으로 바라봤을 때, 프로토파이는 충분히 만족스러운 툴이었습니다.
우리가 디자인하는 서비스는 섬세함을 요구합니다. 또한, VR과 같이 기존에 경험하기 어려웠던
새로운 인터페이스와 환경이 생겨나고 있죠. 이로 인해 프로토타이핑의 중요성은 점점 더 커지리라 예상합니다.
프로토타이핑 툴과 프로토파이의 발전을 기대합니다.