Layer cake pattern, 가로 띠로 쌓인 콘텐츠

한 줄로

페이지가 좌우 전체 너비의 가로 띠로 쌓인 모습입니다. 사용자의 시선도 그 띠를 따라 위에서 아래로 흐릅니다.

어디서 왔나

2010년대 후반, 닐슨 노먼 그룹이 웹사이트의 아이트래킹 데이터를 분석하면서 F-pattern·Z-pattern과는 다른 새 패턴을 발견했습니다. 페이지가 좌우 전체를 차지하는 가로 띠(layer)들로 구성됐을 때, 사용자의 시선이 띠를 따라 위→아래로 차례로 이동한다는 것입니다. 마치 케이크의 층(layer)을 위에서 보는 듯한 모양에서 layer cake pattern이라 부릅니다.

언제 나타나나

• 하나의 페이지 = 여러 섹션: 헤더 / 히어로 / 기능 소개 / 후기 / CTA / 푸터.
• 각 섹션이 전체 너비: 좌우 마진 없이 색·배경으로 구분.
• 수직 흐름: 사용자가 스크롤로 한 층씩 내려갑니다.

대부분의 SaaS 랜딩 페이지가 이 패턴입니다. Stripe, Notion, Linear, Vercel처럼요.

F-pattern과의 차이

• F-pattern: 텍스트 중심 페이지 (블로그, 검색 결과). 사용자가 글을 훑습니다.
• Layer cake: 비주얼·구조 중심 페이지 (랜딩, 기능 소개). 사용자가 섹션을 훑습니다.

좋은 layer cake의 조건

• 각 층이 명확한 한 가지 메시지: 한 섹션 = 한 가치.
• 시각적 변주: 흰 배경 → 어두운 배경 → 흰 배경 등 리듬.
• 각 층에 다음 단계 CTA: 사용자가 어디서 멈춰도 다음으로 갈 수 있게.
• 모바일에서도 동작: 가로 띠가 세로 카드로 자연스럽게 변환.

함정

너무 많은 층은 페이지를 길게 만듭니다. 5~7개 층이 적절합니다. 그 이상이면 사용자가 도중에 떠납니다.

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

랜딩 페이지를 만들 때 각 층의 첫 줄만 봐도 페이지 전체의 메시지가 통하는가를 자문합시다. 사용자는 모든 글을 읽지 않습니다. 위에서 아래로 빠르게 훑습니다. 그 훑기에서 핵심이 전달돼야 합니다.

관련

F-pattern · Z-pattern · Above the fold