<title>🗞️ 접힘선 위 콘텐츠 가이드

뷰포트 높이 (px)

브라우저 UI 높이 (px, 주소창·탭 등, 없으면 0)

페이지 전체 높이 (px)

확인할 요소의 상단 위치 (px, 페이지 맨 위에서)

확인할 요소의 높이 (px)

접힘선 위 노출량을 내 기준으로 재는 방법

접힘선은 기기와 브라우저마다 달라서 하나의 숫자로 고정할 수 없습니다. 그래서 이 도구는 기준 높이를 먼저 입력받습니다. 뷰포트 높이와 주소창·탭이 차지하는 높이를 넣으면 실제로 보이는 높이가 나오고, 거기에 확인할 요소의 상단 위치와 높이를 더하면 그 요소가 첫 화면에 전부 보이는지, 일부만 보이는지, 아예 아래로 밀렸는지를 px과 비율로 알려 줍니다.

접힘선 높이는 뷰포트 높이 − 브라우저 UI 높이입니다. 요소의 보이는 높이는 접힘선 − 상단 위치를 0과 요소 높이 사이로 자른 값이고, 끝까지 보기 위한 스크롤은 상단 위치 + 요소 높이 − 접힘선을 0 미만으로 내려가지 않게 자른 값입니다. 보이는 비율은 소수 1자리로 표시하며 전부 보임·일부 보임 판정도 같은 자리에서 하므로 수치와 결론이 어긋나지 않습니다. 2026년 10월 기준 기하 계산만 씁니다.

이 도구는 기준 높이를 제시하지 않습니다. 접힘선을 몇 px로 보라거나 어떤 요소를 접힘선 위에 두라는 권장안도 없습니다. 기기별 뷰포트 높이는 OS·브라우저 버전·주소창 동작에 따라 달라 공인된 대표값이 없기 때문입니다. 실제 사용자 분포나 스크롤 깊이 통계, 모바일 주소창이 숨는 동작은 다루지 않습니다.

자주 묻는 질문

뷰포트 높이는 어디서 확인할까?

브라우저 개발자 도구 콘솔에서 window.innerHeight 값을 읽으면 UI를 뺀 높이가 바로 나옵니다. 이 값을 쓸 때는 브라우저 UI 높이를 0으로 두면 됩니다.

접힘선 위에 무엇을 둬야 할까?

이 도구는 노출량만 계산하고 배치는 제안하지 않습니다. 기기마다 접힘선이 다르고 어떤 요소를 위에 둬야 한다는 공인 기준도 없습니다.

보이는 비율이 0.0%인데 스크롤 값이 나올까?

요소가 접힘선 아래에 있으면 보이는 비율은 0.0%이고, 그 요소의 아래 끝까지 보려면 필요한 스크롤 양은 따로 계산되어 표시됩니다.

🗞️접힘선 위 핵심 콘텐츠 배치 가이드

관련된 도구

히어로 섹션 높이 비율 가이드

시선 흐름 F·Z 패턴 배치 가이드

접힘선 위 노출량을 내 기준으로 재는 방법

자주 묻는 질문

관련된 도구

히어로 섹션 높이 비율 가이드

시선 흐름 F·Z 패턴 배치 가이드

접힘선 위 노출량을 내 기준으로 재는 방법

자주 묻는 질문

같은 카테고리 도구