Figmapedia
목록으로 돌아가기
피그마 소식 업데이트

CMS 기능과 피그마 사이트 업데이트

피그마 튜터, 뜨이2025. 11. 24.

질문사항

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

    • 실제 사용 흐름

  • 사이트 파일 열기 → 왼쪽 네비게이션 바에서 CMS 메뉴 선택 → 새 컬렉션 생성 또는 CSV로 콘텐츠 가져오기(import) Figma Help Center+1
    1. 예: ‘Case Studies’라는 컬렉션을 만들고 필드로 “프로젝트명, 썸네일 이미지, 키워드, 설명, 날짜” 등 설정
    2. 기존에 엑셀·구글시트에 정리된 콘텐츠가 있다면 CSV 파일로 임포트 가능. Figma Help Center
  • 컬렉션이 생성되면 아이템을 입력 또는 수정 가능: 각각의 콘텐츠 아이템에 이미지 넣고, 제목 바꾸고, 설명 추가하고 등. 디자이너가 캔버스 상에서 바로 보면서 수정 가능. Figma Help Center
  • 디자인 파일(페이지)상에서 컬렉션과 연결(mapping) 작업:
    1. CMS List 만들기: 디자인 블록을 선택하고, 이를 반복되게 여러 아이템에 연결 → 예: “최근 3개 케이스스터디” 그리드로 표시
    2. CMS Page 만들기: 상세 페이지용 디자인 템플릿을 지정하고, 해당 컬렉션을 연결 → 각 아이템별로 URL이 생성됨. Figma Help Center+1
    3. 각 디자인 레이어(텍스트 레이어, 이미지 레이어 등)를 컬렉션의 필드에 ‘연결(connect)’시켜야 함. 이것으로 콘텐츠가 바뀌면 디자인도 자동 반영됨. Figma Help Center
  • 디자인·콘텐츠 연결이 끝나면, 사이트를 “Publish(배포)” 하면 이 컬렉션의 콘텐츠가 라이브 사이트에 반영됨. 이후 컬렉션에서 콘텐츠를 바꾸면 사이트에 즉시 업데이트됨. Figma Help Center

    • 사용 팁

  • 시작이 부담된다면, Figma Sites에서 제공하는 CMS 템플릿이나 CMS 리스트/페이지가 미리 연결된 파일을 활용하는 것이 좋음. Figma Help Center
  • 콘텐츠가 많고 반복되는 구조가 많은 경우(예: 블로그, 제품 카탈로그, 프로젝트 포트폴리오)라면 CMS 적용 대상.
  • 디자인 시스템과 결합하면 더욱 효과적: 컬렉션 필드 사용 시 동일한 컴포넌트/스타일이 유지되도록 설계해두면 나중에 확장성 좋음.
  • 콘텐츠 입력은 디자인 파일에서 바로 보며 바꿀 수 있으므로 비디자인팀(마케터, 콘텐츠팀 등)도 접근 가능하도록 편의 설정 고려.

    • 추가로 알면 좋을 팁

    하실 때 ~~단축키나 플러그인 쓰시면 더 편해요.
    작업할 때 추가로 알게 되면 좋을 팁을 함께 남겨주세요. 없다면 생략 가능합니다.