[CSS 꿀팁] 한글 폰트, 영문 폰트 따로 적용하기 | HTML + CSS 무료 강의

| 2025-01-11 20:40 | 조회 115

#웹디자인 #CSS #폰트적용 #유니코드 #한글영문폰트 #myip

[주요 목차]

📌 웹폰트 설정의 중요성

📌 CSS 폰트페이스의 유니코드 레인지

📌 폰트 적용 실습

📌 폰트 최적화 팁

📌 한글과 영문 폰트 분리하기

웹페이지 디자인에서 폰트는 시각적 요소를 결정하는 중요한 요소 중 하나입니다. 특히 한글과 영문을 동시에 사용하는 사이트에서는 각각의 글자에 적합한 폰트를 적용하는 것이 중요합니다. 그렇다면 어떻게 각각의 폰트를 지정해 웹페이지의 가독성을 높일 수 있을까요? 이 글에서는 CSS의 `@font-face` 규칙과 유니코드 레인지 속성을 활용하여 한글과 영문 폰트를 각각 설정하는 방법을 자세히 설명합니다. 시작해볼까요?

📌 웹폰트 설정의 중요성

웹폰트를 올바르게 설정하면 웹사이트의 전반적인 가독성과 사용자 경험을 크게 향상시킬 수 있습니다. 기본 웹폰트만 사용하면 제한된 디자인 선택지 때문에 브랜드 아이덴티티를 충분히 표현하기 어려울 수 있습니다. 또한, 다양한 디바이스에서 일관된 모습을 유지하기 위해서는 웹폰트 설정이 필수적입니다. 웹폰트를 설정할 때 가장 중요한 점은 폰트의 로딩 시간과 호환성입니다. 폰트가 잘못 설정되면 페이지 로딩이 느려지거나, 일부 브라우저에서 올바르게 표시되지 않을 수 있습니다. 따라서 폰트 선택 시에는 가독성과 성능을 모두 고려해야 합니다.

📌 CSS 폰트페이스의 유니코드 레인지

CSS의 @font-face 규칙은 웹폰트를 로드하고 특정 요소에 적용할 수 있는 방법을 제공합니다. 이 규칙의 unicode-range 속성을 사용하면 특정 유니코드 범위에만 폰트를 적용할 수 있습니다. 예를 들어, 한글과 영문을 각각 다른 폰트로 설정하고 싶을 때 유용합니다. unicode-range는 다양한 글자에 대한 유니코드를 지정하여 특정 폰트가 해당 글자에만 적용되도록 합니다. 예를 들어, 한글에는 U+AC00-U+D7A3 범위를, 영문 대문자에는 U+0041-U+005A 범위를 설정할 수 있습니다. 이처럼 세밀한 폰트 적용 방법은 웹 디자인의 디테일을 살리는 데 큰 도움을 줍니다.

📌 폰트 적용 실습

이제 실제로 폰트를 적용해 보겠습니다. 먼저, 사용하고자 하는 폰트를 다운로드하고 웹서버에 업로드합니다. 그 후, CSS 파일에서 @font-face를 사용하여 폰트를 선언합니다. 예를 들어, font-family: 'Noto Sans KR';와 같은 방식으로 한글 폰트를 설정합니다. 이어서, HTML 문서에 <link> 태그를 사용하여 스타일시트를 불러옵니다. 이렇게 설정하면 웹페이지가 로드될 때 지정한 폰트가 적용됩니다. 이 과정에서 브라우저 콘솔을 통해 폰트가 제대로 적용되었는지 확인할 수 있습니다. 또, 다양한 브라우저에서 테스트하여 모든 환경에서 일관된 폰트가 적용되도록 하는 것이 중요합니다.

📌 폰트 최적화 팁

폰트 최적화는 웹사이트 성능에 직접적인 영향을 미칩니다. 폰트 파일의 크기를 줄이기 위해서는 필요한 글자 집합만 포함한 서브셋 폰트를 사용하거나, WOFF2와 같은 최신 포맷을 이용하는 것이 좋습니다. 또한, 폰트 로딩 전략을 설정하여 페이지 로딩 속도를 개선할 수 있습니다. font-display 속성을 사용하여 폰트를 비동기 로드하고, swap 옵션을 지정하여 폰트가 로드되는 동안 기본 폰트를 사용하도록 설정할 수 있습니다. 이 방법은 사용자 경험을 저해하지 않으면서 폰트가 로드되면 자연스럽게 바뀌도록 도와줍니다.

📌 한글과 영문 폰트 분리하기

마지막으로, 한글과 영문에 다른 폰트를 적용하는 방법을 알아봅니다. @font-face 규칙에서 unicode-range 속성을 사용하여 한글과 영문의 유니코드 범위를 각각 지정합니다. 한글의 경우 @font-face에 unicode-range: U+AC00-U+D7A3;를 설정하고, 영문 대문자와 소문자에는 각각 U+0041-U+005A와 U+0061-U+007A를 설정합니다. 이렇게 하면 한글에는 지정한 한글 폰트가, 영문에는 지정한 영문 폰트가 적용됩니다. 이를 통해 사용자는 더 직관적이고 읽기 쉬운 웹페이지를 경험할 수 있습니다.