랜딩페이지 제작, '폴드'를 아는 사람은 다르게 만듭니다

⚡ 이런 내용이 담겨져 있어요

Q. 안녕하세요. 폴드라는 단어는 처음 들어보는 것 같은데 어떤 뜻인가요?

폴드(Fold)라는 단어는 신문으로부터 유래했습니다. 신문을 가판대에 진열할 때 반으로 접어서 놓았는데, 이때 반으로 접히는 선을 폴드라고 불렀습니다. 지나가는 행인은 반으로 접힌 신문의 위쪽 부분만 볼 수 있었죠. 사람들의 관심을 끌고 신문의 판매 부수를 올리기 위해서는 폴드 상단에 눈길을 끌 수 있는 헤드라인과 이미지를 사용해야만 했습니다.

Q. 그렇군요. 그렇다면 웹사이트에서 폴드는 어떤 의미인가요?

이 개념이 디지털 콘텐츠에 적용되면서 폴드는 스크롤 없이도 볼 수 있는 영역을 일컫는 단어가 되었습니다. 물론 웹사이트는 신문처럼 물리적으로 접히는 부분은 없지만 스크롤 없이도 보이는 영역과 스크롤을 해야만 볼 수 있는 영역으로 나눌 수 있습니다. 그리고 전자를 Above the Fold, 후자를 Below the Fold라고 부르고 있죠.

Q. 흥미롭네요. 그럼 폴드가 중요한 이유는 무엇인가요?

폴드가 중요한 이유는 정말 많죠. 그 중에서도 저는 아래와 같이 3가지 이유를 꼽아보고 싶네요.

1. 퍼널 기능

웹사이트에서 폴드의 중요성은 가판대 신문에서 중요한 이유와 동일합니다. 가판대의 신문이 선택받기 위해서는 매력적인 폴드가 중요하죠. 독자가 폴드 아랫부분이나 안쪽의 기사를 읽으려면 먼저 폴드를 보고 그 신문을 선택해야만 합니다. 일종의 폴드 위-폴드 아래-안쪽의 기사와 같은 퍼널 구조를 띈다고 볼 수 있습니다. 폴드가 가장 최상위 퍼널이니만큼 그 중요성은 굉장히 크죠.

마찬가지로 웹사이트에 방문한 사용자에게 폴드는 최상위 퍼널이라고 볼 수 있습니다. 사용자는 폴드에 나타난 헤드라인, 이미지, CTA 등을 가장 먼저 인지하게 되는데요, 이 영역에서 제공하는 정보에 따라 웹사이트를 추가로 탐색할지 혹은 그대로 이탈할지를 결정합니다. 일반적으로 사용자는 웹사이트를 방문하고 3초 이내에 페이지 내용을 파악하기 때문에 이 시간 동안 폴드가 사용자를 잡아둘 수 있다면 전체적인 퍼널별 전환율을 크게 개선할 수 있습니다.

2. 브랜딩 기능

폴드가 중요한 또 다른 이유는 웹사이트의 핵심적인 내용을 요약해서 보여주는 공간이라는 점입니다. 이 영역에 로고, 슬로건, 브랜드 컬러와 같은 강력한 브랜딩 요소를 넣으면 방문자는 짧은 순간에 브랜드의 핵심 요소를 파악할 수 있습니다.

방문자의 입장에서는 이 브랜드가 어떤 가치를 가지고 있고 어떻게 서비스를 제공하는지 빠르게 판단할 수 있습니다. 또한 기업 입장에서는 브랜드 아이덴티티를 각인시키고 전달하고자 하는 메시지를 주목도 있게 배치할 수 있는 영역이 바로 폴드입니다.

3. SEO 기능

기술적인 면에서도 폴드는 중요한 기능을 합니다. 바로 검색엔진 최적화(SEO)가 그것입니다. 웹사이트의 상단에 위치해 있는 만큼 사용자뿐만 아니라 검색엔진도 이 영역을 가장 먼저 읽어 들입니다. 그렇기에 이 영역의 텍스트를 구조화하고 중요한 콘텐츠를 배치한다면 검색엔진이 웹사이트의 전체적인 내용을 더 잘 이해하고 평가할 수 있습니다.

웹사이트가 검색 결과에서 보다 상위에 노출되기를 원한다면 가장 먼저 폴드를 구조화해 보시기를 추천드립니다.

Q. 그렇다면 폴드에 들어가야 하는 요소는 무엇이 있을까요?

폴드에는 다양한 요소가 들어갈 수 있습니다. 그중에서도 일반적으로 많이 사용하는 3가지 요소를 소개해보자면 다음과 같습니다.

1. 헤드라인

헤드라인은 웹사이트에 방문한 사용자가 가장 먼저 보는 요소입니다. 사용자가 이 웹사이트에서 무엇을 얻을 수 있는지 최대한 쉽고 구체적으로 작성하세요. 숫자를 사용하는 것도 좋은 방법입니다. 무수히 많은 문자 사이에서 숫자는 시선을 잡아둘 수 있고 뇌를 활성화시킵니다.

헤드라인은 Head라는 단어처럼 인간으로 치면 머리만큼이나 중요한 영역입니다. 그렇기에 끊임없이 고민을 하고 다양한 A/B 테스트를 진행해 보세요.

2. 히어로 이미지

히어로 이미지란 폴드에 표시되어 방문자의 시선을 끌 수 있는 가장 큰 이미지를 뜻합니다. 일반적으로 히어로 이미지는 폴드 영역의 대부분을 차지하는데요, 그만큼 방문자에게 시각적인 자극을 줄 수 있습니다. 때로는 아무 문자가 없는 큰 그림 하나를 보고 감동을 느끼는 것과 같이 히어로 이미지의 근본적인 목표는 소비자의 관심을 끌고 감정적으로 설득하는 것입니다.

또한 히어로 이미지 영역에 단일 이미지 대신 슬라이드나 동영상을 활용하는 경우도 많습니다. 어떤 형태이건 감정을 자극하고 서비스의 가치를 한눈에 이해할 수 있는 콘텐츠를 사용하세요.

3. CTA

CTA(콜투액션)는 사용자가 취할 수 있는 다음 행동을 안내하는 버튼 형태의 짧은 텍스트입니다. 일반적으로 ‘지금 구매하기’, ‘무료로 체험하기’와 같이 두 단어로 구성되는 경우가 많지만 경우에 따라 문장으로 작성하기도 합니다. 조합하기에 따라 무궁무진한 형태가 나올 수 있기 때문에 지속적으로 테스트를 진행하여 성과를 개선할 수 있습니다.

CTA가 줄 수 있는 가장 큰 가치는 사용자에게 무엇을 해야 할지 알려준다는 점입니다. 일반적으로 웹사이트에 유입된 사용자는 수동적으로 콘텐츠를 받아들이는 경우가 많습니다. 그렇기에 콘텐츠를 소비한 뒤 무엇을 해야 하는지 모르고 길을 잃는 경우가 종종 생깁니다. 적절한 CTA를 사용하면 이런 현상이 발생하는 것을 피할 수 있습니다.

재미있게도 소규모 기업의 70%가 CTA가 없는 웹사이트를 운영한다고 합니다. CTA를 넣는 것만으로도 상위 30%에 속할 수 있으니 꼭 CTA를 넣어보세요.

Q. 혹시 폴드를 제작할 때 주의할 점도 있을까요?

1. 가짜 바닥

가짜 바닥(False Bottom)은 사소하지만 굉장히 치명적인 디자인적 요소입니다. 가짜 바닥은 페이지의 섹션과 디바이스에서 보이는 영역이 겹쳐 마치 폴드 아래에 더 이상 콘텐츠가 없다는 착각을 불러일으킬 때 발생하는 현상입니다. 이렇게 되면 사용자가 더 이상 스크롤하지 않을 가능성이 커져 콘텐츠가 부족하다고 느끼고 사이트를 이탈할 수 있습니다.

특히 압도적인 몰입감을 주기 위해서 화면 전체를 덮는 히어로 이미지를 사용하는 경우 가짜 바닥 현상이 발생할 확률이 높아집니다. 사용자가 착각하지 않도록 스크롤하여 추가적인 콘텐츠를 확인할 수 있다는 시각적 효과를 제공하세요. 무엇보다 사용자의 입장에서 직접 화면을 조작해 보거나 사용자 테스트를 해보는 것이 중요합니다.

2. 로딩 속도

폴드는 사용자가 가장 처음 보는 화면이니만큼 높은 해상도의 이미지를 사용하거나 매력적인 영상을 사용하는 경우가 많습니다. 기기를 가득 채울 정도로 큰 해상도의 콘텐츠를 사용할 때 주의해야 할 점이 있는데요, 바로 콘텐츠 용량과 로딩 속도입니다. 큰 용량의 콘텐츠를 사용하다 보니 로딩 속도에 악영향을 주는 것이죠.

이미지를 사용하는 경우 해상도를 최적화해 주세요. 이미지 해상도 최적화만으로도 웹사이트 로딩 시간을 상당히 단축시킬 수 있으며 특히 모바일 환경에서 사용자 경험을 크게 개선할 수 있습니다.

3. 신뢰 형성

앞서 설명한 바와 같이 폴드는 사용자가 접하는 가장 첫 번째 퍼널입니다. 이 퍼널에서 폴드는 사용자가 필요로 하는 아래 3가지 정보를 제공해야 합니다.

폴드의 내용만 보고도 위 3가지 질문에 답을 할 수 있나요? 그렇다면 사용자의 신뢰를 얻을 수 있는 첫 번째 단추는 채운 셈입니다. 또한 위 내용을 작성할 때 오타가 있는지, 문장의 표현이 올바른지, CTA는 올바르게 눌리는지와 같은 기본적인 사항을 놓치지 않도록 주의하세요.

신뢰는 어렵게 쌓이고 쉽게 사라질 수 있습니다.

Q. 마지막으로 폴드를 제작하는 분들에게 조언을 해주신다면요?

최근에는 PC와 태블릿, 모바일 등 다양한 디바이스와 각기 다른 화면 크기로 인해 정확한 폴드의 크기를 특정하기 매우 어려워졌으며, 사용자의 스크롤 행동도 계속해서 변하고 있습니다. 그래서 폴드의 개념을 엄격하게 적용하기보다는 전체적인 웹사이트 사용자 경험을 고려하는 것이 중요합니다.

웹사이트의 가장 첫 번째 퍼널인 폴드를 어떻게 구성하냐에 따라 전체적인 전환율이 크게 달라지기에 이 영역을 효과적으로 구성하는 것이 중요합니다. 특히 폴드는 브랜드 이미지, 사용자 행동 유도, SEO 등 다양한 측면에서 적지 않은 영향을 주기에 지속적인 테스트를 통해 최적의 조합을 찾는 것이 중요합니다.

언제나처럼 지치지 않고 계속해서 개선해 나간다면 더 좋은 결과가 기다리고 있을 것입니다.

(본 포스팅은 전달력을 높이기 위해 인터뷰 형식으로 구성되었습니다.)

📈 컨버전 인사이트는 전환율 최적화(Conversion Rate Optimization)를 연구하는 뉴스레터입니다

전환율 최적화에 대한 내용이 도움이 되셨다면 댓글로 남겨주세요.

문의나 다른 채널에서도 만나시려면 아래 버튼을 눌러주세요. 읽어주셔서 감사합니다!

더 많은 채널에서 만나기