프레이머 :: Framer

프레이머

프레이머는 코드 기반(React, typescript, jsx : 웹 기술)의 프로토타입 툴이다.

 

---

1. 프레이머가 다시뜬다고?  

최근 상무님께서 프레이머 툴을 한 번 알아보라고 하셔서 관련 정보를 리서치하게 되었다. 이 툴을 쓰는 대표적인 회사가 토스인데 그들은 프레이머로 내부 디자인 시스템을 구축하고 새로운 워크플로우를 개선하여 업무의 효율성을 높였다고 이야기한다.

사실 개인적으로 2년전 React 개발도 해보고(github링크) 프레이머 온라인 커뮤니티(페이스북) 활동에 참여해봤고, 개인적으로 만들고 싶었던 서비스를 프레이머를 이용해 만들어 봤었지만 실제 코드로 디자인시스템을 구축할 수 있다는 것은 생각도 못했었다.

하지만 최근 토스-플랫폼디자인팀에서 프레이머로 디자인 시스템을 구축했다는 것은 나에게도 신선한 충격이었다. 2년 전에도 npm이라는 노드 패키지로 프레이머와 연동하는 방법이 있었지만 코드를 디자인시스템화 할 수 있는정도는 아니었는데 말이다.

 

---

2. 토스가 어떻게 프레이머로 디자인 시스템을 구축했을까?

토스 디자인시스템 컨퍼런스

토스는 프론트 개발자와 디자이너의 협업으로 "토스용 프레이머"를 개발했다. 디자인 시스템뿐만 아니라 Handoff툴, 어휘를 추천해주거나 UI 컴포넌트를 디자이너에게 추천해주는 기능도 프레이머를 활용했는데, 이는 프레이머의 자유도가 얼마나 높은지 그리고 쓰는 사람에 따라 얼마나 다양하게 활용 가능할지 알게 해 준 사례인듯하다. 즉, 프레이머는 디자인 툴인 동시에 개발 툴이라고도 볼 수 있을것이다. 특히 디자인 시스템은 프론트개발자 주도적으로 진행하는것을 추천하는데 그 이유는 리액트 컴포넌트들의 전체적인 구조를 짜는게 디자인시스템에 가장 중요한 핵심이기 때문이다.

 

3. 코드 기반 시스템. 우리도 가능할까? 프레이머는 어떤 툴인가?

프레이머의 특징.

UI - 반응형을 디자인할 수 있고 html, CSS에 기본적인 이해가 있다면 웹사이트와 동일한 퍼포먼스를 구현할 수 있다. 반응형의 break point를 지원하고 html 태그에 해당하는 div, span, button, form, header, footer 등을 구분할 수도 있으며 레이아웃의 position (relative, apsolute, fixed, fill) display (flex-stack, wrap)등도 사용 가능하다. 세부적인 after:: , clear 같은 태그는 없지만 웬만한 반응형 UI는 90% 이상 구현하는듯하다. 

코드 정리가 안된 모습

하지만 단점이 있는데 html로 export 했을 경우 코드가 정리가 안된다. 따라서 개발기능이 많이 필요없는 모션위주의 웹페이지(프로모션, 브랜드사이트, 앱 랜딩페이지)라면 상관없겠지만 유지보수가 필요하거나 구조가 복잡한 관리자페이지나 쇼핑몰, 예약시스템 등에서는 코드의 유지관리보수가 어렵기 때문에  운영에 한계가 있지 않을까 생각한다. 그럴땐 html이나 React를 활용해 직접 코드를 작성하는게 효율적일것이다. (관련문서)

 

인터랙션

 - framer-motion을 통해 실제 인터랙션을 코드로 구현할 수 있다. github

 

디자인시스템

 - 개발자: 서비스의 컴포넌트 구조를 짜고 세부적인 디자인은 프레이머를 이용한다. 

 

현. 타임교육 업무 (타임교육:2021년. 7월 ~ 2022년. 7월)

개인 Daily Report를 기준으로 산출한 데이터이므로 오차가 있을 수 있음.

직무	툴	디자인
UI디자인 (45.7%)	피그마	UI디자인, 공통 컴포넌트 관리, 디자인시스템, 관리자 디자인, 간단한 아이콘 등.
그래픽디자인 (32.6%)	포토샵, 일러스트	이벤트, 컨셉디자인, 키비주얼, 일러스트, 아이콘 등.
인터랙션·모션 디자인 (12.4%)	피그마, 에펙	비주얼모션, 프로토타입, 일러스트모션
운영 (9.3%)	포토샵	배너, 기타 이미지 수정

*디자이너 성향에 따라 툴의 비중이 달라질 수 있습니다. *UX 디자인 및 서비스 기획은 툴을 이용한 디자인 업무에서 제외되었습니다.

프레이머로 대체하거나 보완할 수 있는 것은 UI 디자인과 인터랙션 디자인(58.1%)이다.

 

---

4. UI디자인 툴

피그마 vs 프레이머

	피그마	프레이머
디자인시스템	☆☆☆	☆☆
개발사이드 동기화	☆	☆☆☆
프로토타입	☆	☆☆☆
러닝커브 난이도	☆☆☆	☆
반응형	X	O
웹코드 변환	X	O (단, 코드의 가독성이 떨어짐)

둘 모두 사용할 때 서로 상호 보완되는 부분이 존재한다. (피그마 → 프레이머로 레이어와 auto layout 까지 익스포트 됨)

 

프레이머 도입시

	프레이머 도입 시
기능	HandOff	인터랙션	디자인시스템
장점	- html, React로 코드 추출 (급할 경우 퍼블없이도 웹사이트구현)  - 디자인 산출물 퀄리티 향상.  - 피그마와 연동가능, (레이어 살아있음)	- 실제 서비스처럼. - 내부 관계자 보고시 유리. - 유저테스팅 유리.	- 디자인, 개발 커뮤니케이션 유리.
단점	- 기능이 많거나 규모가 큰 서비스일 경우 별도 코딩 필요 (Hook, Redux등을 활용)  - 업데이트 주기가 빨라 develop문서를 지속적으로 관리 및 확인 필요.	- 디자인 외 별도 기획 및 제작 시간이 필요. (반응형, button, form, scroll, 기타 화면 전환)	- 개발자와 협업 및 논의 필요. (디자이너가 리액트를 알고 개발자가 프레이머 알아야 함.) - 피그마 디자인을 프레이머로 가져올 수 있지만 디자인 시스템 및 코드는 다시 수정 필요.
기타	툴의 기능이 많고 난이도가 있지만 그만큼 자유도가 높고 웹 구현시 퍼포먼스도 좋은편.

 

---

5. 정리

프레이머가 필요한 경우. 

・ 완성도 있는 서비스를 만들고자 할 때. (정적이지 않고 유기적이며 인터랙션 가능)
・ 서비스가 안착하여 디자인시스템을 코드화 하고자 할 때.(업무 효율성 향상)
・ 회사의 보고 시스템이 중요한 경우. (실제 서비스와 유사한 아웃풋을 가진다. input, checkbox등 데이터 입력가능)
・ 디자이너가 코딩까지 해야할 때. (단, export할 경우 코드가 복잡해짐.)
・ 기타: 개발에 관심있는 디자이너(개자이너)나, 디자인에 관심있는 개발자(디발자)가 공부할때.