랜딩페이지 첫 화면 구성: 3초 안에 판단되는 4가지 배치 기준

랜딩페이지 첫 화면은 페이지의 '표지'가 아닙니다.
광고를 누른 사람이 스크롤을 내릴지, 뒤로 가기를 누를지 정하는 화면입니다.

랜딩페이지 첫 화면을 구성할 때 가장 중요한 건 디자인 완성도가 아닙니다. 광고에서 한 약속이 그대로 이어지는지, 그리고 "이게 뭔지·나한테 왜 필요한지·다음에 뭘 하면 되는지"가 스크롤 없이 읽히는지가 먼저입니다.
첫 화면에서 이 세 가지 중 하나라도 빠지면, 그 아래 내용이 아무리 좋아도 읽히지 않습니다.

아래에서 첫 화면에 넣을 요소, 배치 순서, 모바일 기준 판단법, 실패 사례까지 기준별로 설명합니다.

1. 랜딩페이지 첫 화면이 성과를 가르는 이유

첫 화면의 범위부터 정확히 잡아야 합니다

'첫 화면'이란 스크롤 없이 보이는 영역, 흔히 퍼스트뷰나 어보브 더 폴드(Above the fold)라고 부르는 구간입니다.

문제는 이 범위를 PC 모니터 기준으로 잡는 경우가 많다는 점입니다.
메타·GFA·카카오 같은 피드형 매체에서 들어오는 트래픽은 대부분 모바일이고, 모바일 첫 화면은 PC보다 훨씬 좁습니다.

일반적인 스마트폰 기준으로 첫 화면은 가로 360~430px, 세로는 브라우저 주소창과 하단 바를 빼면 대략 600~750px 정도의 공간입니다.
인앱 브라우저(인스타그램·페이스북 앱 안에서 열리는 브라우저)는 상단 바가 추가로 붙어서 이보다 더 좁아집니다.

-> 첫 화면 구성은 반드시 모바일 인앱 브라우저 기준으로 확인해야 합니다.

첫 화면은 광고 소재의 '다음 장면'입니다

광고를 누른 사람은 백지 상태로 들어오지 않습니다.
소재에서 본 문구, 이미지, 혜택을 머릿속에 들고 들어옵니다.

그런데 첫 화면에 전혀 다른 이미지와 브랜드 슬로건이 뜨면, 사용자는 "내가 누른 게 이게 맞나?"부터 확인하게 됩니다.
이 확인 과정이 길어질수록 뒤로 가기가 눌립니다.

실무에서 광고 지표는 괜찮은데 전환이 안 나오는 계정을 보면, 소재 문구와 첫 화면 헤드라인이 서로 다른 이야기를 하는 경우가 상당히 많습니다.
소재는 "3일 만에 붓기 관리"를 말하는데, 랜딩 첫 화면은 "자연에서 온 건강한 습관"으로 시작하는 식입니다.

소재와 랜딩 메시지를 맞추는 전체 점검 방법은 아래 글에 따로 정리되어 있습니다.

광고 소재와 랜딩 메시지 일치: 이탈 막는 4가지 점검 기준

첫 화면 문제인지 먼저 확인하는 법

첫 화면부터 뜯어고치기 전에, 문제가 정말 첫 화면에 있는지 데이터로 먼저 확인해야 합니다.

여기서 순서가 중요합니다.
링크 클릭과 랜딩 조회 사이 차이가 크다면, 첫 화면 구성이 아니라 첫 화면이 뜨기 전에 사람이 나가고 있는 겁니다.
이 경우 헤드라인을 바꿔도 소용이 없고, 대표 이미지 용량부터 줄여야 합니다.

-> 로딩 → 첫 화면 체류 → 스크롤 순서로 확인하고, 막힌 구간부터 손대야 합니다.

2. 랜딩페이지 첫 화면 구성 요소 4가지

첫 화면에 넣어야 하는 요소는 많지 않습니다.
오히려 많이 넣을수록 아무것도 읽히지 않습니다.

실무에서 성과가 안정적으로 나오는 첫 화면은 대부분 아래 4가지 요소로 정리됩니다.

① 헤드라인: 광고 문구를 이어받는 한 문장

헤드라인은 첫 화면에서 가장 먼저, 가장 크게 읽히는 문장입니다.

판단 기준은 단순합니다.
광고 소재에서 클릭을 만든 핵심 문구를 그대로, 또는 한 단계 구체화해서 받는 것.

• 소재: "아침마다 붓는 얼굴, 이유가 따로 있습니다"

• 좋은 헤드라인: "아침 붓기, 수분이 아니라 순환 문제입니다"

• 나쁜 헤드라인: "당신의 하루를 바꾸는 프리미엄 루틴"

모바일 기준으로 헤드라인은 2줄 안에 끝나는 게 좋습니다.
3줄을 넘어가면 아래 요소들이 첫 화면 밖으로 밀려납니다.

② 서브카피: '왜 이게 다른지'를 근거로 보여주는 1~2줄

헤드라인이 관심을 잡는다면, 서브카피는 "그래서 뭐가 다른데?"에 답합니다.

여기에는 형용사보다 근거가 들어가야 합니다.
원료 함량, 사용 방식, 차별 구조, 인증 여부처럼 확인 가능한 사실 하나를 넣는 쪽이 훨씬 강합니다.

단, 건강기능식품·화장품처럼 표시광고 규제가 있는 카테고리는 이 서브카피 자리에서 심의 반려가 가장 많이 나옵니다.
첫 화면은 사람이 가장 많이 보는 영역이라, 심의 기관도 이 부분을 가장 먼저 봅니다.

③ 대표 비주얼: 제품이 아니라 '사용 장면' 또는 '결과'

대표 이미지는 제품 누끼컷 하나만 크게 두는 경우가 많습니다.
제품을 이미 아는 재구매 고객에게는 괜찮지만, 광고로 처음 들어온 사람에게는 정보가 거의 없습니다.

첫 화면 비주얼은 아래 우선순위로 고르는 편이 유용합니다.

1. 광고 소재에서 쓴 이미지와 같은 장면 (연결감 확보)

2. 제품을 쓰는 상황이나 사용 직후 장면

3. 제품 단독 컷

그리고 비주얼은 첫 화면의 절반을 넘기지 않는 게 좋습니다.
이미지가 화면 대부분을 차지하면 헤드라인과 버튼이 밀려나고, 사용자는 "그래서 이게 뭔데?"를 알기 위해 스크롤을 해야 합니다.

④ 행동 유도(CTA)와 신뢰 요소

첫 화면에 버튼을 꼭 넣어야 하느냐는 질문을 자주 받습니다.
기준은 상품의 고민 깊이입니다.

신뢰 요소는 리뷰 수, 평점, 누적 판매량처럼 숫자로 표시되는 것 하나 정도면 충분합니다.
배지와 인증 마크를 여러 개 나열하면 헤드라인과 시선을 경쟁하게 됩니다.

버튼 문구를 단계별로 고르는 기준은 아래 글에서 자세히 다룹니다.

CTA 문구 예시: 고객 단계별로 고르는 4가지 기준

-> 첫 화면은 헤드라인 → 서브카피 → 비주얼 → CTA·신뢰 요소, 이 4가지면 충분합니다. 나머지는 스크롤 아래로 내려도 됩니다.

3. 첫 화면 배치 순서와 흔한 실패 사례

배치는 '읽히는 순서'대로

모바일에서는 시선이 위에서 아래로 한 줄로 흐릅니다.
그래서 배치 순서가 곧 설득 순서가 됩니다.

실무에서 가장 무난하게 작동하는 배치는 아래 두 가지입니다.

💡

텍스트 우선형: 헤드라인 → 서브카피 → 비주얼 → 버튼

메시지가 성과를 좌우하는 상품에 적합

문제 해결형 상품(붓기, 수면, 탈모, 업무 효율 등)처럼 "내 얘기다"라는 공감이 먼저 필요한 경우

💡

비주얼 우선형: 비주얼 → 헤드라인 → 버튼

보는 순간 이해되는 상품에 적합

패션, 인테리어, 식품처럼 '보이는 것'이 곧 구매 이유인 경우

비주얼 위에 헤드라인을 얹을 때는 글자가 배경에 묻히지 않는지 반드시 실제 기기로 확인

어느 쪽이든 공통 원칙은 하나입니다.
첫 화면 안에서 "무엇인지"가 텍스트로 한 번은 명시되어야 한다는 것입니다.

실패 사례 1. 브랜드 소개로 시작하는 첫 화면

자사몰 메인처럼 로고, 브랜드 슬로건, 감성 이미지로 첫 화면을 채우는 경우입니다.

브랜드를 이미 아는 사람에게는 자연스럽지만, 광고로 처음 들어온 사람에게는 정보가 하나도 없습니다.
"그래서 이 페이지에서 뭘 파는 거지?"를 알려면 두세 번 스크롤해야 합니다.

한 생활용품 브랜드의 경우, 브랜드 스토리로 시작하던 첫 화면을 광고 소재의 문제 제기 문구로 바꾸고 브랜드 소개를 페이지 중간으로 내리는 것만으로 광고 유입의 평균 참여 시간이 눈에 띄게 늘어나는 경우가 있었습니다.
디자인 톤은 전혀 바꾸지 않았고, 순서만 바꾼 결과입니다.

실패 사례 2. 팝업과 띠배너가 첫 화면을 가리는 구조

첫 화면에 들어오자마자 회원가입 쿠폰 팝업, 상단 이벤트 띠배너, 하단 채팅 버튼이 동시에 뜨는 경우가 많습니다.

모바일 600~750px 남짓한 공간에서 팝업 하나가 뜨면, 사용자가 처음 보는 건 헤드라인이 아니라 '닫기 버튼'입니다.
광고에서 기대한 내용을 보기도 전에 닫기부터 해야 하는 구조는 이탈을 만듭니다.

실무에서는 광고 유입에 한해 진입 팝업을 끄거나, 일정 시간·스크롤 이후에 뜨도록 지연시키는 방식을 많이 씁니다.
구글 역시 모바일에서 본문을 가리는 진입 팝업(intrusive interstitials)을 검색 품질에 불리한 요소로 안내하고 있습니다.

실패 사례 3. 할인 정보가 첫 화면에서 빠진 경우

소재에서 "첫 구매 50% 할인"으로 클릭을 만들어 놓고, 랜딩 첫 화면에는 할인 이야기가 없는 경우입니다.
사용자는 할인을 찾아 스크롤하다가, 페이지 맨 아래에서야 쿠폰 안내를 발견합니다. 대부분은 그 전에 나갑니다.

소재에서 클릭 이유가 된 혜택은 반드시 첫 화면 안에 있어야 합니다.
가격과 할인 정보를 어디에, 어떤 형태로 보여줄지는 아래 글을 참고하시면 됩니다.

가격 표시 방법 상세페이지: 구매를 가르는 4가지 배치 기준

실패 사례 4. 대표 이미지 용량 때문에 첫 화면이 늦게 뜨는 경우

상세페이지를 통이미지로 제작하면 첫 화면 이미지 한 장이 수 MB에 달하는 경우가 있습니다.
LTE 환경, 인앱 브라우저에서는 이 이미지가 다 뜨기 전에 사용자가 이미 나가버립니다.

이 경우 메타 광고 관리자에서 링크 클릭 대비 랜딩페이지 조회가 크게 낮게 찍히는 게 대표적인 신호입니다.
첫 화면 이미지만큼은 웹용으로 압축하고(WebP 등), 헤드라인은 이미지가 아닌 텍스트로 넣는 편이 로딩과 검색 모두에 유리합니다.

4. 첫 화면을 고친 뒤 성과를 판단하는 기준

한 번에 하나만 바꿔야 원인이 남습니다

첫 화면을 개선할 때 헤드라인, 이미지, 버튼을 한꺼번에 바꾸는 경우가 많습니다.
성과가 오르든 떨어지든, 무엇 때문인지 알 수 없게 됩니다.

변경 우선순위는 영향력이 큰 순서로 잡는 게 좋습니다.

1. 헤드라인 — 메시지 방향 자체가 바뀌므로 영향이 가장 큼

2. 혜택·CTA 노출 여부 — 첫 화면 안에 들어오는지

3. 대표 비주얼 — 사용 장면 vs 제품 컷

4. 세부 디자인 — 색상, 폰트, 버튼 모양

색상이나 버튼 모양부터 테스트하는 건 효율이 낮습니다.
메시지가 맞지 않는 상태에서는 버튼 색을 아무리 바꿔도 차이가 거의 나지 않습니다.

판단은 전환 수가 충분히 쌓인 뒤에

첫 화면 A/B 테스트는 참여 시간이나 스크롤처럼 빨리 쌓이는 지표로 먼저 방향을 보고, 최종 판단은 전환 데이터로 내립니다.

참여 시간이 늘었는데 전환이 그대로라면, 첫 화면은 개선됐지만 그 아래 구간(상세 설명, 가격, 구매 동선)에서 새고 있다는 뜻입니다.
이때는 첫 화면을 더 만지는 것보다 다음 구간으로 넘어가야 합니다.

그룹당 전환이 몇 건 쌓여야 결과를 믿을 수 있는지는 아래 글에서 기준을 확인하실 수 있습니다.

AB테스트 표본 수: 그룹당 전환 몇 건이면 결과를 믿을 수 있나

광고 소재가 여러 개라면 첫 화면도 나눠야 합니다

소재마다 소구점이 다른데 랜딩은 하나만 쓰는 경우가 흔합니다.
예를 들어 '가격' 소구 소재와 '효과' 소구 소재가 같은 첫 화면으로 들어오면, 한쪽은 반드시 연결이 끊깁니다.

모든 소재마다 랜딩을 따로 만들 필요는 없습니다.
소구점별로 첫 화면(헤드라인과 대표 이미지)만 바꾸고, 그 아래 본문은 공유하는 방식이 제작 부담 대비 효과가 가장 좋습니다.

-> 첫 화면 개선은 헤드라인부터, 한 번에 하나씩, 전환 데이터로 판단합니다.

자주 묻는 질문

Q. 랜딩페이지 첫 화면에 꼭 들어가야 하는 요소는 무엇인가요?
헤드라인, 서브카피, 대표 비주얼, CTA 또는 신뢰 요소 4가지면 충분합니다. 핵심은 "무엇인지·왜 필요한지·다음에 뭘 하면 되는지"가 스크롤 없이 읽히는 것입니다. 광고 소재에서 내세운 혜택이 있다면 그것도 첫 화면 안에 있어야 합니다.

Q. 모바일 랜딩페이지 첫 화면 크기는 어느 정도로 봐야 하나요?
일반적인 스마트폰 기준 가로 360~430px, 세로는 브라우저 UI를 뺀 600~750px 정도로 보시면 됩니다. 인스타그램·페이스북 인앱 브라우저는 상단 바 때문에 이보다 더 좁습니다. 반드시 실제 기기에서 광고를 눌러 들어가는 방식으로 확인하는 편이 정확합니다.

Q. 랜딩페이지 첫 화면에 구매 버튼을 넣어야 하나요?
상품의 고민 깊이에 따라 다릅니다. 저관여·저가 상품은 첫 화면에 구매 버튼을 두는 게 유리하고, 고관여 상품은 상담 신청이나 자료 받기처럼 부담이 낮은 CTA가 적합합니다. 중간 단계 상품은 하단 고정 버튼으로 스크롤 중에도 항상 보이게 두는 방식을 많이 씁니다.

Q. 랜딩페이지 이탈률이 높을 때 첫 화면부터 바꿔야 하나요?
먼저 로딩 문제인지 확인해야 합니다. 링크 클릭 대비 랜딩페이지 조회가 크게 낮다면 첫 화면이 뜨기 전에 이탈하는 것이므로 이미지 용량과 로딩 속도부터 줄여야 합니다. 로딩이 정상인데 참여 시간이 짧다면, 그때 헤드라인과 소재 메시지 일치 여부를 점검합니다.

Q. 첫 화면 팝업은 전환에 도움이 되나요?
광고로 처음 들어온 사용자에게 진입 즉시 뜨는 팝업은 대부분 이탈 요인이 됩니다. 헤드라인보다 닫기 버튼을 먼저 보게 되기 때문입니다. 쓰더라도 광고 유입은 제외하거나, 일정 시간·스크롤 이후로 지연시키는 편이 안전합니다.

마무리

랜딩페이지 첫 화면에서 성과가 갈리는 이유는 대부분 디자인이 아니라 구성입니다.
광고에서 한 약속이 첫 화면에서 끊기거나, 필요한 정보가 스크롤 아래로 밀려나 있는 구조가 이탈을 만듭니다.

헤드라인 → 서브카피 → 비주얼 → CTA·신뢰 요소

이 4가지를 모바일 인앱 브라우저 기준으로, 소재와 같은 언어로 배치하는 것이 출발점입니다.
그리고 고칠 때는 헤드라인부터 하나씩 바꾸고, 전환 데이터가 충분히 쌓인 뒤에 판단해야 합니다.

광고 지표는 괜찮은데 전환이 따라오지 않는다면, 오늘 광고를 직접 눌러 들어가 첫 화면에 무엇이 보이는지부터 확인해 보시기 바랍니다.
첫 화면을 넘어 랜딩페이지 전체를 소재에 맞춰 설계하는 순서는 아래 글에서 이어서 보실 수 있습니다.

광고 랜딩페이지 만드는 법: 소재와 맞추는 4단계 설계 기준