[이모저모] 티스토리 모바일 영문 단어 분리 문제를 줄이는 CSS 정리

안녕하세요. 수요일의 21입니다. 결론부터 말하면, 티스토리 글쓰기 에디터 안에서도 충분히 처리할 수 있다. 굳이 스킨 편집까지 들어갈 필요는 없다. 특히 나처럼 블로그 전체 구조를 바꾸려는 것이 아니라, 특정 글 하나의 폰트, 자간, 줄 간격, 양쪽 정렬 정도만 조절하고 싶은 경우라면 글쓰기 에디터의 HTML 모드만으로도 충분하다.

블로그 전체 구조를 바꿀 생각이라면 스킨 CSS를 직접 수정하는 쪽이 맞다. 다만 여기서 말하는 건 전체 디자인을 바꾸는 이야기가 아니라, 모바일에서 영문 단어가 중간에 분리되는 문제를 CSS로 잡는 정도다. 그 부분만 바로 적용하고 싶은 경우에는 맨 아래에 따로 정리한 CSS 코드(스킨 편집)를 참고하면 된다.

이 글에는 줄 노트 배경이 적용되어 있다. PC에서는 노트처럼 줄이 보이지만, 모바일에서는 화면 폭이 좁아 줄 위치가 쉽게 어긋날 수 있어서 줄 노트를 아예 빼는 쪽으로 정리했다. 맞추는 방법이 없지는 않겠지만, 거기까지 붙잡고 있기에는 이미 충분히 지쳤다.

<!-- =========================================================
  티스토리 글쓰기 에디터용 기본 틀

  핵심
  - 본문 글자 크기 변경 위치를 변수로 분리
  - 줄노트 선 색상/두께를 변수로 분리
  - 줄노트는 문단 p.line-note-only-pc에만 적용
  - 리스트, 표, 코드블럭에는 줄노트 적용하지 않음
  - 색상/배경색 span에도 폰트 유지
  - 인라인 code에도 폰트 적용
  - 코드블럭은 티스토리 기본 디자인 유지
  - 표 글자 크기 18px
  - 표 안 글자 왼쪽 정렬
  - 영문 줄바꿈/단어 분리 방지 관련 설정 포함
========================================================= -->

<div>
<style>
/* Cafe24 써라운드에어 웹폰트 불러오기 */
@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;
  font-display: swap;
}

/* 글 전체 설정값 */
.cafe24-post {
  --post-font-family: 'Cafe24SsurroundAir', sans-serif;

  /* PC 본문 글자 크기 */
  --post-font-size-pc: 18px;

  /* 모바일 본문 글자 크기 */
  --post-font-size-mobile: 18px;

  /* PC 본문 줄간격 */
  --post-line-height-pc: 1.7;

  /* 모바일 본문 줄간격 */
  --post-line-height-mobile: 1.75;

  /* 줄노트 한 줄 간격 */
  --post-line-step-pc: 1.7em;

  /* 표 글자 크기 */
  --table-font-size-pc: 18px;

  /* 모바일 표 글자 크기 */
  --table-font-size-mobile: 16px;

  /* 줄노트 선 색상 */
  --note-line-color: #d0d0d0;

  /* 줄노트 선 두께 */
  --note-line-thickness: 1px;
}

/* 글 전체 폰트 적용 */
.cafe24-post,
.cafe24-post p,
.cafe24-post span,
.cafe24-post div,
.cafe24-post b,
.cafe24-post strong,
.cafe24-post u,
.cafe24-post ins,
.cafe24-post mark,
.cafe24-post ul,
.cafe24-post ol,
.cafe24-post li,
.cafe24-post table,
.cafe24-post th,
.cafe24-post td {
  font-family: var(--post-font-family) !important;
}

/* 색상/배경색 span에도 폰트 유지 */
.cafe24-post span[style*="color"],
.cafe24-post span[style*="background-color"],
.cafe24-post span[style*="font-family"],
.cafe24-post span * {
  font-family: var(--post-font-family) !important;
}

/* 본문 문단 조판 */
.cafe24-post p {
  font-size: var(--post-font-size-pc) !important;
  line-height: var(--post-line-height-pc) !important;

  /* 양쪽 정렬 */
  text-align: left !important;
  
  /* 영문/한글 단어 중간 분리 방지 */
  word-break: keep-all;

  /* 너무 긴 영어 단어, URL, 코드 조각이 화면 밖으로 나가지 않게 처리 */
  overflow-wrap: break-word;

  /* 일반 문장처럼 자연스럽게 줄바꿈 */
  white-space: normal;

  letter-spacing: -0.1px;
  margin: 0 0 28px 0;
}

/* 문단 안 span은 p의 크기와 줄간격을 따라감 */
.cafe24-post p > span,
.cafe24-post p span[style*="font-family"] {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* 줄노트는 문단에만 적용 */
.cafe24-post p.line-note-only-pc {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--post-line-step-pc) - var(--note-line-thickness)),
    var(--note-line-color) calc(var(--post-line-step-pc) - var(--note-line-thickness)),
    var(--note-line-color) var(--post-line-step-pc)
  );
  background-size: 100% var(--post-line-step-pc);
  padding: 20px;
  box-sizing: border-box;
}

/* 밑줄 스타일 */
.cafe24-post u,
.cafe24-post ins {
  text-decoration-line: underline !important;
  text-decoration-color: #e06b6b !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* 리스트는 줄노트 없이 폰트/크기만 맞춤 */
.cafe24-post ul,
.cafe24-post ol {
  font-size: 18px !important;
  line-height: 1.7 !important;
  padding-left: 24px;
  margin: 0 0 28px 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.cafe24-post ul li,
.cafe24-post ol li {
  margin: 0 0 6px 0;
}

/* 문장 안의 짧은 code 태그 */
.cafe24-post p code,
.cafe24-post li code,
.cafe24-post td code,
.cafe24-post th code,
.cafe24-post span code {
  font-family: var(--post-font-family) !important;
  font-size: 0.95em !important;
  background: #f5f5f5;
  padding: 0 4px;
  border-radius: 4px;
}

/* 코드블럭 폰트 적용 */
.cafe24-post pre,
.cafe24-post pre code,
.cafe24-post pre code span,
.tt_article_useless_p_margin pre,
.tt_article_useless_p_margin pre code,
.tt_article_useless_p_margin pre code span,
.contents_style pre,
.contents_style pre code,
.contents_style pre code span {
  font-family: var(--post-font-family) !important;
}

/* 코드블럭 줄바꿈 */
.cafe24-post pre,
.cafe24-post pre code,
.tt_article_useless_p_margin pre,
.tt_article_useless_p_margin pre code,
.contents_style pre,
.contents_style pre code {
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* 표 글자 크기 18px, 왼쪽 정렬 */
.cafe24-post table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size-pc) !important;
}

.cafe24-post th,
.cafe24-post td {
  font-family: var(--post-font-family) !important;
  font-size: inherit !important;
  text-align: left !important;
  border: 1px solid #ddd;
  padding: 8px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 모바일에서는 줄노트 제거 */
@media screen and (max-width: 768px) {
  .cafe24-post p {
    font-size: var(--post-font-size-mobile) !important;
    line-height: var(--post-line-height-mobile) !important;
    text-align: left !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .cafe24-post p.line-note-only-pc {
    background-image: none !important;
    padding: 0 !important;
  }

  .cafe24-post table {
    font-size: var(--table-font-size-mobile) !important;
  }

  .cafe24-post th,
  .cafe24-post td {
    text-align: left !important;
  }
}
</style>
</div>

<div class="cafe24-post">
<p class="line-note-only-pc" data-ke-size="size16">
  <span style="font-family: 'Cafe24SsurroundAir', sans-serif;">
    본문 내용 입력
  </span>
</p>

<ul style="list-style-type: disc;" data-ke-list-type="disc">
  <li><span style="font-family: 'Cafe24SsurroundAir', sans-serif;">리스트 내용 입력</span></li>
</ul>
</div>

이 글에서 글자 크기를 조절하는 핵심은 문단 태그인 p 자체가 아니라 CSS의 .cafe24-post p 영역이다. 이 안에 들어 있는 font-size: 18px;가 PC에서 보이는 본문 크기이고, 모바일에서는 미디어쿼리 안에 따로 지정한 font-size: 17px;가 적용된다. 나는 PC와 모바일의 글자 크기를 일단 같은 크기로 맞췄다. 처음에는 p 태그에 직접 스타일을 넣어 해결하려고 했지만, 한 번에 관리하는 쪽이 더 깔끔했다.

문단 안쪽에 넣은 <span style="font-family: ...">는 글자 크기를 조절하기 위한 코드가 아니다. 모바일 화면에서도 웹 폰트가 풀리지 않도록 실제 문장을 한 번 더 감싸두는 안전장치다.

 

• 본문 폰트는 .cafe24-post 안에서만 적용된다.
• 문단 크기는 .cafe24-post p의 font-size에서 바꾼다.
• 모바일 폰트 유지가 필요하면 실제 글자를 span style로 감싼다.

1. PC 본문 크기는 font-size: 18px;에서 조정한다.
2. 모바일 본문 크기는 media query 안의 font-size: 17px;에서 조정한다.
3. 리스트에는 줄 노트를 넣지 않는 쪽이 여백이 덜 부담스럽다.

구분	담당 역할	수정 위치
PC 글자 크기	본문 기본 크기	--post-font-size-pc
모바일 글자 크기	모바일 본문 크기	--post-font-size-mobile
줄노트 선 색상	줄노트 진하기 조절	--note-line-color
줄노트 선 두께	줄노트 두께 조절	--note-line-thickness
리스트	줄노트 제외	ul, ol에는 line-note 클래스 미사용
코드블럭	티스토리 기본 박스 유지	pre, pre code의 배경/패딩/마진은 건드리지 않음

.cafe24-post {
  --post-font-size-pc: 18px;      /* PC 본문 글자 크기 */
  --post-font-size-mobile: 18px;  /* 모바일 본문 글자 크기 */
  --table-font-size-pc: 18px;     /* PC 표 글자 크기 */
  --table-font-size-mobile: 16px; /* 모바일 표 글자 크기 */

  --note-line-color: #d0d0d0;     /* 줄노트 선 색상 */
  --note-line-thickness: 1px;     /* 줄노트 선 두께 */
}

/* 표 글자 크기 18px, 왼쪽 정렬 */
.cafe24-post table {
  font-size: var(--table-font-size-pc) !important;
}

.cafe24-post th,
.cafe24-post td {
  font-size: inherit !important;
  text-align: left !important;
}

예를 들어 본문 크기를 조금 더 키우고 싶다면 PC 쪽의 --post-font-size-pc: 18px;를 19px로 바꾸면 된다. 모바일도 같이 키우고 싶다면 --post-font-size-mobile: 18px;를 19px로 바꾸면 된다.

word-break: break-all;

처음 이 글을 쓰려고 했던 이유는 티스토리 포럼에서 본 질문 때문이었다. 모바일에서 영문 문장이 줄 바뀜될 때 단어 철자가 중간에서 분리되는 문제였는데, 이 코드에는 그 현상을 줄이기 위한 설정도 들어가 있다. 핵심은 word-break: keep-all;이다. 이 값은 한글과 영문 단어가 글자 단위로 함부로 쪼개지는 것을 막는 데 도움을 준다. 다만 내가 사용하는 방식은 스킨 편집이 아니라 게시글 안에 코드를 직접 넣는 방식이기 때문에, 이 글에서는 CSS 설정을 중심으로 설명하려고 한다. CSS만 필요한 분들은 맨 아래에 따로 정리한 부분을 참고하면 된다.

모바일 화면을 볼 때 영어 단어가 중간에서 쪼개지는 현상은 보통 CSS에 저 속성이 들어가 있어서 그렇다.

코드	역할	영문 줄 바꿈 관련 효과
text-align: left !important;	양쪽 정렬	본문이 정돈돼 보이지만, 영어가 많으면 단어 사이 간격이 벌어질 수 있다.
text-justify: inter-word;	단어 기준 정렬 보정	영어 단어 사이 간격을 기준으로 양쪽 정렬을 맞추는 데 관여한다.
word-break: keep-all;	단어 중간 쪼개짐 방지	모바일에서 영문 철자가 중간에 갈라지는 문제와 직접 관련 있다.
overflow-wrap: break-word;	긴 단어/URL 넘침 방지	긴 영어, URL, 코드가 화면 밖으로 튀는 것을 막는다.
white-space: normal;	일반 문장 줄바꿈	문장을 일반 본문처럼 자연스럽게 줄바꿈하게 한다.

다만 text-align: left !important;가 들어가 있어서 본문은 양쪽 정렬로 보인다. 이 설정은 한글 위주의 문단에서는 깔끔해 보이지만, 영어 단어가 많이 섞이면 단어 사이 간격이 조금 벌어져 보일 수 있다. 그래서 현재 코드는 영문 철자 분리는 줄이되, 양쪽 정렬은 유지하는 방식이라고 보면 된다.

/* =========================================================
  처음 질문과 관련 있는 본문 줄바꿈/정렬 코드

  문제:
  - 모바일에서 영어 단어가 줄바뀜될 때 철자가 중간에서 갈라짐

  해결 방향:
  - word-break: keep-all;
    → 한글/영문 단어가 중간에서 함부로 쪼개지는 것 방지

  - overflow-wrap: break-word;
    → 너무 긴 영어 단어, URL, 코드 조각이 화면 밖으로 나갈 때만 줄바꿈

  - text-align: left !important;
    → 현재 수정본에서는 왼쪽 정렬 사용
    → 단, 영어가 많으면 단어 사이 간격이 벌어질 수 있음

  영어가 많은 글이라면:
  - text-align: left;
    → 왼쪽 정렬로 바꾸면 영어 간격이 더 자연스러움
========================================================= */
.cafe24-post p {
  text-align: left !important;
    word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  letter-spacing: -0.1px;
}

/* 영어가 많은 글에서 더 자연스럽게 보려면 이 방식 */
.cafe24-post p {
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

지금 코드는 영어 단어가 중간에서 잘리는 현상을 줄이기 위해 word-break: keep-all;을 넣었고, 긴 문자열이 화면 밖으로 나가는 상황을 막기 위해 overflow-wrap: break-word;를 함께 사용한다. 다만 양쪽 정렬을 유지하고 있기 때문에 영어가 많은 문장에서는 단어 사이가 벌어져 보일 수 있다.

예를 들어 모바일 화면에서 Photography, CameraSettings, WordPressCustomization 같은 영문 단어가 줄 끝에 걸리면, 설정에 따라 단어가 어색하게 잘릴 수 있다. 특히 word-break: break-all;처럼 글자 단위 줄 바꿈을 허용하는 값이 들어가 있으면 영문 단어가 철자 중간에서 끊겨 보일 가능성이 커진다.

예시로 Photography is not just about camera settings.라는 문장이 있다고 해보자. 화면 폭이 좁을 때 설정이 맞지 않으면 Photography 같은 단어가 중간에서 갈라져 보일 수 있다. 반대로 word-break: keep-all;을 적용하면 일반적인 단어는 최대한 유지하려고 하고, 정말 길어서 화면을 넘기는 문자열만 overflow-wrap: break-word;가 처리하게 된다.

/* 예시 문장 */
Photography is not just about camera settings.
WordPressCustomization can sometimes break awkwardly on mobile.

/* 권장 방향 */
.cafe24-post p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 피하고 싶은 방향 */
.cafe24-post p {
  word-break: break-all;
}

물론 이것도 완벽한 해결책은 아니다. 너무 긴 영문 단어, 붙여 쓴 코드명, URL처럼 애초에 띄어쓰기가 거의 없는 문자열은 결국 어딘가에서 줄 바꿈이 필요하다. 그래서 이 코드는 영문을 절대 끊지 않는 설정이라기보다, 일반적인 단어는 최대한 보호하고 화면을 넘치는 긴 문자열은 적당히 처리하는 절충안이다.

 

여기까지는 내가 게시글 안에 넣은 코드 기준의 설명이고, 아래는 스킨 CSS 자체를 수정하고 싶은 사람을 위한 별도 정리다.

 

티스토리 관리자에서 스킨 편집 → html 편집 → CSS로 들어간 뒤, 맨 아래쪽에 아래 코드를 추가.

@media screen and (max-width: 768px) {
  .entry-content,
  .entry-content p,
  .article_view,
  .article_view p,
  .post-content,
  .post-content p {
    word-break: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

핵심은 이 부분.

word-break: normal;
overflow-wrap: break-word;

word-break: normal은 영어 단어를 무리하게 철자 단위로 끊지 않게 해주고, overflow-wrap: break-word는 너무 긴 URL이나 긴 영문 문자열이 화면을 뚫고 나갈 때만 적당히 줄 바꿈하게 해준다.

조금 더 강하게 전체 본문에 적용하고 싶다면 이 방법을 쓰면 된다.

@media screen and (max-width: 768px) {
  body,
  p,
  div,
  span,
  .entry-content,
  .article_view {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

다만 이 방식은 적용 범위가 넓어서 메뉴, 제목, 사이드바까지 영향을 줄 수 있다. 그래서 먼저 첫 번째 코드처럼 본문 영역 위주로 적용하는 편이 안전하다.

제목에서도 영문이 쪼개진다면 아래 코드도 추가하면 된다.

@media screen and (max-width: 768px) {
  h1, h2, h3, h4,
  .title,
  .post-title,
  .entry-title {
    word-break: normal !important;
    overflow-wrap: break-word;
  }
}

모바일 영문 단어 분리 문제는 대부분 word-break: break-all; 때문에 생기므로, CSS 맨 아래에 word-break: normal !important;로 덮어쓰면 해결될 가능성이 높다.

블로그 전체에 적용하고 싶으면 스킨 CSS를 만지는 게 맞고, 특정 글에서만 실험하고 싶다면 글쓰기 에디터 안에서 처리하는 쪽이 부담이 덜하다.

다만 티스토리는 에디터 화면, 미리 보기 화면, 실제 발행 화면이 조금씩 다르게 보일 때가 있다. 그래서 코드를 복사해서 넣기 전에는 기존에 쓰던 코드를 따로 저장해두는 습관도 필요하다. 그래야 문제가 생겼을 때 당황하지 않고 바로 원래 상태로 되돌릴 수 있다.