<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://blog.update.sh/posts/</id>
    <title>$ sh blog.update.sh</title>
    <updated>2026-04-02T14:02:48.299Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <author>
        <name>Nesswit</name>
        <email>rishubil+blog@gmail.com</email>
        <uri>https://blog.update.sh/about</uri>
    </author>
    <link rel="alternate" href="https://blog.update.sh/posts"/>
    <link rel="self" href="https://blog.update.sh/feed-posts"/>
    <subtitle>All post contents</subtitle>
    <logo>https://blog.update.sh/favicon.png</logo>
    <icon>https://blog.update.sh/favicon.png</icon>
    <rights>All rights reserved 2013, Nesswit</rights>
    <entry>
        <title type="html"><![CDATA[폰트에 기능이 있다구요? (기본편)]]></title>
        <id>https://blog.update.sh/posts/what-is-font</id>
        <link href="https://blog.update.sh/posts/what-is-font"/>
        <updated>2025-11-22T15:00:00.000Z</updated>
        <summary type="html"><![CDATA[폰트의 기본 개념부터 OpenType 기능, 가변 폰트, 렌더링 방식까지 폰트에 대한 포괄적인 이해를 제공합니다. 실제 인터랙티브 예시를 통해 폰트의 다양한 특성과 활용법을 확인할 수 있습니다.
]]></summary>
        <content type="html"><![CDATA[<div class="mdx-content leading-[1.6]" style="--v2806f315:0.875rem,[object Object],0.875rem,[object Object];--v67bf8b50:#6b7280;--v67bf83ce:#d1d5db;--v67bf878f:#9ca3af;--v67bf92d2:#374151;" data-v-ec58c90e>
<details class="my-2" open><summary class="cursor-pointer font-semibold dark:font-bold"> 목차 열기/닫기 </summary><nav><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#1-이-글에-대하여" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">1. 이 글에 대하여</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#2-폰트란-무엇인가" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">2. 폰트란 무엇인가</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#21-서체typeface-글꼴-가족font-family-글꼴font" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">2.1. 서체(Typeface), 글꼴 가족(Font Family), 글꼴(Font)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#22-문자character-글리프glyph" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">2.2. 문자(Character), 글리프(Glyph)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#23-폰트의-종류" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">2.3. 폰트의 종류</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#24-파일-형식" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">2.4. 파일 형식</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#3-폰트의-크기" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3. 폰트의 크기</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#31-em-square" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3.1. Em Square</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#32-baseline" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3.2. Baseline</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#33-x-height" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3.3. x-height</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#34-ascender-descender-cap-height" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3.4. Ascender, Descender, Cap Height</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#35-한중일-글리프의-크기" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3.5. 한중일 글리프의 크기</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#36-행간line-height" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3.6. 행간(Line Height)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#37-정리" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">3.7. 정리</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#4-폰트로-할-수-있는-것" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">4. 폰트로 할 수 있는 것</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#41-크기size" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">4.1. 크기(Size)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#42-굵기weight" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">4.2. 굵기(Weight)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#43-이탤릭italic-오블리크oblique" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">4.3. 이탤릭(Italic), 오블리크(Oblique)</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#5-opentype의-타이포그래피-기능" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">5. OpenType의 타이포그래피 기능</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#51-합자ligature" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">5.1. 합자(Ligature)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#52-커닝kerning" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">5.2. 커닝(Kerning)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#53-opentype-기능opentype-features" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">5.3. OpenType 기능(OpenType Features)</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#6-가변-폰트variable-fonts" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">6. 가변 폰트(Variable Fonts)</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#61-굵기-축weight-axis-너비-축width-axis" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">6.1. 굵기 축(Weight Axis), 너비 축(Width Axis)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#62-기울기-축slant-axis-이탤릭-축italic-axis" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">6.2. 기울기 축(Slant Axis), 이탤릭 축(Italic Axis)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#63-시각적-크기-축optical-size-axis" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">6.3. 시각적 크기 축(Optical Size Axis)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#64-커스텀-축custom-axis" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">6.4. 커스텀 축(Custom Axis)</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#7-특이한-폰트" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">7. 특이한 폰트</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#71-색상-폰트color-fonts" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">7.1. 색상 폰트(Color Fonts)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#72-딩뱃dingbat" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">7.2. 딩뱃(Dingbat)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#73-아이콘-폰트icon-fonts" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">7.3. 아이콘 폰트(Icon Fonts)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#74-특수-폰트" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">7.4. 특수 폰트</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#8-렌더링rendering" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">8. 렌더링(Rendering)</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#81-래스터화rasterization" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">8.1. 래스터화(Rasterization)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#82-안티앨리어싱anti-aliasing" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">8.2. 안티앨리어싱(Anti-aliasing)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#83-서브픽셀-렌더링subpixel-rendering" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">8.3. 서브픽셀 렌더링(Subpixel Rendering)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#84-힌팅hinting" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">8.4. 힌팅(Hinting)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#85-렌더링-엔진" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">8.5. 렌더링 엔진</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#9-인코딩encoding" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">9. 인코딩(Encoding)</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#91-문자-인코딩character-encoding" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">9.1. 문자 인코딩(Character Encoding)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#92-유니코드unicode" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">9.2. 유니코드(Unicode)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#93-유니코드-정규화unicode-normalization" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">9.3. 유니코드 정규화(Unicode Normalization)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#94-제어-문자control-characters" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">9.4. 제어 문자(Control Characters)</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#95-private-use-area-pua" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">9.5. Private Use Area (PUA)</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#10-폰트-라이선스font-license" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">10. 폰트 라이선스(Font License)</a><ul class="my-2 list-outside list-disc"><li class="ms-6 text-pretty" data-v-09555c0e><a href="#101-주요-확인-사항" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">10.1. 주요 확인 사항</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#102-대표적인-폰트-라이선스" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">10.2. 대표적인 폰트 라이선스</a></li></ul></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#11-마치며" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">11. 마치며</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#12-이-글에서-사용한-폰트" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">12. 이 글에서 사용한 폰트</a></li><li class="ms-6 text-pretty" data-v-09555c0e><a href="#13-참고자료" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">13. 참고자료</a></li></ul></nav></details>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="1-이-글에-대하여"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#1-이-글에-대하여">1. 이 글에 대하여</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>이 글은 과거 사내 세미나에서 발표했던 내용을 다듬은 것입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>기획팀, 디자인팀 동료들이 폰트를 사용하면서 궁금했던 점들을 질문해 주었고, 이를
바탕으로 폰트의 기본 개념과 기술적 내용을 정리했습니다.
저 자신도 폰트에 대해 정확히 알지 못했던 부분이 많았기에, 공부하는 마음으로
준비한 발표였습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>발표 자료를 인터랙티브하게 만들어 실제 프레젠테이션에서 직접 텍스트를 수정하고
폰트의 다양한 특성을 시각적으로 확인할 수 있도록 구성했는데, 이 부분을 블로그
포스트로 다듬어 공개하면 많은 분께 도움이 될 것 같아 글로 옮기게 되었습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div class="w-full h-40 relative flex items-center justify-center"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">굵기</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">400</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="400" max="1000" step="1" value="400"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">크기</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">60px</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="30" max="60" step="1" value="60"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Wanted Sans</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>세미나에서 발표한 원본 내용을 블로그 포스트 하나로 담기에는 분량이 많아, 내용을
두 개의 글로 나누어 다루기로 했습니다.
이 글에서는 폰트에 대한 기본적인 개념과 특징에 대해서만 알아볼 것이며, 웹
환경에서의 활용법과 팁 등은 별도의 글에서 소개할 예정입니다.
그러므로 이 글에서 소개하는 내용은 웹 환경에 국한되지 않고, 폰트를 사용할 수
있는 대부분의 환경에 적용될 수 있는 일반적인 내용을 다룹니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이 글의 내용에는 타이포그래피에 관한 내용이 포함되어 있지만, 디자인적인
측면보다는 기술적인 정의, 특징, 활용법을 중심으로 다룹니다.
또, 타이포그래피나 폰트에 대한 전문적인 지식을 바탕으로 작성된 글이 아니므로,
심도 있는 내용을 원하시는 분들께는 다소 부족할 수 있습니다.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="2-폰트란-무엇인가"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#2-폰트란-무엇인가">2. 폰트란 무엇인가</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>우리는 다양한 환경에서 다양한 목적으로 폰트를 사용합니다.
폰트를 선택하고 적용하는 과정에서, 폰트의 기본 개념과 특성을 이해하지 못하면
원하는 결과를 얻기 어렵습니다.
폰트는 단순히 문자를 표시하는 도구가 아니라, 시각적 표현과 의사소통의 중요한
수단이기 때문입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>우리가 폰트에 대해 더 잘 이해하면 더 나은 디자인 결정을 내리고, 텍스트의
가독성과 미적 품질을 향상할 수 있습니다.
폰트로 어떤 일을 할 수 있는지, 그리고 어떻게 활용할 수 있는지 알아보겠습니다.
이를 위해 먼저 폰트의 기본 개념부터 살펴보겠습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="21-서체typeface-글꼴-가족font-family-글꼴font"><a class="hover:text-teal-800" href="#21-서체typeface-글꼴-가족font-family-글꼴font">2.1. 서체(Typeface), 글꼴 가족(Font Family), 글꼴(Font)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>먼저 서체, 글꼴 가족, 글꼴이 무엇인지 알아보겠습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>일반적으로 &#39;폰트&#39;라고 하는 것은 서체, 글꼴 가족, 글꼴을 구분하지 않고 통칭하는
경우가 많습니다.
그러나 엄밀히 말하면, 서체와 글꼴 가족, 글꼴은 서로 다른 개념입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>서체란 문자의 디자인 스타일을 의미합니다.
어떠한 디자인 원칙과 미적 기준에 따라 만들어진 문자 모양의 전체 집합을
말한다고도 할 수 있습니다.
예를 들어 &#39;나눔명조&#39;, &#39;Noto Sans KR&#39; 등은 서체의 이름입니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1213214335-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2"><p class="my-2 text-pretty" data-v-9880527e>나눔명조</p></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1267989792-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2"><p class="my-2 text-pretty" data-v-9880527e>Noto Sans KR</p></div></div><div class="text-center text-gray-500 dark:text-gray-500"><p class="my-2 text-pretty" data-v-9880527e>텍스트를 직접 수정하며 확인해 보세요.</p></div></div>
<p class="my-2 text-pretty" data-v-9880527e>글꼴 가족은 서체의 하위 개념으로, 동일한 서체 내에서 굵기(Weight),
이탤릭(Italic) 등을 포함한 다양한 스타일의 집합을 의미합니다.
&#39;나눔명조&#39; 서체에는 &#39;나눔명조 Regular&#39;, &#39;나눔명조 Bold&#39;, &#39;나눔명조 Extra Bold&#39;
등을 통틀어 &#39;나눔명조&#39; 글꼴 가족이라고 부릅니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>글꼴은 서체의 특정 크기와 스타일의 실제 구현체를 의미합니다.
예를 들어, &#39;나눔명조 Bold 14px&#39;나 &#39;Noto Sans KR Regular 16px&#39; 같은 것들이
글꼴에 해당합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>앞서 언급한 것처럼 디지털 타이포그래피에서는 이들을 엄밀하게 구분하지 않고,
모두 &#39;폰트&#39;라는 용어로 통칭하는 경우가 많습니다.
활판 인쇄나 사진 식자에서는 이러한 구분이 더 엄격했지만, 디지털 환경에서는
용어 간의 경계가 모호해졌기 때문입니다.
이 글에서도 앞으로 서체, 글꼴 가족, 글꼴을 구분하지 않고 &#39;폰트&#39;라는 용어로
통칭할 것입니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="22-문자character-글리프glyph"><a class="hover:text-teal-800" href="#22-문자character-글리프glyph">2.2. 문자(Character), 글리프(Glyph)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>문자는 텍스트의 기본 단위입니다.
로마자 알파벳 &#39;A&#39;, &#39;B&#39;, &#39;C&#39;나 한글 &#39;ㄱ&#39;, &#39;ㄴ&#39;, &#39;ㄷ&#39; 같은 것들이 문자에
해당합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>글리프는 이러한 문자를 시각적으로 표현하는 구체적인 모양입니다.
우리가 &#39;A&#39;라는 문자를 화면에 표시한다고 할 때, 어떤 폰트를 사용하느냐에 따라
서로 다른 모양으로 나타납니다.
이것은 서로 다른 폰트에서는 같은 문자를 표현하는 글리프가 다르기 때문입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>같은 폰트 안에서도 동일한 문자를 여러 개의 글리프로 표현할 수 있다는 점에
유의하세요.
왜냐하면 같은 폰트 내에서도 글꼴에 따라 글리프의 모양이 다를 수 있기
때문입니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans (기본 글리프)</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans (대체 글리프)</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시는 Wanted Sans에서 동일한 문자 &#39;Q&#39;와 &#39;a&#39;를 서로 다른 글리프로 표현한
것입니다.
강조한 문자의 모양이 확연히 다른 것을 볼 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>폰트마다 지원하는 문자 집합이 다르기 때문에, 특정 폰트로 표현할 수 없는 문자가
있을 수 있습니다.
이 경우 운영체제나 애플리케이션은 대체 폰트를 사용하여 해당 문자를 표현하려고
시도합니다.
그러나 대체 폰트가 없거나, 대체 폰트에서도 해당 문자를 지원하지 않을 때는 빈
사각형이나 물음표와 같은 대체 기호로 표시될 수 있습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="23-폰트의-종류"><a class="hover:text-teal-800" href="#23-폰트의-종류">2.3. 폰트의 종류</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>세상에는 수많은 폰트가 존재하며, 디자인 스타일, 용도, 기술적 특성 등에 따라
다양하게 분류됩니다.
여기서는 이러한 분류 중 가장 대표적인 분류인 세리프(Serif)와 산세리프(Sans
Serif), 가변폭(Variable-width)과 고정폭(Monospace)에 대해서만 알아보겠습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>세리프 폰트는 글리프의 획 끝에 작은 장식(삐침, 꼬리)이 있는 폰트로,
전통적이고 격식 있는 느낌을 줍니다.
우리나라에서 &#39;바탕&#39;, &#39;명조&#39; 등으로 부르는 폰트가 세리프 폰트에 해당합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>반대로 산세리프 폰트는 이러한 장식이 없는 폰트로, 현대적이고 깔끔한 느낌을
줍니다.
우리나라에서 &#39;돋움&#39;, &#39;고딕&#39; 등으로 부르는 폰트가 산세리프 폰트에 해당합니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1213214335-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">세리프 폰트: 나눔명조</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">산세리프 폰트: Wanted Sans</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>가변폭 폰트는 각 글리프의 너비가 일정하지 않은 폰트입니다.
대부분의 폰트가 가변폭 폰트에 해당하며, 일반적인 문서 작성이나 웹 페이지에서
사용됩니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>고정폭 폰트는 글리프의 너비가 균일한 폰트입니다.
주로 코드 편집기나 터미널에서 사용되며, 금액을 표에 표시하는 것처럼 텍스트가
세로로 정렬되어야 하는 상황에 적합합니다.
한중일 글리프를 지원하는 고정폭 폰트는 일반적으로 한중일 글리프를 다른 글리프
대비 2배의 너비로 디자인합니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--913515245-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">가변폭 폰트: Pretendard Variable</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--80724564-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">고정폭 폰트: D2 Coding</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서 가변폭 폰트는 각 행의 너비가 다르지만, 고정폭 폰트는 모든 행의
너비가 같은 것을 볼 수 있습니다.
특히 &#39;D2 Coding&#39; 폰트에서는 한글 글리프가 다른 글리프 대비 2배의 너비로
디자인된 것을 확인할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>아래는 폰트의 주요 종류와 특징을 정리한 표입니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">구분</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">세리프<br>(Serif)</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">산세리프<br>(Sans Serif)</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">가변폭<br>(Variable-width)</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">고정폭<br>(Monospace)</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">설명</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">글리프의 획 끝에 장식이 있음</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">글리프의 획 끝에 장식이 없음</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">각 글리프의 너비가 일정하지 않음</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">글리프의 너비가 균일함</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">예시</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">나눔명조, Times New Roman</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">나눔고딕, Arial</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">대부분의 일반 폰트</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">D2 Coding, Consolas</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">용도</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">인쇄물, 책, 신문</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">웹, 모바일, 현대적 디자인</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">문서 작성, 웹 페이지</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">코드 편집기, 터미널, 표</td></tr></tbody></table></div>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="24-파일-형식"><a class="hover:text-teal-800" href="#24-파일-형식">2.4. 파일 형식</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>폰트 파일에는 여러 형식이 있지만, 가장 널리 사용되는 형식은 TrueType(TTF),
OpenType(OTF), WOFF/WOFF2(Web Open Font Format)입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>TTF와 OTF는 웹을 제외한 대부분의 환경에서 사용되는 기본 폰트 파일 형식입니다.
두 형식 모두 OpenType 표준을 따르며, 일반적인 사용 환경에서는 체감 차이가 거의
없습니다.
어떤 형식을 선택해도 무방하지만, 폰트 제작자가 의도한 형식을 사용하는 것이
좋습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>두 형식 간의 장단점을 비교하자면, 저해상도에서 가독성과 곡선의 정밀도에서
약간의 차이를 보입니다.
TTF는 TrueType 곡선을 사용하여 곡선 처리가 더 단순하고, 저해상도 환경에서 더
나은 가독성을 제공하는 경우가 있습니다.
반면 OTF는 CFF(Compact Font Format)라는 PostScript 기반의 곡선을 사용하여,
더 정밀한 곡선 표현을 지원하여 고해상도 환경에서 더 나은 품질을 제공합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>웹에서는 WOFF(Web Open Font Format)와 WOFF2를 주로 사용합니다.
WOFF/WOFF2는 TTF나 OTF를 압축한 형식으로, 네트워크를 통한 전송에 최적화되어
있습니다.
WOFF2는 WOFF보다 약 30% 더 나은 압축률을 제공하는 최신 형식입니다.
이전에는 웹에서 다른 형식의 폰트를 사용해야 했지만, 현재는 모든 주요 웹
브라우저가 WOFF2를 지원하므로 이 형식을 사용하는 것이 권장됩니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">구분</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">TrueType(TTF)</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">OpenType(OTF)</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">WOFF/WOFF2</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">특징</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">TrueType 곡선 사용, 저해상도 가독성 우수</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">CFF 곡선 사용, 고해상도 품질 우수</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">TTF/OTF 압축 형식, 웹 최적화</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">적용 범위</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">데스크톱, 모바일</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">데스크톱, 모바일</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">웹 브라우저</td></tr></tbody></table></div>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="3-폰트의-크기"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#3-폰트의-크기">3. 폰트의 크기</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>폰트를 사용하면서 많이 변경하는 속성 중 하나가 바로 &#39;크기&#39;입니다.
그러나 우리가 폰트의 크기를 조절할 때, 실제로 어떤 기준으로 크기가 결정되는지
직관적으로 이해하기 어려운 경우가 많습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>폰트의 크기와 관련된 주요 개념으로는 Em Square, Baseline, x-height, Ascender,
Descender, Cap height, Line height 등이 있습니다.
각 용어가 무엇을 의미하는지, 그리고 폰트의 시각적 표현에 어떤 영향을 미치는지
살펴보겠습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="31-em-square"><a class="hover:text-teal-800" href="#31-em-square">3.1. Em Square</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>Em Square<sup><a href="#user-content-fn-1" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" id="user-content-fnref-1" data-footnote-ref="true" aria-describedby="footnote-label">1</a></sup>는 폰트에서 글리프의 크기를 정의하는 기준 길이입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>활판인쇄에서는 대문자 &#39;M&#39;의 활자 크기를 의미했기 때문에 &#39;Em&#39;이라는 이름이
붙었지만, 디지털 폰트에서는 더 이상 활자가 사용되지 않기 때문에 Em Square가
반드시 대문자 &#39;M&#39;의 크기와 일치하지는 않습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>Em Square의 크기는 폰트 디자이너가 설계 시 결정하며, 일반적으로 1000, 1024,
2048 같은 값을 사용합니다.
Em Square의 크기는 폰트 내부의 좌표 단위로 사용되는 값입니다.
그 자체가 단위이므로, Em Square의 값에는 단위가 붙지 않습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans (Em Square: 2048)</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname--1213214335-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">나눔명조 (Em Square: 1024)</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서 직접 텍스트를 수정해 보면 Em Square의 위치가 글리프의 위치와
일치하지 않는다는 것을 알 수 있습니다.
폰트에서 Em Square는 길이 단위를 정의하는 추상적인 개념으로, 실제 Em Square의
구체적인 위치를 정의하지는 않습니다.
따라서 앞으로 이 문서에서 예시로 사용하는 Em Square의 위치는 시각적 이해를 돕기
위한 편의적인 표현이고, 실제 글리프의 Em Square의 위치를 나타내지 않습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="32-baseline"><a class="hover:text-teal-800" href="#32-baseline">3.2. Baseline</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>Baseline은 글리프가 배치되는 가상의 수평 기준선입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>대부분의 글리프는 이 선을 기준으로 정렬되지만, 일부 글리프는 Baseline 아래로
내려가기도 합니다.
소문자 &#39;g&#39;, &#39;j&#39;, &#39;p&#39;, &#39;q&#39;, &#39;y&#39; 같은 글리프는 Baseline 아래로 내려가는
부분(Descender)을 가지고 있습니다.
이에 대해서는 뒤에서 더 자세히 설명하겠습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>한편, 둥근 모양의 글리프(&#39;o&#39;, &#39;d&#39;, &#39;e&#39; 등)는 시각적 균형을 위해 Baseline을 약간
넘어갑니다.
글리프가 Baseline에 정확히 맞춰지면 시각적으로 떠 있거나 작아 보이기
때문입니다.
이러한 디자인 기법을 Overshoot이라고 합니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1213214335-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">나눔명조</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="33-x-height"><a class="hover:text-teal-800" href="#33-x-height">3.3. x-height</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>x-height는 소문자 &#39;x&#39;의 높이를 의미하며, 소문자의 기본 높이를 나타냅니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>소문자 &#39;x&#39;는 소문자 중에서 위아래로 돌출된 부분이 없고, 글리프가 사각형에
가까운 안정적인 모양이기 때문에 소문자의 높이를 정의하는 데 적합합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>x-height는 baseline부터의 거리로 정의되며, Em Square 값을 기준으로 그 수치를
결정합니다.
앞으로 설명할 Ascender, Descender, Cap height 등 다른 높이 값들도 Em Square를
기준으로 거릿값을 정하게 됩니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname--1213214335-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">나눔명조</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>x-height가 큰 폰트는 글리프가 커 보이고 가독성이 향상되는 경향이 있습니다.
동일한 폰트를 사용하되, x-height 값을 다르게 설정한 예시를 아래에서 확인할 수
있습니다.
x-height 변화에 따른 가독성 차이를 직접 확인해 보세요.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Roboto Flex (작은 x-height)</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Roboto Flex (큰 x-height)</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="34-ascender-descender-cap-height"><a class="hover:text-teal-800" href="#34-ascender-descender-cap-height">3.4. Ascender, Descender, Cap Height</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>Ascender, Descender, Cap height도 x-height와 마찬가지로 Em Square를 기준으로
정의되는 높이 값입니다. 여기서는 간략히 각각을 소개하고 예시를 통해
살펴보겠습니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">구분</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Ascender</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Descender</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Cap height</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">설명</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">소문자에서 x-height를 넘어 위로 올라가는 부분의 높이</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">소문자에서 Baseline 아래로 내려가는 부분의 높이</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">대문자의 높이</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">예시</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">소문자 &#39;b&#39;, &#39;d&#39;, &#39;h&#39;, &#39;k&#39; 등</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">소문자 &#39;g&#39;, &#39;j&#39;, &#39;p&#39;, &#39;q&#39;, &#39;y&#39; 등</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">대문자 &#39;H&#39;, &#39;A&#39;, &#39;T&#39; 등</td></tr></tbody></table></div>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname--1213214335-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">나눔명조</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="35-한중일-글리프의-크기"><a class="hover:text-teal-800" href="#35-한중일-글리프의-크기">3.5. 한중일 글리프의 크기</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>폰트에서 한중일(CJK) 문자의 글리프는 라틴 문자와 달리 Baseline과 같은 기준선이
명확하지 않습니다.
한중일 글리프의 크기와 위치는 폰트 디자이너가 라틴 문자와 시각적으로 균형 있게
보이도록 조정하며, 주로 Em Square의 중심에 맞추어 디자인됩니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname--1213214335-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">나눔명조</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="36-행간line-height"><a class="hover:text-teal-800" href="#36-행간line-height">3.6. 행간(Line Height)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>행간은 인접한 행의 Baseline 사이 거리를 의미합니다.
폰트의 기본 행간은 Ascent, Descent, Line gap의 합으로 결정됩니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>Line gap은 폰트 디자이너가 폰트 파일에 지정하는 이전 행의 Ascender와 다음 행의
Descender 사이의 추가 간격입니다.
폰트마다 다르게 설정되며, 0으로 설정된 폰트도 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>행간은 텍스트의 가독성과 밀접한 관련이 있습니다.
줄 간격이 넓을수록 가독성이 향상되지만, 지나치면 행 간 연결성이 떨어집니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div class="w-full min-h-60 relative flex items-center justify-center"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">행간</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">125px</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="65" max="125" step="1" value="125"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Wanted Sans</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서 행간값이 변화함에 따라 실제 Baseline 간의 간격이 달라지는 것을
확인할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>파란색 선으로 표시된 Line box 기준선들은 한 행의 시작 위치와 끝 위치를
나타냅니다.
Line box는 Line gap을 절반으로 나누어 위아래에 추가한 영역이 됩니다.
만약 Line gap이 0이라면 Line box는 Ascender와 Descender에 딱 맞게 설정됩니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="37-정리"><a class="hover:text-teal-800" href="#37-정리">3.7. 정리</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>지금까지 알아본 용어를 정리하면 다음과 같습니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">용어</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">설명</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Em Square</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">폰트 내부 좌표계의 기준 격자 (1000, 1024, 2048 등)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Baseline</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">글리프가 배치되는 가상의 수평 기준선</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">x-height</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">소문자 &#39;x&#39;의 높이 (소문자의 기본 높이)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Ascender</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">소문자에서 x-height를 넘어 올라가는 부분</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Descender</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">소문자에서 Baseline 아래로 내려가는 부분</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Cap height</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">대문자의 높이 (보통 Ascender보다 낮음)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">행간</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">인접한 행의 Baseline 사이 거리 (Ascent + Descent + Line gap)</td></tr></tbody></table></div>
<p class="my-2 text-pretty" data-v-9880527e>이제 이러한 개념들을 바탕으로 폰트에서 조절할 수 있는 다양한 속성들에 대해
살펴보겠습니다.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="4-폰트로-할-수-있는-것"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#4-폰트로-할-수-있는-것">4. 폰트로 할 수 있는 것</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>먼저 우리가 가장 일반적으로 조절하는 속성인 크기, 굵기, 기울임부터
알아보겠습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="41-크기size"><a class="hover:text-teal-800" href="#41-크기size">4.1. 크기(Size)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>폰트의 크기를 16px로 지정한다는 것은 어떤 값을 16px로 설정한다는 뜻일까요?</p>
<p class="my-2 text-pretty" data-v-9880527e>폰트의 크기는 Em Square의 크기를 의미합니다.
즉, 폰트 크기를 지정한다는 것은 Em Square의 크기를 지정하는 것과 같습니다.
따라서 폰트 크기를 16px로 지정하면, Em Square의 크기가 16px로 설정됩니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>Em Square 자체에는 단위가 없으므로, 폰트 크기를 지정할 때는 반드시 단위를 함께
명시해야 합니다.
디지털 환경에서는 주로 px 단위를 사용하지만, 인쇄물에서는 pt 단위를 일반적으로
사용합니다.
각 단위에 대한 설명은 대략적인 다음과 같습니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">단위</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">이름</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">설명</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">px</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">Pixel</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">화면 기준 단위</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">pt</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:left;">Point</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">1/72 inch, 주로 인쇄물에서 사용</td></tr></tbody></table></div>
<p class="my-2 text-pretty" data-v-9880527e>또, 서로 다른 두 폰트를 모두 동일한 크기로 지정한다고 하더라도 글리프의
시각적 크기가 동일하다고 보장할 수는 없습니다.
Em Square는 폰트 디자이너가 임의로 정하는 값이고, x-height, Ascender,
Descender 등의 비율도 폰트마다 다르기 때문입니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans, 100px</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 pt-6 mb-4"><div style="font-palette:--fontname-680605479-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Tangerine, 100px</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서는 Wanted Sans와 Tangerine 폰트를 각각 동일한 100px 크기로
지정했습니다.
그러므로 Em Square의 크기가 100px로 동일하지만, 글리프의 시각적 크기는 매우
다르게 나타나는 것을 볼 수 있습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="42-굵기weight"><a class="hover:text-teal-800" href="#42-굵기weight">4.2. 굵기(Weight)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>폰트의 굵기는 숫자로 표현되며, 일반적으로 100부터 900까지 100단위로
조절됩니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>우리가 기본적으로 사용하는 굵기 값은 400으로, 보통(Regular) 굵기에 해당합니다.
만약 우리가 굵은(Bold) 굵기를 사용한다고 하면, 보통 700 값을 사용하게 됩니다.
하지만 만약 폰트가 제공하는 굵기 값이 더 다양하다면, 100부터 900까지
원하는 굵기를 자유롭게 선택할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>반대로, 만약 폰트가 특정 굵기 값만 제공한다면, 우리가 지정한 굵기 값이
존재하지 않을 경우 가장 가까운 굵기 값으로 대체됩니다.
만약 폰트에 굵은 굵기를 제공하지 않는다면, 웹 브라우저나 운영체제 등에서는
임의로 만들어낸 가짜 굵은(Faux Bold) 굵기를 사용하게 된다는 점을 유의해야
합니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Roboto Flex - 굵기 100 ~ 900</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="43-이탤릭italic-오블리크oblique"><a class="hover:text-teal-800" href="#43-이탤릭italic-오블리크oblique">4.3. 이탤릭(Italic), 오블리크(Oblique)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>글리프를 오른쪽으로 기울여 표현하기 위해 우리는 보통 이탤릭으로 표현한다고
말합니다.
그러나 사실 글리프를 단순히 기울이는 방식은 오블리크라고 부르며, 이탤릭과는
구분되는 개념입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이탤릭은 글리프의 형태 자체를 변경하는 별도의 스타일입니다.
15세기 이탈리아에서 유래한 이탤릭체는 필기체의 영향을 받아 글리프의 형태가
독특하게 디자인되었습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>그러나 일반적으로 폰트를 사용할 때는 두 가지 스타일을 구분하지 않고 모두
이탤릭이라고 부르는 경우가 많습니다.
실제로 웹 브라우저나 운영체제에서도 오블리크와 이탤릭을 구분하지 않고 모두
이탤릭 스타일로 처리하는 경우가 많습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>만약 폰트에 오블리크와 이탤릭 스타일 둘 다 존재하지 않는다면, 웹 브라우저나
운영체제에서는 임의로 만들어낸 가짜 이탤릭(Faux Italic) 스타일을 사용하게
됩니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1499307144-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Geologica, 일반</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1499307144-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Geologica, 오블리크</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1499307144-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Geologica, 이탤릭</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서 Geologica에서 제공하는 일반, 오블리크, 이탤릭<sup><a href="#user-content-fn-2" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" id="user-content-fnref-2" data-footnote-ref="true" aria-describedby="footnote-label">2</a></sup> 스타일의 차이점을
확인할 수 있습니다.
특히 소문자 &#39;a&#39;와 &#39;g&#39;에서 스타일별로 글리프 형태가 어떻게 달라지는지
비교해 보세요.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="5-opentype의-타이포그래피-기능"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#5-opentype의-타이포그래피-기능">5. OpenType의 타이포그래피 기능</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>OpenType은 1990년대에 Adobe와 Microsoft가 공동 개발한 폰트 기술입니다.
우리가 흔히 사용하는 크기, 굵기, 기울임 외에도 다양한 타이포그래피 기능을
지원합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>OpenType에서 지원하는 타이포그래피 기능들은 폰트 디자이너가 폰트 파일에
직접 정의하며, 폰트마다 다르게 지원하는 기능들이 다릅니다.
따라서 앞으로 설명하는 OpenType 기능들이 모든 폰트에서 동일하게
지원되지 않는다는 점에 주의하세요.</p>
<p class="my-2 text-pretty" data-v-9880527e>그런데도, OpenType으로 지원되는 기능을 사용하면, 더욱 풍부하고 미려한
타이포그래피를 구현할 수 있습니다.
여기서는 먼저 대표적으로 사용되는 OpenType 기능들을 소개하고, 예시를 통해
살펴보겠습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="51-합자ligature"><a class="hover:text-teal-800" href="#51-합자ligature">5.1. 합자(Ligature)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>합자는 연속된 문자를 하나의 새로운 글리프로 표현하는 기능입니다.
&#39;ff&#39;, &#39;fi&#39;, &#39;fl&#39;, &#39;ffi&#39;, &#39;ffl&#39; 같은 조합에서 자주 사용됩니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>OpenType에서 합자는 네 가지로 구분되지만, 여기서는 자주 사용되는 두 가지 유형을
소개하겠습니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Standard Ligature</strong>: 기본적으로 활성화되는 일반적인 합자 (&#39;liga&#39;)</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Discretionary Ligature</strong>: 선택적으로 사용하는 장식적인 합자 (&#39;dlig&#39;)</li>
</ul>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--80724564-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-liga" class="text-sm">Standard Ligature: </label><label for="what-is-font-mdx-toggle-switch-liga" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-liga" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div class="text-center mt-2">D2 Coding</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-dilg" class="text-sm">Discretionary Ligature: </label><label for="what-is-font-mdx-toggle-switch-dilg" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-dilg" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div class="text-center mt-2">Wanted Sans</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요. <br>참고: 위 예시에서 하이라이트 되지 않은 다른 문자 조합에서도 합자가 적용될 수 있습니다.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>D2 Coding은 프로그래밍 연산자(&#39;&gt;=&#39;, &#39;!=&#39; 등)를 합자로 처리하여 코드 가독성을
높입니다.
폰트의 목적상 기본적으로 합자가 적용되어야 하므로, Standard Ligature로 적용된
것을 확인할 수 있습니다.
Wanted Sans는 Discretionary Ligature로 &#39;ff&#39;, &#39;fi&#39;, &#39;fl&#39; 조합을 더 미려하게
표현할 수 있도록 합자를 제공합니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="52-커닝kerning"><a class="hover:text-teal-800" href="#52-커닝kerning">5.2. 커닝(Kerning)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>커닝은 특정 글리프 쌍 사이의 공백을 조절하여 시각적으로 균형 있게 표현하는
기능입니다.
&#39;AV&#39;, &#39;Te&#39;, &#39;W.&#39; 등의 문자 조합에서 자주 사용되며, 기본적으로 활성화되어
있습니다.
커닝은 폰트 디자이너가 글리프 쌍마다 개별적으로 설정하는 값이기 때문에,
폰트마다 커닝이 적용되는 글리프 쌍이 다를 수 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-kern" class="text-sm">커닝: </label><label for="what-is-font-mdx-toggle-switch-kern" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-kern" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div class="text-center mt-2">Wanted Sans</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요. <br>참고: 위 예시에서 하이라이트 되지 않은 다른 문자 조합에서도 커닝이 적용될 수 있습니다.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>커닝을 토글 하면서 위 예시를 확인해 보세요.
커닝이 적용되지 않았을 때는 &#39;AV&#39;, &#39;Te&#39; 등의 글리프 쌍 사이 간격이 지나치게
넓어져서 어색하게 보이는 것을 알 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>주제에서는 약간 벗어나지만, 커닝을 주제로 하는 웹 게임도 있습니다.
커닝이 적용되지 않은 글리프 사이 간격을 직접 조절하고, 실제 정확한 커닝 값과
얼마나 가까운지 점수를 매기는 게임입니다.
<a href="https://type.method.ac/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Kern Type</a>에서 플레이할 수 있으니, 관심 있다면 한번
플레이해 보세요!</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="53-opentype-기능opentype-features"><a class="hover:text-teal-800" href="#53-opentype-기능opentype-features">5.3. OpenType 기능(OpenType Features)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>합자와 커닝을 포함하여, OpenType은 다양한 고급 타이포그래피 기능을 제공합니다.
위에서도 언급했던 것처럼, 폰트별로 실제로 사용할 수 있는 기능들은 폰트
디자이너가 정의하기 때문에, 폰트마다 지원하는 기능들이 다릅니다.
따라서 각 폰트의 문서나 설명을 참고하여 어떤 OpenType 기능들을 지원하는지
확인하는 것이 좋습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>OpenType 기능들은 4자리로 된 태그(tag)로 구분됩니다.
예를 들어, 합자 기능은 &#39;liga&#39;, 커닝 기능은 &#39;kern&#39; 태그로 표현됩니다.
또, 미리 정의된 태그 외에도 폰트 디자이너가 원하는 경우 임의로 태그를 정의하여
추가 기능을 구현할 수도 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>만약 소유한 폰트가 어떤 OpenType 기능들을 지원하는지 확인하고 싶다면,
<a href="https://fontdrop.info/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">FontDrop!</a> 웹사이트를 이용해 보세요.
폰트 파일을 올리면, 해당 폰트에서 지원하는 OpenType 기능들을 확인할 수
있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>여기서는 예시를 통해 몇 가지 OpenType 기능들을 살펴보겠습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-tnum" class="text-sm">고정폭 숫자(Tabular Figures): </label><label for="what-is-font-mdx-toggle-switch-tnum" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-tnum" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto mt-2"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-case" class="text-sm">대문자에 맞춤(Case-sensitive Forms): </label><label for="what-is-font-mdx-toggle-switch-case" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-case" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto mt-2"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-frac" class="text-sm">분수(Fractions): </label><label for="what-is-font-mdx-toggle-switch-frac" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-frac" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto mt-2"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-ss03" class="text-sm">스타일 세트 3(Stylistic Set 3): </label><label for="what-is-font-mdx-toggle-switch-ss03" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-ss03" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div class="text-center mt-2">Wanted Sans</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서는 Wanted Sans에서 다음 네 가지 OpenType 기능들을 사용해 볼 수
있습니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">고정폭 숫자(Tabular Figures, &#39;tnum&#39;)</strong>: 모든 숫자를 동일한 폭으로
표현하여 표나 재무 문서에서 정렬이 쉽게 합니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">대문자에 맞춤(Case-sensitive Forms, &#39;case&#39;)</strong>: 수학 기호나 특수 문자를
대문자 높이에 맞게 조정하여 시각적 일관성을 높입니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">분수(Fractions, &#39;frac&#39;)</strong>: 슬래시(&#39;/&#39;)를 기준으로 분자와 분모를 작게 조정하여
분수를 표현합니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">스타일 세트 3(Stylistic Set 3, &#39;ss03&#39;)</strong>: 폰트 디자이너가 정의한
대체 글리프 세트를 적용합니다.
예시에서는 숫자 &#39;2&#39;, &#39;3&#39;과 소문자 &#39;a&#39;, &#39;e&#39;, &#39;f&#39;, &#39;g&#39;, &#39;r&#39; 글리프가
변경됩니다.</li>
</ul>
<p class="my-2 text-pretty" data-v-9880527e>이외에도 정말로 다양한 OpenType 기능들이 존재합니다.
더 많은 기능을 살펴보고 싶다면,
<a href="https://learn.microsoft.com/en-us/typography/opentype/spec/featurelist?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Registered features (OpenType 1.9.1) - Typography | Microsoft Learn</a>
문서를 참고하세요.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="6-가변-폰트variable-fonts"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#6-가변-폰트variable-fonts">6. 가변 폰트(Variable Fonts)</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>가변 폰트는 OpenType Font Variations이라고도 불리며, 2016년에 도입되어 비교적
새로운 폰트 기술입니다.
하나의 폰트 파일에 굵기, 너비, 기울기 등의 다양한 속성들을 포함할 수 있도록
설계되었으며, 폰트를 사용할 때 원하는 속성값을 지정하여 사용할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>기존에는 각각의 속성값마다 별도의 폰트 파일이 필요했지만, 가변 폰트는 하나의
파일에서 다양한 속성값을 지원할 수 있기 때문에, 폰트 파일의 크기를 줄이고
관리하기 쉽게 만드는 장점이 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>가변 폰트에서는 조절할 수 있는 속성을 축(Axis)이라고 부릅니다.
각 축은 OpenType 기능과 유사하게 4자리 태그로 구분됩니다.
이러한 축 중 미리 정의된 축은 다음의 5가지가 있습니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">이름</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">설명</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">축 태그</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">범위</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">기본값</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">Weight</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">굵기</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">wght</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">1~1000</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">400 (필수)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">Width</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">너비</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">wdth</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">1~</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">100 (필수)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">Slant</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">기울기</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">slnt</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">-90~90</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">0 (필수)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">Italic</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">이탤릭</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">ital</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">0~1</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">0 (필수)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">Optical Size</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">시각적 크기</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">opsz</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">0~</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">10~16 (권장)</td></tr></tbody></table></div>
<p class="my-2 text-pretty" data-v-9880527e>위 다섯 가지 축은 가변 폰트에서 자주 사용되지만, 모든 가변 폰트가 반드시 이
축들을 모두 지원하는 것은 아닙니다.
예를 들어, 어떤 가변 폰트는 굵기 축만 지원할 수도 있고, 또 다른 폰트는 굵기
축과 너비 축만 지원할 수도 있습니다.
또, 범위와 기본값도 폰트마다 다를 수 있습니다.
따라서 사용하기 전에 해당 폰트의 문서를 참고하는 것이 좋습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>OpenType 기능들과 마찬가지로, 소유한 폰트가 어떤 축들을 지원하는지 확인하고
싶다면, <a href="https://fontdrop.info/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">FontDrop!</a> 웹사이트를 이용해 보세요.
폰트 파일을 올리면, 해당 폰트에서 지원하는 축들을 확인할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>폰트 디자이너는 이 외에도 필요에 따라 추가적인 축을 정의할 수 있습니다.
예를 들어 Cursive (&#39;CRSV&#39;), Grade (&#39;GRAD&#39;) 등 폰트마다 고유한 축이 존재할 수
있습니다.
여기서는 위에서 소개한 다섯 가지 축을 중심으로, 가변 폰트에서 조절할 수 있는
속성들을 살펴보겠습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="61-굵기-축weight-axis-너비-축width-axis"><a class="hover:text-teal-800" href="#61-굵기-축weight-axis-너비-축width-axis">6.1. 굵기 축(Weight Axis), 너비 축(Width Axis)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>굵기 축은 글리프의 굵기를, 너비 축은 글리프의 수평 너비(장평)를 조절하기 위한
축입니다.
아래 예시에서 굵기 축과 너비 축을 각각 조절해 보세요.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">굵기 축</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">400</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="400" max="1000" step="1" value="400"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Wanted Sans</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">너비 축</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">100</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="25" max="151" step="1" value="100"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Roboto Flex</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="62-기울기-축slant-axis-이탤릭-축italic-axis"><a class="hover:text-teal-800" href="#62-기울기-축slant-axis-이탤릭-축italic-axis">6.2. 기울기 축(Slant Axis), 이탤릭 축(Italic Axis)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>기울기 축은 글리프의 기울기(오블리크)를 조절하고, 이탤릭 축은 글리프의 이탤릭
형태를 조절합니다.
아래 예시에서 기울기 축과 이탤릭 축을 각각 조절해 보세요.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1499307144-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">기울기 축</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">0.0</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="-12" max="0" step="0.1" value="0"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Geologica</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--431961695-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">이탤릭 축</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">0.00</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="0" max="2" step="0.01" value="0"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Jost*</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>Jost*에서는 이탤릭 축 값이 0.50을 초과하면 소문자 &#39;a&#39;의 형태가 급격히
변경됩니다.
가변 폰트의 축 값이 연속적이더라도, 특정 임곗값에서 글리프 형태가 변경되도록
디자인할 수 있음을 알 수 있습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="63-시각적-크기-축optical-size-axis"><a class="hover:text-teal-800" href="#63-시각적-크기-축optical-size-axis">6.3. 시각적 크기 축(Optical Size Axis)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>시각적 크기 축은 폰트 크기에 따라 글리프 디자인을 최적화하기 위한 축입니다.
글리프가 작은 크기에서는 더 두껍고 명확하게, 큰 크기에서는 더 섬세하게 보이도록
조절합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>대부분의 환경에서는 별도로 시각적 크기 축을 조절하지 않아도 폰트 크기에 따라
자동으로 시각적 크기가 조절됩니다.
그러나 폰트를 사용할 때 시각적 크기 축을 수동으로 조절할 수도 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">시각적 크기 축</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">14.0</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="8" max="144" step="0.1" value="14"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Roboto Flex</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div class="w-full h-40 relative flex items-center justify-center"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">크기</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">14px</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="8" max="100" step="1" value="14"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="flex items-center gap-x-3 w-fit mx-auto mt-2"><label for="what-is-font-mdx-toggle-switch-opsz" class="text-sm">시각적 크기 적용: </label><label for="what-is-font-mdx-toggle-switch-opsz" class="relative inline-block h-6 w-11 cursor-pointer"><input type="checkbox" id="what-is-font-mdx-toggle-switch-opsz" checked class="peer sr-only"><span class="absolute inset-0 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out peer-checked:bg-teal-600 peer-disabled:pointer-events-none peer-disabled:opacity-50 dark:bg-neutral-700 dark:peer-checked:bg-teal-500"></span><span class="shadow-xs absolute start-0.5 top-1/2 size-5 -translate-y-1/2 rounded-full bg-white transition-transform duration-200 ease-in-out peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white"></span></label></div><div class="text-center mt-2">Roboto Flex</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>두 번째 예시에서 폰트 크기가 변경될 때 자동으로 적용되는 시각적 크기 조절을
켜고 끌 수 있습니다.
시각적 크기 조절이 활성화되어 있을 때, 작은 크기와 큰 크기에서 글리프의 굵기가
비슷하게 유지되는 것을 알 수 있습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="64-커스텀-축custom-axis"><a class="hover:text-teal-800" href="#64-커스텀-축custom-axis">6.4. 커스텀 축(Custom Axis)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>위에서 설명한 축 외에도, 폰트 디자이너는 커스텀 축을 자유롭게 정의할 수
있습니다.
예를 들어, Roboto Flex는 다음과 같은 커스텀 축이 정의되어 있습니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;YTAS&#39;</strong>: Ascender 높이 조절</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;YTDE&#39;</strong>: Descender 깊이 조절</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;YTLC&#39;</strong>: 소문자 높이 조절</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;YTUC&#39;</strong>: 대문자 높이 조절</li>
</ul>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1563259286-undefined-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">Ascender 높이</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">750</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="649" max="854" step="1" value="750"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">Descender 깊이</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">-203</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="-305" max="-98" step="1" value="-203"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">소문자 높이</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">514</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="416" max="570" step="1" value="514"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">대문자 높이</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">712</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="528" max="760" step="1" value="712"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Roboto Flex</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>이러한 커스텀 축은 다양하게 활용될 수 있으며, 폰트 디자이너가 창의적으로 정의할
수 있습니다.
더 다양한 가변 폰트의 예시를 살펴보고 싶다면,
<a href="https://v-fonts.com/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Variable Fonts</a>를 참고하세요.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="7-특이한-폰트"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#7-특이한-폰트">7. 특이한 폰트</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>일반적으로 폰트는 텍스트를 표현하기 위해 사용되지만, 특이한 목적을 위해
설계된 폰트들도 존재합니다.
여기서는 그런 특이한 폰트 중 몇 가지를 소개하겠습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="71-색상-폰트color-fonts"><a class="hover:text-teal-800" href="#71-색상-폰트color-fonts">7.1. 색상 폰트(Color Fonts)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>색상 폰트는 글리프에 여러 색상을 적용할 수 있는 폰트입니다.
일반적인 폰트는 모든 글리프를 단색으로 표현하지만, 색상 폰트는 둘 이상의 색상을
사용하여 더 다양한 시각적 효과를 제공합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>가장 널리 알려진 색상 폰트의 예시는 이모지(Emoji)를 지원하는 폰트입니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1556181116-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2"><p class="my-2 text-pretty" data-v-9880527e>Noto Color Emoji</p></div></div><div class="text-center text-gray-500 dark:text-gray-500"><p class="my-2 text-pretty" data-v-9880527e>텍스트를 직접 수정하며 확인해 보세요.</p></div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서는 Noto Color Emoji를 사용하여 이모지를 표시하고 있습니다.
Noto Color Emoji는 이모지에 해당하는 글리프만 포함하는 폰트이므로, 일반
텍스트를 입력하면 표시되지 않습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이모지 외에도 팔레트(Palette)를 사용하여 다양한 색상을 표현하는 색상 폰트도
존재합니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-1025376894-0-palette;" class="w-full max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="flex gap-1 p-1"><div class="shrink-0 py-1 text-center">팔레트</div><div class="min-w-16 shrink-0 py-1 text-center font-mono">0</div><input class="w-full accent-teal-600 dark:accent-teal-500" type="range" min="0" max="10" step="1" value="0"><button class="w-16 shrink-0 font-medium text-teal-600 hover:bg-teal-700 hover:text-white dark:text-teal-400 dark:hover:bg-teal-600 dark:hover:text-white">Play</button></div><div class="text-center mt-2">Rocher Color</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>Rocher Color는 11가지 팔레트를 제공하며, 팔레트 축을 조절하여 다양한 색상
조합을 확인할 수 있습니다.
만약 가지고 있는 색상 폰트가 어떤 팔레트를 지원하는지 확인하고 싶으시다면
<a href="https://wakamaifondue.com/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Wakamai Fondue</a>에서 폰트 파일을 올려 확인해
보세요.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="72-딩뱃dingbat"><a class="hover:text-teal-800" href="#72-딩뱃dingbat">7.2. 딩뱃(Dingbat)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>아직 이모지가 널리 사용되기 전, 폰트를 텍스트 대신 그림으로 활용하는 방법이
있었습니다.
딩뱃(Dingbat) 폰트는 특정 문자를 다양한 그림으로 표현하는 폰트입니다.
예를 들어, 소문자 &#39;a&#39;를 입력하면 우리가 알고 있는 소문자 &#39;a&#39;가 아닌, 다른
그림을 글리프로 표시합니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-574362668-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Wanted Sans</div></div><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname--1340268353-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Auseklis</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>동일한 텍스트가 Wanted Sans에서는 일반적인 문자의 글리프로 표시되지만,
Auseklis에서는 완전히 다른 형태의 그림 글리프로 표시되는 것을 알 수 있습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="73-아이콘-폰트icon-fonts"><a class="hover:text-teal-800" href="#73-아이콘-폰트icon-fonts">7.3. 아이콘 폰트(Icon Fonts)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>딩뱃과 유사하게, 특정 문자 코드에 아이콘을 매핑하여 아이콘을 표시하는 폰트도
있습니다.
이를 아이콘 폰트라고 부르며, 과거 웹에서 널리 사용되었습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>SVG가 웹 브라우저에서 널리 지원되기 전에는 아이콘을 다양한 크기와 색상으로
표현하기 어려웠습니다.
그래서 <a href="https://fontawesome.com/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Font Awesome</a>으로 대표되는 아이콘 폰트가
대중적으로 사용되었습니다.
그러나 최근에는 모든 주요 웹 브라우저가 SVG를 지원하고, SVG가 더 다양한 효과를
적용할 수 있어 아이콘 폰트의 사용이 줄어들고 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-1786832060-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2"><p class="my-2 text-pretty" data-v-9880527e>Material Icons Round</p></div></div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서는
<a href="https://fonts.google.com/icons?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Material Symbols &amp; Icons - Google Fonts</a>에서
구글이 제공하는 아이콘 폰트를 확인할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>아이콘 폰트는 일반적인 키보드로 바로 입력하기 어려운 문자 코드에 대응하는
글리프로 아이콘을 표시하는 경우가 많습니다.
따라서 아이콘 폰트를 사용할 때는 아이콘의 문자 코드를 직접 입력하기보다는 해당
폰트를 제공하는 사이트의 아이콘 목록에서 복사하거나 전용 도구를 사용하는 것이
좋습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>그렇다고 키보드로 입력하는 것이 완전히 불가능한 것은 아닙니다.
Material Icons Round의 &#39;Home&#39; 아이콘에 해당하는 문자는 &#39;U+E88A&#39;<sup><a href="#user-content-fn-3" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" id="user-content-fnref-3" data-footnote-ref="true" aria-describedby="footnote-label">3</a></sup> 입니다.
직접 입력을 시도해 보고 싶다면
<a href="https://en.wikipedia.org/wiki/Unicode_input?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Unicode input</a> 문서를 참고하여
입력해 보세요.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="74-특수-폰트"><a class="hover:text-teal-800" href="#74-특수-폰트">7.4. 특수 폰트</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>단순한 그림이나 아이콘을 표현하는 것이 아니라, 다른 목적으로 글리프를 특수하게
표현하는 폰트들도 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-1984781063-undefined-palette;" class="w-fit max-w-full mx-auto mt-4"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2"><p class="my-2 text-pretty" data-v-9880527e>Libre Barcode 39 Text</p></div></div></div>
<p class="my-2 text-pretty" data-v-9880527e>Libre Barcode 39 Text는 바코드 문자를 글리프로 표현하여, 바코드 스캐너로 읽을
수 있는 바코드를 생성할 수 있습니다.
위 예시에 입력된 텍스트는 &#39;*9791158392048*&#39;로, 바코드 39 규격에
맞게 시작과 끝에 &#39;*&#39; 문자가 포함되어 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>Libre Barcode 39 Text를 사용하면 특별한 바코드 생성 도구 없이도, 간단히 텍스트
입력으로 바코드를 생성할 수 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-836131053-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2"><p class="my-2 text-pretty" data-v-9880527e>Hymnus FG</p></div></div></div>
<p class="my-2 text-pretty" data-v-9880527e>Hymnus FG는 악보를 표현하기 위해 만들어진 폰트입니다.
특정 문자 조합으로 악보에 사용하는 음표와 쉼표 등을 글리프로 표현할 수
있습니다.
위 예시에 입력된 텍스트는 &#39;!—-c--d--e--f-\-G-----G----\&#39;로, 간단한 멜로디를
표현하고 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이 외에도 <a href="https://www.coderelay.io/fontemon.html?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Fontemon</a>처럼 OpenType
기능(합자 등)을 활용하여 폰트 파일 안에 포켓몬 게임을 구현한 사례도 있으니,
더 흥미로운 특수 폰트를 찾아보세요!</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="8-렌더링rendering"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#8-렌더링rendering">8. 렌더링(Rendering)</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>지금까지는 폰트 자체에서 제공하는 기능들에 대해 살펴보았습니다.
하지만 동일한 폰트를 사용하는데도 불구하고, 폰트가 사용되는 환경에 따라 다르게
보이는 경우가 있습니다.
예를 들어, 동일한 폰트를 사용하는 웹 사이트에 접속할 때, macOS와 Windows에서
글리프가 다르게 보일 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이러한 현상이 발생하는 이유는 운영체제, 브라우저, 디스플레이에 따라 폰트의
글리프를 화면에 그리는 방식, 즉 렌더링이 달라지기 때문입니다.
렌더링은 폰트 파일의 글리프 정보를 화면에 실제로 표시하는 과정입니다.
이 과정에서 텍스트의 크기, 스타일, 위치 등을 계산하여 디스플레이에 픽셀 단위로
표시합니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="81-래스터화rasterization"><a class="hover:text-teal-800" href="#81-래스터화rasterization">8.1. 래스터화(Rasterization)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>폰트는 글리프의 모양을 벡터로 정의합니다.
벡터는 점과 선의 수학적 좌표로 구성되어 있어, 확대하거나 축소해도 품질이
유지되어 폰트 디자이너가 의도한 글리프의 모양을 정확히 표현할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>하지만 우리가 사용하는 디스플레이는 이미지를 픽셀 단위로 표시합니다.
아무리 폰트가 글리프의 모양을 정확하게 정의하더라도, 디스플레이에 표시하려면
픽셀 단위로 변환하는 과정이 필요합니다.
이 과정을 래스터화라고 부릅니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>래스터화 과정에서 어떤 픽셀이 어떤 색으로 채워질지 결정하면서 글리프의 모양을
디스플레이에 맞게 조정합니다.
이 과정에서 운영체제와 소프트웨어마다 래스터화 방식이 달라, 동일한 폰트를
사용하더라도 래스터화된 글리프의 모양이 다르게 보일 수 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div class="flex flex-col items-center gap-2 mb-2 max-w-full mx-auto" data-v-c91d4a34><div class="w-full max-w-full" data-v-c91d4a34><svg xmlns="http://www.w3.org/2000/svg" class="h-full max-h-60 w-full" viewBox="0 0 2 2" data-v-c91d4a34></svg></div></div><div style="font-palette:--fontname--913515245-undefined-palette;" class="w-fit max-w-full mx-auto bg-white px-2"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Pretendard Variable</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서 래스터화된 글리프의 모양을 확인할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>위쪽 영역에는 16px 크기로 래스터화된 글리프 크게 확대하여 볼 수 있습니다.
아래쪽에서는 동일한 글리프를 100px 크기로 표시하고, 실제로 문자를 입력하며
테스트해 볼 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>래스터화된 글리프가 원본 글리프와 어떻게 다른지 확인해 보세요.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="82-안티앨리어싱anti-aliasing"><a class="hover:text-teal-800" href="#82-안티앨리어싱anti-aliasing">8.2. 안티앨리어싱(Anti-aliasing)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>래스터화에서 단순히 어떤 픽셀을 채우고 비울지만 결정하면, 글리프의 경계가
거칠게 보이는 계단 현상(Aliasing)이 발생합니다.
이러한 계단 현상은 특히 곡선이나 대각선에서 두드러지게 나타나고, 글리프의
가독성을 저하합니다.
이러한 계단 현상을 완화하기 위한 기술이 안티앨리어싱입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>안티앨리어싱은 여러 가지 방법이 있지만, 가장 일반적인 방법은 회색조
안티앨리어싱(Grayscale Anti-aliasing)입니다.
회색조 안티앨리어싱은 글리프의 경계에 중간 밝기의 픽셀을 추가하여
계단 현상을 부드럽게 만듭니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div class="flex flex-col items-center gap-2 mb-2 max-w-full mx-auto" data-v-c91d4a34><div class="w-full max-w-full" data-v-c91d4a34><svg xmlns="http://www.w3.org/2000/svg" class="h-full max-h-60 w-full" viewBox="0 0 2 2" data-v-c91d4a34></svg></div></div><div style="font-palette:--fontname--913515245-undefined-palette;" class="w-fit max-w-full mx-auto bg-white px-2"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Pretendard Variable</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서는 회색조 안티앨리어싱이 적용된 래스터화된 글리프를 확인할 수
있습니다.
안티앨리어싱이 적용되기 전과 비교해 보면 글리프의 경계가 훨씬 부드럽게
표현된다는 것을 알 수 있습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="83-서브픽셀-렌더링subpixel-rendering"><a class="hover:text-teal-800" href="#83-서브픽셀-렌더링subpixel-rendering">8.3. 서브픽셀 렌더링(Subpixel Rendering)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>서브픽셀 렌더링은 하나의 픽셀을 구성하는 빨강, 초록, 파랑 서브픽셀을
개별적으로 제어하여 더 세밀하게 표현하는 안티앨리어싱 기법입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>전통적인 LCD 디스플레이의 각 픽셀은 물리적으로 RGB 세 개의 서브픽셀로 구성되어
있습니다.
서브픽셀 렌더링은 이를 독립적으로 제어하여 수평 해상도를 이론적으로 3배
증가시킵니다.
예를 들어, 글리프의 왼쪽 경계가 픽셀 중간에 위치하면, 빨강 서브픽셀만 켜서 더
정밀한 위치를 표현할 수 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div class="flex flex-col items-center gap-2 mb-2 max-w-full mx-auto" data-v-c91d4a34><div class="w-full max-w-full" data-v-c91d4a34><svg xmlns="http://www.w3.org/2000/svg" class="h-full max-h-60 w-full" viewBox="0 0 902 512" data-v-c91d4a34><rect x="1" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="121" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="241" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="361" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="391" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="571" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="601" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="751" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="781" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="811" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="1" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="121" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="241" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 235, 189);" data-v-c91d4a34></rect><rect x="361" y="31" width="30" height="30" class="cell" style="fill:rgb(140, 117, 165);" data-v-c91d4a34></rect><rect x="391" y="31" width="30" height="30" class="cell" style="fill:rgb(214, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="571" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="601" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 214);" data-v-c91d4a34></rect><rect x="751" y="31" width="30" height="30" class="cell" style="fill:rgb(165, 117, 115);" data-v-c91d4a34></rect><rect x="781" y="31" width="30" height="30" class="cell" style="fill:rgb(165, 211, 255);" data-v-c91d4a34></rect><rect x="811" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="31" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 247);" data-v-c91d4a34></rect><rect x="121" y="61" width="30" height="30" class="cell" style="fill:rgb(222, 199, 156);" data-v-c91d4a34></rect><rect x="151" y="61" width="30" height="30" class="cell" style="fill:rgb(140, 117, 123);" data-v-c91d4a34></rect><rect x="181" y="61" width="30" height="30" class="cell" style="fill:rgb(148, 178, 214);" data-v-c91d4a34></rect><rect x="211" y="61" width="30" height="30" class="cell" style="fill:rgb(239, 251, 255);" data-v-c91d4a34></rect><rect x="241" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="61" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="61" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="571" y="61" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="601" y="61" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="61" width="30" height="30" class="cell" style="fill:rgb(107, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="61" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="811" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="61" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 239);" data-v-c91d4a34></rect><rect x="91" y="91" width="30" height="30" class="cell" style="fill:rgb(189, 109, 41);" data-v-c91d4a34></rect><rect x="121" y="91" width="30" height="30" class="cell" style="fill:rgb(16, 48, 82);" data-v-c91d4a34></rect><rect x="151" y="91" width="30" height="30" class="cell" style="fill:rgb(107, 117, 115);" data-v-c91d4a34></rect><rect x="181" y="91" width="30" height="30" class="cell" style="fill:rgb(99, 65, 24);" data-v-c91d4a34></rect><rect x="211" y="91" width="30" height="30" class="cell" style="fill:rgb(16, 48, 115);" data-v-c91d4a34></rect><rect x="241" y="91" width="30" height="30" class="cell" style="fill:rgb(189, 239, 255);" data-v-c91d4a34></rect><rect x="271" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="91" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="91" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="571" y="91" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="601" y="91" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="91" width="30" height="30" class="cell" style="fill:rgb(107, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="91" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="811" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="91" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="121" width="30" height="30" class="cell" style="fill:rgb(247, 174, 99);" data-v-c91d4a34></rect><rect x="91" y="121" width="30" height="30" class="cell" style="fill:rgb(16, 44, 107);" data-v-c91d4a34></rect><rect x="121" y="121" width="30" height="30" class="cell" style="fill:rgb(189, 239, 255);" data-v-c91d4a34></rect><rect x="151" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 239);" data-v-c91d4a34></rect><rect x="211" y="121" width="30" height="30" class="cell" style="fill:rgb(173, 97, 16);" data-v-c91d4a34></rect><rect x="241" y="121" width="30" height="30" class="cell" style="fill:rgb(41, 125, 198);" data-v-c91d4a34></rect><rect x="271" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="121" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="121" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 199, 123);" data-v-c91d4a34></rect><rect x="571" y="121" width="30" height="30" class="cell" style="fill:rgb(33, 0, 66);" data-v-c91d4a34></rect><rect x="601" y="121" width="30" height="30" class="cell" style="fill:rgb(148, 219, 255);" data-v-c91d4a34></rect><rect x="631" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="121" width="30" height="30" class="cell" style="fill:rgb(107, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="121" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="811" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="121" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 247);" data-v-c91d4a34></rect><rect x="61" y="151" width="30" height="30" class="cell" style="fill:rgb(173, 97, 0);" data-v-c91d4a34></rect><rect x="91" y="151" width="30" height="30" class="cell" style="fill:rgb(66, 146, 222);" data-v-c91d4a34></rect><rect x="121" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 199, 123);" data-v-c91d4a34></rect><rect x="241" y="151" width="30" height="30" class="cell" style="fill:rgb(33, 36, 123);" data-v-c91d4a34></rect><rect x="271" y="151" width="30" height="30" class="cell" style="fill:rgb(198, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="151" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="151" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="151" width="30" height="30" class="cell" style="fill:rgb(198, 121, 33);" data-v-c91d4a34></rect><rect x="571" y="151" width="30" height="30" class="cell" style="fill:rgb(16, 20, 16);" data-v-c91d4a34></rect><rect x="601" y="151" width="30" height="30" class="cell" style="fill:rgb(57, 134, 206);" data-v-c91d4a34></rect><rect x="631" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="151" width="30" height="30" class="cell" style="fill:rgb(107, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="151" width="30" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="811" y="151" width="30" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="841" y="151" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="871" y="151" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 222);" data-v-c91d4a34></rect><rect x="61" y="181" width="30" height="30" class="cell" style="fill:rgb(148, 69, 0);" data-v-c91d4a34></rect><rect x="91" y="181" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="121" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 251, 181);" data-v-c91d4a34></rect><rect x="241" y="181" width="30" height="30" class="cell" style="fill:rgb(107, 0, 66);" data-v-c91d4a34></rect><rect x="271" y="181" width="30" height="30" class="cell" style="fill:rgb(148, 219, 255);" data-v-c91d4a34></rect><rect x="301" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="181" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="181" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="541" y="181" width="30" height="30" class="cell" style="fill:rgb(74, 24, 82);" data-v-c91d4a34></rect><rect x="571" y="181" width="30" height="30" class="cell" style="fill:rgb(165, 195, 148);" data-v-c91d4a34></rect><rect x="601" y="181" width="30" height="30" class="cell" style="fill:rgb(74, 24, 74);" data-v-c91d4a34></rect><rect x="631" y="181" width="30" height="30" class="cell" style="fill:rgb(132, 203, 239);" data-v-c91d4a34></rect><rect x="661" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="181" width="30" height="30" class="cell" style="fill:rgb(107, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="181" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="811" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="181" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 198);" data-v-c91d4a34></rect><rect x="61" y="211" width="30" height="30" class="cell" style="fill:rgb(123, 36, 0);" data-v-c91d4a34></rect><rect x="91" y="211" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="121" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="241" y="211" width="30" height="30" class="cell" style="fill:rgb(107, 0, 66);" data-v-c91d4a34></rect><rect x="271" y="211" width="30" height="30" class="cell" style="fill:rgb(148, 219, 255);" data-v-c91d4a34></rect><rect x="301" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="211" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="211" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="211" width="30" height="30" class="cell" style="fill:rgb(239, 199, 140);" data-v-c91d4a34></rect><rect x="511" y="211" width="30" height="30" class="cell" style="fill:rgb(74, 24, 16);" data-v-c91d4a34></rect><rect x="541" y="211" width="30" height="30" class="cell" style="fill:rgb(74, 146, 222);" data-v-c91d4a34></rect><rect x="571" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="601" y="211" width="30" height="30" class="cell" style="fill:rgb(239, 186, 107);" data-v-c91d4a34></rect><rect x="631" y="211" width="30" height="30" class="cell" style="fill:rgb(41, 20, 49);" data-v-c91d4a34></rect><rect x="661" y="211" width="30" height="30" class="cell" style="fill:rgb(90, 146, 198);" data-v-c91d4a34></rect><rect x="691" y="211" width="30" height="30" class="cell" style="fill:rgb(231, 247, 255);" data-v-c91d4a34></rect><rect x="721" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="211" width="30" height="30" class="cell" style="fill:rgb(107, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="211" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="811" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="211" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 222);" data-v-c91d4a34></rect><rect x="61" y="241" width="30" height="30" class="cell" style="fill:rgb(148, 69, 0);" data-v-c91d4a34></rect><rect x="91" y="241" width="30" height="30" class="cell" style="fill:rgb(107, 182, 255);" data-v-c91d4a34></rect><rect x="121" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 223, 148);" data-v-c91d4a34></rect><rect x="241" y="241" width="30" height="30" class="cell" style="fill:rgb(74, 0, 82);" data-v-c91d4a34></rect><rect x="271" y="241" width="30" height="30" class="cell" style="fill:rgb(165, 235, 255);" data-v-c91d4a34></rect><rect x="301" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="241" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="241" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="241" width="30" height="30" class="cell" style="fill:rgb(231, 162, 82);" data-v-c91d4a34></rect><rect x="481" y="241" width="30" height="30" class="cell" style="fill:rgb(16, 20, 49);" data-v-c91d4a34></rect><rect x="511" y="241" width="30" height="30" class="cell" style="fill:rgb(90, 162, 222);" data-v-c91d4a34></rect><rect x="541" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="571" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="601" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="241" width="30" height="30" class="cell" style="fill:rgb(247, 223, 181);" data-v-c91d4a34></rect><rect x="661" y="241" width="30" height="30" class="cell" style="fill:rgb(115, 73, 90);" data-v-c91d4a34></rect><rect x="691" y="241" width="30" height="30" class="cell" style="fill:rgb(156, 227, 255);" data-v-c91d4a34></rect><rect x="721" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="241" width="30" height="30" class="cell" style="fill:rgb(107, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="241" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="811" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="241" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="271" width="30" height="30" class="cell" style="fill:rgb(198, 125, 33);" data-v-c91d4a34></rect><rect x="91" y="271" width="30" height="30" class="cell" style="fill:rgb(33, 121, 198);" data-v-c91d4a34></rect><rect x="121" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="271" width="30" height="30" class="cell" style="fill:rgb(239, 166, 90);" data-v-c91d4a34></rect><rect x="241" y="271" width="30" height="30" class="cell" style="fill:rgb(0, 69, 148);" data-v-c91d4a34></rect><rect x="271" y="271" width="30" height="30" class="cell" style="fill:rgb(222, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="271" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="271" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 251, 247);" data-v-c91d4a34></rect><rect x="481" y="271" width="30" height="30" class="cell" style="fill:rgb(239, 243, 255);" data-v-c91d4a34></rect><rect x="511" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="571" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="601" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 189);" data-v-c91d4a34></rect><rect x="751" y="271" width="30" height="30" class="cell" style="fill:rgb(123, 52, 49);" data-v-c91d4a34></rect><rect x="781" y="271" width="30" height="30" class="cell" style="fill:rgb(123, 190, 255);" data-v-c91d4a34></rect><rect x="811" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="271" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="91" y="301" width="30" height="30" class="cell" style="fill:rgb(74, 20, 41);" data-v-c91d4a34></rect><rect x="121" y="301" width="30" height="30" class="cell" style="fill:rgb(107, 178, 231);" data-v-c91d4a34></rect><rect x="151" y="301" width="30" height="30" class="cell" style="fill:rgb(247, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="301" width="30" height="30" class="cell" style="fill:rgb(247, 223, 165);" data-v-c91d4a34></rect><rect x="211" y="301" width="30" height="30" class="cell" style="fill:rgb(99, 44, 16);" data-v-c91d4a34></rect><rect x="241" y="301" width="30" height="30" class="cell" style="fill:rgb(99, 170, 239);" data-v-c91d4a34></rect><rect x="271" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="301" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="301" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="301" width="30" height="30" class="cell" style="fill:rgb(247, 223, 198);" data-v-c91d4a34></rect><rect x="571" y="301" width="30" height="30" class="cell" style="fill:rgb(156, 138, 107);" data-v-c91d4a34></rect><rect x="601" y="301" width="30" height="30" class="cell" style="fill:rgb(82, 65, 49);" data-v-c91d4a34></rect><rect x="631" y="301" width="30" height="30" class="cell" style="fill:rgb(49, 52, 49);" data-v-c91d4a34></rect><rect x="661" y="301" width="30" height="30" class="cell" style="fill:rgb(49, 52, 49);" data-v-c91d4a34></rect><rect x="691" y="301" width="30" height="30" class="cell" style="fill:rgb(74, 97, 115);" data-v-c91d4a34></rect><rect x="721" y="301" width="30" height="30" class="cell" style="fill:rgb(140, 166, 206);" data-v-c91d4a34></rect><rect x="751" y="301" width="30" height="30" class="cell" style="fill:rgb(231, 247, 255);" data-v-c91d4a34></rect><rect x="781" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="811" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="301" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="331" width="30" height="30" class="cell" style="fill:rgb(239, 195, 132);" data-v-c91d4a34></rect><rect x="121" y="331" width="30" height="30" class="cell" style="fill:rgb(74, 32, 16);" data-v-c91d4a34></rect><rect x="151" y="331" width="30" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="181" y="331" width="30" height="30" class="cell" style="fill:rgb(0, 20, 49);" data-v-c91d4a34></rect><rect x="211" y="331" width="30" height="30" class="cell" style="fill:rgb(90, 158, 214);" data-v-c91d4a34></rect><rect x="241" y="331" width="30" height="30" class="cell" style="fill:rgb(247, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="331" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="331" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="331" width="30" height="30" class="cell" style="fill:rgb(239, 186, 107);" data-v-c91d4a34></rect><rect x="541" y="331" width="30" height="30" class="cell" style="fill:rgb(41, 20, 49);" data-v-c91d4a34></rect><rect x="571" y="331" width="30" height="30" class="cell" style="fill:rgb(90, 138, 181);" data-v-c91d4a34></rect><rect x="601" y="331" width="30" height="30" class="cell" style="fill:rgb(206, 223, 239);" data-v-c91d4a34></rect><rect x="631" y="331" width="30" height="30" class="cell" style="fill:rgb(239, 235, 239);" data-v-c91d4a34></rect><rect x="661" y="331" width="30" height="30" class="cell" style="fill:rgb(239, 235, 239);" data-v-c91d4a34></rect><rect x="691" y="331" width="30" height="30" class="cell" style="fill:rgb(214, 199, 173);" data-v-c91d4a34></rect><rect x="721" y="331" width="30" height="30" class="cell" style="fill:rgb(140, 93, 49);" data-v-c91d4a34></rect><rect x="751" y="331" width="30" height="30" class="cell" style="fill:rgb(24, 48, 115);" data-v-c91d4a34></rect><rect x="781" y="331" width="30" height="30" class="cell" style="fill:rgb(189, 243, 255);" data-v-c91d4a34></rect><rect x="811" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="331" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="121" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="361" width="30" height="30" class="cell" style="fill:rgb(247, 235, 239);" data-v-c91d4a34></rect><rect x="181" y="361" width="30" height="30" class="cell" style="fill:rgb(247, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="241" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="361" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="361" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 222);" data-v-c91d4a34></rect><rect x="511" y="361" width="30" height="30" class="cell" style="fill:rgb(148, 73, 0);" data-v-c91d4a34></rect><rect x="541" y="361" width="30" height="30" class="cell" style="fill:rgb(66, 146, 222);" data-v-c91d4a34></rect><rect x="571" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="601" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 222);" data-v-c91d4a34></rect><rect x="751" y="361" width="30" height="30" class="cell" style="fill:rgb(148, 65, 0);" data-v-c91d4a34></rect><rect x="781" y="361" width="30" height="30" class="cell" style="fill:rgb(107, 186, 255);" data-v-c91d4a34></rect><rect x="811" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="361" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="121" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="241" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="391" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="391" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="391" width="30" height="30" class="cell" style="fill:rgb(198, 125, 41);" data-v-c91d4a34></rect><rect x="541" y="391" width="30" height="30" class="cell" style="fill:rgb(16, 73, 148);" data-v-c91d4a34></rect><rect x="571" y="391" width="30" height="30" class="cell" style="fill:rgb(206, 243, 255);" data-v-c91d4a34></rect><rect x="601" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="391" width="30" height="30" class="cell" style="fill:rgb(239, 199, 132);" data-v-c91d4a34></rect><rect x="751" y="391" width="30" height="30" class="cell" style="fill:rgb(74, 20, 57);" data-v-c91d4a34></rect><rect x="781" y="391" width="30" height="30" class="cell" style="fill:rgb(140, 211, 255);" data-v-c91d4a34></rect><rect x="811" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="391" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="121" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="241" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 219, 148);" data-v-c91d4a34></rect><rect x="361" y="421" width="30" height="30" class="cell" style="fill:rgb(66, 0, 107);" data-v-c91d4a34></rect><rect x="391" y="421" width="30" height="30" class="cell" style="fill:rgb(189, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 251, 231);" data-v-c91d4a34></rect><rect x="541" y="421" width="30" height="30" class="cell" style="fill:rgb(181, 117, 74);" data-v-c91d4a34></rect><rect x="571" y="421" width="30" height="30" class="cell" style="fill:rgb(33, 20, 16);" data-v-c91d4a34></rect><rect x="601" y="421" width="30" height="30" class="cell" style="fill:rgb(33, 48, 49);" data-v-c91d4a34></rect><rect x="631" y="421" width="30" height="30" class="cell" style="fill:rgb(49, 52, 49);" data-v-c91d4a34></rect><rect x="661" y="421" width="30" height="30" class="cell" style="fill:rgb(49, 52, 49);" data-v-c91d4a34></rect><rect x="691" y="421" width="30" height="30" class="cell" style="fill:rgb(49, 32, 16);" data-v-c91d4a34></rect><rect x="721" y="421" width="30" height="30" class="cell" style="fill:rgb(24, 56, 82);" data-v-c91d4a34></rect><rect x="751" y="421" width="30" height="30" class="cell" style="fill:rgb(140, 190, 239);" data-v-c91d4a34></rect><rect x="781" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="811" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="421" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="121" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="241" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 251, 247);" data-v-c91d4a34></rect><rect x="361" y="451" width="30" height="30" class="cell" style="fill:rgb(239, 235, 239);" data-v-c91d4a34></rect><rect x="391" y="451" width="30" height="30" class="cell" style="fill:rgb(247, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="571" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 247);" data-v-c91d4a34></rect><rect x="601" y="451" width="30" height="30" class="cell" style="fill:rgb(239, 235, 239);" data-v-c91d4a34></rect><rect x="631" y="451" width="30" height="30" class="cell" style="fill:rgb(239, 235, 239);" data-v-c91d4a34></rect><rect x="661" y="451" width="30" height="30" class="cell" style="fill:rgb(239, 235, 239);" data-v-c91d4a34></rect><rect x="691" y="451" width="30" height="30" class="cell" style="fill:rgb(239, 243, 255);" data-v-c91d4a34></rect><rect x="721" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="751" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="781" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="811" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="451" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="1" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="31" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="61" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="91" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="121" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="151" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="181" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="211" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="241" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="271" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="301" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="331" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="361" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="391" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="421" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="451" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="481" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="511" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="541" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="571" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="601" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="631" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="661" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="691" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="721" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="751" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="781" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="811" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="841" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect><rect x="871" y="481" width="30" height="30" class="cell" style="fill:rgb(255, 255, 255);" data-v-c91d4a34></rect></svg></div></div><div class="flex flex-col items-center gap-2 mb-2 max-w-full mx-auto" data-v-c91d4a34><div class="w-full max-w-full" data-v-c91d4a34><svg xmlns="http://www.w3.org/2000/svg" class="h-full max-h-60 w-full" viewBox="0 0 902 512" data-v-c91d4a34><rect x="1" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="351" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="361" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="371" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="381" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="391" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="401" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="561" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="571" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="611" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="751" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="761" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="771" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="781" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="791" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="801" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="1" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="1" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="31" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="351" y="31" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="361" y="31" width="10" height="30" class="cell" style="fill:rgb(140, 98, 98);" data-v-c91d4a34></rect><rect x="371" y="31" width="10" height="30" class="cell" style="fill:rgb(81.89999999999999, 117, 81.89999999999999);" data-v-c91d4a34></rect><rect x="381" y="31" width="10" height="30" class="cell" style="fill:rgb(115.49999999999999, 115.49999999999999, 165);" data-v-c91d4a34></rect><rect x="391" y="31" width="10" height="30" class="cell" style="fill:rgb(214, 149.79999999999998, 149.79999999999998);" data-v-c91d4a34></rect><rect x="401" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="561" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="571" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="611" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="31" width="10" height="30" class="cell" style="fill:rgb(149.79999999999998, 149.79999999999998, 214);" data-v-c91d4a34></rect><rect x="751" y="31" width="10" height="30" class="cell" style="fill:rgb(165, 115.49999999999999, 115.49999999999999);" data-v-c91d4a34></rect><rect x="761" y="31" width="10" height="30" class="cell" style="fill:rgb(81.89999999999999, 117, 81.89999999999999);" data-v-c91d4a34></rect><rect x="771" y="31" width="10" height="30" class="cell" style="fill:rgb(80.5, 80.5, 115);" data-v-c91d4a34></rect><rect x="781" y="31" width="10" height="30" class="cell" style="fill:rgb(165, 115.49999999999999, 115.49999999999999);" data-v-c91d4a34></rect><rect x="791" y="31" width="10" height="30" class="cell" style="fill:rgb(147.7, 211, 147.7);" data-v-c91d4a34></rect><rect x="801" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="31" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="31" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="61" width="10" height="30" class="cell" style="fill:rgb(172.89999999999998, 172.89999999999998, 247);" data-v-c91d4a34></rect><rect x="121" y="61" width="10" height="30" class="cell" style="fill:rgb(222, 155.39999999999998, 155.39999999999998);" data-v-c91d4a34></rect><rect x="131" y="61" width="10" height="30" class="cell" style="fill:rgb(139.29999999999998, 199, 139.29999999999998);" data-v-c91d4a34></rect><rect x="141" y="61" width="10" height="30" class="cell" style="fill:rgb(109.19999999999999, 109.19999999999999, 156);" data-v-c91d4a34></rect><rect x="151" y="61" width="10" height="30" class="cell" style="fill:rgb(140, 98, 98);" data-v-c91d4a34></rect><rect x="161" y="61" width="10" height="30" class="cell" style="fill:rgb(81.89999999999999, 117, 81.89999999999999);" data-v-c91d4a34></rect><rect x="171" y="61" width="10" height="30" class="cell" style="fill:rgb(86.1, 86.1, 123);" data-v-c91d4a34></rect><rect x="181" y="61" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="191" y="61" width="10" height="30" class="cell" style="fill:rgb(124.6, 178, 124.6);" data-v-c91d4a34></rect><rect x="201" y="61" width="10" height="30" class="cell" style="fill:rgb(149.79999999999998, 149.79999999999998, 214);" data-v-c91d4a34></rect><rect x="211" y="61" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="221" y="61" width="10" height="30" class="cell" style="fill:rgb(175.7, 251, 175.7);" data-v-c91d4a34></rect><rect x="231" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="61" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="61" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="61" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="61" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="61" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="61" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="61" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="561" y="61" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="571" y="61" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="581" y="61" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="591" y="61" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="601" y="61" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="611" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="61" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="61" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="761" y="61" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="771" y="61" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="61" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="791" y="61" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="801" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="61" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="61" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="91" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="91" y="91" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="101" y="91" width="10" height="30" class="cell" style="fill:rgb(76.3, 109, 76.3);" data-v-c91d4a34></rect><rect x="111" y="91" width="10" height="30" class="cell" style="fill:rgb(28.7, 28.7, 41);" data-v-c91d4a34></rect><rect x="121" y="91" width="10" height="30" class="cell" style="fill:rgb(16, 11.2, 11.2);" data-v-c91d4a34></rect><rect x="131" y="91" width="10" height="30" class="cell" style="fill:rgb(33.599999999999994, 48, 33.599999999999994);" data-v-c91d4a34></rect><rect x="141" y="91" width="10" height="30" class="cell" style="fill:rgb(57.4, 57.4, 82);" data-v-c91d4a34></rect><rect x="151" y="91" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="161" y="91" width="10" height="30" class="cell" style="fill:rgb(81.89999999999999, 117, 81.89999999999999);" data-v-c91d4a34></rect><rect x="171" y="91" width="10" height="30" class="cell" style="fill:rgb(80.5, 80.5, 115);" data-v-c91d4a34></rect><rect x="181" y="91" width="10" height="30" class="cell" style="fill:rgb(99, 69.3, 69.3);" data-v-c91d4a34></rect><rect x="191" y="91" width="10" height="30" class="cell" style="fill:rgb(45.5, 65, 45.5);" data-v-c91d4a34></rect><rect x="201" y="91" width="10" height="30" class="cell" style="fill:rgb(16.799999999999997, 16.799999999999997, 24);" data-v-c91d4a34></rect><rect x="211" y="91" width="10" height="30" class="cell" style="fill:rgb(16, 11.2, 11.2);" data-v-c91d4a34></rect><rect x="221" y="91" width="10" height="30" class="cell" style="fill:rgb(33.599999999999994, 48, 33.599999999999994);" data-v-c91d4a34></rect><rect x="231" y="91" width="10" height="30" class="cell" style="fill:rgb(80.5, 80.5, 115);" data-v-c91d4a34></rect><rect x="241" y="91" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="251" y="91" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 239, 167.29999999999998);" data-v-c91d4a34></rect><rect x="261" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="91" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="91" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="91" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="91" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="91" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="91" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="91" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="561" y="91" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="571" y="91" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="581" y="91" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="591" y="91" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="601" y="91" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="611" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="91" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="91" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="761" y="91" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="771" y="91" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="91" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="791" y="91" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="801" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="91" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="91" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="121" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="71" y="121" width="10" height="30" class="cell" style="fill:rgb(121.8, 174, 121.8);" data-v-c91d4a34></rect><rect x="81" y="121" width="10" height="30" class="cell" style="fill:rgb(69.3, 69.3, 99);" data-v-c91d4a34></rect><rect x="91" y="121" width="10" height="30" class="cell" style="fill:rgb(16, 11.2, 11.2);" data-v-c91d4a34></rect><rect x="101" y="121" width="10" height="30" class="cell" style="fill:rgb(30.799999999999997, 44, 30.799999999999997);" data-v-c91d4a34></rect><rect x="111" y="121" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="121" y="121" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="131" y="121" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 239, 167.29999999999998);" data-v-c91d4a34></rect><rect x="141" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="121" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="211" y="121" width="10" height="30" class="cell" style="fill:rgb(173, 121.1, 121.1);" data-v-c91d4a34></rect><rect x="221" y="121" width="10" height="30" class="cell" style="fill:rgb(67.89999999999999, 97, 67.89999999999999);" data-v-c91d4a34></rect><rect x="231" y="121" width="10" height="30" class="cell" style="fill:rgb(11.2, 11.2, 16);" data-v-c91d4a34></rect><rect x="241" y="121" width="10" height="30" class="cell" style="fill:rgb(41, 28.7, 28.7);" data-v-c91d4a34></rect><rect x="251" y="121" width="10" height="30" class="cell" style="fill:rgb(87.5, 125, 87.5);" data-v-c91d4a34></rect><rect x="261" y="121" width="10" height="30" class="cell" style="fill:rgb(138.6, 138.6, 198);" data-v-c91d4a34></rect><rect x="271" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="121" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="121" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="121" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="121" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="121" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="121" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="121" width="10" height="30" class="cell" style="fill:rgb(139.29999999999998, 199, 139.29999999999998);" data-v-c91d4a34></rect><rect x="561" y="121" width="10" height="30" class="cell" style="fill:rgb(86.1, 86.1, 123);" data-v-c91d4a34></rect><rect x="571" y="121" width="10" height="30" class="cell" style="fill:rgb(33, 23.099999999999998, 23.099999999999998);" data-v-c91d4a34></rect><rect x="581" y="121" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="591" y="121" width="10" height="30" class="cell" style="fill:rgb(46.199999999999996, 46.199999999999996, 66);" data-v-c91d4a34></rect><rect x="601" y="121" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="611" y="121" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="621" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="121" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="121" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="761" y="121" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="771" y="121" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="121" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="791" y="121" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="801" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="121" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="121" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="151" width="10" height="30" class="cell" style="fill:rgb(172.89999999999998, 172.89999999999998, 247);" data-v-c91d4a34></rect><rect x="61" y="151" width="10" height="30" class="cell" style="fill:rgb(173, 121.1, 121.1);" data-v-c91d4a34></rect><rect x="71" y="151" width="10" height="30" class="cell" style="fill:rgb(67.89999999999999, 97, 67.89999999999999);" data-v-c91d4a34></rect><rect x="81" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="91" y="151" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="101" y="151" width="10" height="30" class="cell" style="fill:rgb(102.19999999999999, 146, 102.19999999999999);" data-v-c91d4a34></rect><rect x="111" y="151" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="121" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="151" width="10" height="30" class="cell" style="fill:rgb(139.29999999999998, 199, 139.29999999999998);" data-v-c91d4a34></rect><rect x="231" y="151" width="10" height="30" class="cell" style="fill:rgb(86.1, 86.1, 123);" data-v-c91d4a34></rect><rect x="241" y="151" width="10" height="30" class="cell" style="fill:rgb(33, 23.099999999999998, 23.099999999999998);" data-v-c91d4a34></rect><rect x="251" y="151" width="10" height="30" class="cell" style="fill:rgb(25.2, 36, 25.2);" data-v-c91d4a34></rect><rect x="261" y="151" width="10" height="30" class="cell" style="fill:rgb(86.1, 86.1, 123);" data-v-c91d4a34></rect><rect x="271" y="151" width="10" height="30" class="cell" style="fill:rgb(198, 138.6, 138.6);" data-v-c91d4a34></rect><rect x="281" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="151" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="151" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="151" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="151" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="151" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="151" width="10" height="30" class="cell" style="fill:rgb(198, 138.6, 138.6);" data-v-c91d4a34></rect><rect x="551" y="151" width="10" height="30" class="cell" style="fill:rgb(84.69999999999999, 121, 84.69999999999999);" data-v-c91d4a34></rect><rect x="561" y="151" width="10" height="30" class="cell" style="fill:rgb(23.099999999999998, 23.099999999999998, 33);" data-v-c91d4a34></rect><rect x="571" y="151" width="10" height="30" class="cell" style="fill:rgb(16, 11.2, 11.2);" data-v-c91d4a34></rect><rect x="581" y="151" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="591" y="151" width="10" height="30" class="cell" style="fill:rgb(11.2, 11.2, 16);" data-v-c91d4a34></rect><rect x="601" y="151" width="10" height="30" class="cell" style="fill:rgb(57, 39.9, 39.9);" data-v-c91d4a34></rect><rect x="611" y="151" width="10" height="30" class="cell" style="fill:rgb(93.8, 134, 93.8);" data-v-c91d4a34></rect><rect x="621" y="151" width="10" height="30" class="cell" style="fill:rgb(144.2, 144.2, 206);" data-v-c91d4a34></rect><rect x="631" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="151" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="151" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="761" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="771" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="791" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="801" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="811" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="821" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="831" y="151" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="841" y="151" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="851" y="151" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="861" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="151" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="151" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="181" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="61" y="181" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="71" y="181" width="10" height="30" class="cell" style="fill:rgb(48.3, 69, 48.3);" data-v-c91d4a34></rect><rect x="81" y="181" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="91" y="181" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="101" y="181" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="111" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="181" width="10" height="30" class="cell" style="fill:rgb(175.7, 251, 175.7);" data-v-c91d4a34></rect><rect x="231" y="181" width="10" height="30" class="cell" style="fill:rgb(126.69999999999999, 126.69999999999999, 181);" data-v-c91d4a34></rect><rect x="241" y="181" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="251" y="181" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="261" y="181" width="10" height="30" class="cell" style="fill:rgb(46.199999999999996, 46.199999999999996, 66);" data-v-c91d4a34></rect><rect x="271" y="181" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="281" y="181" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="291" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="181" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="181" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="181" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="181" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="181" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="181" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="181" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="531" y="181" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="541" y="181" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="551" y="181" width="10" height="30" class="cell" style="fill:rgb(16.799999999999997, 24, 16.799999999999997);" data-v-c91d4a34></rect><rect x="561" y="181" width="10" height="30" class="cell" style="fill:rgb(57.4, 57.4, 82);" data-v-c91d4a34></rect><rect x="571" y="181" width="10" height="30" class="cell" style="fill:rgb(165, 115.49999999999999, 115.49999999999999);" data-v-c91d4a34></rect><rect x="581" y="181" width="10" height="30" class="cell" style="fill:rgb(136.5, 195, 136.5);" data-v-c91d4a34></rect><rect x="591" y="181" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="601" y="181" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="611" y="181" width="10" height="30" class="cell" style="fill:rgb(16.799999999999997, 24, 16.799999999999997);" data-v-c91d4a34></rect><rect x="621" y="181" width="10" height="30" class="cell" style="fill:rgb(51.8, 51.8, 74);" data-v-c91d4a34></rect><rect x="631" y="181" width="10" height="30" class="cell" style="fill:rgb(132, 92.39999999999999, 92.39999999999999);" data-v-c91d4a34></rect><rect x="641" y="181" width="10" height="30" class="cell" style="fill:rgb(142.1, 203, 142.1);" data-v-c91d4a34></rect><rect x="651" y="181" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="661" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="181" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="181" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="761" y="181" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="771" y="181" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="181" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="791" y="181" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="801" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="181" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="181" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="211" width="10" height="30" class="cell" style="fill:rgb(138.6, 138.6, 198);" data-v-c91d4a34></rect><rect x="61" y="211" width="10" height="30" class="cell" style="fill:rgb(123, 86.1, 86.1);" data-v-c91d4a34></rect><rect x="71" y="211" width="10" height="30" class="cell" style="fill:rgb(25.2, 36, 25.2);" data-v-c91d4a34></rect><rect x="81" y="211" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="91" y="211" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="101" y="211" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="111" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="211" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="241" y="211" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="251" y="211" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="261" y="211" width="10" height="30" class="cell" style="fill:rgb(46.199999999999996, 46.199999999999996, 66);" data-v-c91d4a34></rect><rect x="271" y="211" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="281" y="211" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="291" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="211" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="211" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="211" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="211" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="211" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="211" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="211" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="491" y="211" width="10" height="30" class="cell" style="fill:rgb(139.29999999999998, 199, 139.29999999999998);" data-v-c91d4a34></rect><rect x="501" y="211" width="10" height="30" class="cell" style="fill:rgb(98, 98, 140);" data-v-c91d4a34></rect><rect x="511" y="211" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="521" y="211" width="10" height="30" class="cell" style="fill:rgb(16.799999999999997, 24, 16.799999999999997);" data-v-c91d4a34></rect><rect x="531" y="211" width="10" height="30" class="cell" style="fill:rgb(11.2, 11.2, 16);" data-v-c91d4a34></rect><rect x="541" y="211" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="551" y="211" width="10" height="30" class="cell" style="fill:rgb(102.19999999999999, 146, 102.19999999999999);" data-v-c91d4a34></rect><rect x="561" y="211" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="571" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="211" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="611" y="211" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="621" y="211" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="631" y="211" width="10" height="30" class="cell" style="fill:rgb(41, 28.7, 28.7);" data-v-c91d4a34></rect><rect x="641" y="211" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="651" y="211" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="661" y="211" width="10" height="30" class="cell" style="fill:rgb(90, 62.99999999999999, 62.99999999999999);" data-v-c91d4a34></rect><rect x="671" y="211" width="10" height="30" class="cell" style="fill:rgb(102.19999999999999, 146, 102.19999999999999);" data-v-c91d4a34></rect><rect x="681" y="211" width="10" height="30" class="cell" style="fill:rgb(138.6, 138.6, 198);" data-v-c91d4a34></rect><rect x="691" y="211" width="10" height="30" class="cell" style="fill:rgb(231, 161.7, 161.7);" data-v-c91d4a34></rect><rect x="701" y="211" width="10" height="30" class="cell" style="fill:rgb(172.89999999999998, 247, 172.89999999999998);" data-v-c91d4a34></rect><rect x="711" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="211" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="211" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="761" y="211" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="771" y="211" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="211" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="791" y="211" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="801" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="211" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="211" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="241" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="61" y="241" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="71" y="241" width="10" height="30" class="cell" style="fill:rgb(48.3, 69, 48.3);" data-v-c91d4a34></rect><rect x="81" y="241" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="91" y="241" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="101" y="241" width="10" height="30" class="cell" style="fill:rgb(127.39999999999999, 182, 127.39999999999999);" data-v-c91d4a34></rect><rect x="111" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="241" width="10" height="30" class="cell" style="fill:rgb(156.1, 223, 156.1);" data-v-c91d4a34></rect><rect x="231" y="241" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="241" y="241" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="251" y="241" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="261" y="241" width="10" height="30" class="cell" style="fill:rgb(57.4, 57.4, 82);" data-v-c91d4a34></rect><rect x="271" y="241" width="10" height="30" class="cell" style="fill:rgb(165, 115.49999999999999, 115.49999999999999);" data-v-c91d4a34></rect><rect x="281" y="241" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="291" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="241" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="241" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="241" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="241" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="241" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="241" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="241" width="10" height="30" class="cell" style="fill:rgb(231, 161.7, 161.7);" data-v-c91d4a34></rect><rect x="461" y="241" width="10" height="30" class="cell" style="fill:rgb(113.39999999999999, 162, 113.39999999999999);" data-v-c91d4a34></rect><rect x="471" y="241" width="10" height="30" class="cell" style="fill:rgb(57.4, 57.4, 82);" data-v-c91d4a34></rect><rect x="481" y="241" width="10" height="30" class="cell" style="fill:rgb(16, 11.2, 11.2);" data-v-c91d4a34></rect><rect x="491" y="241" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="501" y="241" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="511" y="241" width="10" height="30" class="cell" style="fill:rgb(90, 62.99999999999999, 62.99999999999999);" data-v-c91d4a34></rect><rect x="521" y="241" width="10" height="30" class="cell" style="fill:rgb(113.39999999999999, 162, 113.39999999999999);" data-v-c91d4a34></rect><rect x="531" y="241" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="541" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="561" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="571" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="611" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="241" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="641" y="241" width="10" height="30" class="cell" style="fill:rgb(156.1, 223, 156.1);" data-v-c91d4a34></rect><rect x="651" y="241" width="10" height="30" class="cell" style="fill:rgb(126.69999999999999, 126.69999999999999, 181);" data-v-c91d4a34></rect><rect x="661" y="241" width="10" height="30" class="cell" style="fill:rgb(115, 80.5, 80.5);" data-v-c91d4a34></rect><rect x="671" y="241" width="10" height="30" class="cell" style="fill:rgb(51.099999999999994, 73, 51.099999999999994);" data-v-c91d4a34></rect><rect x="681" y="241" width="10" height="30" class="cell" style="fill:rgb(62.99999999999999, 62.99999999999999, 90);" data-v-c91d4a34></rect><rect x="691" y="241" width="10" height="30" class="cell" style="fill:rgb(156, 109.19999999999999, 109.19999999999999);" data-v-c91d4a34></rect><rect x="701" y="241" width="10" height="30" class="cell" style="fill:rgb(158.89999999999998, 227, 158.89999999999998);" data-v-c91d4a34></rect><rect x="711" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="241" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="241" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="761" y="241" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="771" y="241" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="241" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="791" y="241" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="801" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="241" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="241" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="271" width="10" height="30" class="cell" style="fill:rgb(198, 138.6, 138.6);" data-v-c91d4a34></rect><rect x="71" y="271" width="10" height="30" class="cell" style="fill:rgb(87.5, 125, 87.5);" data-v-c91d4a34></rect><rect x="81" y="271" width="10" height="30" class="cell" style="fill:rgb(23.099999999999998, 23.099999999999998, 33);" data-v-c91d4a34></rect><rect x="91" y="271" width="10" height="30" class="cell" style="fill:rgb(33, 23.099999999999998, 23.099999999999998);" data-v-c91d4a34></rect><rect x="101" y="271" width="10" height="30" class="cell" style="fill:rgb(84.69999999999999, 121, 84.69999999999999);" data-v-c91d4a34></rect><rect x="111" y="271" width="10" height="30" class="cell" style="fill:rgb(138.6, 138.6, 198);" data-v-c91d4a34></rect><rect x="121" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="271" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="221" y="271" width="10" height="30" class="cell" style="fill:rgb(116.19999999999999, 166, 116.19999999999999);" data-v-c91d4a34></rect><rect x="231" y="271" width="10" height="30" class="cell" style="fill:rgb(62.99999999999999, 62.99999999999999, 90);" data-v-c91d4a34></rect><rect x="241" y="271" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="251" y="271" width="10" height="30" class="cell" style="fill:rgb(48.3, 69, 48.3);" data-v-c91d4a34></rect><rect x="261" y="271" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="271" y="271" width="10" height="30" class="cell" style="fill:rgb(222, 155.39999999999998, 155.39999999999998);" data-v-c91d4a34></rect><rect x="281" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="271" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="271" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="271" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="271" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="271" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="271" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="271" width="10" height="30" class="cell" style="fill:rgb(175.7, 251, 175.7);" data-v-c91d4a34></rect><rect x="471" y="271" width="10" height="30" class="cell" style="fill:rgb(172.89999999999998, 172.89999999999998, 247);" data-v-c91d4a34></rect><rect x="481" y="271" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="491" y="271" width="10" height="30" class="cell" style="fill:rgb(170.1, 243, 170.1);" data-v-c91d4a34></rect><rect x="501" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="561" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="571" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="611" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="271" width="10" height="30" class="cell" style="fill:rgb(132.29999999999998, 132.29999999999998, 189);" data-v-c91d4a34></rect><rect x="751" y="271" width="10" height="30" class="cell" style="fill:rgb(123, 86.1, 86.1);" data-v-c91d4a34></rect><rect x="761" y="271" width="10" height="30" class="cell" style="fill:rgb(36.4, 52, 36.4);" data-v-c91d4a34></rect><rect x="771" y="271" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="781" y="271" width="10" height="30" class="cell" style="fill:rgb(123, 86.1, 86.1);" data-v-c91d4a34></rect><rect x="791" y="271" width="10" height="30" class="cell" style="fill:rgb(133, 190, 133);" data-v-c91d4a34></rect><rect x="801" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="271" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="271" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="301" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="81" y="301" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="91" y="301" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="101" y="301" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="111" y="301" width="10" height="30" class="cell" style="fill:rgb(28.7, 28.7, 41);" data-v-c91d4a34></rect><rect x="121" y="301" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="131" y="301" width="10" height="30" class="cell" style="fill:rgb(124.6, 178, 124.6);" data-v-c91d4a34></rect><rect x="141" y="301" width="10" height="30" class="cell" style="fill:rgb(161.7, 161.7, 231);" data-v-c91d4a34></rect><rect x="151" y="301" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="161" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="301" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="191" y="301" width="10" height="30" class="cell" style="fill:rgb(156.1, 223, 156.1);" data-v-c91d4a34></rect><rect x="201" y="301" width="10" height="30" class="cell" style="fill:rgb(115.49999999999999, 115.49999999999999, 165);" data-v-c91d4a34></rect><rect x="211" y="301" width="10" height="30" class="cell" style="fill:rgb(99, 69.3, 69.3);" data-v-c91d4a34></rect><rect x="221" y="301" width="10" height="30" class="cell" style="fill:rgb(30.799999999999997, 44, 30.799999999999997);" data-v-c91d4a34></rect><rect x="231" y="301" width="10" height="30" class="cell" style="fill:rgb(11.2, 11.2, 16);" data-v-c91d4a34></rect><rect x="241" y="301" width="10" height="30" class="cell" style="fill:rgb(99, 69.3, 69.3);" data-v-c91d4a34></rect><rect x="251" y="301" width="10" height="30" class="cell" style="fill:rgb(118.99999999999999, 170, 118.99999999999999);" data-v-c91d4a34></rect><rect x="261" y="301" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="271" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="301" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="301" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="301" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="301" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="301" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="301" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="301" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="551" y="301" width="10" height="30" class="cell" style="fill:rgb(156.1, 223, 156.1);" data-v-c91d4a34></rect><rect x="561" y="301" width="10" height="30" class="cell" style="fill:rgb(138.6, 138.6, 198);" data-v-c91d4a34></rect><rect x="571" y="301" width="10" height="30" class="cell" style="fill:rgb(156, 109.19999999999999, 109.19999999999999);" data-v-c91d4a34></rect><rect x="581" y="301" width="10" height="30" class="cell" style="fill:rgb(96.6, 138, 96.6);" data-v-c91d4a34></rect><rect x="591" y="301" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="601" y="301" width="10" height="30" class="cell" style="fill:rgb(82, 57.4, 57.4);" data-v-c91d4a34></rect><rect x="611" y="301" width="10" height="30" class="cell" style="fill:rgb(45.5, 65, 45.5);" data-v-c91d4a34></rect><rect x="621" y="301" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="631" y="301" width="10" height="30" class="cell" style="fill:rgb(49, 34.3, 34.3);" data-v-c91d4a34></rect><rect x="641" y="301" width="10" height="30" class="cell" style="fill:rgb(36.4, 52, 36.4);" data-v-c91d4a34></rect><rect x="651" y="301" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="661" y="301" width="10" height="30" class="cell" style="fill:rgb(49, 34.3, 34.3);" data-v-c91d4a34></rect><rect x="671" y="301" width="10" height="30" class="cell" style="fill:rgb(36.4, 52, 36.4);" data-v-c91d4a34></rect><rect x="681" y="301" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="691" y="301" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="701" y="301" width="10" height="30" class="cell" style="fill:rgb(67.89999999999999, 97, 67.89999999999999);" data-v-c91d4a34></rect><rect x="711" y="301" width="10" height="30" class="cell" style="fill:rgb(80.5, 80.5, 115);" data-v-c91d4a34></rect><rect x="721" y="301" width="10" height="30" class="cell" style="fill:rgb(140, 98, 98);" data-v-c91d4a34></rect><rect x="731" y="301" width="10" height="30" class="cell" style="fill:rgb(116.19999999999999, 166, 116.19999999999999);" data-v-c91d4a34></rect><rect x="741" y="301" width="10" height="30" class="cell" style="fill:rgb(144.2, 144.2, 206);" data-v-c91d4a34></rect><rect x="751" y="301" width="10" height="30" class="cell" style="fill:rgb(231, 161.7, 161.7);" data-v-c91d4a34></rect><rect x="761" y="301" width="10" height="30" class="cell" style="fill:rgb(172.89999999999998, 247, 172.89999999999998);" data-v-c91d4a34></rect><rect x="771" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="781" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="791" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="801" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="301" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="301" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="331" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="101" y="331" width="10" height="30" class="cell" style="fill:rgb(136.5, 195, 136.5);" data-v-c91d4a34></rect><rect x="111" y="331" width="10" height="30" class="cell" style="fill:rgb(92.39999999999999, 92.39999999999999, 132);" data-v-c91d4a34></rect><rect x="121" y="331" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="131" y="331" width="10" height="30" class="cell" style="fill:rgb(22.4, 32, 22.4);" data-v-c91d4a34></rect><rect x="141" y="331" width="10" height="30" class="cell" style="fill:rgb(11.2, 11.2, 16);" data-v-c91d4a34></rect><rect x="151" y="331" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="161" y="331" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="171" y="331" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="181" y="331" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="191" y="331" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="201" y="331" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="211" y="331" width="10" height="30" class="cell" style="fill:rgb(90, 62.99999999999999, 62.99999999999999);" data-v-c91d4a34></rect><rect x="221" y="331" width="10" height="30" class="cell" style="fill:rgb(110.6, 158, 110.6);" data-v-c91d4a34></rect><rect x="231" y="331" width="10" height="30" class="cell" style="fill:rgb(149.79999999999998, 149.79999999999998, 214);" data-v-c91d4a34></rect><rect x="241" y="331" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="251" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="331" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="331" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="331" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="331" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="331" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="331" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="331" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="521" y="331" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="531" y="331" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="541" y="331" width="10" height="30" class="cell" style="fill:rgb(41, 28.7, 28.7);" data-v-c91d4a34></rect><rect x="551" y="331" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="561" y="331" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="571" y="331" width="10" height="30" class="cell" style="fill:rgb(90, 62.99999999999999, 62.99999999999999);" data-v-c91d4a34></rect><rect x="581" y="331" width="10" height="30" class="cell" style="fill:rgb(96.6, 138, 96.6);" data-v-c91d4a34></rect><rect x="591" y="331" width="10" height="30" class="cell" style="fill:rgb(126.69999999999999, 126.69999999999999, 181);" data-v-c91d4a34></rect><rect x="601" y="331" width="10" height="30" class="cell" style="fill:rgb(206, 144.2, 144.2);" data-v-c91d4a34></rect><rect x="611" y="331" width="10" height="30" class="cell" style="fill:rgb(156.1, 223, 156.1);" data-v-c91d4a34></rect><rect x="621" y="331" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="631" y="331" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="641" y="331" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="651" y="331" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="661" y="331" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="671" y="331" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="681" y="331" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="691" y="331" width="10" height="30" class="cell" style="fill:rgb(214, 149.79999999999998, 149.79999999999998);" data-v-c91d4a34></rect><rect x="701" y="331" width="10" height="30" class="cell" style="fill:rgb(139.29999999999998, 199, 139.29999999999998);" data-v-c91d4a34></rect><rect x="711" y="331" width="10" height="30" class="cell" style="fill:rgb(121.1, 121.1, 173);" data-v-c91d4a34></rect><rect x="721" y="331" width="10" height="30" class="cell" style="fill:rgb(140, 98, 98);" data-v-c91d4a34></rect><rect x="731" y="331" width="10" height="30" class="cell" style="fill:rgb(65.1, 93, 65.1);" data-v-c91d4a34></rect><rect x="741" y="331" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="751" y="331" width="10" height="30" class="cell" style="fill:rgb(24, 16.799999999999997, 16.799999999999997);" data-v-c91d4a34></rect><rect x="761" y="331" width="10" height="30" class="cell" style="fill:rgb(33.599999999999994, 48, 33.599999999999994);" data-v-c91d4a34></rect><rect x="771" y="331" width="10" height="30" class="cell" style="fill:rgb(80.5, 80.5, 115);" data-v-c91d4a34></rect><rect x="781" y="331" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="791" y="331" width="10" height="30" class="cell" style="fill:rgb(170.1, 243, 170.1);" data-v-c91d4a34></rect><rect x="801" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="331" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="331" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="361" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="161" y="361" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="171" y="361" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="181" y="361" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="191" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="361" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="361" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="361" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="361" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="361" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="361" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="361" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="511" y="361" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="521" y="361" width="10" height="30" class="cell" style="fill:rgb(51.099999999999994, 73, 51.099999999999994);" data-v-c91d4a34></rect><rect x="531" y="361" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="541" y="361" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="551" y="361" width="10" height="30" class="cell" style="fill:rgb(102.19999999999999, 146, 102.19999999999999);" data-v-c91d4a34></rect><rect x="561" y="361" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="571" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="611" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="361" width="10" height="30" class="cell" style="fill:rgb(155.39999999999998, 155.39999999999998, 222);" data-v-c91d4a34></rect><rect x="751" y="361" width="10" height="30" class="cell" style="fill:rgb(148, 103.6, 103.6);" data-v-c91d4a34></rect><rect x="761" y="361" width="10" height="30" class="cell" style="fill:rgb(45.5, 65, 45.5);" data-v-c91d4a34></rect><rect x="771" y="361" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="781" y="361" width="10" height="30" class="cell" style="fill:rgb(107, 74.89999999999999, 74.89999999999999);" data-v-c91d4a34></rect><rect x="791" y="361" width="10" height="30" class="cell" style="fill:rgb(130.2, 186, 130.2);" data-v-c91d4a34></rect><rect x="801" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="361" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="361" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="391" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="391" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="391" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="391" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="391" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="391" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="391" width="10" height="30" class="cell" style="fill:rgb(198, 138.6, 138.6);" data-v-c91d4a34></rect><rect x="521" y="391" width="10" height="30" class="cell" style="fill:rgb(87.5, 125, 87.5);" data-v-c91d4a34></rect><rect x="531" y="391" width="10" height="30" class="cell" style="fill:rgb(28.7, 28.7, 41);" data-v-c91d4a34></rect><rect x="541" y="391" width="10" height="30" class="cell" style="fill:rgb(16, 11.2, 11.2);" data-v-c91d4a34></rect><rect x="551" y="391" width="10" height="30" class="cell" style="fill:rgb(51.099999999999994, 73, 51.099999999999994);" data-v-c91d4a34></rect><rect x="561" y="391" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="571" y="391" width="10" height="30" class="cell" style="fill:rgb(206, 144.2, 144.2);" data-v-c91d4a34></rect><rect x="581" y="391" width="10" height="30" class="cell" style="fill:rgb(170.1, 243, 170.1);" data-v-c91d4a34></rect><rect x="591" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="611" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="391" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="731" y="391" width="10" height="30" class="cell" style="fill:rgb(139.29999999999998, 199, 139.29999999999998);" data-v-c91d4a34></rect><rect x="741" y="391" width="10" height="30" class="cell" style="fill:rgb(92.39999999999999, 92.39999999999999, 132);" data-v-c91d4a34></rect><rect x="751" y="391" width="10" height="30" class="cell" style="fill:rgb(74, 51.8, 51.8);" data-v-c91d4a34></rect><rect x="761" y="391" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="771" y="391" width="10" height="30" class="cell" style="fill:rgb(39.9, 39.9, 57);" data-v-c91d4a34></rect><rect x="781" y="391" width="10" height="30" class="cell" style="fill:rgb(140, 98, 98);" data-v-c91d4a34></rect><rect x="791" y="391" width="10" height="30" class="cell" style="fill:rgb(147.7, 211, 147.7);" data-v-c91d4a34></rect><rect x="801" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="391" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="391" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="421" width="10" height="30" class="cell" style="fill:rgb(153.29999999999998, 219, 153.29999999999998);" data-v-c91d4a34></rect><rect x="351" y="421" width="10" height="30" class="cell" style="fill:rgb(103.6, 103.6, 148);" data-v-c91d4a34></rect><rect x="361" y="421" width="10" height="30" class="cell" style="fill:rgb(66, 46.199999999999996, 46.199999999999996);" data-v-c91d4a34></rect><rect x="371" y="421" width="10" height="30" class="cell" style="fill:rgb(0, 0, 0);" data-v-c91d4a34></rect><rect x="381" y="421" width="10" height="30" class="cell" style="fill:rgb(74.89999999999999, 74.89999999999999, 107);" data-v-c91d4a34></rect><rect x="391" y="421" width="10" height="30" class="cell" style="fill:rgb(189, 132.29999999999998, 132.29999999999998);" data-v-c91d4a34></rect><rect x="401" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="421" width="10" height="30" class="cell" style="fill:rgb(175.7, 251, 175.7);" data-v-c91d4a34></rect><rect x="531" y="421" width="10" height="30" class="cell" style="fill:rgb(161.7, 161.7, 231);" data-v-c91d4a34></rect><rect x="541" y="421" width="10" height="30" class="cell" style="fill:rgb(181, 126.69999999999999, 126.69999999999999);" data-v-c91d4a34></rect><rect x="551" y="421" width="10" height="30" class="cell" style="fill:rgb(81.89999999999999, 117, 81.89999999999999);" data-v-c91d4a34></rect><rect x="561" y="421" width="10" height="30" class="cell" style="fill:rgb(51.8, 51.8, 74);" data-v-c91d4a34></rect><rect x="571" y="421" width="10" height="30" class="cell" style="fill:rgb(33, 23.099999999999998, 23.099999999999998);" data-v-c91d4a34></rect><rect x="581" y="421" width="10" height="30" class="cell" style="fill:rgb(14, 20, 14);" data-v-c91d4a34></rect><rect x="591" y="421" width="10" height="30" class="cell" style="fill:rgb(11.2, 11.2, 16);" data-v-c91d4a34></rect><rect x="601" y="421" width="10" height="30" class="cell" style="fill:rgb(33, 23.099999999999998, 23.099999999999998);" data-v-c91d4a34></rect><rect x="611" y="421" width="10" height="30" class="cell" style="fill:rgb(33.599999999999994, 48, 33.599999999999994);" data-v-c91d4a34></rect><rect x="621" y="421" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="631" y="421" width="10" height="30" class="cell" style="fill:rgb(49, 34.3, 34.3);" data-v-c91d4a34></rect><rect x="641" y="421" width="10" height="30" class="cell" style="fill:rgb(36.4, 52, 36.4);" data-v-c91d4a34></rect><rect x="651" y="421" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="661" y="421" width="10" height="30" class="cell" style="fill:rgb(49, 34.3, 34.3);" data-v-c91d4a34></rect><rect x="671" y="421" width="10" height="30" class="cell" style="fill:rgb(36.4, 52, 36.4);" data-v-c91d4a34></rect><rect x="681" y="421" width="10" height="30" class="cell" style="fill:rgb(34.3, 34.3, 49);" data-v-c91d4a34></rect><rect x="691" y="421" width="10" height="30" class="cell" style="fill:rgb(49, 34.3, 34.3);" data-v-c91d4a34></rect><rect x="701" y="421" width="10" height="30" class="cell" style="fill:rgb(22.4, 32, 22.4);" data-v-c91d4a34></rect><rect x="711" y="421" width="10" height="30" class="cell" style="fill:rgb(11.2, 11.2, 16);" data-v-c91d4a34></rect><rect x="721" y="421" width="10" height="30" class="cell" style="fill:rgb(24, 16.799999999999997, 16.799999999999997);" data-v-c91d4a34></rect><rect x="731" y="421" width="10" height="30" class="cell" style="fill:rgb(39.199999999999996, 56, 39.199999999999996);" data-v-c91d4a34></rect><rect x="741" y="421" width="10" height="30" class="cell" style="fill:rgb(57.4, 57.4, 82);" data-v-c91d4a34></rect><rect x="751" y="421" width="10" height="30" class="cell" style="fill:rgb(140, 98, 98);" data-v-c91d4a34></rect><rect x="761" y="421" width="10" height="30" class="cell" style="fill:rgb(133, 190, 133);" data-v-c91d4a34></rect><rect x="771" y="421" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="781" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="791" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="801" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="421" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="421" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="451" width="10" height="30" class="cell" style="fill:rgb(175.7, 251, 175.7);" data-v-c91d4a34></rect><rect x="351" y="451" width="10" height="30" class="cell" style="fill:rgb(172.89999999999998, 172.89999999999998, 247);" data-v-c91d4a34></rect><rect x="361" y="451" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="371" y="451" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="381" y="451" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="391" y="451" width="10" height="30" class="cell" style="fill:rgb(247, 172.89999999999998, 172.89999999999998);" data-v-c91d4a34></rect><rect x="401" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="561" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="571" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="451" width="10" height="30" class="cell" style="fill:rgb(172.89999999999998, 172.89999999999998, 247);" data-v-c91d4a34></rect><rect x="601" y="451" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="611" y="451" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="621" y="451" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="631" y="451" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="641" y="451" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="651" y="451" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="661" y="451" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="671" y="451" width="10" height="30" class="cell" style="fill:rgb(164.5, 235, 164.5);" data-v-c91d4a34></rect><rect x="681" y="451" width="10" height="30" class="cell" style="fill:rgb(167.29999999999998, 167.29999999999998, 239);" data-v-c91d4a34></rect><rect x="691" y="451" width="10" height="30" class="cell" style="fill:rgb(239, 167.29999999999998, 167.29999999999998);" data-v-c91d4a34></rect><rect x="701" y="451" width="10" height="30" class="cell" style="fill:rgb(170.1, 243, 170.1);" data-v-c91d4a34></rect><rect x="711" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="751" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="761" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="771" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="781" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="791" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="801" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="451" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="451" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="1" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="11" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="21" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="31" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="41" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="51" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="61" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="71" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="81" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="91" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="101" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="111" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="121" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="131" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="141" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="151" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="161" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="171" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="181" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="191" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="201" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="211" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="221" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="231" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="241" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="251" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="261" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="271" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="281" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="291" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="301" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="311" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="321" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="331" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="341" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="351" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="361" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="371" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="381" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="391" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="401" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="411" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="421" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="431" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="441" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="451" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="461" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="471" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="481" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="491" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="501" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="511" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="521" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="531" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="541" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="551" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="561" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="571" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="581" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="591" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="601" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="611" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="621" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="631" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="641" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="651" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="661" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="671" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="681" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="691" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="701" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="711" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="721" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="731" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="741" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="751" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="761" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="771" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="781" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="791" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="801" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="811" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="821" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="831" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="841" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="851" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="861" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect><rect x="871" y="481" width="10" height="30" class="cell" style="fill:rgb(255, 178.5, 178.5);" data-v-c91d4a34></rect><rect x="881" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 255, 178.5);" data-v-c91d4a34></rect><rect x="891" y="481" width="10" height="30" class="cell" style="fill:rgb(178.5, 178.5, 255);" data-v-c91d4a34></rect></svg></div><div class="text-center text-sm text-red-600" data-v-c91d4a34> 현재 환경에서는 이 렌더링 방식을 지원하지 않습니다.<br data-v-c91d4a34> 미리 렌더링된 글리프를 확인할 수 있지만, 직접 입력한 텍스트에 대한 렌더링 결과는 볼 수 없습니다. </div></div><div style="font-palette:--fontname--913515245-undefined-palette;" class="w-fit max-w-full mx-auto bg-white px-2"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Pretendard Variable</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서는 서브픽셀 렌더링이 적용된 래스터화된 글리프를 확인할 수
있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>위쪽에서는 일반적인 서브픽셀 렌더링이 적용된 글리프를 확인할 수
있습니다.
래스터화된 글리프의 왼쪽 경계는 빨간색으로, 오른쪽 경계는 파란색으로 약간 번져
보이는 것을 알 수 있습니다.
중간에서는 실제 각 픽셀을 RGB 서브픽셀로 나누고 실제 LCD 디스플레이에서
보이는 것과 유사하게 표현했습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이 경우, 래스터화된 글리프의 곡선이 눈에 띄게 부드럽게 표현된다는 것을 확인할
수 있습니다.
이처럼 서브픽셀 렌더링은 저해상도 디스플레이에서 글리프의 가독성을 크게
향상합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>하지만 서브픽셀 렌더링은 색상 번짐 현상을 유발할 수 있습니다.
텍스트 경계에 미세한 색상 테두리가 보일 수 있으며, 특히 검은 배경에 흰색
텍스트에서 두드러집니다.
또한 RGB 배열이 아닌 PenTile이나 RGBW 같은 서브픽셀 구조를 가진 OLED
디스플레이에서는 오히려 글리프가 왜곡될 수 있으므로 주의해야 합니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="84-힌팅hinting"><a class="hover:text-teal-800" href="#84-힌팅hinting">8.4. 힌팅(Hinting)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>저해상도 디스플레이에서는 래스터화 시 왜곡이 심하게 발생할 수 있습니다.
특히 글리프가 픽셀 경계에 걸치면 형태가 크게 왜곡됩니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>힌팅은 글리프가 픽셀에 잘 맞도록 조정하는 정보를 폰트 파일에 포함하는
기술입니다.
힌팅 정보는 특정 크기에서 글리프의 줄기 두께, 대칭성, 정렬 등을 유지하도록
지시합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>힌팅은 주로 저해상도 디스플레이나 작은 폰트 크기에서 효과가 큽니다.
고해상도 디스플레이에서는 픽셀 밀도가 높아 힌팅의 영향이 상대적으로 적습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div class="flex flex-col items-center gap-2 mb-2 max-w-full mx-auto" data-v-c91d4a34><div class="w-full max-w-full" data-v-c91d4a34><svg xmlns="http://www.w3.org/2000/svg" class="h-full max-h-60 w-full" viewBox="0 0 2 2" data-v-c91d4a34></svg></div></div><div class="flex flex-col items-center gap-2 mb-2 max-w-full mx-auto" data-v-c91d4a34><div class="w-full max-w-full" data-v-c91d4a34><svg xmlns="http://www.w3.org/2000/svg" class="h-full max-h-60 w-full" viewBox="0 0 2 2" data-v-c91d4a34></svg></div></div><div style="font-palette:--fontname--913515245-undefined-palette;" class="w-fit max-w-full mx-auto bg-white px-2"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2">Pretendard Variable</div></div><div class="text-center text-gray-500 dark:text-gray-500">텍스트를 직접 수정하며 확인해 보세요.</div></div>
<p class="my-2 text-pretty" data-v-9880527e>위 예시에서는 위쪽 영역에는 힌팅을 적용하여 래스터화된 글리프를, 중간에는
힌팅을 적용하지 않은 글리프를 확인할 수 있습니다.
힌팅이 적용된 글리프가 픽셀 경계에 더 잘 맞춰져서 형태가 더 명확하게 유지되는
것을 알 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>폰트 형식에 따라 힌팅 지원 수준이 다릅니다.
TTF 폰트가 OTF 폰트보다 힌팅 정보를 더 잘 지원합니다.
TrueType은 힌팅을 위한 명령어 세트를 제공하는 반면, PostScript 기반 OTF는 더
간단한 힌팅 방식을 사용합니다.
따라서 저해상도 환경을 고려해야 하는 경우라면 TTF 폰트를 선택하는 것이
좋습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="85-렌더링-엔진"><a class="hover:text-teal-800" href="#85-렌더링-엔진">8.5. 렌더링 엔진</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>렌더링 엔진은 폰트를 화면에 표시하는 소프트웨어입니다.
운영체제나 브라우저의 렌더링 엔진이 렌더링 방식을 결정합니다.
여기서는 Windows와 macOS의 렌더링 방식을 비교해 보겠습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>Windows는 클리어타입(ClearType)이라는 서브픽셀 렌더링을 사용하여 가독성을
최적화합니다.
1998년 Microsoft가 개발한 ClearType은 RGB LCD 디스플레이의 서브픽셀을 활용하여
텍스트를 더 선명하게 표현합니다.
특히 저해상도 디스플레이나 작은 폰트 크기에서 가독성이 크게 향상되며,
힌팅 정보를 적극적으로 활용합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>하지만 ClearType은 RGB 배열에 최적화되어 있어, 다른 서브픽셀 배열을 가진
디스플레이에서는 색상 번짐이나 왜곡이 발생할 수 있습니다.
또한 가독성을 우선시하기 때문에 글리프의 원래 형태가 다소 변형될 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>macOS는 Mojave 이후 서브픽셀 렌더링을 중단하고, 회색조 안티앨리어싱을
사용합니다.
이전 버전에서는 서브픽셀 렌더링을 사용했지만, Retina 디스플레이의 보급과 함께
단순한 회색조 방식으로 전환했습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>macOS의 렌더링 철학은 폰트의 원래 모양을 최대한 유지하는 것입니다.
디자이너가 의도한 글리프 형태를 충실히 재현하며, 고해상도 디스플레이에
최적화되어 있습니다.
따라서 힌팅 정보가 포함된 폰트라도 macOS에서는 힌팅이 적용되지 않습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>결과적으로 Windows는 가독성과 선명함을, macOS는 디자인 충실도를 우선시합니다.
Windows에서는 작은 크기의 텍스트가 더 읽기 쉽지만, macOS에서는 폰트 본연의
아름다움이 더 잘 드러납니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">구분</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">Windows</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">macOS</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">렌더링 방식</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">클리어타입</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">회색조 안티앨리어싱</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">서브픽셀 렌더링</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">사용</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">미사용(Mojave 이후)</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">힌팅 적용</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">적용</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">미적용</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">렌더링 철학</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">가독성 우선</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">디자인 충실도 우선</td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">특징</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">선명하고 읽기 쉬움, 형태 변형 가능</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">폰트 본연의 형태, 고해상도 최적화</td></tr></tbody></table></div>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="9-인코딩encoding"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#9-인코딩encoding">9. 인코딩(Encoding)</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>폰트에 대해 더 깊이 이해하려면 텍스트를 빼놓고 설명할 수 없습니다.
폰트는 텍스트를 시각적으로 표현하는 도구이기 때문입니다.
여기서부터는 디지털 환경에서 텍스트가 어떻게 표현되고 처리되는지에 대해 간단히
살펴보겠습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="91-문자-인코딩character-encoding"><a class="hover:text-teal-800" href="#91-문자-인코딩character-encoding">9.1. 문자 인코딩(Character Encoding)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>컴퓨터는 모든 데이터를 숫자로 처리합니다.
컴퓨터가 문자를 다룰 때도 마찬가지로, 각 문자에 고유한 숫자를 할당하여 컴퓨터가
인식하고 처리할 수 있도록 해야 합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>문자와 숫자의 대응 관계를 정의하여 컴퓨터가 문자를 이해할 수 있도록 하는 체계가
바로 문자 인코딩입니다.
예를 들어, ASCII라는 문자 인코딩에서 대문자 &#39;A&#39;는 65라는 숫자에 대응하도록
정의되어 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이러한 문자 인코딩은 여러 가지가 존재하며, 인코딩마다 문자를 숫자로 매핑하는
방식이 다릅니다.
한글을 지원하는 주요 문자 인코딩으로는 CP949, UTF-8이 있습니다.
같은 문자라도 문자 인코딩에 따라 다른 숫자 값으로 표현되므로, 어떤 텍스트를
컴퓨터가 해석할 때는 텍스트가 어떤 문자 인코딩으로 작성되었는지 알아야 합니다.</p>
<div class="max-w-full overflow-x-auto"><table class="mx-auto my-2 table-auto border-collapse border border-gray-300 dark:border-gray-700"><thead class="bg-gray-100 dark:bg-gray-800" style="--v255875d0:#e5e7eb;--v255884d4:#4b5563;" data-v-a4655b9c><tr class="text-pretty"><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">문자</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">ASCII</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">CP949</th><th class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">UTF-8</th></tr></thead><tbody style="--b230077a:#f9fafb;--v361793cf:#1f2937;" data-v-a0502667><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">A</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x41</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x41</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x41</code></td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">B</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x42</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x42</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x42</code></td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">1</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x31</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x31</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x31</code></td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">2</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x32</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x32</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x32</code></td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">안</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">-</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xBE</code> <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xC8</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xEC</code> <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x95</code> <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x88</code></td></tr><tr class="text-pretty"><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><strong class="font-bold dark:font-extrabold">녕</strong></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;">-</td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xB3</code> <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xE7</code></td><td class="border border-gray-300 px-4 py-2 dark:border-gray-700" style="text-align:center;"><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xEB</code> <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x85</code> <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x95</code></td></tr></tbody></table></div>
<p class="my-2 text-pretty" data-v-9880527e>위 표는 각 문자가 ASCII, CP949, UTF-8 문자 인코딩에서 어떻게 숫자로
표현되는지 보여줍니다. 각 인코딩에서 대응하는 숫자는 16진수(Hexadecimal)로
표기되어 있습니다.
따라서 위 표에서 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x41</code>은 16진수로, 10진수 65를 의미합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>알파벳과 숫자는 ASCII, CP949, UTF-8 모두에서 동일한 숫자로 표현된다는 점이
우선 눈에 띕니다.
이는 대부분의 문자 인코딩이 ASCII와 호환되도록 설계되었기 때문입니다.
따라서 로마자 알파벳과 숫자는 대부분의 문자 인코딩에서 동일한 숫자로
표현됩니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>반면, 한글은 문자 인코딩마다 다른 숫자로 표현됩니다.
ASCII에서는 한글을 표현할 수 없습니다. 따라서 한글은 CP949와 UTF-8에서만
표현할 수 있습니다.
CP949에서는 한글을 표현하기 위해 숫자 2개를 사용해야 합니다. 위 표에서는
&#39;안&#39;을 표현하기 위해 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xBE</code>, <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xC8</code> 두 개의 숫자를 사용하고 있습니다.
그런데 UTF-8에서는 한글을 표현하기 위해 숫자 3개를 사용합니다. 똑같이 &#39;안&#39;을
표현하기 위해 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xEC</code>, <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x95</code>, <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x88</code>을 사용하고 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>아마 자기소개서처럼 텍스트 길이의 제한이 있는 글을 작성할 때, 한글은 2바이트로
알파벳이나 숫자보다 더 많은 공간을 차지한다는 사실을 경험해 보셨을 것입니다.
이는 문자 인코딩에서 한글을 나타내기 위해 알파벳과 숫자보다 더 많은 숫자를
사용하도록 정의되어 있기 때문에 그렇습니다.
만약 입력받는 텍스트의 문자 인코딩으로 CP949를 사용하는 경우라면 한글 한 문자는
2바이트로, UTF-8을 사용하는 경우라면 3바이트로 계산하게 되는 것입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>현재는 대부분의 상황에서 UTF-8 문자 인코딩을 사용하고 있지만, Windows 환경에서
한국어를 사용할 때 CP949 문자 인코딩으로 작성된 텍스트를 접할 가능성이 여전히
있습니다.
따라서 텍스트를 다룰 때는 해당 텍스트가 어떤 문자 인코딩으로 작성되었는지
반드시 확인해야 합니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="92-유니코드unicode"><a class="hover:text-teal-800" href="#92-유니코드unicode">9.2. 유니코드(Unicode)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>UTF-8 문자 인코딩을 설명하면서 UTF-8에서는 한글 한 문자를 표현하기 위해 숫자
3개를 사용한다고 설명했습니다.
하지만 이는 엄밀히 말하면 틀린 설명입니다.
UTF-8에서 문자와 숫자를 대응하는 과정에서, 1바이트보다 큰 숫자를 사용해야 하는
경우에 처리하기 위한 규칙이 따로 존재할 뿐입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>UTF-8 문자 인코딩은 유니코드라고 하는 문자와 숫자의 대응 체계를 기반으로 합니다.
유니코드는 각 문자에 고유한 코드 포인트(Code point)를 할당합니다.
그리고 이 코드 포인트를 실제로 저장하고 전송하기 위한 인코딩 방식 중의 하나가
UTF-8인 것입니다.
유니코드의 코드 포인트를 사용하는 문자 인코딩은 UTF-8 외에도 UTF-16, UTF-32
등이 있지만, 대부분의 상황에서는 UTF-8이 사용되고 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>위에서 예를 들었던 &#39;안&#39;, &#39;녕&#39; 이라는 문자는 유니코드에서 각각 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xC548</code>,
<code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xB155</code>라는 코드 포인트가 할당되어 있습니다.
유니코드에는 2025년 11월 현재 297,334개의 문자가 할당되어 있으며, 사실상
전 세계의 모든 문자, 기호, 이모지 등을 모두 포함하고 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>현재 대부분의 시스템에서 텍스트를 표현할 때 인코딩은 약간 달라도 유니코드를
사용하므로 문자가 깨지는 현상을 거의 발생하지 않습니다.
예를 들어, Windows와 macOS 모두 파일을 저장할 때, 파일명에 유니코드를 사용하여
저장합니다.
그런데, macOS에서 Windows로 한글 파일명을 가진 파일을 전송해 보면 Windows에서
파일명이 이상하게 표현되는 현상을 확인할 수 있습니다.
두 운영체제 모두 동일하게 유니코드를 사용하는데 왜 이런 일이 발생하는 걸까요?</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Windows의 파일명</strong>: &#39;안녕.txt&#39;</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">macOS의 파일명</strong>: &#39;안녕.txt&#39;</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Windows에서 본 macOS의 파일명</strong>:
&#39;ᄋᅠᅟᅡᅟᅠᆫᄂᅠᅟᅧᅟᅠᆼ.txt&#39;
(???)</li>
</ul>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="93-유니코드-정규화unicode-normalization"><a class="hover:text-teal-800" href="#93-유니코드-정규화unicode-normalization">9.3. 유니코드 정규화(Unicode Normalization)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>유니코드에서는 한글을 표현하는 다음의 두 가지 방법이 존재합니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">완성형</strong>: 한글 한 문자를 하나의 코드 포인트로 표현
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>예시
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;안&#39;</strong>: <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xC548</code>(안)</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;녕&#39;</strong>: <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xB155</code>(녕)</li>
</ul>
</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">조합형</strong>: 한글 한 문자를 초성, 중성, 종성 코드 포인트의 조합으로 표현
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>예시
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;안&#39;</strong>: <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x110B</code>(ᄋ) + <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x1161</code>(ᅡ) + <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x11AB</code>(ᆫ)</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">&#39;녕&#39;</strong>: <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x1102</code>(ᄂ) + <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x1167</code>(ᅧ) + <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0x11BC</code>(ᆼ)</li>
</ul>
</li>
</ul>
</li>
</ul>
<p class="my-2 text-pretty" data-v-9880527e>macOS는 한글 파일명을 조합형으로 저장하고, Windows는 한글 파일명을 완성형으로
저장합니다.
따라서 Windows에서 macOS에서 작성한 한글 파일명을 볼 때에는 Windows에서는
사용하지 않는 조합형 한글로 보이게 되는 것입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>그런데, 이상한 점이 있습니다.
조합형 한글도 유니코드 표준에 정의된 문자이므로, Windows에서도 조합형 한글을
정상적으로 표시할 수 있어야 합니다.
Windows 탐색기의 파일명에서는 왜 조합형 한글을 합쳐서 하나의 문자로 표시하지
않고 모든 자모를 풀어서 보여주는 걸까요?</p>
<p class="my-2 text-pretty" data-v-9880527e><a href="https://devblogs.microsoft.com/oldnewthing/20201009-00/?p=104351&amp;utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Microsoft 개발 블로그의 글</a>에서
그 이유를 짐작해 볼 수 있습니다.
Windows 탐색기에서는 KS X 1026 표준을 이유로 조합형 한글을 합쳐서 표시하지
않는다고 합니다.<sup><a href="#user-content-fn-4" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" id="user-content-fnref-4" data-footnote-ref="true" aria-describedby="footnote-label">4</a></sup>
따라서 Windows 탐색기에서 조합형 한글을 제대로 표시하려면, 조합형 한글을
완성형 한글로 변환하는 과정을 거쳐야 합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>유니코드에서는 이러한 과정을 정규화(Normalization)라는 방법으로 제공하고
있습니다.
유니코드 정규화는 같은 문자를 표현하는 여러 방법이 있을 때, 해당 문자를 특정
방법으로 표현하도록 변환하는 방법입니다.
유니코드 정규화 중 NFC(Normalization Form C)를 사용하면 조합형 한글을 완성형
한글로 변환할 수 있고, NFD(Normalization Form D)를 사용하면 완성형 한글을
조합형 한글로 변환할 수 있습니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>완성형 한글 → 유니코드 정규화(NFD) → 조합형 한글</li>
<li class="ms-6 text-pretty" data-v-09555c0e>조합형 한글 → 유니코드 정규화(NFC) → 완성형 한글</li>
</ul>
<p class="my-2 text-pretty" data-v-9880527e>따라서 서로 다른 운영체제 간의 파일 교환이 빈번한 환경이라면, 파일명을 유니코드
정규화(NFC)로 변환하여 저장하는 것이 좋습니다.
이를 통해 조합형 한글과 완성형 한글로 인한 파일명 깨짐 현상을 방지할 수
있습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="94-제어-문자control-characters"><a class="hover:text-teal-800" href="#94-제어-문자control-characters">9.4. 제어 문자(Control Characters)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>폰트를 사용할 때, 텍스트에 사용하는 모든 문자에는 대응하는 글리프가 존재할
것이라고 생각할 수 있습니다.
그러나, 디지털 환경에서 텍스트에 사용하는 문자 중에는 글리프로 표현되지 않고,
특수한 역할을 하는 문자들이 존재합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>가장 대표적인 예가 줄바꿈입니다.
여러 줄에 걸쳐 텍스트를 작성하기 위해서는 줄바꿈이 필수적입니다.
그러나 이러한 줄바꿈은 우리 눈에 글리프라는 형태로 보이지 않습니다.
하지만 컴퓨터는 이러한 줄바꿈을 특정한 문자로서 인식하고 처리합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이러한 특수한 문자들을 제어 문자라고 부릅니다.
줄바꿈과 관련된 제어 문자는 아래의 두 가지입니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Line Feed(LF)</strong>: 텍스트의 한 줄이 끝나고 다음 줄로 넘어가도록 지시</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Carriage Return(CR)</strong>: 커서를 현재 줄의 맨 앞으로 이동시키도록 지시</li>
</ul>
<p class="my-2 text-pretty" data-v-9880527e>위 두 문자를 적절히 사용하면 텍스트의 줄바꿈을 표현할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>여기서 두 문자를 &#39;적절히&#39; 사용한다고 표현한 이유는, 텍스트를 사용하는 환경에
따라 어떤 제어 문자를 사용해야 하는지가 달라지기 때문입니다.
대부분의 상황에서는 줄바꿈을 표현하기 위해 LF 문자 하나만 사용하면 충분합니다.
그러나 Windows의 텍스트 파일에서는 줄바꿈을 표현하기 위해 CR 문자와 LF 문자를
함께 사용해야 합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이러한 이유로 인해 위에서 설명한 macOS와 Windows 간의 파일명 깨짐 현상과
마찬가지로 다른 운영체제에서 작성한 텍스트 파일(<code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">.txt</code>)을 열 때 줄바꿈이 제대로
표시되지 않는 현상이 발생할 수 있습니다.<sup><a href="#user-content-fn-5" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" id="user-content-fnref-5" data-footnote-ref="true" aria-describedby="footnote-label">5</a></sup></p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="95-private-use-area-pua"><a class="hover:text-teal-800" href="#95-private-use-area-pua">9.5. Private Use Area (PUA)</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>위에서 언급했던 아이콘 폰트처럼 특수한 글리프를 표현하기 위해서는 어떤 문자에
아이콘 글리프를 대응시켜야 할까요?
집 모양 아이콘을 글리프로 사용할 때는 집 이모지(🏠)에 할당하면 될까요?</p>
<p class="my-2 text-pretty" data-v-9880527e>물론 집 모양 아이콘을 집 이모지에 대응시켜 사용할 수도 있습니다.
그러나 표현하고자 하는 모든 아이콘에 대응하는 이모지는 존재하지 않을 것이고,
아예 아이콘이 아니라 완전히 다른 기호, 새로운 언어 등을 표현하기 위한 폰트를
만들어야 한다면 완전히 다른 코드 포인트를 사용하는 게 더 좋을 것입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>유니코드에는 Private Use Area라는 영역을 만들어두고, 개인이 자유롭게 원하는
용도로 사용할 수 있도록 하고 있습니다.
PUA 영역은 유니코드 표준에서 공식적으로 할당된 문자가 아니므로, 시스템이나
소프트웨어마다 다르게 해석될 수 있습니다.</p>
<div class="my-8"><div class="bg-gray-100 dark:bg-gray-800 p-2 mb-4"><div style="font-palette:--fontname-1786832060-undefined-palette;" class="w-fit max-w-full mx-auto"><div role="status" class="mx-auto h-8 w-8"><svg aria-hidden="true" class="animate-spin fill-teal-500 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path></svg><span class="sr-only">Loading...</span></div></div><div class="text-center mt-2"><p class="my-2 text-pretty" data-v-9880527e>Material Icons Round</p></div></div></div>
<p class="my-2 text-pretty" data-v-9880527e>실제로 Material Icons Round는 PUA 영역의 코드 포인트에 아이콘 글리프를 할당한
아이콘 폰트입니다.
위 예시에서는 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xE8B6</code>, <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xE88A</code>, <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xE5D2</code>, <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">0xE5CD</code> 코드 포인트에 각각
아이콘을 할당하여 표시하고 있습니다.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="10-폰트-라이선스font-license"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#10-폰트-라이선스font-license">10. 폰트 라이선스(Font License)</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>폰트를 사용하여 어떠한 작업을 할 때에는 해당 폰트를 사용할 수 있는 권한이
있는지 반드시 확인해야 합니다.
폰트는 저작권법으로 보호되는 저작물이며, 폰트 제작자나 배포처가 정한
라이선스 조건에 따라 사용해야 합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>폰트의 라이선스는 폰트마다 다르며, 동일한 폰트라도 사용 목적에 따라
다른 조건이 적용될 수 있습니다.
따라서 폰트를 사용하기 전에 반드시 해당 폰트의 라이선스를 확인하고, 자신이
사용하고자 하는 목적과 방법 등에 맞는지 꼼꼼히 살펴보아야 합니다.</p>
<blockquote class="my-2 bg-teal-100 px-3 py-2 dark:bg-teal-900 dark:text-gray-100">
<p class="my-2 text-pretty" data-v-9880527e>주의: 이 글에서는 폰트 라이선스에 대한 일반적인 정보를 제공할 뿐,
법적인 조언을 제공하지 않습니다.
특정 폰트의 라이선스 조건에 대해 궁금한 점이 있거나, 법적인 문제가
발생한 경우에는 반드시 전문가의 조언을 구하시기 바랍니다.</p>
</blockquote>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="101-주요-확인-사항"><a class="hover:text-teal-800" href="#101-주요-확인-사항">10.1. 주요 확인 사항</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>폰트를 사용할 때 가장 주의 깊게 살펴보아야 할 라이선스 조건은 다음과 같습니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 폰트를 사용하고자 하는 목적
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">예시</strong>: 개인용, 상업용, 데스크톱, 웹, 앱, 전자책 등</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 폰트를 문서, 웹사이트, 앱 등에 직접 포함해 사용하는 것
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">예시</strong>: PDF 문서에 폰트 포함, 웹페이지에서 웹폰트로 사용, 앱에 폰트 포함
등</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 폰트 파일을 다른 사람에게 배포하는 것
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">예시</strong>: 폰트 파일을 다운로드 링크로 제공, 폰트 파일을 포함한 소프트웨어
배포 등</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 폰트 파일을 수정하거나 변형하는 것
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">예시</strong>: 글리프를 추가하거나 변경, 폰트 메타데이터 수정 등</li>
</ul>
</li>
</ul>
<p class="my-2 text-pretty" data-v-9880527e>각 폰트의 라이선스 조건은 매우 다양하므로, 위 사항들에 대해 꼼꼼히
확인하는 것이 중요합니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="102-대표적인-폰트-라이선스"><a class="hover:text-teal-800" href="#102-대표적인-폰트-라이선스">10.2. 대표적인 폰트 라이선스</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>다행히도 많은 무료 폰트는 널리 알려진 라이선스를 채택하고 있으므로, 해당
라이선스에 대한 정보를 찾아보는 것도 좋은 방법입니다.
여기서는 몇 가지 대표적인 폰트 라이선스를 소개합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이 글에서 설명하는 내용은 라이선스의 주요 특징을 간략히 요약한 것이며,
정확한 라이선스 조건은 각 라이선스의 공식 문서를 반드시 참고하시기 바랍니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">SIL Open Font License (OFL)</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>SIL International에서 제공하는 오픈소스 폰트 라이선스</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 개인용, 상업용 모두 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 수정하지 않은 폰트 파일은 자유롭게 재배포 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 수정된 폰트를 재배포할 때는 OFL로 배포해야 함</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">주의사항</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>폰트 자체를 단독으로 판매할 수 없음</li>
<li class="ms-6 text-pretty" data-v-09555c0e>수정된 폰트는 원본과 다른 이름으로 배포해야 함</li>
</ul>
</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Apache License 2.0</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>Apache Software Foundation에서 제공하는 오픈소스 라이선스</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 개인용, 상업용 모두 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 자유롭게 재배포 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 자유롭게 수정 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">주의사항</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>변경 사항을 명시해야 함</li>
<li class="ms-6 text-pretty" data-v-09555c0e>라이선스 사본을 포함해야 함</li>
</ul>
</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">공공누리(KOGL) 제1유형 (출처표시)</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>대한민국 정부에서 제공하는 공공저작물 라이선스</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 개인용, 상업용 모두 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 자유롭게 재배포 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 자유롭게 수정 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">주의사항</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>출처를 반드시 표시해야 함</li>
</ul>
</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">공공누리(KOGL) 제2유형 (출처표시 + 상업적 이용금지)</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>대한민국 정부에서 제공하는 공공저작물 라이선스</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 개인용만 허용, 상업용 불가</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 자유롭게 재배포 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 자유롭게 수정 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">주의사항</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>출처를 반드시 표시해야 함</li>
</ul>
</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">공공누리(KOGL) 제3유형 (출처표시 + 변경금지)</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>대한민국 정부에서 제공하는 공공저작물 라이선스</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 개인용, 상업용 모두 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 자유롭게 재배포 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 수정 불가</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">주의사항</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>출처를 반드시 표시해야 함</li>
</ul>
</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">공공누리(KOGL) 제4유형 (출처표시 + 상업적 이용금지 + 변경금지)</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>대한민국 정부에서 제공하는 공공저작물 라이선스</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 개인용만 허용, 상업용 불가</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 자유롭게 재배포 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 수정 불가</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">주의사항</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>출처를 반드시 표시해야 함</li>
</ul>
</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">Public Domain</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>저작권이 만료되었거나, 저작권자가 저작물을 공공에 기증한 상태</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">사용 목적</strong>: 개인용, 상업용 모두 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">임베딩</strong>: 허용</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">재배포</strong>: 자유롭게 재배포 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">수정</strong>: 자유롭게 수정 가능</li>
<li class="ms-6 text-pretty" data-v-09555c0e><strong class="font-bold dark:font-extrabold">주의사항</strong>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>특별한 주의사항 없음</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="11-마치며"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#11-마치며">11. 마치며</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>지금까지 폰트의 기본 개념부터 렌더링, 인코딩, 라이선스에 이르기까지 다양한
주제를 다루어보았습니다.
웹 폰트와 관련된 더 자세한 내용을 추후 작성될 별도 글에서 다룰 예정이니,
많은 관심 부탁드립니다.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="12-이-글에서-사용한-폰트"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#12-이-글에서-사용한-폰트">12. 이 글에서 사용한 폰트</a></h2>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>Adobe NotDef: <a href="https://github.com/adobe-fonts/adobe-notdef?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/adobe-fonts/adobe-notdef</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Auseklis: <a href="https://www.dafont.com/auseklis.font?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://www.dafont.com/auseklis.font</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>D2 Coding: <a href="https://github.com/naver/d2codingfont?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/naver/d2codingfont</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Geologica: <a href="https://github.com/googlefonts/geologica?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/googlefonts/geologica</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Hymnus FG: <a href="https://www.dafont.com/hymnus-fg.font?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://www.dafont.com/hymnus-fg.font</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Jost*: <a href="https://indestructibletype.com/Jost.html?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://indestructibletype.com/Jost.html</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Libre Barcode: <a href="https://github.com/graphicore/librebarcode?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/graphicore/librebarcode</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Material Icons: <a href="https://github.com/marella/material-icons?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/marella/material-icons</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Noto Color Emoji: <a href="https://github.com/googlefonts/noto-emoji?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/googlefonts/noto-emoji</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Noto Sans CJK: <a href="https://github.com/notofonts/noto-cjk?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/notofonts/noto-cjk</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Pretendard: <a href="https://github.com/orioncactus/pretendard?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/orioncactus/pretendard</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Roboto Flex: <a href="https://github.com/googlefonts/roboto-flex?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/googlefonts/roboto-flex</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Rocher Color: <a href="https://www.harbortype.com/fonts/rocher-color/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://www.harbortype.com/fonts/rocher-color/</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Tangerine: <a href="https://tosche.net/fonts/tangerine?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://tosche.net/fonts/tangerine</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>Wanted Sans: <a href="https://github.com/wanteddev/wanted-sans?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/wanteddev/wanted-sans</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e>나눔명조: <a href="https://hangeul.naver.com/font/nanum?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://hangeul.naver.com/font/nanum</a></li>
</ul>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="13-참고자료"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#13-참고자료">13. 참고자료</a></h2>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://devblogs.microsoft.com/oldnewthing/20201009-00/?p=104351&amp;utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">A consequence of being the first to adopt a standard is that you may end up being the only one to adopt it: The sad story of Korean jamo - The Old New Thing</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://learn.microsoft.com/en-us/windows/win32/intl/character-sets-used-in-file-names?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Character Sets Used in File Names - Win32 apps | Microsoft Learn</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://css-tricks.com/colrv1-and-css-font-palette-web-typography/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">COLRv1 and CSS font-palette | CSS-Tricks</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://fonts.google.com/knowledge?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Fonts Knowledge - Google Fonts</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://developer.apple.com/documentation/fskit/fsfilename?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">FSFileName | Apple Developer Documentation</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://en.wikipedia.org/wiki/List_of_Unicode_characters?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">List of Unicode characters - Wikipedia</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://learn.microsoft.com/en-us/typography/opentype/spec/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">OpenType specification (OpenType 1.9.1) - Typography | Microsoft Learn</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://www.w3.org/TR/klreq/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Requirements for Hangul Text Layout and Typography : 한국어 텍스트 레이아웃 및 타이포그래피를 위한 요구사항</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://www.w3.org/TR/WOFF/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">WOFF File Format 1.0</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="https://www.w3.org/TR/WOFF2/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">WOFF File Format 2.0</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="http://koreantypography.org/wp-content/uploads/2016/08/kst_13_8_1_03.pdf.pdf?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">김병조. &quot;다국어 타이포그래피의 기술적 문제&quot; 글짜씨 8, no.1 (2016) : 54-83.</a></li>
<li class="ms-6 text-pretty" data-v-09555c0e><a href="http://typography-dictionary.kr/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">타이포그래피 사전</a></li>
</ul>
<section data-footnotes="true" class="footnotes"><h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="footnote-label" class="sr-only"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#footnote-label">Footnotes</a></h2>
<ol class="my-2 list-outside list-decimal">
<li class="ms-6 text-pretty" id="user-content-fn-1" data-v-09555c0e>
<p class="my-2 text-pretty" data-v-9880527e>Em Square는 Em Quad라고도 불리며, 단순히 Em이라고도 합니다.
이 글에서는 더 익숙하고 시각적으로 이해하기 쉬운 Em Square라는 용어를
사용하겠습니다. <a href="#user-content-fnref-1" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" data-footnote-backref aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
</li>
<li class="ms-6 text-pretty" id="user-content-fn-2" data-v-09555c0e>
<p class="my-2 text-pretty" data-v-9880527e>사실 Geologica는 별도의 이탤릭 스타일을 별도로 제공하지 않지만, Cursive
기능을 사용하여 유사한 효과를 낼 수 있습니다.
이 예시에서는 Cursive 기능과 오블리크를 함께 적용하여 이탤릭 스타일을
표현했습니다. <a href="#user-content-fnref-2" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" data-footnote-backref aria-label="Back to reference 2" class="data-footnote-backref">↩</a></p>
</li>
<li class="ms-6 text-pretty" id="user-content-fn-3" data-v-09555c0e>
<p class="my-2 text-pretty" data-v-9880527e>&#39;U+E88A&#39;는 더 뒤에서 설명할 유니코드 문자를 나타내는 방식이며, Private
Use Area (PUA) 영역에 속하는 문자입니다. <a href="#user-content-fnref-3" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" data-footnote-backref aria-label="Back to reference 3" class="data-footnote-backref">↩</a></p>
</li>
<li class="ms-6 text-pretty" id="user-content-fn-4" data-v-09555c0e>
<p class="my-2 text-pretty" data-v-9880527e>사실 Microsoft 포스트에 작성된 댓글의 내용을 참고해 보면, Microsoft가
표준의 내용을 잘못 이해한 것일 수도 있다는 의혹이 제기되고 있습니다. KS X
1026-1 표준과 Unicode UAX #29 표준에 따르면 조합형 한글을 합쳐서 표시하는
것이 맞습니다. <a href="#user-content-fnref-4" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" data-footnote-backref aria-label="Back to reference 4" class="data-footnote-backref">↩</a></p>
</li>
<li class="ms-6 text-pretty" id="user-content-fn-5" data-v-09555c0e>
<p class="my-2 text-pretty" data-v-9880527e>Windows 11의 메모장은 이제 자동으로 어떤 줄바꿈 문자를 사용했는지
인식하여 올바르게 표시합니다.
그러나 여전히 일부 텍스트 편집기에서는 줄바꿈 문자를 올바르게 처리하지 못하는
경우가 있으므로 주의해야 합니다. <a href="#user-content-fnref-5" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300" data-footnote-backref aria-label="Back to reference 5" class="data-footnote-backref">↩</a></p>
</li>
</ol>
</section></div>]]></content>
        <author>
            <name>Nesswit</name>
            <email>rishubil+blog@gmail.com</email>
            <uri>https://blog.update.sh/about</uri>
        </author>
    </entry>
    <entry>
        <title type="html"><![CDATA[레진코믹스 RSS로 구독하기]]></title>
        <id>https://blog.update.sh/posts/lezhin-rss</id>
        <link href="https://blog.update.sh/posts/lezhin-rss"/>
        <updated>2015-04-16T15:00:00.000Z</updated>
        <summary type="html"><![CDATA[RSS를 지원하지 않는 레진코믹스를 구독하기 위해 Python Flask로 RSS 제공 사이트를 직접 구현했습니다. HTML의 inline JavaScript를 파싱하여 만화 정보를 추출하고, multiprocessing으로 약 700개 만화와 60,000개 이상의 에피소드를 13분에서 2분으로 단축하여 수집한 뒤, SQLite에 저장하고 Atom 1.0과 RSS 2.0 피드로 제공했습니다.
]]></summary>
        <content type="html"><![CDATA[<div class="mdx-content leading-[1.6]" style="--v2806f315:0.875rem,[object Object],0.875rem,[object Object];--v67bf8b50:#6b7280;--v67bf83ce:#d1d5db;--v67bf878f:#9ca3af;--v67bf92d2:#374151;" data-v-ec58c90e><p class="my-2 text-pretty" data-v-9880527e>레진코믹스의 RSS를 제공하는 사이트를 만들었던 과정을 대략적으로 기록해 놓은
문서입니다.</p>
<blockquote class="my-2 bg-teal-100 px-3 py-2 dark:bg-teal-900 dark:text-gray-100">
<p class="my-2 text-pretty" data-v-9880527e>더이상 레진코믹스 RSS를 서비스하지 않습니다.<br>
<del>바쁜 사람들을 위한 한 줄 요약</del><br>
<del><a href="https://lezhin-rss.update.sh/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Lezhin Comics Feed</a>에서 구독하시면 됩니다.</del></p>
</blockquote>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="서론"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#서론">서론</a></h2>
<p class="my-2 text-pretty" data-v-9880527e><a href="http://www.lezhin.com/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">레진코믹스</a>라는 웹툰 사이트가 있습니다. 여러 작가들을
데려와서 유/무료 웹툰을 서비스하거나, 이미 출판된 만화도 가져와서 볼 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e><img class="mx-auto my-2 max-w-full" src="https://blog.update.sh/images/posts/20150417.lezhin-rss/a.png" alt="레진코믹스 메인 페이지">
(레진코믹스 메인페이지. 세월호 1주기가 스크린샷을 촬영한 날이었기에 로고에
노란 리본이 달려있습니다.)</p>
<p class="my-2 text-pretty" data-v-9880527e>네이버나 다음과 같은 포털에서 운영하는 웹툰 서비스와 비슷하지만, 적극적인
유료화 정책과, 나름 고수위(?)의 성인 컨텐츠를 제공하는 게 특징입니다. 얼마
전에는 무슨 일이 있었는지 정확하게는 모르겠지만
<a href="http://www.ddaily.co.kr/news/article.html?no=128613&amp;utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">레진코믹스 사이트를 방송통신위원회에서 차단</a>하면서
이래저래 말이 많이 나오고 있습니다. 저는 그거랑은 별개로, 레진코믹스에서
연재중인 레바툰이 이런 저런 커뮤니티 사이트들에 공유되면서 관심을 갖게
됐습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>저는 기본적으로 RSS 리더를 애용합니다. 주로 들어가는 블로그나 사이트 게시판
등등을 가능하면 RSS로 구독하여 받아보고 있습니다. 물론, 네이버나 다음 웹툰도
그렇게 하고 있습니다. 다음 웹툰 서비스는 자체적으로 RSS 구독이 가능하고,
네이버 웹툰은 <a href="http://ncf.suod.kr/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">링크</a>(<a href="http://hongminhee.org/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">홍민희</a>라는
분이 만드셨습니다. 파이썬 행사에서 뵌적이 있는것 같은 느낌이...) 에서 구독할
수 있습니다. 그러나 레진코믹스는 RSS 구독을 지원하지 않았고, 다른 사람이 만든
구독 사이트도 없는 것 같았습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e><a href="http://feed43.com/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Feed43</a>과 같은 RSS 자동 생성 사이트를 이용할 수도
있었겠지만, 네이버 웹툰 구독 사이트처럼 한번 만들어 보기로 했습니다. 아마
시험기간이라 공부 말고 열심히 할 딴짓이 필요했던 것 같습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>지원하리라 마음먹은 대략적인 기능은 아래와 같습니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>모든 구독은 RSS 2.0과 Atom 1.0을 복수 지원합니다.
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>사실 별 차이점은 없지만, 그냥 둘 다 지원하기로 했습니다. 굳이 고르자면
Atom이 더 낫지만...</li>
<li class="ms-6 text-pretty" data-v-09555c0e>레진코믹스의 API를 이용할 수 있다면 실시간 생성, 그렇지 않다면 매 시간마다
생성해서 캐시합니다</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e>개별 만화의 에피소드를 구독할 수 있습니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>새로 추가된 만화를 구독할 수 있습니다.
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>왜냐면 새롭게 추가된 만화중에 보석같은 만화가 있을지도 모르니까요?</li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e>구독할 수 있는 만화들을 보여주는 웹페이지를 만듭니다.
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>해당 페이지에서는 만화의 이름이나 작가의 이름으로 검색이 가능해야 합니다.</li>
</ul>
</li>
</ul>
<p class="my-2 text-pretty" data-v-9880527e>현재는 위의 기능을 모두 구현했습니다. 만들어진 구독 사이트는
<a href="http://kb.update.sh/lezhin-rss/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Lezhin Comics Feed</a>에서 볼 수 있습니다.
레진코믹스 API를 사용할 수는 없었으므로, 매 시간 정각에 구독정보를 업데이트
합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e><img class="mx-auto my-2 max-w-full" src="https://blog.update.sh/images/posts/20150417.lezhin-rss/b.png" alt="Lezhin Comics Feed 메인 페이지">
(Lezhin Comics Feed 메인 페이지)</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="구현"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#구현">구현</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>만들기로 마음을 먹은 김에 바로 작업에 들어갔습니다. 일단 웹사이트를 만들어야
하는데, 제가 다뤄본 웹 프레임워크는 Python <a href="http://flask.pocoo.org/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Flask</a>밖에
없어서 선택권이 딱히 없었습니다. 어차피 빠른 개발을 하려면 결국 Python을
선택하긴 했을 것 같습니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="만화-및-에피소드-정보-가져오기"><a class="hover:text-teal-800" href="#만화-및-에피소드-정보-가져오기">만화 및 에피소드 정보 가져오기</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>필요한 만화 및 에피소드 정보는 레진코믹스 웹사이트를 파싱해서 가져오면 될
것이라고 막연하게 생각했습니다. 그래서 레진코믹스 웹사이트를 켜서 이것 저것
봤는데... 분명히 동적으로 만화들을 처리하는데 ajax로 오고가는 데이터가
없었습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>자세히 보니, 처음 웹사이트의 html을 가져올 때, inline javascript로 만화나
에피소드 정보를 다 넣어서 받아오고 있었습니다! 이게 문제인게, 원래는 HTML을
파싱하거나, ajax call을 분석해서 API를 따라 쓰려고 했는데 이것이 불가능하다는
뜻이었습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>따라서, 적절하게 javascript를 파싱해서 만화 정보를 가져와야 했습니다. 우선은
<a href="http://docs.python-requests.org/en/latest/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">requests</a> 라이브러리를 이용하여
html을 가져와서, 이를 자체파싱(...)해서 사용했습니다. 이래저래 복잡하게 짤
수도 있겠지만, 딱히 퍼포먼스가 문제될 것 같지는 않았기에(물론 나중에 문제가
100% 생기겠지만) 제가 원하는 데이터의 시작 단어와 끝 단어를 기준으로 문자열을
잘라내어, json 처럼 취급했습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e><img class="mx-auto my-2 max-w-full" src="https://blog.update.sh/images/posts/20150417.lezhin-rss/c.png" alt="html의 inline javacript로 정보가 담겨 있다">
(html의 inline javacript로 정보가 담겨 있습니다)</p>
<p class="my-2 text-pretty" data-v-9880527e>그래서 이래저래 고생하긴 했지만, 깔끔하게 json을 뽑아낼 수 있었습니다. 뽑아낸
만화 및 에피소드 정보는 자체 API를 만들어 아래와 같이 사용할 수 있게 했습니다.</p>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>comics: <a href="http://kb.update.sh/lezhin-rss/api/comics?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">http://kb.update.sh/lezhin-rss/api/comics</a>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>예) <a href="http://kb.update.sh/lezhin-rss/api/comics?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">http://kb.update.sh/lezhin-rss/api/comics</a></li>
</ul>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e>episodes: <a href="http://kb.update.sh/lezhin-rss/api/episodes?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">http://kb.update.sh/lezhin-rss/api/episodes</a>
<ul class="my-2 list-outside list-disc">
<li class="ms-6 text-pretty" data-v-09555c0e>예) <a href="http://kb.update.sh/lezhin-rss/api/episodes/revatoon?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">http://kb.update.sh/lezhin-rss/api/episodes/revatoon</a></li>
</ul>
</li>
</ul>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="데이터-저장-및-업데이트"><a class="hover:text-teal-800" href="#데이터-저장-및-업데이트">데이터 저장 및 업데이트</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>얻어온 정보는 sqlite를 이용하여 저장해놓고 사용하기로 했습니다. 이는
<a href="https://pythonhosted.org/Flask-SQLAlchemy/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Flask-SQLAlchemy</a>를 통해 ORM으로
단순하게 해결했습니다. 만화와 에피소드에 맞는 모델만 적절하게 정의해놓으면
끝이었습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>문제는 업데이트에 있었습니다. 그냥 반복문을 돌면서 전체 만화와 에피소드를
가져오는 것은 시간이 너무 오래 걸렸습니다. (이 당시 만화는 약 700개,
에피소드는 약 60,000화 이상이었습니다. 당연히 오래 걸립니다.) 전체 만화와
에피소드 목록을 가져오는데 약 13분이 소요되었습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>대부분의 시간 소요는 네트워크 I/O 때문에 발생할 것이라 예측하고
<a href="https://docs.python.org/2/library/multiprocessing.html?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">multiprocessing</a>을
이용해서 8 프로세스로 동작하게 했습니다. 결과는 만족스러웠습니다. 2분
정도만에 모든 만화와 에피소드 목록을 가져올 수 있었습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e><img class="mx-auto my-2 max-w-full" src="https://blog.update.sh/images/posts/20150417.lezhin-rss/d.png" alt="8 프로세스로 동작해서 약 2분만에 모든 만화와 에피소드 정보를 가져올 수 있습니다">
(8 프로세스로 동작해서 약 2분만에 모든 만화와 에피소드 정보를 가져올 수 있습니다)</p>
<p class="my-2 text-pretty" data-v-9880527e>또, 레진코믹스의 웹 사이트 구조가 변경될 경우 업데이트가 정상적으로 이루어지지
않을 것입니다. 이 경우를 판단하기 위해 업데이트 중 파싱 에러가 발생할 경우
저에게 에러 정보를 gmail을 통해 보내도록 만들어 놓았습니다. 이젠 간단하게
cron에 매 시간 정각에 동작하도록 추가하면 끝입니다.</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="구독정보-생성"><a class="hover:text-teal-800" href="#구독정보-생성">구독정보 생성</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>만화 및 에피소드 정보를 모두 가져왔으니, 이젠 이를 Atom과 RSS로 만들어서
제공해야 합니다. Atom 1.0의 경우 Flask는 Werkzeug를 통해 동작하므로,
Werkzeug의
<a href="http://werkzeug.pocoo.org/docs/0.10/contrib/atom/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Atom Syndication</a> 문서를
통해 구현하면 됩니다. RSS 2.0은
<a href="http://www.dalkescientific.com/Python/PyRSS2Gen.html?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">PyRSS2Gen</a>을 통해
제공하기로 했습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e><img class="mx-auto my-2 max-w-full" src="https://blog.update.sh/images/posts/20150417.lezhin-rss/e.png" alt="Firefox로 열어본 Atom 구독정보">
(Firefox로 열어본 Atom 구독정보)</p>
<h3 class="my-4 text-balance text-2xl font-bold dark:font-extrabold" id="메인페이지-제작"><a class="hover:text-teal-800" href="#메인페이지-제작">메인페이지 제작</a></h3>
<p class="my-2 text-pretty" data-v-9880527e>사실 위의 작업보단 웹에서 구독할 수 있는 만화들을 보여주는 메인페이지 제작이
더 큰일이었습니다. 왜냐하면 제가 웹을 잘 못해서... 그래서 대충 대충 간단하게
끝냈습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>우선 JQuery와 Bootstrap을 써서 간단하게 틀을 잡고, 제목대로 만화를 정렬해서
페이지당 50개씩 보여주기로 했습니다. 이 작업을 하면서 처음으로
Flask-SQLAlchemy에서
<a href="http://pythonhosted.org/Flask-SQLAlchemy/api.html?utm_source=blog.update.sh&amp;utm_medium=content#flask.ext.sqlalchemy.BaseQuery.paginate" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">pagenate</a>라는걸
사용할 수 있다는 것을 알았습니다. 여태까지 페이지 작업하는 코드를 일일히
짜줬는데, pagenate를 사용하면 간단하게 해결 할 수 있습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>검색같은 경우에는 처음에는 <a href="https://pythonhosted.org/Whoosh/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Whoosh</a> 사용을
고려했지만, 한글 설정이 미묘했고, 굳이 많지 않은 제목과 작가 검색에 검색
엔진까지 붙여 사용할 필요성을 느끼지 못해 사용하지 않았습니다.</p>
<h2 class="my-6 text-balance text-3xl font-extrabold dark:font-black" id="결론"><a class="hover:text-teal-800 dark:hover:text-teal-400" href="#결론">결론</a></h2>
<p class="my-2 text-pretty" data-v-9880527e>결과적으로 사이트는 간단하게 완성할 수 있었습니다. 처음 목표로 했던 기능은
모두 구현했으므로, 특별히 이상이 생기지 않는 한 더 이상 건드릴 일은 없을겁니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>본 프로젝트의 전체 소스코드는 <a href="https://github.com/rishubil/lezhin-rss?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://github.com/rishubil/lezhin-rss</a> 에서
확인할 수 있습니다. 만약 이 프로젝트를 클론해서 직접 실행해보고 싶다면,
app/db 폴더를 생성하고, update.py 파일에서 mail 보내는 부분을 모두 지운 뒤,
update.py를 실행시켜 db를 생성하고, debug.py 파일로 임시 웹서버를 실행해보면
됩니다.</p></div>]]></content>
        <author>
            <name>Nesswit</name>
            <email>rishubil+blog@gmail.com</email>
            <uri>https://blog.update.sh/about</uri>
        </author>
    </entry>
    <entry>
        <title type="html"><![CDATA[Yosemite에서 Synergy 직접 빌드하여 사용하기]]></title>
        <id>https://blog.update.sh/posts/yosemite-synergy</id>
        <link href="https://blog.update.sh/posts/yosemite-synergy"/>
        <updated>2014-10-27T15:00:00.000Z</updated>
        <summary type="html"><![CDATA[유료화된 Synergy를 Github의 오픈소스 코드로 직접 빌드하려 했으나, OS X 10.10 Yosemite 환경에서 mac-sdk/identity 옵션, OSX_TARGET 변수, Qt Framework 경로 등 여러 빌드 오류가 발생했습니다. ext/toolchain/commands1.py 파일을 패치하여 OSX 버전 인식과 SDK 경로를 수정하고, brew로 설치한 Qt Framework 경로를 지정하여 최종적으로 빌드에 성공했습니다.
]]></summary>
        <content type="html"><![CDATA[<div class="mdx-content leading-[1.6]" style="--v2806f315:0.875rem,[object Object],0.875rem,[object Object];--v67bf8b50:#6b7280;--v67bf83ce:#d1d5db;--v67bf878f:#9ca3af;--v67bf92d2:#374151;" data-v-ec58c90e><p class="my-2 text-pretty" data-v-9880527e>멀티플랫폼간 마우스 및 키보드를 공유해주는 유명한 프로그램인
<a href="http://synergy-project.org/?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Synergy</a>가 어느새 유료화되었습니다. 다운로드
페이지로 가보면, 1인당 5달러를 결재하면 평생 사용할 수 있다... 라고는 합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>하지만 원래 Synergy는 오픈소스 프로젝트 입니다. 그것도 GNU 라이센스가 적용되어
있는 프로젝트입니다. 이는 <a href="https://github.com/synergy/synergy?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">Synergy의 Github 페이지</a>로
가보면 확인할 수 있습니다. 따라서 그냥 Github에 공개된 코드를 직접 빌드하여
사용하기로 했습니다. 작업한 환경은 OS X 10.10 Yosemite입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e><a href="http://synergy-project.org/wiki/Compiling?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">http://synergy-project.org/wiki/Compiling</a> 에 가보면 환경별 컴파일 방법이
간단하게 설명되어 있습니다. 따라서 저는 해당 내용을 따라서 Synergy를
컴파일해서 사용해 보기로 했습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>일단 필요한 의존성 모듈을 설치해야 합니다. 저는 brew를 이용해서 cmake, qt를
설치했습니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="shell" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="shell" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> brew</span><span style="color:#98C379;"> install</span><span style="color:#98C379;"> cmake</span></span>
<span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> brew</span><span style="color:#98C379;"> install</span><span style="color:#98C379;"> qt</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>의존성 모듈을 설치한 후에, 공식 문서에 나와있는 것과 같이 수행합니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="shell" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="shell" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> ./hm.sh</span><span style="color:#98C379;"> conf</span><span style="color:#D19A66;"> -g1</span></span><!--]--></code><!--]--></pre></figure>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="plain" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="plain" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span>Mapping command: conf -&gt; configure</span></span>
<span data-line><span>Running setup...</span></span>
<span data-line><span>Setup complete.</span></span>
<span data-line><span>Error: Arg missing: --mac-sdk &lt;version&gt;</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>그럼 위와 같은 오류가 발생합니다. mac sdk 옵션이 없어서 발생하는 오류인 듯
싶어 옵션을 주어 실행해봤습니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="shell" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="shell" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> ./hm.sh</span><span style="color:#98C379;"> conf</span><span style="color:#D19A66;"> -g1</span><span style="color:#D19A66;"> --mac-sdk</span><span style="color:#D19A66;"> 10.10</span></span><!--]--></code><!--]--></pre></figure>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="plain" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="plain" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span>Mapping command: conf -&gt; configure</span></span>
<span data-line><span>Error: Arg missing: --mac-identity &lt;name&gt;</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>이번에는 mac identity 옵션이 없다고 합니다. 그럼 줘봅니다. 일단 test라고
주었습니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="shell" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="shell" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> ./hm.sh</span><span style="color:#98C379;"> conf</span><span style="color:#D19A66;"> -g1</span><span style="color:#D19A66;"> --mac-sdk</span><span style="color:#D19A66;"> 10.10</span><span style="color:#D19A66;"> --mac-identity</span><span style="color:#98C379;"> test</span></span><!--]--></code><!--]--></pre></figure>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="plain" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="plain" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span>Mapping command: conf -&gt; configure</span></span>
<span data-line><span>cmake version 3.0.2</span></span>
<span data-line> </span>
<span data-line><span>CMake suite maintained and supported by Kitware (kitware.com/cmake).</span></span>
<span data-line><span>Creating dir: build/release</span></span>
<span data-line><span>Entering dir: build/release</span></span>
<span data-line><span>CMake command: cmake -G &quot;Unix Makefiles&quot; -DCMAKE_BUILD_TYPE=Release ../..</span></span>
<span data-line><span>-- The C compiler identification is AppleClang 6.0.0.6000054</span></span>
<span data-line><span>-- The CXX compiler identification is AppleClang 6.0.0.6000054</span></span>
<span data-line><span>(중간 생략)</span></span>
<span data-line><span>-- Looking for pthread_create in pthread</span></span>
<span data-line><span>-- Looking for pthread_create in pthread - found</span></span>
<span data-line><span>-- Found CURL: /usr/lib/libcurl.dylib (found version &quot;7.37.1&quot;)</span></span>
<span data-line><span>-- OSX_TARGET_MAJOR=</span></span>
<span data-line><span>-- OSX_TARGET_MINOR=</span></span>
<span data-line><span>CMake Error at CMakeLists.txt:168 (message):</span></span>
<span data-line><span>Mac OS X target must be 10.x</span></span>
<span data-line><span>-- Configuring incomplete, errors occurred!</span></span>
<span data-line><span>See also &quot;/Users/nesswit/Downloads/synergy-master/build/release/CMakeFiles/CMakeOutput.log&quot;.</span></span>
<span data-line><span>Going back to: /Users/nesswit/Downloads/synergy-master</span></span>
<span data-line><span>Error: CMake encountered error: 256</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>색다른 오류가 저를 반겼습니다. 보아하니 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">OSX_TARGET_MAJOR</code>와 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">OSX_TARGET_MINOR</code>
옵션이 적용이 되지 않은듯 합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이를 해결하기 위한 간단한 patch 파일을 작성했습니다. 자세한 내용은 아래와
같습니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="diff" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="diff" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">--- ./ext/toolchain/commands1.py	2014-10-27 15:53:52.000000000 +0900</span></span>
<span data-line><span style="color:#61AFEF;">+++ ./ext/toolchain/commands1-new.py	2014-10-28 17:51:52.000000000 +0900</span></span>
<span data-line><span style="color:#ABB2BF;">@@ -451,15 +451,16 @@</span></span>
<span data-line><span style="color:#ABB2BF;"> 			cmake_args += &#39; -DCMAKE_BUILD_TYPE=&#39; + target.capitalize()</span></span>
<span data-line> </span>
<span data-line><span style="color:#ABB2BF;"> 		elif sys.platform == &quot;darwin&quot;:</span></span>
<span data-line><span style="color:#E06C75;">-			macSdkMatch = re.match(&quot;(d+).(d+)&quot;, self.macSdk)</span></span>
<span data-line><span style="color:#E06C75;">-			if not macSdkMatch:</span></span>
<span data-line><span style="color:#E06C75;">-				raise Exception(&quot;unknown osx version: &quot; + self.macSdk)</span></span>
<span data-line><span style="color:#E06C75;">-</span></span>
<span data-line><span style="color:#ABB2BF;"> 			sdkDir = self.getMacSdkDir()</span></span>
<span data-line><span style="color:#ABB2BF;"> 			cmake_args += &quot; -DCMAKE_OSX_SYSROOT=&quot; + sdkDir</span></span>
<span data-line><span style="color:#ABB2BF;"> 			cmake_args += &quot; -DCMAKE_OSX_DEPLOYMENT_TARGET=&quot; + self.macSdk</span></span>
<span data-line><span style="color:#E06C75;">-			cmake_args += &quot; -DOSX_TARGET_MAJOR=&quot; + macSdkMatch.group(1)</span></span>
<span data-line><span style="color:#E06C75;">-			cmake_args += &quot; -DOSX_TARGET_MINOR=&quot; + macSdkMatch.group(2)</span></span>
<span data-line><span style="color:#98C379;">+</span></span>
<span data-line><span style="color:#98C379;">+		macSdkMatch = re.match(&quot;(d+).(d+)&quot;, self.macSdk)</span></span>
<span data-line><span style="color:#98C379;">+		if not macSdkMatch:</span></span>
<span data-line><span style="color:#98C379;">+			raise Exception(&quot;unknown osx version: &quot; + self.macSdk)</span></span>
<span data-line><span style="color:#98C379;">+</span></span>
<span data-line><span style="color:#98C379;">+		cmake_args += &quot; -DOSX_TARGET_MAJOR=&quot; + macSdkMatch.group(1)</span></span>
<span data-line><span style="color:#98C379;">+		cmake_args += &quot; -DOSX_TARGET_MINOR=&quot; + macSdkMatch.group(2)</span></span>
<span data-line> </span>
<span data-line><span style="color:#ABB2BF;"> 		# if not visual studio, use parent dir</span></span>
<span data-line><span style="color:#ABB2BF;"> 		sourceDir = generator.getSourceDir()</span></span>
<span data-line><span style="color:#ABB2BF;">@@ -485,10 +486,10 @@</span></span>
<span data-line><span style="color:#ABB2BF;"> 		if generator.cmakeName.find(&#39;Eclipse&#39;) != -1:</span></span>
<span data-line><span style="color:#ABB2BF;"> 			self.fixCmakeEclipseBug()</span></span>
<span data-line> </span>
<span data-line><span style="color:#E06C75;">-		# only on osx 10.9 mavericks.</span></span>
<span data-line><span style="color:#98C379;">+		# only on osx 10.9 mavericks and 10.10 yosemite.</span></span>
<span data-line><span style="color:#ABB2BF;"> 		# manually change .xcodeproj to add code sign for</span></span>
<span data-line><span style="color:#ABB2BF;"> 		# synmacph project and specify its info.plist</span></span>
<span data-line><span style="color:#E06C75;">-		if self.macSdk == &quot;10.9&quot; and generator.cmakeName.find(&#39;Xcode&#39;) != -1:</span></span>
<span data-line><span style="color:#98C379;">+		if (self.macSdk == &quot;10.9&quot; or self.macSdk == &quot;10.10&quot;) and generator.cmakeName.find(&#39;Xcode&#39;) != -1:</span></span>
<span data-line><span style="color:#ABB2BF;"> 			self.fixXcodeProject(target)</span></span>
<span data-line> </span>
<span data-line><span style="color:#ABB2BF;"> 		if err != 0:</span></span>
<span data-line><span style="color:#ABB2BF;">@@ -577,7 +578,8 @@</span></span>
<span data-line><span style="color:#ABB2BF;"> 		if os.path.exists(sdkPath):</span></span>
<span data-line><span style="color:#ABB2BF;"> 			return sdkPath</span></span>
<span data-line> </span>
<span data-line><span style="color:#E06C75;">-		return &quot;/Developer/SDKs/&quot; + sdkDirName + &quot;.sdk&quot;</span></span>
<span data-line><span style="color:#98C379;">+		return os.popen(&#39;xcodebuild -version -sdk macosx&#39; + self.macSdk + &#39; Path&#39;).read().strip()</span></span>
<span data-line><span style="color:#98C379;">+		# return &quot;/Developer/SDKs/&quot; + sdkDirName + &quot;.sdk&quot;</span></span>
<span data-line> </span>
<span data-line><span style="color:#ABB2BF;"> 	# http://tinyurl.com/cs2rxxb</span></span>
<span data-line><span style="color:#ABB2BF;"> 	def fixCmakeEclipseBug(self):</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>해당 패치를 적용하고 실행한 결과는 아래와 같습니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="shell" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="shell" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> ./hm.sh</span><span style="color:#98C379;"> conf</span><span style="color:#D19A66;"> -g1</span><span style="color:#D19A66;"> --mac-sdk</span><span style="color:#D19A66;"> 10.10</span><span style="color:#D19A66;"> --mac-identity</span><span style="color:#98C379;"> test</span></span><!--]--></code><!--]--></pre></figure>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="plain" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="plain" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span>Mapping command: conf -&gt; configure</span></span>
<span data-line><span>cmake version 3.0.2</span></span>
<span data-line> </span>
<span data-line><span>CMake suite maintained and supported by Kitware (kitware.com/cmake).</span></span>
<span data-line><span>Entering dir: build/release</span></span>
<span data-line><span>CMake command: cmake -G &quot;Unix Makefiles&quot; -DCMAKE_BUILD_TYPE=Release -DOSX_TARGET_MAJOR=10 -DOSX_TARGET_MINOR=10 ../..</span></span>
<span data-line><span>-- OSX_TARGET_MAJOR=10</span></span>
<span data-line><span>-- OSX_TARGET_MINOR=10</span></span>
<span data-line><span>-- Configuring done</span></span>
<span data-line><span>-- Generating done</span></span>
<span data-line><span>-- Build files have been written to: /Users/nesswit/Downloads/synergy-master/build/release</span></span>
<span data-line><span>Going back to: /Users/nesswit/Downloads/synergy-master</span></span>
<span data-line><span>QMake command: qmake gui.pro -r -spec macx-g++ &quot;MACX_LIBS=-framework ApplicationServices -framework Security -framework cocoa -framework ServiceManagement&quot; QMAKE_MACOSX_DEPLOYMENT_TARGET=10.10 QMAKE_MAC_SDK=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.10.sdk</span></span>
<span data-line><span>Entering dir: src/gui</span></span>
<span data-line><span>Going back to: /Users/nesswit/Downloads/synergy-master</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>생각대로 잘 동작합니다. 이대로 빌드를 진행합니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="shell" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="shell" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> ./hm.sh</span><span style="color:#98C379;"> build</span></span><!--]--></code><!--]--></pre></figure>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="plain" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="plain" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span>Entering dir: build/release</span></span>
<span data-line><span>Scanning dependencies of target arch</span></span>
<span data-line><span>[ 0%] Building CXX object src/lib/arch/CMakeFiles/arch.dir/Arch.cpp.o</span></span>
<span data-line><span>(중간 생략)</span></span>
<span data-line><span>Log: Deploying plugins from &quot;/usr/local/plugins&quot;</span></span>
<span data-line><span>Log: Created configuration file: &quot;Synergy.app/Contents/Resources/qt.conf&quot;</span></span>
<span data-line><span>Log: This file sets the plugin search path to &quot;Synergy.app/Contents/PlugIns&quot;</span></span>
<span data-line><span>Going back to: /Users/nesswit/Downloads/synergy-master</span></span>
<span data-line><span>Error: [Errno 2] No such file or directory: &#39;/Library/Frameworks/QtCore.framework/Contents/Info.plist&#39;</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>제가 설치한 qt는 brew로 설치했기 때문에 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">/Library/Frameworks/</code> 아래에 있지
않습니다. 따라서 해당 경로를 수정해야 합니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>이는 아까 패치파일을 적용한 <code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100">ext/toolchain/commands1.py</code> 파일의 826번째 줄
쯤에 있습니다. 해당 코드를 아래와 같이 수정합니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="python" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="python" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#ABB2BF;">			(qMajor, qMinor, qRev) </span><span style="color:#56B6C2;">=</span><span style="color:#E5C07B;"> self</span><span style="color:#ABB2BF;">.</span><span style="color:#61AFEF;">getQmakeVersion</span><span style="color:#ABB2BF;">()</span></span>
<span data-line><span style="color:#7F848E;font-style:italic;">			# if qMajor &lt;= 4:</span></span>
<span data-line><span style="color:#7F848E;font-style:italic;">			# 	frameworkRootDir = &quot;/Library/Frameworks&quot;</span></span>
<span data-line><span style="color:#7F848E;font-style:italic;">			# else:</span></span>
<span data-line><span style="color:#7F848E;font-style:italic;">			# 	# </span><span style="color:#C678DD;font-style:italic;">TODO</span><span style="color:#7F848E;font-style:italic;">: auto-detect, qt can now be installed anywhere.</span></span>
<span data-line><span style="color:#7F848E;font-style:italic;">			# 	frameworkRootDir = &quot;/Developer/Qt5.2.1/5.2.1/clang_64/lib&quot;</span></span>
<span data-line><span style="color:#ABB2BF;">			frameworkRootDir </span><span style="color:#56B6C2;">=</span><span style="color:#98C379;"> &quot;/usr/local/Cellar/qt/4.8.6/Frameworks&quot;</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>이후, clean한 후 root 권한으로 다시 빌드해봅니다.</p>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="shell" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="shell" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span style="color:#61AFEF;">$</span><span style="color:#98C379;"> ./hm.sh</span><span style="color:#98C379;"> clean</span></span><!--]--></code><!--]--></pre></figure>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="plain" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="plain" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span>(생략)</span></span>
<span data-line><span>```shell</span></span>
<span data-line><span>$ sudo ./hm.sh build</span></span><!--]--></code><!--]--></pre></figure>
<figure data-rehype-pretty-code-figure><pre class="code-block my-2 overflow-x-auto px-3 py-2" style="background-color:#282c34;color:#abb2bf;" tabindex="0" data-language="plain" data-theme="one-dark-pro" data-v-8864a99a><!--[--><code class="bg-teal-100 px-1 py-0.5 font-mono dark:bg-teal-900 dark:text-gray-100" data-language="plain" data-theme="one-dark-pro" style="display:grid;"><!--[--><span data-line><span>Entering dir: build/release</span></span>
<span data-line><span>[ 0%] Building CXX object src/lib/arch/CMakeFiles/arch.dir/Arch.cpp.o</span></span>
<span data-line><span>(중간 생략)</span></span>
<span data-line><span>WARNING: Plugins = PlugIns</span></span>
<span data-line><span>Going back to: /Users/nesswit/Downloads/synergy-master</span></span><!--]--></code><!--]--></pre></figure>
<p class="my-2 text-pretty" data-v-9880527e>경고... 가 뜨지만 더 이상은 그냥 무시하기로 했습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>그럼, 정상적으로 생성된 Synergy.app 파일을 bin 폴더에서 확인할 수 있습니다.</p></div>]]></content>
        <author>
            <name>Nesswit</name>
            <email>rishubil+blog@gmail.com</email>
            <uri>https://blog.update.sh/about</uri>
        </author>
    </entry>
    <entry>
        <title type="html"><![CDATA[Windows 8의 바탕화면 우클릭 메뉴가 느리게 작동할 때]]></title>
        <id>https://blog.update.sh/posts/slow-context-menu-on-windows-8</id>
        <link href="https://blog.update.sh/posts/slow-context-menu-on-windows-8"/>
        <updated>2014-05-24T15:00:00.000Z</updated>
        <summary type="html"><![CDATA[Windows 8/8.1에서 바탕화면 우클릭 메뉴가 느리게 동작하는 문제는 주로 NVIDIA CPL Context Menu Extension 등 그래픽 드라이버 설치 시 등록된 shell extension이 원인입니다. ShellExView 도구를 사용해 서드파티 context menu extension들을 하나씩 비활성화하며 테스트하여 문제의 원인을 찾아 해결할 수 있습니다.
]]></summary>
        <content type="html"><![CDATA[<div class="mdx-content leading-[1.6]" style="--v2806f315:0.875rem,[object Object],0.875rem,[object Object];--v67bf8b50:#6b7280;--v67bf83ce:#d1d5db;--v67bf878f:#9ca3af;--v67bf92d2:#374151;" data-v-ec58c90e><p class="my-2 text-pretty" data-v-9880527e>Bootcamp로 사용하는 Windows 8.1의 바탕화면 우클릭 메뉴가 엄청나게 느리게
동작하기 시작했습니다. 관련 자료를 찾아보니 그래픽 카드 드라이버를 설치하면서
등록된 우클릭 메뉴 하나가 이상하게 동작하기 때문인 듯 했습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>Windows 8과 Windows 8.1에서 발생하며, NVIDIA CPL Context Menu
Extension(바탕화면에서 NVIDIA의 우클릭 메뉴)가 문제가 되는 경우가 대부분입니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>해결 방법은 다음과 같습니다.</p>
<ol class="my-2 list-outside list-decimal">
<li class="ms-6 text-pretty" data-v-09555c0e><a href="http://www.nirsoft.net/utils/shexview.html?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">http://www.nirsoft.net/utils/shexview.html</a> 에서 ShellExView를 다운받습니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>다운받은 ShellExView를 우클릭하여 관리자 권한으로 실행합니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>메뉴의 options에서 Filter by Extension Type의 Context Menu를 선택합니다.
<ol class="my-2 list-outside list-decimal">
<li class="ms-6 text-pretty" data-v-09555c0e>혹시 NVIDIA CPL Context Menu Extension 란 항목이 있다면 해당 항목을
클릭하고 좌측 상단에 빨간 버튼을 눌러 중지시킵니다. (없다면 4번 항목으로)</li>
<li class="ms-6 text-pretty" data-v-09555c0e>메뉴의 options에서 Restart Explorer를 클릭합니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>바탕화면에서 우클릭하여 문제가 해결되었는지 확인합니다. (해결되지
않았다면 4번 항목으로)</li>
<li class="ms-6 text-pretty" data-v-09555c0e>문제가 해결되었다면, NVIDIA의 우클릭 메뉴가 문제입니다. 딱히 사용하지
않아도 지장이 없다면 다음 절차를 진행할 필요는 없습니다.</li>
</ol>
</li>
<li class="ms-6 text-pretty" data-v-09555c0e>리스트 중 분홍색 배경을 가진 항목들은 서드파티 프로그램에 의해 설치된
항목들입니다. 이 항목들을 모두 선택합니다. (ctrl 키를 누른 채로 클릭하면
여러 항목을 동시에 선택할 수 있습니다.)</li>
<li class="ms-6 text-pretty" data-v-09555c0e>좌측 상단의 빨간 버튼을 눌러 중지시킵니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>메뉴의 options에서 Restart Explorer를 클릭합니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>바탕화면에서 우클릭하여 문제가 해결되었는지 확인합니다. (해결되지 않았다면,
윈도우 기본 Shell extension에 의해 발생했거나 Shell extension에 의해 발생한
문제가 아닐 가능성이 있습니다.)</li>
<li class="ms-6 text-pretty" data-v-09555c0e>해결되었다면, 4~5번 항목에서 중지했던 항목들 중 하나만 다시 초록 버튼을
눌러 활성화시킵니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>다시 문제가 발생할 때 까지 6-8번 항목을 반복합니다.</li>
<li class="ms-6 text-pretty" data-v-09555c0e>다시 문제가 발생하였다면 방금 다시 활성화시킨 그 항목이 원인입니다. 이름과
경로를 잘 보고 검색하여 문제를 해결하거나, 그냥 해당 extension을
비활성화시킨 채 사용합니다.</li>
</ol>
<p class="my-2 text-pretty" data-v-9880527e>출처: <a href="http://social.technet.microsoft.com/Forums/windows/en-US/5353106e-5b19-4a26-8446-72bedf40b169/rightclick-context-menu-in-desktop-appearing-slow-win-81?forum=w8itprogeneral&amp;utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">http://social.technet.microsoft.com/Forums/windows/en-US/5353106e-5b19-4a26-8446-72bedf40b169/rightclick-context-menu-in-desktop-appearing-slow-win-81?forum=w8itprogeneral</a></p></div>]]></content>
        <author>
            <name>Nesswit</name>
            <email>rishubil+blog@gmail.com</email>
            <uri>https://blog.update.sh/about</uri>
        </author>
    </entry>
    <entry>
        <title type="html"><![CDATA[Google에서 응용 프로그램 지정 암호를 얻어야 합니다]]></title>
        <id>https://blog.update.sh/posts/google-app-password</id>
        <link href="https://blog.update.sh/posts/google-app-password"/>
        <updated>2014-02-13T15:00:00.000Z</updated>
        <summary type="html"><![CDATA[OSX Mail client에서 Google 계정 IMAP 연동 시 "응용 프로그램 지정 암호"를 요구하는 오류가 발생했습니다. Google의 Authorizing applications & sites 페이지에서 앱 전용 비밀번호를 생성하여 일반 비밀번호 대신 사용하면 해결됩니다.
]]></summary>
        <content type="html"><![CDATA[<div class="mdx-content leading-[1.6]" style="--v2806f315:0.875rem,[object Object],0.875rem,[object Object];--v67bf8b50:#6b7280;--v67bf83ce:#d1d5db;--v67bf878f:#9ca3af;--v67bf92d2:#374151;" data-v-ec58c90e><p class="my-2 text-pretty" data-v-9880527e>OSX 10.9.1의 Mail client를 구글 계정을 이용하여 IMAP으로 동기화하려고 하니,
뜬금없이 &quot;Google에서 응용 프로그램 지정 암호를 얻어야 합니다.&quot;라면서 계정
연동이 되지 않았습니다.</p>
<p class="my-2 text-pretty" data-v-9880527e>한국어로 바로 검색해 보았으나 해결방법이 보이지 않아 영어로 검색하니 바로
해결되었습니다.
아래 링크를 참조하세요.</p>
<p class="my-2 text-pretty" data-v-9880527e><a href="https://support.google.com/mail/answer/185833?utm_source=blog.update.sh&amp;utm_medium=content" rel="noopener noreferrer" target="_blank" class="text-teal-600 underline hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300">https://support.google.com/mail/answer/185833</a></p>
<p class="my-2 text-pretty" data-v-9880527e>혹 위 링크가 정상적으로 동작하지 않는다면, Authorizing applications &amp; sites
page 페이지로 이동하여 새로운 비밀번호를 생성한 후, 구글 계정 비밀번호 대신
생성된 비밀번호를 입력하여 계정 연동을 시도하면 됩니다.</p></div>]]></content>
        <author>
            <name>Nesswit</name>
            <email>rishubil+blog@gmail.com</email>
            <uri>https://blog.update.sh/about</uri>
        </author>
    </entry>
</feed>