Framer 도전기 #번외편 Framer X Beta 와의 만남

대기번호 1751번. 

초대장을 손꼽아 기다려 왔는데, 드디어 Your Framer X Beta invite라는 제목의 메일을 받았다. 왔네왔어. 다운로드를 받습니다. 일단 지금 난 너무 떨리므로, 어떤 것도 제대로 해 볼 수 없을 것이다. 그보다는 Framer와 언어부터 다르기 때문에 건드릴 수 없다는 것을 알고 있다. 대략적인 리뷰를 해 보도록 하겠다. 기분탓인가 다운로드 속도는 왜 이리도 느린 것인가. 빨리빨리. 설치 빨리빨리.

첫화면을 접한 소감

외관이 몹시 심플하다. 베타 버전에서 가장 중요한 네 가지 메뉴만을 보여주고 있다. 정식 버전의 메인화면은 어떨지 기대가 된다. video를 누르면 지금까지 예고해 왔던 소개 영상들을 볼 수 있다. 그다음 Docs. Docs는 Framer를 공부할 때도 가장 많이 활용하는 편이다. 이번에도 열심히 활용할 수 있길 바라며 첫 페이지를 읽기 시작했다. 프레이머X 는 그야말로 뛰어난 디자인툴이자 설계 툴이자 개발툴이라 소개하는 글이었는데, 여기서 또 그동안 예고 영상을 보며 아쉬워 했던 부분을 짚어준다. 코드를 짜지 않고도 뛰어난 화면 설계가 가능하지만 코드 짜는 것을 즐긴다면 그또한 프레이머X가 최고의 환경이라니. 그럴수가. 디자인과 프로토타이핑을 각각 별개로 만들어왔던 다른 툴들의 단점을 극복했다는 점에서는 Framer 버전도 나름 괜찮은 수준이었다고 생각했었다. 그런데 Framer X 에서 더욱 발전된 형태를 자부하는 것 같아 궁금증은 대폭발이다. 아직 자바스크립트나 리액트에 대한 개념도 없기 때문에 화면 설계 이상으로 해 보기에는 무리가 있는 듯하다. 

예제 다뤄보기 

그래서 시작을 해 보기 전에 https://framer.com/x/examples 에 있는 예제들을 하나씩 살펴보기로 했다.

linking, stack, scrolling, components의 네 가지 예시가 있다. 

좌측에는 Tools, Layers, Components, Store의 네 개 메뉴로 구성돼 있다. 아이콘의 디자인이 많이 변경되었는데, 특히 Frame에 대한 아이콘이 많은 변신을 했다. 예전보다 굉장히 함축적이지만 약간은 귀여운 스타일로 변경된 것 같다. 굉장히 깔끔해졌다는 느낌이다. 메뉴를 쭈욱 살피다가 Day Mode를 발견하고 눌러 보았다.

음 그래, 안그래도 스케치같다고 예전부터 생각했었지. 그런데 더 스케치 같네. 난 프레이머 유저니까 새로 선보인 Night Mode를 쓰도록 하겠다.

튜토리얼 예제들을 통해 알 수 있었던 것. 일단 화면 설계를 굉장히 쉽게 할 수 있다. 따로 플러그인 설치가 없이 바로 flow를 그릴 수 있고 인터렉션까지 간편하게 구현할 수 있었다. 프로토파이 + 인비전 + 플린토 등 의 기능이 다양하게 포함되어 있는 듯한 느낌을 받았다. 튜토리얼대로 간단하게 버튼의 더블클릭과 단축키 몇 개 만으로도 동적인 화면이 구성되는 것에 조금 감동을 받긴 했다. 개인적으로 마스터 버튼은 스케치의 심볼보다 더 간편했다. 포토샵의 스마트 오브젝트와도 비슷했는데, 어떤 식의 링크가 걸려 있는지 모르겠지만 화면 자체에서 버튼의 스타일을 변경하니 다른 화면의 버튼들도 자동으로 변경된다. 디자인 시스템을 만들기에 적당하지 않을까 기대가 된다. 스크롤 컴포넌트 안에 어떤 컨텐츠가 들어갈 지도 간단하게 선택하면 끝이다. 나니....그동안 기초 다지기를 했던 것 같은 느낌이다. 코드를 입력하는 설렘과 재미가 있었는데, 이젠 그럴 필요도 없어졌다.

그럼 너무나 재미있던, 코드탭은 어디에 숨겨 놨는가.

하, 코드탭은 정말 숨어있는 게 맞았구나. 이건 정말 개발자를 위한 혜택이 아닐까? 기본으로 사용하고 있는 에디터를 이용해 코드 편집을 하는 거라고 한다. 설치되어 있는 개발 툴로도 가능하다지만 Docs에서 추천하는 Visual Studio Code와 플러그인을 설치했다. 그리고 .tsx형식의 파일을 수정하라는데?

지금까지 겪어보지 않은 일이기에, 여기서부터 멘붕을 겪는다. Framer에서는 작업하다 막히는 부분에서 Docs를 눌러 바로바로 도움을 받았는데, 이건 어디서 Docs를 찾는 것인가. 그리고 Visual Studio Code에서는 어떻게 프레이머 작업 파일에 코드를 연결시킬 수 있는지도 잘 모르겠다.

그러다 나보다 먼저 x를 받은 유저의 영상을 보니, 새 컴포넌트를 code로 만들겠다는 창을 사용하고 있었다. 바로 인터페이스 좌측 하단의 이 영역이다. from Code를 선택하고 생성하니Visual Studio Code에서 새로운 창이 열렸다.

뭐라고 써 있는 건지 알아들을 수가 없구나. 커피스크립트 공부한 게 정녕 이렇게 무쓸이 되는 것이란 말인가? 오오 그런데 프레이머의 커피스크립트와 html 마크업 등을 공부한 덕분인지, 기본 코드를 분석하는 것이 생각했던 것만큼 막히지는 않았다. 용어 등등에서 차이를 느꼈지만 그래도 조금은  읽을 수 있다는 것이 스스로 놀랍다. 조금만 열심히(아니 아주 열심히) 공부하면 Framer X를 디자인, 개발 툴로서 아주 유용하게 사용할 수 있지 않을까 싶다. 툴도 더 설치해라 git도 설치해라 뭐 진입 장벽이 사실 매우 높아진 것 같지만. 거기다 리액트의 ㄹ 자도 모르는 나에게 프레이머 X는, 너무 어렵다!

대략 맛본 후기 끝. 나는 과연 프레이머X를 쓸 수 있을까?