요약

  • W3C가 2011년 4월 공개한 첫 Grid Layout 초안은 웹 앱 배치를 위해 표, JavaScript, 세심하게 치수를 잰 부유 요소를 쓰던 관행이 화면 변화에 약하다고 적었다.
  • 2017년 12월 후보 권고안은 그리드 컨테이너와 트랙, 선, 이름 붙은 영역, 유연한 크기, 자동 배치를 설명했다. 콘텐츠 구조는 HTML의 몫으로 남았다.

식탁은 지쳐 보였다. 처음에는 데이터를 줄과 칸으로 정리했다. 그다음에는 페이지 머리말과 메뉴, 기사, 카드, 바닥글을 모조리 등에 얹었다. 부유 요소가 괴인 버팀목이 되고 JavaScript가 줄자를 들고 따라다녔다. 화면이 조금 좁아지면 길이가 다른 다리 위의 장처럼 건물이 덜컹거렸다.

2011년 4월 7일 W3C의 첫 공개 Grid Layout 작업 초안은 이런 작업장을 설명한다. 웹 애플리케이션은 문서의 단순한 흐름보다 복잡한 구역 배치가 필요했다. 제작자는 표, 스크립트, 조심스럽게 계산한 부유 요소를 조합했다. 사용 가능한 공간이 바뀌면 설계가 쉽게 깨졌다. 폭을 고정하면 넓은 화면에는 빈 곳이 남고 좁은 화면에는 내용이 눌렸다.

초안은 보이는 공간을 행과 열로 나누고 그리드 선과 칸을 기준으로 페이지 조각을 놓자고 했다. 데이터 표와의 차이가 중요하다. 표의 행과 셀은 내용 사이 관계를 뜻한다. 배치 그리드는 이미 존재하는 내용이 어디 보일지 정한다. 기사를 옆 메뉴와 나란히 두려고 기사를 표 데이터 한 칸으로 위장할 필요가 없다.

초기 도면의 부품 이름은 아직 굳지 않았다. 2011년 예시에는 grid-columns, grid-rows가 나온다. 뒤에 자리 잡은 CSS 문법과 다르다. 초벌 설계도를 오늘의 시공 규칙으로 그대로 복사할 수 없다. 판본을 거쳐 이어진 생각은 트랙과 경계, 위치, 늘어나는 크기를 선언하고 브라우저가 실제 공간에 맞춰 계산한다는 것이었다.

2017년 12월 14일 W3C 후보 권고안은 그리드 컨테이너와 자식 요소를 자세히 설명한다. 행과 열의 트랙을 정하고 선이나 영역에 이름을 붙인다. 중요한 조각은 자리를 직접 지정하고 나머지는 자동 배치에 맡길 수 있다. 트랙 크기는 고정되거나 유연하며, fr 단위는 남은 공간을 나눈다. 페이지가 하나의 화면 폭에 못 박힌 좌표표에서 벗어난다.

자동 배치는 계속 늘어나는 카드 모음에 특히 쓸모 있다. 카드가 하나 더 들어와도 제작자가 매번 몇 행 몇 열인지 손으로 적지 않아도 된다. 브라우저가 흐름 규칙에 따라 빈 자리를 찾고 필요하면 암묵적인 트랙을 만든다. 제작자는 좌석 규칙을 정하고 브라우저는 새 손님을 안내한다. 열세 번째 카드가 온다고 긴급 공사를 부르지 않는다.

Grid는 가로세로를 함께 본다. 머리말은 여러 열을 가로지르고, 탐색 메뉴는 한 줄의 트랙을 차지하며, 내용 패널은 아래에서 서로 맞춰 선다. 다른 흐름을 다루는 훌륭한 도구도 있다. 여기서는 페이지의 방을 두 방향으로 배치하는 이야기를 한다. 식탁은 제 직업으로 돌아갈 수 있다.

화면에서 방을 옮겨도 문서의 읽기 순서는 저절로 바뀌지 않는다. CSS가 어떤 조각을 오른쪽 위에 그려도 HTML의 원래 순서는 다른 읽기 방식과 탐색에서 남는다. 2017년 문서는 이 차이를 다룬다. 결론을 위로 옮긴다고 앞의 설명이 먼저 쓰인 것은 아니다. 가구를 바꾸되 책장을 넘기는 길은 생각해야 한다.

W3C의 CSS Grid Layout Level 1 공개 이력은 2011년 초안에서 시작해 2016년과 2017년 후보 권고 단계로 이어진다. 이는 규격 문서의 날짜다. 임시 받침대에서 컨테이너, 트랙, 배치, 유연한 치수가 있는 설계로 옮겨 간 과정이 보인다.

독자는 그리드 선의 이름을 묻지 않는다. 휴대전화에서 옆 메뉴가 기사를 밀어내거나 카드가 겹치면 바로 알아챈다. Grid는 발행자가 공간의 의도를 그리게 하고 브라우저가 눈앞의 화면에 맞춰 풀게 했다. 식탁에는 이제 커피잔 하나면 된다.