Case 05of 05

All work

Marketing Website / Landing Page

전환 측정을 고려한
마케팅 사이트와 랜딩페이지 구축

광고 클릭 이후 사용자가 필요한 정보를 확인하고 문의까지 이어질 수 있도록 페이지와 CTA를 구성하고, 상담 전에 필요한 고객 정보를 파악할 수 있도록 질문 구조도 함께 설계했습니다.

Role
Information Architecture · Lead Form Planning · Development · Measurement
Ownership
100% — Visual Design excluded
Tools
Astro · HTML · CSS · JavaScript · GA4 · GTM
광고 유입 → 랜딩페이지 → CTA / 문의 → 질문 설계 → 전환 측정으로 이어지는 랜딩페이지 구축 흐름 인포그래픽

Context

랜딩페이지는
광고 클릭 이후의 경험입니다.

광고가 클릭을 만들어도 사용자가 랜딩페이지에서 필요한 정보를 찾지 못하거나 문의 과정이 복잡하면 실제 상담으로 이어지기 어렵습니다.

광고 유입 이후의 경험까지 마케팅의 일부라고 보고 랜딩페이지와 문의 구조를 함께 설계했습니다.

Problem

단순히 연락처를 받는 문의 폼만으로는 상담 단계에서 고객의 상황을 충분히 파악하기 어려웠습니다.

반대로 처음부터 너무 많은 정보를 요구하면 사용자가 문의 과정에서 이탈할 가능성이 있기 때문에, 어떤 질문을 어느 단계에서 받아야 하는지를 함께 고민해야 했습니다.

Information Architecture

사용자가 광고를 클릭한 이후 필요한 정보를 어떤 순서로 확인해야 하는지를 기준으로 랜딩페이지의 정보 구조를 구성했습니다.

서비스 설명, 신뢰 요소, 문의 CTA가 사용자의 의사결정 흐름을 방해하지 않도록 배치하는 방향으로 페이지 구조를 설계했습니다.

시각 디자인(Visual Design)은 별도 작업 영역으로, 이 프로젝트의 기여 범위에 포함하지 않습니다.

User Journey, 사용자 유입부터 리드 확보까지의 흐름 — 01 Ad Click(광고를 통한 잠재 고객 유입: 광고 노출·클릭) → 02 Landing(랜딩페이지 방문 및 콘텐츠 확인: 방문자·이탈률) → 03 Information(서비스 정보 확인 및 문의 내용 입력: 열람·입력 진행률) → 04 CTA(상담 신청 및 전환 유도: 상담 요청 수) → 05 Lead(리드 확보 및 DB 저장: 전환 완료)
Visual A — 광고 클릭 이후의 사용자 흐름

Lead Form

어떤 질문을 받아야
다음 상담이 더 정확해질까?

상담 담당자가 고객의 상황을 사전에 이해하는 데 실제로 필요한 정보가 무엇인지 검토하고, 불필요하게 많은 입력을 요구하지 않는 범위에서 질문 구조를 설계했습니다.

단순한 연락처 수집이 아니라 이후 상담에 도움이 되는 리드 정보를 확보하는 것을 목표로 했습니다.

Lead Form Structure, 상담 정확도를 높이기 위한 질문 구조 — 01 고객 상황(도입 검토 중·비교 중·운영 중·기타), 02 관심 영역(마케팅·세일즈·고객 관리·기타), 03 추가 상담 정보(자유 입력, 선택), 상담 요청 버튼. 오른쪽에 설계 원칙 세 가지(사전 이해, 불필요한 입력 최소화, 상담 정확도 향상)와 제출 정보가 상담 준비 정보로 정리되는 예시
Visual B — 문의 Form 의 질문 구조

CTA & Measurement

전화, 카카오톡, 문의 Form 등 사용자가 실제 상담으로 이동하는 CTA를 페이지 흐름 안에 배치했습니다.

이러한 행동을 이후 GA4·GTM 등을 통해 측정할 수 있도록 전환 측정 구조도 함께 고려했습니다.

CTA & Measurement, CTA 전환 측정 흐름 — 01 Landing(랜딩페이지 진입: 유입) → 02 CTA(전화·카카오톡·문의폼: 버튼 클릭) → 03 GTM Event(클릭 이벤트 태깅: 이벤트 발생) → 04 GA4(전환 데이터 수집: 전환 기록) → 05 Conversion Review(실제 상담 전환 확인: 결과 검토)
Visual C — CTA 행동의 측정 흐름

Implementation

캠페인 성격과 운영 목적에 따라 Astro 또는 일반 HTML/CSS/JavaScript 기반으로 페이지를 구현했습니다.

페이지 제작과 측정 환경을 별개의 작업으로 보지 않고, 광고 유입 이후 실제 행동을 확인할 수 있도록 함께 구성했습니다.

Outcome

광고 → 랜딩페이지 → 문의 → 상담으로 이어지는 과정을 하나의 전환 흐름으로 바라보고 페이지와 문의 구조를 설계할 수 있는 기반을 만들었습니다.

Role & Ownership

Information Architecture · Lead Form Planning · Development · Measurement

100% — Visual Design excluded

Tools

  • Astro
  • HTML
  • CSS
  • JavaScript
  • GA4
  • GTM