CSS Grid 기술 개발 이야기

2017년 10월 17일 Microsoft Edge 브라우저는 CSS Grid 구현을 출시 했습니다. 이것은 여러 가지 이유로 획기적인 사건 이었습니다. 첫째, 대부분의 주요 브라우저에서 이 놀라운 레이아웃 도구를 활용할 수 있다는 의미입니다. 둘째, 모든 주요 브라우저가 표준 입후보 기술을 단 1년 만에 크로스 브라우징 가능하도록 구현하고 보급에 성공했다는 것입니다. 세 번째, 무엇보다 20년 전부터 갈망하던 기술 개발의 과정을 마무리 지었다는 점입니다.

Creating CSS Grid 소개 영상 (한글 자막)

염원하던 레이아웃 도구

"그리드 레이아웃"은 산업 혁명 이후, 수세기 동안 활용되는 디자인 도구입니다. CSS가 등장했던 시기에도 그리드 기반의 레이아웃을 기술적으로 구현하려 했으나, 구현 해내지 못했습니다.

Håkon Wium Lie와 함께 CSS를 공동 작성한 Bert Bos 박사는 사실 그리드 기반의 레이아웃이 꽤나 오랫동안 마음에 들었다고 이야기 했습니다. "CSS는 매우 간단한 것으로 시작되었다."라고 Bos는 회상했습니다.

"20년 전 당시에는 아주 작은 화면으로 문서의 화면을 만드는 방법이 필요했습니다. 우리가 문서에 맞는 스타일 시트를 만들 수 있다는 사실을 알았고, 스타일 시트를 만드는 시스템을 갖추려고 했습니다. 이제 또 무엇을 할 수 있을까? 라고 생각했습니다."

"레이아웃을 활용해 만든 책과 잡지를 어떻게 만들었는지 확인하는 것은 큰 영감을 주었습니다.", "모든 페이지는 내용과는 별개로 특정 레이아웃이 있습니다.", "페이지 번호는 특정 위치에 있습니다. 이미지는 항상 왼쪽 또는 오른쪽 또는 가운데에 정렬됩니다. 우리는 그것을 포착하고 싶었습니다."

웹 초기 시대, 브라우저 제조업체는 이 아이디어를 구현하기에 너무 복잡하다고 생각했고, 그리드 레이아웃 개념은 계속해서 변형 되었습니다. 1996년 Bos, Lie, Dave Raggett는 "프레임 기반" 레이아웃 모델을 발표 했습니다.

2005년에 Bos는 Advanced Layout Module을 출시 했으며, 나중에 템플릿 레이아웃 모듈로 바뀌었습니다 . 웹 디자인 커뮤니티의 이러한 노력과 열정 에도 불구하고, 브라우저 제조사 중 그 어떤 곳도 이를 구현하지 않았습니다.

템플릿 레이아웃

가능성을 넘어

CSS 워킹 그룹이 정기적으로 요구되는 Grid 구현의 벽에 부딪혔을 때, 누군가의 도움이 절실히 필요했습니다. 그리고Microsoft사의 몇몇 전문가들이 이 제안에 응답했으며, 그들 또한 자신들의 웹 기반 제품에 적용할 강력한 레이아웃 도구를 찾던 차였습니다.

Cupp은 컴퓨터 관리 유틸리티인 Microsoft Intune의 이미지를 재구성하는 UI 팀을 담당했습니다. Cupp은 Windows Presentation Foundation에서 강력한 레이아웃 도구를 제공하는 브라우저 플러그인 인 Silverlight를 좋아 했으며, 처음에는 새로운 Intune을 구축하기 위한 방편으로 그것을 활용할 계획이었습니다.

하지만 당시 Microsoft는 Windows 8 기획 단계에 있었으며 웹 기술로 앱을 개발할 수 있었습니다. 이 사실을 알게 된 Cupp는 Intune에 웹 레이아웃 기술을 접목 하려 했으나, 웹의 구시대적인 레이아웃에 실망감을 느끼며, 웹에 보다 나은 레이아웃 도구가 절실히 필요하다는 것을 깨달았습니다.

그는 새 팀에 합류하여 Silverlight와 유사한 그리드 레이아웃에 존재하는 다양한 레이아웃 옵션을 웹에 집중시키는 데 중점을 두고자 했습니다. 흥미롭게도, 새로운 팀의 사람들은 이미 필요성을 인식하고 있었습니다. 당시 많은 앱 개발자들은 iPhone과 iPad에 중점을 두었습니다. 디자이너는 2가지의 뷰포트 크기(세로, 가로 모드를 고려할 경우 4 가지)를 고려해야 했습니다. Windows는 다양한 화면 크기, 화면 해상도 및 폼 팩터(factors), 크기 조정이 가능한 윈도우를 지원해야 했습니다.

간단히 말해 Microsoft는 웹이 Windows 네이티브 애플리케이션 개발 옵션이 되려면 웹을 위한 강력하고 유연한 레이아웃 도구가 필요하다고 생각했습니다.

Cupp과 그의 팀은 Microsoft 내의 다양한 팀과 광범위하게 협력하여 초안을 작성한 후, 2011년 등장한 IE 10에 그리드 레이아웃 도구를 구현( -ms- 접두사 사용)에 제공했습니다. 이어 2012년에는 W3C에 그리드 레이아웃 사양 초안을 작성하여 제공했습니다.

물론, W3C가 전달받은 Grid 레이아웃 사양 초안이 처음 제기된 것은 아니었지만, 이번에는 실제 구현된 결과를 함께 보여줬다는 점에서 차이가 있었습니다. 즉, 그리드 레이아웃은 더 이상 이론으로만 논하던 가능성을 넘어 개발자가 실제 사용할 수 있는 도구로 다가온 것입니다.

W3C의 초대 전문가인 Rachel Andrew와 같은 진보적인 웹 디자이너 및 개발자들이 주로 참여해 개발을 도왔습니다.

"Bert Bos가 프랑스어로 진행하는 워크샵에서 CSS Grid를 처음 접했습니다. 하지만 나는 프랑스어를 잘 구사하지 못했고, 그의 슬라이드를 보고 따라 하며 노력했습니다." 라고 Andrew는 회상했습니다.

"그가 템플릿 레이아웃 사양을 시범하는 것을 보았습니다. 인쇄 기술과 프린트 레이아웃을 만들기 위해 이런 것들을 사용했던 것 같아요. 하지만 그것을 보자마자, 놀라움을 감추지 못했습니다. 우린 이걸 웹에 사용하고 싶어요. 이것은 정말로 필요로 하는 것이고, 실제 구현될 가능성이 농후했습니다. 그래서 그것을 연구하기 시작했고, 몇 가지 예제를 만들었습니다."

"예제를 만든 이후는 많은 사람들에게 이 놀라운 기술을 전하고 싶었기 때문입니다. 사람들이 그것에 대해 아무도 말하지 않으면 그것은 또 다시 사라지고 말 것입니다. 과거 Bos의 템플릿 레이아웃이 그러했던 것처럼. 그래서 Grid 레이아웃이 사라지지 않도록 하겠다는 굳은 결심을 하게 됩니다. 다른 이들 또한 이것을 알게 되면 흥분할 것이 분명합니다."

가능성의 진화

Cupp과 그의 팀이 W3C에 제출한 그리드 레이아웃 설계 초안과 IE10에 포함 된 사양은, 현재 표준 입후보 CSS Grid Layout 사양이 아닙니다. 그들의 제안은 훌륭했지만, 그 자체로는 완벽하지 못했습니다.

W3C의 초대 전문가인 Elika Etemad와 CSS 그리드 레이아웃 모듈 편집자는 Cupp이 제출한 그리드 레이아웃 시스템은 그리드 트랙 기반 시스템 이었다"고 회상했습니다. "숫자 방식의 배치 시스템만 있었고, 라인 이름도 없었고, 템플릿도 없었습니다. 하지만 그들의 시스템은 레이아웃을 위한 알고리즘을 가지고 있었습니다."

CSS 그리드 레이아웃 모듈의 또 다른 에디터인 Google의 Tab Atkins은, Bert Bos가 제시했던 원래 그리드를 실제로 구현하기 위해 CSS 워킹 그룹에 합류했습니다.

"당시에는 모든 이들이 CSS의 끔찍한 레이아웃 해킹을 배워, 문서 레이아웃을 작성했습니다. Cupp이 작성한 그리드 레이아웃 초안을 보고 올바른 배치 알고리즘을 사용하여 모든 것을 적정 위치에 배치할 수 있음을 보고 실제로 그리드 레이아웃을 구현할 수 있다는 확신이 들었습니다."

뿐만 아니라, 고정된 레이아웃을 논하던 이전 제안과 달리 이 제안은 반응형 그리드 시스템을 위한 것이었기 때문에 설득력 있는 옵션이었습니다.

Elika Etemad는 "그리드 아이템의 크기에 대해 명시적으로 설정할 수 있습니다."라고 설명했습니다. " 하지만 컨텐츠가 차지하는 크기가 될 수도 있습니다. 그것이 바로 우리가 앞으로 나아가기 위해 필요한 것이었습니다." 그러나, 초안 명세서는 CSS 워킹 그룹이 원하는 만큼 쉽게 접근할 수 없었습니다. 그래서 이전의 몇몇 연구로 부터 아이디어들을 가져오려 했습니다.

"우리가 Bert Bos의 초기 제안에 대해 정말 좋아했던 부분은 직관적으로 볼 수 있는 방식으로 레이아웃 하기 쉬운 매우 우아한 인터페이스 입니다. 이것은 템플릿을 만드는 ASCII 아트 형식과 비슷합니다. 열의 너비와 행의 높이와 같은 코드에 [it]을 넣을 수 있습니다. 이를 ASCII 다이어그램과 같은 종류로 포함시킬 수 있었기 때문에 보다 명확하게 레이아웃을 확인할 수 있었습니다."

CSS 워킹 그룹의 공동 의장인 Peter Linss는 그리드 트랙에 대해서만 논하는 걸 넘어, 그리드 라인 개념을 도입 할 것을 제안했습니다 . 그는 익숙한 그래픽 디자인 컨셉을 포함하여 디자이너가 사양에 더욱 쉽게 접근 할 수 있다고 믿었습니다.

Microsoft의 Specification Atanassov는 "처음 CSS Grid에 대해 생각할 때 매우 애플리케이션 중심적인 모델로 생각하고 있었습니다"라고 회상했습니다.

"하지만 그리드는 전혀 새로운 것이 아닙니다. 제 말은, 그리드는 아주 오랫동안 사용된 기술이라는 점입니다. 그리고 이러한 전통적인 형태의 그리드는 항상 선에 기초해 왔습니다. 문제는 우리가 그 선들을 무시해 왔다는 것입니다. 우리가 애플리케이션과 그리드, 타이포그래피 2가지 구현 방식을 결합할 수 있다는 점을 깨닫고, 저는 개인적으로 그리드를 사용하면서 이 순간이 오기를 고대했습니다."

따라서 CSS 워킹 그룹은 이러한 아이디어를 통합하기 위해 Microsoft의 그리드 레이아웃 제안을 수정하기 시작했습니다. 최종 결과를 통해 트랙이나 라인 , 템플릿, 심지어 3가지 모든 측면에서 그리드 시스템을 활용할 수 있습니다.

물론, 거기에 도달하는 과정은 쉽지 않았습니다.

반복된 담금질

Microsoft의 그리드 레이아웃 제안, Bert Bos의 Advanced 레이아웃, Peter Linss의 그리드 라인 추가와 같은 3가지 아이디어를 채택 하면서 해결해야 할 까다로운 것들을 해결해야 했습니다.

"처음에 까다로운 일들 중 일부는 우리가 결합하려고 시도했던 3가지 제안을 모두 취하려 했던 것이었습니다. 그 모든 것을 정상적으로 받아 들일 만큼 충분히 일관된 시스템을 마련했습니다."라고 Elika Etemad는 밝혔습니다.

일부 아이디어는 CSS 그리드의 1단계(level)에서 실현 될 수 없었습니다. 예를 들어 Bos의 subgrid 개념은 그리드의 임의 자손을 그리드의 자식 요소(그리드 아이템)인 것처럼 배치 할 수 있도록 허용합니다.

"subgrid 개념은 1단계에서 구현하는데 문제 되는 것들 중 하나 입니다"라고 Atanassov는 말했습니다.

"그것은 축복이자 장애물이었습니다. 그건… 그리드 레이아웃 사양을 개발 과정을 꽤 오랫동안 지연시켰습니다. 오래된 지연은 일부 참여자를 그룹에서 떠나게 하기도 했습니다. 하지만 그것은 앞으로 나아가기 위한 여정이고, 우리가 그것을 해결할 것이라는 알고 있기에 몹시 흥분됩니다. 물론 상당한 시간이 걸립 겁니다."

마찬가지로 구현하기 어려운 부분은 그리드 라인에 매핑 된 콘텐츠를 처리하는 2가지 옵션이 있었습니다. 하나는 그리드 자체에 고정된 사이즈의 트랙을 갖게 하고 오버플로우 된 콘텐츠가 오버플로우 된 정도에 따라 매핑 되어 넘쳐날 경우, 끝나는 그리드 라인을 조정할 수 있습니다. 다른 하나는 그리드 트랙이 콘텐츠를 포함하도록 증가시켜 미리 정의된 그리드 라인에서 끝낼 수 있습니다. 2가지 옵션 모두 1단계에서 만들 수 있는 것이 아니므로, 워킹 그룹은 아이디어를 보류 하기로 결정했습니다.

궁극적으로, 이러한 CSS 워킹 그룹의 의견과 편집이 반영되어 사양의 3가지 주요 목표를 고려하여 작성되었습니다.

1. 강력함 디자이너는 CSS Grid를 사용하여 "쉽고 복잡한 일을 간단하게 만들 수있는" 방식으로 디자이너의 갈망을 표현할 수 있기를 원했습니다.

2. 견고함 레이아웃이 붕괴되거나, 스크롤을 금지하거나, 실수로 내용이 사라질 수 있는 간격이 생기지 않도록 하고 싶었습니다.

3. 성능 알고리즘이 브라우저 사이즈 조정 이벤트 및 동적 콘텐츠 로드와 같은 실제 상황을 우아하게 처리 할만큼 빠르지 않은 경우, 최종 사용자가 만족스럽지 못한 경험을 하게 될 것이라는 것을 알고 있었습니다.

Elika Etemad는 "CSS를 위한 새로운 레이아웃 시스템을 설계하는 것이 많은 시간을 필요로하는 이유입니다. 그래서 많은 시간과 노력이 필요합니다." 라고 말했습니다.

대중화를 위한 노력

추천 후보 기술 사양(일명 최종본)이 표준 권고안이 되기 전 W3C는 최소한 2개의 독립적이고 상호 운용 가능한 구현을 검증해야 합니다. Microsoft는 기술 사양의 초안을 구현하고 제안했지만, 이후로 사양이 많이 바뀌었습니다. 게다가 그들은 또 다른 새로운 레이아웃 제안인 CSS Regions 기술 사양에 발생한 일로, 개발자들이 그것을 사용하기 위한 노력을 기울이기 전에 브라우저 호환 문제에 대해 고민했습니다.

CSS Regions 기술은 문서에 미리 정의된 일련의 "영역"을 통해 콘텐츠를 흐르게 하여 보다 복잡한 레이아웃을 가능하게 합니다. Microsoft는 IE 10의 접두사(-ms-) 뒤에 붙여 사용하는 CSS Regions 기술 구현을 초기에 발표했습니다. Webkit 엔진을 사용하는 Safari, Chrome 또한 이어 그것을 지원했습니다.

하지만 Firefox는 그 기술 사양에 반대했고 구현하지 않았습니다. 그래서 CSS Regions 기술 사양은 현재 림보(limbo) 상태에 있습니다. 즉, 없어질 위기에 처한 것입니다. Microsoft는 그리드 레이아웃이 CSS Regions와 같은 운명에 처하는 것을 원하지 않았습니다.

이에 Microsoft의 Atanassov는 "그리드 레이아웃은 같은 전철을 밟아서는 안된다며 이 기술이 확실히 자리 잡히도록 노력해야 함을 강조했습니다."라고 말했습니다. CSS 개발자 그룹의 일원인 Microsoft의 GregWhitworth는 "전문 편집자 중 한 명은 Google에서 일 하고 있지만, 실제 코드로 풀어내는데 주저하고 있었다." 고 회상했습니다.

이와 같은 사건이 벌어지면서 미디어 회사인 Bloomberg는 Blink와 WebKit 모두를 위한 CSS Grid를 구현하기 위해 오픈 소스 컨설팅 업체인 Igalia를 고용했습니다.

Igalia의 소프트웨어 엔지니어이자 파트너인 Sergio Villar Senin은 "2013년에 Bloomberg에서 연락을 받았습니다. 그리드 모양의 구조물을 정의하고 사용하는 것과 관련하여 매우 구체적인 요구가 있었기 때문에, 기본적으로 CSS Grid 레이아웃 사양 개발에 도움을 청하고 Blink와 WebKit에서 구현되도록 요구 받았습니다."라고 회고했습니다.

"Igalia의 작업은 개발자가 사이트를 개발할 때 실제로 사용할 수있는 것으로 볼 수 있기 때문에 엄청나게 도움이되었습니다."라고 Whitworth는 덧붙였습니다.

CSS Regions 기술 사양에 일어난 것처럼 그리드 레이아웃 또한 일어나지 않으리란 보장은 없었습니다. 다행히도 많은 수의 디자이너와 개발자가 그리드 레이아웃에 흥미를 느끼기 시작했으며 이를 구현 하라고 브라우저 제조사에 압박하기 시작했습니다.

Rachel Andrew가 참여하면서 CSS Grid 기술 사양 발전에 중대한 영향을 끼쳤습니다. 그녀가 그리드와 함께 CSS 그리드를 둘러 싼 많은 데모를 만들어 내 실제로 그것이 얼마나 유용한지 웹 제작자들에게 제시했기 때문입니다.

뒤이어 Mozilla 디자이너 Jen Simmons가 Labs를 통해 그리드 레이아웃을 활용한 실험적인 레이아웃을 만들어 발표하고, 많은 웹 제작자들에게 CSS Grid를 사용해야 한다고 설득하는데 노력하고 있습니다.

Andrews와 Simmons와 같은 리더들이 CSS Grid의 강력함과 다양성을 적극적으로 시연 하면서 웹 디자인 커뮤니티가 더욱 흥분했습니다. 그들은 CodePen과 같은 사이트에서 실험을 시작하여 아이디어를 공유하고 그리드 레이아웃 기술을 개발했습니다. 우리는 그것에 대해 자주 생각하지 않지만 개발자의 열정은 사양을 보강하거나 묻을 수 있는 힘이 있습니다.

Whitworth는 "사양을 작성하고, 구현할 수도 있지만 개발자의 요구나 기능 사용이 없다면 얼마나 많은 작업을 수행해야 하는지는 중요하지 않습니다."라고 말했습니다. 불행하게도, 그리드와 같은 사양 구현 비용으로 브라우저 공급 업체가 이를 이행하지 못하는 경우가 많습니다.

개발자들은 브라우저를 통해 조작과 실험을 하지 않고는 열정을 키우기가 어렵습니다. 개발자들의 열정이 없다면, 브라우저 제조사들은 그 아이디어가 인기를 끌었는지 보기 위해 돈을 쓰는 것을 꺼립니다. 고맙게도 Bloomberg는 기꺼이 후원자의 역할을 했고, 덕분에 CSS Grid는 기회를 잡았습니다.

Google은 2017년 1월 Android를 위한 CSS Grid를 Chromium 56에 구현했습니다. Mozilla 또한 2017년 3월 초에 Firefox에 Grid를 지원하도록 했습니다. 뒤이어 Opera, Safari 역시 CSS Grid를 지원했습니다. 아이러니 하게도 그리드 레이아웃 사양을 가장 먼저 연구하고 제안했던 Microsoft Edge는 가장 마지막에 CSS Grid를 구현 발표했습니다.

Whitworth는 CSS Grid를 지원하는 Edge를 출하하면서 다음과 같이 말했습니다. "우리는 그리드 표준 입후보 레이아웃을 지원하기 위해 업그레이드 했고, 그것을 출하하게 되어 매우 흥분됩니다."

Tab Atkins는 "모든 주요 브라우저가 거의 동시에 Grid를 지원하면서, 개발자들이 그리드를 실제로 가지고 놀 수 있게 되었고 우려했던 대체 수단 또한 생각보다 빨리 해결될 것 같다"고 말했습니다.

그리드가 가지는 의미

그리드를 사용하는데 아무런 문제가 없게 됨으로서 이제 남은 일은 이 놀라운 레이아웃 도구를 실제로 유용하게 사용하는 것입니다. 지난 20년 동안 CSS를 사용해 온 시니어 개발자들은 새로운 CSS 레이아웃 흐름을 이해하고 사용할 수 있도록 이전의 사고를 전환할 필요가 있습니다.

Bert Bos는 "각 요소에 여백과 속성을 첨부하고 배치하는 것이 아닙니다. 이제는 다른 모델을 사용할 수 있습니다. 먼저 레이아웃으로 시작한 다음, 다른 요소를 레이아웃에 적용하는 모델입니다." 라고 말했습니다.

Tab Atkins는 그리드에 대해 다음과 같은 말을 전합니다.

"이것은 문서에 요소를 배치하는데 터무니 없이 쉽게 만들어 줍니다. 사람들은 항상 보다 나은 레이아웃을 요구해왔습니다.

우리가 그동안 사용했던 좋지 않은 방법들은 오래된 테이블 레이아웃 만큼 강력하지 않습니다. 테이블 레이아웃은 강력 했고 복잡한 레이아웃을 수행할 수 있었습니다. 하지만 테이블 레이아웃은 유지 보수 문제, 의미적으로 올바르지 않은 문제가 있는 나쁜 방법입니다.

하지만 그리드는 이러한 성능과 더불어 훨씬 더 많은 이점을 제공하는, 우리가 CSS를 위해 발명한 가장 강력한 레이아웃 도구입니다."

Elika Etemad는 그리드 레이아웃에 대해 다음과 같이 이야기 했습니다.

"CSS Grid는 기본 배치를 달성하기 위해 우리가 해야 했던 모든 복잡한 작업을 완전히 불필요하게 만듭니다. 이제 사람들에게 강력한 힘을 제공할 것이고, 우리는 그것을 지켜보는 점이 매우 흥미롭습니다.

"저는 이것이 변화를 가져올 것이라고 생각합니다. CSS를 원래 의도 했던 것으로 되돌릴 것입니다. 그것은 바로 스타일과 레이아웃 언어로, 모든 구조를 마크업에서 작성하고 콘텐츠와 스타일을 깨끗하게 분리할 수 있게 할 것입니다.우리는 처음부터 시작하려고 노력해 왔습니다."

Whitworth는 "CSS Grid는 이게 끝이 아니라 시작으로, CSS 레이아웃의 미래가 기대됩니다."라고 전했습니다.

"웹 디자이너들이 CSS Grid를 점점 더 많이 활용하기 시작하면 왜 우리가 그리드 트랙, 라인, 템플릿 등 3가지를 모두 제공하는지 깨닫게 될 것 입니다. CSS Grid는 기술 사양을 계속해서 개선해 나갈 것입니다. 브라우저 제조사의 요구 사항도 충족할 수 있습니다. 커뮤니티에서 흥미를 느끼게 하고 웹 레이아웃도 더욱 발전 시킬 수 있을 겁니다."

Rachel Andrew는 그리드는 우리에게 이미 다가온 놀라운 레이아웃 도구이며, 그것에 익숙해지기 위해 노력해야 한다고 말합니다. "여기서 멈추지 않습니다. 이것은 단지 시작에 불과합니다."