글꼴 선택은 사용자의 읽기 환경 및 가독성에 중요하며, 그뿐만 아니라 웹 페이지를 차별화하여 제공하는 데 도움이 될 수 있습니다. 글꼴은 주로 웹 페이지의 테마 및 디자인에 따라 달라집니다. 대부분의 시스템에서 다양한 글꼴을 사용할 수 있습니다. 기본적으로 제공되는 글꼴에는 다음이 포함됩니다.
| 영어 | 한글 |
|---|---|
| Arial/Helvetica | 돋움(Dotum) 돋움체(DotumChe) |
| Courier/Courier New Georgia | 굴림(Culim) 굴림체(CulimChe) |
| Times/Times New Roman | 바탕(Batang) 바탕체(BatangChe) |
| Trebuchet MS | 궁서(Gungsuh) 궁서체(GungsuhChe) |
| Verdana | 맑은 고딕(Malgun Gothic) |
기본적으로 제공되는 폰트만으로도 충분히 잘 읽을 수 있기 때문에 반드시 다른 글꼴을 추가할 필요는 없습니다. 그러나 다른 글꼴 및 텍스트 효과를 사용해야 할 경우도 분명히 있습니다. 이 포스팅에서는 AMP에 사용자 정의 글꼴 및 텍스트 효과를 추가하는 방법에 대해 살펴보겠습니다.
AMP는 외부 스타일 시트를 포함하는 것을 허용하지 않으므로 일반적으로 <link rel="stylesheet"> 사용이 금지됩니다. 하지만 사용자 정의 글꼴을 포함하기 위한 <link rel="stylesheet"> 사용은 허용됩니다. 사용자 정의 글꼴은 아래의 두 가지 방법으로 사용할 수 있습니다.
1. <link rel="stylesheet"> 사용
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700" rel="stylesheet">
이 방법에서는 다음 AMP에서 허용한 폰트 제공자의 글꼴만 포함할 수 있습니다.
- Google Fonts
- Typography.com
- Fonts.com
- Font Awesome
2. <style amp-custom>에서 @font-face 사용
<style amp-custom>
@font-face {
font-family: "Nanum Gothic";
src: url ("https://example.com/fonts/nanumgothic.woff") format ('woff');
}
body {
font-family: "Nanum Gothic", sans-serif;
}
</style>
@font-face에 포함된 글꼴에는 URL의 http 또는 https가 포함되어야 합니다.
Google은 fonts.google.com에서 다양한 글꼴을 제공합니다. 이를 사용하여 글꼴을 선택할 수 있으며 AMP 페이지에 추가할 수 하는 코드를 제공합니다.
3. 콘텐츠에 글꼴 적용
이제 사용자 지정 글꼴을 추가하는 방법을 알았으므로 콘텐츠에 적용해 보겠습니다. 내비게이션 링크 메뉴에는 serif 글꼴인 PT Sans를 사용하고 본문에는 Nanum Gothic을 사용합니다. (둘 다 Google Fonts에서 고른 글꼴입니다.) 먼저 Google Fonts에서 글꼴을 선택할 때 생성한 <link>를 페이지의 <head>에 추가합니다.
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&family=Nanum+Gothic" rel="stylesheet">
이제 페이지의 관련 요소에 이를 적용하기만 하면 됩니다. 내비게이션 링크 메뉴의 경우 PT Sans를 사용합니다.
.primary-nav li {
font-family : "PT Sans", sans-serif;
}
그리고 다른 본문의 모든 텍스트에 Nanum Gothic을 적용합니다.
.postBody {
font-family: "Nanum Gothic", sans-serif;
}
마지막으로 로고와 h1 텍스트에 Georgia를 적용합니다. Georgia 글꼴은 대부분의 시스템에서 기본 글꼴로 제공할 수 있지만 대체 글꼴로 다른 글꼴을 제공할 수도 있습니다.
.logo, h1 {
font-family: Georgia, "Times New Roman", serif;
}
4. CSS 및 HTML을 사용한 텍스트 레이아웃
AMP에 글꼴을 적용하는 방법에 대해 알아보았습니다. 반면, 텍스트의 레이아웃은 어떻게 지정할까요? 일반 HTML과 마찬가지로 CSS는 AMP의 텍스트에 적용할 수 있습니다. AMP는 몇 가지 텍스트 레이아웃 기능도 제공합니다.
인용문은 뉴스 기사의 내용에서 자주 사용됩니다. 다음과 같이 blockquote 태그를 사용하여 중요한 부분을 강조하기 위해 사용하기도 합니다.
<blockquote class="pull-quote"> 원래 사람들은 새로운 기술이 나오면 처음엔 걱정하기 마련이다. </blockquote>
그런 다음 CSS를 추가하여 따옴표 왼쪽에 테두리를 추가합니다.
.pull-quote {
border: none;
border-left: 6px solid #999;
font-size: 1.5rem;
padding-left: 1rem;
}
브라우저에서 보면 다음과 같이 내용이 표시됩니다.
이 방법도 좋지만 인용 부호를 추가하여 인용문이 더 돋보이도록 꾸밀 수 있습니다. 가상 요소 ::before를 사용하여 CSS를 추가할 수 있습니다.
.pull-quote::before {
content: '\00201C';
font-size: 8rem;
font-family: Georgia, serif;
color: #ff8c00;
position: absolute;
left: -0.5rem;
line-height: 7rem;
padding-left: 1rem;
}
이 CSS는 content 속성의 값을 출력합니다. 따러서 큰 따옴표 기호의 유니코드 값인 \00201C가 .pull-quote 요소 앞에 표시됩니다. 나머지 CSS는 따옴표 기호를 배치하고 스타일을 지정합니다.
결과는 다음 이미지와 같이 갬성이 있는 인용문입니다.
5. <amp-fit-text>를 사용한 텍스트 레이아웃
AMP의 amp-fit-text 구성 요소를 사용하여 인용문을 작성할 수도 있습니다. 이 구성 요소를 사용하면 너비와 높이, 최소 글꼴 크기 및 최대 글꼴 크기를 지정할 수 있으며 amp-fit-text는 지정된 조건에 맞게 글꼴 크기를 적절하게 조정합니다. blockquote 대신 amp-fit-text를 사용하도록 인용문을 변경해 보겠습니다.
amp-fit-text는 확장 구성 요소이므로 다음과 같이 문서 헤드에 스크립트 태그를 포함합니다.
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
다음으로 페이지 본문에 아래의 코드를 추가합니다.
<amp-fit-text width="400"
height="75"
layout="responsive"
min-font-size="24"
max-font-size="48">
원래 사람들은 새로운 기술이 나오면 처음엔 걱정하기 마련이다.
</amp-fit-text>
min-font-size 및 max-font-size 속성은 인용문이 작은 화면에서 너무 작거나, 큰 화면에서 너무 크지 않게 텍스트의 크기를 적절하게 조정합니다.
amp-fit-text 구성 요소를 사용하여 텍스트가 표시되긴 하지만 스타일이 별로입니다. 이번에는 SVG로 따옴표를 만들어 인용문의 스타일을 다듬어 보겠습니다.
6. SVG 추가
SVG (Scalable Vector Graphics) 형식은 효율적인 벡터 기반 그래픽 형식으로 AMP에서 사용이 가능합니다. 벡터 기반이므로 모든 해상도에 지원되어 다양한 화면 크기에 맞게 그래픽을 확장해야 하는 반응형 웹 디자인에 적합합니다.
이번에는 이전에 본 CSS 가상 요소 ::before 대신 인용 부호에 SVG 이미지를 사용하여 인용문에 적용해 보겠습니다.
SVG 그래픽을 만드는 것은 이 글의 범위를 벗어나지만 포토샵 및 일러스트와 같은 프로그램으로 SVG를 만들 수 있습니다. 다음은 일러스트로 만든 따옴표 SVG 코드입니다. AMP-HTML 페이지에 다음 코드를 추가합니다.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 113.7 99.4" enable-background="new 0 0 113.7 99.4" xml:space="preserve">
<g>
<path d="M52.6, 69.3c0, 4.3-1.7, 8-5.2, 11.3c-3.5, 3.2-7.5, 4.8-12.3, 4.8c-7.4, 0-13.1-2.4-17-7.3c-4-4.9-5.9-11.7-5.9-20.3c0-8, 3.4-16.2, 10.2-24.3c6.8-8.2, 15-14.4, 24.7-18.614.4, 7.1c-7.6, 3.7-13.6, 8-17.9, 12.9c-4.3, 4.9-6.8, 10.8-7.5, 17.8h5.7c4.2, 0, 7.6,0.5, 10.2, 1.4c2.6, 0.9, 4.7, 2.2, 6.4, 3.9c1.5, 1.6, 2.6, 3.4, 3.3, 5.3C52.3, 65.3, 52.6, 67.3, 52.6, 69.3z M102.2, 69.3c0, 4.3-1.7,8-5.2, 11.3c-3.5,3.2-7.5, 4.8-12.3,4.8c-7.4, 0-13.1-2.4-17-7.3c-4-4.9-5.9-11.7-5.9-20.3c0-8, 3.4-16.2, 10.2-24.3c6.8-8.2, 15-14.4, 24.7-18.614.4, 7.1c-7.6, 3.7-13.6, 8-17.9, 12.9c-4.3, 4.9-6.8, 10.8-7.5, 17.8h5.7c4.2, 0, 7.6, 0.5, 10.2. 1.4c2.6, 0.9, 4.7, 2.2, 6.4, 3.9c1.5, 1.6, 2.6, 3.4, 3.3, 5.3C101.9, 65.3, 102.2, 67.3,102.2, 69.3z"/>
</g>
</svg>
이번에는 스타일을 지정하기 위해 이전에 보았던 AMP의 flex-item 레이아웃을 사용하겠습니다. SVG 이미지와 amp-fit-text 구성 요소를 상위 요소인 플렉스 컨테이너에 넣고 amp-fit-text 구성 요소의 레이아웃을 flex-item으로 설정합니다.
<div class="pull-parent">
<svg class="pull-quote">
...
</svg>
<amp-fit-text class="pull-quote-text"
width="400"
height="75"
layout="flex-item"
max-font-size="42">
원래 사람들은 새로운 기술이 나오면 처음엔 걱정하기 마련이다.
</amp-fit-text>
</div>
이제 문서 헤드의 <style> 태그에 CSS를 추가하여 부모를 플렉스 요소로 설정합니다.
.pull-parent {
display: flex;
}
이제 갬성 넘치는 인용문이 생겼습니다.
amp-fit-text는 지정된 조건 내에서 텍스트 크기를 조정하려고 하지만 불가능한 경우 텍스트를 자릅니다. 예를 들어 다음 코드는 비교적 큰 min-font-size가 지정되었기 때문에 텍스트가 잘립니다. 이 경우 WebKit 및 Blink 기반 브라우저는 자동으로 줄임표(...)가 추가됩니다.
<amp-fit-text width="400"
height="75"
min-font-size="30"
max-font-size="42">
원래 사람들은 새로운 기술이 나오면 처음엔 걱정하기 마련이다.
</amp-fit-text>
여기에서는 간단한 인용문에 amp-fit-text를 사용했지만 관련 게시물의 썸네일 이미지와 제목에서 텍스트가 너무 길지 않도록 amp-fit-text를 사용하여 개선할 수 있습니다.