웹 인게이지먼트란 무엇인가? 전환을 이끄는 팝업과 바에 대한 초보자 가이드
웹 인게이지먼트가 무엇인지부터 시작하는 방법까지, 사전 지식이 전혀 없어도 누구나 따라올 수 있도록 설명합니다. 팝업과 고정 바의 활용 사례, 디자인 팁, 그리고 히트맵 및 A/B 테스트와 결합하는 방법까지 다룹니다.
54 min readweb-engagementpopupcrohow-tobeginners
블로그
HeatMapX의 CRO 개선 노트 · 벤치마크 · 사례 모음.
친구를 초대하면 둘 다 한 달 무료 — HeatMapX 추천 캠페인 완전 가이드
HeatMapX 추천 캠페인이 양쪽 모두에게 어떻게 작동하는지 정리했습니다. 코드를 건네는 방법, 입력하는 위치(결제 화면이 아닌 대시보드), 첫 달 무료가 적용되는 조건, 크레딧이 지급되는 방식, 자주 묻는 질문까지 이 글 하나로 확인할 수 있습니다.
6 min readreferralcampaignguidebilling행동 데이터를 밖으로 가져갈 수 있는가 — 히트맵&A/B 테스트 19개 제품의 익스포트/API 개방도 비교
히트맵/세션 녹화 계열 10개 제품과 A/B 테스트 계열 9개 제품을 대상으로 공개 API와 데이터 익스포트 범위·유료 장벽·데이터 세분성을 종합적으로 정리했다. "자사 데이터를 언제든 외부로 꺼낼 수 있는가"라는 관점에서 각 기업을 3단계로 분류한 리서치 리포트.
23 min readresearchdata-portabilityapiexportheatmapab-testingcroMCP로 히트맵을 Claude에 연결하기 (1분, 명령어 한 줄)
HeatMapX MCP 서버에 Claude Code를 연결하는 방법을 단계별로 설명합니다. API 키 발급부터 명령어 한 줄로 연결하기, '스크롤 도달률이 가장 낮은 페이지는 어디야?'나 'A/B 테스트에서 누가 이기고 있어?' 같은 활용 예시, 연결이 안 될 때 확인할 점까지 다룹니다.
7 min readhow-tomcpclaudeaiintegration워드프레스 사이트에 히트맵 설치하는 방법 (코드 한 줄, 3분)
워드프레스에 히트맵 추적 기능을 추가하는 세 가지 방법 — 테마 헤더 설정, 코드 삽입 플러그인, 또는 header.php 직접 수정 — 중 플러그인이 필요 없는 가장 간단한 한 줄짜리 방법부터 소개합니다. 실제로 작동하는지 확인하는 방법도 포함되어 있습니다.
7 min readhow-towordpressheatmapinstallationShopify 스토어에 히트맵을 설치하는 방법 (앱 설치 불필요, 코드 한 줄이면 끝)
Shopify 스토어에 히트맵 추적을 추가하는 방법 — 앱 설치 없이 theme.liquid에 코드 한 줄만 넣으면 됩니다. 편집 전 테마 백업하기, 결제 페이지가 추적되지 않는 이유, 실제로 작동하는지 확인하는 방법까지 다룹니다.
7 min readhow-toshopifyecommerceheatmapinstallation구글 태그 매니저(GTM)로 히트맵 설치하기 (코드 수정 없이 5분 완성)
구글 태그 매니저(GTM)를 이용해 HeatMapX 히트맵 추적을 설치하는 방법을 단계별로 안내합니다. 커스텀 HTML 태그와 All Pages 트리거로 진행하는 5단계, 태그가 작동하지 않을 때 확인할 체크리스트, Claude Code에게 설정을 맡기는 방법까지 함께 담았습니다.
7 min readhow-togtmgoogle-tag-managerheatmapinstallationA/B 테스트란? 초보자를 위해 "하는 방법"을 그림으로 알기 쉽게 설명
A/B 테스트의 의미부터 시작하는 방법까지, 전문 지식이 없어도 이해할 수 있도록 설명합니다. 자주 시도하는 요소, 5단계 진행 방법, 초보자가 흔히 걸려 넘어지는 포인트, 히트맵과의 조합까지 다룹니다.
6 min readab-testingcrohow-tobeginnersVercel 함수를 도쿄 리전에 고정해 체감 속도를 개선한 이야기 — 태평양 왕복 문제 해결
대시보드 표시에 몇 초씩 걸리는 문제를 조사한 결과, 원인은 Vercel 함수(미국)와 Supabase(도쿄) 간의 왕복이었습니다. 리전 고정과 쿼리 병렬화로 체감 속도를 크게 개선한 기록입니다.
5 min readengineeringnextjsperformancevercelA/B 테스트의 "노출 비율"과 "A/B 분배"는 무엇이 다를까? 올바른 설계 방법
A/B 테스트 설정에서 헷갈리기 쉬운 "노출 비율(실험에 포함할 비율)"과 "A/B 분배"의 차이를 설명합니다. 이 둘을 구분해서 생각하면 리스크를 줄이면서 올바르게 검증할 수 있습니다.
5 min readab-testingcrohow-to외부 사이트를 안전하게 미리보기하기 — 프록시 + 새니타이즈 + iframe sandbox 구현
A/B 테스트의 "변경 후 미리보기"에서 사용자의 외부 사이트를 자사 오리진에서 안전하게 표시하려면 어떻게 해야 할까요. SSRF 방어·외부 JS 제거·CSP·iframe sandbox의 조합과, sandbox에서 실제로 겪었던 함정을 공유합니다.
6 min readengineeringsecuritynextjsiframe히트맵과 A/B 테스트의 차이와 활용법｜무엇부터 시작해야 할까?
히트맵과 A/B 테스트는 무엇이 다르고, 어떻게 나누어 써야 할까요? "문제를 찾는" 히트맵과 "해결 방법을 검증하는" A/B 테스트의 역할 차이와 올바른 순서를 알기 쉽게 설명합니다.
4 min readheatmapab-testingcrocomparison무료로 시작하는 A/B 테스트｜태그 한 줄, 노코드로 오늘부터
A/B 테스트는 유료 도구 없이는 시작할 수 없다고 생각하시나요? 태그 한 줄만 붙이면 되고, 코드 작성도, 신용카드 등록도 필요 없는 노코드 A/B 테스트 시작 방법을 소개합니다.
4 min readab-testingfreenocodecroA/B 테스트 배분 설계를 업계 표준에 맞춘 이야기 — "노출 비율"과 "A/B 배분"을 분리하다
A/B 테스트 기능을 설계할 때, "실험에 포함할 비율(노출 비율)"과 "A/B 배분"을 하나로 합칠 것인가, 분리할 것인가. 저희가 업계 표준을 따라 이 둘을 분리하기로 한 이유와 설계상의 판단을 공유합니다.
4 min readengineeringab-testingproduct-designA/B 테스트 툴 경쟁 분석 2026 — 8개 서비스의 기능과 가격대를 횡단 비교
Optimizely부터 PostHog까지, 주요 A/B 테스트 툴 8개 서비스의 기능·가격대·과금 모델·기술 방식을 2026년 6월 시점 기준으로 횡단 조사했습니다. 엔터프라이즈 계층과 개발자 퍼스트 계층의 양극화, 잇따른 업계 재편, WordPress 대응 실태를 정리한 리서치 리포트입니다.
24 min readresearchab-testingcropricingmarket-analysisNext.js App Router로 SaaS 대시보드를 사이드바 레이아웃으로 마이그레이션하기
단일 페이지 덤프에서 5페이지 사이드바 레이아웃으로. sticky 사이드바 공존, 공유 CSS Grid 템플릿, Coming Soon 패턴, 그리고 LP와 대시보드가 공유하는 단일 i18n 딕셔너리 — Claude Code로 2시간 만에 구축했습니다.
26 min readengineeringnextjsapp-routerclaude-codeClaude Code로 SaaS 대시보드를 하루 만에 재구축 — Tailwind v4 + CSS Grid 테이블형 레이아웃
Claude Code를 활용해 HeatMapX 대시보드를 하루 만에 완전히 재구축한 과정 — Tailwind v4 다크 모드, CSS Grid 테이블 정렬의 함정, 그리고 16번의 디자인 반복이 실제로 어떤 모습인지를 다룹니다.
22 min readengineeringtailwindcss-griddark-modeclaude-code