Framer X 베타 한 달 사용기
프로토타이핑 툴에서 인터랙티브 디자인 툴로 도약하다
어떻게 하면 디자이너와 개발자가 조금 더 쉽게 커뮤니케이션하고 협업할 수 있을까? 당장 UI 화면이야 그나마 어떻게든 되겠지만, 트랜지션, 애니메이션, 모션, 인터랙션은 대체 어떻게 설명해야 할지. 생각만 해도 난감하다. "스크롤을 하면 뒤에 화면이 슉하고 올라가고요, 아래에서는 카드가 휙 하고 올라와요. 아, 그게 아니라, 이런 느낌으로요. 슈-욱, 휘-익. 이해가 되시나요? 아... 그냥 느낌적 느낌으로 해주세요." 누구 얘기냐고? 내 얘기다. 회사에서 이걸 영어로 하는데 아주 가관이다.
ProtoPie, Flinto, Principle, Origami, Framer와 같은 프로토타이핑 툴은 이런 고민에서 태어났다. 덕분에 직접 만든 프로토타입을 보여주면서 쉽고 빠르게 설명하고, 피드백도 더 빠르게 받을 수 있게 되었다. 그러나 대부분의 툴이 실제로 개발하는 게 아니라 이미 구현되어 있는 기능으로 인터랙션을 조합하기 때문에 종종 원하는 프로토타입을 만들지 못하는 경우가 있었다.
Framer는 다른 툴과 달리 코드로 프로토타입을 만드는 툴이다. 커피 스크립트로 쓰여 있어서 보통 개발에 비해 진입장벽이 낮고, 라이브러리를 추가해 실제에 가까운 인터랙션을 구현할 수 있으며, 개발하기 전에 실현 가능한 디자인인지 미리 확인할 수 있으며, 정확한 값을 전달할 수 있다는 장점이 있다. 그러나 자유도가 높은만큼 난이도와 학습곡선이 높고, 다른 툴보다 프로토타입 만드는 시간이 오래 걸리며, 아무리 정확한 값을 받아도 결국 개발자가 처음부터 다시 개발해야 하는 단점이 있었다.
과연 Framer가 커뮤니케이션 시간 단축에 얼마나 기여했을까? 오히려 양쪽에게 부담으로 다가오지 않았을까? Framer X는 이런 배경에서 출발했다. 포토샵보다 유니티를 지향하는 툴, 디자이너와 개발자 모두 각자 잘하는 일을 하면서 한 툴에서 커뮤니케이션하고, 협업할 수 있는 툴. 얼마 전 Framer X 베타가 공개되었고, 대기번호 4번을 받은 덕분에 공개 당일부터 사용해볼 수 있었다.
Framer와 Framer X는 같은 툴일까? UI는 비슷해 보인다. 그러나 개념이 다른 툴이다. Framer는 프로토타이핑 툴이고, Framer X는 디자인 툴이다. Framer가 프로토타입으로 높은 수준의 인터랙션을 구현하고 싶은 디자이너를 타깃으로 만든 툴이라면, Framer X는 인터랙션 디자이너는 물론 프로덕트 디자이너와 UI/UX 디자이너, UI를 구현하는 프론트엔드 개발자 모두를 타깃으로 만든 툴이다.
Framer X 공식 문서에서는 Framer X의 역할을 다섯 가지로 보고 있다. 첫 번째는 와이어 프레임 그리기, 그다음은 비주얼 디자인, 세 번째는 인터랙티브 구현하기, 네 번째는 높은 수준의 인터랙티브 구현하기, 마지막은 디자인 인프라 구축하기. 이전 Framer가 세 번째와 네 번째 역할에 초점을 두었지만, Framer X 훨씬 더 넓은 영역을 커버한다.
Framer X는 여전히 베타 버전이다. 매주 새로운 기능이 추가되고 있으며 지난주에는 웹 브라우저에서 바로 미리 볼 수 있는 Live Preview 기능이 추가되었다. 그렇기 때문에 지금 시점에서 팀에서 사용할지 말지 논하는 기에는 조금 이르다고 본다. 기능보다는 무엇이 가능한지에 초점을 맞춰서 둘이 어떻게 다른지 지금부터 천천히 살펴보자.
React & TypeScript, ES6
Framer X는 모든 요소가 리액트 기반으로 작성되었으며, 커피 스크립트 대신 타입 스크립트와 ES6를 사용한다. 커피 스크립트가 분명 간편하긴 하지만 기능도 영 부족하고, 실제 사용하려면 결국은 자바스크립트로 바꿔줘야 했기 때문에 쌍수 들고 환영하는 바이다. 그런데 타입 스크립트와 ES6는 또 언제 배우지...
Code Editor
Framer X에는 Framer의 상징과도 같던 코드 탭이 사라졌다. 대신 코드 에디터를 사용한다. Framer X는 마이크로소프트에서 만든 Virtual Studio Code(이하 VS Code) 사용을 권장하고 있다. 나는 그동안은 Atom을 쓰고 있었는데, 덕분에 VS Code로 넘어와서 잘 정착했다. 코드 작성과 수정은 여기에서 하면 된다. 처음에는 왔다 갔다 하는 게 영 귀찮았는데, 한 달 정도 지난 지금은 그럭저럭 괜찮다.
Components
Framer X의 가장 큰 특징은 모든 개체를 컴포넌트화 할 수 있다는 점이다. 컴포넌트는 독립적인 역할을 수행하는 단위이며, 한 번 만들어 놓으면 언제든 재사용할 수 있다. 레고 블럭이라고 생각하면 편하다. 스케치에서는 Symbol이라고 부른다. 리액트에서는 이 컴포넌트들이 모여 하나의 UI를 구성한다. Framer X에서는 직접 그려서 디자인 컴포넌트를 만들 수도 있고, 코드로 컴포넌트를 만들 수도 있으며, 코드로 만든 컴포넌트 위에 디자인을 할 수도 있고, 디자인 컴포넌트 위에 코드로 기능을 추가할 수 있다. 예를 들어, 개발자가 버튼 컴포넌트를 코딩으로 만들면, 디자이너가 그 위에 디자인을 씌울 수 있으며, 그 반대도 가능하다.
Store
컴포넌트 스토어는 Framer X를 개발자와 디자이너 모두가 사용할 수 있는 강력한 툴로 만드는 가장 중요한 지점이다. 개발자는 본인이 코딩한 컴포넌트를 스토어에 올릴 수 있으며, 디자이너도 본인이 그린 디자인 컴포넌트를 스토어에 올려둘 수 있다. Framer X 사용자는 스토어에 들어가 사람들이 만든 컴포넌트를 설치해서 진행하고 있는 프로젝트에 유용하게 사용할 수 있다. 회사 혹은 팀 내부에서만 스토어도 만들 수 있어서, 팀 전체가 익숙해지기만 하면 매우 효과적인 툴이 될 것이다.
Stacks
Stacks는 Framer X가 자랑하는 혁신적인 기능 중 하나다. 그냥 화면에 Frame을 몇 개 그리고, Stacks 버튼을 누른 다음에 전체를 드래그해서 영역을 잡아주고, 여백과 간격을 잡아주면 레이아웃 잡는 일이 세상 편해진다. 티저 영상에서도 감동했었는데, 실제로 써보니 너무 유용하다. 아직까지는 가로, 혹은 세로로만 배치할 수 있는데, 조금 더 디테일한 레이아웃을 그릴 수 있는 기능이 추가되길 기대해본다.
Scrolling
Scrolling도 Stacks와 마찬가지로 Framer X가 얼마나 편한지 보여주는 대표적인 기능이다. 스크롤 영역과 스크롤 화면을 연결해주면 된다. 기존 Framer의 ScrollComponent를 시각적으로 구현한 기능으로 보이는데, 코드로 작성할 때보다 훨씬 직관적이고 간단하다. 진작 이런 기능이 있었다면, 그 많은 시간을 허비하지 않았을 텐데...
Link
Link는 꽤 많은 프로토타이핑 툴에 이미 있는 기능으로, 버튼과 화면을 선으로 연결한 다음 인터랙션을 지정하면 화면과 화면 사이를 연결할 수 있다. 이전 Framer에는 없었던 기능으로 Framer X가 처음 이 툴을 사용하는 사람도 쉽고 빠르게 프로토타입을 만들 수 있도록 많이 배려했다는 생각이 들었다.
Override
여기서 의문이 든다. 분명 간단한 인터랙션이 들어간 프로토타입을 만들기는 훨씬 쉬워졌는데, 복잡하고, 높은 수준의 마이크로 인터랙션은 어떻게 구현하지? 코드 오버라이드 기능은 간단하게 만든 자바스크립트 함수를 컴포넌트에 덮어 씌워주는 역할을 한다. 만약 버튼을 그렸는데, 버튼을 눌렀을 때 크기, 위치, 혹은 투명도가 변하게 하고 싶으면, 코드 에디터에서 그 함수를 써서 추출해주고, 덮어씌워주면 된다. 리액트 기반으로 쓰여 있어서 처음에는 이게 뭔가 싶지만, 들여다보면 볼수록 오히려 구조가 더 잘 잡혀 있는 느낌이 든다.
에필로그
Framer X의 첫인상에서 나모 웹에디터 생각이 났다. 한 툴로 디자이너와 개발자 모두의 기대를 충족시키고 싶다는 의지가 느껴졌다. 그러나, Framer와 너무 많은 게 바뀌어서 Framer 파워 유저로서 이 툴을 사용할 이유가 사라진 기분이 들었고, Framer로 금방 구현하던걸 Framer X에서 구현하기 위해서는 이제 리액트까지 제대로 배워야 한다니, 너무 부담스러웠다.
사실 디자이너와 개발자 사이에서 고민하는 인터랙션 디자이너로서 언젠가는 가야 하는 길이었다. Framer가 그런 사람들의 니즈를 충족시켜주었으나, 어떻게 보면 발목을 붙잡았다고 볼 수도 있다. 그래서 Framer X를 3번 정도 사용해보고 리액트를 배우기 시작했다. 구조만 이해하면 Framer에서 구현했던 인터랙션을 구현할 수 있을 거라는 판단이 섰고, 자바스크립트 라이브러리도 별도 모듈로 만들 필요 없이 바로 적용할 수 있겠다는 생각이 들었기 때문이다.
그래서 Framer X를 써야 할까? 개발자는 이런저런 컴포넌트도 만들고, 스토어에 배포도 하면서 이것저것 해볼 수 있어서 괜찮지만, 디자이너 입장에서는 아직까지는 스케치와 크게 다르지 않기 때문에 굳이 지금부터 사용할 필요는 없을 것 같다. 정식 버전 공개까지 아직 시간이 조금 남았다. 디자인 프로세스에 어떻게 적용하면 좋을지 천천히 고민해보면서 곧 정식으로 출시될 Framer X를 기다려보자.
+ 하나하나 다 녹화해서 gif 파일로 만들었는데, 브런치에 안 올라간다. 뭐하러 했지. 흑흑.
