질문사항
CMS는 무엇이고, 이번 피그마 사이트 업데이트와 무슨 관련이 있나요?
답변
피그마사이트에 CMS 기능이 탑재 되었습니다! 이제 피그마 사이트에서도 콘텐츠 관리가 더 쉬워졌요!
① CMS란 무엇인가요?
CMS는 **Content Management System(콘텐츠 관리 시스템)**의 약자입니다.
디자인/개발/콘텐츠 팀이 협업하며 웹사이트나 앱 등에 넣을 텍스트·이미지·데이터(예: 블로그 포스트, 케이스 스터디, 제품 목록 등)를 설계 레이아웃과 분리해서 구조화하고 관리할 수 있게 해 주는 툴이죠.
② Figma Sites에서의 CMS 기능을 어떻게 사용하나요?
이제 Figma Sites에 새로 추가된 CMS 기능(사이트 빌더 내 콘텐츠 구조화 기능)을 실제 사용 흐름 기준으로 정리해볼게요. 참고로 이 기능은 Figma 모든 플랜에서 사용 가능하고, 사이트 파일에 편집 권한이 있어야 합니다. Figma Help Center+1
주요 개념
먼저 꼭 알아야 할 핵심 용어들: Figma Help Center+1
•
CMS Collection: 특정 주제(topic) 별로 필드(field) + 아이템(item)들이 모인 집합. 가령 ‘제품(Product)’ 컬렉션이면 “제품명, 사진, 가격, 설명, 카테고리” 같은 필드가 있고, 각각의 제품이 아이템이 됨. Figma Help Center+1
•
CMS List: 컬렉션 안의 여러 아이템들을 반복 디자인 블록 형태로 화면(페이지)상에 보여주는 것. 예: 제품 목록 그리드, 아티클 리스트 뷰. Figma Help Center+1
•
CMS Page: 하나의 아이템(item)이 각각의 URL을 갖고, 템플릿 디자인에 콘텐츠 필드가 동적으로 삽입되어 나가는 상세 페이지. 예: 제품 상세 페이지, 블로그 글 상세 페이지. Figma Help Center+1
실제 사용 흐름
1.
•
예: ‘Case Studies’라는 컬렉션을 만들고 필드로 “프로젝트명, 썸네일 이미지, 키워드, 설명, 날짜” 등 설정
•
기존에 엑셀·구글시트에 정리된 콘텐츠가 있다면 CSV 파일로 임포트 가능. Figma Help Center
2.
컬렉션이 생성되면 아이템을 입력 또는 수정 가능: 각각의 콘텐츠 아이템에 이미지 넣고, 제목 바꾸고, 설명 추가하고 등. 디자이너가 캔버스 상에서 바로 보면서 수정 가능. Figma Help Center
3.
디자인 파일(페이지)상에서 컬렉션과 연결(mapping) 작업:
•
CMS List 만들기: 디자인 블록을 선택하고, 이를 반복되게 여러 아이템에 연결 → 예: “최근 3개 케이스스터디” 그리드로 표시
•
CMS Page 만들기: 상세 페이지용 디자인 템플릿을 지정하고, 해당 컬렉션을 연결 → 각 아이템별로 URL이 생성됨. Figma Help Center+1
•
각 디자인 레이어(텍스트 레이어, 이미지 레이어 등)를 컬렉션의 필드에 ‘연결(connect)’시켜야 함. 이것으로 콘텐츠가 바뀌면 디자인도 자동 반영됨. Figma Help Center
4.
디자인·콘텐츠 연결이 끝나면, 사이트를 “Publish(배포)” 하면 이 컬렉션의 콘텐츠가 라이브 사이트에 반영됨. 이후 컬렉션에서 콘텐츠를 바꾸면 사이트에 즉시 업데이트됨. Figma Help Center
사용 팁
•
•
콘텐츠가 많고 반복되는 구조가 많은 경우(예: 블로그, 제품 카탈로그, 프로젝트 포트폴리오)라면 CMS 적용 대상.
•
디자인 시스템과 결합하면 더욱 효과적: 컬렉션 필드 사용 시 동일한 컴포넌트/스타일이 유지되도록 설계해두면 나중에 확장성 좋음.
•
콘텐츠 입력은 디자인 파일에서 바로 보며 바꿀 수 있으므로 비디자인팀(마케터, 콘텐츠팀 등)도 접근 가능하도록 편의 설정 고려.
추가로 알면 좋을 팁
하실 때 ~~단축키나 플러그인 쓰시면 더 편해요.
작업할 때 추가로 알게 되면 좋을 팁을 함께 남겨주세요. 없다면 생략 가능합니다.