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

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

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-reduced-motion이 '모션 없음'을 의미해서는 안 됩니다. 대신 불필요한 움직임 없이 사용자를 안내하는 견고한 기준 환경을 제공하고 접근성 요구사항이나 환경설정이 없는 사용자를 위해 해당 환경을 점진적으로 개선하세요.

`prefers-color-scheme`

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

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

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

어두운 테마 디자인

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

어두운 테마에는 채도가 높은 색상을 사용하지 마세요.

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

Material Design에서는 어두운 테마를 위한 디자인에 관한 유용한 가이드를 제공합니다.

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

원래 이 그래픽을 보여준 강연의 스크린샷

어두운 테마에 관한 2018년 Android 연구에 따르면 화면 밝기와 전체 사용자 인터페이스에 따라 최대 60%의 전력 소모 절감 효과가 있는 것으로 나타났습니다. 60% 통계는 앱 UI에 어두운 테마를 사용한 경우와 밝은 테마를 사용한 경우를 비교하여 YouTube 재생 화면에서 동영상을 일시중지한 상태로 화면 밝기를 100% 로 설정했을 때를 기준으로 산출되었습니다.

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

컨테이너에 반응

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으로 설정되어 가로로 표시됩니다. display: flex의 기본 flex-direction은 'row'입니다.

공간이 부족하면 제품 카드가 쌓입니다. 각 제품 카드는 자체적으로 스타일을 지정합니다. 전역 스타일만으로는 불가능한 일입니다.

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

컨테이너 쿼리에는 다양한 사용 사례가 있으며, 그중 하나가 캘린더 구성요소입니다. 컨테이너 쿼리를 사용하여 상위 요소의 사용 가능한 너비에 따라 캘린더 일정과 기타 세그먼트의 레이아웃을 다시 지정할 수 있습니다.

Codepen에서 데모 보기 (카나리아의 플래그 뒤에 있음)

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

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

이제 동일한 UI 구성요소 내에서 매크로 및 마이크로 레이아웃을 고려하여 미묘한 디자인 결정을 내릴 수 있습니다.

오늘 컨테이너 쿼리 사용

이러한 데모는 이제 Chrome Canary에서 플래그 뒤에 숨겨진 상태로 플레이할 수 있습니다. Canary에서 about://flags로 이동하여 #enable-container-queries 플래그를 사용 설정합니다. 이렇게 하면 contain 속성 및 LayoutNG 그리드 구현에 @container, inline-size, block-size 값을 지원할 수 있습니다.

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

범위가 지정된 스타일

컨테이너 쿼리를 기반으로 빌드하려면 @scope을 사용한 범위가 지정된 스타일을 사용하여 선택기의 범위를 제한하세요.

범위가 지정된 스타일을 사용하면 이름 충돌을 방지하기 위해 구성요소별 스타일을 지정할 수 있습니다. 이는 CSS 모듈과 같은 많은 프레임워크와 플러그인에서 이미 프레임워크 내에서 할 수 있는 작업입니다. 범위가 지정된 스타일을 사용하면 마크업을 조정할 필요 없이 읽기 쉬운 CSS로 구성요소의 캡슐화된 스타일을 기본적으로 작성할 수 있습니다.

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

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

범위 지정 기능을 사용하면 상한과 하한을 지정할 수 있는 '도넛 모양' 선택기를 만들 수 있습니다. @scope 규칙에 포함된 선택기는 이러한 한도 사이에서 일치합니다.

탭 패널을 예로 들 수 있습니다. 탭에는 범위가 지정된 스타일이 적용되지만 탭 내의 패널에는 범위가 지정된 스타일이 적용되지 않도록 하려는 경우입니다.

폼 팩터에 반응

새로운 반응형 디자인 시대에 관한 대화의 다음 주제는 폼 팩터의 변화와 웹 커뮤니티에서 디자인해야 할 대상 (예: 모양이 바뀌는 화면 또는 가상 현실)의 가능성 증가입니다.

폴더블 또는 플렉서블 화면과 화면 확장 설계를 통해 오늘날 폼 팩터의 변화를 확인할 수 있습니다. 화면 전체는 이러한 새로운 폼 팩터와 요구사항을 충족하기 위해 작업 중인 또 다른 사양입니다.

화면 전체에 걸친 실험적 미디어 쿼리가 도움이 될 수 있습니다. 현재는 다음과 같이 작동합니다. @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 디자인을 탐색하는 것도 컨테이너 쿼리와 범위가 지정된 스타일이 중요한 이유입니다. 이를 통해 페이지 레이아웃과 전역 스타일, 사용자 스타일에서 구성요소 스타일을 격리하여 더 탄력적인 반응형 디자인을 구현할 수 있습니다. 이제 화면 전체에 걸친 미묘한 차이를 비롯해 페이지 기반 미디어 쿼리를 사용하여 매크로 레이아웃을 설계할 수 있습니다. 동시에 컨테이너 쿼리를 사용하여 구성요소에 마이크로 레이아웃을 사용하고 사용자 선호도 기반 미디어 쿼리를 추가하여 고유한 선호도와 필요에 따라 사용자 환경을 맞춤설정합니다.

새 반응형 광고의 원

이것이 새로운 반응형입니다.

매크로 레이아웃과 마이크로 레이아웃을 결합하고, 사용자 맞춤설정과 폼 팩터를 고려합니다.

이러한 변경사항 중 하나만으로도 웹 디자인 방식에 상당한 변화가 생깁니다. 하지만 이 두 가지를 합치면 반응형 디자인을 개념화하는 방식에 있어 매우 큰 변화를 의미합니다. 이제 뷰포트 크기를 넘어 반응형 디자인을 생각하고 더 나은 구성요소 기반 맞춤 환경을 위해 이러한 새로운 축을 모두 고려해야 합니다.

차세대 반응형 디자인이 출시되었으며 지금 바로 직접 살펴볼 수 있습니다.

web.dev/learnCSS

CSS 실력을 향상하고 기본 사항을 다시 살펴보고 싶다면 지금 바로 내 팀에서 web.dev에 새롭게 출시한 완전 무료 CSS 과정과 참조를 확인하세요. web.dev/learnCSS에서 액세스할 수 있습니다.

차세대 반응형 디자인과 함께 제공되는 기본 요소에 관한 개요를 즐겁게 보셨기를 바랍니다. 또한 웹 디자인의 미래에 대한 기대감도 저와 같기를 바랍니다.

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

새로운 반응형: 구성요소 중심 환경에서의 웹 디자인 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

오늘날의 반응형 디자인

사용자에게 응답

prefers-reduced-motion

prefers-color-scheme

어두운 테마 디자인

컨테이너에 반응

컨테이너 쿼리 카드

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

오늘 컨테이너 쿼리 사용

범위가 지정된 스타일

폼 팩터에 반응

결론

web.dev/learnCSS

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

`prefers-reduced-motion`

`prefers-color-scheme`