Lines vs Blocks(CSS): Divide 및 Grid 설명

구분선(Divider lines)은 현대 UI 디자인에서 가장 과소평가된 도구 중 하나입니다. 언뜻 보기에는 화면 위의 얇은 선에 불과해 보일 수 있습니다. 하지만 사려 깊게 사용한다면, 어지러운 레이아웃을 깔끔하고 조직적인 인터페이스로 변화시킵니다. 단순한 선 하나가 기능 목록을 평범한 수준에서 프리미엄 수준으로 격상시킬 수 있으며, 사용자의 시선을 유도하고 정보를 더 쉽게 훑어볼 수 있게 만듭니다.

디자이너에게 구분선은 구조를 더하는 미묘한 방법입니다. 하지만 개발자에게 반응형 그리드(Responsive grids)에서 이를 구현하는 것은 종종 골칫거리처럼 느껴집니다. 이중 테두리, 겹치는 선, 지저분한 CSS 해킹(CSS hacks)은 흔히 발생하는 함정입니다.

이 지점에서 Tailwind CSS와 같은 유틸리티 우선 프레임워크(Utility-first frameworks)가 등장하여, 겉보기에는 까다로워 보이는 이 문제에 우아한 해결책을 제공합니다.

그리드에서 테두리(Borders)의 문제점

개발자에게 구분선은 반응형 레이아웃이 등장하기 전까지는 단순하게 들립니다.

테두리가 있는 그리드는 빠르게 지저분해질 수 있습니다:

• 이중으로 두꺼워진 선
• 겹치는 테두리(Overlapping borders)
• 불균일한 간격
• 깨진 모서리
• 복잡한 CSS 선택자(CSS selectors)

정적인 목업(Mockup)에서는 깔끔해 보이는 것이 실제 프로덕션 환경에서는 어려워지는 경우가 많습니다.

Tailwind의 divide가 작동하는 비밀

그리드 구분선을 마스터하려면, 먼저 Tailwind의 divide-x 및 divide-y 유틸리티가 실제로 어떻게 작동하는지 이해해야 합니다. 이들은 단순히 모든 요소에 무작정 테두리를 입히는 것이 아닙니다. 대신, CSS 인접 형제 선택자(Adjacent sibling selector, * + *)를 활용합니다.

이 레이아웃은 grid-cols-1과 divide-y를 사용합니다. 진한 파란색 가로선이 컨테이너의 맨 위나 맨 아래가 아닌, 회색 행들 사이에만 나타나는 것에 주목하세요.

이 이미지는 grid-cols-3와 divide-x를 사용하여 세 개의 요소를 한 줄로 배치한 모습을 보여줍니다. 가늘고 회색인 수직선들이 카드들을 구분합니다. 수직 구분선(vertical dividers)이 카드 위아래의 파란색 배경과 완벽하게 일치하며, 텍스트 요소들을 분리하는 동시에 매끄럽고 통일된 컨테이너를 유지하는 방식에 주목하세요.

이 이미지는 2x2 그리드(grid-cols-2)를 처리하는 방법을 보여줍니다. 표준 구분(divide) 유틸리티는 여기에서 제대로 작동하지 않습니다. 대신, 우리는 "배경 간격 트릭 (Background Gap Trick)"을 사용합니다. 밝은 회색 컨테이너(부모 배경)가 구분선 색상을 제공합니다. 네 개의 흰색 카드는 gap-px 1픽셀 간격으로 배치되어, 복잡한 수학 계산 없이도 완벽한 십자형 교차선(cross-hair intersection lines)을 만들어냅니다. 아이콘들은 정육면체(cube), 구(sphere), 피라미드(pyramid), 원기둥(cylinder)과 같은 단순한 기하학적 모양입니다.

최고의 인터페이스는 두 가지를 모두 사용합니다
가장 강력한 UI 시스템은 선(lines)과 블록(blocks)을 의도적으로 결합합니다.

예를 들어:

• 대시보드는 블록으로서 카드를 사용할 수 있습니다.
• 하지만 각 카드 내부에는 구분선(divider lines)을 사용합니다.
• 가격 섹션은 별도의 열(columns)을 사용할 수 있습니다.
• 그러면서도 미묘한 구분자(separators)를 사용하여 기능 행(feature rows)을 정리합니다.

이러한 계층적 구조는 다음과 같은 느낌을 주는 인터페이스를 만듭니다:

• 정리된, 프리미엄 느낌의, 훑어보기 쉬운, 유지보수가 쉬운

핵심은 균형입니다.

• 선이 너무 많으면 어지러워집니다.
• 블록이 너무 많으면 무거워집니다.

훌륭한 UI 디자인은 그 사이 어딘가에 위치합니다.

기억해야 할 간단한 규칙

사용자가 다음과 같이 느껴야 한다면:

• “이 항목들은 서로 연결되어 있다” → 선(lines)을 사용하세요.
• “이 항목들은 서로 다른 섹션이다” → 블록(blocks)을 사용하세요.

이 단 하나의 차이점이 대부분의 레이아웃 결정을 해결해 줍니다.