[이모저모] 티스토리 웹 폰트, 도대체 왜 모바일에서만 안 나오는가

안녕하세요. 목요일의 21입니다. 솔직히 어떻게 보일지 모르겠습니다. 폰트 테스트는 계속 진행 중입니다. PC에서는 Neo둥근모 폰트가 잘 보이지만, 모바일에선 기본 폰트로 나오는 경우가 종종 있더군요. 이 글은 챗GPT의 도움을 받아 작성한 개인적인 실험 기록이라, 아래 내용이 정확하지 않을 수도 있습니다. 그냥 참고용으로 봐주시면 됩니다.

 

어떤 게 좋은지 모르겠습니다.

 

항목	클래스 기반 class="..."	인라인 스타일 기반 style="..."
스타일 적용 방식	외부 CSS 또는 <style> 태그에서 정의된 클래스를 불러옴	HTML 태그 안에 직접 스타일 속성을 써서 즉시 적용
우선순위	낮음 (다른 스타일에 쉽게 덮임)	높음 (웬만한 CSS를 이김)
유지보수	좋음 (한 군데에서 수정하면 전체 반영)	나쁨 (하나하나 일일이 수정해야 함)
에디터 호환성	티스토리 에디터에서는 정렬 버튼 눌러도 반영 안 될 수 있음	에디터 정렬 버튼과 연동됨 (보여지는 대로 적용됨)
재사용성	여러 문단에 반복 적용 용이	매번 써야 함, 귀찮고 코드 지저분
적용 실패 확률	상대적으로 높음 (스타일이 누락되면 적용 안 됨)	거의 없음 (브라우저가 바로 처리)

 

이 문장은 클래스 기반 양쪽 정렬입니다.

<style>
.my-style {
  font-family: 'NeoDunggeunmo';
  text-align: justify;
  line-height: 1.8;
}
</style>

<p class="my-style">문단 1</p>
<p class="my-style">문단 2</p>
<p class="my-style">문단 3</p>

<style>
.justified {
  text-align: justify;
  font-family: 'NeoDunggeunmo', sans-serif;
  line-height: 1.8;
}
</style>

<p class="justified">
  이 문장은 클래스 기반 양쪽 정렬입니다.
</p>

이 문장은 인라인 스타일 기반 양쪽 정렬입니다.

<p style="font-family: 'NeoDunggeunmo'; text-align: justify; line-height: 1.8;">문단 1</p>
<p style="font-family: 'NeoDunggeunmo'; text-align: justify; line-height: 1.8;">문단 2</p>
<p style="font-family: 'NeoDunggeunmo'; text-align: justify; line-height: 1.8;">문단 3</p>

<p style="text-align: justify; font-family: 'NeoDunggeunmo', sans-serif;">
  이 문장은 인라인 스타일 기반 양쪽 정렬입니다.
</p>

[이모저모] <span>이 문제였을까? 티스토리 웹 폰트 다시 실험 중

솔직히 어떤 방법이 모바일에서 제대로 나오는지 몰라서, 결국 죄다 시도해 보고 있는 중입니다. 이것저것 손대다 보면 뭐라도 되겠지 싶어서요. 저번에 시도했던 것은 <p class>에 <span>을 전 문장에 걸쳐 감싸서 테스트했는데, 신기하게도 모바일에선 폰트가 잘 나오더군요. 그런데 양쪽 정렬을 하자 자간이 뭔가 중간에 삐끗한 느낌이랄까. 사실 그땐 제가 한컴 말랑말랑체랑 한컴 산스체를 같이 쓴다는 조합을 시도했었거든요. 지금 생각하면 네, 그냥 실수였습니다. 나중에 아차 싶더라고요.

.hancom-mixed :is(span.en, span.num) {
  font-family: 'HancomMalangMalang-Regular';
  font-weight: 400;
}

<p class="hancom-mixed" style="text-align: left;" data-ke-size="size16"><span class="en"><b><u>사실 이쯤 되면 약간 고집 같기도 합니다.</u></b></span> <span class="en">그냥 기본 폰트 쓰면 되지, 왜 굳이 웹 폰트에 이렇게 집착하느냐고 묻는 분도 있을 수 있죠. 디자인적인 만족감이랄까요. 내가 쓴 글이 딱 의도한 그 폰트로 내가 고른 자간과 크기로 딱 나와주는 그 순간의 쾌감이 있습니다.</span></p>

심지어 그때는 영어랑 숫자 부분만 따로 말랑말랑체로 지정해 보겠다고 이런 식으로 하고 나중에 "아, 내가 저걸 넣었었지..." 하고 뒤늦게 떠올린 거죠. 즉, 제가 저렇게 한 걸 잊었으니, <span> 처리하지 않았던 글은 모바일에서 기본 폰트로 나왔던 거였죠. 그러니까 정리하면, 자기가 깔아놓은 지뢰를 자기가 밟은 셈이었습니다. 그걸 수정하려고 보니 이미 HTML 구조가 너무 복잡하고 지저분해져 있어서, 그냥 아예 새로 정리하면서 테스트를 다시 시작하고 있습니다. 처음부터 다시 짜는 게 차라리 마음이 편하더군요. 물론, 마음만요.

<div>
<style>
@font-face {
  font-family: 'NeoDunggeunmo';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.neodunggeunmo {
  font-family: 'NeoDunggeunmo', sans-serif;
  font-size: 18px;
  line-height: 1.7;
}
</style>
</div>
<p style="font-family: NeoDunggeunmo, sans-serif;">
  안녕하세요. 수요일의 21입니다.
</p>

<div>
<style>
@font-face {
  font-family: 'NeoDunggeunmo';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff') format('woff');
}
.neodunggeunmo {
  font-family: 'NeoDunggeunmo', sans-serif;
  font-size: 18px;
  line-height: 1.7;
}
</style>
</div>
<p class="neodunggeunmo" data-ke-size="size16">어떤 게 좋은지 모르겠습니다.</p>
<div>

여하튼 이 글을 쓰게 된 건, 최근 들어 폰트 관련 검색어로 들어오시는 분들이 부쩍 늘었기 때문입니다. 저도 의외였습니다. 이게 검색이 된다고? 싶은데, 검색 유입이 분명히 있더군요. 무료 폰트, Neo둥근모 적용 방법, 티스토리 폰트 깨짐, 모바일 폰트 안 먹힘 같은 키워드들입니다. 그런 걸 보면 역시 누군가는 저처럼 삽질 중이라는 이야기겠죠. 반갑습니다, 동지여. 물론 저도 처음엔 그냥 폰트 하나쯤 바꾼다고 뭐가 달라지겠어? 하는 마인드였는데요. 막상 적용해 보니 생각보다 많은 문제가 튀어나오더군요.

 

특히 티스토리 모바일에서의 폰트 적용 문제는 분명 코드에는 폰트를 박아 넣었는데, 스마트폰 브라우저는 내가 왜 그걸 써야 하는데? 하며 뻔뻔하게 기본 폰트로 뱉어냅니다. 챗GPT의 도움을 받아서 하긴 하는데, 이쯤 되면 내가 코딩을 하는 건지, 블로그에 글을 쓰는 건지 헷갈리기 시작합니다.

 

그러니까 결론은요? 글쎄요. 이게 정답이다! 하고 시원하게 내릴 수 있는 결론이 없다는 게 결론입니다. 클래스 기반이든 인라인 스타일이든, PC에선 괜찮다가 모바일에선 또 발길질당하고, 에디터에선 멀쩡해 보이다가 실제 게시글에선 뒤통수를 치고... 이쯤 되면 폰트 테스트가 아니라 정신력 테스트입니다. 혹시 지금 이 글을 보고 계신다면, 그리고 당신도 왜 이 폰트가 모바일에서만 말을 안 듣지? 라며 새벽 2시에 브라우저를 껐다가 켰다 하고 있다면... 반갑습니다. 당신, 지금 아주 제대로 하고 계십니다. 그럼 저는 또 새로운 테스트 결과를 안고 돌아오겠습니다. 실패가 있으면 또 글이 나올 거고요.