WEBBOOK CHAPTER

AI 웹 디자인 디렉팅: 9장 layout을 12-column 숫자보다 관계로 설계한다

9장 layout을 12-column 숫자보다 관계로 설계한다

Grid는 12칸 자체가 아니라 alignment를 공유하는 약속이다. Onda desktop hero는 copy 0.82, image 1.18 비율이다. 왼쪽 copy는 좁아 headline에 의도적 줄바꿈이 생기고 오른쪽 image는 물성을 보여 줄 면적을 확보한다.

Section마다 같은 max-width card grid를 반복하지 않는다. hero는 split, principle은 full bleed strip, class는 bordered editorial grid, story는 dark three-column, visit은 asymmetrical two-column이다. 다양하지만 공통 gutter와 type scale이 연결한다.

여백을 “남는 공간”으로 보지 않는다. 관련 항목은 가까이, 다른 결정은 멀리 둔다. 8px 배수는 유용한 출발점이지 모든 간격을 같게 만드는 규칙이 아니다. Onda는 token --space-1부터 --space-5를 역할로 쓴다.