CSS gap·column-rule·row-rule: 간격과 구분선을 헷갈리지 않는 법
CSS gap·column-rule·row-rule: 간격과 구분선을 헷갈리지 않는 법
카드 목록이나 기사형 레이아웃을 만들다 보면 요소 사이를 띄우고, 그 빈 공간 가운데에 선까지 넣고 싶은 순간이 있다. 이때 gap, column-gap, row-gap, column-rule, row-rule은 이름이 비슷하지만 같은 문제를 해결하지 않는다. 먼저 레이아웃의 간격을 정하고, 선은 필요할 때만 별도의 장식으로 추가해야 화면이 좁아져도 예측 가능한 결과를 얻는다.
gap은 그리드, 플렉스, 다단 레이아웃의 행과 열 사이에 거터를 만드는 축약 속성이다. 값 하나를 쓰면 행과 열에 같은 값이 적용되고, 두 값을 쓰면 앞은 행 방향, 뒤는 열 방향의 간격을 뜻한다. 예를 들어 카드 그리드에 gap: 24px을 주면 카드 자체의 바깥 여백을 하나씩 조절하지 않아도 형제 요소 사이의 간격을 일관되게 관리할 수 있다. 가장자리의 여백은 컨테이너 padding으로, 카드 내부의 여백은 카드 padding으로 구분하면 책임이 훨씬 선명해진다.
플렉스에서 두 값의 해석은 특히 한 번 더 확인할 만하다. 주축이 가로인 기본 flex-direction: row에서는 첫 값이 여러 줄 사이, 둘째 값이 같은 줄의 항목 사이 간격을 나타낸다. 주축을 세로로 바꾸면 그 관계가 달라진다. 따라서 gap: 16px 24px을 복사하기 전에 줄바꿈 여부와 방향을 함께 읽어야 한다. 단일 축 목록이라면 값 하나로 의도를 표현하는 편이 읽기 쉽고, 복잡한 경우에는 row-gap과 column-gap을 나눠 쓰는 것도 좋은 선택이다.
margin으로 모든 간격을 만들면 첫 번째와 마지막 항목의 보정, 중첩된 컴포넌트, 줄바꿈에서 예외 규칙이 늘어난다. 그렇다고 gap이 모든 여백의 대체품은 아니다. 요소와 컨테이너 경계의 거리, 다른 레이아웃과의 분리는 여전히 margin이나 padding의 역할이다. 또 정렬 속성이 남는 공간을 분배하면 화면에서 보이는 거리가 선언한 gap보다 커 보일 수 있다. 디자인 검토 때 숫자 하나만 보지 말고 정렬과 컨테이너 크기를 같이 살피는 이유다.
column-rule은 원래 다단 텍스트의 열 사이에 보이는 선을 설정하는 속성이다. 선의 두께, 모양, 색을 한 번에 지정하며, 선은 열 사이의 빈 공간 중앙에 그려진다. 중요한 점은 이 선이 간격의 크기를 늘리거나 줄이지 않는다는 것이다. 신문처럼 이어지는 본문을 여러 열로 흘려 보낼 때는 자연스러운 도구지만, 각각 독립적으로 배치하고 싶은 카드에는 그리드나 플렉스가 더 적합한 경우가 많다. 다단 레이아웃의 열은 개별 상자를 마음대로 지정하기 어렵기 때문이다.
최근 CSS에서는 그리드와 플렉스의 거터에도 장식용 선을 표현하는 방향의 속성이 소개되고 있다. row-rule과 공통 축약인 rule은 행 또는 행·열 사이에 선을 그리는 개념이다. 다만 이런 gap decoration 계열은 브라우저별 구현 상태가 고르지 않고, 일부는 실험적이다. 운영 서비스의 핵심 정보 구조나 클릭 가능한 경계가 이 선에 의존하면 안 된다. 필요한 구분선이 반드시 모든 사용자에게 보여야 한다면, 현재 지원 범위를 확인한 뒤 보조 요소나 border를 사용하는 점진적 개선 방식을 설계하는 편이 낫다.
실무에서는 먼저 작은 화면을 기준으로 콘텐츠가 충분히 읽히는지 확인한다. 간격을 지나치게 넓혀 한 줄 카드가 너무 좁아지지 않는지, 키보드 초점과 터치 대상이 선과 겹치지 않는지, 고대비 모드에서 구분이 사라지지 않는지를 살핀다. 선은 정보를 전달하는 유일한 수단이 아니라 보조적 시각 신호여야 한다. 컨테이너 쿼리나 미디어 쿼리로 열 수와 간격을 조절할 때도, 한 가지 규칙을 여러 컴포넌트가 제각각 덮어쓰지 않도록 토큰을 정해 두면 유지보수가 쉬워진다.
결론은 단순하다. 배치의 거리는 gap으로, 컨테이너 가장자리는 padding으로, 독립된 요소의 외부 관계는 필요한 경우 margin으로 다룬다. column-rule은 다단 레이아웃의 장식이라는 본래 역할 안에서 쓰고, row-rule이나 rule은 호환성을 확인한 뒤 선택적으로 적용한다. 시각적 선보다 먼저 읽기 순서와 반응형 구조를 세우면, 같은 디자인을 더 적은 예외 규칙으로 오래 유지할 수 있다.