핵심 비유
'백화점 vs 전단지' 비유 — 명품 백화점 매장은 물건 사이가 넓고 비어 있어 고급스럽다. 반대로 전단지는 빈틈없이 빽빽해 '싸 보인다'. 여백은 비어 있는 게 아니라 "이건 비싸고 중요해"라고 말하는 공간이다. 그리고 정렬은 보이지 않는 선 — 글자·버튼이 같은 세로선에 맞춰 서면 깔끔하고 전문적으로 보이고, 제각각이면 어수선한 아마추어 느낌이 난다.
핵심 포인트
- 여백(whitespace)은 디자인 요소다 — 비울수록 남은 것이 강조된다. 카드 패딩 16
24px, 섹션 사이 2448px, 화면의 30~60%는 여백.
- 빽빽하면 답답하고 저렴해 보이고 구역 구분이 안 된다 — 여백이 곧 '숨 쉴 공간'.
- 정렬(alignment)은 보이지 않는 기준선 — 좌측 16px 기준선에 모두 맞추는 게 기본. 어긋난 정렬은 '의도'가 아니면 실수로 읽힌다.
- 정렬 예외(가운데/우측)는 의도가 있을 때만 — 가격, 아이콘 등 이유가 있는 경우.
- 여백과 정렬은 돈도 기술도 안 드는데 결과가 가장 크게 바뀌는 영역이다.
- 여백은 '바깥 여백(margin)'과 '안쪽 여백(padding)' 둘 다 챙긴다 — 카드 안쪽이 좁으면(글씨가 테두리에 붙으면) 답답하고, 카드 사이가 좁으면 어디까지가 한 묶음인지 안 보인다.
교사 팁
"비싼 브랜드 사이트 vs 동네 전단지"를 나란히 띄워 여백의 가치를 보여주고, 학생에게 잘된 화면의 여백을 일부러 줄여 보게 하면 답답함을 체감한다(design-sense whitespace classGuide). 정렬은 학생 작품(또는 예시 화면)에 세로 가이드라인을 그어 어긋난 요소를 한눈에 드러낸다(design-sense alignment classGuide). design-sense 분석 탭으로 인기 앱의 여백 비율과 좌측 기준선을 확인한다.
좋은 예 vs 나쁜 예
- ✅ 카드 패딩 16px·섹션 간 24px: 여유로운 배치, 자연스러운 구분, 고급스러움. (design-sense
whitespace)
- ❌ 여백 없이 빽빽: 답답·읽기 싫음·저렴한 인상.
- ✅ 모든 요소 좌측 16px 기준선 정렬: 깔끔·전문적. ❌ 요소마다 좌측 여백 제각각: 어수선·아마추어. (design-sense
alignment)
실습·평가
- 실습: 일부러 '빽빽하게' 만든 카드 예시를 주고, 여백(패딩 16~24·섹션 24)과 좌측 기준선만 손봐서 '숨 쉬게' 고치기. before/after 비교.
- O/X 퀴즈: "화면은 빈 공간 없이 꽉 채울수록 알차고 좋다." → X (30~60% 여백이 고급·가독성)