CSS 컨테이너 쿼리를 활용한 유연한 반응형 디자인 구현

CSS 컨테이너 쿼리는 웹 개발자가 컴포넌트 기반의 반응형 디자인을 구현하는 데 있어 중요한 진전을 제공합니다.

컨테이너 쿼리의 필요성

• 기존 미디어 쿼리의 한계: 전통적인 미디어 쿼리는 브라우저 전체 너비에 따라 스타일을 변경합니다. 이로 인해, 동일한 컴포넌트가 드로어(drawer)나 모달(modal)과 같이 좁은 컨테이너 내에 있을 때와 전체 화면에 있을 때 다른 레이아웃을 가져야 하는 경우, CSS만으로는 효과적인 대응이 어려웠습니다.

• 재사용성 문제: 브라우저 너비 기반의 브레이크포인트는 컴포넌트의 재사용성을 저해했습니다. 좁은 컨테이너와 넓은 컨테이너에 동일한 컴포넌트를 사용하려면 별도의 스타일 규칙을 적용하거나 복잡한 로직이 필요했습니다.

컨테이너 쿼리 적용 예시

비디오에서는 주문 목록과 상세 보기를 통해 컨테이너 쿼리의 강력함을 시연합니다.

• 시나리오:
  • 개별 주문을 클릭하면 드로어 형태로 열리며, 이때 내용은 단일 컬럼으로 표시됩니다.
  • 동일한 주문을 전체 화면으로 열면, 내용은 두 개의 컬럼으로 표시됩니다.
  • 이때, 두 경우 모두 동일한 부분(partial) 템플릿을 재사용합니다.

구현 방법

1. 컨테이너 정의: 반응형 동작을 제어할 부모 요소에 @container 속성을 추가하여 해당 요소를 컨테이너로 정의합니다.
   • 예시: application.html.erb의 yield 부분에서 렌더링되는 new 뷰에 @container를 적용합니다.
2. 컨테이너 기반 브레이크포인트 사용: 기존의 lg:flex-row와 같은 브라우저 너비 기반의 Tailwind CSS 클래스 대신, @lg:flex-row와 같이 @ 접두사를 사용하여 컨테이너 기반의 브레이크포인트를 지정합니다.
   • flex flex-column (기본적으로 컬럼 레이아웃)
   • @lg:flex-row (컨테이너의 너비가 lg 브레이크포인트 이상일 때 행 레이아웃)

결과

• 전체 화면: 화면 너비가 lg 브레이크포인트보다 넓으면 내용이 행(row)으로 표시되고, 좁아지면 컬럼(column)으로 변경됩니다.

• 모달/드로어: 모달이나 드로어와 같이 좁은 컨테이너 내에서 열릴 경우, 해당 컨테이너의 너비가 lg 브레이크포인트보다 좁기 때문에 내용이 자동으로 컬럼(column)으로 표시됩니다. 이러한 방식으로, 컴포넌트는 자신이 속한 컨테이너의 크기에 따라 독립적으로 반응형 레이아웃을 조정할 수 있게 되어, 개발자는 훨씬 유연하고 재사용 가능한 UI를 구축할 수 있습니다.