환경설정 미디어 쿼리로 사용자 적응형 인터페이스 빌드

1. 시작하기 전에

요즘 사용자는 기기에서 다양한 환경설정을 지정합니다. 운영체제와 앱이 자신의 것처럼 보이기를 원합니다. 사용자 적응형 인터페이스는 이러한 환경설정을 사용하여 사용자 환경을 개선하고, 집에 있는 듯한 느낌을 주고, 내 것 같은 느낌을 주는 인터페이스입니다. 올바르게 수행되면 사용자는 사용자 환경이 적응하고 있는지 또는 적응했는지 알 수 없습니다.

사용자 환경설정

기기 하드웨어 선택은 환경설정이고, 운영체제는 선택이며, 앱 및 운영체제 색상은 환경설정이고, 앱 및 운영체제 문서 언어는 환경설정입니다. 사용자의 환경설정은 계속 증가하는 것 같습니다. 웹페이지는 모든 항목에 액세스할 수 없으며 그럴 만한 이유가 있습니다.

다음은 CSS에서 사용할 수 있는 사용자 환경설정의 몇 가지 예입니다.

기기 표시 영역 크기
기기 방향 (세로 | 가로)
글꼴 크기
온라인 / 오프라인
네트워크 품질
색 구성표 (light | dark)
인터페이스 애니메이션 (사용 | 감소)
입력 품질 (마우스 | 터치 | 스타일러스)
문서 방향 및 쓰기 모드 (왼쪽에서 오른쪽, 위에서 아래 등)
표시 모드 (전체 화면 | 독립형 | 최소 UI | 브라우저)

다음은 CSS에 곧 제공될 예정인 사용자 환경설정의 몇 가지 예입니다.

데이터 절약 모드 / 라이트 모드
색상 범위
대비 (낮추기 | 높이기 | 줄이기)
색상 (사용자의 색상을 페이지에 적용)
주변 소음 허용 (사용 | 감소)

미디어 쿼리

CSS와 웹을 사용하면 조건이 true인 경우 스타일 집합을 포함하는 선언적 조건인 미디어 쿼리를 통해 적응성과 반응성을 지원할 수 있습니다. 가장 일반적인 경우는 기기의 표시 영역 크기에 관한 조건입니다. 크기가 800픽셀 미만인 경우 해당 사례에 더 적합한 스타일이 있습니다.

사용자 적응형

적응형이 아닌 인터페이스는 사용자가 방문할 때 아무것도 변경하지 않으며, 조정할 수 없이 모든 사용자에게 하나의 환경을 제공합니다. 사용자 적응형 인터페이스는 5명의 사용자를 위해 5가지 다른 모양과 스타일을 가질 수 있습니다. 기능은 동일하지만 UI를 조정할 수 있는 사용자의 경우 미적 감각이 더 뛰어나고 인터페이스의 사용성이 더 쉽습니다.

기본 요건

HTML 및 CSS에 대한 지식
Google Chrome 개발자 도구와 같은 개발자 도구에 대한 지식

빌드할 항목

이 Codelab에서는 다음에 적응하는 사용자 적응형 양식을 빌드합니다.

양식 컨트롤과 주변 UI 요소에 밝은 색상과 어두운 색상 구성표를 제공하여 시스템 색상 구성표 환경설정
여러 유형의 애니메이션을 제공하여 시스템 동작 환경설정
모바일 및 데스크톱 환경을 제공하는 소형 및 대형 기기 뷰포트
키보드, 스크린 리더, 터치, 마우스와 같은 다양한 입력 유형
모든 언어 및 읽기/쓰기 모드

학습할 내용

이 Codelab에서는 사용자 적응형 양식을 빌드하는 데 도움이 되는 최신 웹 기능을 알아봅니다. 다음 작업을 수행하는 방법을 알아봅니다.

밝은 테마와 어두운 테마 만들기
액세스 가능한 애니메이션 양식 빌드
레이아웃 반응형 양식
상대 단위 및 논리적 속성 사용

이 Codelab에서는 사용자 적응형 인터페이스에 중점을 둡니다. 따라서 이와 관련 없는 개념과 코드 블록은 그냥 넘어가겠습니다. 단, 필요할 때 복사해서 붙여넣을 수 있도록 다른 설명 없이 제공만 해드리겠습니다.

필요한 항목

Chrome 89 이상 또는 원하는 브라우저

2. 설정

코드 가져오기

이 프로젝트에 필요한 모든 코드는 GitHub 저장소에 있습니다. 시작하려면 코드를 가져와 선호하는 개발자 환경에서 열어야 합니다. 또는 이 CodePen을 포크하여 작업할 수도 있습니다.

권장: CodePen 사용

새 브라우저 탭을 엽니다.
https://codepen.io/argyleink/pen/abBMeeq로 이동합니다.
계정이 없으면 계정을 만들어 작업을 저장하세요.
포크를 클릭합니다.

대안: 로컬에서 작업

코드를 다운로드하여 로컬에서 작업하려면 Node.js 버전 12 이상과 코드 편집기가 설정되어 있어야 합니다.

Git 사용

https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces를 방문하세요.
저장소를 폴더에 클론합니다.
기본 브랜치가 beginning임을 확인합니다.

파일 사용하기

다운로드한 ZIP 파일을 폴더에 압축 해제합니다.

프로젝트 실행

위 단계 중 하나에서 설정한 프로젝트 디렉터리를 사용한 후 다음을 실행합니다.

npm install을 실행하여 서버를 실행하는 데 필요한 종속 항목을 설치합니다.
npm start를 실행하여 포트 3000에서 서버를 시작합니다.
새 브라우저 탭을 엽니다.
http://localhost:3000으로 이동합니다.

HTML 정보

이 강의에서는 사용자 적응형 상호작용을 지원하는 데 사용되는 HTML의 측면을 다룹니다. 이 워크숍에서는 CSS에 중점을 둡니다. 양식이나 웹사이트를 처음 만드는 경우 제공된 HTML을 검토해 보세요. HTML 요소 선택은 접근성 및 레이아웃과 관련하여 매우 중요할 수 있습니다.

시작할 준비가 되면 동적이고 적응형 사용자 환경으로 변환할 스켈레톤이 표시됩니다.

3. 적응형 상호작용

Git 브랜치: beginning

이 섹션이 끝나면 설정 양식이 다음에 맞게 적응됩니다.

게임패드 + 키보드
마우스 + 터치
스크린 리더 또는 유사한 보조 기술

HTML 속성

소스 코드에 제공된 HTML은 양식 입력을 그룹화, 순서 지정, 라벨 지정하는 데 도움이 되는 시맨틱 요소가 이미 선택되어 있으므로 좋은 시작점이 됩니다.

양식은 비즈니스의 주요 상호작용 지점인 경우가 많으므로 웹에서 지원할 수 있는 다양한 유형의 입력에 양식이 적응할 수 있어야 합니다. 예를 들어 터치로 휴대기기에서 사용할 수 있는 양식이 중요할 수 있습니다. 이 섹션에서는 레이아웃과 스타일 전에 적응형 입력 사용성을 확인합니다.

입력 그룹화

HTML의 <fieldset> element는 유사한 입력과 컨트롤을 함께 그룹화하는 데 사용됩니다. 양식에는 볼륨용 그룹과 알림용 그룹의 두 그룹이 있습니다. 전체 섹션을 건너뛸 수 있으므로 사용자 환경에 중요합니다.

요소 순서 지정

요소의 순서는 논리적 순서로 제공됩니다. 이는 사용자 환경에 중요하므로 게임패드, 키보드 또는 스크린 리더 기술의 시각적 환경 순서가 동일하거나 유사해야 합니다.

키보드 상호작용

웹 사용자는 탭 키를 사용하여 양식을 이동하는 데 익숙해져 있습니다. 다행히 예상되는 HTML 요소를 제공하면 브라우저에서 이를 처리합니다. <button>, <input>, <h2>, <label>와 같은 요소를 사용하면 자동으로 키보드 또는 스크린 리더 대상이 됩니다.

위 동영상에서는 탭 키와 화살표를 사용하여 인터페이스를 이동하고 변경하는 방법을 보여줍니다. 하지만 파란색 윤곽선이 입력 요소 주위에 너무 타이트하므로 다음 스타일을 추가하여 이 상호작용에 여유 공간을 약간 추가합니다.

style.css

input {
  outline-offset: 5px;
}

시도해 볼 만한 작업

index.html에서 사용되는 HTML 요소를 검토합니다.
브라우저에서 데모 페이지를 클릭합니다.
tab 키와 shift+tab 키를 눌러 양식을 통해 요소 포커스를 이동합니다.
키보드를 사용하여 슬라이더와 체크박스의 값을 변경합니다.
블루투스 게임패드 컨트롤러를 연결하고 양식을 통해 요소 포커스를 이동합니다.

마우스 상호작용

웹 사용자는 마우스로 양식과 상호작용하는 데 익숙해져 있습니다. 양식에서 마우스를 사용해 보세요. 슬라이더와 체크박스는 작동하지만 더 나은 방법이 있습니다. 마우스로 클릭하기에는 체크박스가 너무 작습니다.

라벨과 입력값을 연결하는 두 가지 사용자 환경 기능을 확인해 보세요.

첫 번째 기능은 상호작용할 수 있는 옵션이 있다는 것이고, 라벨은 작은 정사각형보다 마우스로 타겟팅하기가 훨씬 쉽습니다.

두 번째 기능은 라벨이 어떤 입력을 위한 것인지 정확히 아는 것입니다. 현재 CSS가 없으면 속성을 제공하지 않는 한 어떤 라벨이 어떤 체크박스에 해당하는지 확인하기가 매우 어렵습니다.

이 명시적 연결은 다음 섹션에서 설명하는 스크린 리더의 환경도 개선합니다.

연결되지 않음: 요소를 연결하는 속성이 없음

<input type="checkbox">
<label>...</label>

연결됨: 요소를 연결하는 속성

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

제공된 HTML에는 이미 모든 입력과 라벨이 표시되어 있습니다. 이 개념을 처음 접한다면 자세히 알아보는 것이 좋습니다.

시도해 볼 만한 작업

마우스로 라벨 위를 가져가면 체크박스가 강조 표시됩니다.
Chrome 개발자 도구로 라벨 요소를 조사하여 체크박스를 선택할 수 있는 클릭 가능한 표면 영역을 시각화합니다.

보조 기술은 이 양식과 상호작용할 수 있으며, 몇 가지 HTML 속성을 사용하면 사용자 환경을 더 원활하게 만들 수 있습니다.

Chrome에서 스크린 리더를 사용하여 현재 양식을 탐색하는 사용자의 경우 <picture> 요소에서 불필요하게 중지됩니다 (Chrome에만 해당하지 않음). 스크린 리더를 사용하는 사용자는 시각장애로 인해 스크린 리더를 사용할 가능성이 높으므로 사진에서 멈추는 것은 도움이 되지 않습니다. 속성을 사용하여 스크린 리더에서 요소를 숨길 수 있습니다.

index.html

<picture aria-hidden="true">

이제 스크린 리더가 순전히 시각적인 요소를 건너뜁니다.

슬라이더 요소 input[type="range"]에는 aria-labelledby="media-volume"라는 특별한 ARIA 속성이 있습니다. 이는 사용자 환경을 개선하기 위해 스크린 리더가 사용할 특수 명령어를 제공합니다.

시도해 볼 만한 작업

운영체제 스크린 리더 기술을 사용하여 양식을 통해 포커스를 이동합니다.
양식에서 스크린 리더 소프트웨어를 다운로드하여 사용해 보세요.

4. 적응형 레이아웃

Git 브랜치: layouts

이 섹션을 마치면 설정 페이지가 다음을 충족합니다.

맞춤 속성과 사용자 상대 단위로 간격 시스템 만들기
유연하고 반응형인 정렬 및 간격을 위해 CSS 그리드 작성
국제적으로 적응 가능한 레이아웃에 논리적 속성 사용
미디어 쿼리를 작성하여 소형 레이아웃과 넓은 레이아웃 간에 적응

간격

멋진 레이아웃을 만드는 비결은 제한된 여백 옵션 팔레트에 있습니다. 이를 통해 콘텐츠가 자연스럽게 정렬되고 조화를 이룰 수 있습니다.

맞춤 속성

이 워크숍은 7가지 맞춤 속성 크기를 기반으로 합니다.

style.css 상단에 다음을 배치합니다.

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

이름은 사람들이 서로 공간을 설명할 때 사용하는 표현과 유사합니다. rem 단위는 적응하고 사용자 환경설정을 고려하는 가독성 있는 전체 단위 크기에만 사용합니다.

페이지 스타일

다음으로 문서 스타일을 설정하고, 요소에서 여백을 삭제하고, 글꼴을 멋진 산세리프체로 설정해야 합니다.

다음을 style.css에 추가합니다.

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

간격 맞춤 속성을 처음으로 사용해 보았습니다. 이제 스페이스 여정이 시작됩니다.

서체

이 레이아웃의 글꼴은 적응형입니다. system-ui 키워드는 사용자의 운영체제에서 최적의 인터페이스 글꼴로 결정한 것을 사용합니다.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1, h2, h3의 스타일은 사소하고 스타일리시합니다. 하지만 텍스트가 줄바꿈될 때를 위해 small 요소에는 추가 line-height이 필요합니다. 그렇지 않으면 너무 뭉쳐 있습니다.

논리 속성

body의 padding는 논리적 속성 (block-start, block-end)을 사용하여 측면을 지정합니다. 논리적 속성은 Codelab의 나머지 부분에서 광범위하게 사용됩니다. 이러한 단위도 rem 단위와 마찬가지로 사용자에 맞게 적응합니다. 이 레이아웃은 다른 언어로 번역할 수 있으며, 사용자가 모국어에서 익숙한 자연스러운 쓰기 및 문서 방향으로 설정할 수 있습니다. 논리적 속성을 사용하면 공간, 방향 또는 정렬을 한 번만 정의하여 이를 지원할 수 있습니다.

그리드와 플렉스박스는 이미 흐름에 상대적입니다. 즉, 한 언어에 대해 작성된 스타일은 다른 언어에 대해 맥락에 맞게 적절하게 적용됩니다. 적응형 방향성: 콘텐츠가 문서 방향에 따라 흐릅니다.

논리적 속성을 사용하면 작성해야 하는 스타일이 적어 더 많은 사용자에게 도달할 수 있습니다.

CSS 그리드 레이아웃

grid CSS 속성은 복잡한 작업을 처리하기 위한 다양한 기능을 갖춘 강력한 레이아웃 도구입니다. 간단한 그리드 레이아웃 몇 개와 복잡한 레이아웃 하나를 빌드합니다. 또한 매크로 레이아웃에서 마이크로 레이아웃으로 외부에서 내부로 작업하게 됩니다. 간격 맞춤 속성은 패딩이나 여백 값뿐만 아니라 열 크기, 테두리 반경 등으로도 사용되므로 매우 중요합니다.

다음은 Chrome DevTools가 각 CSS 그리드 레이아웃을 한 번에 오버레이하는 스크린샷입니다.

style.css에 다음 스타일을 각각 추가하여 따라 합니다.

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

그리드는 기본적으로 각 하위 요소를 자체 행에 배치하므로 요소를 스택하는 데 적합합니다. 또한 gap를 사용하는 추가 이점도 있습니다. 이전에는 * 선택자를 사용하여 모든 요소에 margin: 0를 설정했는데, 이제 간격에 gap를 사용하므로 이 설정이 중요합니다. 갭은 컨테이너의 공간을 관리하는 단일 위치일 뿐만 아니라 상대적인 흐름입니다.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

이 그리드 레이아웃은 디자인에서 가장 까다롭지만 가장 흥미로운 반응형 측면을 고려합니다.

max-width는 레이아웃 알고리즘이 크기를 결정할 때 사용할 값을 제공합니다.
gap에서 맞춤 속성을 사용하고 column-gap와 다른 row-gap을 전달하고 있습니다.
align-items는 항목 높이가 늘어나지 않도록 flex-start로 설정됩니다.
grid-template-columns에는 복잡한 구문이 있지만 목표는 간결함입니다. 열을 35ch 너비로 유지하고 10ch 미만으로 유지하지 마세요. 공간이 있으면 항목을 열에 넣고 그렇지 않으면 행에 넣으면 됩니다.

브라우저 크기를 조절해 보세요. 미디어 쿼리 없이 적응하여 양식이 작은 뷰포트의 행으로 축소되지만 공간이 있으면 새 열로 흐르는 것을 확인하세요. 미디어 쿼리가 없는 반응형 스타일 전략은 특히 구성요소 또는 콘텐츠 중심 레이아웃에 유용합니다.

<section>

section {
  display: grid;
  gap: var(--space-md);
}

각 섹션은 하위 요소 사이에 중간 정도의 공간이 있는 행의 그리드여야 합니다.

header {
  display: grid;
  gap: var(--space-xxs);
}

각 헤더는 하위 요소 사이에 매우 작은 공간이 있는 행 그리드여야 합니다.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

이 레이아웃은 카드와 같은 모양을 만들고 입력을 함께 그룹화합니다. 다음 섹션에서 색상을 추가하면 overflow: hidden 및 gap: 1px이 명확해집니다.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

이 레이아웃은 아이콘과 체크박스를 연결된 라벨 및 컨트롤과 함께 중앙에 배치합니다. 그리드 템플릿의 첫 번째 열인 var(--space-lg)는 아이콘보다 넓은 열을 만들어 하위 요소가 중앙에 배치될 수 있는 공간을 제공합니다.

이 레이아웃은 맞춤 속성에서 이미 이루어진 디자인 결정을 보여줍니다. 패딩, 간격, 열은 이미 정의한 값을 사용하여 시스템의 조화 내에서 크기가 조정되었습니다.

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

이 레이아웃은 설정, 아이콘 원의 크기, 원 모양 만들기, 원 내에서 이미지 중앙에 배치하는 작업을 담당합니다.

<picture> & [checkbox] 정렬

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

이 레이아웃은 :is 가상 선택기를 사용하여 그림 및 체크박스 요소에만 중앙 정렬을 적용합니다.

다음과 같이 선택기 picture > svg를 .fieldset-item svg로 바꿉니다.

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

이렇게 하면 svg 아이콘 크기가 크기 시스템의 값으로 설정됩니다.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

이 유틸리티 클래스는 체크박스 라벨 요소가 체크박스의 도우미 텍스트에 간격을 두기 위한 것입니다.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

이러한 스타일은 간격 설정의 값을 사용하여 체크박스의 크기를 늘립니다.

시도해 볼 만한 작업

Chrome 개발자 도구를 열고 요소 패널의 HTML에서 그리드 배지를 찾습니다. 클릭하여 디버그 도구를 사용 설정합니다.
Chrome 개발자 도구를 열고 스타일 창에서 간격에 마우스를 가져갑니다.
Chrome 개발자 도구를 열고 스타일 창으로 이동한 다음 스타일에서 레이아웃으로 전환합니다. 설정을 전환하고 레이아웃을 사용 설정하여 이 영역을 탐색합니다.

미디어 쿼리

다음 CSS는 표시 영역 컨텍스트를 고려하여 간격이나 배열을 최적화하기 위해 표시 영역 크기와 방향에 따라 스타일을 조정합니다.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

이 두 미디어 쿼리는 뷰포트 공간이 더 많이 제공되므로 패딩을 main 더 많이 제공합니다. 즉, 처음에는 패딩이 작고 콤팩트하지만 공간이 더 많이 확보되면 점점 더 넓어집니다.

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

양식은 이미 auto-fit를 사용하여 표시 영역 크기에 반응했지만 모바일 기기에서 테스트하는 동안 기기를 가로로 돌려도 두 양식 그룹이 나란히 배치되지 않습니다. orientation 미디어 쿼리와 뷰포트 너비 확인을 사용하여 이 가로 모드 컨텍스트에 적응합니다. 이제 기기가 가로 모드이고 너비가 640픽셀 이상이면 auto-fit 키워드 대신 숫자로 --repeat 맞춤 속성을 전환하여 열을 두 개로 강제합니다.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

이 미디어 쿼리는 표시 영역 공간이 더 많은 경우의 또 다른 간격 확장입니다. 그리드 템플릿은 템플릿에서 더 큰 맞춤 속성 (var(--space-xxl))을 사용하여 첫 번째 열을 확장합니다. 패딩은 더 큰 맞춤 속성으로도 전달됩니다.

시도해 볼 만한 작업

브라우저를 확대 및 축소하면 공간이 조정되는 것을 확인할 수 있습니다.
휴대기기에서 미리보기
휴대기기에서 가로 방향으로 미리보기

5. 적응형 색상

Git 브랜치: colors

이 섹션이 끝나면 설정 양식이 다음을 충족합니다.

어두운 색상과 밝은 색상 선호도에 적응
브랜드 16진수에서 파생된 색 구성표가 있어야 합니다.
접근성이 우수한 색상 사용

HSL

다음 섹션에서는 밝은 테마와 어두운 테마를 만드는 데 도움이 되는 HSL을 사용하여 색상 시스템을 만듭니다. CSS의 핵심 개념인 calc()를 기반으로 합니다.

HSL은 색조, 채도, 밝기를 나타냅니다. 색조는 시계의 점과 같은 각도이고 채도와 밝기는 백분율입니다. calc()는 백분율과 각도에 대한 수학 연산을 할 수 있습니다. CSS에서 이러한 백분율에 대해 명도 및 채도 계산을 수행할 수 있습니다. 색상 채널 계산을 맞춤 속성과 결합하면 변형이 기본 색상에서 계산되는 모던하고 동적인 색 구성표를 사용할 수 있으므로 코드에서 여러 색상을 관리하지 않아도 됩니다.

맞춤 속성

이 섹션에서는 나머지 스타일 내에서 사용할 맞춤 속성 집합을 빌드합니다. :root 태그에서 이전에 설정한 간격과 마찬가지로 색상을 추가합니다.

앱의 브랜드 색상이 #0af라고 가정해 보겠습니다. 첫 번째 작업은 이 16진수 색상 값을 HSL 색상 값(hsl(200 100% 50%))으로 변환하는 것입니다. 이 변환을 통해 HSL의 브랜드 색상 채널이 표시되며, 이를 사용하여 calc()에서 다양한 지원 브랜드 색상을 계산할 수 있습니다.

이 섹션의 각 코드 블록은 동일한 :root 선택기에 추가해야 합니다.

브랜드 채널

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

세 개의 HSL 채널이 추출되어 자체 맞춤 속성에 배치되었습니다.

세 가지 속성을 모두 그대로 사용하여 브랜드 색상을 다시 만듭니다.

브랜드

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

색 구성표가 기본적으로 어두우므로 어두운 표면에 사용할 색상의 채도를 낮추는 것이 좋습니다. 그렇지 않으면 눈에 거슬리거나 액세스할 수 없을 수 있습니다. 브랜드 색상의 채도를 낮추려면 색조와 밝기를 그대로 사용하되, calc(var(--saturation) / 2)와 같이 나누어 채도를 절반으로 줄입니다. 이제 브랜드 색상이 테마에 올바르게 표시되지만 사용을 위해 채도가 낮아졌습니다.

텍스트

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

어두운 테마의 읽기 텍스트의 경우 브랜드 색조를 기본으로 사용하지만 여기에서 거의 흰색에 가까운 색상을 빌드합니다. 실제로는 매우 밝은 파란색이지만 많은 사용자는 텍스트가 흰색이라고 생각합니다. 색조를 유지하는 것은 디자인 조화를 만드는 강력한 방법입니다. --text1는 흰색이 85%, --text2는 흰색이 65% 이며 둘 다 채도가 매우 낮습니다.

프로젝트에 코드를 추가한 후 Chrome 개발자 도구를 열고 이러한 채널 값을 변경해 보세요. HSL과 채널이 서로 어떻게 상호작용하는지 느껴보세요. 취향에 따라 채도를 더 높이거나 낮추고 싶을 수도 있습니다.

Surface

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

어두운 모드에서는 서피스가 어둡기 때문에 텍스트가 매우 밝습니다. 텍스트 색상에서 높은 밝기 값 (85% 이상)을 사용한 경우, 표면에서는 낮은 값 (30% 이하)을 사용합니다. 표면과 텍스트 간의 밝기 범위가 적절하면 사용자가 읽을 수 있는 접근성 높은 색상을 보장할 수 있습니다.

색상이 10% 밝기와 10% 채도의 가장 어두운 회색으로 시작한 다음 밝아지면서 채도가 낮아지는 것을 확인할 수 있습니다. 각 새로운 표면은 이전 표면보다 5% 더 밝습니다. 밝은 표면의 채도도 약간 떨어집니다. 모든 표면의 채도를 10% 로 설정해 보세요. 더 좋아하시나요, 아니면 덜 좋아하시나요?

밝은 테마

어두운 테마를 지정하는 텍스트와 표면 색상이 적절하게 설정되었으므로 이제 prefers-color-scheme 미디어 쿼리 내에서 색상 맞춤 속성을 업데이트하여 밝은 테마 환경설정에 적응할 차례입니다.

표면과 텍스트 색상 간에 밝기 값을 크게 유지하는 동일한 기법을 사용하여 색상의 대비를 잘 유지합니다.

브랜드

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

첫 번째는 브랜드 색상입니다. 채도를 최대한으로 복원해야 합니다.

텍스트

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

어두운 테마에서 매우 밝은 파란색 텍스트 색상을 사용한 것과 마찬가지로 밝은 테마에서는 매우 어두운 파란색 텍스트 색상을 사용합니다. HSL 색상의 밝기 값이 10% 와 30% 로 표시되면 이러한 색상이 어둡다는 것을 알 수 있습니다.

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

이러한 표면 색상은 패턴을 가장 먼저 깨뜨립니다. 지금까지는 꽤 합리적이고 선형적으로 보였던 것이 이제 깨졌습니다. 좋은 점은 코드에서 바로 HSL 밝은 테마 색상 조합을 사용해 볼 수 있고 밝기와 채도를 조정하여 너무 차갑거나 파란색이 아닌 멋진 밝은 색 구성표를 만들 수 있다는 것입니다.

색상 시스템 사용

이제 색상이 정의되었으므로 사용할 차례입니다. 눈에 띄는 멋진 강조 브랜드 색상, 텍스트 색상 2개, 표면 색상 4개가 있습니다.

다음 코드 섹션에서 일치하는 선택자를 찾아 기존 코드 블록에 색상 CSS를 추가합니다.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

페이지 기본 색상은 만든 첫 번째 표면 및 텍스트 색상으로, 기본 대비를 최대로 설정합니다. 밝은 모드와 어두운 모드 전환을 테스트할 수 있습니다.

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

디자인의 카드와 같은 요소입니다. 1픽셀 테두리와 1픽셀 간격은 색상이 동일하며 각 .fieldset-item 뒤의 표면을 나타냅니다. 이렇게 하면 시각적 조화가 잘 이루어지고 유지관리도 쉽습니다.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

각 양식 입력은 자체 표면에 있습니다. 이러한 요소들이 어떻게 조화를 이루고 밝기 변형이 어떻게 레이어링되는지 이해하셨기를 바랍니다.

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

아이콘을 둘러싼 원 모양을 보여주기 위한 스타일 선택입니다. 다음 섹션에서 상호작용을 추가하면 그 이유를 알 수 있습니다.

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

양식의 아이콘은 대체 텍스트 --text2를 사용하도록 설정되어 있습니다. 색이 채워진 아이콘이 텍스트보다 약간 더 밝은 디자인은 아이콘이 너무 무겁게 느껴지지 않도록 합니다.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

이 선택기는 내부 입력 중 하나와 상호작용할 때 입력 컨테이너 요소를 일치시키고 SVG를 타겟팅하여 브랜드 강조색으로 강조 표시합니다. 이렇게 하면 입력과 상호작용할 때 관련 아이콘이 강조 표시되는 멋진 UX 피드백이 제공됩니다.

<small>

small {
  color: var(--text2);
}

작은 텍스트입니다. 헤더 및 단락 (기본 콘텐츠)에 비해 약간 차분해야 합니다.

어두운 양식 컨트롤

:root {
  color-scheme: dark light;
}

이 멋진 마무리로 브라우저에 이 페이지가 어두운 테마와 밝은 테마를 모두 지원한다고 알립니다. 브라우저에서 어두운 양식 컨트롤을 제공합니다.

6. 적응형 애니메이션

Git 브랜치: animations

이 섹션을 마치면 설정 페이지가 다음을 충족합니다.

사용자의 동작 환경설정에 적응
사용자 상호작용에 응답

모션 감소와 모션 없음의 차이

동작에 대한 운영체제에서 발견된 사용자 환경설정에는 애니메이션 없음 값이 제공되지 않습니다. 동작을 줄이는 방법이 있습니다. 모션 감소를 선호하는 사용자에게는 크로스페이드 애니메이션, 색상 전환 등이 여전히 유용합니다.

이 설정 페이지에는 화면 전체에서 움직이는 동작이 많지 않습니다. 요소가 사용자를 향해 이동하는 것처럼 모션이 스케일 효과에 가깝습니다. CSS 코드를 조정하여 동작 감소를 수용하는 것이 매우 간단하므로 스케일링 전환을 줄입니다.

상호작용 스타일

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

사용자가 <fieldset> 카드 모양 요소 중 하나의 입력과 상호작용하면 입체 효과가 추가됩니다. 인터페이스가 요소를 앞으로 밀어 사용자가 컨텍스트 양식 그룹이 사용자에게 표시될 때 집중할 수 있도록 지원합니다.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

사용자가 입력과 상호작용할 때 특정 항목 레이어 배경이 강조 표시된 표면 색상으로 변경됩니다. 이는 사용자의 시선을 끌고 입력이 수신되고 있음을 알리는 또 다른 지원 인터페이스 기능입니다. 대부분의 경우 색상 전환을 줄일 필요가 없습니다.

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

다음은 사용자가 동작 줄이기에 관한 환경설정이 없는 경우에만 사용하는 clip-path 애니메이션입니다. 첫 번째 선택기와 스타일은 원 클립 경로를 10% 제한하고 일부 전환 매개변수를 설정합니다. 두 번째 선택기와 스타일은 사용자가 입력과 상호작용할 때까지 기다린 후 아이콘의 원을 확대합니다. 괜찮은 경우 미묘하지만 깔끔한 효과를 줍니다.

7. 축하합니다

Git 브랜치: complete

수고하셨습니다. 사용자 적응형 인터페이스를 빌드했습니다.

이제 다양한 사용자 시나리오와 설정에 적응하는 인터페이스를 만드는 데 필요한 주요 단계를 알게 되었습니다.

환경설정 미디어 쿼리로 사용자 적응형 인터페이스 빌드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

1. 시작하기 전에

사용자 환경설정

미디어 쿼리

사용자 적응형

기본 요건

빌드할 항목

학습할 내용

필요한 항목

2. 설정

코드 가져오기

권장: CodePen 사용

대안: 로컬에서 작업

HTML 정보

3. 적응형 상호작용

HTML 속성

입력 그룹화

요소 순서 지정

키보드 상호작용

style.css

시도해 볼 만한 작업

마우스 상호작용

시도해 볼 만한 작업

스크린 리더 상호작용

index.html

시도해 볼 만한 작업

4. 적응형 레이아웃

간격

맞춤 속성

style.css

페이지 스타일

style.css

서체

논리 속성

CSS 그리드 레이아웃

<main>

<form>

<section>

<header>

<fieldset>

.fieldset-item

.fieldset-item <picture>

<picture> & [checkbox] 정렬

.fieldset-item <svg>

.sm-stack

input[type="checkbox"]

시도해 볼 만한 작업

미디어 쿼리

<main>

<form>

.fieldset-item

시도해 볼 만한 작업

5. 적응형 색상

HSL

맞춤 속성

브랜드 채널

브랜드

텍스트

Surface

밝은 테마

브랜드

텍스트

Surface

색상 시스템 사용

<body>

<fieldset>

.fieldset-item

.fieldset-item > picture

.fieldset-item svg

.fieldset-item:focus-within svg

<small>

어두운 양식 컨트롤

6. 적응형 애니메이션

모션 감소와 모션 없음의 차이

상호작용 스타일

<fieldset>

.fieldset-item

.fieldset-item > picture

7. 축하합니다

환경설정 미디어 쿼리로 사용자 적응형 인터페이스 빌드