콘텐츠를 맛있게 하는 UX "레이어 케이크 패턴"

UX의 언어

2000년대 초반, 웹 디자인의 세계는 중요한 발견에 흥분했습니다. 2006년 제이콥 닐슨은 아이트래킹 연구를 통해 사용자들이 웹 페이지를 읽을 때 'F패턴'을 따른다는 사실을 발견했습니다. 사용자들은 페이지 상단을 가로로 스캔한 후, 조금 내려와 다시 가로로 스캔하고, 마지막으로 왼쪽 세로축을 따라 내려가며 콘텐츠를 훑어봅니다. 이 패턴은 블로그, 뉴스 사이트, 텍스트가 많은 웹페이지에서 특히 두드러집니다.

그러나 몇 년 후, 또 다른 중요한 패턴이 관찰되었습니다. 닐슨 노먼 그룹의 추가 연구에서 특정 유형의 사이트에서 사용자들이 전혀 다른 방식으로 콘텐츠를 소비한다는 것이 밝혀졌습니다. 사용자들이 마치 층층이 쌓인 케이크의 크림 부분만 맛보듯 제목과 부제목만 집중해서 읽는 현상이었습니다. 이것이 바로 '레이어 케이크 패턴'입니다.

레이어 케이크 패턴은 사용자들이 페이지에서 대부분의 시선을 제목과 부제목에 고정하고, 그 사이의 본문 텍스트는 선택적으로만 읽는 스캔 패턴입니다. 아이트래킹 히트맵으로 보면, 이 패턴은 수평 줄무늬와 빈 공간이 번갈아 나타나는 형태로, 마치 케이크 층과 크림 층이 교차하는 모습과 유사합니다. 이는 전통적인 F패턴과는 확연히 다른 접근입니다.

F패턴이 페이지 상단을 가로로 스캔한 후 왼쪽으로 내려가며 F자 형태로 콘텐츠를 훑는 것과 달리, 레이어 케이크 패턴은 주로 제목과 부제목을 중심으로 수평적으로 페이지 전체를 훑습니다. 모든 단어를 읽는 것을 제외하면, 이 패턴은 페이지에서 정보를 찾는 가장 효과적인 방법입니다.

레이어 케이크 패턴의 핵심적인 특징은 다음과 같습니다.

사용자들은 본문을 읽기 전에 제목과 부제목을 평행하게 훑어봅니다.

이 패턴을 통해 사용자는 글 전체의 내용을 빠르게 파악하고 읽고 싶은 단락을 선택할 수 있습니다.

정보의 구조화를 통해 콘텐츠를 효율적으로 소비할 수 있습니다.

모바일에서의 Layer Cake Pattern의 효과적 적용을 위해서는 아래 가이드라인을 참고합니다.

명확한 시각적 계층 구조: 제목과 부제목을 크기, 색상, 폰트 등으로 명확히 구분합니다. 모바일 화면의 제한된 공간에서도 정보의 중요도를 쉽게 파악할 수 있게 합니다.

스크롤 친화적 디자인: 모바일에서는 스크롤이 자연스러운 동작이므로, 레이어를 수직으로 쌓아 긴 페이지를 만듭니다. 각 레이어 사이에 적절한 여백을 두어 콘텐츠 구분을 용이하게 합니다.

터치 친화적 요소: 헤더와 서브헤더를 터치하기 쉬운 크기로 디자인합니다. 중요한 상호작용 요소를 레이어의 시작 부분에 배치합니다.

반응형 디자인 고려: 데스크톱에서 여러 열로 표시되던 콘텐츠를 모바일에서는 단일 열로 재구성합니다. 이미지와 텍스트의 비율을 모바일 화면에 맞게 조정합니다.

텍스트뿐만 아니라 다양한 콘텐츠가 혼합된 페이지에서도 레이어 케이크 패턴의 원리는 적용될 수 있습니다. 유사한 콘텐츠를 그룹화하고, 각 콘텐츠 덩어리를 시각적으로 구분하며, 적절하게 라벨을 붙이는 방식으로 사용자의 스캔을 돕습니다.

F패턴과 레이어 케이크 패턴을 비교해보면, 둘의 효율성 차이는 명확합니다. F패턴은 텍스트가 어떻게 열로 배치되어 있는지에 따라 무작위로 내용을 건너뛰는 반면, 레이어 케이크 패턴은 사용자가 제목으로 직접 시선을 이동하여 관련 콘텐츠만 선택적으로 읽을 수 있게 합니다. 결과적으로 F패턴은 사용자가 중요한 정보를 놓칠 가능성이 높지만, 레이어 케이크 패턴은 사용자가 시간을 절약하고 관련 정보에 집중할 수 있게 도와줍니다.

이러한 특성은 모바일과 데스크톱 모두에서 유용합니다. 특히 모바일 환경의 제한된 화면 크기를 고려할 때, 레이어 케이크 패턴은 정보를 간결하게 전달하는 데 매우 효과적입니다.

결론적으로, 레이어 케이크 패턴은 콘텐츠를 명확하게 구조화하고 사용자의 효율적인 정보 소비를 돕는 강력한 UX 설계 전략입니다. 명확한 제목과 부제목을 활용하여 사용자가 콘텐츠를 쉽게 스캔하고 필요한 정보를 빠르게 찾을 수 있도록 지원하는 것이 중요합니다.