Below the fold, Above the fold의 반대편

한 줄로

신문이 접힌 선 아래쪽. 가판대에서는 안 보이는 영역. 웹에서는 스크롤해야 보이는 콘텐츠입니다.

어디서 왔나

19세기 미국 신문이 가판대에 접혀 진열되면서, above the fold(접힌 선 위)와 below the fold(접힌 선 아래)라는 구분이 생겼습니다. 가판대의 시선 부동산은 접힌 선 위 절반이 독점했고, 아래쪽은 신문을 펼쳐 본 뒤에야 읽혔습니다.

웹으로 옮겨오면서 비유가 그대로 살아남았습니다. 스크롤 없이 보이는 영역 = above the fold, 스크롤해야 보이는 영역 = below the fold입니다.

데이터로 본 차이

닐슨 노먼 그룹의 아이트래킹 연구입니다.

• Above the fold: 사용자 주의의 약 80%.
• Below the fold: 약 20%.

다만 스크롤이 자연스러워진 2010년대 이후 below the fold의 가치는 다시 올라갔습니다. 좋은 콘텐츠는 사용자가 스크롤하게 만듭니다.

모바일에서

모바일의 화면은 좁고 깁니다. fold의 위치가 디바이스마다 다릅니다. iPhone SE(667px)와 iPhone 15 Pro Max(932px)의 fold가 같을 수가 없습니다. 그래서 모바일에서는 fold를 정확한 지점으로 다루기보다, 첫 800px 정도까지를 핵심 영역으로 가정합니다.

디자인 적용

Above the fold에 둘 것:

• 제품 정체 (1줄로).
• 핵심 CTA.
• 사용자가 누구인지 확인할 수 있는 정보.

Below the fold에 둘 것:

• 상세 설명.
• 사용 사례.
• 신뢰 신호 (고객 후기, 로고).
• 가격 페이지로의 추가 CTA.

스크롤 유도 디자인

below the fold로 사용자를 끌어내리는 디자인 패턴입니다.

• 부분적으로 잘린 콘텐츠: 다음 섹션이 살짝 보이게.
• 아래 화살표: "더 보기" 신호.
• 자동 스크롤 인디케이터: parallax 효과.

바이브 메이커가 챙길 한 가지

랜딩 페이지에서 핵심 가치 전달이 above the fold에서 끝나야 하지만, 모든 정보를 다 위에 욱여 넣지 말 것. Below the fold가 잘 읽히는 페이지가 결국 전환율이 더 높습니다. 위계가 강해야 합니다.

관련

Above the fold · F-pattern · Hero section