일상다반사

[이모저모] 티스토리 웹 폰트 테스트, 이것은 글쓰기인가 디버깅인가

센고쿠 2025. 6. 2. 01:01
728x90
반응형

안녕하세요. 월요일의 21입니다. 이것은 카페24 써라운드에어 폰트로 작성된 테스트 문장입니다.
챗GPT의 도움을 받아 테스트해 보고 있습니다.
폰트 크기는 18px설정되어 있습니다.
티스토리 글쓰기 화면에서 툴바의 '양쪽 정렬', 굵게, 밑줄, 색상 등이 모두 잘 작동합니다.
PC/모바일에서도 폰트가 제대로 적용됩니다.
이 문장도 굵기, 밑줄, 색상 모두 적용됩니다.

<!-- 1. 웹폰트 선언 및 자동 적용 CSS -->
<div>
<style>
@font-face {
  font-family: 'Cafe24SsurroundAir';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
  
  /* 전체 본문에 폰트 적용 (글 전체의 상위 wrapper에 붙이기) */
body, p, span, div {
  font-family: 'Cafe24SsurroundAir', sans-serif !important;
}

/* color 있는 span도 따로 유지 */
span[style*="color"],
span[style*="background-color"] {
  font-family: 'Cafe24SsurroundAir', sans-serif !important;
}
  
  /* 일반 문장도 span으로 감싸면 폰트 유지됨 */
span.cafe24 {
  font-family: 'Cafe24SsurroundAir', sans-serif;
}
  
 /* 
    .justify-safe 클래스
    - 한글은 양쪽 정렬
    - 자간 벌어짐 최소화
    - 모바일에서도 안정적인 줄바꿈 처리
  */
.justify-safe {
  font-family: 'Cafe24SsurroundAir', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  text-align: justify;           /* 양쪽 정렬 */
  text-justify: inter-word;      /* 단어 단위 기준 정렬 */
  word-break: keep-all;          /* 한글 단어 중간 끊김 방지 */
  white-space: normal;           /* 영어 줄바꿈 허용 */
  letter-spacing: -0.1px;        /* 자간 약간 좁힘 (필요시) */
}

/* 긴 영어 단어 전용 – 줄바꿈 방지 및 자간 유지 */
.justify-safe span.english {
  white-space: nowrap;
  letter-spacing: normal;
}
  
  /* 코드 블럭도 줄바꿈되게 */
pre code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  display: block;
  font-family: 'Cafe24SsurroundAir', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 1em;
  background: #f9f9f9;
  border-radius: 6px;
  box-sizing: border-box;
  max-width: 100%;
}
</style>
</div>
<!-- 2. 본문 내용 -->
<p style="font-size: 18px; line-height: 1.7; text-align: justify;" data-ke-size="size16"><span style="font-family: 'Cafe24SsurroundAir', sans-serif;"> 안녕하세요. 월요일의 21입니다. 이것은 <b>카페24 써라운드에어</b> 폰트로 작성된 테스트 문장입니다.<br />챗GPT의 도움을 받아 <span style="color: #6164c6;"><u><b>테스트해</b></u></span> 보고 있습니다.<br />폰트 크기는 <b>18px</b><span style="color: #c1bef9;"><u><b>설정되어</b></u></span> 있습니다.<br />티스토리 글쓰기 화면에서 <mark>툴바의 '양쪽 정렬', 굵게, 밑줄, 색상 등</mark>이 모두 잘 작동합니다.<br />PC/모바일에서도 폰트가 제대로 적용됩니다.<br /><span style="color: #0593d3;"><b><u> 이 문장도 굵기, 밑줄, 색상 모두 적용됩니다.</u></b></span></span></p>
<div>
  <style>
    @font-face {
      font-family: 'Cafe24SsurroundAir';
      src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }

    .cafe24-font {
      font-family: 'Cafe24SsurroundAir', sans-serif;
      font-size: 18px;
      line-height: 1.6;
    }
  </style>

  <div class="cafe24-font">
    이것은 Cafe24SsurroundAir 폰트로 작성된 테스트 문장입니다.<br>
    폰트 사이즈는 18px로 설정되어 있습니다.<br>
    티스토리 PC/모바일 모두에서 보일 거예요.
  </div>
</div>

▪ <div class="..."> 사용 시 단점 요약
– 마우스로 텍스트를 선택하거나 편집이 어려움.
(시각 편집기에서 블럭으로 처리됨)
– 에디터에서 '굵게', '밑줄', '정렬' 같은 툴바 기능이 적용되지 않거나 깨짐.
– 엔터 입력 시 div 블록이 통째로 깨지거나 쪼개질 수 있음.
– 복사-붙여넣기 시 구조가 날아가거나 스타일이 누락될 위험.

▪ 안정적인 대안
– 본문 전체에는 <p class="..."> 형태 사용 권장.
– 특정 단어나 문장은 <span style="...">으로 감싸서 부분 스타일링.
– 전체 폰트, 정렬 등은 <style>로 선언 후 본문에서는 클래스만 사용하는 구조.
색상이나 굵기를 지정했을 때, 모바일에서 기본 폰트로 깨지는 경우가 발생할 수 있음.
– 이 경우 아래처럼 span[style*="color"]에 폰트를 강제 지정해 주면 해결됨.

 

주의사항
<style> 태그는 에디터 상단이나 중간에 한 번만 삽입하면 되고, 이후는 <div class="cafe24-font">만 사용하면 됩니다. 에디터 미리보기에서는 적용 안 될 수 있지만, 실제 발행된 페이지에서는 정상 적용됩니다. <div class>의 단점은 제가 직접 테스트하며 느낀 건데요, 마우스로 텍스트 선택이 잘 안되거나, 툴바에서 '굵게', '밑줄', '정렬' 같은 편집 기능이 제대로 작동하지 않는 경우가 많았습니다. 설령 작동되더라도 모바일에서는 제대로 나오지 않는 경우도 있었고요.

 

심지어 엔터 입력 시 블록이 깨지거나, 복사-붙여넣기 시 스타일이 날아가기도 하더군요. 그래서 현재는 안정성을 위해 대부분의 본문을 <p>로 감싸고, 스타일이 필요한 구간만 <span style="...">으로 처리하는 방식을 쓰고 있습니다.

 

티스토리 에디터에서 HTML로 삽입한 텍스트라도, 글쓰기 화면에서 양쪽 정렬(Justify) 버튼으로 정렬이 먹히게 하려면 조건이 있습니다. 그런데 지금처럼 <style>로 클래스를 정의한 경우, 티스토리 에디터는 그 내부의 <div>를 일반 편집 영역으로 인식하지 않아서 툴바의 정렬 버튼이 적용되지 않습니다.

<div style="font-family: 'Cafe24SsurroundAir', sans-serif; font-size: 18px; line-height: 1.6;">
이것은 Cafe24SsurroundAir 폰트로 작성된 테스트 문장입니다.<br />
툴바에서 '양쪽 정렬' 눌러도 잘 작동합니다.<br />
폰트만 유지하고 나머진 티스토리 에디터로 제어하세요.
</div>
이것은 카페24 써라운드에어 폰트로 작성된 테스트 문장입니다.
툴바에서 '양쪽 정렬' 눌러도 잘 작동합니다.
폰트만 유지하고 나머진 티스토리 에디터로 제어하세요.

참고로 이 글처럼, <div style>로 작성된 경우에는 툴바의 정렬 버튼이 제대로 적용되지 않을 수 있으니 주의하세요. 원래는 챗GPT가 알려준 해결책이었는데, 적용이 안 되더라고요.

 

 

눈누

카페24 써라운드에어 - Cafe24

noonnu.cc

덧붙이자면, 이 예제에 사용한 카페24 써라운드에어 폰트는 눈누 사이트에서 제공되는 웹 폰트입니다. 웹 폰트이기 때문에 따로 파일을 다운로드하거나 설치할 필요 없이, 위처럼 <style> 태그 안에 @font-face 선언을 넣으면 티스토리에서도 바로 사용할 수 있습니다.

하지만 웹 폰트는 어디까지나 디자인 요소일 뿐, 티스토리 에디터의 본질적인 기능(양쪽 정렬, 굵게, 밑줄 등)과 충돌하지 않아야 합니다.


실제 테스트 결과, <div> 블록 내부에 스타일을 직접 넣는 방식은 툴바 기능과의 충돌 가능성이 크고, 모바일에서도 불안정했습니다.

 

  • 폰트는 눈누에서 불러오되,
  • 본문은 <p>, 강조는 <span style="..."> 조합이 가장 안정적이며,
  • <div>는 스타일 선언용으로만 사용하는 걸 추천합니다.

폰트도 물론 중요하지만, 편집기의 기본 기능과 충돌하지 않는 안정성이 훨씬 더 중요합니다.
결국 아무리 예쁜 글도 깨지면 꽝이니까요.

저는 티스토리 에디터 내에서 해결하려고 한 거라 그렇지, 편하게 하려면 CSS로 처리하면 되긴 합니다. 다만 굳이 이렇게 번거로운 방법을 적용하는 이유는 실시간으로 해당하는 폰트를 보면서 글을 쓰고 싶어서입니다. 물론, 이 모든 게 귀찮다면 그냥 기본 폰트에 맡기고 쓰는 것도 하나의 선택입니다. 굳이 웹 폰트까지 끌어다 쓰는 이유는 단순합니다.

글도 결국 보는 경험이니까요. 내 눈에 보기 좋아야 글도 더 쓰고 싶고, 전달력도 생기니까요. 그러니까 이건 디자인 욕심이라기보다는 글쓰기 지속력을 위한 작은 장치에 가깝습니다. 글 하나 쓰려다 코드 붙이고, 태그 바꾸고, 모바일에서 깨지는지 또 확인하고 있는 걸 보면 가끔 현타가 오기도 하지만요. 그러다 보면 문득 이런 생각이 듭니다. 내가 지금 글을 쓰는 건지, HTML 디버깅을 하는 건지. 하지만 또 이상하게 그렇게 세팅 다 해놓고 폰트 잘 적용된 상태에서 에디터 열리면 그 순간만큼은 괜히 뿌듯하단 말이죠. 다음 콘텐츠도 기대해 주세요.

728x90
반응형