CSS 갭 데코레이션, border 꼼수의 종말
그리드와 플렉스박스의 아이템 사이 빈 공간, 즉 gap에 구분선을 넣는 일은 오랫동안 개발자의 숙제였습니다. 이제 Chromium 계열에서 이 간격을 CSS가 직접 꾸미도록 지원하기 시작했습니다. 단순한 장식 기능처럼 보이지만, 레이아웃 코드의 구조 자체를 단순하게 만드는 변화라서 지금 주목할 가치가 있습니다.
"For a long time now, web developers have had to use border and pseudo-element hacks to style the gaps between the items of layouts like grid and flexbox."CSS-Tricks
무슨 일인가
핵심은 row-rule, column-rule(그리고 둘을 묶은 rule 단축 속성)입니다. 멀티 컬럼에서 쓰던 rule 개념을 grid와 flex 간격으로 확장한 것이죠. 선의 시작과 끝을 조절하는 *-inset 계열, 교차 지점에서 선이 겹치는 방식을 정하는 rule-overlap, 빈 칸 옆의 선을 숨기는 rule-visibility-items까지 세밀한 제어 속성이 함께 제공됩니다. 현재는 Chrome·Edge 149 이상에서 사용할 수 있고, 폴리필도 준비 중이라고 합니다.
여러 시각
같은 시기 CSS-Tricks의 다른 글은 "새 속성을 어떻게 안전하게 쓸 것인가"라는 물음에 서로 다른 답을 줍니다.
- CSS-Tricks (border-image 애니메이션) — 이미 있는 속성을
@property와 결합해 그라디언트 테두리를 움직이는 접근으로, 새 기능 없이도 표현력을 넓힐 수 있음을 보여 줍니다. 다만 border-image는 둥근 모서리를 따라가지 못한다는 한계를 스스로 인정합니다. - CSS-Tricks (gap decorations) — 신기능은 점진적 향상(progressive enhancement)으로 다뤄야 하며, 미지원 브라우저에서 구분선이 사라져도 괜찮은 곳에 우선 쓰라고 권합니다.
왜 중요한가
지금까지 구분선은 아이템의 border나 ::after로 흉내 냈기 때문에 줄바꿈, 반응형 열 수 변경, 빈 칸 처리 때마다 예외 코드가 늘었습니다. 간격 자체가 스타일링 대상이 되면 "마지막 줄은 선 제거" 같은 규칙이 사라지고 마크업도 가벼워집니다. 디자인 시스템 관점에서는 구분선이 레이아웃의 속성이 되어 토큰으로 관리하기 쉬워집니다. 브라우저 지원이 아직 한정적이라는 점은 도입 속도를 정하는 현실적 변수입니다.
실무 적용
- 대시보드 카드·내비게이션처럼 구분선이 장식에 가까운 곳부터
@supports로 감싸 점진적으로 도입한다. - 기존 border·의사 요소 구분선 코드를 목록으로 정리해 두고, 지원 범위가 넓어지면 일괄 교체할 후보로 관리한다.
- 구분선 두께·색·inset을 CSS 변수 토큰으로 정의해 두면 이후 전환 비용이 줄어든다.
Kenny의 관점
프론트엔드에서 가장 비싼 코드는 기능을 구현한 코드가 아니라 브라우저의 빈틈을 메우려고 쓴 코드입니다. 플랫폼이 그 빈틈을 메워 줄 때 해야 할 일은 환호가 아니라 정리입니다. 저는 새 속성을 도입하기 전에 어떤 꼼수가 사라지는지부터 따져 보는 편이고, 이번 갭 데코레이션은 삭제할 코드가 분명해서 가치가 큽니다. 다만 미지원 브라우저에서 레이아웃이 깨지지 않는 선까지만 맡기는 것이 안전한 기준입니다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗