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

“Is Set”으로 visibility를 제어하는 방법

Framer에서 가장 기본적인 조건 제어 방식은 "Is Set" 조건입니다.
"Is Set" 조건을 설정하면 이미지가 CMS에 업로드 되어 있는 경우에는 표시되고, 이미지가 없는 경우에는 자동으로 숨겨집니다.
예를 들어, 팀 소개 페이지에서 어떤 팀원은 프로필 사진이 있고, 어떤 팀원은 없는 경우에 사진이 없는 구성원은 해당 요소를 자동으로 숨김 처리하여 레이아웃이 깨지지 않도록 할 수 있습니다.

어떤 경우에 사용하나요?

• 이미지가 있는 경우에만 표시하고, 없는 경우에는 자동으로 숨기고자 할 때

• CMS 필드를 따로 만들지 않고, 존재 여부만으로 표시를 제어하고자 할 때

“Is Set” 설정 방법

1. Visible 항목 오른쪽에 있는 + 버튼 클릭

2. Set Variable 메뉴 > "Is Set" 조건 선택

텍스트 기반 조건이란?

Framer에서는 "Is Set" 조건 외에도, 텍스트값을 기준으로 한 조건부 표시 기능을 제공합니다.
예를 들어, CMS에 카테고리 필드가 있고 그 값이 “공지사항”일 때만 상단에 배너를 띄우고 싶다면 Equals: 공지사항 조건을 활용할 수 있습니다.

• 같음 (Equals) / 같지 않음 (Doesn’t Equal)

• ~로 시작함 (Starts with) / ~로 시작하지 않음

• ~로 끝남 (Ends with) / ~로 끝나지 않음

• 포함함 (Contains) / 포함하지 않음

어떤 경우에 사용하나요?

• CMS의 텍스트 값에 따라 특정 배너나 요소를 표시할지를 정하고자 할 때

• 카테고리 값이 “이벤트”일 때에만 특정 섹션을 보여주고자 할 때

옵션 필드를 사용한 visibility 제어 방법

Framer에서는 옵션 필드를 추가하고 디자인에 적용하여 콘텐츠의 조건에 따라 다양한 레이아웃을 보여줄 수 있습니다.

1단계: 옵션 필드 추가 하기

1. CMS로 이동합니다.

2. Edit Fields(필드 편집)를 클릭합니다.

3. + 아이콘을 눌러 새로운 필드를 추가합니다.

4. 드롭다운 메뉴에서 Option을 선택합니다.

5. "1개 이미지 표시", "3개 이미지 표시" 등 원하는 옵션 목록을 입력합니다.

이 옵션들은 각 CMS 항목마다 다른 레이아웃이나 요소 표시 여부를 지정할 수 있도록 도와줍니다.

2단계: 디자인에 옵션 필드 조건 적용하기

1. visibility를 제어하려는 요소를 선택

2. Visible(표시 여부) 항목 옆의 + 아이콘 클릭

3. Set Variable(변수 설정)을 선택한 후, Option 조건 설정

주요 옵션

예시

• Variant A: 이미지를 1장만 보여주는 레이아웃

• Variant B: 이미지를 3장 보여주는 레이아웃

이때 Convert 옵션을 이용하면 CMS의 옵션 필드 값에 따라 A 또는 B를 자동으로 선택하여 표시할 수 있습니다. 이 방식은 하나의 컴포넌트를 다양한 조건에 따라 분기 처리해야 할 때 특히 유용합니다.

간단한 조건에 토글 필드를 사용하기

Framer에서는 예 / 아니오(Yes/No) 또는 켜기 / 끄기(On/Off) 형태의 간단한 조건을 처리할 때 Toggle 필드를 사용하는 것이 가장 효과적입니다.

• 특정 이미지나 배너 표시 여부 설정하고 싶을 때

• 이벤트 배너 표시 여부를 CMS에서 간단히 제어하고자 할 때

조건문과 Variant를 활용한 고급 제어

Framer의 조건문과 변환 기능을 함께 활용하면, CMS 상세 페이지의 구성 요소들을 더욱 세밀하게 제어할 수 있습니다. 특히 Transform(변환) 기능은 조건에 따라 컴포넌트의 Variant를 자동 전환할 수 있게 해주기 때문에 복잡한 콘텐츠 구조에도 대응할 수 있습니다.

• + 아이콘이 있는 거의 모든 요소에 조건을 적용할 수 있으며,

• 이 조건들을 이용해 콘텐츠 내용에 따라 동적으로 변화하는 레이아웃을 만들 수 있습니다.

본 글은 Framer 공식 블로그의 ‘How to create flexible CMS detail pages’ 를 번역·각색한 콘텐츠입니다.