[이모저모] 티스토리 줄 노트 본문 글씨 크기, PC와 모바일 같이 맞추기

 

안녕하세요. 목요일의 21입니다. 지난번에는 티스토리 글쓰기 에디터 안에서 줄 노트 스타일을 넣고, 모바일에서도 글씨가 줄 밖으로 벗어나지 않게 만드는 테스트를 해봤습니다. 그런데 역시 블로그 꾸미기라는 것은 한 번에 끝나는 일이 아니었습니다. 하나를 고치면 하나가 보이고, 하나를 맞추면 또 다른 하나가 어긋납니다. 글을 쓰려고 에디터를 열었는데, 어느 순간 저는 글보다 줄 간격을 더 오래 보고 있었습니다.

처음에는 단순하게 생각했습니다. PC에서 예쁘게 보이면 모바일에서도 대충 비슷하게 보이겠지. 그런데 그렇지 않았습니다. 모바일에서는 글씨 크기를 조금 줄이고, 줄 간격을 넉넉하게 잡으면 안정적일 거라고 봤습니다. 실제로 그 방식은 나쁘지 않았습니다. 화면이 좁은 모바일에서는 글씨를 살짝 줄이는 편이 읽기 편할 때도 있고, 노트 줄 배경에서도 덜 답답해 보였습니다. 그런데 계속 보다 보니 다른 문제가 눈에 들어왔습니다.

PC에서 제가 정한 본문 크기와 모바일에서 보이는 본문 크기가 서로 달라지면서, 글 전체의 느낌이 미묘하게 달라지는 겁니다. 그래서 이번에는 방식을 조금 바꿨습니다. PC 따로, 모바일 따로 글씨 크기를 지정하는 방식이 아니라, 글씨 크기를 한 곳에서만 정하고 PC와 모바일이 그 값을 같이 따라가게 하는 방식입니다. 쉽게 말하면, 맨 위에서 글씨 크기를 한 번 정해두면 나머지는 전부 거기에 맞춰 움직이는 구조입니다. 앞으로 글씨 크기를 바꾸고 싶을 때 코드 전체를 뒤질 필요 없이, 맨 위의 숫자 하나만 바꾸면 됩니다.

:root {
  --paper-font-size: 24px;
  --paper-line-height: calc(var(--paper-font-size) * 2.625);
}

핵심은 위 코드입니다. --paper-font-size가 본문 글씨 크기이고, --paper-line-height가 줄 간격입니다. 여기서는 글씨 크기에 2.625를 곱해서 줄 간격을 만들었습니다. 예를 들어 글씨 크기가 24px이면 줄 간격은 63px이 됩니다. 줄 노트 배경도 이 줄 간격을 따라가도록 해두었기 때문에, 글씨 크기만 바꿔도 줄 간격과 배경선이 같이 바뀝니다.

이번에 신경 쓴 부분은 모바일입니다. 예전 코드에서는 모바일 구간에 들어가면 글씨 크기를 줄이는 코드가 있었습니다. 그 방식도 나쁘지는 않습니다. 화면이 좁으니까 글씨를 줄이면 한 줄에 더 많이 들어가고, 보기에도 덜 답답해질 수 있습니다. 하지만 제가 원했던 건 그게 아니었습니다. 저는 PC에서 정한 글씨 크기가 이번에는 모바일에서도 그대로 적용되기를 원했습니다.

물론 모바일에서 19px은 꽤 큰 글씨입니다. 한 줄에 들어가는 글자 수가 줄어들고, 문단도 길어 보일 수 있습니다. 하지만 줄 노트 스타일은 애초에 일반적인 블로그 본문과 조금 다릅니다. 촘촘하게 정보를 욱여넣는 느낌보다는, 종이에 손글씨를 적어둔 것 같은 여백과 리듬이 중요합니다. 그래서 저는 모바일에서도 글씨를 억지로 줄이기보다, 처음 정한 글씨 크기를 유지하는 쪽이 더 낫다고 봤습니다.

@media screen and (max-width: 768px) {
  .lined-paper {
    font-size: var(--paper-font-size) !important;
    line-height: var(--paper-line-height) !important;
  }
}

위 코드처럼 모바일에서도 따로 17px 같은 값을 넣지 않고, PC에서 정한 변수를 그대로 따라가게 했습니다. 이렇게 해두면 나중에 글씨 크기를 바꿔도 모바일 CSS를 따로 수정할 필요가 없습니다. 24px이 크다 싶으면 맨 위의 값을 22px로 바꾸면 되고, 더 큼직하게 보고 싶으면 26px로 바꾸면 됩니다. 중요한 건 같은 값을 PC와 모바일이 함께 쓴다는 점입니다.

또 하나 중요한 건 이미지와 코드블럭입니다. 저는 글을 쓰다 보면 이미지도 넣고, 코드블럭도 넣고, 중간에 이것저것 자주 끼워 넣습니다. 그래서 줄 노트 배경을 글 전체에 한 장으로 깔아버리는 방식은 오히려 불안했습니다. 코드블럭이나 이미지 높이가 줄 간격의 배수로 딱 떨어지지 않으면, 그 아래 문단이 다시 어긋날 수 있기 때문입니다. 그래서 이번 방식은 문단마다 줄노트 배경을 다시 잡게 해두었습니다.

그러니까 이미지를 넣어도 됩니다. 코드블럭을 넣어도 됩니다. 다만 하나만 지키면 됩니다. 이미지와 코드블럭은 p class="lined-paper" 안에 넣지 말고, p와 p 사이에 넣기. 이 규칙만 지키면 다음 문단은 다시 자기 줄 위에서 시작합니다. 전체 줄이 하나로 쭉 이어지는 맛은 조금 줄어들 수 있지만, 글씨가 줄 밖으로 도망가는 일은 훨씬 덜해집니다.

<div>
<style>
@font-face {
  font-family: 'MunmakchoByeolban';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2604-1@1.0/MUNMAK_BYEOLBANCHE.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   글 제목 + 댓글 폰트만 적용
   크기, 줄간격, 여백은 건드리지 않음
   ========================================================= */

/* 글 제목 */
h1,
h2,
h3,
h4,
.article-title,
.entry-title,
.post-title,
.title-article,
.area_view .title_post,
.area_article .title,
.inner_header .title,
#content .title,
#article .title {
  font-family: 'MunmakchoByeolban', serif !important;
}

/* 댓글 본문 */
.tt-comment-content,
.tt-comment-content p,
.tt-comment-cont,
.tt-comment-cont p,
.comment-content,
.comment-content p,
.comment_content,
.comment_content p,
.rp_content,
.rp_content p,
.reply_content,
.reply_content p,
.area_reply,
.area_reply p,
.area_reply .desc_reply,
.area_reply .desc_reply p,
.comment-list,
.comment-list p,
.comment-list .comment-content,
.comment-list .comment-content p {
  font-family: 'MunmakchoByeolban', serif !important;
}

/* 댓글 작성자명, 날짜, 수정/삭제, 답글 링크 */
.tt-comment-author,
.tt-comment-date,
.tt-comment-control,
.comment-author,
.comment-name,
.comment-date,
.comment-control,
.rp_name,
.rp_date,
.rp_admin,
.area_reply .tit_reply,
.area_reply .name,
.area_reply .date,
.area_reply .link_reply,
.area_reply .link_write,
.comment-list .author,
.comment-list .name,
.comment-list .date,
.comment-list .control,
.comment-list a {
  font-family: 'MunmakchoByeolban', serif !important;
}

/* =========================================================
   여기만 바꾸면 PC / 모바일 본문 글씨 크기가 같이 바뀜
   예:
   18px, 19px, 22px, 24px 등으로 조정 가능
   ========================================================= */
:root {
  /* 본문 글씨 크기: PC/모바일 공통 */
  --paper-font-size: 19px;

  /* 본문 줄간격: 글씨 크기에 맞춰 자동 계산 */
  --paper-line-height: calc(var(--paper-font-size) * 2.625);

  /* 노트 줄 색상 */
  --paper-line-color: #e5e5e5;

  /* PC 본문 좌우 여백 */
  --paper-side-padding-pc: 18px;

  /* 모바일 본문 좌우 여백 */
  --paper-side-padding-mobile: 12px;

  /* 문단/이미지/코드블럭 사이 간격 */
  --paper-gap: 42px;
}

/* =========================================================
   전체 감싸는 박스
   ========================================================= */
.my-post-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 8px 40px;
  box-sizing: border-box;
  font-family: 'MunmakchoByeolban', serif !important;
}

/* =========================================================
   줄노트 본문
   글씨 크기, 줄간격, 노트 배경 간격이 변수로 같이 움직임
   ========================================================= */
.lined-paper {
  margin: 0 0 var(--paper-gap) 0 !important;
  padding: 0 var(--paper-side-padding-pc) !important;

  font-size: var(--paper-font-size) !important;
  line-height: var(--paper-line-height) !important;

  text-align: justify;
  word-break: keep-all;
  overflow-wrap: break-word;
  box-sizing: border-box;
  font-family: 'MunmakchoByeolban', serif !important;

  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--paper-line-height) - 1px),
    var(--paper-line-color) calc(var(--paper-line-height) - 1px),
    var(--paper-line-color) var(--paper-line-height)
  ) !important;

  background-size: 100% var(--paper-line-height) !important;
  background-position: 0 0 !important;
}

/* =========================================================
   본문 내부 span, u 태그 보정
   티스토리 에디터가 span을 많이 넣기 때문에 부모값을 따르게 함
   ========================================================= */
.lined-paper span,
.lined-paper u,
.lined-paper .auto-hl,
.lined-paper span[style*="background-color"] {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: 'MunmakchoByeolban', serif !important;
}

/* =========================================================
   형광펜 / 밑줄 강조
   ========================================================= */
.lined-paper .auto-hl,
.lined-paper span[style*="background-color"],
.lined-paper u {
  line-height: inherit !important;
  padding: 0 2px 2px 2px !important;
}

.lined-paper u {
  text-decoration: none !important;
  background: linear-gradient(
    to top,
    #ffe3ec 0%,
    #ffe3ec 52%,
    transparent 52%,
    transparent 100%
  ) !important;
  border-bottom: 2px solid #f08aa8 !important;
}

/* =========================================================
   직접 쓰는 형광펜 클래스
   사용 예:
   <span class="hl-purple">내용</span>
   <span class="hl-green">내용</span>
   <span class="hl-lime">내용</span>
   ========================================================= */
.hl-purple {
  --hl-bg: #c7c3ff;
  --hl-line: #827be8;
}

.hl-green {
  --hl-bg: #b8e46b;
  --hl-line: #6faa20;
}

.hl-lime {
  --hl-bg: #d8ef74;
  --hl-line: #a6bc00;
}

.hl-purple,
.hl-green,
.hl-lime {
  font-family: 'MunmakchoByeolban', serif !important;
  background: linear-gradient(
    to top,
    var(--hl-bg) 0%,
    var(--hl-bg) 52%,
    transparent 52%,
    transparent 100%
  ) !important;
  border-bottom: 2px solid var(--hl-line) !important;
  padding: 0 2px 2px 2px !important;
  line-height: inherit !important;
}

/* =========================================================
   코드블럭
   코드블럭은 p.lined-paper 안이 아니라 p와 p 사이에 넣기
   ========================================================= */
.my-post-wrap pre {
  margin: var(--paper-gap) 0 !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  border: 1px solid #e5e5e5 !important;
  overflow-x: auto !important;
}

.my-post-wrap pre,
.my-post-wrap code,
.my-post-wrap pre code,
.my-post-wrap pre *,
.my-post-wrap code * {
  font-family: 'MunmakchoByeolban', serif !important;
  font-size: calc(var(--paper-font-size) * 0.75) !important;
  line-height: 1.9em !important;
  letter-spacing: -0.01em !important;
  white-space: pre-wrap !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* 티스토리 코드블럭 대응 */
.my-post-wrap pre[data-ke-type="codeblock"],
.my-post-wrap pre[data-ke-type="codeblock"] code,
.my-post-wrap pre[data-ke-language],
.my-post-wrap pre[data-ke-language] code {
  background-color: #fff !important;
  font-family: 'MunmakchoByeolban', serif !important;
}

/* =========================================================
   이미지
   이미지는 p.lined-paper 안이 아니라 p와 p 사이에 넣기
   ========================================================= */
.my-post-wrap figure,
.my-post-wrap .imageblock,
.my-post-wrap [class*="image"] {
  margin: var(--paper-gap) 0 !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
}

.my-post-wrap img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* =========================================================
   광고 영역 보호
   ========================================================= */
ins.adsbygoogle,
.adsbygoogle,
.kakao_ad_area,
.adfit,
.adfit__container,
[id*="google_ads"],
[class*="google-auto-placed"],
[class*="adsbygoogle"],
[class*="kakao_ad"],
[class*="adfit"] {
  font-family: initial !important;
  background: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  padding: 0 !important;
}

/* =========================================================
   모바일 대응
   모바일에서도 font-size를 따로 줄이지 않고
   위의 --paper-font-size 값을 그대로 따라감
   ========================================================= */
@media screen and (max-width: 768px) {
  .my-post-wrap {
    max-width: 100% !important;
    padding: 14px 0 28px !important;
  }

  .lined-paper {
    margin: 0 0 var(--paper-gap) 0 !important;
    padding: 0 var(--paper-side-padding-mobile) !important;

    font-size: var(--paper-font-size) !important;
    line-height: var(--paper-line-height) !important;

    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;

    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--paper-line-height) - 1px),
      var(--paper-line-color) calc(var(--paper-line-height) - 1px),
      var(--paper-line-color) var(--paper-line-height)
    ) !important;

    background-size: 100% var(--paper-line-height) !important;
    background-position: 0 0 !important;
  }

  .lined-paper span,
  .lined-paper u,
  .lined-paper .auto-hl,
  .lined-paper span[style*="background-color"] {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: 'MunmakchoByeolban', serif !important;
  }

  .lined-paper .auto-hl,
  .lined-paper span[style*="background-color"],
  .lined-paper u {
    padding: 0 2px 2px 2px !important;
  }

  .my-post-wrap pre {
    margin: var(--paper-gap) 0 !important;
    padding: 16px 12px !important;
  }

  .my-post-wrap pre,
  .my-post-wrap code,
  .my-post-wrap pre code,
  .my-post-wrap pre *,
  .my-post-wrap code * {
    font-size: calc(var(--paper-font-size) * 0.75) !important;
    line-height: 1.9em !important;
    white-space: pre-wrap !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }

  .my-post-wrap figure,
  .my-post-wrap .imageblock,
  .my-post-wrap [class*="image"] {
    margin: var(--paper-gap) 0 !important;
  }
}

/* =========================================================
   아주 작은 화면
   여기서도 글씨 크기를 따로 줄이지 않음
   ========================================================= */
@media screen and (max-width: 390px) {
  .my-post-wrap {
    padding: 14px 0 28px !important;
  }

  .lined-paper {
    font-size: var(--paper-font-size) !important;
    line-height: var(--paper-line-height) !important;
    padding: 0 10px !important;

    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--paper-line-height) - 1px),
      var(--paper-line-color) calc(var(--paper-line-height) - 1px),
      var(--paper-line-color) var(--paper-line-height)
    ) !important;

    background-size: 100% var(--paper-line-height) !important;
    background-position: 0 0 !important;
  }

  .my-post-wrap pre,
  .my-post-wrap code,
  .my-post-wrap pre code,
  .my-post-wrap pre *,
  .my-post-wrap code * {
    font-size: calc(var(--paper-font-size) * 0.75) !important;
    line-height: 1.9em !important;
  }
}
</style>
</div>

<div class="my-post-wrap">

<p class="lined-paper" data-ke-size="size16">
<span style="font-family: 'MunmakchoByeolban', serif !important;">
여기에 본문을 입력하세요.
</span>
</p>

<p class="lined-paper" data-ke-size="size16">
<span style="font-family: 'MunmakchoByeolban', serif !important;">
형광펜을 넣고 싶으면 <span style="background-color: #f6e199; font-family: 'MunmakchoByeolban', serif !important;">이런 식으로 background-color가 들어간 span</span>을 쓰면 됩니다.
</span>
</p>

<pre data-ke-language="css" data-ke-type="codeblock"><code>/* 코드블럭을 넣고 싶으면
   p.lined-paper 안에 넣지 말고
   p와 p 사이에 넣으세요. */
</code></pre>

<p class="lined-paper" data-ke-size="size16">
<span style="font-family: 'MunmakchoByeolban', serif !important;">
코드블럭 다음에 이어지는 본문은 이렇게 다시 p class="lined-paper"로 작성하면 됩니다.
</span>
</p>

<!--
이미지를 넣을 때도 마찬가지입니다.

<p class="lined-paper">본문</p>

여기에 티스토리 에디터로 이미지 삽입

<p class="lined-paper">이미지 다음 본문</p>
-->

</div>

<script>
/* =========================================================
   색깔 태그 자동 형광펜 변환
   background-color가 들어간 span을 찾아서
   아래쪽 형광펜 + 밑줄 스타일로 자동 변환함
   ========================================================= */
(function () {
  function parseRgb(color) {
    var match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (!match) return null;

    return {
      r: parseInt(match[1], 10),
      g: parseInt(match[2], 10),
      b: parseInt(match[3], 10)
    };
  }

  function rgbToHex(r, g, b) {
    return "#" + [r, g, b].map(function (x) {
      var hex = x.toString(16);
      return hex.length === 1 ? "0" + hex : hex;
    }).join("");
  }

  function lighten(color, amount) {
    var rgb = parseRgb(color);

    if (!rgb) {
      return color;
    }

    var r = Math.round(rgb.r + (255 - rgb.r) * amount);
    var g = Math.round(rgb.g + (255 - rgb.g) * amount);
    var b = Math.round(rgb.b + (255 - rgb.b) * amount);

    return rgbToHex(r, g, b);
  }

  function applyAutoHighlight() {
    document.querySelectorAll(".lined-paper span[style*='background-color']").forEach(function (el) {
      var originalBg = el.getAttribute("data-hl-original-bg");

      if (!originalBg) {
        originalBg = window.getComputedStyle(el).backgroundColor;
        el.setAttribute("data-hl-original-bg", originalBg);
      }

      if (!originalBg || originalBg === "rgba(0, 0, 0, 0)" || originalBg === "transparent") {
        return;
      }

      var highlightBg = lighten(originalBg, 0.45);
      var lineColor = originalBg;

      el.classList.add("auto-hl");

      el.style.setProperty(
        "background",
        "linear-gradient(to top, " + highlightBg + " 0%, " + highlightBg + " 52%, transparent 52%, transparent 100%)",
        "important"
      );

      el.style.setProperty("border-bottom", "2px solid " + lineColor, "important");
      el.style.setProperty("padding", "0 2px 2px 2px", "important");
      el.style.setProperty("text-decoration", "none", "important");
      el.style.setProperty("font-family", "'MunmakchoByeolban', serif", "important");
      el.style.setProperty("font-size", "inherit", "important");
      el.style.setProperty("line-height", "inherit", "important");
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", applyAutoHighlight);
  } else {
    applyAutoHighlight();
  }

  window.addEventListener("load", applyAutoHighlight);
})();
</script>

전체 코드입니다.

이미 올라간 글은 어쩔 수 없습니다. 그 글들을 하나하나 다시 열어서 고치기 시작하면, 블로그 운영이 아니라 과거 청산 작업이 됩니다. 그것도 꽤 피곤한 과거 청산입니다. 그래서 저는 그냥 새 글부터 이 방식으로 가기로 했습니다. 이미 올라간 글은 그 시절의 흔적으로 두고, 앞으로 쓰는 글에서 조금씩 덜 이상하게 만드는 쪽이 현실적입니다.

블로그를 하다 보면 이런 생각을 자주 합니다. 나는 글을 쓰고 있는 걸까, 아니면 CSS를 달래고 있는 걸까. 처음에는 글 몇 줄 예뻐 보이게 하려고 시작했는데, 어느 순간 폰트 크기, 줄 간격, 배경선, 모바일 미디어쿼리까지 보고 있습니다.

그래도 이런 과정이 아주 싫지만은 않습니다. 내가 올린 글이 내 눈에 조금 더 편하게 보이면, 그걸로 또 이상하게 만족스럽습니다.

결론은 단순합니다. 앞으로 이 줄 노트 스타일을 쓸 때는 맨 위의 --paper-font-size 값만 바꾸면 됩니다. PC와 모바일은 그 값을 같이 따라갑니다. 이미지는 문단과 문단 사이에 넣고, 코드블럭도 문단과 문단 사이에 넣습니다. 이미 올라간 글은 그냥 보내줍니다. 블로그에도 과거는 있고, 사람에게도 체력의 한계는 있으니까요. 테스트라서 잘 될지 안 될지는 아직 모르겠습니다.