A장에서 발견한 네 렌즈(색·글자·간격·정렬) 중 '간격·정렬·위계'를 이제 원리로 배운다. 슬라이드마다 강사가 읽고 그대로 말할 수 있는 설명 산문을 넣었고, B1→B2→B3을 "그래서/그런데"로 이어 하나의 논증으로 엮었습니다.
이 장은 위계·그리드·네비를 따로 나열하지 않는다. "눈을 안 헤매게 한다"는 한 목표를 세 단계로 쌓아 올리는 하나의 논증이다. 먼저 시선의 순서를 만들고(B1), 그 순서를 정렬·반복으로 흔들리지 않게 고정하며(B2), 마지막으로 화면 사이의 이동까지 안내한다(B3). 아래 길을 먼저 펼쳐 두고 출발한다.
신문을 펴면 누가 안 알려줘도 어떤 기사가 제일 중요한지 안다. 헤드라인은 크고 굵고, 본문은 작기 때문이다. 사람의 눈은 무질서하게 헤매는 게 아니라 예측 가능한 경로로 흐른다. 닐슨 노먼 그룹이 232명의 시선을 추적한 결과, 글이 많은 화면에선 F자, 여백이 많은 화면에선 Z자로 움직였다. 문제는, 모든 글씨가 같은 크기면 이 경로가 무너져 눈이 길을 잃는다는 것이다.
위쪽을 가로로 길게 훑고(F의 윗줄) → 조금 내려와 더 짧게 가로로(아랫줄) → 왼쪽을 세로로 빠르게 내리읽는다. 그래서 왼쪽 위와 첫 단어가 가장 많이 읽힌다.
왼위 → 오른위 → 왼아래 → 오른아래로 'Z'를 그린다. 콘텐츠가 적은 랜딩·표지에 맞고, 핵심 행동 버튼은 시선이 마지막에 닿는 오른쪽 아래에 두면 좋다.
시각적 계층이란 "무엇을 먼저 볼지"를 화면이 스스로 말해주는 것이다. 가장 쉬운 도구는 크기 — 제목 20~24px, 본문 14~16px, 캡션 11~12px처럼 최소 2단계 차이를 두면 눈이 큰 것부터 작은 것 순으로 자연스럽게 흐른다. 하지만 흔한 오해가 하나 있다.
유튜브 영상 카드: 썸네일(큼) → 제목(굵게) → 채널·조회수(작고 연하게). 한 카드 안에서도 크기·굵기·색이 단계를 만들어, 무엇이 제목인지 0.1초 만에 안다.
제목·채널·조회수가 전부 같은 크기·굵기. 다 강조하면 아무것도 강조 안 된다 — 눈이 어디부터 봐야 할지 몰라 방황한다. 이것이 위계 붕괴다.
visual-hierarchy 카드로 good/bad를 비교하고, "제목 24 / 본문 14 / 캡션 12로 같은 5줄을 다시 짜보기"를 내디자인 탭 프리뷰에서 실습 → 퀴즈 탭 O/X("강조는 많을수록 좋다 → X")로 즉시 점검.정보 구조(IA)의 첫 단추는 헤더다. 앱 이름 + 검색/알림 아이콘이 표준이고, 보통 높이 56px·좌우 패딩 16px·아이콘 24px다. 헤더를 가리면 "지금 무슨 앱, 무슨 화면이지?"를 알 수 없다. 그리고 화면 속 요소들이 흩어지지 않고 '묶음'으로 읽히는 건 우연이 아니라 게슈탈트 원리 덕분이다 — 가까이 둔 것은 한 덩어리로(근접성), 닮은 것은 같은 종류로(유사성), 진한 것은 앞으로(피겨-그라운드) 읽힌다.
information-architecture classGuide). 이어 분석 탭에 좋아하는 앱을 올려 헤더 구성요소를 찾게 한다.빈 종이에 글씨를 쓰면 줄이 삐뚤어지지만, 모눈종이 칸에 맞추면 저절로 가지런해진다. 화면도 똑같이 보이지 않는 격자(그리드) 위에 요소를 올린다. 핵심은 8px이라는 한 칸을 정해두고 모든 간격을 그 배수(8·16·24·32)로만 쓰는 것 — 그러면 눈대중 없이도 모든 게 정렬되고, 수정할 때 기준이 생긴다. 간격이 7·11·15px로 들쭉날쭉할 때 느끼는 '이유 모를 어수선함'은, 바로 이 격자가 없을 때의 증상이다.
카드 패딩 16, 섹션 사이 24처럼 모든 간격이 8의 배수. 인스타 피드처럼 끝없이 스크롤해도 리듬이 일정하고, 보이지 않는 선에 정렬돼 안정적이다.
간격이 7·11·15px로 제각각. 미세하게 어긋나 불안정하고, 수정할 때 "여길 몇 px 띄우지?"의 기준이 없어 매번 즉흥적이다.
콘텐츠가 화면 끝에 딱 붙으면 답답하고 잘려 보인다. 그래서 거의 모든 앱이 양옆 16px을 띄운다 — 가장자리 여백도 그리드의 일부다. 또 모든 카드·리스트·버튼이 같은 기준선에 정렬돼야 화면 전체가 한 몸처럼 보인다. 흔히 "그리드 = 답답한 틀"이라 오해하지만, 오히려 반대다 — 규칙이 있어야 어디를 깨도 되는지가 보인다. 자유는 기준에서 나온다.
콘텐츠를 끝에 붙이지 않는다. 양옆 16px이 사실상 표준.
왼쪽 기준선 하나로 맞추면 줄이 살아 깔끔·안정.
"여기 24 띄워"처럼 기준으로 대화 → 수정·협업이 빨라진다.
grid-layout classGuide). 짝과 교환해 '8 배수 위반' 찾아주기.큰 쇼핑몰에서 길을 안 잃는 건 곳곳에 '현재 위치'와 '층별 안내'가 있기 때문이다. 앱의 하단 탭바·헤더·뒤로가기가 바로 이 길잡이다. 네비게이션의 두 가지 일은 분명하다 — "나 지금 어디 있나"(현재 위치)와 "어디로 갈 수 있나"(이동 경로). 둘 중 하나만 빠져도 사용자는 화면 사이에서 미아가 된다.
유튜브 하단 탭(홈·Shorts·구독·보관함): 지금 있는 탭만 색·굵기로 강조. "내가 여기 있구나"가 늘 보여 길을 안 잃는다.
라벨 없이 아이콘 6개만 나열 + 현재 탭 강조 없음. 무슨 기능인지 매번 추측하고, 내가 어느 화면인지도 모른다.
"기능이 많으면 탭도 많아야"라는 직관은 틀렸다. 선택지를 늘릴수록 사용자는 더 친절해지는 게 아니라 더 느려지고 헷갈린다. 이를 처음 측정한 게 힉의 법칙이다 — 고를 게 많아질수록 결정에 걸리는 시간이 (로그함수로) 늘어난다. 그래서 하단 탭은 '전체 메뉴판'이 아니라 가장 자주 가는 길 3~5개만 꽂는 자리다.
탭이 7개로 늘면 ① 아이콘이 작아져 누르기 어렵고 ② 고를 게 많아 선택 장애가 생긴다(힉의 법칙). 핵심 길만 노출하고 부가 기능(설정·알림)은 '더보기'·마이페이지 안으로 숨긴다 — 점진적 공개. 숨겨도 사용자는 충분히 찾는다.
탭을 3~5개로 줄이면 자연히 질문이 따라온다 — "나머지 기능은 어디 갔지?" 답은 점진적 공개다: 핵심 길만 탭에 두고, 부가 기능은 '더보기'나 마이페이지 안으로 숨긴다. 사라진 게 아니라 한 겹 안으로 정리된 것이다. 그리고 추린 탭마다 아이콘 + 라벨을 붙이고, '홈은 왼쪽·마이는 오른쪽'이라는 관습 위치를 지키면, 사용자는 처음 켠 앱에서도 헤매지 않는다.
| 판단 항목 | ✅ 좋은 네비 | ❌ 헤매는 네비 |
|---|---|---|
| 개수 | 3~5개 (핵심 길만) | 7개 이상 (선택 장애) |
| 현재 위치 | 색·굵기로 강조 | 강조 없음 (미아) |
| 라벨 | 아이콘 + 글자 | 아이콘만 (추측) |
| 위치 관습 | 홈=왼쪽 · 마이=오른쪽 | 제멋대로 (재학습) |
navigation-pattern + 분석 탭).이 장은 위계·그리드·네비를 따로 배운 게 아니라, "눈을 안 헤매게 한다"는 한 목표를 세 겹으로 쌓아 올린 논증이었다. 출발점은 "안내 없는 화면에서 눈은 길을 잃는다"였고, 도착점은 "구조는 시선의 순서와 이동의 길을 미리 정한다"였다. 그 사이를 NN/g·게슈탈트·뮐러-브로크만·힉이 각자의 역할로 이어주었다.