float 코드 수십 줄을 다 버리고 CSS 다섯 줄로 끝낸 날, 솔직히 허탈했습니다. 그 전날 밤을 새웠거든요. 티스토리에 카드형 레이아웃을 넣고 싶다면 CSS Grid가 거의 유일한 정답에 가깝습니다. 단, 코드를 복붙하기 전에 반드시 확인해야 할 게 있습니다.
반응형 카드 그리드, 코드보다 스킨 구조가 먼저입니다
CSS Grid를 처음 제대로 써본 건 티스토리 리스트형 스킨을 카드형으로 바꾸려고 했을 때였습니다. float로 2열 레이아웃을 만들었는데, 카드 높이가 조금만 달라지면 레이아웃 전체가 어긋났습니다. clearfix를 추가하고, 음수 마진도 써보고, 온갖 방법을 시도했는데 결국 근본적인 해결이 안 됐습니다. 그때 Grid로 갈아탔고, display: grid에 repeat(2, 1fr) 한 줄이 그 모든 삽질을 끝냈습니다.
repeat(2, 1fr)이란 가로 공간을 동일한 비율로 2등분하여 열을 만드는 문법입니다. 1fr은 "사용 가능한 공간의 1 비율"을 의미하므로, repeat(3, 1fr)으로 바꾸면 3열 균등 그리드가 됩니다. float 시절에는 각 열의 너비를 퍼센트로 계산하고 gap까지 빼는 계산을 직접 해야 했는데, fr 단위 하나가 그 과정 전체를 없애버립니다.
반응형 처리도 마찬가지였습니다. 미디어 쿼리 없이 반응형을 구현하고 싶다면 auto-fill과 minmax() 조합을 쓰면 됩니다. 미디어 쿼리란 화면 너비에 따라 다른 CSS를 적용하는 분기 문법인데, Grid를 쓰면 이걸 전혀 안 써도 됩니다. 한 줄만으로 카드가 일정 크기 이하로 줄어들 때 자동으로 열 수가 줄어드는 것을 처음 봤을 때 진짜 신기했습니다. 데스크톱에서 4열이던 카드가 모바일에서 1열로 자연스럽게 접히는 걸 코드 한 줄로 만들어냈을 때, float로 보낸 그 밤들이 아깝다는 생각이 들었습니다.
Grid 코드보다 스킨 구조 파악이 먼저입니다
다만 Grid 코드가 아무리 깔끔해도, 티스토리에서는 기존 스킨 구조와 충돌이 생기는 경우가 많습니다. 저는 이 부분을 너무 쉽게 생각했다가 !important를 남발하는 상황이 됐고, 나중에 스킨을 조금만 수정하려고 해도 우선순위 충돌 때문에 한참을 디버깅했습니다. Grid 코드 자체보다 기존 스킨에 어떤 float나 flex 속성이 걸려 있는지 먼저 파악하는 게 훨씬 중요합니다. F12 개발자 도구로 클래스명과 상속된 스타일을 확인한 뒤 작업하는 것이 안전합니다.
CSS 속성 우선순위란 여러 CSS 규칙이 같은 요소에 충돌할 때 어떤 규칙이 적용될지 결정하는 점수 체계입니다. !important는 이 우선순위를 강제로 뒤집는 방법인데, 남발하면 나중에 어떤 규칙이 어디서 이기고 있는지 추적하기가 어려워집니다. !important 한 줄이 편한 것 같아도, 유지보수할 때는 그 한 줄이 가장 큰 걸림돌이 됩니다. 경험상 !important는 쓴 순간보다 나중에 지우는 게 훨씬 더 힘듭니다.
레이아웃이 체류 시간에 영향을 줍니다
카드형으로 바꾼 뒤 방문자당 페이지뷰가 올랐습니다. 레이아웃이 체류 시간에 직접 영향을 준다는 걸 그때 처음 실감했습니다. 이건 단순한 인상이 아닙니다. Core Web Vitals 중 하나인 CLS가 낮을수록 사용자 경험 점수가 높아집니다. CLS란 페이지가 로딩되는 동안 콘텐츠가 얼마나 흔들리거나 이동하는지 측정하는 지표로, 레이아웃이 불안정하면 점수가 나빠져 검색 순위에도 영향을 줍니다. Grid로 카드 높이를 고정하면 이 CLS 점수도 개선됩니다.
이미지 비율 고정 문제도 Grid와 함께 해결됐습니다. 썸네일 높이를 고정값으로 지정하다 보면 세로로 긴 이미지가 잘리거나, 가로로 긴 이미지가 찌그러지는 문제가 생깁니다. aspect-ratio 속성은 요소의 가로 세로 비율을 고정하는 CSS 속성으로, 16/9로 설정하면 너비가 어떻게 바뀌어도 높이가 자동으로 따라갑니다. 이 속성을 처음 알았을 때도 비슷한 허탈함이었습니다. 며칠 동안 JavaScript로 이미지 높이를 계산해서 맞추려고 했는데, CSS 한 줄로 끝났거든요.
aspect-ratio만으로는 이미지가 그 영역 안에서 어떻게 보일지는 결정되지 않습니다. object-fit: cover를 함께 쓰면 이미지가 비율 박스를 꽉 채우면서 잘려 보이게 됩니다. object-fit이란 이미지나 영상이 부모 영역을 채우는 방식을 지정하는 속성으로, cover는 비율을 유지하면서 영역 전체를 덮고 삐져나오는 부분은 잘라냅니다.
매거진 레이아웃, Grid가 특히 빛나는 이유
매거진 레이아웃에서 Grid가 특히 빛나는 이유는 grid-template-areas 속성 때문입니다. grid-template-areas란 레이아웃의 영역 이름을 텍스트로 직접 그려서 구조를 정의하는 속성입니다. 실제 신문 편집 레이아웃처럼 메인 기사가 위에 크게 오고 서브 기사 두 개가 아래에 배치되는 구조를 텍스트로 그리듯 표현할 수 있습니다. 처음 이걸 써봤을 때, 설계도를 그리고 그걸 그대로 코드로 옮기는 느낌이 들었습니다. 수십 년간 신문 지면 편집에서 쌓아온 시각적 원칙이 CSS 몇 줄로 재현된다는 게 지금도 신기합니다.
Grid가 만능이라는 생각에는 동의하지 않습니다
Grid가 만능이라는 의견도 있는데, 저는 조금 다르게 봅니다. 코드는 도구일 뿐이고, 결국 어떤 콘텐츠를 어디에 배치할지 판단하는 눈이 먼저입니다. Grid를 배우면서 오히려 레이아웃에 대해 더 많이 생각하게 됐습니다. 코드 한 줄이 짧아질수록 구조를 먼저 설계하는 습관이 더 중요해집니다. 기술이 쉬워질수록 그 기술을 쓸 이유를 더 잘 알아야 합니다.
Grid를 처음 쓰는 분이라면 복잡한 패턴보다 auto-fill과 minmax() 조합부터 시작하는 걸 권합니다. 미디어 쿼리 없이 반응형이 되는 걸 직접 확인하고 나면, 그다음 단계는 자연스럽게 따라옵니다. 코드 복붙 전에 F12 먼저 열고, 스킨 구조 파악부터 시작하면 절반은 한 겁니다. 저도 그 순서를 거꾸로 했다가 한 번 크게 돌아왔습니다.
참고:
MDN Web Docs — CSS Grid Layout
CSS-Tricks — A Complete Guide to CSS Grid
Google Search Central — Core Web Vitals