프레이머X 야매 코딩 시작하기
How do you react to ‘React’?
프레이머X로 프로토타이핑을 시도하면서 무엇보다 답답했던 점은, 대체 어떻게 해야 내가 프레이머 클래식에서 구현하던 것을 프레이머X로 만들 수 있는가 하는 점이었다. 정말 간단하게 레이어의 x, y 값을 이동시키는 애니메이션 하나를 만들어 보려고 해도, 도무지 어떻게 해야할 지 감이 오지 않았다.
결국 여러 번의 검색과 삽질(?) 끝에 몇 가지를 어렴풋이 이해하게 되었고, 부디 이 글이 나 같은 리알못(리액트를 알지 못하는…)에게 프레이머X의 첫 단추를 끼우는 용기가 되기를 기대해 본다.
어렵지만 어렵지 않아요
리액트가 낯설기는 하지만 전혀 새로운 언어는 아니고, 자바스크립트를 조금 더 편하게 사용할 수 있도록 하는 라이브러리일 뿐이라고 한다. 부디 겁먹지 말자.
게다가 프레이머X에서는 친절하게도 처음부터 Framer.js 라이브러리를 사용할 수 있게 만들어 두었다. 이 말인즉슨, 약간의 문법만 익히면 프레이머 클래식에서 하던 방식을 비슷하게 적용할 수 있다는 뜻이다.
정확한 설명은 아니겠지만, 내가 대략 이해한 바로는 아래와 같은 구조로 인터랙션을 만들게 된다.
1. 상태값 설정
2. 이벤트 추가
3. 상태값 매칭
레이어를 하나 선택해서 오른쪽 패널의 Code Override를 선택해 보면, ‘Edit Examples.tsx’를 확인할 수 있다. tsx는 TypeScript 라고 해서 자바스크립트의 확장형이라고 하는데, 자세한 것은 모르겠지만 좋다니까 일단 믿고 열어보기로 한다.
열어보면 무언가 알 수 없는 코드들이 주루룩 등장하는데, 복잡해 보이지만 알고 보면 위에서 설명했던 구조에 지나지 않는다. (하지만 아마도 복잡한 인터랙션을 구현하려면 조금 더 정교한 구조가 필요할 것 같다… 🧐 )
위의 샘플 코드는 data에 이런저런 최초 상태값을 설정해 두고, ‘Scale’ 이라고 이름 붙인 녀석에게 data의 설정값 중 scale을 매칭한다. 그런 다음 탭하면 상태값을 이렇게 저렇게 변경하라는 뜻이다.
기본적인 상태값 변경 애니메이션
일단 직접 만들어 보자. 모바일 다음앱의 날씨 확인 인터랙션이 적절한 예가 될 것 같다.
단위 인터랙션으로 쪼개보면 다음과 같다.
- 콘텐츠 화면 탭하기
- 음영 (scrim, dim) 나타나기
- 날씨 레이어 아래에서 위로 올라오기
콘텐츠/음영/날씨 레이어를 각각 적절하게 배치한 뒤, 콘텐츠 레이어를 선택하여 우측의 코드 패널을 선택한다. example이 아닌 새 파일에서 새 마음 새 뜻으로 코드를 작성해 보자.
음영 레이어가 콘텐츠 화면보다 위에 있기 때문에, 콘텐츠 화면을 탭하려면 최초에는 음영 레이어가 보이지 않으면서 동시에 인터랙션 할 수 없는 상태여야 한다. 따라서 음영 레이어는 visible과 opacity를 상태값으로 추가하고, 날씨 레이어는 y좌표를 상태값으로 추가한다.
날씨 레이어의 y값을 변경하는데 왜 이름을 weatherTop 이라고 했을까? 이미 눈치챘을지 모르겠으나, react에서는 레이어의 위치를 변경할 때에 x, y 대신에 top, bottom, left, right를 사용하게 된다. 조금 어색하긴 하지만 하다보면 금방 적응된다.
상태값 설정을 마쳤으면, 이제 콘텐츠 화면을 탭 하는 이벤트를 추가해 보자.
프레이머 클래식에서 익숙했던 onTap 이벤트에 음영 레이어의 visible값을 true로 바꾸고, ease 커브로 각 설정값을 0.3초에 걸쳐 변경하는 애니메이션이다.
위 아래로 거추장스레 붙어있는 export const라든지, 각종 괄호와 세미콜론은 어쩔 수 없이 정해진 약속이니 그러려니 하고 넘어가도록 하자. 익숙해지는 수 밖에 없다. 😭
하지만 역시 무언가 허전하긴 하다. 왜 여기서는 이벤트를 실행할 레이어와 변경될 레이어를 지정하지 않는걸까? 잠시 프레이머 클래식에서 작성하던 코드를 떠올려 보자.
‘Layer.onTap’에서 Layer 부분은 어떻게 해야 할까? 여기가 바로 프레이머X의 백미라고 생각하는 부분인데, 어려운 코드를 최대한 GUI로 표현하려 했다는 점이다. 코드를 저장하고 프레이머X 화면으로 돌아와 보면 조금 전에 지어준 이름인 ‘contentTap’이 Code Override에 표시되는 것을 확인할 수 있다. 코드로 작성한 내용들을 이렇게 각각 원하는 레이어에 연결시켜주는 것이다.
하지만 여기까지 하고 프리뷰를 확인해 보아도, 화면을 탭 했을 때에 아무 일도 일어나지 않는다. 왜 그럴까? 인터랙션을 만들기 위한 구조 3단계 중에서, 상태값 설정과 이벤트 추가는 완료했지만, 아직 상태값 매칭이 해결되지 않은 상황이다. 다시 한 번 프레이머 클래식에서 작성하던 코드를 보자.
여기서 상태값 매칭이라 하면, 프레이머 클래식에서 작성하던 코드 중에 ‘dim.animate’와 ‘weather.animate’ 정도에 해당할 것이다. 상태값이 변경될 레이어를 지정하기 위해서 코드를 다시 열어 보자.
음영과 날씨 레이어에 onTap 이벤트로 변경되는 상태값을 매칭하기 위해서는 아래와 같이 적어주면 된다.
코드를 저장하고 프레이머X로 돌아와서 아까 content 레이어에 Code Override를 통해 contentTap을 연결한 것처럼, 음영 레이어와 날씨 레이어에 각각 dimLayer와 weatherLayer를 연결해 준다.
이제 상태값 설정, 이벤트 추가, 상태값 매칭의 3단계가 모두 마무리 되었다. 스스로 토닥여주며 프리뷰를 한 번 확인해 보자. Ta-da! 🎉
*프레이머 X 버전 업데이트 이후 프레이머 라이브러리 버전 호환 문제로 인해 정상적으로 작동하지 않는 이슈가 있습니다. 이 경우, File > Update Framer Library 혹은 Framer Library Version > Built-in 을 선택하시면 해결됩니다 :)
그럼 공유는 어떻게??
프레이머 클래식에서는 클라우드에 올려서 곧바로 URL 공유가 가능했지만, 프레이머X에서는 눈 씻고 찾아봐도 클라우드 공유 아이콘이 없었다. File > Export Web Preview를 선택해도 폴더가 하나 생성될 뿐이었다. 동료들에게 매번 폴더를 압축해서 보내기는 상당히 번거로운 일이다.
프레이머에서는 프로젝트를 공유하는 방법으로 외부 서비스인 Netlify Drop을 소개하고 있다.
Export Web Preview로 생성한 폴더를 밀어넣으면 알아서 퍼블리싱하고 주소를 뽑아준다. 제한적이긴 하지만 사이트명을 편집할 수 있어서 편리하게 활용할 수 있다. 위에서 만들었던 예제를 퍼블리싱 해보았다.
단, 비공개 설정을 위해서는 유료 플랜에 가입해야 하므로 보안을 생각한다면 회사 내 서버에 업로드 하여 공유하거나, 불편하지만 폴더 자체를 공유하는 방법을 추천한다.
이젠 정말 공부뿐이야!!
여기까지 간단하게 인터랙션을 구현하고 공유하는 방법에 대해서 알아보았다. 하지만 우리가 만들어야 하는 것들은 결코 단순하지 않을 것이다. 결국 우리는…
참고하면 좋을 만 한 링크를 소개하면서 글을 마친다. 모두 화이팅!!! 🤞
