BackUI / UX 개선 및 운영
RxJS / Twig / JavaScript / jQuery

한국미스미데이터 기반
UI / UX 개선과 운영 의사결정 체계

GA4 이벤트 택소노미히트맵 분석을 결합해, 감으로 진행되던 UI 개선을 데이터 기반 의사결정 체계로 바꾼 운영기입니다.

Company
한국미스미 (파견)
Timeline
2023.04 ~ 2024.04 (13개월)
Role
Frontend Engineer GA 설계 · UI 개선 · A/B 검증
Tech Stack
GA4 · BigQuery RxJS · Twig · jQuery · PHP
핵심 설계 전략

의사결정 권한을 팀에 돌려주는 데이터 체계

개발자가 매번 데이터를 뽑아주던 구조에서, 마케팅·기획팀이 직접 데이터를 조회하고 가설을 검증하는 구조로 전환했습니다.

GA4 이벤트 택소노미 설계

PV·장바구니·주문·검색 등 핵심 이벤트의 dataLayer 스키마를 표준화해, 페이지·디바이스를 가로질러 일관된 분석이 가능하도록 만들었습니다.

Why This Way?

이벤트 이름과 파라미터가 흩어져 있으면 같은 지표도 다르게 측정됩니다. 택소노미를 먼저 잡아 분석 신뢰도를 확보했습니다.

비개발자 자율 분석 환경

GA4 Explore와 BigQuery 쿼리 템플릿을 제공해, 마케팅·기획팀이 직접 데이터를 조회하는 의사결정 체계를 구축했습니다.

Why This Way?

병목이 되는 분석 요청 큐를 줄이고, 가설 검증 사이클을 짧게 만들었습니다.

Heatmap·Scroll Depth 기반 개선

CTA 가시성 부족·콘텐츠 이탈 구간을 발견하고 UI 리뉴얼을 진행해 체류시간 18%↑, 이탈률 11%↓를 달성했습니다.

개인화 추천 배너 도입

외부 추천 솔루션 API를 페이지별 컨텍스트에 맞춰 연동해, 재방문율 15%↑, 구매 전환율 8%↑를 확인했습니다.

GA4 트래킹 적용 화면

페이지마다 무엇을 측정하는지 명시

메인부터 플로팅 바까지, 각 영역에 측정 의도를 명시해 분석가가 별도 설명 없이도 데이터를 읽을 수 있게 했습니다.

GA4 — 메인 페이지
메인
GA4 — 카테고리
카테고리
GA4 — 말단 카테고리
말단 카테고리
GA4 — 상품 상세
상품 상세
GA4 — 검색·장바구니
검색·장바구니
GA4 — 비교 결과
비교 결과
GA4 — 플로팅 바
플로팅 바
AS-IS / TO-BE

데이터로 검증된 개선 결과

AS-IS
AS-IS 화면

정보 우선순위가 흐려진 화면

핵심 CTA가 시각적으로 묻혀 있고, 콘텐츠 길이만 길었던 기존 화면. 이탈률·체류시간 분석에서 병목이 명확히 드러났습니다.

TO-BE
TO-BE 화면

CTA 가시성과 흐름을 재정의

데이터에서 발견한 병목 지점에 정보 위계를 다시 정의하고, 메인 배너·헤더·푸터까지 일관된 톤으로 정렬했습니다.