작업 방식
Layout Grid는 컬럼, 거터, 바깥 여백, 그리고 이것들이 뷰포트 크기에 따라 어떻게 달라지는지 같은 페이지 뼈대에 집중합니다. 유동형 컬럼, 고정 최대 너비 컨테이너, 적응형 레이아웃을 구분하므로, 그리드 명세가 데스크톱 스크린샷뿐 아니라 동작까지 설명할 수 있습니다.
소스는 간결한 가이드이며 구현 라이브러리가 아닙니다. 일반적인 컬럼 수와 브레이크포인트 예시는 출발점일 뿐입니다. 유용한 결과물은 콘텐츠에 맞춰 고른 그리드와, 전체 너비 영역, 컨테이너 안의 읽기 섹션, 사이드바, 반복 카드에 대한 명확한 지침입니다.
예상 결과물
- 컬럼, 거터, 여백, 컨테이너 한계를 담은 브레이크포인트 표
- 컨테이너 안, 전체 너비, 사이드바, 카드 영역에 대한 레이아웃 규칙
- 너비 간 적응 방식을 설명하는 개발자용 노트
브리프에서 검토까지
- 01그리드 유형 선택
모든 페이지에 같은 그리드가 필요하다고 가정하지 말고, 콘텐츠에 맞춰 컬럼형, 모듈형, 베이스라인, 복합 구조 중에서 고릅니다.
- 02너비 동작 지정
컬럼이 늘어나는 구간, 컨테이너가 더 이상 커지지 않는 지점, 컬럼이나 사이드바가 아래로 재배치되거나 접히는 시점을 정의합니다.
- 03중간 너비 검토
가장 작거나 가장 큰 기준 화면만이 아니라 브레이크포인트 전후의 전환도 확인합니다.