내가 Framer X에 미쳐있는 이유 (Framer X 6개월 사용기)

Published in

Harbor School (하버 스쿨)

8 min readApr 17, 2019

2018년 8월경 Framer X 가 드디어 등장했었습니다. 그리고 근 8개월이 지난 지금도 대부분의 사람은 Framer X? 핫한 건 알겠는데 왜 사용해야 하는지 잘 모르겠어.. 어디서부터 시작해야 할지 모르겠어.. 등의 이야기를 합니다.

Framer X 가 이해하기 어려운 이유는 다음과 같죠

여전히 Framer Classic을 선호한다 (습관은 잘 안 바뀝니다)
왜 Framer X가 만들기 더 어려운 것 같은데 좋은지 모르겠네요
우리는 고 정밀도의 프로토 타이핑은 필요 없는 것 같아요..
정말이지 왜 제가 React & Typescript까지 해야 하나요?

결국 대부분의 사람들이 아직 Classic을 쓰고 있고 X는 취미(?) 정도로만 쓰는 것 같습니다. 여전히 Framer X는 어렵죠

이 내용에 공감하고 있다면, 아래에 제가 6개월간 사용하고 어떻게 Framer X에 미쳤는지를 토대로 만든 새로운 가이드 맵을 한번 살펴보시면 좋을 것 같네요 🙌

다른사람이 만든 컴포넌트로 빠르게 프로토 타이핑 하기

“컴포넌트는 당신의 프로젝트의 부품들을 재사용하고 남들과 공유해줄 수 있게 합니다“
— Koen Bok (Framer)

Framer X 는 마치 레고를 갖고 노는것과 같습니다.

프로젝트를 처음 시작할때, 스토어에서 레고들을 고릅니다. 그리고 조심스럽게 프로젝트에 하나하나 쌓아갑니다.

프로젝트를 완전한 0 에서 시작할 일 이 거의 없죠

그냥 저녁 만들기위해 쇼핑을 갔다고 생각하는것도 좋은 생각 입니다. 🥘

결과적으로 Framer X는 커뮤니티에 의해 놀랍도록 성장하고 있습니다.

이말은 Framer X는 커뮤니티 사람들이 사용하면 사용할수록 프로토타입에 드는 속도가 현저하게 줄어든다는 이야기 입니다.

Framer X Store에서 자주 쓰는 Component 들을 추려 봤습니다

1) Slider (by Benjamin den Boer)

정말 다양한 모양으로 조정할 수 있는 슬라이더입니다. 프로젝트의 Property 들을 연결하기가 매우 쉽습니다.

2) iOS

iOS 12 UI Kit (by Edoardo Mercati) / iPhone X Kit (by Kasimir Hirvikoski) / iOS Touch ID (by ruucm)

iOS에 들어가는 요소를 매번 다른 곳에서 import 할 필요가 없습니다
Animation 이 내장되어있는 iOS 컴포넌트들을 활용해보세요

3) Sticky Headers (by Ismael Martínez)

드래그 앤 드롭으로 Sticky Header도 몇 개든 만들 수 있습니다

4) Lottie (by Airbnb)

클래식에서는 이 모듈을 사용해 Lottie를 썼다면, Framer X에서는 Airbnb 가 관련 모듈을 직접 만들어 놓았습니다
After Effects 모션들을 Framer X에 간단히 추가해보세요

5) Page & Scroll & Stack (by Framer Team)

Framer 팀은 사람들이 많이 쓰는 컴포넌트를 이미 내장시켜 놓았습니다
생각해보세요. 커뮤니티 사람들이 이렇게 쓸만한 컴포넌트들을 계속 만들면 무슨 일이 벌어질지

React 의 파워 이전에, Javascript의 파워를 사용하세요

React는 복잡한 인터랙션에 최적화되어있고, Framer 팀은 그것을 Framer X에서 아주 잘 사용하고 있죠

그러나 이 말이 당신이 React의 문법을 사용해야 한다거나, React를 전부다 이해해야만 Framer X에서 애니메이션을 만들 수 있다는 의미는 아닙니다

왜냐면 우리의 멋진 Framer 팀은 ‘Override’ & ‘Data’를 만들어 놓았거든요
Override와 Data는 기본적으로 Javascript 문법을 사용하면 되지, React의 문법을 사용하지는 않아도 됩니다.
이것들을 잘 붙여 놓으면, 변화하는 데이터를 당신의 element로 던져서 애니메이션을 만들어 줍니다

내부적으로 이건 React가 데이터의 변화를 감지하고, 자신을 새로고침 하는 것과 같지만, 이 React의 방법을 당신이 쓸 필요는 없어요
왜냐면 Framer X에서의 거의 모든 애니메이션을 Override와 Data를 사용해서 만들 수 있기 때문이죠.

저는 제 학생들에게 코드를 공부해야 하는 압박이 온다면, React를 배우기 전에 Javascript 가 뭔지 먼저 감을 잡는 게 중요하다고 말합니다.

Javascript 는 기본적으로 웹사이트의 요소들(dom)을 변경시키고, 사람들이 잘 못하는 컴퓨팅 파워를 사용할 수 있습니다.

반복된 코드를 현저하게 줄여주는 for 루프 (왼쪽) / 큰 프로젝트들을 아름답게 정리해줄 수 도 있습니다 (오른쪽)

Framer X는 표준을 토대로 만들어져서, 어느것이든 결합 할 수 가 있습니다
— Koen Bok (Framer)

React는 Framer X에서 Code Components에 주로 사용되지, 디자인이나 프로토타이핑 (애니메이션)을 위해 사용되지는 잘 않습니다.

다음 파트에서는 이제 React를 사용하는 부분에 대해서 알려드릴게요 🤔

React Power (팀을 위해 최종 프로덕트에 가깝게 만들기)

“실제 데이터를 디자인에 가져오는 것은, 우리를 최종 프로덕트에 가깝게 만듭니다. 실제 이름들과, 사진, 그리고 콘텐츠들을 통해 우리는 최종 프로덕트의 유저들에 대한 공감대를 얻습니다“
— Zach Johnston (DropBox Design)

만약 당신의 팀이 React를 사용한다면, 프로덕트를 만드는데 엄청난 이득을 줍니다.
Dropbox 디자인 팀이 ‘Designing with real data’아티클에서 언급한 것처럼, 끝내주는 일의 흐름이 디자이너와 개발자 사이에서 생길 수 있어요

‘Team Store’ 를 사용하면 은밀하게 당신 팀만의 components 스토어를 만들 수 있습니다. 이건 정말 ‘Design System` 을 만들기에 끝내주는 툴이죠.

기본적으로, Framer X는 개발자들의 표준 코드인 ES6, Typescripts를 사용합니다.
모든 Javascript 개발자들은 당신이 Framer X에서 사용한 코드와 같은 코드를 사용하죠
또한 Framer 팀은 Popmotion 과의 결합을 Beta 버전에서 준비하고 있어요
당신의 개발자들은 이 라이브러리의 퍼포먼스와, 스피드에 반할 거예요