안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 멋진 배경과 사진을 넣는 ‘이미지 마법’을 배웠죠? 하지만 사진만 예쁘고 글씨체가 딱딱하면 2% 부족한 느낌이 들 거예요. 오늘은 웹사이트의 분위기를 결정짓는 ‘폰트(글씨체)와 텍스트 디자인’을 배워보겠습니다. 구글 폰트라는 보물 창고에서 예쁜 글씨체를 빌려와 우리 사이트에 입혀볼까요?
[IMAGE_1]
1. 폰트도 빌려 쓸 수 있어요! 구글 폰트(Google Fonts)
내 컴퓨터에 없는 예쁜 글씨체도 웹사이트에서는 마음껏 쓸 수 있어요. 바로 웹 폰트 덕분이죠! 구글 폰트는 전 세계 마법사들이 무료로 쓸 수 있게 공개한 글씨체 창고예요. 주소 한 줄만 복사해서 우리 코드에 붙여넣으면 즉시 멋진 글씨로 변신한답니다.
2. 글씨에 감성을 더하는 주문서 (코드)
구글에서 ‘나눔고딕’이나 ‘검은고딕’ 같은 예쁜 폰트를 가져와서 글자 간격과 높이를 조절하는 코드를 작성해 봅시다.
<!DOCTYPE html>
<html>
<head>
<!-- 1. 구글 폰트 창고에서 '나눔 펜 Script' 글씨체 빌려오기 -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
.magic-text {
/* 2. 빌려온 글씨체 적용하기 */
font-family: 'Nanum Pen Script', cursive;
font-size: 40px;
color: #2c3e50;
/* 3. 글자 사이 간격(자간) 조절 */
letter-spacing: 2px;
/* 4. 줄과 줄 사이 간격(행간) 조절 */
line-height: 1.6;
text-align: center;
margin-top: 50px;
}
.highlight {
/* 글자 아래에 형광펜 효과! */
background: linear-gradient(to top, #ffeaa7 40%, transparent 40%);
}
</style>
</head>
<body>
<div class="magic-text">
<p>안녕? 나는 <span class="highlight">마법 학교</span>의<br>
새로운 글씨체야!</p>
</div>
</body>
</html>3. 가독성의 비밀: 자간(letter-spacing)과 행간(line-height)
글씨체만큼 중요한 게 바로 ‘간격’이에요.
1. letter-spacing: 글자와 글자 사이가 너무 붙어있으면 답답해 보여요. 살짝 띄워주면 훨씬 읽기 편해지죠.
2. line-height: 줄과 줄 사이가 좁으면 글이 빽빽해 보여서 눈이 아파요. 적당한 행간은 글을 술술 읽히게 만드는 마법이랍니다.
[IMAGE_2]
4. 아이들과 함께하는 ‘글씨 꾸미기’ 놀이
아이와 함께 도화지에 똑같은 문장을 세 번 써보세요. 첫 번째는 아주 삐뚤빼뚤하게, 두 번째는 정자로 반듯하게, 세 번째는 색깔 펜으로 예쁘게 꾸며서요. “어떤 문장이 가장 읽고 싶니?”라고 물어보며 디자인이 정보 전달에 주는 힘을 가르쳐주세요. “웹사이트에서도 어떤 폰트를 고르느냐에 따라 마법 주문이 강력해 보이기도 하고, 부드러워 보이기도 한단다”라고 덧붙여주시면 완벽합니다.
마치며: 목소리가 들리는 웹사이트
글씨체는 웹사이트의 ‘목소리’와 같아요. 오늘 배운 마법으로 우리 학교는 이제 다정하고 세련된 목소리를 갖게 되었습니다! 정말 멋져요. 다음 시간에는 4기 디자인 시리즈의 대미를 장식할 ‘나만의 반응형 레이아웃: 태블릿과 폰에서도 예쁘게!’를 배워보겠습니다. 어떤 화면에서도 완벽한 마법 학교를 만들어 볼까요? 다음 시간에 만나요!
