CSS content-visibility로 카드 목록과 긴 콘텐츠를 가볍게 보여주는 방법

홈페이지를 만들다 보면 카드 목록, 포트폴리오 리스트, 갤러리, 긴 소개 섹션처럼 한 페이지 안에 많은 콘텐츠가 들어가는 경우가 있습니다. 화면 아래쪽에 있는 콘텐츠까지 처음부터 모두 계산하고 그리면, 페이지가 무겁게 느껴질 수 있습니다.

이럴 때 확인해볼 수 있는 CSS 속성이 content-visibility입니다. 이 속성은 브라우저가 아직 화면에 보이지 않는 콘텐츠의 렌더링 작업을 필요한 시점까지 미룰 수 있게 도와줍니다.

다만 content-visibility는 사이트 속도를 무조건 빠르게 만들어주는 마법 같은 속성은 아닙니다. 어떤 영역에 적용할지, 레이아웃이 흔들리지 않는지, 실제 화면에서 체감이 있는지를 함께 확인해야 합니다.

content-visibility는 어떤 속성일까요?

content-visibility는 요소 안의 콘텐츠를 브라우저가 언제 렌더링할지 제어하는 CSS 속성입니다.

특히 자주 언급되는 값은 auto입니다.

.section {
    content-visibility: auto;
}

content-visibility: auto;를 적용하면 브라우저는 화면에 가까워지기 전까지 해당 영역의 렌더링 부담을 줄일 수 있습니다. 사용자가 스크롤해서 해당 영역에 접근하면 콘텐츠가 실제로 필요한 시점에 표시됩니다. 긴 랜딩페이지나 카드 목록처럼 아래쪽 콘텐츠가 많은 화면에서 검토해볼 수 있는 방식입니다.

카드 목록에 왜 도움이 될 수 있을까요?

카드형 UI는 같은 구조가 반복되는 경우가 많습니다. 이미지, 제목, 설명, 버튼이 들어간 카드가 20개, 30개 이상 이어지면 처음 페이지를 열 때 처리해야 할 요소가 많아집니다.

예를 들어 포트폴리오 목록이나 상품형 카드 목록은 아래처럼 여러 카드가 반복됩니다.

<section class="card-list">
    <article class="card">포트폴리오 카드 1</article>
    <article class="card">포트폴리오 카드 2</article>
    <article class="card">포트폴리오 카드 3</article>
</section>

이런 구조에서 화면 아래쪽에 있는 카드 묶음은 사용자가 바로 보지 않을 수도 있습니다. 이때 카드 리스트나 섹션 단위로 content-visibility를 적용하면 초기 렌더링 부담을 줄이는 데 도움이 될 수 있습니다.

.card-section {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

여기서 contain-intrinsic-size는 해당 영역이 아직 렌더링되지 않았을 때 사용할 예상 크기를 지정하는 역할을 합니다.

contain-intrinsic-size는 왜 함께 볼까요?

content-visibility: auto;만 적용하면 브라우저가 아직 그리지 않은 영역의 실제 높이를 정확히 알기 어려울 수 있습니다. 이때 페이지 스크롤 위치가 흔들리거나, 콘텐츠가 나타나는 순간 레이아웃이 갑자기 바뀌는 느낌이 생길 수 있습니다.

그래서 함께 확인하는 속성이 contain-intrinsic-size입니다.

.long-section {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

이 코드는 해당 섹션이 아직 렌더링되지 않았을 때 대략 800px 정도의 공간을 가진 것처럼 처리하겠다는 의미로 볼 수 있습니다. 정확한 값은 콘텐츠 구조에 따라 달라집니다. 카드가 많은 섹션인지, 이미지가 큰 갤러리인지, 텍스트가 긴 소개 영역인지에 따라 적절한 예상 크기를 잡아야 합니다.

lazy loading과는 무엇이 다를까요?

content-visibility는 이미지 lazy loading과 비슷해 보일 수 있지만 역할이 다릅니다.

이미지 lazy loading은 주로 이미지 파일을 나중에 불러오는 방식입니다.

<img src="portfolio.jpg" alt="포트폴리오 이미지" loading="lazy">

반면 content-visibility는 특정 요소의 렌더링 작업을 필요한 시점까지 미루는 방식에 가깝습니다.

정리하면 이렇게 볼 수 있습니다.

이미지가 많은 카드 목록이라면 두 개념을 함께 검토할 수 있습니다. 이미지는 lazy loading으로, 카드 섹션의 렌더링 부담은 content-visibility로 나눠 보는 식입니다.

어떤 영역에 적용하기 좋을까요?

content-visibility는 모든 요소에 무작정 적용하기보다, 아래쪽에 길게 이어지는 독립적인 섹션에 적용하는 편이 좋습니다.

활용을 검토해볼 수 있는 영역은 아래와 같습니다.

반대로 첫 화면에 바로 보이는 메인 비주얼, 핵심 문구, 주요 CTA 버튼처럼 사용자가 처음 확인해야 하는 영역에는 신중하게 접근해야 합니다. 초기 화면에서 반드시 보여야 하는 정보까지 렌더링을 미루면 오히려 사용자 경험이 나빠질 수 있습니다.

적용 전 확인할 부분

content-visibility를 적용할 때는 성능만 보면 안 됩니다. 화면이 자연스럽게 보이는지, 레이아웃이 흔들리지 않는지, 콘텐츠 확인에 문제가 없는지를 함께 봐야 합니다.

적용 전에는 아래 내용을 확인하는 것이 좋습니다.

특히 카드 목록이나 긴 섹션은 PC보다 모바일에서 더 무겁게 느껴질 수 있습니다. 적용 후에는 모바일 화면에서 스크롤 흐름을 꼭 확인하는 것이 좋습니다.

디자인 소스 수정 시 어떻게 볼 수 있을까요?

HTML 템플릿이나 웹디자인 소스를 수정할 때는 페이지 안에 어떤 콘텐츠가 많이 반복되는지 먼저 확인해야 합니다.

예를 들어 포트폴리오 템플릿이라면 카드 목록이 길게 이어질 수 있고, 병원이나 교육 템플릿이라면 진료 과목, 강의 목록, 후기, FAQ가 길게 들어갈 수 있습니다. 이런 영역은 초기 화면에서 바로 보이지 않더라도 전체 렌더링 부담에는 영향을 줄 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 마찬가지입니다. 카드 목록, 갤러리, 긴 랜딩페이지 섹션처럼 아래쪽에 많은 콘텐츠가 이어지는 구조라면 content-visibility를 적용할 수 있는지 검토해볼 수 있습니다. 다만 템플릿 구조를 무리하게 바꾸기보다, 섹션 단위로 작게 테스트하면서 실제 표시 결과와 성능 변화를 확인하는 방식이 안전합니다.

자주 묻는 질문

긴 콘텐츠는 보이는 순서에 맞게 다뤄야 합니다

긴 홈페이지를 만들 때는 모든 콘텐츠를 처음부터 같은 비중으로 처리하기보다, 사용자가 실제로 보는 순서에 맞게 화면을 구성하는 것이 중요합니다.

content-visibility는 아래쪽에 있는 긴 콘텐츠나 반복되는 카드 목록의 렌더링 부담을 줄이는 데 도움이 될 수 있는 CSS 속성입니다. 여기에 contain-intrinsic-size를 함께 검토하면 렌더링 전 공간을 잡아 레이아웃 흔들림을 줄이는 데도 도움이 됩니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 카드 목록, 갤러리, 긴 소개 섹션처럼 콘텐츠가 많이 이어지는 화면을 확인할 일이 있습니다. 이때 content-visibility의 역할을 이해하고 적용 가능 영역을 구분하면 템플릿 구조를 유지하면서도 더 가벼운 화면 구성을 검토할 수 있습니다.