디자인 아틀라스
EN
⌘ UX 용어·법칙

어보브 더 폴드

Above the Fold

스크롤하지 않고 처음 보이는 화면 영역. 신문의 접히는 선(fold) 위쪽에서 온 표현입니다.

다른 이름: Above-the-fold폴드 위
···
html
<div class="frame">
  <div class="chrome"><span></span><span></span><span></span></div>
  <div class="content">
    <div class="hero"></div>
    <div class="fold"></div>
    <div class="sec"></div>
    <div class="sec"></div>
  </div>
  <div class="wheel">⇅</div>
</div>
css
.frame{position:relative;width:90%;height:90%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.chrome{height:9%;display:flex;align-items:center;gap:5px;padding:0 8px;border-bottom:1px solid var(--line)}
.chrome span{width:7px;height:7px;border-radius:50%;background:var(--line)}
.content{position:relative;height:91%}
.hero{position:absolute;top:6%;left:8%;right:8%;height:30%;border-radius:8px;background:var(--accent);opacity:.85}
.fold{position:absolute;top:42%;left:0;right:0;border-top:2px dashed var(--accent-2)}
.sec{position:absolute;left:8%;right:8%;height:18%;border-radius:8px;background:var(--line);opacity:.4}
.sec:nth-of-type(3){top:52%}
.sec:nth-of-type(4){top:74%}
.wheel{position:absolute;left:50%;top:44%;transform:translateX(-50%);font-size:14px;color:var(--muted);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,6px);opacity:1}}

신문이 반으로 접혀 진열될 때 위쪽 절반(fold 위)에 가장 중요한 헤드라인을 배치하던 편집 관행에서 온 용어입니다. 웹으로 넘어오며 "스크롤 없이 보이는 뷰포트 영역"을 뜻하게 됐습니다.

다만 오해도 많습니다 — NN/g 연구는 사람들이 실제로 스크롤을 잘 하며, 폴드 아래 콘텐츠를 완전히 무시하지 않는다는 걸 반복 확인했습니다. 그래도 핵심 가치 제안·주요 CTA만큼은 스크롤 없이 보여야 이탈을 줄일 수 있다는 원칙은 유효합니다 — 특히 화면 높이가 작은 모바일에서는 더 그렇습니다.

데모는 브라우저 창을 모사한 프레임 안에서, 점선 폴드 위 콘텐츠는 밝고 아래 콘텐츠는 흐리게 표시되며, 마우스 휠 아이콘이 아래로 더 있다는 걸 반복해서 알려줍니다.

언제 쓰나

히어로 섹션을 설계할 때 핵심 메시지·CTA는 뷰포트 안에 넣으세요. 단, "아래는 아무도 안 본다"는 전제로 콘텐츠를 통째로 빼지는 마세요.