1. 어원 및 역사적 기원
N 패턴은 F·Z 패턴과 달리 단일 연구에서 명명된 것이 아니라, 두 갈래의 흐름이 하나로 수렴하며 형성된 실무 용어다.
① 학술적 뿌리 — 안구운동 연구의 연속선: #106, #107에서 다룬 대로 루이 에밀 자발(1879)의 고정·단속운동 관찰과 알프레드 야르부스(1967)의 과제 의존적 시선 연구가 모든 스캐닝 패턴 이론의 공통 뿌리다. 여기에 하나 더해야 할 연구는 스웨덴 룬드 대학교에서 수행된 신문 지면 안구운동 실험이다. 이 연구는 신문 지면처럼 여러 개의 수직 단(column)으로 나뉜 레이아웃에서 독자가 반드시 좌상단부터 순서대로 읽지 않으며, 단(段) 사이를 오르내리는 비선형적 스캔 경로를 그린다는 사실을 안구운동 추적으로 입증했다.
② 실무 용어의 정착 — 닐슨 노먼 그룹의 "잔디깎기 패턴": N 패턴의 실질적 원형은 NN/g가 이름 붙인 두 패턴에서 찾을 수 있다. 하나는 2006년 F 패턴 연구와 함께 언급된 "지그재그 패턴(Zigzag Pattern)"으로, 이미지가 많은 페이지에서 나타나는 스캔 방식이다. 다른 하나는 2020년 캐런 퍼니스가 발표한 "잔디깎기 패턴(Lawn-Mower Pattern)"으로, 사용자가 비교표나 이미지-텍스트 교차 섹션을 스캔할 때 왼쪽에서 오른쪽으로, 다시 왼쪽으로 마치 잔디깎기 기계가 왕복하듯 시선을 이동시키는 현상을 가리킨다. 이 연구에서 참가자는 PS5와 Xbox를 비교하는 표를 보며 좌우로 오가는 체계적인 스캔 패턴을 보였고, 애플워치 제품 페이지의 지그재그형(이미지-텍스트 교차) 레이아웃에서도 동일한 왕복 패턴이 관찰되었다.
③ "N"이라는 이름이 붙은 이유: 이 왕복 스캔을 세로 방향 콘텐츠 흐름에 겹쳐 그리면 알파벳 N과 정확히 일치한다. 왼쪽 단을 아래로 훑고(N의 첫 번째 세로획), 대각선으로 시선이 건너뛰고(N의 대각선), 오른쪽 단을 다시 아래로 훑는(N의 두 번째 세로획) 구조다. 국내외 UX 실무 커뮤니티와 디자인 교육 자료에서는 이 3단 구조를 "N자형 시선 흐름"이라는 통칭으로 정리해 사용해왔으며, 이는 학술 논문의 공식 명칭이라기보다 Z·F 패턴과 짝을 이루는 실무 교육용 명명이라는 점을 분명히 해둘 필요가 있다. 즉 N 패턴은 독립적으로 발견된 새로운 현상이 아니라, 구텐베르크(#105)가 균등 텍스트에, Z(#106)가 저밀도 콘텐츠에, F(#107)가 고밀도 텍스트에 대응하듯, 다단(多段)·교차 배치 콘텐츠라는 네 번째 조건에 대응하는 하위 패턴으로 이해하는 것이 가장 정확하다.
2. 심리·신경과학 메커니즘
N 패턴이 발생하는 이유는 세 가지 인지적 기제로 설명된다.
읽기 중력과 단(段) 경계의 충돌: #105에서 다룬 읽기 중력(reading gravity)—시선이 좌상단에서 우하단으로 자연스럽게 흘러가려는 경향—은 단일 텍스트 블록에서는 매끄럽게 작동하지만, 콘텐츠가 여러 단이나 섹션으로 나뉘는 순간 이 흐름은 단 경계에서 단절된다. 사용자는 한 단을 끝까지 읽은 뒤 다음 단으로 넘어가려면 반드시 위로 되돌아가는 역행 단속운동(regressive saccade)을 수행해야 하며, 이 역행 이동이 N자의 대각선 구간을 만든다.
작업기억 부하와 앵커링 재확인: NN/g의 잔디깎기 패턴 연구에서 확인된 핵심은, 사용자가 좌우를 오갈 때마다 "지금 어느 항목을 보고 있었는지"를 재확인하기 위해 시선이 열 레이블이나 섹션 제목으로 되돌아간다는 점이다. 인간의 작업기억은 한 번에 3~4개 항목만 안정적으로 유지할 수 있어(#044 청크 참조), 비교 대상이 늘어나거나 단 사이 거리가 멀수록 이 재확인 왕복이 잦아지고 인지 부하가 커진다.
게슈탈트 근접성과 그룹 지각: 여러 단이 나열된 레이아웃에서 사용자의 시선이 정확히 다음 단으로 건너뛸 수 있는 것은 #089 근접의 법칙(Law of Proximity) 덕분이다. 같은 단 내부의 요소들은 서로 가깝게 배치되어 하나의 지각 단위로 묶이고, 단과 단 사이에는 상대적으로 넓은 여백이 있어 시선이 "이 단은 끝났다"는 신호를 받는다. 이 여백이 부족하면 N자 스캔 대신 #050 링겔만 효과와 유사하게 산만한 무작위 스캔(NN/g가 "핀볼 패턴"이라 부른 현상)으로 붕괴한다.
3. 유형 분류
N 패턴은 콘텐츠 구조에 따라 세 가지 하위 유형으로 나뉜다.
① 2단 비교형 N (Two-Column Comparison N): NN/g의 잔디깎기 패턴 원형이다. 두 개의 열(예: 요금제 A vs B, 제품 스펙 비교)을 좌우로 오가며 스캔한다. 열이 2개일 때는 시선 경로가 정확히 알파벳 N의 형태—왼쪽 세로획, 대각선, 오른쪽 세로획—를 그린다.
② 3단 이상 확장형 N (Multi-Column Extended N): 열이 3개 이상이면 N이 연속으로 이어지며 지그재그(W나 M에 가까운) 형태로 확장된다. 신문 지면, 제품 그리드, 대시보드처럼 정보 밀도가 높은 다단 레이아웃에서 나타나며, 열이 늘어날수록 각 왕복의 정확도는 떨어지고 #049 이유 제시 효과에서 다룬 것과 유사하게 사용자는 완전한 비교보다 "충분히 훑었다"는 인상에 만족하고 이탈하는 경향을 보인다.
③ 세로 스크롤 교차형 N (Vertical Scroll Alternating N): 모바일 랜딩페이지에서 가장 흔한 형태다. 이미지-텍스트-이미지-텍스트가 좌우로 교차 배치된 채 아래로 스크롤되는 구조로, 정지된 화면이 아니라 스크롤이라는 시간축 위에서 N자가 반복적으로 그려진다. 헤드스페이스(Headspace), 스트라이프(Stripe) 랜딩페이지처럼 콘텐츠가 스토리텔링 순서로 이어지는 사이트에서 전형적으로 관찰되며, #106 Z 패턴이 "한 화면 안의 정적인 N"이라면 이 유형은 "스크롤을 따라 반복되는 동적인 N"이라는 차이가 있다.
4. 글로벌 브랜드 사례
애플(Apple) 제품 페이지: NN/g의 잔디깎기 패턴 연구가 직접 인용한 사례가 애플워치 제품 페이지였다. 이미지-텍스트-이미지-텍스트가 세로로 교차 배치되어 있고, 참가자의 시선은 각 섹션 안에서 이미지와 캡션을 좌우로 오가며 스캔했다. 애플의 제품 페이지 디자인은 스크롤을 하나의 프레젠테이션 시퀀스로 활용하는 방식의 대표 사례로 꼽힌다.
헤드스페이스(Headspace): 명상 앱 헤드스페이스의 랜딩페이지는 지그재그 레이아웃을 사용해 이미지로 메시지를 전달하고 텍스트 블록으로 이를 뒷받침하며 방문자를 '무료 체험' CTA로 유도하는 구조로 소개된다. 각 섹션이 좌-우-좌 순서로 이미지와 텍스트의 위치를 바꾸며 내려가는 전형적인 세로 스크롤 교차형 N 패턴이다.
IGN 등 리뷰·비교 사이트: NN/g의 원 연구 자체가 PS5와 Xbox 세대 콘솔을 비교하는 IGN 스펙 표를 관찰한 사례에서 출발했다. 참가자는 열 레이블을 먼저 확인한 뒤 좌우로 오가는 안정적인 왕복 스캔에 진입했지만, 표 구조가 부실하거나 정보가 누락되면(연구에서는 다수의 행이 "추후 공개(TBA)"로 비어 있었다) 이 패턴이 쉽게 깨진다는 점도 함께 확인되었다.
BuzzFeed 매거진 레이아웃: 여러 열이 서로 다른 정보 밀도(대표 콘텐츠는 상세 설명, 인기 콘텐츠는 짧은 설명)로 구성된 매거진형 레이아웃은 다단 확장형 N 패턴의 대표 사례로 소개되며, 타이포그래피의 크기·색상 변화로 각 열의 위계를 구분해 왕복 스캔을 돕는다.
5. 국내(한국) 시장 사례
토스(Toss) 서비스 소개 페이지: 토스의 다수 랜딩페이지는 하나의 기능을 소개할 때 이미지(또는 목업)와 설명 텍스트를 좌우로 번갈아 배치하며 스크롤을 이어가는 구조를 쓴다. 이는 국내 핀테크·SaaS 랜딩페이지에서 보편화된 세로 스크롤 교차형 N 패턴의 전형이다.
쿠팡·네이버쇼핑 상품 비교: 다나와, 에누리 등 가격 비교 사이트와 쿠팡의 스펙 비교 표는 다단 비교형 N 패턴이 실무에서 가장 밀도 높게 사용되는 국내 사례다. 열이 3~5개까지 늘어나는 경우가 많아 순수한 N자보다는 반복되는 지그재그에 가까운 형태를 보인다.
배달의민족 신규 기능 소개 페이지: 배민의 프로모션·신규 서비스 소개 페이지 역시 아이콘/일러스트와 설명 텍스트가 교차하는 구조를 사용하며, 브랜드 특유의 유머러스한 카피와 결합해 스크롤을 유도한다. 이는 #106에서 다룬 Z 패턴의 정적 CTA 유도와 달리, 스크롤을 계속 이어가게 만드는 것 자체가 목표인 구조라는 점에서 차별점이 있다.
공공기관 정책 비교 페이지: 정부24, 국민연금공단 등의 제도 비교 안내 페이지에서도 다단 비교형 N 패턴이 사용되지만, 시각적 위계가 약한 경우가 많아 사용자가 스캔 도중 이탈하거나 다시 위로 올라가 열 레이블을 재확인하는 비효율이 자주 관찰된다.
6. 채널 전략 매트릭스
채널 - 권장 N 패턴 유형 - 핵심 설계 원칙
| 랜딩페이지 (SaaS/앱) | 세로 스크롤 교차형 | 섹션마다 좌우 위치를 규칙적으로 교대, 6~8섹션 넘지 않게 |
| 제품 스펙/요금제 비교표 | 2단 비교형 | 열 레이블을 스크롤해도 고정(sticky) 노출, 열은 2~3개로 제한 |
| 이커머스 상품 그리드 | 다단 확장형 | 카드 높이·이미지 비율 통일로 왕복 스캔 경로 예측 가능하게 |
| 모바일 앱 온보딩 | 세로 스크롤 교차형(축소) | 화면이 좁아 좌우 폭이 짧으므로 대각선 각도를 완만하게 |
| 대시보드/리포트 | 다단 확장형(주의) | 열이 4개 이상이면 잔디깎기 패턴이 붕괴하므로 그룹핑·필터 우선 |
| 뉴스레터/이메일 | 미권장 | 이메일 클라이언트 렌더링 제약으로 다단 구조는 단일 열로 축소 권장 |
7. 인접 개념 비교표
개념 - 공통점 - 차이점 - 관계
| Z 패턴 (#106) | 대각선 시선 이동 공유 | 한 화면 안에서 완결되는 정적 패턴 | N은 Z가 스크롤 축을 따라 반복·연쇄된 형태 |
| F 패턴 (#107) | 좌측 진입점 공유, 텍스트 스캐닝 계열 | F는 단일 열의 밀도 저하형 스캔, N은 복수 열 간 왕복 | 같은 계열의 '단일 열 vs 복수 열' 대응쌍 |
| 잔디깎기 패턴 (NN/g) | 정확히 동일한 현상을 가리킴 | NN/g의 공식 학술 명칭, N은 실무 교육용 통칭 | N 패턴의 원조 개념 |
| 근접의 법칙 (#089) | 그룹 지각이 스캔 경로를 결정 | 근접은 정적 지각 원리, N은 그 결과로 나타나는 동적 시선 경로 | N 패턴이 성립하려면 근접의 법칙이 먼저 지켜져야 함 |
| 청크 (#044) | 정보를 처리 단위로 묶는 과정과 관련 | 청크는 기억 저장 단위, N은 시선의 물리적 이동 경로 | 열이 많아질수록 청크 용량 초과로 N 패턴 붕괴 |
8. 한국어-영어 용어 사전
용어 - 원어 - 정의
| N 패턴 | N Pattern | 다단·교차 배치 콘텐츠에서 나타나는 N자형 왕복 스캔 흐름 |
| 잔디깎기 패턴 | Lawn-Mower Pattern | NN/g가 명명한, N 패턴의 학술적 원형이 되는 좌우 왕복 스캔 |
| 지그재그 패턴 | Zigzag Pattern | 이미지가 많은 콘텐츠에서 나타나는 비선형 스캔의 통칭 |
| 역행 단속운동 | Regressive Saccade | 이미 읽은 지점으로 되돌아가는 안구의 역방향 도약 운동 |
| 다단 레이아웃 | Multi-Column Layout | 콘텐츠를 여러 개의 수직 단으로 나누어 배치하는 구조 |
| 핀볼 패턴 | Pinball Pattern | 구조가 무너졌을 때 나타나는 비체계적·무작위적 시선 이동 |
| 앵커링 재확인 | Anchor Re-Verification | 왕복 스캔 중 기준점(열 레이블 등)을 다시 확인하는 행동 |
9. 윤리적 고려사항
비교표에서의 의도적 비대칭 배치: N 패턴의 가장 흔한 오남용은 비교표 설계에서 나타난다. 자사 상품을 왼쪽 열(먼저 보고 오래 머무는 위치)에, 경쟁 상품이나 불리한 옵션을 오른쪽 열에 배치하거나, 특정 열의 정보 밀도를 의도적으로 낮춰 왕복 스캔의 리듬을 깨뜨림으로써 사용자가 특정 항목을 충분히 검토하지 못하게 만드는 설계는 #010 대비 효과와 결합해 판단을 왜곡할 수 있다.
무한 스크롤과 결합된 과도한 유도: 세로 스크롤 교차형 N 패턴은 본래 콘텐츠를 순서대로 설득력 있게 전달하기 위한 구조지만, 이를 무한 스크롤·자동재생 요소와 결합해 사용자가 페이지를 벗어날 심리적 지점(자연스러운 종결점)을 의도적으로 제거하는 다크 패턴으로 변질될 수 있다. #019 자이가르닉 효과를 악용해 "조금만 더 보면 완결될 것 같다"는 미해결 긴장을 인위적으로 지속시키는 설계가 대표적이다.
과신의 위험: F 패턴과 마찬가지로, N 패턴 역시 검증된 물리 법칙이 아니라 특정 레이아웃 조건에서 관찰되는 경향성이다. 모든 비교 콘텐츠를 기계적으로 다단 구조에 끼워 맞추면 오히려 #051 힉의 법칙에서 다룬 선택 과부하를 유발할 수 있으며, 열이 4개를 넘어가는 순간 왕복 스캔은 예측 가능한 패턴에서 무작위 스캔으로 붕괴한다는 점을 실무자는 유념해야 한다.
마무리하며
N 패턴을 조사하며 가장 흥미로웠던 지점은, 이것이 F·Z 패턴처럼 하나의 결정적 논문에서 명명된 개념이 아니라 실무 커뮤니티가 여러 연구 결과—신문 지면 실험, NN/g의 지그재그·잔디깎기 패턴—를 관찰하고 "이건 알파벳 N을 닮았다"는 시각적 직관으로 사후에 이름 붙인 개념이라는 사실이었다. 이는 학문적 엄밀성이 부족하다는 뜻이 아니라, 오히려 시선 흐름 이론들이 처음부터 완결된 법칙 체계가 아니라 실무자들이 반복적으로 마주치는 현상을 사후적으로 유형화해온 살아있는 분류 체계라는 점을 보여준다.
Chapter 04 레이아웃 챕터를 #089 근접의 법칙부터 여기까지 관통하는 하나의 흐름이 있다면, 그것은 "인간의 시선은 결코 무작위로 움직이지 않지만, 그 경로는 콘텐츠의 구조가 만들어낸 결과물이지 디자이너가 강제할 수 있는 것이 아니다"라는 원칙이다. 구텐베르크, Z, F, N—이 네 패턴은 모두 서로 다른 이름을 가졌지만 본질적으로 동일한 질문에 대한 답이다: "이 콘텐츠의 밀도와 구조가 주어졌을 때, 사람의 눈은 어디로 흘러가는가?" 좋은 레이아웃 설계자는 이 네 가지 패턴 중 무엇을 강제로 적용할지 고민하는 대신, 자신의 콘텐츠가 어떤 조건에 놓여 있는지를 먼저 진단하고 그에 맞는 자연스러운 흐름을 설계하는 사람일 것이다.