Chrome 98의 COLRv1 색상 그라데이션 벡터 글꼴

도미니크 뢰치체스
도미니크 뢰체스
막대 시트
로드 시터

좋아하는 그라데이션 버전을 모두 갖춘 압축 친화적 색상 벡터 글꼴입니다.

Chrome 98에서 Chrome팀과 Fonts팀은 COLRv0 글꼴 형식의 발전된 버전인 COLRv1 지원을 추가했습니다. COLRv0 글꼴 형식은 그라디언트, 합성, 혼합을 통해 색상 글꼴을 널리 퍼뜨리기 위한 것이며, 잘 압축되는 선명하고 작은 글꼴 파일을 위해 내부 도형 재사용을 개선했습니다.

지금 색상 지정하기

웹에서 텍스트는 일반적으로 CSS에서 지정된 색상으로 그려집니다. 글꼴은 특정 색상을 정의하지 않으며 픽셀을 배치해야 하는 위치만 나타냅니다. 그건 보통 좋은 일입니다. CSS를 사용하면 작성자가 유연하게 색상을 선택할 수 있습니다. 그러나 글리프가 함께 의미가 있는 여러 색상을 포함하는 경우도 있습니다. 예를 들어 연한 파란색, 분홍색, 흰색 줄무늬가 있는 이 플래그 연한 파란색과 연분홍색 줄무늬로 이루어진 트랜스젠더 깃발입니다.는 단순히 현재 텍스트 색상으로 그려지면 동일한 의미를 전달하지 않습니다.

오늘날 대부분의 사용자에게는 그림 이모티콘만 표시되는 색상 글꼴입니다. 그림 이모티콘은 일반적으로 시스템 그림 이모티콘 글꼴을 통해 또는 이미지 삽입(자체 정보 표시인 슬픈 표정을 지은 판다 이모티콘입니다.)을 통해 웹에 표시됩니다. 특히 비트맵 기반 색상 글꼴의 파일 크기가 클 경우 그림 이모티콘에 웹 글꼴을 사용하기가 어렵습니다. Google은 COLRv1을 지원함으로써 웹 등에서 창의적인 색상 글꼴 사용이 급증할 것으로 기대하고 있습니다.

너의 색깔을 보여 줘

다음과 같은 몇 가지 예를 준비했습니다.

이 예에서 사용된 Google Fonts의 예시 애셋은 Google Fonts 웹 API에서 확인할 수 있습니다. Chrome 98 이상에서만 작동하고 실험용 작업을 보여주므로 fonts.google.com의 디렉터리에는 표시되지 않습니다.

이제 무료 및 오픈소스 도구를 사용하여 자신만의 COLRv1 글꼴을 만들 수 있습니다. SVG 소스 이미지에서 COLRv1 글꼴을 빌드할 수 있게 해주는 nanoemoji 글꼴 컴파일러를 확인한 다음 Chrome 98 이상에서 사용해 보세요. 이 안내에 따라 그라데이션 색상을 변경하여 Bungee Spice를 직접 만들어 보세요.

예를 들어 다음과 같이 Bungee Spice 글꼴을 파란색과 빨간색 그라데이션으로 수정할 수 있습니다.

파란색과 빨간색 그라데이션으로 톤이 적용된 번지 스파이스 색상 글꼴의 단어 언덕

결과를 트윗(@googlefonts)으로 보내주세요. 🙂 방사형 또는 스윕 그라데이션을 사용해 보세요.

COLRv1의 새로운 기능

글꼴 형식은 색상을 지원하는 여러 방법을 지원하며 모두 서로 다른 장단점이 있지만 지금까지 웹에서 성공적인 결과를 얻은 것은 없습니다. (장단점에 관해 자세히 알아보려면 Dominik의 BlinkOn 15 컨퍼런스 토크를 살펴보세요.) Chrome 98에서는 COLRv0의 발전된 버전인 COLRv1이 지원됩니다. COLRv1이 그래픽 기능과 컴팩트 파일의 조합을 통해 다양한 색상 글꼴 사용 사례에 적합한 선택이 되기를 바랍니다. COLRv1은 그라데이션, 합성 및 블렌딩을 추가하고 내부 도형 재사용을 개선하여 훨씬 더 작은 파일을 만듭니다.

COLRv1은 SVG Native와 거의 동일한 표현 능력과 그 위에 추가된 혼합 및 합성 기능을 갖추고 있습니다. 색상 채우기에는 단색, 선형 그래디언트, 방사형 그래디언트, 스윕/원뿔 그래디언트의 네 가지 유형이 있습니다. COLRv1을 사용하면 변환, 회전, 비선형 및 배율 변환의 전체 집합을 사용하여 글리프 요소를 재배치하고 변환할 수 있습니다. 또한 글꼴 변형을 지원하며 글꼴의 기존 도형 정의 형식을 재사용합니다.

갈색 바탕에 재사용된 별이 있는 파란색과 보라색 수정 구슬 이모티콘입니다.
수정 구슬 이모티콘에 도형 재사용

수정 구슬 이모티콘을 예로 생각해 보겠습니다. 별 모양의 하이라이트는 모양은 동일하지만 크기는 다르기 때문에 파일 내에서 중복 없이 한 도형만 재배치하고 재사용할 수 있습니다. 이 형식을 사용하면 각 글리프에 동일한 도형을 중복 인코딩하지 않고도 새 글리프 내에서 전체 글리프를 재사용할 수 있습니다. 꽃 장식이 있는 장식용 색상 글꼴을 상상해 보세요. 기존 색상 글리프를 참조하여 동일한 꽃 모양이 여러 글자에 배치되어 있습니다. 웹 글꼴 사용 사례의 경우 COLRv1은 woff2에서 잘 압축됩니다. 예를 들어 COLRv1을 사용하는 Twemoji 테스트 빌드는 확장 시 약 1.2MB를 차지하지만 woff2 형식에서는 약 0.6MB입니다. 전체 Noto 이모티콘 Glyph 세트의 빌드는 비트맵 버전의 경우 9MB에서 COLRv1+woff2 형식의 1.85MB로 줄어듭니다.

비트맵 글꼴인 Noto 이모티콘과 COLRv1 글꼴(약 9MB)과 1.85MB를 비교하는 막대 그래프
WOFF2 압축 후 Noto 이모티콘 글꼴 크기 CBDT/CBLC와 COLRv1 비교.

색상 글꼴 사용 사례

눈길을 끄는 헤드라인

새로운 색상의 글꼴을 사용하면 시각적인 하이라이트, 광고 제목, 배너가 눈에 띌 수 있습니다.

Plakato Color Happy 2022는 혁신적인 파운드리인 Underware (트위터: @underware, Instagram: @underwarefoundry)에서 만든 에너지 넘치는 스윕 그라데이션이 특징입니다. Underware의 첫 COLRv1 출시에 관한 자세한 내용은 블로그 게시물을 참고하세요.

이미지 대체 불가: 그림 이모티콘 글꼴

사용자 제작 콘텐츠를 지원하는 경우 사용자는 이모티콘을 사용할 가능성이 높습니다. 오늘날에는 일관된 크로스 플랫폼 렌더링과 OS 지원보다 최신 그림 이모티콘 지원 기능을 보장하기 위해 텍스트를 검사하고 그림 이모티콘을 이미지로 대체하는 것이 매우 일반적입니다. 그런 다음 클립보드 작업 중에 이러한 이미지를 텍스트로 다시 전환해야 합니다. 실제 예는 다음과 같습니다.

인라인 이미지를 img 태그로, 메타데이터를 채팅 기록의 일부로 보여주는 코드 스니펫
Google Chat에서 이미지 바꾸기

그림 이모티콘 글꼴이 있는 경우 다음과 같이 텍스트를 글꼴로 렌더링하면 됩니다.

<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);

.emoji {
  font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>

마찬가지로 그림 이모티콘 반응 구성요소에서 COLRv1은 이미지 애셋 카탈로그 대신 작은 글꼴 파일을 사용할 수 있는 기회를 제공합니다.

GitHub에서 사용되는 그림 이모티콘 선택 도구 UI
GitHub의 그림 이모티콘 반응 선택 도구

전체 그림 이모티콘 선택 도구를 위해 몇 개의 이미지를 가져와야 할까요?

아이콘 글꼴의 색상

아이콘 글꼴에 색상을 사용하면 선명도를 높이고 글리프를 더 쉽게 이해할 수 있습니다.

검은색 윤곽선의 초록색 아이콘 3개
https://fonts.google.com/icons의 머티리얼 투톤 아이콘

예술적 표현

공간에 효율적인 색상 글꼴을 사용하면 웹상의 텍스트에서 새로운 형태의 예술적 표현을 사용할 수 있습니다. 이 Kufi 스타일 아랍어 글꼴의 예는 펜촉과 잉크를 사용하지 않고 석재로 조각한 쿠피 문체에 전통 서예의 잉크 흐름이 적용될 때 어떤 모습일지 예술적으로 표현한 색상 그라데이션을 사용합니다.

검은색에서 빨간색으로의 그라데이션이 있는 아랍어 문자
Reem Kufi Ink, 칼레드 호스니의 아랍어 글꼴

특징 감지

현재는 사용자 에이전트 스니핑을 통해 또는 @PixelAmbachtChromaCheck와 같은 라이브러리를 검색하여 캔버스에서 색상 글리프 렌더링을 테스트하는 방법으로 브라우저 엔진이 특정 색상 글꼴 형식을 지원하는지 확인할 수 있습니다. 두 솔루션 모두 최적의 방법이 아닙니다. 기능 테스트는 특정 기능 자체만 감지하고 사용자 에이전트 스니핑을 방지해야 합니다. ChromaCheck 라이브러리는 지원 여부를 확인하기 위해 리소스를 많이 사용하는 2D 캔버스 작업을 실행할 필요가 없습니다.

Chrome팀은 이를 개선하기 위해 CSS 실무 그룹 내에서 JavaScript 및 CSS의 선언적 지원에 관한 정보를 제공하기 위해 일련의 토론[1, 2] 을 시작했습니다. 팀은 향후 Chrome 버전에서 색상 글꼴 및 기타 글꼴 기술에 관한 효율적인 기능 감지 기능을 출시할 계획입니다.

COLRv1 지원이 Chrome으로 제한되었을 때 프로젝트에서 색상 글꼴을 사용하려면 두 가지 방법이 있습니다. 글꼴 공급업체에 흑백 글리프가 포함된 COLRv1 글꼴을 요청하세요. COLRv1을 지원하지 않는 사용자 에이전트는 흑백 글리프 렌더링으로 대체됩니다. 또는 ChromaCheck 라이브러리나 사용자 에이전트 스니핑을 사용해 COLRv1 지원이 가능한지 확인할 수 있습니다. 그런 다음 사용자 에이전트를 지원하기 위해 COLRv1 글꼴을 로드하는 CSS를 제공하고 다른 브라우저에서는 COLRv0, 비트맵 글꼴 형식 또는 OpenType SVG와 같은 대체 글꼴 형식을 사용합니다.

CSS 글꼴 팔레트 지원

이 기능은 다른 색상 세트를 사용하는 데 새 글꼴이 필요하지 않은 경우에 매우 유용합니다. 다행히 font-palette CSS 속성이라는 메커니즘이 있습니다. Chrome팀은 Chrome에서 글꼴 팔레트를 지원하기 위해 노력하고 있습니다.

COLRv1 글꼴 및 사용자

COLRv1 글꼴이 마음에 든다면 글꼴 공급업체에 프로젝트에서 사용할 COLRv1 색상 글꼴에 관해 문의하거나 위의 예시와 데모를 시도해 보세요. 또는 바로 자신만의 글꼴 만들기를 시도해 보는 것은 어떨까요?

Chrome의 COLRv1에 관한 의견이 있으면 blink-dev 메일링 리스트에 게시하거나 Issue Tracker에서 문제를 제출해 주세요. COLRv1 글꼴 형식 자체에 관한 의견이 있으면 COLRv1 사양 GitHub 저장소에서 문제를 제출해 주세요.

Google은 Chrome 98을 통해 COLRv1을 통해 완전히 새로운 차원의 서체적 창의성을 웹에 적용합니다.

자세히 알아보기

자세한 내용을 알고 싶으시다면 다음 자료를 참고하세요.

COLRv1의 작동 방식과 Chrome에서 구현되는 방식을 알아보려면 Dominik의 BlinkOn 15 컨퍼런스 토크를 확인해 보세요.

감사의 말씀

베흐다드 에스파보드, 코시모 루포, 피터 콘스터블, 벤 바그너, 베르너 렘버그, 데이브 크로스랜드, 블라디미르 레반토프스키, 조나단 큐, 로렌스 페니, 크리스 릴리, 데이비드 조나단 로스, Underware, Just van Rossum, Roel NothersLR1과