작업 리포트

[개인 사업 · 가게] 분양상담 랜딩페이지 「시티오씨엘 9단지」

분양상담 랜딩페이지 「시티오씨엘 9단지」
  • PC
  • Mobile

분양상담 랜딩페이지 「시티오씨엘 9단지」

광고로 들어온 사람이 3초 안에 알아보고 바로 전화하거나 상담을 남기는 분양상담 페이지

제작 방식
아임웹 + 하단 고정 상담 바(코드)
작업 기간
2026년 9월 29일 ~ 2026년 10월 6일
타입
분양상담 랜딩페이지 · 신규 제작
메인 컬러
#B4532A#1D1C1A#FFE3A6
폰트
Noto Sans KR
클라이언트
분양 상담 중개사무소
분양 상담 중개사무소 사이트 보러가기 ↗

사이트는 넘긴 뒤 고객이 고쳤을 수 있습니다. 넘길 때의 디자인은 아래 그림에서 볼 수 있습니다.

작업 리포트

인천 미추홀구 1,949세대 단지의 분양 상담을 맡은 중개사무소가, 네이버 광고에 걸 상담 페이지를 처음부터 새로 만들어 달라고 의뢰한 작업입니다. 현장의 공식 홈페이지와는 별개로, 공식 정보는 핵심만 요약하고 전화와 상담 신청은 의뢰인에게 바로 오는 페이지가 필요했습니다.

의뢰와 목표

목표는 전화 문의와 방문예약을 최대한 많이 받는 것이었습니다. 방문자는 광고 유입 → 핵심 확인 → 전화 또는 연락처 입력 → 방문예약 순서로 움직이고, 대부분 휴대폰으로 들어오기 때문에 모바일을 먼저 설계했습니다. 계약이 시작되기 전에 광고를 걸 수 있도록 짧은 일정으로 1차 오픈했습니다.

디자인 원칙 — 크게, 그리고 세련되게

분양 광고답게 눈에 확 들어오되 싸 보이지 않게 하는 것이 기준이었습니다.

  • 크게 — 단지명은 PC 92px, 계약 진행 배지는 36px. 전화번호는 화면 어디서든 가장 크고 굵게, 평면도는 잘리지 않게 모두 같은 높이로, 분양가는 테라코타 굵은 글씨로 타입마다 바로 보이게 했습니다.
  • 세련되게 — 색은 테라코타 · 차콜 · 금색 세 가지만 썼습니다. 강조는 한 화면에 한 곳, 금색은 '9단지'와 전화번호에만 씁니다. 테두리와 그림자는 최소화하고 넉넉한 여백과 사진을 중심에 두었습니다.

글꼴은 Noto Sans KR 한 가지로 통일하고 굵기 세 단계(900 / 700 / 500)로만 위계를 나눴습니다. 본문도 PC 20px로 키워, 휴대폰으로 광고를 보고 들어온 중장년층도 확대 없이 읽을 수 있습니다.

첫 화면에서 끝내기

첫 화면에는 세 가지만 두었습니다. 가장 먼저 단지명('시티오씨엘 9단지' 중 '9단지'만 금색), 지금 계약 중이라는 신호('선착순 동·호 지정 계약 진행 중' 배지), 그리고 공원 · 역 · 광역교통 · 학교 네 가지 장점을 아이콘 박스 한 줄로 보여 줍니다.

어디까지 스크롤해도 전화와 신청은 한 번에

아임웹 기본 기능에 없는 하단 고정 상담 바를 코드로 직접 만들었습니다.

  • PC — 바에서 이름 · 연락처를 넣고 누르면 상담 폼으로 접수됩니다.
  • 모바일 — [전화상담] [빠른상담 신청] 버튼 두 개. 누르면 바로 전화가 걸리거나 상담 폼으로 이동합니다.
  • 전화번호는 한 곳만 바꾸면 페이지 안 모든 전화번호에 함께 반영됩니다.

도면은 처음부터 큼지막하게

고객이 가장 오래 보는 평면도와 분양가는 한눈에 비교되도록 크게 기획했습니다. PC에서도 한 행에 두 타입씩만 두어 카드를 크게 보여 주고, 평면도 높이는 600px로 통일해 원본 비율 그대로 잘림 없이 보여 줍니다(누르면 원본 크기). 카드 한 장에 세대수 · 면적 · 분양가 · 타입별 상담 전화 버튼을 모두 담았습니다.

59㎡부터 110㎡까지 10개 타입을 같은 틀에 담아 스크롤만 내리면 차례로 비교되고, 가로로 긴 펜트하우스 평면도는 두 칸을 합쳐 한 행 전체 폭으로 보여 줍니다.

신청이 들어오면 바로 휴대폰으로

만들고 끝이 아니라, 의뢰인이 혼자 운영할 수 있는 상태로 넘겼습니다. 네이버 광고에서 들어온 방문자가 전화하거나 이름과 연락처 두 칸으로 빠른상담을 신청하면, 접수 즉시 의뢰인 휴대폰으로 문자 알림이 가고 관리자 화면에 명단이 쌓입니다.

  • 도메인 · 계정은 모두 의뢰인 명의
  • 사진 · 분양가 · 문구 · 번호는 의뢰인이 직접 수정
  • 다른 분양 현장에 복제해 재사용 가능
  • 개인정보 동의 문구 · 보유 기간 반영

작업하는 동안에는 피드백과 반영 내용, 시안, 관리 정보를 이음웍스 고객 페이지 한 곳에 정리해 공유했습니다.

결과

  • 짧은 일정으로 1차 오픈 — 계약 시작에 맞춰 광고를 걸 수 있게 열고, 이후 피드백을 받아 다듬었습니다.
  • 문의가 바로 의뢰인에게 — 전화 · 빠른상담 신청 · 문자 알림까지 한 흐름으로 이었습니다.
  • 직접 고치고 다시 쓰는 페이지 — 의뢰인 명의로 소유하고, 다음 현장에 복제해 쓸 수 있습니다.
  • 첫 화면에서 끝내기

    단지명, '선착순 동·호 지정 계약 진행 중' 배지, 장점 네 가지만 첫 화면에 두었습니다. 광고를 누르고 들어온 사람이 3초 안에 어떤 현장인지 알아봅니다.

  • 어디서든 전화와 신청

    아임웹 기본 기능에 없는 하단 고정 상담 바를 코드로 만들었습니다. PC는 바에서 바로 접수, 모바일은 [전화상담] [빠른상담 신청] 두 버튼입니다.

  • 큼지막한 평면도와 분양가

    10개 타입을 같은 카드 틀에 한 행 두 타입씩 크게 담았습니다. 세대수 · 면적 · 분양가 · 타입별 상담 전화 버튼이 카드 한 장에 있습니다.

제공 서비스

  • 요구사항 정리
  • 페이지 구성·문구
  • 디자인 시안
  • 아임웹 구축
  • 하단 고정 상담 바 (코드)
  • 상담 폼 · 문자 알림
  • 도메인 · SSL 연결
  • 관리 가이드
  • 오픈 후 3주 수정·보완

의뢰와 목표

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 의뢰와 목표

디자인 원칙

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 디자인 원칙

첫 화면

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 첫 화면

색 · 글꼴

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 색 · 글꼴

하단 고정 상담 바

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 하단 고정 상담 바

평면도 · 분양가

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 평면도 · 분양가 1
분양상담 랜딩페이지 「시티오씨엘 9단지」 — 평면도 · 분양가 2
분양상담 랜딩페이지 「시티오씨엘 9단지」 — 평면도 · 분양가 3

상담 흐름 · 운영

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 상담 흐름 · 운영

진행 공유

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 진행 공유

결과

분양상담 랜딩페이지 「시티오씨엘 9단지」 — 결과