가변 글꼴로 마이그레이션

1. 소개

최종 업데이트: 2022년 4월 4일

다양한 글꼴로 UI에서 동적인 가변성을 도입하면 레이아웃, 테마 및 접근성 등 모든 곳에서 더 높은 응답성을 유지하면서 앱을 더 빠르게 만들 수 있습니다.

학습할 내용

가변 글꼴의 정의
가변 글꼴로 유형을 맞춤설정하는 방법
디자인에 가변 글꼴을 적용하는 방법
Google Fonts API 및 CSS에서 가변 글꼴을 구현하는 방법

기본 요건

이 실습에서는 몇 가지 기본 디자인 개념을 배웁니다.

확장 유형에 대한 지식
Figma에 관한 지식
HTML 및 CSS에 대한 기본 지식

필요한 항목

Figma 계정
Figma Designlab 파일
웹용으로 선택한 코드 편집기

2. 시작하기

설정

시작하려면 Designlab Figma 파일에 액세스해야 합니다. 실습에 필요한 모든 항목은 Figma 파일에 있습니다. 파일을 다운로드하여 가져오거나 Figma 커뮤니티에서 복제할 수 있습니다.

먼저 Figma에 로그인하거나 계정을 만듭니다.

Figma 커뮤니티에서 복제

변수 글꼴로 마이그레이션 파일로 이동하거나 Figma 커뮤니티 내에서 변수 글꼴로 마이그레이션하기를 검색합니다. 오른쪽 상단의 복제를 클릭하여 해당 파일을 사용자의 파일에 복사합니다.

파일 레이아웃

파일을 살펴보면 파일이 소개로 시작하는 것을 알 수 있습니다. 각 섹션은 연결된 여러 개의 아트보드로 나뉘며, 섹션에 대한 몇 가지 핵심 개념과 연습이 이어집니다. 섹션과 연습은 서로 연결되며 순차적으로 완료되어야 합니다.

이 Codelab에서는 이러한 개념과 실습을 더 자세히 안내합니다. Codelab과 함께 새로운 Material You 기능에 관해 자세히 알아보세요.

소개 아트보드를 시작으로 아트보드를 순서대로 연결하는 버튼이 있습니다. 링크에 액세스하려면 버튼을 클릭하세요.

가변 글꼴 확인

시작하기 전에 가변 글꼴이 있는지 확인해야 합니다. 이 파일은 Figma에서 이미 제공되는 Roboto Flex를 사용하거나 font.google.com에서 다운로드하면 됩니다.

3. 가변 글꼴이란 무엇인가요?

가변 글꼴은 사용자가 유형과 아이콘을 제어할 수 있도록 하는 새롭고 혁신적인 글꼴 형식입니다. Roboto Serif와 Roboto Flex는 각각 다양한 축을 가진 가변 글꼴 기술을 위해 새롭게 개발된 서체입니다.

미학적 표현 및 축

디자이너는 더 이상 일반, 굵게, 기울임꼴 등 이전의 딱딱한 조합 스타일로 제한되지 않습니다. 가변 글꼴 내의 변수는 축 또는 인스턴스에 의해 제어됩니다. 유형 디자이너가 선택하는 경우 유형 디자인의 모든 변수를 사용자가 제어할 수 있는 축에 할당할 수 있습니다. 일반적인 축에는 기울임꼴, 광학 크기, 경사, 두께, 너비가 있습니다. 이 5개는 CSS에 등록된 축입니다.

이점

가변 글꼴을 사용하면 하나의 글꼴 파일로 여러 스타일을 제공하여 웹사이트를 지속 가능하고, 더 작고, 빠르게 하며, 디자이너가 더 풍부하게 표현할 수 있습니다.

4. 디자인에 가변 글꼴 사용

축 변경

사용 가능한 모든 매개변수(또는 축)를 살펴보겠습니다. 오른쪽의 유형을 선택하고 유형 세부정보 모달(더보기 아이콘)을 열어 축 슬라이더를 열고 각 매개변수를 살펴봅니다.

두께는 문자의 두께를 정의합니다. 이는 완전하고 연속적인 획 두께 범위를 제공합니다.

너비는 서체의 문자가 가로 공간에 얼마나 차지하는지를 나타냅니다.

스타일을 수직에서 비스듬하게 조정하며, 인쇄공에게 '기울기' 스타일이라고도 알려져 있습니다. 드물긴 하지만 경사는 다른 방향으로 작동할 수 있는데, 이를 '역경사' 또는 '역기울기' 스타일이라고 합니다.

등급은 서체의 광학 두께에 대한 보조 수정자이며 두께 축과 상관이 없습니다. 두께와 등급은 모두 문자의 두께에 영향을 미치지만 등급에 따른 조정은 훨씬 더 세분화됩니다.

광학 크기. 포인트로 지정된 특정 텍스트 크기에 맞게 스타일을 조정합니다. 작은 크기에서는 글자가 일반적으로 디테일이 덜한 느슨한 간격/커닝 및 두꺼운 획으로 가독성을 높이기 위해 최적화됩니다. 큰 크기에서는 글자가 얇은 획과 더 세부적인 형태 및 극단적인 두께와 너비의 헤드라인에 최적화됩니다.

Figma 이외의 가변 글꼴 축을 사용하려면 가변 글꼴 데모를 확인하세요.

5. 스타일 살리기

브랜드 스타일 가이드를 적용하는 경우 인쇄상의 제약을 알리기 위해 설정된 유형 스케일이 있을 수 있습니다. 가변 글꼴을 사용한다고 해서 이러한 일관성을 포기하는 것은 아닙니다. 단일 파일 내에서 유형 크기 조정의 유연성(어두운 배경에서 등급 두께 늘리기와 같은 사용 사례)으로 추가 개선을 제공합니다.

유형 스케일은 두 개 이상의 글꼴 모음으로 구성될 수 있지만, 여기서는 머티리얼 기본 유형 스케일의 압축 버전을 맞춤설정하는 데 하나만 사용합니다.

본문 문구로 유형 스케일을 맞춤설정해 보겠습니다. 이를 통해 먼저 사이트의 기본 유형 크기를 설정하고 여기에서 크기를 조정할 수 있습니다. 본문 대형의 기본값은 18pt이며 Roboto Flex로 선택하고 설정합니다. 가독성을 높이기 위해 조정하면 이전에는 글꼴 크기와 두께를 업데이트하여 다른 글꼴 파일을 표시했지만 이제는 일부 축을 미세 조정할 수 있습니다. 광학 크기, 등급, 두께를 조정합니다.
라벨을 진행합니다. 라벨은 더욱 유용하며 버튼과 같이 더 작은 컨텍스트에서 사용됩니다. 라벨을 적절히 조정하여 라벨이 버튼 컨테이너와 칩에 올바르게 표시되도록 합니다.
제목, 헤드라인, 디스플레이를 통해 계속 조정합니다. 세 가지 모두 페이지 제목 및 섹션과 같이 중간 사이즈부터 높은 강조 텍스트에 사용할 수 있습니다. 헤드라인과 디스플레이는 크기와 높은 강조로 더 풍부하게 표현할 수 있습니다. 여기에서 자유롭게 모든 축을 활용해보세요.
유형을 선택한 상태에서 점 4개를 클릭하고 (+)를 추가하여 텍스트 스타일을 설정합니다. 이렇게 하면 재사용 가능한 유형 설정이 일관되게 유지됩니다.

머티리얼 테마 빌더를 사용하거나 M3 디자인 키트를 복제하여 기본 머티리얼 유형 스케일을 Figma 스타일로 생성할 수 있습니다.

6. UI에 적용

유형 스케일이 설정되었으면 코드로 구현하기 위해 UI 요소에 적용해 보겠습니다. 가변 글꼴을 사용하여 더 다양한 표현과 가독성을 제공할 수 있는 방법을 고려합니다. 지난 연습에서 Figma 스타일을 설정했다면 이를 적용한 후 스타일의 축을 업데이트할 수 있습니다.

왼쪽의 UI 요소를 살펴보세요. 첫 번째 카드에는 식물 유형, 설명, 일부 카테고리 태그가 포함되어 있고, 나머지 카드에는 식물 관리 안내가 설명되어 있습니다. 식물 유형은 높은 강조 역할을 할 수 있으므로 '헤드라인' 스타일을 사용합니다. 이전에 헤드라인으로 설정한 스타일로 설정합니다. 관리 카드에는 제목도 있지만 동일한 강조를 갖고 있지 않으므로 '제목'으로 설정합니다.
식물 세부정보 및 안내 문구는 '본문 대형'으로 카테고리 라벨은 '라벨 대형'으로 할당할 수 있습니다.
다양한 역할을 실험하고 UI 요소와 유형 스케일을 조정하여 적절한 균형을 찾아보세요.

7. 코드로 구현

CSS를 사용하여 코드에 가변 글꼴을 구현하는 것은 글꼴 제공 서비스를 사용하여 글꼴에 로드하고 CSS 속성을 맞춤설정하는 모든 웹 글꼴과 유사한 방법입니다.

MWC나 프레임워크가 아닌 기본 HTML 및 CSS를 구현에 사용합니다.

Google Fonts의 가변 글꼴

Google Fonts를 글꼴 제공 서비스로 사용하면 웹사이트에서 가변 글꼴을 비롯한 수많은 글꼴을 쉽게 구현할 수 있습니다!

font.google. com으로 이동하여 어떤 가변 글꼴을 사용할 수 있는지 살펴보세요. 검색에서 필터링할 변수만 표시 글꼴을 선택합니다. 변수 글꼴에는 글꼴 모음에서 사용 가능한 각 축의 슬라이더를 설정할 수 있는 플레이그라운드가 페이지 근처 하단에 포함되어 있습니다.

CSS로 스타일 지정

모든 글꼴에 동일한 축 수를 지정하여 맞춤설정할 수 있는 것은 아닙니다. 현재는 두께, 너비, 경사, 기울임꼴, 광학 크기가 가장 일반적입니다.

가변 글꼴 이전에 있었던 기본 CSS 글꼴 속성으로 설정할 수 있습니다. 아직 널리 지원되지는 않지만(2022년 5월 기준) 새 속성 font-variation-settings를 사용하여 모든 축을 안정적으로 설정할 수 있습니다.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*글꼴 스타일에서 경사(slnt)와 기울임꼴(ital)은 안정적이지 않습니다.

8. Google Fonts API로 가져오기

Roboto만 사용하고 있지만 현재 fonts.google.com에서 사용할 수 있는 모든 글꼴을 살펴봅니다.

이 Codelab의 나머지 부분에서는 Roboto를 계속 사용하며, 이전 실습을 바탕으로 하여 다음과 같은 카드의 유형을 맞춤설정합니다.

카드 샘플 UI가 포함된 이 코드를 선택하여 웹 IDE에 복사합니다.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */

/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

헤드라인, 제목, 본문, 라벨에 대해 마지막 연습에서 설정한 스타일 사양을 기록해 둡니다. 이를 염두에 두고 Roboto Flex 페이지로 이동합니다. 슬라이더를 Figma에서 설정한 사양과 일치하도록 설정한 다음 각각에 대해 이 스타일을 선택하여 측면 창에 추가합니다.
창에 있는 선택된 스타일 아래에서 '웹에서 사용'을 찾습니다. <link> 또는 @import 두 가지 방법으로 코드에 글꼴을 추가할 수 있습니다. 하나만 필요하므로 @import를 선택하겠습니다.
@import에서 세미콜론으로 복사하여 가져오기 주석 뒤에 스타일 태그로 붙여넣습니다.
Roboto Flex가 유일하게 사용되는 글꼴이므로 가져오기 코드에 포함된 '글꼴 모음을 지정할 CSS 규칙'을 추가하여 본문에서 글꼴 모음을 호출하도록 설정합니다.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

그러면 선택한 글꼴과 스타일 세트를 가져오지만 축 범위를 사용하면 개별 스타일 대신 연속적인 스타일 범위를 사용할 수 있습니다. 범위를 만들려면 ..으로 두 값을 조인합니다(예: 100..900). 글꼴 슬라이더에 존재하는 범위만 추가해야 하며, 그렇지 않으면 올바르게 로드되지 않습니다.

이는 전체 범위에서 로드되고 다운로드 요청이 더 커지기 때문에 브라우저 내에서 매끄러운 애니메이션 전환 및 실험에 가장 적합합니다.

9. CSS 가변 글꼴 속성

글꼴을 가져왔으니 Figma로 돌아가 스타일을 지정할 CSS 속성을 가져오고 font-variation-settings CSS 속성을 살펴보겠습니다.

오른쪽 패널에서 선택한 헤드라인의 h1부터 시작하여 상단에 있는 검사 탭을 선택합니다. 패널을 개발 핸드오프용 코드 검사 모드로 전환합니다. 코드가 마지막 섹션입니다.
아직 변경하지 않았다면 형식 드롭다운을 CSS로 변경합니다. 사용되는 경우 표준 속성(font-weight, font-stretch, font-style, font-optical-sizing)이 나열되고 등록되지 않은 커스텀 축이 포함된 하위 수준의 font-variation-settings가 표시됩니다. font-variation-settings로 전환하기 전에 표준 속성을 사용하세요.

Figma에서는 장평이 아닌 너비(wdth)에 font-variation-settings를 사용합니다.

유형과 관련된 이 CSS 코드를 복사하여 h1 선택기의 스타일을 지정하세요.

h1 {
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

관리 카드 제목의 스타일은 h2에 복사할 수 있습니다. 본문 문구에도 동일한 작업을 실행하여 p에 복사합니다. 라벨 스타일을 .label에 복사할 수 있습니다.

10. 수고하셨습니다.

가변 글꼴을 채택하고 이를 디자인에 사용하는 방법과 웹에 구현하는 방법을 훌륭히 이수하셨습니다.

궁금한 사항은 언제든지 Twitter의@MaterialDesign을 사용하여 문의해 주세요.

youtube.com/MaterialDesign에서 더 많은 디자인 콘텐츠 및 튜토리얼을 기대해 주세요.