Framer에 관한 오해의 단상
Framer를 쓰려면 코딩을 할 줄 알아야 할까?
1. Framer는 디자인 툴이다. 피그마나 스케치와 유사하다. 코딩을 몰라도 쓰는 데 아무런 지장이 없다. Framer를 사용하려면 코딩을 알아야 한다는 오해는 어디에서 온 걸까?
2. 최초의 Framer는 커피스크립트 기반의 프로토타이핑 툴이었다. 스케치 파일에서 디자인을 가져와서 그 위에 코딩으로 인터랙션을 붙여서 프로토타입을 만드는 식으로 사용했다. 이 시절의 Framer는 코딩을 모르면 사용하기 어려웠다. 커피스크립트가 자바스크립트보다 쉽다고는 해도 여전히 코딩을 모르는 이에게는 여전히 코딩의 범주 안에 있었고, 인터랙션을 구현하기 위해서는 variable, function, 조건문, 반복문 등의 개념을 이해했어야 했기 때문에 기존에 코딩을 조금이라도 할 줄 아는 사람이 아닌 사람에게는 진입 장벽이 높을 수밖에 없었다.
지금은 Framer Classic이라고 부르고 있다3. 2018년, Framer는 Framer X를 새롭게 발표한다. 커피스크립트를 버리고 React 기반으로 방향을 선회한다. 커피스크립트로 커스텀 패키지를 만들며 연명하던 수많은 사용자들은 이 소식을 듣고 절망했다. 이제 정말 코딩을 모르면 쓸 수 없겠구나! 이때는 Framer가 프로토타이핑에 그치지 않고, Production까지 이어질 수 있는 UI툴이 되려는 줄 알았다.
그러나 실제 Framer X는 사람들의 생각과 조금 달랐다. 코드를 몰라도 상당한 수준의 프로토타입을 만들 수 있었고, 코드의 비중은 현저히 낮아졌다. 코드를 알면 데이터를 연결할 수 있는 컴포넌트를 만들거나 패키지를 직접 퍼블리싱하는 등 더 강력하게 사용할 수 있지만, 코드를 몰라도 쓰는 데 큰 문제는 없었다.
Framer X 베타를 써보고 React를 공부하기 시작했었는데...4. 2020년, Framer는 Framer web을 발표한다. 기반을 웹으로 옮겨오면서 공동 편집 기능, 공유 기능, 프리뷰 기능을 강화했고, 코드를 몰라도 사용하는 데 아무런 문제가 없는 수준이 되었다. 여전히 코드로 컴포넌트를 만들 수는 있었지만, 두 화면 간 컴포넌트의 위치 차이를 알아서 인식하고, 인터랙션을 자동으로 만들어주는 매직모션(피그마의 auto animate) 같은 기능을 활용하면 더 간단하게 프로토타입을 만들 수 있게 되었다.
여기에 Stack(피그마의 auto layout), Scroll, 오토사이징, 상태 관리가 가능한 디자인 컴포넌트 등록 등의 기능을 추가하면서 디자인 툴로서의 기본 기능도 하나둘씩 추가해나갔다. Framer는 스스로를 올인원 디자인 툴이라고 부르기 시작했다. 프로토타이핑에 강점이 있고, 코드 친화적이라는 특성이 있을 뿐, 기본적으로 피그마나 스케치와 다를 바가 없어진 것이다.
Framer Web. 이 버전을 기반으로 데스크탑 앱도 출시했다5. 플렉스는 Framer를 메인 디자인 툴로 사용한다. 이미 코드로 만들어진 디자인 시스템 컴포넌트에 코딩을 할 수 있는 일부 디자이너가 Framer에서 사용할 수 있도록 인터페이스를 붙였고, 다른 디자이너들은 그 컴포넌트를 그대로 가져가서 프로덕트를 디자인하고 있다.
이는 Framer에서만 가능한 방식으로 디자인과 구현체를 90%(Framer의 제약사항 때문에..) 일치시킬 수 있고, 디자인과 프론트엔드의 커뮤니케이션 비용을 극단적으로 줄일 수 있다는 장점이 있기 때문에 우리 같이 프로덕트가 폭발적으로 커지고 있는 스테이지에 있는 팀에서는 사용하지 않을 이유가 없다.
새로 오는 디자이너 분들도 Framer에 적응하기 위해 어느 정도 고전하긴 하셨지만, 디자인 시스템을 이해하는데 시간이 걸리는 거지 툴에 능숙해지기까지는 2~3주 정도 걸린 것 같다. 본인이 코딩을 하거나 배우고 싶은 의지가 있는 게 아니라면 디자인을 하기 위해서 코딩을 알 필요는 없다.
플렉스에서 사용하고 있는 디자인 시스템 화면을 슬쩍 가져와봤다사족 1. 혹시나 Framer를 알아야 할 것 같아서 플렉스에 지원하기를 망설이는 디자이너 분이 있다면 전혀 걱정하지 않으셔도 됩니다. 현재 스테이지에서 팀의 생산성을 높이기 위해서 Framer를 사용하고 있을 뿐, Framer가 아니면 안 되는 게 아닙니다. 더 나은 방법이나 툴이 있다면 얼마든 갈아탈 준비가 되어 있습니다. 그래서 Figma로 갈아탔습니다!
사족 2. 코딩도 마찬가지입니다. 생산성을 높이기 위해서 코딩을 아는 일부 디자이너가 하는 것일 뿐, 모두가 할 줄 알아야 하는 것은 아닙니다. 다만, 코딩을 알았을 때의 장점이 몰랐을 때보다 많다고 생각하기 때문에 알아두면 나쁠 게 없다고 생각할 뿐입니다. 지원할 마음이 생기셨다면 플렉스의 채용 페이지를 방문해주세요!
사족 3. 그럼에도 코딩을 알면 Framer에 더 많은 기능을 자유롭게 사용할 수 있습니다. 궁금하시면 Framer 공식 홈에 튜토리얼이나 루움님이 운영하고 있는 하버스쿨의 강의를 들어보시는 걸 추천합니다. 시중에 나와있는 책은 Framer Classic과 커피스크립트를 다루고 있습니다. 실수로 구매하지 않으시길 바랍니다.
