41일차[framer,make특강]

오늘 배운 것 — Framer CMS 컬렉션 관계와 Make AI 자동화

챕터 3-7 (Framer CMS) + AI Workflow 특강 / 학습 기록

---

들어가며

오늘은 두 가지를 배웠다.

1. Framer CMS에서 컬렉션끼리 관계를 맺고, 사용자 입력에 따라 리스트가 바뀌는 필터 UI를 만드는 법
2. Make로 AI 워크플로우를 짜서, Google Form 응답을 GPT가 분석하고 자동으로 Notion / Slack에 분배하는 자동화

언뜻 보면 따로 노는 주제 같지만, 정리하다 보니 결국 둘 다 "데이터를 어떻게 구조화하고, 어떻게 흐르게 할 것인가" 라는 같은 질문을 다른 각도에서 다루고 있었다. 하나는 "보여주는 쪽", 하나는 "처리하는 쪽".

---

Part 1. Framer CMS — 컬렉션 관계 & 필터 UI

1-1. 컬렉션 관계(Relation)란?

Framer CMS에서는 한 컬렉션이 다른 컬렉션을 참조(Reference) 할 수 있다.

대표적인 구조:

• 글(Posts) → 작성자(Authors)
• 프로젝트 → 카테고리
• 상품 → 브랜드

핵심은 데이터 중복 제거. 작성자 정보를 글마다 따로 입력하면 동일인이 여러 명처럼 흩어지는데, 작성자를 별도 컬렉션으로 분리하고 글에서 참조하면 한 곳에서만 관리하면 된다.

노션이나 에어테이블의 Relation이랑 거의 같은 개념. 정규화(normalization) 감각을 UI 도구에서 다시 만나는 느낌.

1-2. 글 → 작성자 연결하기

진행 순서:

1. Authors 라는 새 컬렉션 생성 (이름 / 프로필 이미지 / 소개 텍스트)
2. Articles 컬렉션에서 + Add Field → Relation 선택
3. 필드명: author, 연결 대상: Authors

이렇게 하면 글 항목마다 작성자 선택 드롭다운이 생긴다. Reference / Multi-Reference 옵션이 있는데, 글 하나에 작성자 한 명이면 Reference, 여러 명이면 Multi-Reference.

1-3. 상세 페이지에 관계 콘텐츠 표시하기

연결만 해두면 데이터는 들어있지만 화면엔 안 나오니까, 상세 페이지에서 직접 끌어와야 한다.

1. 텍스트 / 이미지 레이어 선택
2. + Set Variable
3. Author → Profile Image / Name 식으로 드릴다운

핵심 포인트: 관계형 필드 안의 서브필드도 그대로 끌어올 수 있다. author.name, author.image 같은 식으로.

1-4. 카테고리별 필터링 UI

이제 사용자 입력에 따라 리스트가 바뀌는 동적 UI 차례.

데이터 준비

1. Categories 컬렉션 생성 (이름 필드만)
2. Articles에 category Relation 필드 추가
3. 글마다 카테고리 연결

필터 UI 만드는 법

• 버튼/텍스트로 토글 컴포넌트 구성
• 컬렉션 리스트의 Filters 속성에 조건 걸기
• Filters에 변수(Variable)를 넘기면 동적 필터링이 된다

1-5. Variant + Variable + Filter — 진짜 핵심

가장 실무에 가까운 부분.

• 카테고리 Pill 버튼을 Variant 두 가지로 만든다: Selected, Not Selected
• 버튼 클릭 시 Set Variable로 선택된 카테고리 값 변경
• 그 변수를 리스트의 Filter 조건에 연결

결과적으로 All / New / Old 같은 탭형 필터가 동작하면서, 같은 디자인을 Variant로 공유하니까 재사용성도 올라간다.

셋이 맞물리면서 "아 이게 노코드의 진짜 맛이구나" 싶었던 순간.

기능 설명

Relation Field	다른 컬렉션의 항목을 참조
필터 UI	버튼, 드롭다운 등으로 리스트 필터링
변수 기반 필터	사용자 입력값에 따라 동적 필터링
관계형 서브필드	author.name, category.name 등 드릴다운

---

Part 2. Make로 만드는 AI Workflow 자동화

2-1. 오늘 만든 것

Google Form에 들어온 의견을 GPT가 읽고, 해결이 필요한 이슈인지 일반 의견인지 판단해서, 자동으로 Notion DB나 Slack으로 보내주는 자동화 파이프라인.

코드 한 줄 안 쓰고 Make로 조립.

2-2. 전체 흐름

Google Form
    ↓
Google Sheet (자동 저장)
    ↓
Make (새 응답 감지)
    ↓
GPT (응답 내용 분석)
    ↓
Google Sheet (분석 결과 기록)
    ↓
Router (분기 처리)
    ├─→ 해결 필요 이슈  →  Notion DB
    └─→ 일반 의견        →  Slack

2-3. 단계별로 뜯어보기

① Google Form → Google Sheet

폼 응답이 시트에 자동으로 쌓이게 연결. Google Form 기본 기능. 자동화의 시작점.

② Make가 새 응답 감지

"Watch New Rows" 트리거. 새 행이 생기면 데이터를 들고 다음 모듈로.

시트가 일종의 큐(queue) 역할을 하는 셈.

③ GPT가 응답 분석

프롬프트를 넣어서 응답을 분류시킨다. 예시:

"다음 사용자 의견을 읽고, '이슈' 또는 '일반의견' 중 하나로 분류해주세요. 한 줄 요약도 함께 출력해주세요."

이 단계가 사실상 AI를 워크플로우에 끼워 넣는 핵심. 프롬프트만 바꾸면 분류 기준도, 출력 포맷도 마음대로 바뀐다.

④ 분석 결과를 Sheet에 다시 기록

"분류 결과", "요약" 컬럼을 따로 두고 채워준다.

왜 굳이 시트에 다시 적나 했는데 — 사람이 검토할 수 있는 로그 역할을 하더라. AI가 잘못 분류해도 시트만 보면 추적이 된다.

⑤ Router로 분기

Make의 Router 모듈이 조건에 따라 흐름을 갈라준다. GPT 결과(이슈 / 일반의견)를 기준으로 두 갈래.

if-else 문을 노드로 만든 느낌. 시각적이라 한눈에 들어옴.

⑥ 이슈 → Notion DB

해결이 필요한 의견은 Notion에 카드로 자동 등록. 제목 / 요약 / 원문 / 등록일 매핑.

⑦ 일반 의견 → Slack

보관보다는 공유 목적. 채널에 알림만.

모듈 역할

Google Form	입력 수집
Google Sheet	데이터 저장 + 로그
Make Trigger	새 응답 감지
GPT	자연어 분류 / 요약
Sheet Update	AI 결과 기록
Router	조건 기반 분기
Notion	이슈 트래킹
Slack	빠른 공유

---

종합 회고

두 주제를 같이 정리하다가 발견한 공통점 하나.

둘 다 결국 "데이터를 어떻게 연결하고 흐르게 할 것인가"의 문제다.

• Framer CMS는 데이터의 구조를 다룬다 — 컬렉션끼리 관계 맺고, 사용자 입력에 따라 어떻게 보여줄지
• Make 워크플로우는 데이터의 흐름을 다룬다 — 어디서 들어와서, 어디서 판단하고, 어디로 보낼지

그리고 둘 다 핵심 패턴이 비슷했다.

Framer CMS Make Workflow

트리거	사용자 클릭 (필터 버튼)	새 폼 응답
판단	Variable 값	GPT 분류 결과
결과	리스트 필터링	Notion / Slack 분배

→ "사용자가 뭔가를 하면, 그걸 변수에 담고, 그 변수에 따라 다른 결과를 보여준다"는 구조는 노코드 도구 전반에 흐르는 공통 언어 같다.

또 하나 — AI 워크플로우에서 가장 크게 와닿은 건 "AI 자체보다 어디에 끼워 넣느냐가 더 중요하다" 는 감각. GPT는 그냥 텍스트 분류기일 뿐인데, Form ↔ Sheet ↔ Notion ↔ Slack 사이의 판단 노드로 배치하니까 갑자기 시스템이 똑똑해졌다.

---

한 줄 요약

"데이터를 구조화하는 법(Framer)과 흐르게 하는 법(Make)을 같은 날 배웠다.