Above the fold란? 스크롤 시대에도 첫 화면이 여전히 중요한 이유

Above the fold는 스크롤하지 않아도 보이는 첫 화면을 말해요. 요즘 사람들은 스크롤을 잘 하지만, 내려갈지 말지는 첫 화면을 보고 정해요. 그래서 첫 화면의 역할은 모든 걸 다 담는 게 아니라, "여기가 내가 찾던 곳이 맞다"는 확신을 주고 아래로 내려가게 만드는 거예요.

"요즘 누가 스크롤 안 해요? 첫 화면 같은 건 옛날 얘기죠." 작업하다 보면 이런 말을 종종 들어요. 반은 맞고 반은 틀린 말이라서, 어디까지가 맞는지 정리해 봤어요.

---

Above the fold란?

Above the fold는 페이지를 열었을 때 스크롤 없이 바로 보이는 영역이에요. 그 아래, 스크롤해야 보이는 영역은 below the fold라고 불러요.

이 말은 신문에서 왔어요. 큰 신문은 반으로 접어서 가판대에 진열했는데, 접힌 선(fold) 위쪽만 사람들 눈에 보였어요. 그래서 가장 중요한 기사와 사진을 접힌 선 위에 실었죠. 웹에서는 접힌 선 대신 브라우저 창의 아래쪽 끝이 그 선이 됐어요.

구분	Above the fold	Below the fold
보이는 시점	페이지를 열자마자	스크롤한 뒤
주로 하는 일	무슨 곳인지 알리기, 다음 행동 안내	자세한 설명, 근거, 비교
사용자 상태	"여기 맞나?" 판단 중	"좀 더 볼까" 마음먹은 뒤

---

사람들은 이제 스크롤을 잘 하지 않나요?

네, 잘 해요. 모바일이 익숙해지면서 스크롤은 거의 손버릇이 됐어요. 그런데 스크롤을 한다는 것과 아래 내용을 똑같이 본다는 건 다른 얘기예요.

첫 화면에 시선이 얼마나 몰리나요?

사용성 연구 기관 닐슨 노먼 그룹(Nielsen Norman Group)이 시선 추적으로 이걸 측정했어요. 2010년 조사에서는 페이지를 보는 시간의 약 80%가 첫 화면에 머물렀어요. 2018년에 다시 조사했을 때는 이 비율이 약 57%로 줄었지만, 처음 두 화면까지 합치면 여전히 74% 정도였어요.

숫자는 줄었지만 결론은 같아요. 사람들은 스크롤하지만, 위쪽일수록 훨씬 오래 봐요. 아래로 갈수록 대충 훑고 지나가요.

그럼 왜 스크롤을 안 하고 떠나나요?

첫 화면에서 "여긴 내가 찾던 곳이 아니네"라고 판단하면 스크롤할 이유가 없어요. 아래에 아무리 좋은 내용이 있어도, 첫 화면이 그 기대를 만들지 못하면 거기까지 내려가지 않아요.

---

Above the fold가 아직도 중요한 이유는?

첫 화면이 계속 볼지 말지를 정하기 때문이에요

사용자는 첫 화면에서 세 가지를 빠르게 확인해요.

1. 여기는 뭐 하는 곳인가?
2. 내가 찾던 게 여기 있나?
3. 다음에 뭘 누르면 되나?

이 셋에 답하지 못하면 뒤로 가기를 눌러요. 그래서 첫 화면에는 화려한 장식보다 이 세 가지 답이 먼저 있어야 해요.

검색엔진도 첫 화면을 봐요

구글은 2012년에 첫 화면을 광고로 가득 채운 페이지의 순위를 낮추는 업데이트를 내놨어요. 들어가자마자 광고만 보이면 사용자 경험이 나쁘다고 본 거예요.

지금은 Core Web Vitals의 LCP(Largest Contentful Paint) 가 첫 화면과 직접 이어져 있어요. LCP는 화면에 보이는 가장 큰 요소(대개 히어로 이미지나 큰 제목)가 그려지기까지 걸린 시간이에요. 구글은 2.5초 안쪽을 '좋음'으로 봐요. 첫 화면에 무거운 영상이나 큰 이미지를 넣으면 이 숫자가 바로 나빠져요.

모바일에서는 첫 화면이 더 좁아요

데스크톱 첫 화면에 들어가던 제목, 설명, 버튼이 모바일에서는 제목 하나만으로 꽉 차기도 해요. 모바일 첫 화면은 더 작으니까 무엇을 남기고 무엇을 아래로 보낼지 더 엄격하게 골라야 해요.

---

첫 화면에 다 넣으면 되나요?

아니요. 이게 Above the fold를 가장 많이 오해하는 부분이에요. 중요하니까 다 위로 올리자고 하면 첫 화면이 빽빽해지고, 결국 아무것도 눈에 안 들어와요.

첫 화면에 넣을 것과 아래로 보낼 것

구분	첫 화면에 둘 것	아래로 보내도 되는 것
메시지	한 줄 핵심 소개	자세한 설명, 연혁
행동	대표 버튼 하나	보조 버튼, 부가 링크
신뢰	짧은 근거 (수치, 대표 고객사)	후기 목록, 사례 전체
시각 요소	무엇인지 보여 주는 이미지 하나	갤러리, 슬라이드 여러 장

'거짓 바닥'을 조심해야 해요

첫 화면 아래쪽이 깔끔하게 끝나 보이면 사용자는 "여기서 끝이구나" 하고 스크롤하지 않아요. 이걸 거짓 바닥(false floor) 이라고 불러요. 화면 높이에 딱 맞춘 히어로 섹션에서 자주 생겨요.

그래서 저는 첫 화면 아래 끝에 다음 섹션이 살짝 걸쳐 보이게 높이를 잡아요. 카드 윗부분이나 다음 제목이 조금 보이면 사용자는 자연스럽게 "아래에 뭐가 더 있구나" 하고 내려가요.

---

화면 크기가 다 다른데 fold는 어디인가요?

정해진 선은 없어요. 노트북, 큰 모니터, 휴대폰마다 첫 화면 높이가 다르거든요. 그래서 하나의 픽셀 값을 정하기보다 자주 쓰는 화면 몇 개를 기준으로 확인하는 편이 현실적이에요.

제가 확인할 때 쓰는 기준은 이래요.

• 데스크톱: 1440×900 또는 1366×768 정도에서 핵심 메시지와 대표 버튼이 보이는지
• 모바일: 390×844 정도에서 제목과 버튼이 브라우저 주소창·하단 바에 가리지 않는지
• 공통: 첫 화면 아래 끝에 다음 내용이 살짝 보이는지

방문 통계(구글 애널리틱스 등)에서 우리 사이트 방문자가 많이 쓰는 화면 크기를 확인하고 기준을 바꾸면 더 정확해요.

---

자주 묻는 질문

---

정리