핵심 비유
'신문 1면' 비유 — 신문을 펴면 묻지 않아도 어떤 기사가 제일 중요한지 안다. 헤드라인은 크고 굵고, 기사 제목은 중간, 본문은 작다. 크기만으로 '읽는 순서'가 정해진다. 앱도 똑같다. 모든 글씨가 같은 크기면 눈이 어디부터 봐야 할지 몰라 방황한다. 시각적 계층 = 크기·굵기·색으로 "이거 먼저 봐"라고 말해주는 것이고, 정보 구조 = 그 화면이 무슨 앱이고 뭘 할 수 있는지 헤더로 첫인상을 만드는 것이다.
핵심 포인트
- 시각적 계층은 크기 차이로 중요도를 보여준다 — 제목 20
24px → 본문 1416px → 캡션 11~12px. 최소 2단계 차이가 있어야 구조가 보인다.
- 크기뿐 아니라 굵기(weight)와 색도 계층 도구다 — 굵은 글씨/진한 색이 먼저 읽힌다.
- 정보 구조의 첫 단추는 헤더 — 앱 이름 + 검색/알림 아이콘이 표준. 높이 56px, 좌우 패딩 16px, 아이콘 24px.
- 헤더가 없으면 "지금 무슨 앱·무슨 화면이지?"를 모른다. 페이지마다 헤더가 일관돼야 길을 잃지 않는다.
- 계층은 "다 강조하면 아무것도 강조 안 된다"가 핵심 — 강조는 화면당 1~2개만.
- 사람의 시선은 보통 Z자(또는 F자) 로 움직인다 — 왼쪽 위에서 시작해 오른쪽·아래로. 그래서 제일 중요한 건 왼쪽 위(로고·제목)에, 핵심 행동 버튼은 눈이 마지막에 닿는 곳에 둔다.
교사 팁
"모든 글씨가 똑같은 크기라면 어떻게 될까?"로 시작한다. 신문 1면(또는 잘 만든 앱 홈)을 보여주며 "안 알려줬는데도 왜 이 글자부터 읽었어?"를 물으면 계층을 직관으로 발견한다. 정보 구조는 헤더를 가린 앱 스크린샷을 보여주고 "이게 무슨 앱일까?" 퀴즈를 내면 헤더의 역할이 단번에 와닿는다(design-sense information-architecture classGuide). design-sense 이론 탭에서 두 원리 카드의 good/bad 예시를 띄워 비교하고, 퀴즈 탭으로 O/X 즉시 점검.
좋은 예 vs 나쁜 예
- ✅ 제목 24px → 본문 14px → 캡션 12px: 시선이 위에서 아래로 자연스럽게 흐름. (design-sense
visual-hierarchy)
- ❌ 모든 텍스트가 같은 16px: 뭐가 중요한지 구분 불가, 시선 방황.
- ✅ 헤더 = 앱 이름 + 검색 + 알림: 어떤 앱인지 한눈에. ❌ 헤더 없이 바로 콘텐츠: 정체불명. (design-sense
information-architecture)
- ✅ 유튜브 영상 카드: 썸네일(큼) → 제목(굵게) → 채널명·조회수(작고 연하게). 한 카드 안에서도 계층이 또렷. ❌ 제목·채널·조회수가 다 같은 굵기·크기: 뭐가 영상 제목인지 헷갈림.
실습·평가
- 실습: 같은 텍스트 5줄(제목·소제목·본문·캡션·버튼)을 '전부 16px'로 준 뒤, 학생이 크기·굵기를 조정해 계층을 만들어 보게 한다(종이 또는 내디자인 탭 프리뷰).
- O/X 퀴즈: "화면에서 강조는 많을수록 좋다." → X (1~2개만, 다 강조하면 계층 붕괴)