Figma Sites와 Framer
피그마의 Config 2025에서 발표된 피그마 브랜드의 제품군 중에서 Figma Sites(피그마 사이트)가 Framer와 비교되면서 많은 이야기가 오가고 있습니다.
Framer는 동적인 UI를 만드는 툴에서 빠른 웹 퍼블리싱 툴로 전환하여 몇 년간 좋은 평가를 받아왔고, 프로그래머의 도움 없이 웹에 게시할 수 있는 툴 중에서 뛰어난 모션과 반응형 퍼블리싱, CMS 기능을 제공합니다.
Framer와 비슷하게 사용할 수 있는 툴로 Wordpree, SquareSpace나 한국의 아임웹이나 카페24 같은 서비스도 있지만, 다양성이나 모션의 효과, 디자인 친화성에서 Framer를 앞지르는 툴은 별로 없는 것 같습니다.
특징적인 부분은 컴포넌트 외에 프라임 스크린에서 파생된 화면이 프라임 스크린에 따라 수정되거나 업데이트되고 경우에 따라 숨길 수 있는 반응형 제작 UI입니다.
이번에 발표된 피그마 사이트는 프레이머의 반응형 제작 UI와 매우 비슷한 방식입니다.
2025년 5월 발표 당시 홍보 이미지피그마 사이트와 프레이머의 작업 환경을 보면 상당히
유사해 보입니다.
피그마 사이트에서 강조하는 장점은 디자인, 프로토타입, 퍼블리싱입니다. 아직 베타라서 그런지 프레이머와 전체 기능을 비교하는 데는 무리가 있습니다.
하지만 피그마에서 다른 툴로 옮겨서 작업하는 경우보다는 피그마 디자인에서 피그마 사이트로 이동하는 것이 작업 시간이나 동선이 줄어들기 때문에 유용할 것으로 보입니다.
기존에 피그마를 사용하시던 분들은 반응형 디자인을 위해 Figit, Responsify 혹은 유료 플러그인인 Breakpoints를 쓰지 않아도 될 듯 합니다.
지금까지 힘써주었던 플러그인...피그마를 알려줄 때 많은 분들이 많이 쓰는 플러그인이 뭐냐고 묻는데, 사실 기본 기능을 잘 쓰는 게 제일 좋습니다. 아니면 별도의 툴을 찾아서 쓰거나... 획기적으로 내 일을 대신해 주는 건 없습니다.
Framer와
유사한 반응형 제작 UI
피그마 사이트에서 프레이머와 비슷한 기능 때문에 논란이 되는 부분은 반응형 디자인을 진행하는 Webpage라는 컨테이너 때문입니다.
지금 피그마를 시작하게 되면, 오른쪽 상단에서 Figma Site를 선택할 수 있습니다. 열어보면, 왼쪽의 레이어 패널이 좀 다른데, 피그마 사이트에서는 페이지 단위로 작업을 진행하게 됩니다.
Webpage라는 새로운 컨테이너는 말 그대로 하나의 웹페이지로 기능합니다. 여기에 프레이머와 비슷한 부분은 Primary 스크린이 있어서, 이 스크린에 뭔가 추가하고 수정하게 되면, 다른 반응형 스크린에 쉽게 적용할 수 있습니다.
미리 준비한 디자이너에게 복이 있으라.프레이머에서도 컴포넌트를 작업할 수 있고, 피그마의 컴포넌트를 프레이머로 가져오는 플러그인이 있긴 합니다. 하지만 피그마의 컴포넌트 관리가 프레이머보다는 더 쉽게 조작할 수 있고, 편집과 적용이 빠르기 때문에 상당한 강점이 될 수 있습니다.
그리고 기존에 만들어둔 컴포넌트 혹은 피그마 디자인 시스템에서 출발할 수 있어서 생산성이 많이 올라가게 됩니다. (하지만 기존 프로젝트에 베리어블이나 컴포넌트 작업이 구조적으로 이루어지지 않았다면... 별 쓸모가 없겠죠.)
반응형 디자인을 위한 컴포넌트를 이미 제작해 둔 상태이며 라이브러리로 퍼블리싱한 후라면, 피그마 프로퍼티의 반응형 부분을 브레이크 포인트의 이름과 맞춰주기만 하면, 바로 반응형 제작 및 프로토타입으로 퍼블리싱하여 웹으로 게시할 수 있습니다.
아무래도 코드를 보는 것보다는 눈으로 먼저 보는 게 편리하기 때문에 개발자에게 반응형 작업 전달도 매우 편리해질 듯 합니다.
Figma Make와 함께 쓸 때,
가장 치명적일 기능
2025년 5월 기준으로, 프레이머와 비교하긴 매우 어렵습니다. 피그마와 프레이머가 지향하는 디자인의 목표 자체가 다르기 때문에 두 개를 이어서 작업하기보다는 피그마 중심의 프로젝트에서 기존의 리소스를 활용하는 경우에 강점이 있을 것 같습니다.
주목해야 할 피그마 전략의 방향성은 Figma Make에 있습니다.
Config 2025에서 공개된 피그마의 제품 아이콘 구조는, 웹이나 앱 디자인의 실제 제작 흐름을 시각적으로 보여줍니다.
아이데이션(FigJam), 프레젠테이션(Slides), 디자인(Figma), 아트워크(Draw), 개발(Dev Mode), 퍼블리싱(Sites)까지 이어지는 흐름은 디자이너가 여러 역할을 동시에 수행하는 멀티디스플리너리(Multidisciplinary) 환경을 전제로 합니다.
피그마 플랫폼에서 전체 디자인 프로세스를 다룰 수 있게 되면서, 디자이너는 기획자, 커뮤니케이터, 퍼블리셔의 역할을 병행하거나 관련 직군과 소통할 수 있게 됩니다. 이러한 환경에서 요구되는 것은 툴에 대한 숙련도가 아니라, 프로젝트의 목적에 맞는 전략적 사고와 전체 맥락을 조율하는 능력입니다.
디자이너 직군만 쓰는 디자인 툴에서 이상적인 결과물을 추구할 수 있지만, 다양한 직군과 협업하는 환경에서는 실용적인 제품 중심의 판단이 우선됩니다.
피그마는 지속적으로 프로세스에 AI를 도입하고 있으며, 초심자도 배우기 쉽습니다. AI가 툴에 대한 사용법 학습과 반복적인 작업을 자동화하고, 특히 Make를 통해서 인터렉션을 빠르게 작업할 수 있게 되면 전혀 다른 목표와 방향성이 생길 수도 있습니다.
Figma Make는 템플릿으로 만들어진 코드 블록을 삽입하는 것이 아니라 실제로 필요한 코드 작업을 프롬프트로 작업하는 사례를 보여줍니다.
물론 '원숭이 손'처럼 이상하게 만들어주는 기간이 꽤 길겠지만....그래서 프레이머와 비슷한 부분으로 비교하기 보다는 목표와 의도를 실현하는 방식을 고민하는 것이 중요합니다.
디자이너의
두 가지 문제
흥미로운 것은 Figma Make에 대한 이야기 외에 툴에 대한 논란이 보인다는 점입니다.
1. 굳이 프레이머를 따로 써야 하는가?
2. 굳이 프레이머를 따로 배워야 하는가?
굳이 프레이머를 따로 써야 하는가?
첫 번째 논란, '굳이 프레이머를 따로 써야 하는가'에 대한 고민은 피그마판 프레이머가 나오면서 생기는 문제입니다.
많은 디자이너는 새로운 것을 배우는 것과 기존 방법을 유지하는 것에 대한 딜레마에 시달립니다. 디자이너의 특성상 새로운 것에 대한 열망이 항상 있지만, 그 열망을 해결하기 위해서는 지금보다 더 많이 공부하고 연습해야 한다는 압박이 있습니다.
가장 큰 예로 '개발 언어를 배운다'가 있습니다. 개발 언어를 약간이라도 배우는 일은 디자인에 큰 도움을 주지만, 당장의 디자인을 하다가 보면, 개발 언어를 배울 시간과 에너지가 남지 않는다. 프레이머는 개발 언어를 배우는 문제를 효과적으로 해결했습니다.
그러나 프레이머의 문제 해결 방식이 개발 언어를 직접 배우는 것은 아니고, 개발의 까다로운 설정이나 기존 레이아웃 방식에 대한 이해와 다른 방식의 레이아웃에 익숙해져야 합니다. 반응형 디자인과 모션을 쉽게 해주긴 하지만, 어느 정도 일을 해본 사람이 더 쉽게 해주는 툴이지, 처음부터 이걸 이해하고 쓰기는 버거웠습니다.
초기에는 수많은 버그와 에러가 있어서 매우 잘 만든 툴임에도 접근을 어렵게 했습니다. 금방 배우고 효과적이지만, 배우기는 어려운 툴입니다. 그리고 모든 리소스를 프레이머에 맞게 수정하고 프레이머가 만들어낼 수 있는 모션과 트렌드에 맞춰야 하는 디자이너의 부담이 있습니다.
이제는 프레이머와 똑같고 더 쓰기 편하며, 같은 플랫폼에서 기존 작업의 효율성을 이어갈 수 있다면, 굳이 프레이머를 쓸 필요가 있는지에 대한 의문도 들 수 있습니다.
굳이 프레이머를 따로 배워야 하는가?
툴의 사용과 교육은 비슷하지만 또 다른 문제입니다. 이건 사용자인 디자이너 외에도 교육을 위한 콘텐츠를 공급하는 쪽에서도 문제가 됩니다. 어떤 사람이 피그마 강의를 한다고 생각해 보자. 이 사람에게 가장 효과적인 것은 피그마로 더 많은 교육 콘텐츠를 제공하는 것입니다.
프레이머와 피그마를 모두 공부하고 콘텐츠를 만들어야 한다면, 부담이 큽니다. 하지만, 피그마 기반에서 프레이머의 장점을 누린다면, 피그마 교육의 장점이 더욱 부각됩니다. 물론 프레이머를 가르치는 사람에겐 반대의 상황이 됩니다. 그리고 대부분의 디자이너, 경력직이든 신입이든 툴의 사용은 매우 큰 문제이기 때문에 최대한 리스크를 줄일 수 있습니다.
결론:
'할 수 있다'는 '잘한다'와 다르다.
결국 피그마가 주류가 되더라도, 프레이머를 사용하던 디자이너가 취업에서 불이익을 받거나 디자인 역량을 인정받지 못하는 일은 없습니다.
초기에 스케치와 피그마가 많이 비교되었지만, 지금도 스케치를 쓴다고 해도, 프로젝트에 지장을 주는 일은 없습니다. 스케치를 쓰는 사람이 적어진 이유는 스케치에서 심벌 업데이트가 느리고 개발 편의성이 떨어졌기 때문입니다. 지금의 프레이머는 많은 문제가 개선된 상태이고 최종 퍼블리싱을 무엇으로 하는가가 사용자에게 큰 문제가 되지 않습니다.
그래서 프레이머를 배웠다고 손해 보는 일도 없고, 프레이머 사용으로 얻은 노하우가 사라지지도 않습니다. 디자인의 중요한 부분은 툴에 있지 않고, 제작 과정과 디자이너의 역량에 있습니다.
지난 몇 년간은 역량보다 툴이 강조되었습니다. 다양한 디자인 툴이 나오면서 전체 디자인 프로세스를 분리하고, 각각의 개발 단위에 적합한 툴을 사용하는 경향이 높아졌습니다.
포토샵만 쓰는 시기에서 다양한 툴로 시너지를 내는 쪽으로 프로세스가 변하고 툴이 강조되는 경향이 강해졌지만, 툴만으로는 문제를 해결할 수 없습니다.
프로젝트의 목표과 성과에 대한 이해도를 높이고, 목적과 의도에 적합한 프로세스를 융통성 있게 구성하는 것에 집중하는 능력이 진짜 역량입니다.
앞으로 피그마가 어떤 툴을 흡수하더라도 디자이너가 배워야 하는 영역은 줄어들지 않습니다. 피그마의 현재 목표는 기존의 리소스를 최대한 활용하면서 디자인과 다른 직군과의 연결성을 강화하고, 디자이너가 다른 영역의 작업에 더 쉽게 접근하게 하는 것으로 보입니다.
높은 접근성을 기반으로 더 쉽고 빠르게 결과물을 만들어주는 피그마의 장점 중 하나는 생산성입니다. 생산성을 더 높이기 위해 디자인 영역 전후에 있던 계획 및 프레젠테이션 영역을 피그마 슬라이드로 확장하였고, 지금은 디자인 이후 퍼블리싱 영역에 대한 접근성을 더 넓혔다고 볼 수 있습니다.
'할 수 있다'는 '잘한다'와 다르다. 할 수 있는 영역을 넓히고 시도하려는 자세를 갖는다면, 디자이너가 가질 수 있는 사고와 역량도 높아집니다. '할 수 있다'가 디자이너가 성장하는 여정의 시작으로 생각한다면, '잘하는' 디자이너로 가는 길이 조금 더 명확해진다고 생각합니다.
