지난 몇 달 동안 저는 ProtoPie를 직접 사용해 보고 앞으로 제 작업에 적용할 수 있는 유용한 기법들을 스스로 익혀 보고 싶었습니다.
여러 해 동안 다양한 프로토타입 도구가 있었고, 저도 그중 많은 도구를 사용해 왔습니다. 모두 장단점이 있지만, UX와 UI 디자인을 한 단계 더 끌어올리는 데 매우 강력하면서도 학습 곡선이 비교적 완만한 도구(Framer, 바로 당신을 말하는 겁니다)를 찾고 싶었습니다.
이 튜토리얼에서는 PrototPie를 사용해 간단한 캘린더 UI 프로토타입을 만들어 보겠습니다. ProtoPie를 무료로 다운로드하는 것을 추천하며, 완료하는 데 약 20분 정도 걸립니다.
ProtoPie의 패럴랙스 이미지가 포함된 캘린더 튜토리얼
1. 장면 설정하기
세로로 배치된 월별 블록을 만드세요. 저는 시연을 쉽게 하기 위해 높이를 532px로 사용하고 있으며(원하시면 얼마든지 달라도 됩니다), 각 블록 사이에는 135px의 간격을 두었습니다.
월별 블록을 세로 스크롤로 그룹화하세요
정사각형 배경 이미지를 추가하고 장면의 맨 아래에 배치한 뒤, 상단 가장자리가 하단 가장자리에 닿도록 하세요.
2. 캘린더 세로 스크롤 만들기
첫 번째 이미지는 로드되는 순간부터 장면에 표시되므로 여기서는 다른 방식으로 진행합니다. 레이어에서 모두 함께 컨테이너로 묶어두면 정리가 편합니다.
이미지 컨테이너
x = 0 / y= 532px
height = 375px / width = 375px
첫 번째 이미지
x = 0 / y= 0
height = 375px / width = 375px
두 번째, 세 번째, 네 번째 이미지
x = 0 / y= 135px
height = 375px / width = 375px
빨간 원 안의 숫자는 스크롤의 위치를 표시합니다
3. 스크롤 위치 표시 추가하기 (선택 사항)
이 기능은 많은 시간을 절약해 주며, 상황이 복잡해졌을 때 세밀하게 조정하는 데도 쉽게 추가할 수 있어 매우 유용합니다.
텍스트 레이어 추가
세로 스크롤에 Detect 트리거를 추가하고 드롭다운에서 Scroll을 선택하세요
Content 드롭다운에서 Formula를 선택하고 Scroll 값에 .scrollOffset를 추가하세요
4. 패럴랙스 월별 이미지
세로 스크롤에 Chain 트리거를 추가하고 드롭다운에서 Scroll을 선택하세요.
이 Chain에 Move 응답을 추가한 다음, 이미지를 하나씩 넣어 보겠습니다.
첫 번째 이미지
로드 시 장면에 배치되므로, 이 부분은 약간 다른 로직을 따릅니다.
532px (이미지 이전의 목록 스크롤 위치) = 135px (장면 맨 아래에 있는 이미지의 Y 위치)
1334px (이미지 이후의 목록 스크롤 위치) = -908px (장면 맨 위에 있는 이미지의 Y 위치)
두 번째 이미지
여기서 추가해야 할 것은 목록 스크롤의 위치와 이미지 사이의 관계를 프로토타입에 알려주는 것입니다. ProtoPie에서는 이를 범위라고 부릅니다.
스크롤 위치 범위
532px (이미지 이전의 목록 스크롤 위치) = 135px (장면 맨 아래에 있는 이미지의 Y 위치)
1334px (이미지 이후의 목록 스크롤 위치) = -908px (장면 맨 위에 있는 이미지의 Y 위치)
1334px는 스크롤의 종료 위치이고 132px은 두 번째 이미지의 최종 Y 위치입니다
최종 프로토타입
이 튜토리얼이 도움이 되었기를 바랍니다. 앞으로 몇 주 안에 다음 내용을 다룰 예정입니다.
Fab/Action 버튼
버거 메뉴
월별 가로 스크롤
