프레이머X 야매 코딩: Drag
Show me the Drag component
지난 글에서는 간단한 Tap 인터랙션을 만들어 보았다.
Tap 이외에도 모바일에서 자주 사용하는 제스처 중에는 ‘Drag’가 있다. 프레이머 클래식에서는 코드 한 줄만 추가하면 어떤 레이어든지 드래그 속성을 부여할 수 있어서 매우 편리하게 활용할 수 있었다.
LayerA.draggable.enable = true
하지만 프레이머X에서는 다소 번거로운 과정을 거쳐야 한다. 프레이머에서 아직 Docs에 드래그 관련 내용을 추가하지 않은 것은, 아마도 Scroll이나 Page처럼 기본 컴포넌트로 추가할 목적이 있는 것은 아닐까 하는 생각도 든다.
카카오 지도의 지도판 드래그 인터랙션을 만들어 보면서 프레이머X에서의 드래그 인터랙션 만들기 과정을 직접 확인해 보자.
코드 컴포넌트 만들기
우선 위 아래 UI 요소들과 커다란 지도판 이미지 하나를 준비한다. UI 요소들 사이의 뻥 뚫린 공간에서 이 지도판을 드래그 하도록 만들 예정이다.
드래그를 구현하기 위해서는 코드 컴포넌트를 하나 만들어야 한다. 이미 만들어 놓은 레이어에 드래그 속성을 추가하는 방법이 궁금할 수 있겠지만, 여기서는 언급하지 않기로 한다. 솔직히 나도 잘 모르겠다… 쉿. 🤫
왼쪽 패널의 3번째 Components 메뉴에서 ‘from Code’를 선택하여 새로운 코드 컴포넌트를 생성한다. (단축키 ⇧⌘K)
어딘가 복잡한 코드들이 또 한 번 등장했다. 하지만 걱정할 것 없다. 우리는 이 코드를 사용하지 않는다. 여기에는 아직 드래그 속성이 없기 때문이다. 코드의 두 번째 줄을 보자.
‘framer’에서 무엇 무엇을 가져오겠다는 말이다. 바로 이거다. 여기서 기존 framer.js에서 사용하던 각종 속성들을 불러오는 것이다. 반가운 마음으로 Draggable을 불러본다.
그 다음으로는 필요하지 않은 const style과 interface Props를 지우고, export class dragArea… 안에 있는 static도 모두 지운다. render의 내용만 다음과 같이 수정하면 된다.
응? 뭐야? 생각보다 간단하잖아?
…라고 생각한다면 그 생각 잠시 접어두라고 얘기해 주고 싶다. 아직 끝이 아니다. 코드를 저장하고 프레이머X로 돌아오면 방금 만든 컴포넌트를 확인할 수 있다. 우선 지도 UI 사이에 끌어다 놓고 프리뷰를 확인해 보자.
드래그 포인트를 조금 덜 따라오는 느낌이고, 드래그가 끝나면 다시 제자리로 돌아간다. 프레이머에서 Draggable 속성에 무언가 양념을 쳐 놓은 것 같다. 게다가 우리는 저 사각형 레이어를 드래그 하는 게 아니라, 지도판을 드래그 해야 한다. 우선 드래그 컴포넌트에 지도판을 자녀로 추가하기로 한다.
자녀 추가하기
오른쪽 패널의 Edit Code를 선택하고 저장했던 코드를 수정해 보자. 코드 컴포넌트에 자녀(콘텐트)를 추가하려면 배경을 투명하게 비워 두고 코드를 한 줄 추가하면 된다.
이미 입력된 코드를 수정하거나 새로운 코드를 추가할 때에는 괄호의 모양과 개수에 주의한다.
이제 코드를 저장하고 돌아오면 투명한 드래그 컴포넌트에 점이 하나 생긴 것을 확인할 수 있다. 눈치챘겠지만 우리는 방금 컴포넌트에 링크를 추가할 수 있도록 만든 것이다. 스크롤 컴포넌트나 페이지 컴포넌트를 사용할 때에 간단하게 콘텐트를 추가할 수 있게 해주던 그 링크가 맞다.
이제 컴포넌트에서 지도판 레이어를 링크로 연결하고, 크기도 지도판과 맞춘다. 그런 다음 컴포넌트를 중앙 정렬하고 지도UI 아래에 위치하도록 하면 원하던 그림이 완성된다.
this.props.children은 정말 마법의 주문 같다. 이 코드만 있으면 이미 생성한 레이어를 링크로 연결하여 손쉽게 자녀로 추가할 수 있다. 아마 앞으로도 자주 사용하게 될 것 같다.
빌트인 애니메이션 제거하기
이제 그럴듯한 화면이 완성되었지만, 여전히 문제가 남아있다. 아무리 드래그 해도 원래대로 돌아오는 지도판. 프레이머가 미리 만들어놓은 ‘dragReturnAnimation’ 이라는 녀석이 범인이다. 드래그 하는대로 지도판을 움직이게 하려면 이 빌트인 애니메이션을 제거해야 한다.
여기서부터 조금 복잡해진다. 하지만 당장 이해하지 않아도 괜찮으니 우선 따라해보고, 나중에 천천히 다시 보는 것을 추천한다. 사실 나도 아직 잘… 쉿. 🤫
dragReturnAnimaion을 컨트롤 하는 방법은 아래와 같다.
- 드래그 리턴 애니메이션 초기화
- 드래그 애니메이션이 시작할 때에 드래그 리턴 애니메이션 확인
- 확인된 드래그 리턴 애니메이션을 취소하는 함수 준비
- 드래그가 끝났을 때에 드래그 리턴 애니메이션을 취소하는 함수 호출
드래그 컴포넌트에 위의 내용들을 주르륵 추가하고, render에서 하나씩 불러온다. 드래그 할 때 지도판이 더 기민하게 따라오도록 만들기 위해서 Draggable 안에 speedX와 speedY 속성도 추가한다.
코드가 복잡한만큼 궁금한 것도 많겠지만, 이것은 어디까지나 야매 코딩이므로 일단 버그가 없기를 기원하며 프리뷰를 확인해 보자.
*프레이머 X 버전 업데이트 이후 프레이머 라이브러리 버전 호환 문제로 인해 정상적으로 작동하지 않는 이슈가 있습니다. 이 경우, File > Update Framer Library 혹은 Framer Library Version > Built-in 을 선택하시면 해결됩니다 :)
수고한 스스로에게 박수를. 👏👏👏 지난 글에서 참고 링크로 첨부했던 Jay Stakelon의 튜토리얼을 따라가보면 더욱 친절하고 상세한 설명을 확인할 수 있다.
드래그 인터랙션을 만들기 위해 이렇게 멀고 먼 길을 돌아왔다. 프레이머가 하루빨리 드래그 컴포넌트를 추가했으면 좋겠다. 정말 이 길 밖에 없을까?
Pose 라이브러리
다른 라이브러리를 사용한다면 조금 더 편하게 애니메이션을 구현할 수 있을 것 같다는 생각에 구글신께 물어보다가 프레이머X에서 사용하는 방법까지 친절하게 안내하고 있는 ‘Pose’를 알게 되었다.
하지만 배경지식이 부족했던 나는 npm이 무엇인지, yarn은 또 무엇인지, 궁금증만 더해갈 뿐, 라이브러리를 설치하기도 전에 지쳐버렸다. 그러던 찰나, 귀인의 도움으로 드디어 Pose 라이브러리를 사용할 수 있게 되었으니, 런던에서 활동하는 디자이너 Steve Ruiz가 이것을 컴포넌트로 만들어서 프레이머X 스토어에 공개한 것이다!!
스토어에서 PosedComponent를 찾아 설치한 후, 화면에 컴포넌트를 얹어보면 자녀를 추가하고 Code Override를 사용하라는 문구가 표시된다. 원하는 레이어를 자녀로 추가하고, 오른쪽 패널에서 Code > New File을 선택해 코드를 작성해 보자.
우선, PosedComponent 스토어 페이지에서 안내하는대로 코드의 첫 부분을 수정하여 pose 라이브러리의 속성들을 불러온다. 코드에서 확인할 수 있듯이 이렇게 하면 Scroll, Hover, Press, Focus, Drag 같은 다양한 인터랙션을 사용할 수 있게 된다.
그런 다음 PosedComponent 스토어 페이지에서 원하는 인터랙션의 예제 코드를 찾아 복붙한다. 지금 우리에게 필요한 것은 Drag. 여기서도 드래그하는 동안 레이어가 살짝 커지는 양념이 들어가 있지만, 이 효과를 컨트롤 할 수 있는 코드도 있다. 해당 코드를 붙여보면 이런식으로 코드가 구성된다. 무척 간단하다.
코드를 저장하고 돌아와서, 오른쪽 패널의 Code Override에서 방금 전 export const 뒤에 적었던 이름을 선택한다.
프리뷰를 확인해 보면, 위에서 복잡한 과정을 거쳐 완성한 드래그와 별 차이가 없다. 아마도 이런 확장성 때문에 어렵지만 프레이머X를 어떻게든 사용해 보려고 노력하는 것이 아닐까?
마치 프레이머 클래식을 처음 배울 때처럼 막막하고 고단한 기분이다. 그나마 커피 스크립트에 익숙해진 덕분인지 대충 무슨 뜻인지는 알겠지만, 고교시절 수학 시간처럼, 설명을 들을 때는 그렇구나 하다가도 혼자 해보려고 하면 머릿속이 하얘진다.
그럴수록 공감과 위로가 필요한 것 아닐까? 나와 비슷한 처지에 있는 사람들을 만나며 위안을 삼아보자. 나만 어려운 것이 아니라 다들 어렵다. 어차피 우린 개발자가 아니니까. 복붙하고 멍때리다보면 어떻게든 되는 것 같다. 그러니까 얼른 복붙할 만한 예제가 많이 나왔으면 좋겠다.
