리플 효과가 있는 재사용 가능한 버튼 컴포넌트 만들기

소개

리플 효과는 버튼에 눌리는 버튼 효과를 부여해 UI의 심미성을 높이는 디자인 기법입니다. 이 효과에 적용되는 애니메이션은 어떤 버튼이 클릭되었는지에 따라 달라집니다. 이 효과는 Google의 Material Design 언어에서 널리 사용되며 많은 웹사이트에 구현되어 있습니다. 어렵게 들릴 수 있지만, ProtoPie에서는 $touchX 및 $touchY 같은 미리 정의된 변수를 사용하고 toLayerX 및 toLayerY 같은 공식을 적용해 이 효과를 쉽게 구현할 수 있습니다. 그럼 시작해 볼까요.

이 레슨에서 배울 내용

1. 미리 정의된 변수 이해하기: $touchX와 $touchY

2. 공식 이해하기: toLayerX와 toLayerY

3. 리플 효과 만들기

4. 버튼을 나중에 사용할 수 있도록 컴포넌트로 변환하기

[시작 Pie 파일] [완료된 Pie 파일]

시작하기 전에

튜토리얼로 넘어가기 전에, 미리 정의된 변수 “$touchX/$touchY”와 공식 “toLayerX/toLayerY”를 이해해 봅시다.

1. “$touchX”는 터치가 감지된 위치의 x 좌표를 나타냅니다. 마찬가지로 “$touchY”는 터치가 감지된 위치의 y 좌표를 나타냅니다.

• 이번 레슨에서는 버튼이 클릭된 x 및 y 좌표에서 리플 효과를 트리거하기 위해 “$touchX/$touchY”를 사용합니다.

2. “toLayerX”는 컨테이너 또는 컴포넌트를 기준으로 한 x 좌표를 반환합니다. 마찬가지로 “toLayerY”는 컨테이너 또는 컴포넌트를 기준으로 한 y 좌표를 반환합니다.

컨테이너 또는 컴포넌트 내부의 레이어는 해당 컨테이너 또는 컴포넌트를 기준으로 좌표가 제한됩니다.

• toLayerX(containerName:LAYER,x:NUMBER,y:NUMBER) → NUMBER

• toLayerY(containerName:LAYER,x:NUMBER,y:NUMBER) → NUMBER

어떻게 작동하는지 이해하려면 이 예시들을 직접 살펴보세요.

• toLayerX(Container 1, 100, 200) → 화면을 기준으로 한 x 좌표 100을 바탕으로 Container 1을 기준으로 한 x 좌표

• toLayerY("Container 1", 100, 200) → 화면을 기준으로 한 y 좌표 200을 바탕으로 Container 1을 기준으로 한 y 좌표

ProtoPie에서 요소의 위치는 부모 컨테이너를 기준으로 한다는 점을 이해해야 합니다. 부모 컨테이너가 없으면 위치는 씬을 기준으로 합니다. “$touchX/$touchY”는 씬을 기준으로 한 위치만 반환하지만, 여기서는 버튼이 컨테이너로 그룹화되어 있다고 가정합니다. 이때 공식 “toLayerX/toLayerY”가 역할을 하게 됩니다.

단계별 안내

1. 리플 효과 만들기

1. Button 컨테이너 안에서 다음을 수행합니다:

   a. 너비와 높이가 0인 타원을 만듭니다.

   b. 이 타원을 흰색(#FFFFFF)으로 만들고 투명하게 합니다(불투명도 = 0%).

   c. 타원의 기준점을 가운데(x=50, y=50)로 설정합니다.

   d. 이름을 “Ripple”로 지정합니다.

2. Button 컨테이너에 탭 트리거를 추가합니다. 리플 효과가 생기도록 Ripple 레이어에 다음 응답을 추가합니다.

Scale 1 (타원을 확대)

• Scale to: 600, 600

• Start Delay: 0s

• Duration: 0.8s

Scale 2 (타원을 축소)

• Scale to: 0, 0

• Start Delay: 0.8s

• Duration: 0s

Opacity 1

• Opacity: 40%

• Start Delay: 0s

• Duration: 0.4s

Opacity 2

• Opacity: 0%

• Start Delay: 0.4s

• Duration: 0.4s

이 단계를 완료하면 타원은 탭 시 리플처럼 확대됩니다. 위 응답에 원하는 애니메이션 이징을 자유롭게 선택해도 되지만, 현실적인 리플 효과를 위해서는 ease in & out 또는 cubic-bezier를 사용하는 것이 좋습니다.

💡 왜 Scale 및 Opacity 응답을 사용하나요?

리플 효과는 우리가 만든 타원이 확대된 다음 투명해질 때 구현됩니다. 확대 및 축소와 불투명도 지연이 리플에 현실감을 줍니다.

3. 이제 리플을 버튼이 클릭된 위치로 옮겨 봅시다. Ripple 레이어에 Move 트리거를 추가합니다. 이제 이동 값을 입력할 수 있는 2가지 옵션이 있습니다.

옵션 1: “$touchX/$touchY”와 “toLayerX/toLayerY” 결합

• X에 입력: toLayerX('Button',$touchX,$touchY)

• Y에 입력: toLayerY('Button',$touchX,$touchY)

옵션 2: “$touchX/$touchY”만 사용

• X에 입력: $touchX - 87

• Y에 입력: $touchY - 378

💡 왜 이 공식을 사용하나요?

Ripple 레이어를 이동시키고 싶기 때문입니다. Ripple 레이어는 Button 레이어의 하위 레이어이므로 Ripple 레이어를 이동할 때는 Button 레이어 아래의 좌표를 사용해야 합니다. ($touchX,$touchY)는 씬 좌표로 동작한다는 것을 알고 있습니다. 이 공식은 씬 좌표 위치를 Button 레이어의 로컬 좌표 위치로 변환하여 버튼의 설정된 경계 안에 유지되도록 합니다.

4. 마지막으로 “Button” 레이어의 “Clip Sublayers” 체크박스를 선택합니다.

💡 왜 “Clip Sublayers”인가요?

Ripple 레이어는 Button 레이어의 하위 레이어가 됩니다. Button 레이어에 대해 Clip Sublayers를 선택하면 Button 레이어의 하위 레이어가 마스크처럼 동작하므로 버튼의 경계를 벗어나지 않게 표시됩니다.

2. 버튼을 나중에 사용할 수 있도록 컴포넌트로 변환하기

1. Button 컨테이너를 선택한 상태에서 툴바의 Component 버튼을 클릭해 컴포넌트로 변환합니다.

2. 이제 메인 씬에서 버튼 컴포넌트를 여기저기 이동해 보며 어떻게 동작하는지 확인합니다.

3. 이전 단계에서 옵션 2(“$touchX/$touchY”만 사용)를 선택했다면, 리플이 올바른 위치에 표시되지 않는 것을 확인할 수 있습니다.

• 이는 87과 378이 고정된 숫자이기 때문입니다. 버튼을 이동하면 버튼 컨테이너의 위치가 더 이상 같지 않으므로 87과 378은 더 이상 올바르지 않고 업데이트해야 합니다.

4. 이제 동적 값으로 수정해 봅시다. 컴포넌트 씬으로 이동하여 옵션 2의 이동 값을 다음과 같이 변경합니다:

• X: $touchX - 'Button'.x

• Y: $touchY - 'Button'.y

💡 ‘Button’.x와 ‘Button’.y는 87과 378의 자동 업데이트 버전입니다. 그래서 이제 “Button” 컴포넌트가 어디에 있든 리플 효과가 자동으로 올바른 위치에 표시됩니다.

그리고 완료되었습니다!

끝까지 따라오시느라 수고하셨습니다. 보시다시피 ProtoPie는 코드 한 줄 작성하지 않고도 이 놀라운 UI 효과를 구현하도록 도와줍니다. 직접 리플 효과를 시도해 보세요!

[도움이 되셨나요? 알려 주세요!]