우와~ 1주차 과제 내서 커피받았다

* 2주차 결과 URL :
https://product-builder-lecture-88c.pages.dev/
1) google analytics 가입
1-1) 측정 시작 버튼 클릭

이름 입력 후 속성 만들기. 속성은 하나의 사이트를 의미하고 속성으로 관리한다.



그 다음 약관 동의

다음과 같은 항목들 측정 가능

직접 설치쪽 코드 복사 후 firebase로 이동
1-2) firebase에 구글 태그 입력
모든 페이지에 태그가 들어갈 수있도록 AI에 시켜보자.
'모든 html에 아래 태그 추가해줘' 후 복사한 태그 붙여넣기
여러 사이를 관리하는 경우 하나의 계정으로 여러 속성으로 관리할 수 있다.
git에 올리고 배포해서 확인하기
이렇게 하면 사용자가 사이트에서 무엇을 했는지 추적할 수 있다!
https://analytics.google.com/analytics/web/provision/?hl=ko#/provision
Redirecting...
analytics.google.com
2. 클릭 추적
google analytics랑 연동도 가능하고 이걸 영상으로도 볼 수 있다!

이렇게 프로젝트 추가해준다.
태그를 수동으로 넣어도 되지만, 아래쪽에 구글 애널리틱스 통합 텍스트를 클릭하여 진입한다.
https://clarity.microsoft.com/projects/view/v2qbnaroov/settings#setup
Microsoft Clarity - Free Heatmaps & Session Recordings
Clarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.
clarity.microsoft.com
여기서 바로 연결하면 바로 연동된다.

구글 로그인 진행 후 이전에 생성한 프로젝트랑 연결한다.


이렇게 활성화된것을 확인할 수 있다.

여기 태그도 html 파일에 붙여준다.
사람들이 실제로 어떻게 했는지 실시간으로 녹화해서 볼 수 있는 툴이다.

요렇게 개발자 도구에서 확인가능하다.

애널리틱스 화면을 보면 어디서 접속했는지, 조회수 등 사용자가 페이지에서 수행한 작업들을 한 번에 확인할 수 있다.
https://clarity.microsoft.com/
Microsoft Clarity - Free Heatmaps & Session Recordings
Clarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.
clarity.microsoft.com
* 이벤트(Event)
- 전환 (Conversion)
주요한 이벤트 > 회원가입, 결제 등 ..
- 이탈 (Drop-off, Churn)
사용자가 떠남
* AARRR
에이에이알알알.. 이라고 읽음
전체적인 흐름이 사람이 적어지는 구조로 이루어져 있고, 이건 서비스에 따라 달라짐
ACQUISITION > ACTIVATION > RETENTION > REFERRAL > REVENUE
ex) 알게 됨 > 다운로드 > 유저 > 현질 > 추천
* Product Market Fit (PMF)
'시장에서 먹힌다'를 판단하는 말
Retention Curve가 어느정도 평탄하게 이루어지면 먹힌다고 본다. (쫌 치네 ? )
(Retiontion은 Keep Users - 재방문 고객)
'0으로 수렴하지 않고' 바닥이 생기면 PMF 신
* 아하 모먼트(Aha Monment)
아하!라고 느끼는 포인트를 만들어줘야한다.
혹하는 지점!
* 한계 수용 능력(Carrying Capacity) - 호수 모델
신규 유입(Inflow) 과 이탈(Churn)을 통해서 현재 활성 유저 (MAU)를 알 수 있다.
Carrying Capacity(최대 수용 가능 유저 수)
-> 어떻게 신규 유입을 늘릴 수 있을까?
3) 도메인 만들기 > 있어야 좀 제대로 된 페이지 같음.
cloudflare로 편리하게 쓰거나 namecheap으로 다양하게 보고 쓰거나 할 수 있다.
가비아나 cafe24도 있는데 도메인을 구매할수도 있는데, 구매하면 구매한 사람의 개인정보를 모두 확인할 수 있다는 보안 이슈가 있다고 한다... 가비아의 경우는 3300원을 내야 블라인드처리해주는?
cloudflare에서 Domains를 확인해보자.

여기서 도메인을 구매하고 cloudflare에서 바로 연결도 가능하다!
기본적으로 개인정보를 보호해준다.
구매할까하다가 나는 가비아에서 이전에 등록한 도메인을 이용할것이다.... 등록하게 되면 설정한 도메인과 cloudflare에서 기본적으로 제공하는 pages.dev 둘 다 접속할 수 있다. (매년 결제해야함!)
기존 도메인 사이트에서 등록하려면 시간이 꽤 걸리는데, cloudflare에서는 거의 1-2분만에 연결할 수 있다.
키워드 뜨면 잽싸게 일단 도메인 사기!!
가비아에서 네임 서버를 변경하여 관리 주체를 변경해준다.

현재 가비아로 등록되어 있는 모습



cloudflare의 설정 외에 다른 삭제하고 1-2시간 기다리면 사이트가 cloudflare를 통해 동작한다고 한다..
개발한 페이지에 해당 도메인을 설정해준다.


이후 도메인 활성화를 눌러준다.

잘 될까.. 두근두근

아직 접속은 안되는데 DNS 전파 시간이 꽤 걸린다고 하니 기다려보자.

-> 생각보다 빨리 적용되었다!
4) SEO & GEO
SEO(Search Engine Optimization) - 검색 엔진 최적화
봇이 robots.txt를 참고(방문해도 되는지 안되는지) -> sitemap.xml을 참고해서 사이트 구조 파악 -> 내 사이트 들어가서 정보를 가져감
* 참고 문서 - 어떻게 검색해야 우선순위가 높아지는지
- https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko
- https://searchadvisor.naver.com/guide/seo-basic-intro
내부요인(소스) 먼저 작업. 위 문서를 주고
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko 랑 https://searchadvisor.naver.com/guide/seo-basic-intro 첨부한 SEO 최적화 가이드에 따라서 최고로 SEO에 최적화된 사이트로 만들어줘
이런식으로 AI에게 시키면 된다.
4-1) Google Search Console 연결 > 시작하기


계속을 누르고 소유권 확인을 진행한다. cloudflare 페이지가 뜨고 권한 부여를 클릭하면 완료될것이다.

속성으로 이동을 클릭하면 구글 검색 실적 통계를 확인할 수 있는 페이지로 이동한다.


아까 SEO 문서에서 생성된 sitemap.xml 경로를 사이트맵에 추가해줄 수 있다.
- 여기 사이트에서 SEO를 체크할수도 있다.
SEO Tools, Software and Articles | SEO Site Checkup
All of the tools right at your fingertips. With one quick click, you can see how your site is doing. The dashboard offers instant access to reports, monitors, and analysis tools.
seositecheckup.com


이런것도 체크해서 AI에게 수정해달라고 적용하면 된다!
https://search.google.com/search-console/about
Google Search Console
Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다.
search.google.com
4-2) GEO(Generative Engine Optimization) : 생성형AI 엔진 최적화
- https://www.tosspayments.com/blog/articles/39461
이 문서를 주고 똑같이 AI에게 최적화해달라고 하자.
5) 바이럴 구조
- 초대 수 (Invites per User) : 사용자가 얼마나 많이 공유 / 초대하느냐
- 전환율 (Conversion Rate) : 초대를 받은 사람이 얼마나 가입 / 행동하느냐
6) 이탈방지
Userback: Your #1 User Feedback Software
Userback empowers product teams to collect, understand, and act on user feedback with unprecedented speed and clarity. Combining feedback widgets, in-app surveys, session replays, and feature portals, Userback is the ultimate user feedback software.
userback.io
여기에 등록해서 유저 피드백을 받을 수 있음

위젯 > Install에 있는 코드를 복사해서 AI에게 붙여달라고 시킨다.


이렇게 피드백 버튼이 생성된걸 확인할 수 있다.


이런식으로 피드백이 전송되는걸 확인할 수 있다.
다음주에는 결제 서비스 생성할것이니 아이디어 생각해오기..
https://www.youtube.com/@jocoding
조코딩 JoCoding
누구나 배울 수 있는 쉬운 코딩 채널을 만들어가는 조코딩입니다. 프로그래밍에 대해 아무것도 모르더라도 개발이 가능하도록 기초부터 차근차근 쉽게 설명해드립니다. 또한, 단순히 코딩 지식
www.youtube.com
'AI' 카테고리의 다른 글
| 바이브 코딩, 1인 창업가 부트캠프 (AI Product Bulider) 3주차 (0) | 2026.01.25 |
|---|---|
| 조코딩 AI Product Builder 1주차 실습 (1) | 2026.01.10 |
| n8n 검색 워크플로우를 도메인과 연결 및 동작하기 (0) | 2025.10.25 |
| 네이버 검색 API 를 추가하고 검색 기능을 서브 워크플로우로 작성하기 (1) | 2025.09.21 |
| 유튜브 자막으로 AI에게 질문하자: N8N + Pinecone으로 RAG 만들기 (0) | 2025.09.18 |