이것은 캘린더 튜토리얼의 두 번째 부분입니다. 첫 번째 부분에서는 작업 공간을 설정하고 패럴랙스 이미지를 추가하는 방법을 안내했습니다. 이번 두 번째 부분에서는 가로 캘린더 메뉴, 내비게이션 드로어, 그리고 FAB(Floating Action Button)를 다룹니다.
이 튜토리얼은 약 20–30분 정도 걸립니다. 시작하기 전에, 인터랙션이 없는 기본 ProtoPie 다운로드를 했다고 가정하겠습니다.
1. 가로 캘린더 메뉴 추가하기
원하는 효과는 사용자가 헤더 바를 탭하면 영역이 세로로 확장되고, 월 사이를 가로로 스크롤할 수 있으며, 다시 탭하면 닫히는 것입니다.
원하는 결과
원하는 결과는 일반적인 ProtoPie 개념 모델을 따릅니다
ProtoPie 개념 모델
헤더 오브젝트 + 탭 트리거 + 응답(높이를 74px로 조정, 화살표를 180º 회전, 캘린더 불투명도 100%)
먼저 탭 시 헤더를 세로로 확장하는 동작을 추가해 보겠습니다. 같은 동작을 헤더를 세로로 축소할 때도 사용하려면 조건을 추가해야 합니다. 이 조건은 헤더가 74px(닫힌 상태)일 경우 헤더 높이를 400px로 확장하는 규칙을 따릅니다.
탭과 조건 추가하기
왼쪽의 Layer 패널에서 Header 메뉴를 선택한 상태로 Tap 트리거와 Scale 응답을 추가합니다. Header-BG 레이어를 선택하고 새 높이 값 400px을 할당합니다.
Calendar Container에 Opacity 트리거를 추가하고 불투명도를 100%로 설정합니다.
이제 Header가 열리며 스크롤 가능한 가로 캘린더가 표시되었으니, 다음 단계는 Header를 탭했을 때 이 동작을 반대로 되돌리는 것입니다. 이는 3개의 트리거(Scale, Rotate, Opacity)를 사용하며, 조건 위에 배치합니다. 아래를 보세요.
스크롤 시 헤더의 월 제목 변경하기
가로 스크롤 캘린더는 다음과 같은 구조가 됩니다. 11월은 x=375px에서 시작하고 12월은 x=750px에서 시작합니다.
Calendar container에 Detect 트리거를 추가하고 드롭다운에서 Scroll을 선택합니다. 첫 번째 조건을 추가하고, 다시 드롭다운에서 Scroll을 선택한 뒤 값 0을 지정하면, 스크롤의 X 위치가 0일 때 표시할 내용에 대한 동작을 추가할 수 있습니다. 이 경우는 10월입니다.
두 개의 불투명도 동작을 추가합니다. 10월(100% 불투명도)과 11월(0% 불투명도)입니다.
같은 과정을 11월과 12월에도 반복하여, 조건 값은 각각 375px과 750px으로 설정합니다.
2. 내비게이션 드로어 추가하기
Burger 컨테이너에 Tap 트리거를 추가하고 첫 번째 응답으로 Move를 지정한 뒤, NavigationDrawer 컨테이너에 새 X 값 0을 할당합니다. 이렇게 하면 탭할 때 드로어가 슬라이드로 나타납니다.
같은 Burger 오브젝트에 Opacity 트리거를 추가하고 Overlay에 할당한 뒤 불투명도를 70%로 설정합니다. 이렇게 하면 흰색 오버레이 효과가 생겨 사용자의 시선을 드로어에 집중시킬 수 있습니다.
이렇게 하면 다음과 같은 결과가 나옵니다. 이제 겹침 효과를 위해 Overlay와 Navigation Drawer의 레이어 순서만 다시 정렬하면 됩니다.
Bring to front(세 번째 옵션)를 사용하여 Overlay와 NavigationDrawer 레이어의 순서를 다시 정렬합니다.
중요한 점은, Reorder를 사용해 둘 이상의 오브젝트를 앞으로 가져오면 프로토타입은 위에서 아래로 수행하는 로직을 따르게 됩니다. 아래 예시를 보세요. Reorder Overlay가 먼저 수행되고, Reorder NavigationDrawer가 그다음입니다.
메뉴 닫기
Overlay에 Tap 트리거를 추가하고 NavigationDrawer에 할당된 Move 응답을 추가합니다.
3. FAB 버튼 추가하기
i. FAB 컨트롤 열기
버튼 배치
이 프로토타입에서는 FAB를 누르면 아래에서 위로 올라오는 두 개의 추가 버튼을 사용합니다.
Open-Fab 트리거에 두 개의 Move 동작(btn-2, btn-3)을 추가하고 다음 'Move To' Y 값을 지정합니다.
btn-2 = Y -36px
btn-3 = Y -98px
버튼 페이드 인
새로운 Opacity 응답 4개를 추가하고 각 버튼에 하나씩 할당합니다. 모든 버튼은 100%로, FAB는 0%로 설정해야 합니다.
ii. FAB 컨트롤 닫기
FAB 컨트롤을 여는 것과 비슷하게, 각 응답을 반대 효과로 다시 반복하면 됩니다. 이를 빠르게 처리하는 방법은 없으며, 응답을 수동으로 복사해 붙여넣은 뒤 동작을 별도로 변경해야 합니다.
iii. 화면 아무 곳이나 탭하여 FAB 컨트롤 닫기
간단한 단계입니다. Close-Fab 탭 트리거에서 Rotate 전까지의 동작을 복사해 Overlay의 새 Tap 트리거에 붙여 넣습니다. 이렇게 하면 사용자가 화면 어디든 탭해 FAB 컨트롤을 닫을 수 있습니다.
이상입니다. 매우 간단하며, 자신만의 프로토타입을 만드는 데 좋은 기반이 되거나 ProtoPie 앱을 배우며 이것저것 시도해 보는 시작점이 될 것입니다. 질문이나 의견이 있다면 아래에 남겨 주세요. 다음에 보고 싶은 튜토리얼 아이디어가 있다면 언제든지 연락해 주세요.
