gap-decorations: 이제 gap도 꾸밀 수 있다

CSS에서 gap 속성은 flex 또는 grid 레이아웃 내 아이템 간의 간격을 간단하게 조절할 수 있게 해준다. 그러나 그동안 gap으로 생긴 공간은 단순한 “빈 공간”일 뿐, 개발자가 시각적인 스타일을 적용할 수는 없었다.

최근 Chrome에서 실험적으로 도입된 gap-decorations 기능은 이러한 제한을 해결하기 위한 시도다. 이 글에서는 기존 문제점과 gap-decorations 기능의 핵심, 실제 활용 방식에 대해 살펴본다.

기존 문제: gap에는 스타일을 줄 수 없었다

예를 들어 다음과 같은 flex 컨테이너가 있다고 하자.

css
복사편집
ul {
  display: flex;
  gap: 16px;
}

이렇게 설정하면 ul 내부 항목들 사이에 16px의 간격이 생긴다. 하지만 이 간격은 단순한 공간일 뿐 DOM 요소로 취급되지 않기 때문에, 다음과 같은 작업은 불가능했다.

• 간격 사이에 구분선을 넣는 것
• 간격에 그림자나 배경을 적용하는 것
• 간격에 애니메이션 효과를 부여하는 것

결과적으로 개발자는 다음과 같은 우회 방법을 써야 했다.

• 각 항목에 border-right, border-bottom 등을 적용한 후 마지막 요소 제외 처리
• 가상 요소(::after)를 사용해 임의의 선을 만들고 위치 조정
• 실제로 gap 대신 빈 요소(<div class="divider">)를 삽입

이는 유지보수성이 낮고, 코드가 복잡해지는 원인이었다.

gap-decorations: gap을 스타일링 가능한 영역으로 확장

gap-decorations는 이러한 문제를 해결하기 위한 CSS 확장 기능이다. 핵심은 간단하다.

gap 공간을 시각적으로 스타일링 가능한 “가상의 영역(fragment)”으로 만들어주고, 여기에 ::before, ::after 등의 가상 요소를 적용할 수 있게 한다.

이제 gap으로 생긴 간격을 일종의 스타일링 가능한 “공간”으로 간주할 수 있으며, 이를 통해 다음과 같은 스타일 적용이 가능해진다.

• 간격마다 선, 그림자, 배경 적용
• 간격을 기준으로 시각적 분리 효과 부여
• gap 사이에 애니메이션 삽입

사용 예시

css
복사편집
ul {
  display: flex;
  gap: 20px;
  gap-decoration: auto;
}

ul::before {
  content: '';
  gap-decoration: inline;
  background: lightgray;
  width: 100%;
  height: 1px;
}

위 코드는 각 아이템 사이의 gap 공간에 회색 선을 삽입하는 간단한 예다.

gap-decoration 속성 옵션

브라우저 지원 및 실험 설정

현재 이 기능은 Chrome 127 이상에서만 실험적으로 지원된다. 사용하려면 다음과 같은 절차가 필요하다.

1. 주소창에 chrome://flags/#enable-gap-decoration-pseudo 입력
2. 해당 설정을 Enabled로 변경
3. 브라우저 재시작

또한, 아직 표준화가 완료되지 않았기 때문에 production 환경에서는 사용을 권장하지 않는다. 실험적 UI 또는 프로토타입 단계에서 활용하는 것이 적절하다.

향후 활용 가능성

디자인 요구사항이 점점 더 정교해지는 상황에서, 요소 간 구분을 시각적으로 처리하는 수요는 계속 증가하고 있다. 특히 리스트, 카드 컴포넌트, 반복 요소 등에 있어 자연스러운 구분이나 트랜지션 효과를 줄 때 매우 유용하게 활용될 수 있다.

또한 현재는 ::before, ::after 가상 요소만 지원되지만, 향후 다른 CSS 기능과의 연계도 기대해볼 수 있다.

TI Tech Lab 이유진 연구원

Source

• https://developer.chrome.com/blog/gap-decorations