이 페이지는 Cloud Translation API를 통해 번역되었습니다.

새로운 반응형: 구성요소 중심 환경에서의 웹 디자인

반응형 웹 디자인의 새로운 시대에서 매크로 및 마이크로 레이아웃 제어

Una Kravets

지금 바로 반응형 디자인 사용하기

오늘날 '반응형 디자인'이라는 용어를 사용할 때는 디자인을 모바일 크기에서 태블릿 크기 또는 데스크톱 크기로 조정할 때 미디어 쿼리를 사용하여 레이아웃을 변경하는 것을 고려할 가능성이 높습니다.

하지만 머지않아 반응형 디자인에 대한 이러한 인식은 페이지 레이아웃에 테이블을 사용하는 것만큼 구식이라고 간주될 수 있습니다.

표시 영역 기반 미디어 쿼리는 몇 가지 강력한 도구를 제공하지만 세심한 면이 부족합니다. 사용자 요구사항에 대응할 수 없고 구성요소 자체에 반응형 스타일을 삽입할 수 없습니다.

전역 표시 영역 정보를 사용하여 구성요소의 스타일을 지정할 수 있지만 구성요소는 여전히 자체 스타일을 소유하지 않으며 디자인 시스템이 페이지 기반이 아닌 구성요소 기반일 때는 작동하지 않습니다.

좋은 소식은 생태계가 빠르게 변화하고 있다는 것입니다. CSS가 진화하고 있으며 새로운 반응형 디자인의 시대가 다가오고 있습니다.

우리는 약 10년마다 이러한 일이 발생하는 것을 봅니다. 10년 전인 2010~2012년경에는 모바일 및 반응형 디자인에 큰 변화가 있었고 CSS3의 등장이 일어났습니다.

그런데 이번에도 생태계가 CSS에 대대적인 변화를 일으킬 준비가 된 것으로 나타났습니다. Chrome 및 웹 플랫폼 전반의 엔지니어들이 반응형 디자인의 새로운 시대를 위한 프로토타입 제작, 사양 지정, 구현을 시작하고 있습니다.

이러한 업데이트에는 사용자 환경설정 기반 미디어 기능, 컨테이너 쿼리, 새로운 화면 유형(예: 폴더블 화면)의 미디어 쿼리가 포함됩니다.

사용자, 컨테이너, 폼 팩터에 맞춰 반응

사용자 반응

새로운 사용자 환경설정 미디어 기능으로 사용자의 특정 환경설정과 요구사항에 맞게 웹 환경의 스타일을 지정할 수 있습니다. 즉, 환경설정 미디어 기능을 사용하면 사용자 환경을 사용자 환경에 맞게 조정할 수 있습니다.

이러한 사용자 환경설정 미디어 기능에는 다음이 포함됩니다.

prefers-reduced-motion
prefers-contrast
prefers-reduced-transparency
prefers-color-scheme
inverted-colors
기타

환경설정 기능은 사용자가 운영체제에 설정한 환경설정을 반영하며 특히 접근성 기능이 필요한 사용자를 위해 더욱 강력하고 맞춤설정된 웹 환경을 빌드하는 데 도움이 됩니다.

운영체제에서 접근성 환경설정 사용 설정

`prefers-reduced-motion`

움직임 감소를 위해 운영체제를 설정한 사용자는 일반적으로 컴퓨터를 사용할 때 더 적은 애니메이션을 요청합니다. 따라서 웹을 사용하는 동안 플래시 인트로 화면, 카드 플립 애니메이션, 복잡한 로더 또는 기타 플래시 애니메이션은 바람직하지 않습니다.

prefers-reduced-motion를 사용하면 움직임을 줄여서 페이지를 디자인할 수 있으며 이러한 환경설정이 없는 사용자를 위해 모션이 개선된 환경을 만들 수 있습니다.

이 카드에는 양쪽에 정보가 포함되어 있습니다. 감소된 모션 기준 환경은 이러한 정보를 표시하기 위한 크로스페이드이고, 모션 향상된 환경은 카드 플립입니다.

우선 감속 모션은 '움직임이 없음'을 의미해서는 안 됩니다. 모션은 온라인으로 정보를 전달하는 데 매우 중요하기 때문입니다. 대신 불필요한 이동 없이 사용자를 안내하는 견고한 기준 환경을 제공하고 이러한 접근성 요구사항이나 환경설정 없이 사용자를 위해 해당 환경을 점진적으로 개선합니다.

`prefers-color-scheme`

또 다른 환경설정 미디어 기능은 prefers-color-scheme입니다. 이 기능을 사용하면 사용자가 선호하는 테마에 맞게 UI를 맞춤설정할 수 있습니다. 사용자는 운영체제가 데스크톱이든 모바일이든 시간에 따라 달라지는 밝은 테마나 어두운 테마, 자동 테마의 환경설정을 지정할 수 있습니다.

CSS 맞춤 속성을 사용하여 페이지를 설정한 경우 색상 값을 쉽게 바꿀 수 있습니다. backgroundColor 및 textOnPrimary와 같은 색상 테마 값을 빠르게 업데이트하여 미디어 쿼리 내에서 새 테마에 동적으로 조정되도록 할 수 있습니다.

이러한 환경설정 쿼리를 더 쉽게 테스트하려면 매번 시스템 환경설정을 여는 대신 에뮬레이션용 DevTools를 사용할 수 있습니다.

어두운 테마를 위한 디자인

어두운 테마를 위해 디자인할 때는 단순히 배경과 텍스트 색상 또는 어두운 스크롤바를 반전시키는 것이 아닙니다. 알지 못하는 몇 가지 고려사항이 있습니다. 예를 들어 시각적 진동을 줄이기 위해 어두운 배경에서 색상의 채도를 낮춰야 할 수 있습니다.

어두운 테마와 채도가 높은 선명한 색상을 사용하지 않습니다.

그림자를 사용하여 깊이를 만들고 요소를 앞으로 그리는 대신 요소의 배경색에 빛을 사용하여 앞으로 그리는 것이 좋습니다. 어두운 배경에서는 그림자가 효과적이지 않기 때문입니다.

머티리얼 디자인은 어두운 테마 디자인에 관한 유용한 안내를 제공합니다.

어두운 테마는 보다 맞춤설정된 사용자 환경을 제공할 뿐만 아니라 AMOLED 화면에서 배터리 수명을 크게 개선할 수도 있습니다. 이러한 화면은 최신 고급형 휴대전화에서 볼 수 있는 화면이며 휴대기기에서 점점 더 인기를 얻고 있습니다.

이 그래픽이 원래 표시되는 대화의 스크린샷

어두운 테마에 관한 2018년 Android 연구에 따르면 화면 밝기와 전반적인 사용자 인터페이스에 따라 최대 60%의 전력 소모량이 절감되었습니다. 60% 통계는 앱 UI에 어두운 테마를 사용하여 화면 밝기가 100% 일 때 YouTube 재생 화면과 일시중지된 동영상을 비교한 결과와 밝은 테마를 비교한 것입니다.

가능하면 항상 사용자에게 어두운 테마 환경을 제공해야 합니다.

컨테이너 응답

CSS에서 새롭게 떠오르는 영역 중 하나는 컨테이너 쿼리로, 요소 쿼리라고도 합니다. 페이지 기반 반응형 디자인에서 컨테이너 기반 반응형 디자인으로의 전환이 디자인 생태계 발전에 어떤 영향을 미칠지 과소평가하기 어렵습니다.

다음은 컨테이너 쿼리가 제공하는 강력한 기능의 예입니다. 상위 컨테이너를 기반으로 링크 목록, 글꼴 크기, 전체 레이아웃 등 모든 카드 요소의 스타일을 조작할 수 있습니다.

Codepen의 데모 (카나리아의 플래그 뒤에 있음)를 참고하세요.

이 예에서는 컨테이너 크기가 다른 두 개의 동일한 구성요소를 보여줍니다. 둘 다 CSS 그리드를 사용해 만든 레이아웃에서 공간을 차지합니다. 각 구성요소는 고유한 공간 할당량에 맞고 그에 따라 자체 스타일을 지정합니다.

미디어 쿼리만으로는 불가능한 유연성입니다.

컨테이너 쿼리는 반응형 디자인에 대해 훨씬 동적인 접근 방식을 제공합니다. 즉, 이 카드 구성요소를 사이드바나 히어로 섹션 또는 페이지 본문 내 그리드 내에 배치하면 구성요소 자체가 표시 영역이 아닌 컨테이너에 따라 반응형 정보와 크기를 소유합니다.

이를 위해서는 @container at-rule이 필요합니다. 이는 @media가 포함된 미디어 쿼리와 비슷한 방식으로 작동하지만, 대신 @container가 표시 영역과 사용자 에이전트가 아닌 상위 컨테이너에 정보를 쿼리합니다.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

먼저 상위 요소에 포함을 설정합니다. 그런 다음 min-width 또는 max-width를 사용하여 크기에 따라 컨테이너 내 요소의 스타일을 지정하는 @container 쿼리를 작성합니다.

위 코드는 max-width를 사용하고 링크를 display:none로 설정하며 컨테이너의 너비가 850px 미만인 경우 시간 글꼴 크기를 줄입니다.

컨테이너 쿼리 카드

이 데모 식물 웹사이트에서는 히어로의 카드, 최근에 본 항목의 사이드바, 제품 그리드를 비롯한 각 제품 카드가 모두 정확히 동일한 구성요소로, 동일한 마크업이 적용됩니다.

Codepen의 데모 (카나리아의 플래그 뒤에 있음)를 참고하세요.

이 전체 레이아웃을 만드는 데 사용되는 미디어 쿼리는 없으며 컨테이너 쿼리만 사용됩니다. 이렇게 하면 각 제품 카드가 적절한 레이아웃으로 전환되어 공간을 채울 수 있습니다. 예를 들어 그리드는 minmax 열 레이아웃을 사용하여 요소가 해당 공간으로 흐르도록 하고 공간이 너무 압축되면(즉, 최소 크기에 도달한다는 의미) 그리드의 레이아웃을 다시 배치합니다.

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

그리드에 350px 이상의 공간이 있으면 카드 레이아웃이 기본 가변 방향인 '행'을 갖는 display: flex로 설정되어 가로로 이동합니다.

공간이 작으면 제품 카드가 쌓입니다. 각 제품 카드의 스타일은 전역 스타일만으로는 불가능할 것입니다.

컨테이너 쿼리와 미디어 쿼리 혼합

컨테이너 쿼리에는 캘린더 구성요소와 같은 다양한 사용 사례가 있습니다. 컨테이너 쿼리를 사용하여 상위 요소의 사용 가능한 너비에 따라 캘린더 일정 및 기타 세그먼트의 레이아웃을 재배치할 수 있습니다.

Codepen의 데모 (카나리아의 플래그 뒤에 있음)를 참고하세요.

이 데모 컨테이너는 캘린더 날짜와 요일의 레이아웃과 스타일을 변경하고 예약된 이벤트의 여백과 글꼴 크기를 조정하여 공간에 더 잘 어울리도록 쿼리합니다.

그런 다음 미디어 쿼리를 사용하여 전체 레이아웃을 작은 화면 크기에 맞게 이동합니다. 이 예에서는 미디어 쿼리 (전역 또는 매크로 스타일 조정)와 컨테이너 쿼리 (컨테이너의 하위 요소 및 마이크로 스타일 조정)를 combine하는 것이 얼마나 강력한지 보여줍니다.

이제 동일한 UI 구성요소 내에 있는 매크로 및 마이크로 레이아웃을 생각해 보면 미묘한 디자인 결정을 내릴 수 있습니다.

현재 컨테이너 쿼리 사용하기

이제 Chrome Canary에서 이 데모를 깃발 뒤에 두고 사용해 볼 수 있습니다. Canary에서 about://flags로 이동하여 #enable-container-queries 플래그를 사용 설정합니다. 이렇게 하면 contain 속성의 @container, inline-size, block-size 값과 LayoutNG 그리드 구현이 지원됩니다.

이 플래그는 해당 Chrome DevTools 기능도 사용 설정합니다. DevTools에서 컨테이너 쿼리를 검사하고 디버그하는 방법을 알아보세요.

범위 지정 스타일

컨테이너 쿼리를 기반으로 CSS 작업 그룹에서 구성요소의 적절한 네임스페이스 지정 및 충돌 방지에 도움이 되는 범위 지정 스타일에 대해서도 활발하게 논의하고 있습니다.

범위 지정 스타일을 사용하면 패스 스루 및 구성요소별 스타일 지정이 가능하므로 이름 지정 충돌을 피할 수 있습니다. 이는 CSS 모듈과 같은 많은 프레임워크와 플러그인을 통해 이미 프레임워크 내에서 할 수 있는 작업입니다. 이제 이 사양을 통해 마크업을 조정하지 않고도 읽을 수 있는 CSS를 사용하여 구성요소의 캡슐화된 스타일을 기본적으로 작성할 수 있습니다.

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

범위를 지정하면 '도넛 모양' 선택기를 만들 수 있습니다. 여기에서 스타일을 캡슐화된 상태로 유지할 위치와 이 범위 지정 스타일에서 벗어나 더 전역적인 스타일을 참조할 위치를 지정할 수 있습니다.

예를 들어 탭에서 범위가 지정된 스타일을 가져오는 탭 패널과 상위 스타일을 가져오는 탭 패널을 들 수 있습니다.

폼 팩터에 반응

반응형 디자인의 새로운 시대에 관한 대화의 다음 주제는 폼 팩터의 변화, 그리고 웹 커뮤니티로서 디자인해야 할 요소 (예: 화면 모양 전환 또는 가상 현실)의 성장 가능성입니다.

폴더블 또는 유연한 화면, 화면 스팬을 위한 설계는 오늘날 폼 팩터 변화를 볼 수 있는 한 가지 예입니다. 화면 스팬은 이러한 새로운 폼 팩터와 니즈를 충족하기 위해 개발 중인 또 다른 사양입니다.

화면 스팬을 위한 실험용 미디어 쿼리가 여기에서 도움이 될 수 있습니다. 현재 @media (spanning: <type of fold>)와 같이 동작합니다. 데모에서는 두 개의 열이 있는 그리드 레이아웃을 설정합니다. 하나의 너비는 --sidebar-width(기본값 5rem)이고 다른 하나는 1fr입니다. 레이아웃을 한 번 세로로 접는 듀얼 화면에서 레이아웃을 보면 --sidebar-width 값이 왼쪽 접힘의 환경 값으로 업데이트됩니다.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

이렇게 하면 사이드바(여기서는 탐색)가 접힘 중 하나의 공간을 채우고 앱 UI가 다른 하나를 채우는 레이아웃이 사용 설정됩니다. 이렇게 하면 UI에서 '접기'가 방지됩니다.

Chrome DevTools 에뮬레이터에서 폴더블 화면을 테스트하여 브라우저에서 직접 스팬된 화면을 디버그하고 프로토타입을 제작할 수 있습니다.

결론

평면 화면 이외의 UI 디자인을 탐색하는 것도 컨테이너 쿼리와 범위 지정 스타일이 중요한 또 다른 이유입니다. 이를 통해 페이지 레이아웃 및 전역 스타일과 사용자 스타일로부터 구성요소 스타일을 분리할 수 있으므로 탄력적인 반응형 디자인이 가능합니다. 즉, 이제 화면 범위 차이를 비롯한 페이지 기반 미디어 쿼리를 사용하여 매크로 레이아웃을 디자인할 수 있습니다. 동시에 구성요소에 대한 컨테이너 쿼리와 함께 마이크로 레이아웃을 사용하고 사용자 환경설정 기반 미디어 쿼리를 추가하여 고유한 환경설정과 요구사항에 따라 사용자 환경을 맞춤설정합니다.

새로운
반응형 디스플레이 광고로 구성된

This는 새로운 반응형입니다.

매크로 레이아웃과 마이크로 레이아웃을 결합했으며, 무엇보다도 사용자 맞춤설정과 폼 팩터를 고려합니다.

이러한 변경사항만으로도 Google의 웹 디자인 방식에 상당한 변화가 있을 수 있습니다. 하지만 이렇게 두 요소가 결합되면 반응형 디자인을 개념화하는 방식이 크게 변하게 됩니다. 이제 표시 영역 크기 외에 반응형 디자인을 생각해보고 더 나은 구성요소 기반 및 맞춤설정된 환경을 위한 새로운 축을 모두 고려해야 합니다.

이제 반응형 디자인의 시대가 도래했습니다. 직접 살펴보실 수 있습니다.

web.dev/learnCSS

지금은 CSS 게임의 수준을 높이고 몇 가지 기본사항을 다시 살펴보길 원하신다면 web.dev에서 완전히 무료로 제공되는 새로운 CSS 과정과 참조를 출시합니다. web.dev/learnCSS를 통해 액세스할 수 있습니다.

반응형 디자인의 다음 시대에 이 개요와 함께 사용될 몇 가지 프리미티브가 도움이 되었기를 바랍니다. 또한 이러한 내용이 웹 디자인의 미래에 어떤 영향을 미칠지 궁금해 하셨으리라 생각합니다.

이는 UI 커뮤니티로서 구성요소 기반 스타일과 새로운 폼 팩터를 수용하고 사용자 반응형 환경을 만들 수 있는 엄청난 기회를 열어줍니다.