소개
확장되는 이미지 오버레이는 소셜 미디어부터 전자상거래까지 다양한 애플리케이션에서 사용됩니다. 사용자들을 흥미로운 미디어로 빠르게 유도하는 훌륭한 사용자 패턴이며, 공유나 댓글 달기와 같은 기능에 빠르게 접근할 수 있게 해줄 잠재력도 있습니다.
이 글에서는 toScreen 공식을 길게 누르기 트리거와 함께 사용해 여러분만의 확장형 미리보기를 금방 만들 수 있도록 안내합니다.
이 강의에서 배우게 될 내용:
길게 누르기 트리거를 사용해 오버레이 표시하기
toScreen공식을 사용해 원하는 이미지를 화면으로 이동하기전환에 사용자 지정 효과 추가하기
이 튜토리얼이 끝날 무렵에는 이런 것을 만들 수 있게 됩니다!
단계별 안내
시작하기 전에
에셋을 연 후 두 번째 씬(Profile)으로 이동하세요. 튜토리얼은 그곳에서 시작됩니다.
이제 에셋이 최종 상태로 배치되어 있는 것을 볼 수 있습니다. 그러니 먼저 에셋을 정리해 봅시다.
Overlay 레이어의 불투명도를 0으로 설정하세요
아래에 표시된 것처럼 image 1 copy와 Menu를 씬 밖으로 이동하세요
1. 길게 누르기를 사용해 오버레이 만들기
여기서는 블러 레이어를 만들어 확장되는 오버레이의 기반을 설정합니다.
1. 이미지 피드에서 해당 이미지(image 1)를 선택해 제공된 확대 이미지에 적용하고, 그 위에 길게 누르기 트리거를 추가합니다.
2. 이제 레이어 패널에서 오버레이 도형을 선택하세요. 방금 추가한 트리거로 돌아가 불투명도 응답을 만듭니다. 불투명도를 100으로 설정하세요.
직접 해보세요! 프로필 화면에서 길게 누르기 트리거가 있는 이미지를 길게 눌러 보세요.
2. 확장되는 이미지 미리보기 만들기
이 단계에서는 프레임 밖에 있던 이미지를 화면의 지정된 위치로 순간적으로 이동시키게 됩니다.
💡이 섹션에서 주의할 점은 Reorder 응답을 사용할 수 없다는 것입니다. 왜일까요?
대상 이미지는 스크롤 컨테이너 안에 있습니다
오버레이 레이어는 먼저 스크롤 컨테이너 밖에 있고, 두 번째로 레이어 계층의 맨 위에 있습니다.
따라서 Reorder 응답을 사용하면 재정렬된 이미지가 여전히 오버레이 레이어 아래에 남게 됩니다. 이를 해결하기 위해, 오버레이 위에 표시될 이미지의 복제본을 사용해 화면의 기존 이미지를 대체하겠습니다.
1. 이 예제에서는 대체 이미지의 왼쪽 아래 모서리에서 확장 애니메이션이 시작되도록 만들겠습니다. 이를 위해 image 1 copy의 원점이 왼쪽 아래 모서리로 설정되어 있는지 확인하세요.
2. 화면에 있는 이미지 (image 1)를 대체하려는 것이므로, 먼저 화면 밖의 이미지 (image 1 copy)의 크기를 화면에 있는 원본과 같은 크기인 226x226으로 조정하세요.
3. 이제 앞서 만든 길게 누르기를 사용해 image 1 copy와 Menu의 위치 변경을 트리거하겠습니다. 하지만 먼저, 둘을 함께 그룹화하고 컨테이너 이름을 "Image & Menu"로 바꿔 두는 것이 좋습니다.
4. 길게 누르기 트리거 아래의 Image & Menu에 연결된 이동 응답을 추가합니다.
5. 이미지를 클릭해 위아래로 드래그해 보세요. 세로로 스크롤할 때 image 1의 X좌표는 항상 일정한 반면 Y좌표는 변한다는 점에 주목하세요. 이 점을 고려해 이동 응답의 대상 위치를 입력합니다. X좌표는 항상 일정하다는 것을 알고 있으므로 image 1의 X값(X = 16)을 복사해 사용할 수 있습니다.
6. 여기서부터는 조금 까다롭습니다! 위치와 상관없이 Y좌표를 구할 수 있도록 toScreen 공식 (fx)을 사용합니다. 우리는 Y값이 필요하므로 toScreenY 공식을 사용합니다. 코드 형식은 다음과 같습니다:
toScreenY('Scroll Container','image 1'.x,'image 1'.y)``
💡 toScreenY: 화면을 기준으로 한 Y좌표를 반환합니다. 컨테이너나 컴포넌트 안의 레이어는 앞서 언급한 컨테이너 또는 컴포넌트를 기준으로 한 좌표를 따릅니다.
toScreenY(containerName:LAYER,x:NUMBER,y:NUMBER)→NUMBER
이 경우 이 공식은 화면 밖에 있는 Image & Menu의 Y좌표를 Scroll Container 안에 있는 image 1의 Y좌표로 설정합니다.
7. Reorder 응답을 흉내 내는 이 즉각적인 대체 효과를 만들기 위해, 이동 응답의 지속 시간을 0초로 변경하세요. 그러면 이미지가 제공된 X 및 Y 좌표에 화면상 나타나게 됩니다.
8. 이어서 길게 누르기 트리거에 크기 조정 응답을 추가해 image 1 copy를 원래 크기인 343x343으로 조정합니다.
또한 반경 응답을 적용해, 크기 조정 후의 반경을 12로 바꾸어 시각적 일관성을 유지할 수 있습니다.
💡 마이크로 인터랙션의 일관성을 위해 모든 응답의 지속 시간이 서로 맞는지 확인하세요(여기서는 0.2초).
9. 마지막으로 이동 응답을 하나 더 추가합니다. 이 이동 응답은 이미지와 메뉴의 최종 세로 위치가 됩니다. Y좌표는 원하는 대로 조정하고 결과를 다양하게 시도해 보세요. 이 예제에서는 이미지가 중앙에 오도록 273을 사용해 보시길 권장합니다.
3. 효과 커스터마이즈
1. 먼저 Menu에 초기 상태를 부여해 봅시다. 이를 위해 시작 트리거를 추가하세요. 그런 다음 시작 트리거 안의 Menu에 연결된 크기 조정 응답을 만듭니다. 메뉴를 0x0으로 조정하세요.
2. 길게 누르기 트리거 아래에서 Menu에 연결된 초기화 응답을 추가합니다.
이 2단계를 마치면 미리보기 창에서 Menu가 확장되는 효과를 볼 수 있습니다.
열린 후에는 이제 오버레이를 초기화할 방법이 필요합니다. 안타깝게도 이를 매끄러운 마이크로 인터랙션으로 만들려면 단순한 초기화 응답 이상의 작업이 조금 더 필요합니다.
1. 먼저 오버레이에 탭 트리거를 설정하고 image 1 copy에 연결된 초기화 응답을 추가합니다.
2. 그다음 접힐 때 메뉴를 숨기고 싶습니다. 이를 위해 Menu에 0으로 설정된 크기 조정 응답을 연결하면 됩니다.
3. 다음으로, 반대 방향의 효과를 만들기 위해 Image & Menu 컨테이너가 image 1의 위치로 돌아가도록 하겠습니다. 이를 위해 컨테이너에 이동 응답을 연결하고 길게 누르기 후의 초기 대상 위치로 다시 이동시킵니다.
x = 16
y =
toScreenY=('Scroll Container','image 1'.x,'image 1'.y)
4. 이제 컨테이너를 화면 밖의 초기 위치로 되돌리고자 합니다. 이는 먼저 Image & Menu 컨테이너에 초기화 응답을 연결해 지속 시간을 0초로 설정한 뒤, 모든 다른 인터랙션이 끝난 후에 배치하면 됩니다. 그러면 마이크로 애니메이션이 끝난 직후 즉시 원래 자리로 돌아갑니다.
5. 마지막으로, 오버레이에 초기화 응답을 하나 더 연결해 불투명도를 초기화하고 원래의 프로필 페이지를 다시 보이게 합니다.
축하합니다!
끝났습니다! 확장되는 이미지 미리보기를 만들었습니다! 이 기능을 여러분의 디자인 콘셉트에 적용해 보고 어떤 아이디어를 실현할 수 있는지 확인해 보세요!
여러분의 멋진 실험도 꼭 보고 싶습니다. 직접 프로토타입을 만들어 Twitter나 Instagram에 #MadeWithProtoPie와 함께 공유해 주세요.
