40일차[framer, 아티클 카타]

📝 오늘의 학습 기록 — Framer 반응형 & CMS + 아티클 카타

오늘은 Framer 강의 챕터 2-4부터 3-6까지 수강하며 실습했고, 아티클 카타도 함께 진행했다. 반응형 레이아웃부터 CMS 연결, 조건부 렌더링까지 한 번에 훑은 날.

---

🎨 Part 1. Framer 강의 정리

챕터 2-4. 반응형 이해하기

반응형 디자인이란? 사용자가 어떤 기기를 쓰든 콘텐츠와 레이아웃이 자연스럽게 적응하는 것. 데스크탑·태블릿·모바일 모두 일관된 경험을 제공하는 게 핵심.

왜 필요한가?

• 웹 트래픽의 절반 이상이 모바일에서 발생
• Google SEO도 반응형 사이트를 우대
• 별도의 모바일 페이지를 안 만들어도 됨 → 관리 효율성
• 👉 Mobile First 원칙: 처음부터 모바일 기준으로 설계 후 확장

반응형 핵심 도구 2가지

1. Fluid Layout (유동형 레이아웃) — 부모 프레임 크기에 따라 비율적으로 변하는 구조 (Fill, Fit, Fixed, Max Width)
2. Breakpoints (중단점) — 특정 뷰포트 너비 기준으로 레이아웃 재정의
   • Desktop: 1200px 이상
   • Tablet: 810~1199px
   • Mobile: 390~809px

---

챕터 2-5. Fluid Layout 실습

Absolute의 문제점

• 텍스트 잘림 / 뷰포트 줄이면 요소 겹침 / 모바일에서 화면 벗어남
• 👉 해결: Stack 레이아웃으로 전환 (Add Layout → Stack)

Stack 정렬 옵션

정렬 설명 사용 예시

Start	위/왼쪽 정렬	기본 리스트
Center	중앙 정렬	아이콘, 버튼 그룹
End	아래/오른쪽 정렬	푸터
Space Between	양 끝 + 균등 분산	네비게이션 바, 탭
Space Around	양 끝에도 간격	로고-메뉴 여백

Fill / Fit / Fixed / Max Width

속성 설명 언제 사용?

Fill	부모의 여유 공간 꽉 채움	반응형 기본
Fit	콘텐츠 맞게 자동 조절	텍스트, 아이콘
Fixed	고정 크기	로고, 버튼
Max Width	너무 커지지 않게 제한	Container

Section → Container → Content 구조 이미지나 콘텐츠에 여백 줄 때, 직접 padding 주지 말고 한 겹 더 감싸는 Frame을 만들어서 적용. 반응형에서 바깥 Frame만 조정해도 안의 콘텐츠가 자연스럽게 따라옴.

유용한 단축키

• I : 삽입 패널
• Cmd + K : Quick Action
• Space + 드래그 : 캔버스 팬 / 중첩 방지 드래그
• Shift + 1/2/3 : Zoom fit / selection / 100%
• Esc : 부모 프레임으로 이동

---

챕터 2-6. Breakpoint를 활용한 레이아웃 최적화

적용 흐름

1. 상단 Breakpoint Bar의 [+] 버튼 클릭
2. Tablet (810px), Phone (390px) 추가
3. 각 Breakpoint마다 속성 Override → 파란색으로 표시되면 Override 상태

Override 가능한 것들

• 레이아웃 (Grid columns)
• 텍스트 크기, padding
• 요소 순서 (드래그)
• visibility (특정 Breakpoint에서만 보이게)

Text Style도 반응형으로 Text Layer마다 개별 Override하지 말고, Text Style 자체에 Breakpoint 추가 가능.

• H1 예시: Large 64px / Medium 48px / Small 34px

Preview: Cmd/Ctrl + P → 뷰포트 핸들 드래그하면 자동 전환 확인

---

챕터 3-1. CMS 개념 이해하기

CMS = Content Management System (콘텐츠 관리 시스템) 한 번 입력하면 여러 곳에서 자동으로 반영되는 구조. 반복 작업을 자동화하고 일관된 콘텐츠 운영을 가능하게 해줌.

비유: 디지털 파일 캐비닛

• Collection = 폴더
• Item = 폴더 안의 서류
• Field = 서류 안의 항목 (제목, 날짜, 이미지 등)

Framer CMS 4대 핵심

개념 역할

Collection	콘텐츠를 유형별로 묶는 폴더
Field	각 콘텐츠의 속성
Item	실제 콘텐츠 단위
List / Detail Page	나열 vs 상세 보기

---

챕터 3-2. CMS 컬렉션 생성하기

컬렉션 이름 짓기

• ❌ Bad: data1, collection-abc
• ✅ Good: articles, team, products

기본 자동 필드

• title (텍스트)
• slug (URL용 고유 키워드, 필수)

주요 필드 타입

• Plain Text / Formatted Text
• Date / Link
• Image / Gallery
• Color / Toggle / Number / Option / File
• Reference / Multi-Reference (다른 컬렉션 참조)

💡 필수(required) 토글 + 설명(description)을 달아두면 협업 시 편하다.

---

챕터 3-3. CMS 연결하기

Collection List 삽입

1. I 키 → CMS → Collection List
2. Source에서 가져올 컬렉션 선택

기존 디자인에 수동 연결

1. 기존 디자인을 Collection List 안으로 드래그
2. 요소 선택 → + 버튼 → Set Variable → CMS 필드 선택
   • 텍스트 → Content 속성
   • 이미지 → Fill 속성

👉 카드 하나만 디자인해도 나머지 항목에 자동 적용!

---

챕터 3-4. CMS 필터링/정렬 기능

Content 설정 메뉴

옵션 설명

Source	어떤 컬렉션
Sort	정렬 기준 필드
Filter	조건에 맞는 항목만
Limit To	최대 몇 개
Start Offset	앞에서 몇 개 건너뛰기

실전 활용

• 추천 콘텐츠만: featured(Toggle) = true
• 최신 3개만: Sort=date 내림차순, Limit=3
• 카테고리 필터: category = "News"
• 슬라이더 + 다음 3개 분리: Limit=3 / Offset=0 ↔ Limit=3 / Offset=3
• 커스텀 순서: order 숫자 필드 만들어서 직접 제어

---

챕터 3-5. CMS 상세 페이지 연결하기 (Dynamic Routing)

CMS 컬렉션의 각 Item마다 개별 페이지를 자동 생성하는 기능. → 매번 페이지 새로 만들지 않고, 하나의 상세 레이아웃만 만들면 끝!

생성 방법

1. Pages 탭 → + → New CMS Page
2. 컬렉션 선택 → Detail Page
3. slug 기반으로 URL 자동 생성 (예: yourwebsite.com/articles/color-tips)

필드 → 요소 자동 매핑

• Title → Text / Image → Image Layer / Date → Text

새 필드 연결 (예: 링크 버튼) 요소 선택 → 속성 → Set Variable → 필드 선택

• 텍스트 → content / 버튼 → link / 이미지 → fill

---

챕터 3-6. 항목별 스타일 & 조건부 렌더링

조건부 렌더링 = CMS 데이터 유무에 따라 표시 여부 제어 👉 Visible 속성 → Set Variable → is set 체크

실전 예시

1️⃣ 링크 있을 때만 버튼 표시

• 버튼 → Visible → Set Variable → link 필드 → is set

2️⃣ 카테고리별 배경색 다르게

• 카드 컴포넌트를 Variant로 분기 (기본 / news / event)
• Variant → Set Variable → category 필드 연결

3️⃣ 추천 글에만 뱃지 표시

• featured Toggle 필드 추가
• 뱃지 요소 → Visible → Set Variable → featured

기능 설명

Variable → is set	필드가 비어있지 않을 때만 표시
Toggle 필드	Yes/No 상태 기반 분기
Variant 분기	카테고리/타입별 스타일 변경
조건부 visibility	콘텐츠에 따른 동적 구성

---

📰 Part 2. 아티클 카타

📖 아티클 정보

• 제목: 인스타 스토리 PM이 소셜앱의 본질을 다시 설계하다
• 저자: 이누 시스템

🔑 핵심 메시지

제품의 본질에 집중하면 핵심 가치는 흔들리지 않는다.

핵심 키워드: 소셜앱, 본질, 핵심가치, 성장 전략, PM의 역량

---

💡 흥미로웠던 포인트

1. 인스타그램 스토리 출시 배경 사용자들이 "예쁘고 완벽한 사진"을 올려야 한다는 부담감 때문에 활동량이 감소하고, 유명인·크리에이터만 활발히 활동한다는 문제를 발견. 가볍게 일상의 순간을 공유할 수 있는 공간으로 스토리를 기획.

2. Retro 앱의 가치 소셜미디어의 본질에 집중한 '진짜 친구들과 일상을 나누는 공간' → 사용자의 '관심'과 '의도'를 존중하는, 사람을 위한 제품

3. Retro의 성장 전략 성장보다 리텐션이 먼저 → 그다음 성장과 구독(수익화)

---

🆕 새롭게 알게 된 점

• 새로운 기능이 2개월 만에 개발되어 A/B 테스트 없이 전 세계에 출시될 수도 있다
• 좋은 제품 자체보다 '좋은 제품을 꾸준히 만드는 시스템(팀·문화·구조)'이 더 중요하다
• PM은 영화감독과 같다. 방향성을 잃지 않도록 미션(왜) → 전략(어떻게 이길지) → 로드맵(무엇을 언제까지) 문서화는 필수
• 제품 성장 요소 3가지
  1. 대표할 무언가 — 정체성과 연결되는 브랜드 만들기
  2. 함께할 수 있는 무언가 — 공동 활동을 유도하는 설계
  3. 이야깃거리 — 단순히 좋은 게 아니라, 예상보다 훨씬 좋아야 사람들이 공유함

---

🗣️ 카타 세션 인사이트

📌 AB 테스트 없는 출시에 대해

• 비즈니스 생존을 위한 전략적 승부수
• 정성적 리서치(유저 인터뷰, 설문)는 분명 진행했을 것
• 완전히 새로운 개념이라 일부 테스트가 무의미했을 가능성
• = 리스크를 팀이 온전히 감수하는 것. 단, 논리가 탄탄하면 빠른 대응 가능

📌 주니어 PM의 아이디어 채택 기준

• 정해진 기준은 없음. 의사결정자가 좋다 판단하면 진행됨
• 핵심: 데이터 기반의 논리적 문서로 설득하기
• 전사 비전과 연결한 논리 구성이 효과적
• 주니어일수록 제약 없이 다양한 관점에서 의견 내기

📌 레퍼런스 수집 방법

UI가 아니라 **"문제의 본질"**을 보라

• "이 기능이 어떤 문제를 해결하기 위해 등장했는가"를 먼저 파악
• 인스타 스토리는 스냅챗 카피였지만, 같은 문제(참여도 감소)를 해결했기 때문에 유효했음
• 카카오톡 '펑' 기능도 같은 맥락
• 피그마 파일에 기능(피처) 단위로 분류해서 정리하는 것이 효율적
• 추천 플랫폼: WWIT, User Spoon

📌 웹 3.0과 PM의 미래

시대 특징

웹 1.0	일방향 / 읽기만 가능
웹 2.0	양방향 / 사용자가 콘텐츠 업로드
웹 3.0	탈중앙화 / 개인이 데이터·콘텐츠 소유

• 핀테크·금융권에서 이미 웹3 기반 서비스 등장 중
• 장기적 관점에서 흐름을 인식하고 있어야 함
• 추천 도서: "읽고 쓰고 소유하다"

---

✍️ 한 문장 요약

좋은 제품은 본질에서 시작되고, 좋은 시스템에서 지속된다.

---

🏁 오늘의 회고

Framer 쪽은 반응형 → CMS → 동적 페이지 → 조건부 렌더링까지 자연스럽게 이어지는 흐름이라 한 번에 듣기 좋았다. 특히 Section → Container → Content 구조랑 Variable → is set 패턴은 앞으로 계속 쓸 것 같다.

아티클 카타에서는 "UI가 아니라 문제의 본질을 보라"는 말이 가장 와 닿았다. 평소에 레퍼런스를 많이 모으자..!