본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한글로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

웹사이트에 카테고리 페이지를 만들고 싶다면 여러 CMS 컬렉션을 결합하는 방법을 고려해 보세요. 이 방법을 사용하면 하나의 템플릿만으로도 현재 페이지에 맞춰 콘텐츠를 필터링할 수 있습니다.

CMS 설정

Framer YouTube 채널을 구독하세요

작동 방식을 이해하기 위해 달리기를 주제로 한 간단한 블로그를 예로 들어보겠습니다. 이 블로그에는 게시물 그리드, 게시물 상세 페이지, 작성자 페이지가 있고, 작성자 페이지에는 작성자의 약력과 작성자가 쓴 글이 표시됩니다. 이를 위해 두 개의 컬렉션이 필요합니다.

• articles : 게시물 정보를 담는 컬렉션

• authors : 작성자 정보를 담는 컬렉션

게시물에 작성자를 지정해 두면, 작성자 정보를 한 곳에서 업데이트할 수 있습니다. 또한 articles 컬렉션에서 작성자의 slug를 참조해, 이후 authors 컬렉션에서 해당 작성자의 데이터를 불러올 수 있습니다.

중첩 컬렉션

게시물 상세 페이지에 작성자 이름을 표시하려면 다른 컬렉션 안에 컬렉션을 중첩해야 합니다. 작성자의 slug를 기준으로 데이터를 필터링해 게시물 페이지에 표시할 수 있습니다. 이 방식은 게시물 페이지뿐 아니라 기사 페이지, 작성자 페이지 등 다른 모든 페이지에도 동일하게 활용할 수 있습니다.

• 한 컬렉션 안에서 다른 컬렉션의 데이터를 불러와 사용하는 방식입니다.

• 예: articles 컬렉션에서 작성자의 slug를 저장 → 이 slug를 기준으로 authors 컬렉션의 데이터를 가져와 게시물 상세 페이지에 작성자 이름/프로필을 표시

• 목적: 특정 항목(예: 게시물)과 연관된 다른 컬렉션(예: 작성자)을 매칭하는 것

컬렉션 연결의 장점

컬렉션을 연결하면 카테고리 페이지를 손쉽게 만들고, 현재 페이지 조건에 따라 콘텐츠를 필터링할 수 있습니다.
웹사이트에 템플릿과 카테고리를 설정할 때 시간을 절약할 수 있는 효율적인 방법입니다.

• 여러 개의 CMS 컬렉션을 서로 관계형으로 연결해 사용하는 더 큰 개념입니다.

• 예: articles와 authors를 연결 → 나중에 카테고리 페이지에서 “현재 페이지 조건(카테고리=러닝)”에 따라 articles를 필터링하거나, 특정 작성자가 쓴 글만 모아 보여줄 수 있음

• 목적: 템플릿과 필터링을 손쉽게 구현하고, 웹사이트 전체에서 일관된 데이터 관리가 가능하게 하는 것

Stride 프로젝트로 연습하기 →

본 글은 Framer 공식 블로그의 ‘Combining multiple CMS collections for category pages’를 번역·각색한 콘텐츠입니다.