워드프레스 랜딩페이지 만들기: 빌더 없이 블록 테마로

워드프레스 랜딩페이지 만들기는 생각보다 단순합니다. 페이지 하나에 목표 하나를 정하고, 머리말과 바닥글을 뺀 빈 템플릿을 고른 뒤, 블록 테마 안에서 재사용 가능한 패턴으로 조립하면 됩니다. 깔끔한 첫 버전은 반나절이면 충분합니다. 전환을 가르는 것은 도구가 아니라, 페이지에서 무엇을 빼느냐입니다.

이 글은 실무자가 실제로 밟는 순서를 따릅니다. 목표, 템플릿, 섹션, 폼, 속도 예산, 발행 전 점검 순서입니다.

랜딩페이지는 다른 페이지와 무엇이 다른가요?

랜딩페이지에는 할 일이 하나뿐입니다. 방문자는 광고, 이메일, 검색 결과를 보고 들어오고, 페이지는 정확히 한 가지 행동을 요청합니다. 가입, 상담 예약, 파일 다운로드, 구매 중 하나입니다.

그 밖의 모든 요소는 방해물입니다. 주 메뉴, 사이드바, 블로그 목록, 링크가 스무 개쯤 달린 바닥글이 여기에 해당합니다. 일반 페이지에서는 이런 요소가 탐색을 돕지만, 랜딩페이지에서는 방문자를 밖으로 빠져나가게 하는 출구가 됩니다.

알아 두면 좋은 기준도 있습니다. Unbounce의 전환율 벤치마크 보고서는 업종을 가리지 않고 랜딩페이지 전환율 중앙값을 6.6%로 제시합니다. 이것은 목표가 아니라 점검용 기준선으로 보세요. 2% 아래라면 버튼 색보다 제안, 속도, 폼에 문제가 있을 가능성이 큽니다.

편집기를 열기 전에 목표를 한 문장으로 적어 보세요. 예를 들어 "3월 뉴스레터를 받은 방문자가 20분짜리 진단 상담을 예약한다"처럼 쓸 수 있어야 합니다. 이 문장이 나오지 않는다면 아직 만들 준비가 된 것이 아닙니다.

어떤 도구로 만들어야 할까요?

선택지는 네 가지이고, 각각 맞는 프로젝트가 다릅니다.

블록 테마와 기본 블록 편집기는 가장 가볍습니다. 깔끔한 마크업을 얻고, 추가 의존성이 없으며, 다음 고객 사이트에도 쓸 수 있는 패턴을 만들 수 있습니다. 대신 레이아웃 결정을 직접 더 많이 내려야 합니다. 시각적 빌더와 비교하고 싶다면 Gutenberg와 Elementor 비교에서 수치를 확인할 수 있습니다.

페이지 빌더는 시각적 제어와 템플릿 라이브러리를 줍니다. 그 대가로 출력물이 무거워지고 플러그인에 의존하게 됩니다. Divi가 오래된 예시이며, 많은 페이지를 만들고 익숙한 도구 하나를 쓰고 싶은 에이전시에 어울립니다.

AI 사이트 생성기는 프롬프트 하나로 페이지 전체의 뼈대를 만듭니다. 10Web은 워드프레스 안에서 이 일을 하며, 결과물은 출발점으로 쓸 만합니다. 다만 문구를 고치고 구조를 다듬는 작업은 남습니다. 어디까지 믿을 수 있는지는 워드프레스에서 AI 활용하기에서 다룹니다.

호스팅형 랜딩페이지 도구는 워드프레스 바깥에 있습니다. Webflow가 그런 예이며, 시각적 제어가 강하고 자체 호스팅을 제공합니다. 페이지가 워드프레스 사이트와 따로 있다면 비용을 치를 가치가 있습니다. 같은 테마, 같은 분석 도구, 같은 도메인 구조를 써야 한다면 건너뛰세요.

이 글의 나머지 부분은 기본 편집기를 기준으로 합니다. 가장 많이 배우고 비용이 가장 적게 드는 방법이기 때문입니다. 단계는 어떤 빌더에도 옮겨 쓸 수 있습니다.

페이지를 설정하고 군더더기를 걷어내는 방법은?

페이지 메뉴에서 새 페이지를 추가하세요. 제안 내용과 맞는 평이한 제목을 쓰고 짧은 슬러그를 지정합니다. /audit가 /landing-page-march-v2보다 낫습니다.

이제 템플릿을 다룹니다. 블록 테마에서는 페이지마다 템플릿을 지정할 수 있고, 랜딩페이지에는 머리말, 바닥글, 제목 블록이 없는 템플릿이 맞습니다. 많은 블록 테마가 "빈 페이지" 또는 "제목 없는 페이지" 템플릿을 기본으로 제공합니다. 없다면 사이트 편집기에서 템플릿으로 가서 맞춤 템플릿을 추가하고, 본문 콘텐츠 블록 하나로 구성하세요.

이 템플릿 하나가 이 프로젝트에서 가장 쓸모 있는 결과물이 될 것입니다. "Landing"이라는 이름을 붙이고 사이트의 모든 캠페인 페이지에 재사용하세요.

theme.json의 레이아웃 너비도 확인하세요. 랜딩페이지는 글을 좁은 열에 두고, 히어로와 근거 섹션에서만 넓은 블록을 쓸 때 가장 잘 읽힙니다. 테마에 콘텐츠 너비와 넓은 너비가 모두 있다면 목적에 맞게 함께 쓰세요. 글은 좁은 열에, 이미지와 열 구성은 넓은 영역에 둡니다.

여백 주석: 여기서 설명한 템플릿 지정 방식은 워드프레스 6.5 이상에서 동작합니다. 이전 블록 테마에서는 다른 메뉴에 있습니다.

페이지에 꼭 필요한 섹션은 무엇인가요?

대부분의 템플릿이 제안하는 것보다 적습니다. 행동 하나를 요청하는 페이지에는 짧은 순서가 필요하고, 각 섹션은 방문자가 가진 질문 하나에 답합니다.

다음 순서로 만들고, 재사용할 수 있도록 패턴으로 저장하세요.

• 약속과 보조 문장, 버튼을 담은 히어로

• 가까운 위치의 근거: 고객 후기, 숫자, 알아볼 수 있는 고객 작업

• 결과 중심으로 쓴 제안 세 가지

• 폼 또는 두 번째 버튼

• 가장 자주 듣는 반론 두 가지에 답하는 짧은 블록

히어로에는 Cover 또는 Group 블록을 쓰고, 제목, 문단 하나, 버튼 블록을 넣습니다. 헤드라인은 처음 보는 사람이 3초 안에 읽을 수 있는 약속이어야 합니다. 무엇인지 말하고, 결과를 말하세요. 두 번 읽어야 이해되는 재치는 피합니다.

버튼 문구는 행동 그 자체로 씁니다. "진단 상담 예약", "체크리스트 받기"처럼요. "제출"처럼 일반적인 문구는 헤드라인이 만든 맥락을 날려 버립니다.

AI 초안 도구를 쓴다면 첫 버전 문구와 헤드라인 변형에만 쓰고, 모든 줄을 직접 읽으세요. AI는 없는 근거를 만들어 냅니다. 생성된 후기나 통계는 확인하기 전에는 절대 페이지에 올리지 마세요. 랜딩페이지에 있는 가짜 인용문은 신뢰를 가장 빨리 잃는 방법입니다.

섹션이 잘 작동하면 선택한 뒤 블록 메뉴에서 "패턴 만들기"를 누르세요. 다음 캠페인에서는 처음부터 다시 만들지 않고 10분 만에 내 패턴으로 페이지를 조립할 수 있습니다.

폼은 어떻게 만들어야 할까요?

워드프레스 코어에는 폼 블록이 없습니다. 그래서 여기가 플러그인이 필요한 유일한 지점입니다. 유지보수가 잘 되는 폼 플러그인이면 충분합니다. 더 중요한 것은 폼의 모양입니다.

후속 연락에 꼭 필요한 정보만 요청하세요. 뉴스레터나 다운로드라면 이메일 주소면 충분합니다. 상담 예약이라면 이름과 질문 하나 정도가 최대입니다. 입력란이 하나 늘 때마다 완료율은 떨어지고, 나머지는 첫 연락 후에 물어볼 수 있습니다.

폼은 결정이 내려지는 자리에 두세요. 짧은 페이지라면 제안 바로 아래가 맞습니다. 긴 페이지라면 근거 섹션 뒤에 버튼을 반복하고 같은 폼으로 연결하세요.

그다음 사람들이 잊기 쉬운 부분을 설정합니다. 감사 화면입니다. 짧은 확인 페이지로 보내거나 인라인 메시지를 보여 주고, 다음에 무엇이 일어나는지와 언제 일어나는지를 알려 주세요. 분석 이벤트도 여기에 넣어서 전환이 클릭이 아니라 확인 시점에 집계되게 하세요.

마지막으로 휴대폰에서 실제 주소를 넣어 폼을 테스트하고 이메일이 도착하는지 확인하세요. 폼이 고장 난 랜딩페이지는 광고 예산을 쓰고도 아무것도 돌려주지 않으니, 페이지가 없는 것보다 나쁩니다.

페이지는 얼마나 빨라야 할까요?

사이트의 다른 페이지보다 빨라야 합니다. 광고로 들어온 방문자는 아직 사이트에 애착이 없고, 첫 화면이 느리면 헤드라인을 읽기도 전에 방문이 끝납니다.

Google의 최대 콘텐츠 페인트(LCP) 가이드는 2.5초 이하를 좋음으로 봅니다. 랜딩페이지에서 가장 큰 요소는 보통 히어로 이미지나 헤드라인 블록이므로, 그곳부터 살펴보세요.

우선순위가 높은 순서로 짧은 점검 목록입니다.

• 히어로 이미지를 압축하고 WebP로 제공하며, 실제 표시 너비에 맞춥니다.

• 페이지의 첫 이미지는 지연 로딩하지 마세요. 코어는 첫 화면에 보이는 이미지에 이를 피하지만, 특히 Cover 블록이 있다면 렌더링된 HTML에서 직접 확인하세요.

• 폰트는 한두 개만 직접 호스팅하고 쓰지 않는 굵기는 제거하세요. 가변 폰트 하나면 여러 파일을 대체할 수 있습니다.

• 스크립트는 필요한 곳에서만 불러오세요. 모든 페이지에서 로드되는 폼 플러그인은 폼이 있는 페이지로만 제한합니다.

• 첫 화면에는 슬라이더, 자동 재생 영상, 무거운 애니메이션을 두지 마세요.

적용 전후로 실제 URL을 모바일 설정의 PageSpeed Insights로 측정하세요. 방문자가 보는 그대로, 캐시를 켠 상태에서 측정하는 것이 중요합니다. 더 넓은 개선 방법은 워드프레스 사이트 속도 높이기에 영향도 순으로 정리되어 있고, 워드프레스 성능 현장 점검에서는 수치를 읽는 법을 보여 줍니다.

모바일과 독자의 언어에서도 잘 작동하나요?

광고와 이메일 트래픽은 대부분 휴대폰에서 들어오니, 좁은 화면을 먼저 설계하고 넓은 화면은 그다음에 확인하세요. 실제 기기에서 페이지를 열어 보세요. 버튼 크기, 터치 대상 사이의 간격, 각 입력란에 맞는 키보드가 뜨는지 확인합니다.

독자 중 일부가 오른쪽에서 왼쪽으로 읽는다면 아랍어나 히브리어 독자를 위해 미러 레이아웃에서도 읽어 보세요. 히어로, 버튼, 폼이 오른쪽에서 흐르는 것을 기대합니다. 올바른 RTL 스타일시트를 가진 블록 테마가 대부분을 처리하지만, 간격, 아이콘 위치, 인용문 스타일은 미러 화면에서 따로 확인해야 합니다.

글꼴은 대체 글꼴이 아니라 실제 아랍어나 히브리어 글리프가 있는 서체를 고르세요. 영어에서는 세련되어 보여도 아랍어에서 어긋나는 페이지는, 제안이 그 독자를 위해 쓰이지 않았다는 신호를 보냅니다.

두 언어를 운영한다면 각각 자기 문구를 가진 별도의 랜딩페이지를 만드세요. 헤드라인을 단어 대 단어로 옮기지 마세요. 한 언어에서 통하는 약속이 다른 언어에서는 다른 모양이 필요한 경우가 많습니다.

발행 전에 무엇을 확인해야 할까요?

실제 공개 페이지를 로그아웃 상태의 시크릿 창에서 열어 아래 목록을 점검하세요.

• 페이지의 목표는 하나이고, 기본 버튼은 하나이며 최대 두 번 반복됩니다.

• 머리말, 바닥글, 사이드바가 모두 사라졌습니다.

• 제목, 메타 설명, 소셜 이미지가 설정되어 있고, 페이지로 보내는 광고 문구와 맞습니다.

• 폼이 제출되고, 감사 화면이 나타나며, 전환이 기록됩니다.

• 모바일 속도 테스트를 통과하고, 너비 360픽셀에서도 읽힙니다.

• 모든 이미지에 대체 텍스트가 있고, 버튼 글자의 대비가 읽을 만합니다.

그다음 색인 여부를 정하세요. 유료 캠페인용 페이지는 noindex 태그를 달아 메인 페이지와 경쟁하지 않게 할 수 있습니다. 검색 순위를 노리는 페이지라면 사이트맵에 넣고 제대로 된 검색 제목을 붙이세요.

발행 후에는 한 번에 한 가지만 바꾸세요. 헤드라인이 가장 큰 비중을 차지하므로 먼저 고치고, 각 버전이 충분한 방문자를 받을 때까지 기다린 뒤 판단하세요. 이틀의 흥분보다 2주의 꾸준한 트래픽이 더 많은 것을 알려 줍니다.

실제로 우리가 하는 방식은 이렇습니다. 목표 문장 한 줄, Landing 템플릿, 다섯 개 섹션으로 시작하세요. 기본 편집기로 부족해지기 전까지는 페이지 빌더를 건너뛰세요. 노력은 제안, 헤드라인, 속도에 쓰세요. 그 세 가지가 숫자를 움직입니다. 사이트 편집기를 열고, 템플릿 이름을 Landing으로 바꾸고, 히어로부터 만드세요.