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

1. 시작하기 전에

요즘 사용자는 기기에서 다양한 환경설정을 지정합니다. 운영체제와 앱이 자신에게 맞게 보이고 느껴지기를 원합니다. 사용자 적응형 인터페이스는 이러한 환경설정을 사용하여 사용자 경험을 개선하고, 더 편안하게 느끼고, 자신의 것처럼 느끼게 할 준비가 된 인터페이스입니다. 올바르게 수행하면 사용자는 사용자 환경이 조정되고 있거나 조정되었다는 사실을 알지 못할 수 있습니다.

사용자 환경설정

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

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

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

CSS에 출시 예정 사용자 환경설정의 몇 가지 예는 다음과 같습니다.

• 데이터 절약/라이트 모드
• 색상 범위
• 대비(낮추기 | 높이기 | 줄이기)
• 색상(사용자의 색상을 페이지에 강제 적용)
• 투명성(사용 설정됨 | 감소됨)

미디어 쿼리

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

사용자 적응형

적응형이 아닌 인터페이스는 사용자가 방문해도 아무것도 변경되지 않으며, 기본적으로 조정 기능 없이 모든 사용자에게 동일한 경험을 제공합니다. 사용자 적응형 인터페이스는 5명의 사용자에게 5가지의 서로 다른 모양과 스타일을 가질 수 있습니다. 기능은 동일하지만 UI를 조정할 수 있는 사용자의 경우 미적 요소가 더 잘 인식되고 인터페이스의 사용성이 더 쉬워집니다.

기본 요건

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

빌드할 항목

이 Codelab에서는 다음에 맞게 조정되는 사용자 적응형 양식을 빌드합니다.

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

학습할 내용

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

• 밝은 테마와 어두운 테마 만들기
• 애니메이션이 적용된 접근성 높은 양식 빌드
• 레이아웃 반응형 양식
• 상대 단위 및 논리적 속성 사용

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

필요한 항목

• Chrome 89 이상 또는 선호하는 브라우저

2. 설정

코드 가져오기

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

권장사항: Codepen 사용

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

대안: 로컬에서 작업

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

Git 사용

1. https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces를 방문합니다.
2. 저장소를 폴더에 클론합니다.
3. 기본 브랜치는 beginning입니다.

파일 사용하기

소스 코드 다운로드

1. 다운로드한 ZIP 파일의 압축을 폴더에 풉니다.

프로젝트 실행

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

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

HTML 정보

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

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

3. 적응형 상호작용

Git 브랜치: beginning

이 섹션을 마치면 설정 양식이 다음과 같이 조정됩니다.

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

HTML 속성

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

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

입력 그룹화

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

요소 순서 지정

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

키보드 상호작용

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

위 동영상은 탭 키와 화살표를 사용하여 인터페이스를 탐색하고 변경하는 방법을 보여줍니다. 파란색 윤곽선은 입력 요소 주위에 매우 좁게 표시되므로 다음 스타일을 추가하여 이 상호작용에 약간의 여유 공간을 만듭니다.

style.css

input {
  outline-offset: 5px;
}

시도해 볼 만한 작업

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

마우스 상호작용

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

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

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

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

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

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

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

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

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

제공된 HTML에는 이미 모든 입력과 라벨이 지정되어 있습니다. 이 개념이 생소하다면 더 자세히 조사해 볼 가치가 있습니다.

시도해 볼 만한 작업

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

스크린 리더 상호작용

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

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

index.html

<picture aria-hidden="true">

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

슬라이더 요소 input[type="range"]에는 특별한 ARIA 속성인 aria-labelledby="media-volume"가 있습니다. 이렇게 하면 스크린 리더가 사용자 환경을 개선하는 데 사용할 수 있는 특별한 안내가 제공됩니다.

시도해 볼 만한 작업

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

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 그리드 레이아웃을 오버레이하는 스크린샷입니다.

1. style.css에 다음 스타일을 각각 추가하여 따라해 보세요.

<main>

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

Grid는 기본적으로 각 하위 요소를 자체 행에 배치하므로 요소를 쌓는 데 적합합니다. 또한 gap를 사용하면 추가적인 이점이 있습니다. 앞서 * 선택기를 사용하여 모든 요소에 margin: 0를 설정했습니다. 이제 간격에 gap를 사용하므로 이 설정이 중요합니다. 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보다 작지 않게 유지하며 공간이 있으면 열에 배치하고 그렇지 않으면 행이 좋습니다.

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

<section>

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

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

<header>

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> 및 [체크박스] 정렬

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

이 레이아웃은 :is 의사 선택기를 사용하여 사진 및 체크박스 요소에 대한 중앙 정렬을 분리합니다.

3. 다음과 같이 선택기 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);
}

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

시도해 볼 만한 작업

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

미디어 쿼리

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

참고: 각 섹션의 CSS는 style.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픽셀 이상인 경우 --repeat 맞춤 속성을 auto-fit 키워드 대신 숫자로 전환하여 두 열을 강제로 표시합니다.

.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))을 사용하여 첫 번째 열을 확장합니다. 패딩은 더 큰 맞춤 속성으로도 확장됩니다.

시도해 볼 만한 작업

1. 브라우저를 확대 및 축소하고 공간이 조정되는 것을 확인합니다.
2. 휴대기기에서 미리보기
3. 가로 모드로 휴대기기에서 미리보기

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 채널이 추출되어 자체 맞춤 속성에 배치되었습니다.

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

브랜드

: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% 이며 둘 다 채도가 매우 낮습니다.

2. 프로젝트에 코드를 추가한 후 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% 이하)이 사용됩니다. 표면과 텍스트 사이의 밝기 범위가 적절하면 사용자가 읽을 수 있는 색상을 보장하는 데 도움이 됩니다.

3. 색상이 밝기 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

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

지금까지 다양한 사용자 시나리오와 설정에 맞게 조정되는 인터페이스를 만드는 데 필요한 주요 단계를 알아봤습니다.