구글 폰트로 웹사이트에 개성 불어넣기
Day 4. Using Google Fonts
웹 개발을 하다 보면 사이트의 시각적 완성도를 높이기 위해 폰트 선택이 얼마나 중요한지 깨닫게 된다. 우리가 만든 첫 웹사이트가 서서히 모양을 갖추고 있지만, 현재 콘텐츠를 보면 동일한 기본 sans-serif 폰트를 모든 텍스트에 사용하고 있다. 이런 통일성이 나쁜 것은 아니지만, 다양한 폰트를 활용하면 사이트의 시각적 계층구조와 개성을 표현할 수 있다.
h1 {
font-family: 'Oswald', sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
p {
font-family: 'Fira Sans', sans-serif;
text-align: center;
color: rgb(83, 75, 75);
}
a {
color: rgb(167, 1, 78);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#todays-challenge {
color: rgb(170, 96, 83);
font-weight: bold;
font-size: 52px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
rel="stylesheet"
/>
<link href="daily-challenge.css" rel="stylesheet" />
<title>My Daily Challenge</title>
</head>
<body>
<h1>Hoon's challenge for Tuesday, May 6th</h1>
<p id="todays-challenge">
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>
</body>
</html>
1. 폰트 다양화의 필요성
"우리가 콘텐츠를 보면 스타일의 영향을 확실히 볼 수 있습니다. 하지만 또한 우리가 가진 모든 다른 종류의 텍스트에 동일한 폰트를 사용하고 있다는 것을 알 수 있습니다." 일반적으로 웹사이트에서는 제목과 본문에 서로 다른 폰트 패밀리를 사용하여 시각적 차별화를 만드는 것이 좋은 관행이다.
2. 폰트 사용의 기술적 도전
"폰트 패밀리 sans-serif는 안전합니다. 모든 운영 체제와 브라우저가 이를 지원합니다. serif도 마찬가지로 기본으로 지원됩니다." 하지만 Arial과 같은 특정 폰트 패밀리를 사용하려면 더 복잡해진다. 모든 시스템에서 모든 폰트가 지원되는 것은 아니기 때문에 종종 폰트 패밀리를 가져와야 한다.
3. Google Fonts: 무료 폰트의 보고
"Google Fonts는 이름에서 알 수 있듯이 Google이 제공하는 웹페이지입니다. fonts.google.com을 방문하여 이 사이트에 접속할 수 있습니다." Google Fonts는 HTML 파일에 가져와 사용할 수 있는 다양한 무료 폰트를 제공한다. 원하는 폰트를 찾기 위해 이 페이지를 탐색할 수 있다.
4. 폰트 선택과 가중치 고려하기
"여기서 폰트를 클릭하면 해당 폰트의 다양한 버전, 즉 다양한 굵기에 대한 미리보기를 볼 수 있습니다." 표준 가중치(400)와 굵은 가중치(700)와 같이 필요한 폰트 스타일만 선택하는 것이 중요하다. 불필요한 폰트 로딩은 사이트 속도 저하의 원인이 된다.
5. 폰트 가져오기의 기술
"Google Fonts의 좋은 점은 이러한 폰트를 가져오기 위해 HTML 파일에 추가할 수 있는 코드를 자동으로 제공한다는 것입니다." 이 코드는 HTML 파일의 head 섹션에 있는 다른 link 요소 위에 추가해야 한다. 이 link 요소는 우리의 CSS 파일을 가리키는 것이 아니라 Google의 서버를 가리킨다.
6. 절대 경로 URL의 활용
"ref 값은 상대 경로일 수도 있지만, 이처럼 완전히 다른 컴퓨터에 대한 전체 절대 URL일 수도 있습니다." link의 href 속성이 우리 파일뿐만 아니라 Google과 같은 외부 서버를 가리킬 수 있다는 점은 주목할 가치가 있다. 이를 통해 외부 리소스를 쉽게 활용할 수 있다.
7. CSS에 폰트 패밀리 적용하기
"폰트를 로드하지만 사용하지는 않고 있기 때문에 페이지에서 변화가 보이지 않습니다." 폰트를 적용하려면 CSS 규칙에서 font-family를 업데이트해야 한다. 가져온 폰트의 이름을 작은따옴표로 묶어 추가한다.
8. 폰트 대체(fallback) 시스템의 중요성
"font-family는 이전처럼 하나의 값일 수도 있지만, 왼쪽에서 오른쪽으로 구문 분석되는 여러 폰트의 쉼표로 구분된 목록을 추가할 수 있습니다." 이런 대체 폰트를 정의하는 것은 주 폰트를 사용할 수 없는 경우에도 최소한 선택한 폰트를 사용할 수 있도록 하는 좋은 방법이다.
9. Google Fonts의 가치
"Google Fonts는 웹 개발자로서 일반적으로 많이 사용하게 될 놀라운 서비스입니다." 대부분의 웹사이트에서는 기본 폰트에 머물지 않고 고유한 폰트를 가져오고 싶을 것이다. Google Fonts는 무료로 사용하기 쉬운 폰트의 거대한 라이브러리를 제공하며, 심지어 그 폰트를 사용하기 위해 추가해야 하는 코드까지 제공한다.
웹 디자인에서 폰트 선택은 단순한 미적 문제가 아니라 사용자 경험과 브랜드 아이덴티티에 큰 영향을 미치는 중요한 요소다. Google Fonts와 같은 도구를 활용하면 기술적 장벽 없이 다양한 폰트를 적용할 수 있다. 하지만 성능 최적화를 위해 필요한 폰트 가중치만 선택하고, 항상 대체 폰트를 지정하는 것이 중요하다. 결국 좋은 웹 디자인은 미적 감각과 기술적 지식의 균형에서 비롯된다.
