📝 오늘 하루
- Framer 강의를 들으면서 ‘해보고 싶은 것’들이 많아진다. Figma를 들었을 때는 부담감으로 가득했는데, 다행이다.
- 하루의 시간을 규모 있게 써야한다는 것은 계속 인지하고 있는데, 이게 쉽지 않다. 집중을 위해서 환경조성을 해야한다..
📘 오늘 배운 개념 요약
📕 챕터4 :사용자 분석 & 응답 수집 자동화
4-1. 사용자 행동 데이터 보기
- 기본 제공되는 Analytics 기능을 통해 별도의 복잡한 설정 없이도 방문자 데이터 수집 가능
- Framer Analytics 의 대표 특징
기능 설명 자동 작동 사이트를 퍼블리시하면 자동으로 작동 시작 광고 차단 무력화 외부 스크립트가 아닌 내부 기능이므로 ad blocker에 막히지 않음 GDPR 준수 쿠키 배너 없이도 사용자 데이터는 익명 처리되어 안전함 별도 설치 불필요 모든 요금제에 포함, 외부 코드나 설정 없이 사용 가능 - 확인가능 지표
지표 설명 Unique Visitors 고유 방문자 수 Page Views 총 페이지 조회 수 Live Visitor Activity 현재 활동 중인 사용자 정보 Bounce Rate 이탈률 Average Session Duration 평균 체류 시간
4-2. GA4 연동 설정
- 등록 방법
- 1단계: GA4 속성 생성
- https://analytics.google.com 접속
- [관리] > [계정 생성] 또는 기존 계정 선택
- [속성] > "사이트 이름" 입력 후 시간대/통화 설정
- [데이터 스트림] > 플랫폼은 "웹" 선택
- 사이트 주소 입력 후 스트림 생성 → 측정 ID(G-XXXXXX) 복사
- 2단계: Framer 프로젝트에 GA4 ID 삽입
- Framer에서 Project Settings > Analytics 메뉴로 이동
- 복사한 측정 ID(G-XXXXXX) 입력
- 퍼블리시 후, GA4가 자동으로 트래킹 시작됨
- 1단계: GA4 속성 생성
4-3. GA4 데이터 분석
- 확인 가능한 것
- 실시간 보고서
- 최근 5분 이내 접속한 사용자의 행동을 확인
- 위치, 기기, 이벤트 이름 등 실시간 지표 표시
- 획득 보고서 (Acquisition)
- "어디서 왔나?"를 보여줌
- 사용자 기준 vs 세션 기준 유입 경로 분석 (Google, Instagram, 직접입력 등)
- 참여도 보고서 (Engagement)
- 이벤트 발생 수, 페이지별 체류 시간, 이탈률 등
- 어떤 콘텐츠가 효과적인지 확인 가능
- 수익 창출 보고서 (Monetization)
- 전자상거래 기반 사이트의 매출/구매 관련 리포트
- 기술 보고서 (Tech)
- 사용자 기기, 브라우저, OS 정보 확인
- UX 개선 및 타겟 마케팅 전략에 활용 가능
- 실시간 보고서
- GA4 탐색 리포트 유형
유형 설명 예시 자유 형식 피벗 테이블 형태 분석 유입 경로별 전환율 비교 퍼널 탐색 단계별 이탈률/전환 분석 가입 → 온보딩 완료 → 구매 경로 탐색 특정 행동 이후 흐름 시각화 버튼 클릭 후 사용자 이동 경로 세그먼트 중첩 조건이 겹치는 사용자 분석 충성고객 중 광고 유입 비율 사용자별 행동 분석 한 사용자 기준 행동 로그 분석 장기 고객의 전체 여정 확인 - 실습 예시
- 제품 전환 분석
- "어느 단계에서 많이 이탈하는가?"
- 퍼널 탐색 + 전환율/이벤트 수 기반 분석
- 버튼 클릭 후 행동 추적
- "이 버튼을 누른 다음 무슨 행동을 할까?"
- 경로 탐색으로 버튼 클릭 → 이후 이벤트 흐름 분석
- 유입 채널 성과 비교
- "Organic과 Paid 중 어떤 게 효과적인가?"
- 자유 형식 + 세그먼트 중첩 분석으로 비교
- 제품 전환 분석
4-4. 사용자 응답 수집용 폼 만들기
- Input 필드 유형
Input 타입 설명 text 기본 텍스트 (이름, 제목 등) textarea 여러 줄 입력 (메시지 등) email 이메일 형식 유효성 검사 포함 number 숫자 입력 전용 키패드 제공 phone 전화번호 입력 시 키패드 최적화 url URL 형식 유효성 포함 date 브라우저 네이티브 날짜 선택기 사용 time 브라우저 네이티브 시간 선택기 사용 select 드롭다운 메뉴 구성 가능 checkbox 다중 선택 가능 radio 단일 선택용 버튼 그룹 - 제출 이후 동작
- 폼 제출 상태와 버튼 상태 연결
- Submit 버튼에서 각 상태(loading, success, error)를 Variant에 연결
- 제출 성공 시 리디렉션
- Form Frame → Properties → Redirect → 특정 페이지 선택 가능
- 데이터 전송 방식 선택(복수 선택 가능하며, 동시에 여러 채널로 제출 처리 가능)
- Email: 지정한 주소로 내용 전송
- Webhook: 외부 서비스와 연결 (Zapier 등)
- Google Sheets: 구글 스프레드시트에 실시간 저장
- 폼 제출 상태와 버튼 상태 연결
4-5. 응답 자동화 - Google Sheets, Webhook(Make) 사용
- Framer의 Form Builder: 코딩 없이 설문, 피드백, 리드 생성 등 폼을 만들고 구글 시트에 응답을 저장하는 기능.
- Make (구 Integromat): 다양한 앱을 연결하여 자동화 워크플로우를 만드는 노코드 플랫폼.
- Framer 폼 제출 시 : Make의 웹훅을 통해 자동으로 이메일 응답을 보내는 등 더 복잡한 자동화 작업이 가능해집니다.
4-6. VWO를 활용한 A/B 테스트
- VWO 서비스를 통해 Framer A/B테스트를 쉽게 진행할 수 있음.
- 실험은 텍스트, 색상, 단순한 요소 위주로 설정하는 것이 안정적이며, 복잡한 컴포넌트 변경은 추천하지 않음.
💭 생각/질문
- 개인 과제를 빨리 끝내고, GA4 적용을 해봐야겠다.
- 어제 전 회사를 방문하여 관련 내용 승인을 받았다. 룩커 스튜디오까지 연결시켜보면 좋은 경험이 될 듯하다.
- 그것을 시작으로 홈페이지 개선 프로젝트에 적용하여 우선순위 및 컨텐츠 방향까지 구상해서 제안까지 해볼 것.
👷♂️ 오늘의 간접체험
[소화👅] 출근길 멍때리지 말고! 30분컷 소비자 조사하기
🔤 오늘의 단어
Input과 Output의 황금비율을 찾아서...