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

컬렉션 리스트 추가하기

Framer에서 CMS를 활용하다 보면, 한 상세 페이지 안에 두 개 이상의 CMS 컬렉션을 보여줘야 할 때가 있습니다. 예를 들어, ‘블로그 포스트 상세 페이지’에 연관된 다른 글이나 추천 제품 목록을 함께 보여주고 싶을 때 유용합니다. 이럴 때는 새로운 CMS 컬렉션을 페이지에 직접 추가하면 됩니다.

1. 페이지 상단에서 Insert 메뉴 열기

2. Insert 메뉴 → Collection Lists 섹션에서 원하는 CMS 컬렉션을 선택

3. 드래그 앤 드롭으로 캔버스에 올려놓으면 Framer에서 자동으로 해당 컬렉션과 연결된 스택(Stack) 구조 생성

컬렉션 커스터마이징하기

캔버스에 추가된 CMS 컬렉션은 일반 Stack처럼 자유롭게 스타일을 수정할 수 있습니다. 즉, 컬렉션을 추가하고 나서 컬렉션의 외형과 동작 방식을 내 페이지 디자인에 맞게 자연스럽게 통합할 수 있다는 점이 Framer CMS의 강점입니다.

Note: 컬렉션 레이어를 선택하면 오른쪽 패널에서 레이아웃, 간격, 배경색 등 시각적 속성을 바로 조절할 수 있습니다.

주의 사항

• CMS 상세 페이지에서도 여러 CMS 컬렉션을 쉽게 추가할 수 있습니다.

• 각 컬렉션은 개별 데이터에 맞춰 자동으로 연결됩니다.

• 추가한 컬렉션이 잘 보이지 않거나 문제가 발생할 경우, Framer 고객지원 페이지를 통해 문의하시면 더 빠른 도움을 받을 수 있습니다.

참고: CMS 컬렉션 활용 팁

• 상세 페이지에 추천 콘텐츠 보여주기: 현재 글과 같은 카테고리의 글 리스트를 별도 컬렉션으로 불러오면, 유저가 더 오래 머물게 만들 수 있어요.

• 관련 제품 섹션 추가하기: 이 기능을 활용하면 상품 상세 페이지에서 ‘이 상품을 본 고객이 함께 본 상품’을 CMS로 동적으로 보여줄 수 있습니다.

본 글은 Framer 공식 블로그의 ‘How do I add another CMS collection in a CMS detail page’ 를 번역·각색한 콘텐츠입니다.