홈페이지 제작은 기획, 디자인, 코딩, 오픈 네 단계로 진행됩니다. 제작사마다 단계 이름과 기간이 다르지만 순서는 같고, 광고를 돌릴 홈페이지라면 각 단계에서 광고주가 정해 줘야 하는 것이 있습니다. 기획 단계에서 "이 홈페이지에서 사람이 할 행동 하나"(전화·문의 폼·예약·구매)를 정하지 않으면 디자인과 코딩이 끝난 뒤 광고를 붙여도 문의가 나오지 않고, 오픈 단계에서 도메인·호스팅·관리자 권한을 넘겨받지 않으면 제작사를 바꿀 때 홈페이지를 잃습니다.
1단계 기획 — 광고주가 정해 줘야 하는 것
기획은 홈페이지의 뼈대를 세우는 단계로, 여기서 충분히 이야기하지 않으면 디자인·코딩 단계에서 되돌리는 비용이 가장 큽니다. 제작사가 묻기 전에 광고주가 정해 둘 것은 다음입니다.
- 목표 행동 하나: 방문자가 하길 바라는 행동(전화, 문의 폼, 예약, 구매)을 하나로 정합니다. 페이지의 첫 화면과 버튼이 이 행동에 맞춰집니다.
- 첫 화면 한 문장: 무엇을 하는 곳이고 누구를 위한 곳인지 한 문장으로 씁니다. 광고 검색어와 첫 화면이 같은 말을 해야 광고 클릭이 문의로 이어집니다.
- 페이지 목록: 메인, 서비스·상품별 페이지, 회사소개, 문의. 광고 랜딩으로 쓸 페이지는 따로 표시합니다.
- 문의 수단: 전화번호, 폼 항목(이름·연락처·내용 정도로 짧게), 카카오톡 채널 중 무엇을 쓸지.
- 참고 사이트 2~3곳: 좋다고 느낀 점을 "첫 화면이 바로 보인다", "메뉴가 적다"처럼 이유와 함께 적습니다.
2단계 디자인 — 모바일 화면부터 본다
디자인은 기획을 바탕으로 기업이 전하려는 것을 화면으로 보여 주는 단계입니다. 이미지, 배열, 글꼴, 색을 정하되 "예쁜가"보다 먼저 볼 것이 있습니다.
- 모바일 시안부터 확인합니다. 광고 클릭의 대부분이 모바일에서 들어오므로, PC 시안이 좋아도 모바일에서 첫 화면에 전화 버튼과 한 문장이 안 보이면 다시 그립니다.
- 움직임과 효과는 적게 둡니다. 화면에서 구현되는 효과에는 한계가 있고, 큰 이미지와 애니메이션은 로딩을 늦춰 광고 품질과 전환에 불리합니다. 효과는 코딩이 아니라 디자인 단계에서 넣을지 말지를 정합니다.
- 글은 실제 문장으로 넣어 봅니다. 가짜 글로 채운 시안은 실제 문장을 넣으면 줄이 넘치고 버튼이 밀립니다.
3단계 코딩 — 반응형과 속도
코딩은 기획·디자인에서 사람의 말로 정한 것을 브라우저가 읽는 언어(HTML·CSS·JavaScript)로 옮기는 단계입니다. HTML이 틀을, CSS가 모양을, JavaScript가 동작을 맡습니다. 광고주가 확인할 것은 코드가 아니라 결과입니다.
- 반응형: 휴대폰·태블릿·PC에서 같은 주소로 열리고 화면 폭에 맞게 배치가 바뀌는지. 모바일 전용 주소를 따로 두는 방식은 광고 랜딩 관리가 두 배가 됩니다.
- 속도: 모바일에서 첫 화면이 3초 안에 뜨는지. 구글의 코어 웹 바이탈(LCP·INP·CLS)은 검색 노출과 광고 랜딩 품질에 쓰이는 기준이라 오픈 전에 측정합니다.
- 전화 버튼·폼 동작: 모바일에서 전화번호를 누르면 바로 걸리는지(tel: 링크), 폼을 보내면 완료 안내가 뜨고 메일·알림이 오는지.
- 검색 기본: 페이지마다 제목(title)과 설명(description)이 다른지, 이미지에 대체 텍스트가 있는지, 모바일에서 같은 내용이 열리는지.
4단계 오픈 — 넘겨받을 것과 설치할 것
도메인을 연결하고 서버에 올려 사용자가 접근할 수 있게 하는 단계입니다. 여기서 끝나는 것이 아니라 광고를 위한 준비가 같이 끝나야 합니다.
- 넘겨받을 것: 도메인 등록 계정(광고주 명의), 호스팅 계정, 홈페이지 관리자 계정, 소스 파일과 데이터베이스 백업, 사용한 글꼴·이미지의 사용 권한. 제작사 명의로 도메인을 등록하면 계약이 끝났을 때 주소를 가져오지 못합니다.
- 설치할 것: GA4, 네이버 프리미엄 로그분석, 카카오 픽셀, 메타 픽셀 같은 측정 태그와 전화·폼 전환 이벤트. 오픈 뒤에 넣으면 광고 첫 달 데이터가 비고, 구글 애즈는 랜딩 페이지 환경(속도·모바일 대응·투명성)을 광고 품질평가에 반영합니다.
- 사업자 정보: 상호, 대표자, 사업자등록번호, 주소, 전화, 개인정보처리방침. 광고 매체 심사와 폼 수집 요건입니다.
- 사이트맵·검색 등록: 네이버 서치어드바이저와 구글 서치콘솔에 소유 확인을 하고 사이트맵을 제출합니다.
흔히 틀리는 것
- 기획 없이 "참고 사이트처럼 예쁘게"로 시작하는 것. 목표 행동과 첫 화면 문장이 없으면 디자인이 몇 번씩 뒤집힙니다.
- PC 시안만 보고 확정하는 것. 광고 클릭은 대부분 모바일입니다.
- 도메인을 제작사 명의로 등록하는 것. 홈페이지 주소를 광고주가 소유하지 못합니다.
- 오픈 뒤에 측정 태그를 넣는 것. 광고 첫 달 숫자가 없어 둘째 달에 판단할 근거가 없습니다.
- 폼 항목을 열 개 넘게 두는 것. 항목이 늘수록 제출이 줄고, 광고비는 같습니다.
계정에서 할 일
- 제작 계약 전에 목표 행동 하나, 첫 화면 한 문장, 페이지 목록, 문의 수단을 한 장으로 적어 제작사에 줍니다.
- 디자인 시안은 모바일 화면부터 확인하고, 첫 화면에 한 문장과 전화·문의 버튼이 보이는지 봅니다.
- 오픈 전에 모바일 속도, 전화 버튼, 폼 완료 안내, 페이지별 title·description을 직접 눌러 확인합니다.
- 도메인·호스팅·관리자 계정과 소스 백업을 광고주 명의로 넘겨받았는지 목록으로 확인합니다.
- 오픈과 동시에 GA4·네이버 로그분석·픽셀과 전환 이벤트를 설치하고, 서치어드바이저·서치콘솔에 등록합니다.
광고 랜딩으로 쓸 페이지가 갖춰야 할 12가지는 광고 랜딩페이지 체크리스트에, 속도 기준과 고치는 순서는 랜딩페이지 속도가 광고 성과에 미치는 영향에, 폼 항목 수는 문의 폼 설계에 있습니다.
이 글은 매체 공식 도움말과 공지를 바탕으로 썼습니다. 매체 정책은 바뀔 수 있으니 집행 전 해당 매체 공지를 한 번 더 확인하세요.
같은 주제의 글
광고로 들어온 사람이 문의를 끝까지 보내게 하는 폼의 구조 — 항목 3개, 필수 입력 최소화, 예산·희망 시간 같은 선택 항목의 쓰임, 개인정보 동의 처리, 완료 페이지와 전환 태그, 접수 후 응대 약속 — 를 정리한 가이드입니다.
홈페이지·랜딩 모바일 광고 랜딩 만들기 — 전화 버튼, 지도·길찾기, 고정 하단 바와 전환 추적광고 클릭의 대부분은 모바일이고 모바일 방문자가 원하는 것은 전화와 위치입니다. 전화 버튼을 tel 링크로 만드는 법, 지도·길찾기 연결, 하단 고정 바 구성, 전화 클릭 전환 추적과 PC에서의 처리까지 정리한 가이드입니다.
홈페이지·랜딩 광고 랜딩페이지 체크리스트 — 클릭은 있는데 문의가 없을 때 먼저 볼 12가지광고 클릭이 문의로 이어지지 않을 때 광고보다 먼저 봐야 하는 것은 랜딩페이지입니다. 검색어와 첫 화면의 일치, 문의 수단, 신뢰 요소, 속도, 모바일, 측정까지 12개 항목으로 점검하는 가이드입니다.