파도가 없는 날
프로토파이로 파도를 만드는 방법
Photo by Fezbot2000 on Unsplash길었던 장마가 끝나고 무더위가 찾아왔다. 예년 같았으면 지금쯤 바다가 보이는 곳으로 휴가를 떠났을텐데, 그럴 수 없는 현실이 야속하기만 하다. 연신 울려대는 재난 문자에 아이가 무슨 일이냐고 물어보는데, “광고가 자꾸 오네” 라며 안심시키는 것도 이제 지친다.
바다가 보고 싶다.
뜬금없지만, 생각난 김에 오랫동안 손 놓고 있던 프로토타이핑 툴 연습도 할 겸, 파도 애니메이션을 만들어 보기로 했다. 도구는 당연히 프로토파이. (토니 보고 있죠?)
Take 1.
예전에 한창 프레이머 클래식을 애용했을 무렵, 배경 블러를 이용해서 물결 효과를 만들어 본 적이 있다.
iOS 한정이긴 하지만 프로토파이도 배경 블러를 지원하고 있어서 어렵지 않게 구현 방법을 떠올릴 수 있었다. 간단히 설명하자면 둥근 사각형 레이어를 일정 간격으로 겹쳐서 각각 다른 타이밍으로 무한정 회전시킨 다음, 배경 블러로 덮어주면 된다.
둥근 사각형 레이어가 여러개 필요하니 처음부터 컴포넌트로 만들어 준다. 애니메이션은 그냥 처음부터 실행할 것이기 때문에 Start 트리거를 추가하고, 컴포넌트를 계속 회전하기 위해서 Rotate 리스폰스는 아래와 같이 설정했다.
Rotation: Rotate By 360
Direction: ⟳
Easing: Linear
Duration: 4
Start Delay: 0
Repeat: Interval 0, Infinite Repeat
문제는 여러개의 레이어를 서로 다른 타이밍으로 회전시키는 것이었는데, 어차피 레이어를 가로로 나열하기 때문에 애니메이션 재생시간에 레이어의 x값을 변수로 놓으면 되지 않을까 싶었다. 그래서 위의 Rotate 설정 중 재생시간(Duration)은 적당히 이렇게 정했다.
Duration: 4 + ('Component 1'.x / 100)
이제 씬으로 돌아와서, 아까 만든 컴포넌트를 서로 겹쳐지도록 가로로 나열한 다음, 컴포넌트 아래의 빈 부분을 같은 색상의 레이어로 채워주고, 배경 블러로 전체를 덮는다. 배경 블러는 Shape > iOS Background Blur 를 선택해서 추가한다. (컴포넌트에서 만들었던 레이어가 좀 작은 것 같아서, 씬에 추가할때 크기를 좀 키웠다 ;;;)
배경 블러로 레이어를 덮어주면, 위에서 보이는 것처럼 뒷 배경이 흐리게 뭉개진다. 이렇게하면 각 레이어들의 교차하는 부분이 적당히 일그러져서 물결처럼 보이게 된다.
나쁘진 않은데, 어딘가 살짝 부족한 느낌이 있다. 경계가 흐린 탓에 파도라고 하기보다는 안개를 보는 것 같기도 하다. 그래서 바로 다른 방법을 고민하기 시작했다.
Take 2.
파도나 물결을 단순하게 생각해보면 결국 한쪽 방향에서 다른쪽 방향으로 액체 덩어리들이 순차적으로 밀려나는 운동이기 때문에, 여러개의 레이어를 늘어놓고 특정한 움직임을 각각 순차적으로 실행하면 비슷한 효과를 낼 수 있지 않을까 싶었다.
레이어가 회전해서 처음 모양대로 놓이는 동안 (90도 회전), 그 옆에 겹쳐진 레이어가 처음 레이어보다 절반 정도 더 회전하고 (90도 + 45도 회전), 또 그 옆에 겹쳐진 레이어가 앞의 레이어보다 절반 정도 더 회전하고 (90도 + 45도 + 45도 회전), 또 그 옆에 겹쳐진 레이어가 앞의 레이어보다 절반 정도 더 회전하고…
인접한 레이어보다 45도씩 더 회전하는 레이어는 컴포넌트로 만들기 보다는 씬에서 바로 만들어 사용하는게 애니메이션의 미세한 조절에 유리해 보였다. 먼저 첫번째 시도와 유사한 형태로 레이어를 여러개 겹쳐놓고, 첫번째 레이어에 Start 트리거를 추가하고 Rotate 리스폰스는 아래와 같이 설정했다.
Rotation: Rotate By 90
Direction: ⟳
Easing: Linear
Duration: 0.8
Start Delay: 0
Repeat: Interval 0.4, Infinite Repeat
그런데 생각해보니 파도가 항상 일정한 간격으로 출렁이지는 않으니까, 반복되는 간격(Interval)을 조절할 필요가 있었다.
Interval: random(0.1, 0.4)
이어지는 레이어들을 순차적으로 앞의 레이어보다 조금씩 더 회전시키기 위해서 Detect 트리거와 Rotate 리스폰스를 반복해서 추가했다.
Detect
Rectangle 1, Rotation
Rotate
Rectangle 1 Copy
Rotation: Rotate To 'Rectangle 1'.rotation + 45
Direction: ⟳
Easing: Linear
Duration: 0.8
Start Delay: 0
Detect
Rectangle 1 Copy, Rotation
Rotate
Rectangle 1 Copy 2
Rotation: Rotate To 'Rectangle 1 Copy'.rotation + 45
Direction: ⟳
Easing: Linear
Duration: 0.8
Start Delay: 0
Detect
Rectangle 1 Copy 2, Rotation
Rotate
Rectangle 1 Copy 3
... (반복)
이렇게 하니 각 레이어가 차례로 회전하면서 어설프게나마 파도 모양을 흉내낼 수 있게 되었고, 레이어의 Radius값을 조절하면 조금씩 다른 느낌의 물결이 생겨났다.
이제 어떻게 만들어야 할 지 감을 잡았으니, 애니메이션의 단조로움을 개선하기 위해서 조금만 더 수정해 보기로 했다.
Take 3.
마지막 시도는 별다를 것 없이 두번째 시도에서 만들었던 파도를 하나 더 추가하고 색상이나 투명도, 라운드 등의 값들을 적당히 마음에 들 때까지 바꿔보는 것이었다.
레이어를 모두 복사한 뒤, Paste with Interaction Pieces로 붙여넣고 (⇧⌘V), 적당한 위치를 잡아주면 된다. 그리고 두 개의 물결이 서로 다른 타이밍으로 출렁이게 하기 위해서 복사한 레이어들의 리스폰스에서 애니메이션 재생시간(Duration)을 모두 늘려주었다.
레이어들의 속성을 이것저것 조절하다보니 어느 순간 “이제 됐다” 하는 지점을 찾게 되었다. 파도의 실제 모습과는 다르지만 몽글몽글한 느낌이 꽤나 만족스러웠다.
끝
소소하게 애니메이션을 만들며 위안을 삼아보지만, 대체 이 사태가 언제 끝날지. 기약없는 기다림이 막막하기만 하다. 화면 속에서 예쁘게 출렁거리는 물결을 보면 볼수록, 마스크 벗고 온몸으로 느낄 수 있는 현실의 바다가 보고 싶은 밤이다.
2020년 8월 20일에 발행한 미디엄 원문 링크를 첨부합니다.
