[이모저모] 티스토리 웹 폰트 실험! 한컴산스와 한컴 말랑말랑 조합

안녕하세요. 수요일의 21입니다. Hello world!와 2025는 한컴말랑말랑 레귤러체입니다.
제가 문장은 한컴산스, 숫자나 영어는 한컴 말랑말랑을 쓰는 이유는 이렇습니다.

Hello world!와 2025는 한컴산스 라이트체입니다.
보다시피 알아보기 어렵습니다.

이 페이지는 글꼴 실험용입니다.
Font test와 1234567890도 각각 다르게 보이시죠?

다양한 글자 조합을 테스트해 보세요.
예를 들어 CSS나 JavaScript 키워드들도 말랑말랑체로 나올 것입니다.
오늘은 2025년 5월 21일입니다.

<div>
<style>
@font-face {
  font-family: 'HancomSans-Light';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2406-1@1.0/HancomSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'HancomMalangMalang-Regular';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2406-1@1.0/HancomMalangMalang-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
.hancom-mixed {
  font-family: 'HancomSans-Light';
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  word-break: keep-all;
  margin: 1em 0;
}
.hancom-mixed :is(span.en, span.num) {
  font-family: 'HancomMalangMalang-Regular';
  font-weight: 400;
}
</style>
</div>
<p class="hancom-mixed" style="text-align: left;" data-ke-size="size16"><span class="en">Hello world!</span>와 <span class="num">2025</span>는 <span class="en">한컴 말랑말랑 레귤러체입니다.</span></p>
<p class="hancom-mixed" style="text-align: left;" data-ke-size="size16">제가 문장은 한컴산스, 숫자나 영어는 한컴 말랑말랑을 쓰는 이유는 이렇습니다.</p>
<p class="hancom-mixed" style="text-align: left;" data-ke-size="size16"><span class="en">Hello world!</span>와 <span class="num">2025</span>는 <span class="en">한컴 말랑말랑 레귤러체</span>입니다. 보다시피 알아보기 어렵습니다.</p>

저는 웹 폰트로 '한컴 말랑말랑체'를 이용합니다. 보통 티스토리 CSS에 HTML 태그를 복사해서 붙여 넣어 사용하고 있지요. 위의 HTML 태그는 티스토리 에디터에서 바로 적용해 봤습니다. 제가 봤을 때는 티스토리 에디터 내에서도 바로 그 폰트로 보이는데, 올렸을 때는 어떻게 보일지 모르겠습니다.

위의 'wandohopeB'는 예전에 제가 적용한 웹 폰트입니다. 이 문장은 '완도희망체'로 출력됩니다. 인사말이나 회고용으로 좋아요. 한때 제가 즐겨 썼던 웹 폰트입니다. 간혹 사람들이 폰트가 뭐냐고 물어볼 때 제가 답변을 주저하는 이유는 몰라서입니다. 티스토리 CSS에 HTML 태그로 웹 폰트를 적용하게 되면 기본 글꼴 자체를 웹 폰트로 보이게 하는 거다 보니, 변경 시에는 다른 글꼴로 보이게 된답니다. 부분적인 변경도 가능하지만, 귀찮습니다. 이것도 귀찮은 방법이기는 합니다만, 직접 티스토리 에디터 내에서 바로 그 폰트로 보이니까 좋네요.

 

그냥 폰트 하나로 통일하고 싶다면 'CSS'을 추천합니다. 블로그 관리자 페이지에 들어가시면 '스킨 편집' 메뉴가 있습니다. 그 안의 'HTML 편집' > 'CSS' 탭으로 들어가면, 웹 폰트 적용을 위한 코드를 넣을 수 있어요. 저는 보통 CSS 상단과 하단에 웹 폰트 관련 코드를 삽입해 두는데요, 기존에 기본 폰트로 지정되어 있던 'Noto Sans'도 함께 적어둡니다. 지워도 되지만, 나중에 원래대로 되돌릴 때를 대비해서 기록 차원에서 남겨두는 거죠. 진짜 별거 아닌데, 예전에는 이런 것도 몰라서 한참 헤맸던 기억이 납니다. 이런 방법을 친절하게 정리해 주신 분들 덕분에 저도 이제는 간단히 웹 폰트를 교체할 수 있게 되었어요. 정말 감사합니다.

방법은 아주 간단합니다. 웹 폰트 코드를 추가하고, CSS 안에서 @font-family 옆에 있는 기존 글꼴 이름(Noto Sans 등)을 사용하고 싶은 웹 폰트 이름으로 바꿔주기만 하면 됩니다. 주로 body, th, td, input, select, textarea, button 같은 기본 요소들에 적용되어 있는데, 이건 사용하는 티스토리 스킨마다 조금씩 다를 수 있으니 주의해야 해요. 제 경우엔 그냥 font-family라는 단어를 검색해서 바로 찾았습니다. 이 내용은 이미 다른 분들이 자세하게 정리해 두셨고, 사실 지금 이 글도 새로운 정보는 아닙니다. 그냥 저처럼 과거에 어려워하던 분들이 한 명이라도 쉽게 적용하실 수 있으면 좋겠다는 마음으로 작성하는 거예요. 눈누처럼 좋은 사이트 하나 더 알았구나. 그 정도 느낌으로 봐주시면 좋겠습니다.

웹 폰트를 사용하면서 느낀 가장 큰 장점은 글씨체가 질릴 때 쉽게 바꿀 수 있다는 점입니다. 스킨을 바꾸지 않아도, 코드 몇 줄만 수정하면 완전히 다른 분위기로 바꿀 수 있으니까요. 단점도 있습니다. 폰트마다 자간(글자 사이 간격)이나 글자 형태가 다르다 보니, 폰트를 바꿀 때마다 글 배치나 간격이 미묘하게 달라질 수 있어요. 저는 개인적으로 문단만 나눠 쓰고 줄 간격에는 크게 신경을 안 쓰는 편이라 이 부분은 단점이라기보다 그냥 특성처럼 받아들이고 있습니다. 굳이 하나 더 꼽자면, 에디터에서 미리보기만으로는 실제 폰트 적용 상태를 완전히 확인하기 어렵다는 점이 있겠네요. 실제로 발행하고 새 창에서 열어봐야 '아, 진짜 적용됐구나' 하는 걸 알 수 있었는데 위의 티스토리 에디터에서 바로 적용하는 방법을 찾았습니다.

 

일반 한글 텍스트는 '한컴산스 라이트체'
<span class="en">으로 감싼 영어, <span class="num">으로 감싼 숫자만 '한컴 말랑말랑체'

눈누

일반 한글 텍스트는 '한컴산스 라이트체'를 사용했습니다. 이 글꼴은 눈누(nunuu)에서 무료로 제공되는 웹 폰트로, 가볍고 깔끔한 인상을 주기 때문에 본문용으로 매우 적합합니다. 특히 장문의 글에서도 피로감 없이 읽히는 것이 장점이죠.

눈누에는 다양한 분위기의 무료 폰트가 많지만, 그중에서도 '한컴산스 라이트'는 블로그 본문, 설명글, 사용법 안내 등 가독성이 중요한 콘텐츠에 최적화되어 있습니다. 라이선스도 개인·상업용 모두 자유로워서 안심하고 쓸 수 있습니다.

'한컴 말랑말랑체' 이 폰트는 둥글고 귀여운 인상을 주는 디자인 덕분에 숫자나 영문처럼 시각적으로 튀는 요소에 잘 어울립니다. 특히 Hello world!나 2025 같은 텍스트는, 말랑말랑체를 적용했을 때 훨씬 눈에 잘 들어오고, 강조 효과도 자연스럽게 살아납니다. 한컴 말랑말랑체 역시 눈누에서 무료로 제공되며, 개성 있는 스타일 덕분에 코드, 키워드, 숫자 등 특정 정보에 포인트를 줄 때 유용합니다. 감각적인 서체이면서도 깔끔하게 정돈된 인상을 주기 때문에, 본문용 서체와도 충돌 없이 잘 어울리는 것이 강점입니다.

이처럼 글꼴을 적절히 조합하면, 시각적인 가독성과 디자인 감각을 모두 챙길 수 있습니다. 특히 CSS나 JavaScript 코드처럼 영어가 많은 글을 쓸 때는, 통일감 있는 서체보다 구분감 있는 서체 조합이 오히려 방문자가 보기 더 편합니다. 2025처럼 숫자가 강조되어야 하는 부분도 마찬가지입니다. 디지털 시대에는 숫자 정보가 핵심인 경우가 많기 때문에, 폰트 하나만 잘 골라도 정보전달력이 달라집니다. 폰트 실험은 단순히 예쁜 글꼴을 고르는 일이 아닙니다. 목적에 맞는 글꼴을 선택하고, 서로 어울리게 조합하는 감각이 필요합니다. 특히 블로그처럼 다양한 방문자가 읽는 공간에서는 더욱 중요하죠.

지금 이 페이지처럼 테스트용 글을 만들어 두면, 나중에 본문 스타일을 정할 때 큰 도움이 됩니다. 본문은 산뜻하게, 코드와 숫자는 뚜렷하게. 간단하지만 강력한 전략입니다. 혹시 여러분도 폰트 실험을 하고 계신가요? 그렇다면 이렇게 한컴산스와 한컴 말랑말랑처럼, 상반된 개성이 느껴지는 글꼴을 짝지어 보세요. 생각보다 찰떡같이 어울립니다.

게다가 이런 글꼴 조합은 웹 폰트(Web Font)로 불러오기 때문에 방문자 디바이스에 해당 폰트가 설치되어 있지 않아도 문제없이 보입니다. CSS의 @font-face 기능을 활용하면, 눈누와 같은 무료 폰트 저장소에서 바로 불러와 사용할 수 있습니다. 덕분에 글자가 깨지거나 기본 폰트로 대체되는 문제 없이, 모든 독자에게 동일한 시각 경험을 제공할 수 있죠. 특히 블로그, 포트폴리오, 프레젠테이션 페이지 등에서 일관된 디자인을 유지하려면 웹 폰트는 사실상 필수입니다.

한 가지 팁을 드리자면, 웹 폰트를 너무 많이 쓰면 페이지 로딩 속도가 느려질 수 있으니, 꼭 필요한 서체만 불러오고, woff2 포맷처럼 용량이 가벼운 형식을 선택하는 것이 좋습니다. 다행히 눈누에서 제공하는 대부분의 서체는 이러한 최적화가 잘 되어 있습니다.

이제 여러분도 자신만의 글꼴 조합을 만들어보세요. 웹 폰트 시대에선 디자인 감각도 코드처럼 조율할 수 있습니다. 어쩌면 '폰트'는 글보다 먼저 방문자의 눈길을 사로잡는 첫 번째 콘텐츠일지도 모릅니다.