컨테이너 쿼리는 반응형 설계에 대한 매우 동적이고 유연한 접근 방식을 제공합니다. 컨테이너 쿼리는 @container at 규칙을 사용합니다. 이는 @media를 사용한 미디어 쿼리와 비슷한 방식으로 작동하지만, 대신 @container는 표시 영역과 사용자 에이전트가 아닌 상위 컨테이너에 쿼리하여 스타일 지정 정보를 처리합니다.
컨테이너 쿼리는 새로 사용 가능한 기준의 일부입니다.
컨테이너 쿼리는 컨테이너 크기에 반응하여 구성요소가 인터페이스 내 위치에 맞게 조정될 수 있게 해줍니다. 예를 들어 카드 구성요소는 배치되는 컨테이너(예: 사이드바, 히어로 섹션, 페이지 본문 내 그리드)에 따라 크기와 스타일을 조정할 수 있습니다.
다음 그림에서 볼 수 있듯이 매크로 레이아웃용 미디어 쿼리, 마이크로 레이아웃용 컨테이너 쿼리, 사용자 환경설정 기반 미디어 쿼리를 결합하여 강력한 반응형 디자인 시스템을 만들 수 있습니다. 컨테이너 쿼리 및 새로운 반응형 디자인에 대해 자세히 알아보세요.
이 문서는 전자상거래 회사가 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선한 방법을 설명하는 시리즈의 일부입니다. 이번에는 일부 기업이 컨테이너 쿼리를 어떻게 사용하고 그 이점을 누렸는지 알아봅니다.
redBus
redBus의 모바일 버전과 데스크톱 버전에 서로 다른 코드를 제공하고 있습니다. 할 일 및 cargo 페이지에서 컨테이너 쿼리를 구현한 후 이 코드를 사이트의 단일 코드베이스로 통합할 수 있었습니다. 덕분에 반응이 좋고 개발 시간이 절약되었습니다. 다음 예는 cargo 페이지를 사용하는 방법을 보여줍니다.
코드
다음 예에서 .bpdpCardWrapper는 bpdpSection라는 이름의 상위 컨테이너입니다.
컨테이너 bpdpSection의 최소 너비가 744px이면 .bpdpCardContainer 및 .subTxt, .bpdpAddress에서 선택한 구성요소의 font-size 및 line-height가 업데이트됩니다.
//Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
영향
| 이전 (여러 코드베이스) | After (단일 코드베이스) | |
|---|---|---|
| 인프라 | 별도의 인프라 (높은 비용) | 동일한 인프라 (비용 절감) |
| 디자인 | UI는 분리되었지만 일관성이 떨어집니다. | 해결하기는 어렵지만 가능합니다. |
| 성능 | 시스템이 별개이지만 성능 개선을 위한 작업이 중복되므로 처리 용이합니다. | 페이지 및 기능별로 다르지만 redBus PageSpeedInsights 점수가 80 이상입니다. |
| 개발 | 개발자팀을 분리합니다. | 시간 30~40% 단축 |
Tokopedia
Tokopedia의 제품 세부정보 페이지 (PDP)에는 매장과 제품 정보를 보여주는 여러 탭이 있습니다. 이전에는 이 페이지의 레이아웃이 3개의 열로 나뉘었으며 화면 크기가 작은 경우 왼쪽의 제품 이름이 잘리는 경우도 있었습니다 (다음 '이전' 동영상 참고).
이 레이아웃 문제를 해결하기 위해 컨테이너 쿼리를 쉽고 빠르게 채택했습니다. 이 구현 이후 제품 이름이 항상 완전히 표시되는 유연한 레이아웃을 보유할 수 있었습니다 (다음 '이후' 동영상 참고).
변경 전
변경 후
코드
다음 코드는 infowrapper라는 상위 컨테이너의 크기를 쿼리합니다.
infowrapper의 최대 너비가 360px이면 하위 구성요소의 width, margin,, padding가 조정됩니다.
container-type를 inline-size로 설정하면 상위 요소의 인라인 방향 크기를 쿼리합니다. 영어와 같은 라틴 언어에서는 텍스트가 왼쪽에서 오른쪽으로 인라인으로 흐르기 때문에 이 값은 상위 컨테이너의 너비가 됩니다.
export const styCredibilityContainer = css`
container-name: infowrapper;
container-type: inline-size;
`;
export const styBtnShopFollow = css`
margin-left: auto;
width: 98px;
@container infowrapper (max-width: 360px) {
width: 100%;
margin-top: 2px;
margin-bottom: 8px;
padding-left: 60px;
}
`;
export const styBottomRow = css`
margin-top: 4px;
padding-left: 60px;
display: flex;
align-items: center;
@container infowrapper (max-width: 360px) {
padding-left: 0px;
}
> div {
text-align: left;
margin-top: 0 !important;
}
`;
컨테이너 쿼리 사용 시 고려사항
Tokopedia는 사이트에서 텍스트 생략 부호를 찾아 사용 사례를 찾았습니다. 이는 컨테이너가 너무 작아서 사용자에게 콘텐츠가 잘릴 수 있음을 나타냅니다.
전자상거래 사이트에서 컨테이너 쿼리를 사용하는 또 다른 좋은 방법은 재사용된 구성요소를 찾는 것입니다. 예를 들어 장바구니에 추가 버튼은 상위 컨테이너에 따라 다르게 표시될 수 있습니다. 예를 들어 제품 카드에 있는 경우 아이콘만, 페이지의 기본 CTA인 경우에는 텍스트와 함께 아이콘이 표시됩니다. 이 버튼은 컨테이너 쿼리에 적합할 수 있습니다.
사이트를 점진적으로 개선할 수 있습니다. 예를 들어 Tokopedia의 타원 예와 같은 작은 사용 사례로 시작하여 컨테이너 쿼리를 구현할 수 있습니다. 그런 다음 점진적으로 더 많은 사례를 찾고 CSS를 개선합니다.
리소스:
- 안정적인 브라우저에 적합한 컨테이너 쿼리
- 컨테이너 쿼리 - 브라우저에서 디자인하기
- 컨테이너 쿼리 데모
- 데모: 컨테이너 쿼리 카드
- 동영상: 웹 UI의 새로운 기능 - I/O 2023
- 버그를 신고하고 싶으신가요, 아니면 새로운 기능을 요청하고 싶으신가요? 여러분의 의견을 들려주세요.
이 시리즈의 다른 문서에서 스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 전자상거래 회사가 어떤 이점을 얻었는지 살펴봅니다.