워드프레스에서 랜딩페이지 만드는 법: 실무 가이드

랜딩페이지 만드는 법을 알고 싶다면, 전환을 만드는 첫 결정은 방문자가 해야 할 행동 하나를 정하는 것입니다. 히어로 레이아웃부터 버튼 색까지 나머지는 모두 그 한 가지 결정에서 따라 나옵니다. 종이에 회색 톤으로 섹션을 스케치하고, 블록을 건드리기 전에 제목부터 쓰고, 그 행동에 도움이 되지 않는 요소는 잘라내세요. 이 글은 워드프레스 안에서, 사이트 편집기로, 그리고 여러분이 부딪힐 한계와 함께 그 과정을 다룹니다.

랜딩페이지는 왜 홈페이지와 다른 브리프가 필요한가?

홈페이지는 많은 방문자가 여러 목적으로 찾아오는 곳입니다. 랜딩페이지는 광고, 뉴스레터, 검색 결과를 통해 들어온 한 명의 방문자가 한 가지 목적을 달성하도록 만드는 페이지입니다. 이 차이가 전체 구축 방식을 바꿉니다.

내비게이션은 줄거나 아예 사라져야 합니다. 보조 링크도 빠지고, 푸터의 사이트맵도 덜어냅니다. 블록 테마에서는 이것이 공유 템플릿에 숨겨진 메뉴를 두는 방식이 아니라, 전용 템플릿으로 만들어야 한다는 뜻입니다. 사이트 편집기에서 빈 템플릿을 새로 만들고, 헤더 템플릿 파트를 빼고, 로고와 행동 유도 버튼만 남기세요.

홈페이지의 히어로를 그대로 재사용하고 싶은 유혹은 피하세요. 지난봄 한 클라이언트 프로젝트에서 동료 개발자가 홈페이지의 Cover 블록을 웨비나 페이지에 재사용하면서 전체 메뉴를 그대로 두었습니다. 방문자들은 블로그로 빠져나갔습니다. 메뉴 일곱 개를 지운 것이 그 분기에서 가장 저렴한 해결책이었습니다.

편집기를 열기 전에 무엇을 스케치해야 하나요?

먼저 종이에 그리세요. 직사각형 대여섯 개를 세로로 쌓고 각각 이름을 붙입니다. 히어로, 문제, 해결책, 증거, 제안 세부 사항, 마지막 행동 유도입니다. HubSpot부터 Unbounce까지 대부분의 가이드가 이 순서에 크게 동의하는데, 회의적인 독자가 결정을 내리는 과정과 같은 순서이기 때문입니다.

회색 톤으로 작업하세요. 색은 약한 위계를 가려 버리지만, 회색 스케치는 그것을 빠르게 드러냅니다. 모든 것이 회색일 때 어느 직사각형이 가장 중요한지 구분되지 않는다면, 방문자도 구분하지 못합니다.

그다음 문장을 씁니다. 제목 하나, 보조 문장 하나, 버튼 문구 하나입니다. 실제 문구를 기준으로 디자인하세요. 자리표시자 텍스트로 만든 레이아웃은 실제 제목이 세 줄로 넘어가는 순간 깨집니다. 아랍어나 히브리어처럼 같은 문장이 더 길어지는 언어에서는 선택이 아니라 필수입니다.

스크롤을 끌어내는 히어로는 어떻게 만드나요?

히어로는 네 가지 일을 해야 합니다. 결과를 말하고, 누구를 위한 것인지 밝히고, 행동 하나를 제안하고, 주장을 믿을 만하게 만드는 무언가를 보여줍니다. "유연한 페이지 빌더"처럼 기능을 내세운 제목보다 "오후 한나절이면 고객 사이트 하나를 출시합니다"처럼 결과를 내세운 제목이 더 잘 작동합니다.

구텐베르크 편집기에서는 Cover 블록 안에 Group 블록을 넣어 히어로를 만드세요. 그래야 배경과 별개로 콘텐츠 폭을 제한할 수 있습니다. Group의 콘텐츠 폭은 640에서 720 픽셀 정도로 설정하고, Heading 블록, Paragraph 블록, 버튼 하나만 담긴 Buttons 블록을 추가합니다. 버튼은 하나입니다. 버튼이 두 개면 결정도 두 개가 되고, 두 번째 버튼이 실제로 클릭되는 경우가 보통입니다.

보조 시각 자료도 정직하게 고르세요. 실제 제품 화면 캡처가 장식용 사진보다 낫습니다. 추상적인 이미지만 있다면 낮은 비중으로 쓰고, 제목이 페이지를 이끌게 하세요. 히어로에 캐러셀은 넣지 마세요. 대부분의 방문자가 보지 못하는 슬라이드에 메시지가 묻힙니다.

참고로 이 레이아웃은 워드프레스 6.5부터 잘 작동합니다. 그 버전부터 Cover 블록과 Group 제약이 사이트 편집기에서 예측 가능하게 동작하기 때문입니다.

증거는 얼마나 필요하고 어디에 놓아야 하나요?

증거는 히어로가 던진 질문에 답합니다. 이걸 믿어도 될까요? 그러니 증거는 히어로 바로 아래에 두세요. 페이지 맨 아래에 두면 끝까지 읽는 소수만 보게 됩니다.

좋은 증거는 구체적입니다. 이름이 있는 고객과 측정된 결과 하나가 별 다섯 개짜리 일반 평가보다 낫습니다. 알아볼 수 있는 고객 로고 줄도 도움이 되고, 실명과 직책이 있는 추천사 한 개가 익명 인용문이 가득한 슬라이더보다 강합니다.

출처를 댈 수 없는 수치는 조심하세요. 인기 있는 일부 가이드는 어떤 분석 도구로도 나올 수 없는 전환율을 인용합니다. 숫자를 쓴다면 출처와 측정 시점을 밝히거나 빼세요. 여러분 사이트에서 직접 측정한 전후 비교가 빌려온 통계보다 낫습니다.

모바일에서 가장 중요한 레이아웃 규칙은 무엇인가요?

광고와 소셜에서 오는 랜딩페이지 트래픽의 대부분은 휴대폰에서 들어옵니다. 그러니 모바일 화면을 먼저 설계하고 넓히세요. 단일 열을 쓰고, 한 줄의 길이를 짧게 유지하고, 행동 유도 버튼을 엄지로 닿는 위치에 두세요.

세 가지 규칙이 문제의 대부분을 막아 줍니다. 터치 대상은 최소 24 x 24 CSS 픽셀로 유지하세요. 이는 WCAG 2.2 AA 수준의 최소 기준이고, 주요 버튼은 훨씬 크게 잡는 것이 좋습니다. 본문은 확대하지 않아도 읽히게 하세요. 그리고 증거 섹션 뒤에 행동 유도 버튼을 한 번 더 두어, 아무도 위로 스크롤해서 버튼을 찾지 않도록 하세요.

블록 테마에서는 블록마다 커스텀 패딩을 주지 말고, theme.json에 정의된 간격 스케일을 쓰세요. 워드프레스 theme.json 참조 문서에 프리셋이 정리되어 있습니다. 이를 쓰면 스타일시트를 덮어쓰지 않고도 모바일과 데스크톱의 리듬을 일관되게 유지할 수 있습니다.

속도가 디자인과 무슨 관계가 있나요?

모든 관계가 있습니다. 보기에는 훌륭한데 로딩이 느린 랜딩페이지는 제목이 그려지기도 전에 방문자를 잃습니다. 구글의 가이드는 가장 큰 콘텐츠 페인트(LCP)가 2.5초 이하이면 좋은 것으로 봅니다. 랜딩페이지에서는 가장 큰 요소가 거의 항상 히어로 이미지나 제목입니다. 측정 방식은 web.dev의 LCP 설명에서 확인하세요.

그 결과로 몇 가지 실천 사항이 따릅니다. 히어로 이미지를 압축하고 WebP로 제공하세요. 히어로 이미지는 지연 로딩하지 마세요. 가장 먼저 그려져야 할 요소이기 때문입니다. 웹 폰트는 한 가지 패밀리로 제한하고, 가능하면 자체 호스팅한 가변 폰트에 적절한 대체 글꼴을 두세요. 첫 화면에서는 슬라이더, 자동 재생 동영상, 제3자 채팅 위젯을 제거하세요.

워드프레스 랜딩페이지가 호스팅형 빌더에 밀리는 지점도 여기입니다. 여러 용도의 무거운 테마로 만든 페이지는 쓰지 않는 CSS를 수백 킬로바이트씩 실을 수 있습니다. 전용 템플릿을 가진 가벼운 블록 테마는 훨씬 적게 싣고, 그 차이가 LCP에 그대로 드러납니다.

명암 대비, 접근성, RTL은 어떻게 다루나요?

접근성은 나중에 하는 감사가 아니라 디자인 제약입니다. WCAG 2.2 성공 기준은 일반 텍스트와 배경 사이에 최소 4.5대 1의 대비를 요구합니다. 이를 테스트하는 방법은 W3C의 최소 대비 기준 설명에 나옵니다. 흰 카드 위의 옅은 회색 캡션은 실패하고, 흰 글자가 들어간 파스텔 버튼도 많은 경우 실패합니다.

버튼부터 확인하세요. 페이지가 존재하는 이유인 요소이고, 브랜드 색으로 골라져 가독성이 가장 떨어지는 경우가 많습니다.

이중 언어나 아랍어, 히브리어 독자를 위해서는 페이지를 단순히 뒤집는 것 이상이 필요합니다. 버튼의 화살표처럼 방향을 나타내는 아이콘은 반드시 뒤집어야 합니다. 여백은 왼쪽과 오른쪽 대신 논리 속성(inline-start, inline-end)을 쓰세요. 글꼴은 제목 크기에서 테스트하세요. 많은 라틴 디스플레이 글꼴에는 아랍 문자 짝이 없어서, 대체 글꼴이 시각적 무게를 바꿉니다.

RTL 화면은 실제 기기와 실제 문구로 테스트하세요. 자리표시자 텍스트로는 잘 보이던 미러링 레이아웃도, 실제 아랍어 제목이 다르게 줄바꿈되면 깨질 수 있습니다.

워드프레스 랜딩페이지에 어떤 도구가 맞나요?

정직하게 말하면 선택지는 세 가지입니다. 사이트 편집기에서 패턴으로 직접 만드는 방법은 가장 가볍고 통제력이 높지만 손이 가장 많이 갑니다. Divi 같은 비주얼 빌더는 레이아웃 작업을 빠르게 해 주지만 페이지 무게를 일부 내줍니다. 또는 AI 사이트 빌더로 초안을 만든 뒤 중요한 부분만 직접 다시 만들 수도 있습니다.

한 번의 프롬프트로 전환되는 완성 페이지를 약속하는 도구는 의심하세요. 생성된 구조는 섹션 순서와 자리표시자 문구의 출발점으로는 괜찮습니다. 최종 디자인으로는 드물게 충분하고, 고객이 유지보수할 수 있도록 마크업을 정리해야 하는 경우가 많습니다.

페이지가 워드프레스 밖에 있다면 Framer나 Webflow 같은 호스팅형 빌더도 정당한 선택입니다. 6주 동안 돌다가 사라질 캠페인 페이지라면 특히 그렇습니다. 데모가 아니라, 페이지가 얼마나 오래 살아야 하고 누가 편집할지를 기준으로 고르세요.

출시 후 테스트하고 개선하려면 어떻게 하나요?

출시는 측정의 시작입니다. 전환 이벤트 하나를 설정해 분석 도구에 연결하고, 트래픽을 보내기 전에 폼 제출이 실제로 추적되는지 확인하세요. 스스로 결과를 보고하지 못하는 페이지는 개선할 수 없습니다.

한 번에 한 가지만 바꾸세요. 효과가 가장 큰 제목을 먼저, 그다음 버튼 문구, 그다음 증거의 순서로 바꿉니다. 각 테스트는 의미 있는 수의 전환이 쌓일 만큼 충분히 돌리세요. 첫날 좋아 보인다고 멈추면 안 됩니다. 독자층이 작다면 테스트에 몇 주가 걸릴 수 있고, 그것도 괜찮습니다. 성급한 승자보다 인내가 낫습니다.

자칫 잊기 쉬운 항목이 두 가지 있습니다. 페이지가 유료 캠페인에만 쓰인다면 검색 색인에 넣을지 결정하세요. 제안 내용을 얇게 복제한 페이지가 메인 페이지와 경쟁할 수 있습니다. 그리고 폼이 개인정보를 수집한다면, 첫 불만이 들어온 뒤가 아니라 출시 전에 여러분의 지역이 요구하는 동의 문구를 추가하세요.

이번 주에 무엇을 하면 좋을까요?

사이트 편집기에서 빈 템플릿을 열고, 실제 문구와 버튼 하나로 히어로만 만드세요. 그다음 휴대폰에서 확인하고 LCP를 측정하세요. 그 히어로에서 패턴 하나를 만들어 두면, 다음 고객 페이지는 빈 캔버스가 아니라 검증된 섹션에서 시작합니다.