페이스북 랜딩페이지 만들기, 코딩 몰라도 하루면 링크 걸 수준까지

페이스북 광고를 돌리려는데 클릭한 사람을 어디로 보내야 할지 막막하신가요? 결론부터 말하면, 코딩을 모르더라도 Claude Code 같은 AI 코딩 도구에 구조를 지정한 프롬프트를 건네면 반나절 안에 “일단 링크 걸어도 되겠다” 수준의 랜딩페이지 한 장은 나옵니다. 다만 그냥 “랜딩페이지 만들어줘” 한 줄로는 절대 안 나와요. 섹션 순서를 먼저 정하고, 모바일에서 깨지는 부분을 몇 번 되돌려 고치고, 마지막에 워드프레스 고정 페이지로 옮겨 붙이는 과정이 필요합니다. 이 글에서는 메타 안에서 만드는 방법과 외부 페이지를 직접 만드는 방법을 갈라 보고, 후자를 비전공자 기준으로 어디까지 실습할 수 있는지 순서대로 정리했어요.

• 페이스북 랜딩페이지, 결국 두 갈래 중 하나예요
• 어떤 방식이 내 상황에 맞을까 — 상황별 선택표
• 만들기 전에 종이에 먼저 적는 것 — 섹션 순서 공식
• Claude Code에게 건넨 프롬프트는 이렇게 생겼습니다
• 모바일에서 화면이 깨질 때 — 흔한 4가지 증상
• CTA 버튼은 몇 개, 어디에 둘까
• 완성한 HTML을 워드프레스 고정 페이지로 옮기기
• 링크 걸기 전 마지막 점검 — 광고 심사와 성과 측정
• 자주 묻는 질문
• 참고자료

페이스북 랜딩페이지, 결국 두 갈래 중 하나예요

페이스북 랜딩페이지는 크게 두 갈래입니다. 하나는 메타 생태계 안에서 만드는 것(인스턴트 경험, 리드폼, 비즈니스 페이지), 다른 하나는 내 도메인에 올린 외부 웹페이지예요. 코딩을 모르는 상태에서 Claude Code로 실습하기 좋은 건 두 번째, 외부 페이지 한 장입니다.

많은 분이 여기서 헷갈립니다. “페이스북 페이지 만들기”를 검색해서 나온 결과대로 비즈니스 페이지를 만들어놓고, 광고 목적지 URL 칸에 그 페이지 주소를 넣는 경우예요. 비즈니스 페이지는 브랜드의 프로필이지 전환을 만드는 페이지가 아닙니다. 방문자가 게시물, 사진 탭, 리뷰 사이를 헤매다 나가버려요.

랜딩페이지의 정의는 단순합니다. 광고를 클릭한 사람이 도착하는 곳이고, 거기서 할 수 있는 행동이 딱 하나여야 합니다. 신청하기든, 상담 문의든, 자료 받기든 하나요. 선택지가 세 개 이상 보이는 순간 그건 랜딩페이지가 아니라 홈페이지가 됩니다.

메타 내부 방식의 장점은 로딩이 빠르고 만들기 쉽다는 것이에요. 인스턴트 경험은 모바일에서 즉시 열리는 전체화면 포맷이라 이탈이 적습니다. 대신 그 페이지는 메타 안에만 존재해요. 검색에 잡히지 않고, 광고를 끄면 사라지고, 다른 채널에 링크로 뿌릴 수도 없습니다.

외부 페이지는 반대예요. 만드는 데 손이 더 가지만 내 도메인에 남고, 나중에 워드프레스 고정 페이지로 옮겨 블로그·포트폴리오와 한 사이트로 묶을 수 있습니다. 비전공자가 바이브코딩을 연습하기에도 이쪽이 훨씬 배울 게 많아요. HTML 구조, CSS 반응형, 폼 처리까지 한 번에 만지게 되니까요.

어떤 방식이 내 상황에 맞을까 — 상황별 선택표

고민을 줄이려면 딱 네 가지만 비교하면 됩니다. 인스턴트 경험, 리드폼, 노코드 툴, 그리고 직접 만든 외부 페이지예요.

예산 0원 시나리오라면 리드폼부터 시작하는 게 합리적입니다. 페이지를 안 만들고도 이름과 연락처를 받아볼 수 있으니, “이 제안에 반응이 오긴 하는가”를 며칠 만에 검증할 수 있어요.

반응이 확인됐다면 그때 외부 페이지로 넘어갑니다. 도메인은 연 1~2만 원대, 정적 페이지 호스팅은 무료 티어로도 충분한 경우가 많아서 월 5만 원 이하 시나리오에 들어갑니다. 다만 요금제는 자주 바뀌니 결제 전 각 서비스 공식 페이지에서 현재 조건을 확인하세요.

만들기 전에 종이에 먼저 적는 것 — 섹션 순서 공식

AI에게 시키기 전에 반드시 해야 하는 일이 있어요. 페이지에 들어갈 섹션 순서를 먼저 적는 것입니다. 이걸 안 정하고 프롬프트를 넣으면 그럴듯하지만 설득 흐름이 없는 페이지가 나옵니다.

가장 흔하게 쓰이는 건 6블록 구조예요. 순서 자체가 방문자의 심리 흐름을 따라갑니다.

여기서 놓치기 쉬운 게 메시지 매치예요. 광고 소재에서 “3일 무료 체험”이라고 했으면 랜딩페이지 첫 화면 헤드라인에도 “3일 무료 체험”이라는 표현이 그대로 보여야 합니다. 광고에서 본 문구가 페이지에 없으면 방문자는 잘못 눌렀다고 판단하고 1~2초 만에 뒤로가기를 누릅니다. 이탈률이 높은 페이지 상당수가 디자인이 아니라 이 불일치 때문입니다.

Claude Code에게 건넨 프롬프트는 이렇게 생겼습니다

“페이스북 광고용 랜딩페이지 만들어줘” 한 줄로 시작하면 대부분 실망합니다. 색깔은 예쁜데 섹션 순서가 제멋대로고, 내 서비스 얘기가 하나도 안 들어간 껍데기가 나와요. AI가 못해서가 아니라 정보를 안 줬기 때문입니다.

실제로 쓸 만한 결과를 얻으려면 프롬프트에 다섯 가지를 넣어야 합니다. 대상 독자, 제안 한 줄, 섹션 순서, 기술 조건, 파일 구성이에요.

예를 들면 이런 식으로 씁니다. “온라인 클래스를 처음 여는 1인 강사를 대상으로 하는 랜딩페이지를 만들어줘. 목표 행동은 사전 신청 폼 제출 하나야. 섹션은 히어로, 문제 3가지, 커리큘럼, 수강 후기, FAQ 4개, 마지막 신청 폼 순서로. 모바일 우선으로 짜고 외부 CSS 프레임워크는 쓰지 말고, index.html 한 파일 안에 style 태그로 넣어줘.”

이렇게 주면 한 번에 뼈대가 나옵니다. 그다음부터는 통째로 다시 만들라고 하지 말고 한 번에 한 군데씩 고쳐달라고 하세요. “히어로 섹션 배경을 밝은 회색으로, 헤드라인 글자 크기를 모바일에서 28px로” 같은 식이요. 여러 요구를 한꺼번에 넣으면 고쳐진 것과 망가진 것을 구분하기 어려워집니다.

작업 폴더는 처음부터 하나로 정해두는 게 좋습니다. 바탕화면에 프로젝트 폴더를 만들고 거기서 Claude Code를 실행하면, 파일이 어디에 생겼는지 몰라 헤매는 일이 줄어요. 초보자가 가장 자주 막히는 지점이 “만들었다는데 그 파일이 어디 있는지 모르겠다”입니다.

모바일에서 화면이 깨질 때 — 흔한 4가지 증상

데스크톱 브라우저에서 멀쩡하던 페이지가 휴대폰에서 열면 이상해지는 건 거의 정해진 수순입니다. 페이스북 광고 트래픽은 대부분 모바일이라 여기서 안 잡으면 만든 의미가 없어요. 증상별로 대응이 다릅니다.

확인은 브라우저 개발자도구의 모바일 미리보기로 합니다. 크롬에서 F12를 누르고 기기 아이콘을 켜면 폭 375px 화면을 흉내 낼 수 있어요. 다만 미리보기가 통과해도 실제 휴대폰에서 다르게 보이는 경우가 있으니, 링크를 걸기 전엔 본인 폰으로 한 번은 열어보세요.

특히 페이스북 앱 안에서 열리는 인앱 브라우저는 일반 크롬·사파리와 동작이 조금 다릅니다. 상단 주소 표시줄과 하단 바가 화면을 잡아먹어서, 100vh로 잡아둔 첫 화면이 잘리는 일이 흔해요. 첫 화면 높이는 100vh 대신 min-height와 여백으로 잡아달라고 요청하면 안정적입니다.

여기서 자주 나오는 후속 질문이 “고치라고 했는데 다른 데가 망가졌어요”입니다. 이럴 땐 수정 전 파일을 복사해두는 습관이 답이에요. 깃을 아직 모른다면 index.html을 index_백업1.html로 복사해두는 것만으로도 충분합니다. 파일 이름 뒤에 날짜를 붙여두면 어디까지 잘 되던 버전인지 되돌아가기 쉬워요.

CTA 버튼은 몇 개, 어디에 둘까

버튼 개수를 묻는 분이 많은데, 답은 “행동은 하나, 버튼은 여러 개”입니다. 같은 행동을 유도하는 버튼을 스크롤 흐름에 맞춰 반복 배치하는 거예요. 방문자마다 설득되는 지점이 다르기 때문입니다.

모바일 기준으로 배치는 이렇게 잡습니다. 첫 화면에 하나, 해결 방법 섹션이 끝나는 지점에 하나, 후기 아래 하나, 페이지 맨 끝에 하나. 여기에 스크롤을 내리면 하단에 붙어 따라오는 고정 버튼을 하나 더 두면 클릭 기회가 크게 늘어납니다.

버튼 문구는 “확인”이나 “클릭”처럼 무슨 일이 일어나는지 모르는 표현을 피하세요. 방문자 입장에서 1인칭으로 읽었을 때 자연스러운 말이 좋습니다. “무료 체험 신청하기”, “상담 일정 잡기”, “자료 바로 받기” 같은 식이요. 버튼 바로 아래 작은 글씨로 “1분이면 끝나요”, “카드 등록 없이 신청” 같은 안심 문구를 붙이면 망설임이 줄어듭니다.

개인정보를 받는 페이지라면 수집 항목, 이용 목적, 보유 기간을 명시하고 동의 체크박스를 넣어야 합니다. 이건 선택이 아니라 법적 요건이고, 메타 광고 심사에서도 확인하는 부분이에요. 체크박스는 기본 해제 상태여야 하고, 전문 링크를 함께 두는 게 안전합니다.

완성한 HTML을 워드프레스 고정 페이지로 옮기기

파일이 완성됐으면 인터넷에 올려야 링크를 걸 수 있습니다. 두 갈래가 있어요. 정적 호스팅에 그대로 올리거나, 워드프레스 고정 페이지로 옮겨 붙이는 방법입니다.

급하다면 정적 호스팅이 빠릅니다. HTML 파일 하나를 업로드하면 바로 주소가 생기는 서비스들이 있고, 무료 티어로 시작할 수 있는 곳도 많아요. 광고를 오늘 돌려야 하는 상황이면 이쪽으로 먼저 띄우고, 나중에 옮겨도 됩니다.

이미 워드프레스 사이트를 운영 중이라면 고정 페이지로 옮기는 게 낫습니다. 도메인이 하나로 정리되고, 픽셀·애널리틱스도 사이트 전체에 걸어둔 걸 그대로 쓸 수 있으니까요. 옮기는 순서는 이렇습니다.

헤더·푸터 메뉴를 그대로 둘지도 고민 지점이에요. 랜딩페이지 원칙대로면 나가는 링크를 줄이는 게 맞습니다. 상단 메뉴를 숨기면 전환에 유리하지만, 사업자 정보와 개인정보 처리방침 링크는 남겨두세요. 신뢰 요소이자 광고 심사에서도 유리하게 작용합니다.

링크 걸기 전 마지막 점검 — 광고 심사와 성과 측정

페이지가 예뻐도 광고가 반려되면 소용없습니다. 랜딩페이지 때문에 거부되는 사례는 패턴이 꽤 뚜렷해요. 가장 흔한 건 광고 문구와 페이지 내용이 다른 경우, 페이지가 열리지 않거나 오류가 나는 경우, 그리고 닫기 버튼이 없는 팝업으로 시작하는 경우입니다.

과장된 효과 표현도 위험합니다. 수익이나 효과를 단정적으로 약속하는 문구, 근거 없는 비교 표현은 심사에서 걸립니다. 애초에 방문자 신뢰도 떨어지니 빼는 게 낫습니다.

측정 준비도 링크를 걸기 전에 해두는 게 좋습니다. 나중에 붙이면 초반 데이터가 통째로 비어요. 메타 픽셀을 페이지에 심고, 폼 제출 시점을 전환 이벤트로 잡아두면 어떤 광고가 실제 문의로 이어졌는지 보입니다. 비즈니스 관리자에서 도메인 인증까지 해두면 이벤트 설정이 안정적입니다.

URL에 UTM 파라미터를 붙이는 것도 잊지 마세요. 광고 세트별로 다른 값을 넣어두면 애널리틱스에서 어느 소재가 사람을 데려왔는지 구분됩니다. 파라미터 이름을 매번 다르게 쓰면 데이터가 쪼개지니, 규칙을 한 번 정해 메모해두는 게 좋아요.

첫 2주 점검 루틴은 단순하게 잡습니다. 3일차에 클릭은 오는데 폼 제출이 0이면 페이지 문제, 노출은 많은데 클릭이 없으면 광고 소재 문제로 나눠보세요. 7일차에는 첫 화면 헤드라인만 바꾼 버전을 하나 더 만들어 비교해보고, 14일차에 성과가 낮은 쪽을 끕니다. 한 번에 여러 요소를 동시에 바꾸면 무엇 때문에 좋아졌는지 알 수 없으니 한 번에 하나만 바꾸는 게 원칙이에요.

자주 묻는 질문

페이스북 비즈니스 페이지를 랜딩페이지로 써도 되나요?

가능하지만 전환 목적이라면 권하지 않습니다. 비즈니스 페이지는 게시물·사진·리뷰 등 나갈 길이 너무 많아서 방문자가 원하는 행동에 도달하기 전에 흩어집니다. 브랜드를 알리는 광고라면 페이지로 보내도 되지만, 신청·구매·문의가 목적이면 행동 하나만 남긴 전용 페이지가 훨씬 낫습니다.

랜딩페이지 없이 페이스북 광고를 돌릴 수 있나요?

네, 리드폼(즉시 양식) 광고를 쓰면 됩니다. 광고를 누르면 페이스북 안에서 바로 양식이 열리고 이름·연락처가 자동으로 채워져 제출이 쉬워요. 다만 설명할 공간이 적어 고관여 상품에는 불리하고, 문턱이 낮은 만큼 진지하지 않은 문의도 섞입니다. 검증 단계에서 먼저 써보고 반응이 좋으면 외부 페이지로 확장하는 흐름을 권합니다.

페이스북 페이지가 안 만들어지는 이유는 뭔가요?

개인 계정이 없거나 인증이 끝나지 않은 경우가 가장 많습니다. 페이지는 개인 계정에 연결되는 구조라 개인 계정이 먼저 필요해요. 그 외에 정책 위반 이력, 계정 생성 직후 제한, 연령·지역 제한 때문에 막히기도 합니다. 개인 계정을 하나 더 만들어 우회하는 건 정책 위반이니, 페이지나 비즈니스 포트폴리오를 여러 개 두는 방식으로 해결하세요.

AI로 만든 페이지도 검색에 잡히나요?

도구가 아니라 내용에 달려 있습니다. 만들어진 방식과 무관하게 페이지에 실제 유용한 정보가 있고 제목·설명이 제대로 들어가 있으면 색인됩니다. 다만 광고 전용 랜딩페이지는 검색 유입보다 광고 클릭을 받는 게 목적이므로, 블로그 글과 내용이 겹친다면 색인에서 빼는 편이 사이트 전체에 유리한 경우도 많아요.

제작 비용은 어느 정도 잡아야 하나요?

직접 만들면 도메인과 호스팅 비용만 들고, 정적 페이지는 무료 티어로도 시작할 수 있습니다. 노코드 툴은 월 구독 방식이라 계속 쓸수록 누적되고, 외주는 페이지 구성과 디자인 범위에 따라 편차가 큽니다. 요금은 자주 바뀌니 각 서비스 공식 요금 페이지에서 현재 조건을 직접 확인하세요.

참고자료

• Meta 비즈니스 지원 센터 — 광고 랜딩페이지 요건, 페이지 생성, 인스턴트 경험 관련 공식 안내
• Meta 광고 정책 센터 — 광고 심사 기준과 랜딩페이지 관련 금지 사항 원문
• Claude Code 공식 문서 — 설치 방법과 프로젝트 폴더 기반 작업 흐름
• WordPress 공식 문서 – 고정 페이지 — 페이지 생성과 템플릿 설정 기본 안내

페이스북 랜딩페이지 만들기가 어려웠던 건 코딩 실력 때문이 아니라, 어떤 방식을 골라야 할지와 페이지에 무엇을 어떤 순서로 넣어야 할지가 정리되지 않았기 때문인 경우가 많아요. 섹션 순서를 먼저 종이에 적고, 그 순서를 그대로 프롬프트에 옮기고, 모바일에서 깨지는 곳을 하나씩 되돌려 고치면 하루 안에 링크를 걸 수 있는 페이지 한 장은 나옵니다. 처음부터 완성도 높은 결과를 노리기보다, 리드폼으로 반응을 먼저 확인하고 외부 페이지로 넘어가는 순서를 권합니다. 그렇게 만든 페이지를 워드프레스 고정 페이지로 옮겨두면 다음 캠페인부터는 문구만 바꿔 재사용할 수 있고, 그 과정에서 HTML과 반응형 CSS도 자연스럽게 손에 익습니다.

함께 보면 좋은 글

• 워드프레스 호스팅, 다들 월 요금만 보는데 진짜 갈림길은 따로 있어요
• 블로그 수익화, 광고 붙이기 전에 끝내야 할 준비가 따로 있습니다
• 웹호스팅 종류 4가지 비교, 첫 워드프레스 블로그엔 뭐가 맞을까?