아직 Figma Sites CMS 안 써본 디자이너라면
Figma Sites CMS가
가지는 디자인 방식의 변화 의미
'Figma Sites CMS(Content Management System)'는 디자인 도구의 정체성을 '그리는 도구'에서 '만드는 도구'로 재정의하는 전환점이라 할 수 있다. Figma Sites는 기존의 정적 프로토타이핑을 넘어, HTML/CSS/JS로 변환 가능한 실제 웹사이트를 구축한다. 여기에 결합된 CMS 기능은 구조화된 데이터(Structured Content)를 디자인과 분리하여 관리할 수 있게 함으로써, 마케팅 팀과 콘텐츠 관리자가 디자인을 훼손하지 않고도 웹사이트를 운영할 수 있는 환경을 제공한다. 이는 디자인 시스템 관리의 효율성을 극대화하고, 웹 구축의 편의성 증대를 가속화할 것으로 전망된다.
Figma Sites CMS 주요 특징
데이터 중심의 구조 설계
컬렉션(Collections)
Figma Sites CMS의 근간을 이루는 핵심 단위는 '컬렉션(Collection)'이다. 컬렉션은 데이터베이스의 테이블과 유사한 개념으로, 동일한 속성을 가진 콘텐츠 아이템들의 집합을 의미한다. 예를 들어 '블로그 게시물', '팀 멤버', '이벤트 목록', '제품 카탈로그' 등이 각각 하나의 컬렉션으로 정의된다. 사용자는 피그마 인터페이스 내의 CMS 패널에서 직관적으로 컬렉션을 생성하고 관리할 수 있으며, 구글 제미나이(Gemini)와 같은 AI 모델을 활용하거나 CSV 파일 임포트(Import) 기능을 통해 대량의 데이터를 손쉽게 초기화할 수 있다. 이러한 컬렉션 기반 접근 방식은 디자인과 콘텐츠의 철저한 분리를 전제로 한다. 디자이너는 데이터가 담길 '그릇(Template)'을 시각적으로 설계하고, 데이터의 '구조(Schema)'는 컬렉션에서 정의한다. 이는 디자인 변경이 데이터에 영향을 주지 않고, 반대로 데이터 업데이트가 레이아웃을 깨뜨리지 않는 아키텍처를 만든다.
필드(Fields) 타입과
데이터 매핑 메커니즘
컬렉션을 구성하는 각 아이템은 여러 개의 '필드(Fields)'로 이루어진다. 현재 공개된 베타 버전에서 지원하는 필드 타입은 웹사이트 구축에 필수적인 요소들을 포함하고 있으며, 각 필드는 피그마 캔버스 상의 디자인 레이어와 1:1로 매핑(Mapping)된다.
사용자는 캔버스에서 텍스트 레이어나 프레임(이미지가 들어갈 영역)을 선택한 후, 우측 패널의 'CMS 연결(Connect)' 탭을 통해 해당 요소를 특정 컬렉션의 필드와 연결한다. 예를 들어, 카드 UI의 제목 텍스트 레이어를 'Blog Posts' 컬렉션의 'Title' 필드와 연결하면, 캔버스의 텍스트는 즉시 실제 데이터로 대체된다. 이미지의 경우, 프레임의 Fill 속성에 'Image' 필드를 연결하여 동적으로 이미지가 로드되도록 설정한다. 이 과정에서 피그마의 오토 레이아웃(Auto Layout) 기능은 콘텐츠의 길이나 이미지의 비율에 따라 레이아웃이 유동적으로 조정되도록 보장한다.
CMS 리스트(List)와 페이지(Page)의
이원화된 렌더링
데이터를 화면에 출력하는 방식은 크게 'CMS 리스트'와 'CMS 페이지' 두 가지 형태로 구분된다. 이 두 가지 방식의 조합을 통해 대부분의 동적 웹사이트 구조를 구현할 수 있다.
CMS 리스트 (Repeating Structures) 기능: 특정 컬렉션의 여러 아이템을 목록 형태로 보여주는 기능이다. 작동 원리는 디자이너가 하나의 '메인 컴포넌트(Main Component)'를 디자인하고 이를 CMS 리스트로 변환하면, 연결된 컬렉션의 아이템 개수만큼 해당 컴포넌트의 인스턴스(Instance)가 반복 생성된다. 활용: 메인 페이지의 '최신 글 목록', '팀원 소개 그리드', '추천 제품 리스트' 등 반복되는 패턴의 UI를 구현할 때 사용된다. 리스트 내의 각 아이템은 개별 데이터에 맞춰 텍스트와 이미지가 자동으로 바뀐다.
CMS 페이지 (Dynamic Templates) 기능: 개별 아이템의 상세 정보를 보여주는 전용 페이지를 생성한다. 작동 원리는 하나의 템플릿 페이지를 디자인하고 컬렉션과 연결하면, 시스템은 컬렉션 내의 모든 아이템에 대해 고유한 URL(Slug 기반)을 가진 개별 페이지들을 자동으로 생성한다. 활용: '블로그 상세 글 보기', '제품 상세 페이지', '멤버 프로필 상세' 등. 사용자가 CMS 리스트의 아이템을 클릭했을 때 이동하는 목적지 페이지로 활용된다.
베타 버전의 기술적 제약 사항
(Current Limitations)
혁신적인 기능에도 불구하고, 현재의 Figma Sites CMS는 베타 버전으로서 몇 가지 명확한 기술적 한계를 가지고 있다. 이는 전문적인 웹 개발 프로젝트 도입 시 반드시 고려해야 할 사항들이다.
관계형 데이터(Relational Data) 미지원: 현재 버전에서는 서로 다른 컬렉션 간의 관계를 정의하는 'Reference'나 'Multi-Reference' 필드가 지원되지 않는다. 예를 들어, '블로그 글' 컬렉션에서 '작성자' 컬렉션의 정보를 불러와 표시하는 기능이 구현되어 있지 않다. 이는 데이터 구조가 복잡한 사이트 구축에 제약이 된다.
고급 SEO 및 서버 설정 부재: 기본적인 메타데이터 설정은 가능하나, robots.txt 수정, 표준 태그(Canonical Tags) 설정, 301 리다이렉트(Redirects), 커스텀 404 페이지 생성 등 고급 SEO 및 서버 사이드 설정 기능이 부족하다.
계층형 URL 구조의 한계: 서브폴더 구조(예: website.com/blog/category/post)를 자유롭게 설정하는 데 제약이 있어, 정보 구조(IA) 설계 시 유연성이 떨어진다.
정적 가이드라인에서
살아있는 콘텐츠 시스템으로
전통적인 디자인 시스템 문서는 정적인 텍스트와 이미지로 구성된 '죽어있는' 가이드라인이었다. 버튼의 사용법, 폰트의 크기, 색상 코드 등이 고정된 텍스트로 기술되었기 때문에, 시스템이 업데이트될 때마다 문서를 수동으로 수정해야 하는 번거로움이 존재했다. 그러나 Figma Sites CMS의 도입은 이러한 문서화 방식을 근본적으로 변화시킨다. 이제 디자인 시스템 문서는 CMS 컬렉션을 통해 관리되는 '동적 콘텐츠'가 된다. 예를 들어 '컴포넌트 가이드'라는 컬렉션을 만들고, 각 컴포넌트의 이름, 설명, 상태별 예시, 코드 스니펫 등을 필드로 정의할 수 있다. 디자이너가 CMS 데이터를 수정하면, 디자인 시스템 웹사이트의 내용은 즉시 업데이트된다. 이는 Zeroheight나 Storybook과 같은 별도의 문서화 도구 없이도, 피그마 내에서 디자인 자산과 문서를 통합 관리할 수 있는 환경을 제공한다.
배리어블(Variables)과
CMS의 상호보완적 시너지
피그마의 '배리어블(Variables)' 기능과 'CMS'는 디자인 시스템을 지탱하는 두 개의 축이다. 이 둘은 서로 다른 층위에서 작동하며 상호보완적인 관계를 맺는다.
배리어블 (Design Tokens): 색상(Color), 수치(Number), 문자열(String), 불리언(Boolean) 값을 통해 디자인의 시각적 속성과 로직을 제어한다. 다크 모드 전환, 간격 시스템, 반응형 브레이크포인트 등이 이에 해당한다.
CMS (Content Data): 실제 사용자에게 전달되는 정보(Information)를 관리한다. 블로그 제목, 제품 가격, 이미지 소스 등이 해당한다.
CMS의 필드 값을 배리어블과 연동하여 더욱 지능적인 디자인 시스템을 구축할 수 있다. 예를 들어, CMS 리스트에 있는 카드의 '카테고리' 필드 값에 따라 특정 배리어블 모드(Mode)를 트리거하여 카드 배경색을 자동으로 변경하거나, 불리언 변수를 제어하여 특정 조건에서만 배지(Badge) 컴포넌트를 노출시키는 등의 동적 스타일링이 가능해질 것이다(현재는 일부 제약이 있으나 로드맵 상 발전 가능성이 높음). 이는 콘텐츠의 속성에 따라 디자인이 스스로 적응하는 '인텔리전트 디자인 시스템'의 기초가 된다.
Payload CMS 인수의 전략적 의미
2025년 6월, 피그마가 Payload CMS를 인수한 것은 단순한 기술 확보 이상의 전략적 함의를 갖는다. Payload는 개발자들 사이에서 높은 평가를 받고 있는 오픈소스 기반의 '헤드리스(Headless) CMS'로, Next.js와 같은 현대적인 웹 프레임워크와 완벽하게 호환되는 '코드 퍼스트(Code-first)' 접근 방식을 취한다. 피그마가 자체 내장 CMS(Figma Sites CMS)를 보유하고 있음에도 Payload를 인수한 이유는 명확하다. 내장 CMS가 디자이너와 마케터를 위한 '쉬운 사용성'에 초점을 맞춘다면, Payload는 복잡한 데이터 관계, 대규모 트래픽 처리, 엔터프라이즈급 보안 요구사항을 충족시키는 '백엔드 확장성'을 담당하기 때문이다. 이는 피그마가 단순한 웹 빌더를 넘어, 복잡한 비즈니스 로직을 포함한 본격적인 웹 애플리케이션 플랫폼으로 진화하겠다는 의지를 보여준다.
헤드리스(Headless) 아키텍처의
유연성과 확장성
Payload와 같은 헤드리스 CMS는 프론트엔드(보여지는 화면)와 백엔드(데이터 관리)가 분리되어 있다. 이는 데이터가 특정 템플릿에 종속되지 않고 API를 통해 어떤 플랫폼(웹, 앱, 키오스크 등)으로든 전송될 수 있음을 의미한다.
MIT 라이선스와 오픈소스 유지: 피그마는 인수 후에도 Payload의 오픈소스 정책(MIT 라이선스)을 유지하겠다고 밝혔다. 이는 개발자 커뮤니티의 신뢰를 유지하고 생태계 확장을 지속하겠다는 전략이다.
디자인-데이터 동기화 (Schema Sync): 향후 기대되는 핵심 기능 중 하나는 피그마에서 정의한 데이터 모델이 Payload의 데이터베이스 스키마로 자동 변환되는 '스키마 동기화'이다.18 디자이너가 피그마에서 필드를 추가하면, 백엔드 DB에도 해당 필드가 자동으로 생성되는 워크플로우는 개발자의 단순 반복 작업을 제거하고 협업 속도를 비약적으로 높일 것이다.
'그리기'에서
'구축'과 '운영'의 세계로 나가다.
Figma Sites CMS는 단순한 웹 빌더의 추가가 아니라, 디자인 생태계의 무게중심을 이동시키는 거대한 변화이다. '그리기'에 머물러 있던 디자이너들은 이제 '구축'과 '운영'의 영역으로 진입하게 되었다. 데이터와 디자인이 하나의 플랫폼에서 결합됨으로써, 우리는 불필요한 번역 과정을 생략하고 '본질적인 가치 창출'에 집중할 수 있게 되었다. Payload CMS의 인수와 AI 기술의 결합은 피그마가 단순한 디자인 툴을 넘어, 웹 애플리케이션 개발의 전 과정을 아우르는 '슈퍼 앱(Super App)'으로 진화하고 있음을 보여준다. 비록 현재 베타 버전에는 SEO나 고급 기능의 한계가 존재하지만, 피그마의 빠른 업데이트 주기와 강력한 커뮤니티 생태계는 이를 빠르게 보완할 것이다. 디자인 시스템 관리자와 현업 디자이너들에게 요구되는 역량 또한 변화하고 있다. 이제는 시각적 아름다움을 넘어 데이터 구조를 설계하고, 콘텐츠 전략을 수립하며, 시스템의 확장성을 고려하는 '아키텍트'로서의 시각이 필요하다. Figma Sites CMS는 이러한 변화를 이끄는 가장 강력한 도구이자, 디자인과 개발의 경계를 허무는 촉매제가 될 것이다.
AI 기능 중심으로 Figma를 학습하고 AI 디자인 자격증도 취득하고 싶다면?
https://onoffmix.com/ch/aidesign
AI를 활용하는 UXUI 디자이너들과 함께 소통하며 성장하고 싶다면?
AI를 활용한 UX/UI 디자인을 책으로 공부하고 싶다면?
https://www.yes24.com/product/goods/148121780
