Framer X, 약일까 독일까
간단한 리뷰와 소감
올 가을 출시 예정인 Framer X의 베타 버전이 사전 신청 순으로 배포되고 있습니다. 약간의 기다림 끝에 저에게도 기회가 닿아 간단히 기능들을 살펴보았습니다.
정식 출시에는 추가될 것으로 예상하고 있지만, 현재 클라우드 업로드, 스케치 임포트 등의 기능들이 없어서 아직 실무에서 사용하기에는 무리가 있습니다.
기본화면
블랙테마가 기본이고, 구성은 기존 버전과 비슷합니다. 좌측에 다음 네 가지 메뉴가 제공됩니다.
Tools (레이어 추가)
Hierarchy (현재 작업중인 레이어 목록)
Components (스토어를 통해 설치하거나, 새롭게 생성한 컴포넌트)
Store (개인들이 만들어 공개한 컴포넌트)
Store
이미 알려진 것처럼 Framer X는 리액트 기반으로 컴포넌트를 만들 수 있습니다. 스토어에는 이렇게 만들어진 유용한 컴포넌트들이 이미 여러 개 올라와 있습니다.
Components
스토어에서 설치한 컴포넌트는 좌측 컴포넌트 메뉴에서 확인할 수 있습니다. 드래그 앤 드랍으로 원하는 위치에 추가하면 됩니다.
코딩으로 만들어진 컴포넌트지만, 코드를 모르더라도 설정값을 변경할 수 있는 UI를 우측에서 제공합니다.
아래는 탭 구성을 변경하는 예시입니다.
Tools
툴에서는 이전 버전과 같이 기본적인 레이어를 추가할 수 있으며, 새롭게 추가된 사항이 몇 가지 있습니다.
1. Stack
스택을 만들고, 그 안에 레이어들을 추가하면 자동으로 정렬해 줍니다. 스케치에도 있으면 정말 편할 것 같은 신박한 기능입니다!!
2. Scroll
이전 버전에서 스크롤 컴포넌트를 생성하고, 자녀 레이어를 추가했던 방식이 드래그 앤 드랍으로 손쉽게 해결됩니다. 스크롤을 만들고, 이미 만들어놓은 디자인을 링크로 연결하면 자동으로 스크롤 됩니다.
3. Link
스크롤 콘텐츠를 연결할 때 사용한 방식인 링크는 정말 재미있는 기능입니다. 링크를 활용하면 씬 전환이나, 팝업, 바텀시트 등을 간단히 구현할 수 있습니다.
Code
그렇다면 기존에 있던 코드를 작성하는 창은 어디로 사라졌을까요? 안타깝지만 Framer X는 코드창을 따로 제공하지 않습니다.
좌측 컴포넌트 메뉴에서 하단에 있는 ‘new component > from code’를 선택하면, 별도로 설치한 외부의 코드 에디터를 열어서 코드를 작성하게 됩니다. 코드로 만든 컴포넌트는 우측에 코드 수정 메뉴가 추가됩니다.
리액트로 작성해야 하는 까닭에 기존의 커피스크립트와는 다소 차이가 있습니다. 아마 이 부분에서 허들이 클 것 같습니다.
소감
어쩌면 Framer X의 타겟은 스케치를 사용하는 UI 디자이너가 아닐까 할 정도로 디자인과 관련한 기능을 강화했고, 기본적인 인터랙션은 구현하기 쉬워졌지만, 커스텀 인터랙션을 구현하는 것은 이전에 비해 정말 어려워 보입니다.
아마 스토어에서 컴포넌트들을 다운받아 코드를 수정해가며 작업하게 되지 않을까 예상합니다.
Framer X가 정식 출시되더라도 한 동안은 기존 버전도 계속 지원할 것이라는 반가운 소식이 있었지만, 결국 기존 버전은 페이드아웃 될 것 같습니다. 높은 수준의 코딩 스킬이 없더라도 어느정도 완성도 있는 커스텀 인터랙션을 구현할 수 있다는 점이 Framer의 가장 큰 장점이었는데, Framer X에서는 이런 장점이 사라져 버린 듯 합니다.
개발자와의 커뮤니케이션이 더욱 용이해질 수는 있겠으나, 이것은 어디까지나 리액트를 이해하고 사용할 줄 아는 디자이너에 한정된 케이스 입니다. 리액트를 공부해야 할까? 그럴바엔 차라리 네이티브 개발이 낫지 않을까? 하는 생각도 스쳐갑니다.
정식 출시 이후에 판가름 나겠지만, 기존 사용자들의 대거 이탈과 신규 사용자의 대거 유입이 동시에 예상됩니다.
2018년 8월 30일에 발행한 미디엄 원문 링크를 첨부합니다.
