UX팀이 디자인툴을 변경하기 위해 Framer을 사용한 경험을 공유합니다.
디자인팀이 더 나은 사용자 경험을 제공하기 위해 디자인툴을 선택하는 과정과
그 효과에 대해 설명합니다.
UX팀 디자인툴 변경하기
제가 일하고 있는 디자인팀은 주로 Sketch라는 UX/UI 디자인 도구를 활용하고 있습니다. 그러나 현재 우리 팀은 메인 디자인 도구를 변경하고자 하고 있으며, 이를 위해 Figma와 Framer를 검토 중입니다.
그 중에서도 Framer X는 우리의 검토 대상에서 제외되었습니다. 이는 Framer X의 유저 수가 현재로서는 상대적으로 적다는 이유 때문입니다. 국내에서는 Framer X에 대한 강의나 레퍼런스가 부족하며, 또한 실제 프로젝트에서 고도화된 프로토타이핑을 요구하는 비중이 그렇게 높지 않기 때문입니다. 따라서, Framer X를 도입하고 리액트 문법에 능숙해지는 데에 들이는 시간과 노력은 현재의 상황에 비해 비효율적일 것으로 판단되었습니다.
Framer 첫 만남
저는 약 4년 전에 프레이머를 처음 접하게 되었습니다. 프로토타이핑 툴로서의 사용에 흥미를 느껴서 개인적으로 인터랙션과 애니메이션 구현에 대한 관심이 높아졌습니다. 이에 따라 패스트캠퍼스에서 제공하는 오프라인 강의를 통해 코드(커피 스크립트)의 사용법을 더욱 구체적으로 습득할 수 있었습니다. 그리고 Framer X의 출시와 함께 리액트 문법을 배우려고 입문까지는 했지만, “인터랙션 디자이너가 아닌 이상 실무에서 이 정도까지 사용할 일이 있을까?”라는 의문이 생겨 우선순위에서 밀려나며 잊혀져갔습니다.
하지만 현재의 프레이머가 크게 변한 점은 웹에서 디자인 작업이 가능하며, 실시간으로 공동 편집이 가능하다는 점입니다. 이러한 이유로 인해 피그마와 어떤 차이가 있는지, 피그마를 사용하는 것보다 더 많은 장점이 있는지에 대해 궁금해졌습니다.
Framer 사용 후기
공식 사이트에서 제공하는 튜토리얼을 따라하면서 프레이머의 인터페이스와 기능들을 테스트해보았습니다. 원래 계획은 프레이머의 우수한 기능들에 대한 리뷰를 작성하는 것이었습니다. 그러나 사용해보면서 조금씩 치명적인 단점을 발견하게 되었고, 우리 팀에서 사용하기에는 적합하지 않다는 결론을 내렸습니다.
그 이유가 무엇이냐면…
Handoff 패널에서 Android와 iOS 전용 코드베이스를 지원 안 함.
제플린으로 내보내기 안 됨.
이게 무슨 말이냐면, 디자인한 결과물을 앱 개발자가 보고 구현하려면 디자인 요소에 대한 컬러, 사이즈, 간격, Asset 등을 각 앱의 운영체제에 적합한 코드로 변환할 수 있어야 합니다. 현재 프레이머는 CSS, JSX, SVG 코드만을 제공하기 때문에 디자인 요소의 코드를 확인하는 데 제한이 있습니다. (앞으로 Android와 iOS 전용 코드베이스도 지원할 계획이 있다고는 하지만…;;) 디자인은 보통 1배수로 작업되기 때문에 숫자는 같지만 단위가 (px, pt, sp)와 같이 다르게 표현됩니다. 따라서, 프레이머를 통해 수치를 확인할 수는 있겠지만, 제플린에 익숙해져 있는 디자이너들에게는 보기 쉽지 않을 것입니다.
사실 프레이머와 제플린이 연동된다면 디자인 작업에 훨씬 편리하게 활용할 수 있겠지만, 프레이머는 이러한 연동 기능을 제공하지 않기 때문에 저는 더 이상 프레이머를 사용해 볼 의욕을 잃어버렸습니다.
그나마 프레이머의 장점 중 하나는 내장된 애니메이션 기능을 통해 모션에 대한 코드를 Transition 섹션에서 확인할 수 있다는 점입니다. 이는 디자이너가 애니메이션을 구현하고 제어하는 데에 유용한 기능입니다.
그러나 제가 현재 주요한 디자인툴로 활용할 도구를 탐색하고 있는 상황에서는 프레이머가 적합하지 않다고 결론을 내렸습니다. 다른 도구들과 비교해보았을 때, 프레이머는 저의 요구사항과 디자인 작업의 흐름과 어우러지지 않는다고 판단되었습니다.
결론
종합적으로 Framer를 사용한 후의 결론은 다음과 같습니다. Framer는 많은 강점을 가지고 있지만, 저희 팀의 요구사항과 디자인 작업의 흐름과는 조화롭지 않은 것으로 판단했습니다.
첫 번째로, Framer의 단점 중 하나는 Handoff 패널에서 Android와 iOS 전용 코드베이스를 지원하지 않는다는 것입니다. 앱 개발자들이 디자인 요소를 구현할 때 필요한 컬러, 사이즈, 간격, Asset 등을 각 운영체제에 적합한 코드로 변환할 수 있어야 합니다. 현재 Framer는 CSS, JSX, SVG 코드만을 제공하기 때문에 이러한 변환 작업에 제한이 있습니다. 이는 디자이너들이 디자인 요소의 코드를 확인하는 데에 제한을 가지고 있다는 의미입니다.
두 번째로, Framer는 제플린으로의 내보내기 기능을 제공하지 않습니다. 따라서, 디자인한 결과물을 다른 팀원들과 공유하거나 개발자와 협업할 때에는 프레이머의 코드만으로는 한계가 있습니다. 디자인 요소의 수치 확인이 가능하지만, 제플린과 같은 다른 도구에 익숙한 디자이너들에게는 보기에 불편할 수 있습니다.
마지막으로, Framer의 내장된 애니메이션 기능은 매우 편리하고 유용하지만, 저희 팀의 주요 디자인툴로 활용하기에는 부족한 점이 있습니다. 저희는 디자인 작업의 효율성과 협업의 원활함을 중요시하는데, Framer는 이러한 요구에 부합하지 않는 것으로 판단되었습니다.
따라서, 저희 팀은 Framer를 주요 디자인툴로 도입하기보다는 다른 도구를 선택하기로 결정하였습니다.
(2021년 03월에 포스팅한 글입니다.)
UX 디자인툴은 결국 피그마를 사용하기로 했습니다.
피그마 꿀팁도 보고 가세요! 작업 시간을 많이 단축할 수 있을 겁니다.
