Framer Analytics
- 설치 필요 없음 – 퍼블리시만 하면 자동 수집.
- 기본으로 보는 것:
- Unique Visitors, Page Views, Bounce Rate, Average Session Duration
- Device / Country / Source 필터로 구간별로 쪼개서 보기 가능.
- 느낌:
→ “간단한 랜딩 페이지 지표”는 Framer Analytics만으로도 충분.
→ GA4 세팅하기 전에, 방문자 흐름 감 잡는 용도로 쓰기 좋다.
GA4
- 이벤트 기반 분석이라 버튼 클릭, 경로, 전환 흐름까지 다 볼 수 있음.
- 연결 방식:
- GA4 속성 만들고 → 측정 ID(G-XXXX) 발급
- Framer Project Settings → Analytics에 ID만 넣으면 끝
- 기본 리포트:
- 실시간: 지금 누가 어디서, 뭘 하고 있는지
- 획득(Acquisition): 어디서 들어왔는지
- 참여도(Engagement): 어떤 페이지/이벤트가 잘 먹히는지
- 탐색(Exploration) 기능:
- 퍼널 탐색(가입→전환까지 어디서 떨어지는지)
- 경로 탐색(이 버튼 누른 후 사람들 어디로 가는지)
- 세그먼트 비교(예: 광고 유입 vs 검색 유입)
👉 정리:
Framer Analytics = 빠른 스냅샷
GA4 = 가설 세우고 퍼널/경로까지 보는 분석 도구
2. Form Builder & 응답 자동화
Framer Form Builder
- 코드 없이 폼 레이아웃 + 입력 필드 모두 시각적으로 구성 가능.
- 지원 필드:
- text / textarea / email / number / select / checkbox / radio / date / time …
- 제출 이후:
- 성공/에러 상태에 따라 버튼 상태 바꾸기
- 특정 페이지로 리디렉션
- Email / Webhook / Google Sheets로 데이터 전송
Google Sheets 연동
- “Send to → Google Sheets”만 연결하면:
- input의 name 값이 그대로 시트 컬럼명으로 들어감.
- 제출할 때마다 한 줄씩 자동 추가.
- 활용:
- 문의 폼, 이벤트 신청, 뉴스레터 구독 등
→ 나중에 Zapier/Make랑 묶어 확장 가능.
- 문의 폼, 이벤트 신청, 뉴스레터 구독 등
Webhook + Make로 자동 이메일 보내기
- 흐름:
- Make에서 Webhook 시나리오 생성 → URL 발급
- Framer Form의 “Send to → Webhook”에 URL 입력
- Make에서 받은 데이터로 이메일 모듈 연결 (Gmail 등)
- 결과:
- 사용자가 폼 제출 → 자동 감사 메일/안내 메일 발송.
👉 정리:
Form Builder로 수집 → Google Sheets에 쌓기 → Make로 자동 응답까지
여기까지만 세팅해도, 작은 서비스 수준의 자동화는 충분히 가능.
3. A/B 테스트 – VWO로 가볍게 실험 붙이기
- Framer 사이트에 VWO SmartCode를 <head>에 삽입하면 A/B 실험 가능.
- 안정적으로 돌리기 좋은 실험:
- 버튼 텍스트 / 색상 / 단순한 스타일 변경
- 불안정 or 비추천:
- 탭, 슬라이더, 복잡한 인터랙션 구조 변경 (렌더 시점 꼬일 수 있음)
👉 “완전한 실험 플랫폼” 느낌보다는
랜딩 페이지 CTA 문구, 버튼 색 정도를 검증하는 용도로 생각하기.
4. 퍼블리시, 도메인, 사이트 설정 – 진짜 서비스처럼 운영하기
Site & Page Settings
- Site Title / Description: 전체 기본값 세팅 → 페이지별로 오버라이드 가능.
- Preview 이미지(OG 이미지):
- 카톡/슬랙 공유 시 썸네일로 노출되는 이미지.
- Preserve URL Parameters(UTM 유지):
- 페이지 이동해도 utm_source 등 파라미터 유지.
- 마케팅 성과 추적 정확도↑ 핵심 설정.
접근성 & 편의 기능
- Reduce Motion / 커서 효과 끄기:
OS 설정을 따라가며 모션 줄이기 지원 → 민감한 사용자 배려. - Localization & 자동 로컬 전환:
- 브라우저 언어 보고 ko-KR, en-US 등 맞는 페이지로 이동.
- 자동 번역이 아니라, 미리 만들어둔 다국어 페이지로 스위칭.
커스텀 코드 & 도메인
- 커스텀 코드: GA, 챗봇, 픽셀 등 <head>/<body> 위치에 삽입.
- 도메인 연결:
- 무료: xxxxx.framer.app / something.framer.website 등
- 유료: 나만의 mybrand.com 연결 + 스테이징/버전 관리.
👉 느낌:
“도메인 + 커스텀 코드 + 스테이징”까지 쓰면
사이드 프로젝트도 ‘서비스 운영 느낌’을 낼 수 있다.
5. SEO & 접근성 – 최소한의 기본기
- 시맨틱 태그
- 핵심 제목은 H1, 그 아래는 H2~H3… 계층 구분.
- 프레임에 header, main, footer, nav 등 역할 지정.
- 이미지 Alt Text & ARIA Label
- “이 이미지가 뭔지”를 텍스트로 설명 → 스크린리더 + 검색엔진 모두에게 도움.
- Tab Index
- 키보드로 이동하는 순서를 직접 정의 → 사용성 개선.
- Googlebot 설정
- 광고/불필요한 섹션은 Googlebot → Skip 해서 인덱싱 제외.
- URL 구조
- /contact, /about-us처럼 짧고 의미 있는 영문 URL이 SEO에 유리.
👉 정리:
시맨틱 구조 + alt text + URL만 잘 정리해도
“대충 만든 랜딩 페이지”에서 “최소한 예의를 갖춘 웹사이트”로 승급.
6. 테마, 템플릿, Import, 포지셔닝
간단히 핵심만:
- 라이트/다크 테마
- 컬러를 “스타일”로 먼저 정의해 두고, 라이트/다크 값만 다르게 지정.
- 특정 색을 항상 고정하고 싶으면 Static Color로 관리.
- 템플릿
- Framer 템플릿을 가져와서 텍스트/이미지/색만 갈아끼우면 빠르게 출발 가능.
- Figma Import
- 한 번에 전체 복붙 X → 섹션 단위로 가져와서 Stack/Layout으로 구조화.
- Fixed / Sticky
- Fixed: 뷰포트에 완전 고정(네비, 플로팅 버튼).
- Sticky: 스크롤하다가 상단에 닿으면 잠시 고정(사이드 카드, 섹션 헤더).
오늘 배운 것에서 느낀 점 📝
- Framer는
분석 / 폼 / 자동화 / A/B 테스트 / SEO까지 포함한 “가벼운 서비스 운영 툴”이다. - PM 관점에서 보면:
- 작은 실험(CTA 문구, 폼 위치, 유입 채널 테스트)을
내가 직접 세팅하고, 데이터를 바로 보는 훈련을 하기 정말 좋은 툴 같다.
- 작은 실험(CTA 문구, 폼 위치, 유입 채널 테스트)을
'PM 부트캠프 TIL' 카테고리의 다른 글
| [내일배움캠프 PM 4기] 67일차 - 콘텐츠 PM이라는 방향성, 그리고 오늘의 고민들 (0) | 2025.11.21 |
|---|---|
| [내일배움캠프 PM 4기] 65일차 - Framer로 만든 에어비앤비 스타일 웹사이트 (0) | 2025.11.19 |
| [내일배움캠프 PM 4기] 63일차 - 처음 써보는 Framer CMS (0) | 2025.11.17 |
| [내일배움캠프 PM 4기] 60일차 - Framer 핵심 정리 (2) | 2025.11.14 |
| [내일배움캠프 PM 4기] 57일차 : 역기획 팀 프로젝트(4) - 배달의민족, 왜 지금 ‘픽업’에 집중해야 하는가 (0) | 2025.11.11 |