[이모저모] 티스토리 본문 정렬, 결국 PC와 모바일을 나눴다

안녕하세요. 수요일의 21입니다. 지난 글에서는 티스토리 글쓰기 에디터 안에서 본문 폰트, 줄 노트, 그리고 모바일에서 영문 단어가 중간에 잘리는 문제를 정리해 봤다. 처음에는 꽤 만족스러웠다. 적어도 Photography, CameraSettings, WordPressCustomization 같은 단어가 모바일 화면에서 이상하게 쪼개지는 문제는 줄어드는 것처럼 보였기 때문이다. 그런데 막상 글을 조금 더 다듬다 보니 다른 문제가 보였다. 이번에는 양쪽 정렬이었다.

에디터에서는 저렇게 보이지만, 미리 보기에서는 또 정상적으로 나온다. 다만 실제로 발행했을 때 최종 화면에서 어떻게 보일지는 올리기 전까지는 알 수 없다. 지난 글은 영문 자간은 크게 문제없어 보였는데, 한글 자간이 벌어져서 결국 왼쪽 정렬로 바꿔봤다. 중간에 다시 수정할까도 생각했지만, 솔직히 거기까지 손대기에는 이미 지쳐 있었다. 그래서 내용까지 다시 고치지는 않았다.

양쪽 정렬은 PC 화면에서 보면 확실히 깔끔해 보인다. 문단의 왼쪽과 오른쪽 끝이 가지런하게 맞으니, 그냥 왼쪽 정렬로 둔 글보다 조금 더 정돈된 느낌이 난다. 특히 긴 문단이 많은 글에서는 사각형으로 반듯하게 잡힌 본문이 보기 좋을 때도 있다. 문제는 모바일이다. 모바일은 화면 폭이 좁다. 줄 하나에 들어갈 수 있는 글자 수가 적다. 그 상태에서 양쪽 정렬을 걸면 브라우저는 문단의 양끝을 맞추기 위해 단어와 단어 사이의 공백을 늘린다.

한글 문단만 있을 때는 그나마 덜 거슬릴 수 있다. 하지만 영어 단어, URL 같은 것이 섞이면 이야기가 달라진다. 단어는 덜 쪼개지는데, 대신 공백이 벌어진다. 그러니까 하나를 고쳤더니 다른 하나가 눈에 들어온 셈이다. 영문 단어가 중간에서 갈라지는 문제를 줄이려고 word-break: keep-all;을 넣었고, 긴 문자열이 화면 밖으로 나가는 것을 막으려고 overflow-wrap: break-word;를 넣었는데, 양쪽 정렬까지 함께 쓰면 모바일에서는 줄마다 간격이 들쭉날쭉해질 수 있다.

/* PC와 모바일 모두 양쪽 정렬을 적용한 경우 */
.cafe24-post p {
  text-align: justify !important;
  text-justify: inter-word;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

위 코드는 양쪽 정렬도 되고, 영문 단어가 글자 단위로 마구 쪼개지는 것도 어느 정도 막아준다. 너무 긴 URL이나 긴 코드명은 화면 밖으로 튀지 않도록 처리한다. 하지만 모바일에서는 문제가 생길 수 있다. 줄 폭이 좁은 상태에서 단어를 최대한 유지하려고 하면, 브라우저는 남는 공간을 공백으로 밀어내게 된다. 그래서 글자가 잘리는 대신 단어 사이가 벌어진다. 결국 문제만 달라지는 셈이다.

설정	장점	문제점
text-align: justify;	문단 양끝이 맞아 깔끔해 보임	모바일에서 단어 사이 간격이 벌어질 수 있음
word-break: keep-all;	영문 단어가 중간에서 잘리는 현상을 줄임	줄 끝에서 공백 조정이 더 눈에 띌 수 있음
overflow-wrap: break-word;	긴 URL이나 긴 문자열이 화면 밖으로 나가는 것을 막음	정말 긴 문자열은 결국 어딘가에서 끊어짐
text-align: left;	모바일에서 공백이 자연스럽고 읽기 편함	오른쪽 끝이 들쭉날쭉해 보일 수 있음

그래서 이번에는 타협안을 쓰기로 했다. PC에서는 양쪽 정렬을 유지하고, 모바일에서는 왼쪽 정렬로 돌리는 방식이다. PC 화면은 폭이 넓어서 양쪽 정렬을 걸어도 공백이 과하게 벌어질 가능성이 상대적으로 낮다. 반대로 모바일은 폭이 좁아서 왼쪽 정렬이 더 안전하다. 오른쪽 끝이 조금 들쭉날쭉하더라도, 단어 사이 공백이 이상하게 벌어지는 것보다는 낫다.

/* PC에서는 양쪽 정렬 */
.cafe24-post p {
  text-align: justify !important;
  text-justify: inter-word;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 모바일에서는 왼쪽 정렬 */
@media screen and (max-width: 768px) {
  .cafe24-post p {
    text-align: left !important;
    text-justify: auto;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
  }
}

자간도 조금 조정했다. 양쪽 정렬을 쓰면서 자간까지 너무 줄이면 글이 답답해 보일 수 있다. 그래서 PC에서는 -0.05px 정도로 약하게만 잡고, 모바일에서는 아예 0px로 두는 쪽이 낫다고 봤다. 다만 모바일에서까지 마이너스 자간을 강하게 넣으면 글이 빽빽해 보일 수 있다.

.cafe24-post {
  --post-letter-spacing-pc: -0.05px;
  --post-letter-spacing-mobile: 0px;
}

.cafe24-post p {
  letter-spacing: var(--post-letter-spacing-pc);
}

@media screen and (max-width: 768px) {
  .cafe24-post p {
    letter-spacing: var(--post-letter-spacing-mobile);
  }
}

양쪽 정렬은 PC에서는 여전히 보기 좋을 수 있다. 다만 모바일에서는 생각보다 까다롭다. 특히 한글 문장 안에 영어 단어, URL이 섞이면 양쪽 정렬이 오히려 읽는 것을 해칠 수 있다. 그래서 이번 정리는 PC는 양쪽 정렬, 모바일은 왼쪽 정렬이다.

• PC 본문은 양쪽 정렬로 유지한다.
• 모바일 본문은 왼쪽 정렬로 바꾼다.
• 영문 단어 쪼개지는 방지를 위해 word-break: keep-all;을 사용한다.
• 긴 URL이나 긴 문자열 처리를 위해 overflow-wrap: break-word;를 함께 사용한다.
• 줄 노트는 PC 문단에만 적용하고 모바일에서는 제거한다.

아래는 이번 글에 사용한 정렬 관련 핵심 코드만 따로 뽑은 것이다. 다만 스킨마다 본문 클래스명이 다를 수 있으니, 실제 발행 화면에서 확인은 필요하다.

/* 핵심 정리: PC는 양쪽 정렬, 모바일은 왼쪽 정렬 */

.cafe24-post p {
  text-align: justify !important;
  text-justify: inter-word;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
  letter-spacing: -0.05px;
}

@media screen and (max-width: 768px) {
  .cafe24-post p {
    text-align: left !important;
    text-justify: auto;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    letter-spacing: 0;
  }
}

문장이 짧거나, 긴 단어가 들어가거나, URL이 섞이면 영어도 단어 사이 공백이 벌어진다. 한글 문단도 양쪽 정렬을 걸면 어절 사이 공백이 벌어지는 현상이 있다. 글자가 망가지는 건 아닌데, 줄 끝을 맞추는 과정에서 어떤 줄은 띄어쓰기가 유난히 넓어 보인다. 특히 모바일처럼 화면 폭이 좁은 곳에서는 그 차이가 더 쉽게 보인다.

모바일에서도 양쪽 정렬을 할 수는 있다. 안 되는 건 아니다. 다만 보기 좋게 유지하려면 결국 문단마다 확인해야 한다. 화면 폭이 좁은 모바일에서는 줄마다 들어가는 글자 수가 달라지고, 한글 사이에 영어 단어, 숫자, URL 같은 것이 섞이면 어절 사이가 넓어 보일 수 있다. 그러니 모바일 양쪽 정렬도 불가능한 건 아니지만, 발행 화면을 보면서 이상한 문단을 하나씩 확인해야 한다. 그걸 일일이 손보기에는 시간이 많이 든다. 본문 정렬을 나누긴 했는데, 막상 새 글을 쓸 때는 또 그냥 양쪽 정렬을 고수할 것 같다.