핵심 비유
'모눈종이' 비유 — 글씨를 빈 종이에 쓰면 줄이 삐뚤어지지만, 모눈종이 칸에 맞춰 쓰면 저절로 가지런해진다. 화면도 보이지 않는 격자(그리드) 위에 요소를 올린다. 8px이라는 '한 칸'을 정해두고 모든 간격을 그 배수(8·16·24·32)로만 쓰면, 눈대중 없이도 모든 게 정렬되고 수정할 때 기준이 생긴다. 그리드 = 디자인의 모눈종이.
핵심 포인트
- 그리드는 보이지 않는 정렬선 — 요소들이 같은 선에 맞춰지면 깔끔하고 안정적으로 보인다.
- 8px 기본 단위(8pt grid) — 간격을 8의 배수(8/16/24/32)로 통일하면 일관된 리듬이 생긴다. 일반 간격 16px, 섹션 간격 24px.
- 눈대중 배치는 요소마다 간격이 제각각이라 '미세하게 어긋난' 불안정함을 준다 — 이유를 모르겠는데 어수선한 느낌의 정체.
- 그리드가 있으면 수정·협업이 쉽다 — "여기 24px 띄워"처럼 기준으로 대화할 수 있다.
- 카드·리스트·버튼 모두 같은 그리드를 공유해야 화면 전체가 한 몸처럼 보인다.
- 화면 좌우 가장자리 여백(16px) 도 그리드의 일부 — 콘텐츠가 화면 끝에 딱 붙으면 답답하고 잘려 보인다. 거의 모든 앱이 양옆 16px을 띄운다.
교사 팁
모눈종이(또는 8px 격자 출력물) 를 나눠주고 "이 칸에 맞춰 앱 홈 화면을 그려보세요"로 시작한다(design-sense grid-layout classGuide). 학생들은 칸에 맞추는 것만으로 결과물이 가지런해지는 걸 체감한다. 그다음 잘 만든 앱과 '눈대중으로 그린 화면'을 나란히 놓고 "무엇이 다른가?"를 토론. design-sense 이론 탭의 grid-layout 카드로 8px 기준을 확인하고, 8의 배수 간격(16·24)을 손가락 규칙처럼 외우게 한다.
좋은 예 vs 나쁜 예
- ✅ 8px 그리드에 맞춘 배치: 모든 요소가 보이지 않는 선에 정렬, 균일한 간격으로 안정. (design-sense
grid-layout)
- ❌ 눈대중 배치: 간격이 제각각, 미세하게 어긋나 불안정, 수정 기준 없음.
- ✅ 인스타 피드: 사진·아이콘·간격이 모두 같은 단위로 반복돼 끝없이 스크롤해도 리듬이 일정. ❌ 간격이 7px·11px·15px로 들쭉날쭉: 이유 없이 어수선한 '미세한 어긋남'.
실습·평가
- 실습: 모눈종이에 '음악 앱 홈'을 그리되 모든 간격을 8의 배수로만 — 카드 패딩 16, 섹션 사이 24. 짝과 교환해 '8 배수 위반' 찾아주기.
- O/X 퀴즈: "요소 간격은 보기 좋으면 아무 숫자나 써도 된다." → X (8px 배수로 통일해야 리듬·정렬이 생김)