[이모저모] 챗GPT로 손본 티스토리 본문 줄 노트 테스트

안녕하세요. 목요일의 21입니다. 오늘은 거창한 글은 아니고, 거의 줄 노트 스타일 테스트에 가까운 글입니다. 블로그 본문에 노트 줄 같은 배경을 넣어봤는데, PC에서는 그럭저럭 괜찮게 보이던 것이 모바일에서는 조금 다르게 보였습니다. 글씨가 줄 위에 얌전히 앉아 있으면 좋은데, 막상 휴대폰으로 확인해 보니 줄 간격과 글씨 위치가 미묘하게 어긋나 보였습니다. 그저 제 눈에만 그렇게 보이는 것이면 좋겠지만, 실제로도 조금 그렇더군요. 다른 휴대폰까지 확인해 본 것은 아니지만, 일단 제가 쓰는 화면에서는 확실히 신경이 쓰였습니다.

<style>
/* =========================================================
   모바일 줄 노트 표시 보정용 CSS
   화면 폭이 768px 이하일 때만 적용됨

   목적:
   1. 모바일에서 본문 좌우 여백을 줄임
   2. 줄 노트 배경선과 글씨 줄간격을 다시 맞춤
   3. 글씨가 노트 줄 밖으로 벗어나 보이는 문제를 줄임
   4. 본문 안쪽 span, u, 형광펜 요소도 같은 줄간격을 따라가게 함
   ========================================================= */
@media screen and (max-width: 768px) {

  /* =======================================================
     전체 포스팅 감싸는 박스
     모바일에서는 화면 폭이 좁기 때문에
     좌우 여백을 거의 없애고 본문 영역을 넓게 사용함
     ======================================================= */
  .my-post-wrap {
    padding: 14px 0 28px !important;
    max-width: 100% !important;
  }

  /* =======================================================
     줄 노트 본문 영역
     
     핵심:
     font-size: 글씨 크기
     line-height: 한 줄의 높이
     background-size: 노트 줄 하나의 높이

     line-height와 background-size를 40px로 맞춰서
     글씨 줄과 배경 줄이 따로 놀지 않게 함
     ======================================================= */
  .lined-paper {
    font-size: 17px !important;
    line-height: 40px !important;
    padding: 18px 12px !important;

    /* 모바일에서는 양쪽 정렬보다 왼쪽 정렬이 안정적임 */
    text-align: left !important;

    /* 한글 단어가 이상하게 쪼개지지 않게 함 */
    word-break: keep-all !important;

    /* 그래도 긴 문장은 화면 밖으로 나가지 않게 강제 줄바꿈 */
    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;

    /* =====================================================
       줄 노트 배경선

       transparent 0 ~ 39px:
       줄 사이의 빈 공간

       #e5e5e5 39px ~ 40px:
       1px짜리 노트 줄

       즉, 40px마다 회색 줄 하나가 반복됨
       ===================================================== */
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 39px,
      #e5e5e5 39px,
      #e5e5e5 40px
    ) !important;

    background-size: 100% 40px !important;
  }

  /* =======================================================
     본문 안쪽 span, 밑줄 u 태그 보정

     티스토리 에디터가 본문 안에 span을 많이 넣기 때문에
     span이 부모의 글씨 크기와 줄간격을 그대로 따라가게 함
     ======================================================= */
  .lined-paper span,
  .lined-paper u {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: 'MunmakchoByeolban', serif !important;
  }

  /* =======================================================
     형광펜 강조 / 배경색 span / 밑줄 태그 보정

     형광펜 들어간 부분만 줄간격이 따로 놀면
     모바일에서 글씨가 더 어긋나 보일 수 있으므로
     강조 요소도 본문 줄간격을 그대로 따라가게 함
     ======================================================= */
  .lined-paper .auto-hl,
  .lined-paper span[style*="background-color"],
  .lined-paper u {
    line-height: inherit !important;
    padding: 0 2px 2px 2px !important;
  }
}
</style>

사실 이런 건 그냥 넘기면 넘길 수도 있습니다. 글만 읽히면 되는 것 아니냐고 하면 딱히 할 말은 없습니다. 그런데 블로그를 하다 보면 이상하게 이런 사소한 부분이 계속 눈에 걸립니다. 글씨가 줄 밖으로 살짝 벗어나 보인다거나, 줄 간격이 글씨 크기와 맞지 않는다거나, 모바일에서만 묘하게 커 보인다거나 하는 것들이 은근히 신경을 긁습니다. 본문 내용보다 CSS가 먼저 말을 걸어오는 순간입니다.

이번에 제일 거슬렸던 부분은 모바일에서 노트 줄 간격과 글씨 높이가 잘 맞지 않는 문제였습니다. 줄 노트 스타일은 줄이 예쁘게 깔려야 맛이 납니다. 그런데 글자가 줄 위에 떠 있거나 아래로 밀려 보이면, 감성적인 노트 느낌이 아니라 그냥 정렬이 틀어진 화면처럼 보입니다. 내가 원한 건 감성인데, 결과물은 약간 삐끗한 연습장처럼 보이는 겁니다.

또 하나는 글씨 크기가 제대로 반영되지 않는 것 같은 문제였습니다. 분명히 CSS에서 글씨 크기를 지정했는데, 모바일 화면에서는 생각보다 다르게 보일 때가 있습니다. 티스토리 에디터 자체에서 들어가는 값도 있고, 스킨 쪽 CSS도 있고, 본문 안에 들어간 span 태그도 있어서 그런지 가끔은 내가 지정한 값이 그대로 먹는 건지 아닌지 헷갈립니다. 블로그는 글만 쓰면 되는 줄 알았는데, 어느 순간부터 CSS와 눈싸움을 하고 있습니다.

<pre class="css" data-ke-language="css" data-ke-type="codeblock" style="font-family: 'MunmakchoByeolban', serif !important; font-size: 18px !important; line-height: 1.8em !important; white-space: pre-wrap !important; word-break: keep-all !important; overflow-wrap: anywhere !important;"><code style="font-family: 'MunmakchoByeolban', serif !important;">/* =========================================================
   줄 노트 전체 기본 코드

   목적:
   1. 본문에 노트 줄 배경을 넣음
   2. 글씨 크기와 줄 간격을 노트 선 간격에 맞춤
   3. 모바일에서도 글자가 줄 밖으로 벗어나지 않게 조정
   4. 본문 span, u, 형광펜 요소가 같은 줄간격을 따라가게 함
   ========================================================= */

/* 전체 포스팅 박스 */
.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;
  padding: 20px 18px;
  font-size: 19px !important;
  line-height: 42px !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 41px,
    #e5e5e5 41px,
    #e5e5e5 42px
  ) !important;
  background-size: 100% 42px !important;
}

/* 본문 내부 span, u도 부모 글씨 크기와 줄간격을 따라가게 함 */
.lined-paper span,
.lined-paper u {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: 'MunmakchoByeolban', serif !important;
}

/* 모바일 줄 노트 보정 */
@media screen and (max-width: 768px) {
  .my-post-wrap {
    max-width: 100% !important;
    padding: 14px 0 28px !important;
  }

  .lined-paper {
    font-size: 17px !important;
    line-height: 42px !important;
    padding: 18px 12px !important;
    text-align: left !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;

    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 41px,
      #e5e5e5 41px,
      #e5e5e5 42px
    ) !important;
    background-size: 100% 42px !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;
  }
}

/* 작은 모바일 화면 보정 */
@media screen and (max-width: 390px) {
  .lined-paper {
    font-size: 16px !important;
    line-height: 42px !important;
    padding: 16px 10px !important;

    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 41px,
      #e5e5e5 41px,
      #e5e5e5 42px
    ) !important;
    background-size: 100% 42px !important;
  }
}</code></pre>

이미 올린 글은 어쩔 수 없습니다. 이미 발행한 글까지 하나하나 다시 열어서 고치기 시작하면 그것도 끝이 없습니다. 블로그 글이라는 게 참 이상해서, 올리기 전에는 괜찮아 보이다가 올리고 나서야 문제가 보입니다. 미리보기에서는 멀쩡한데 실제 모바일 화면에서 보면 또 다릅니다. 그래서 이번 글은 일종의 테스트입니다. 줄 노트가 모바일에서 얼마나 자연스럽게 보이는지, 글씨가 줄 밖으로 튀지 않는지, 형광펜 강조가 본문과 따로 놀지 않는지 확인하는 글입니다.

이번 수정 방향은 단순합니다. 모바일에서는 글씨 크기를 조금 줄이고, 줄 간격은 조금 더 넉넉하게 잡는 방식입니다. 글씨 크기를 키우면 보기 좋을 것 같지만, 노트 줄 배경에서는 꼭 그렇지만도 않습니다. 글씨가 커지면 줄과 줄 사이에서 답답해지고, 줄 간격이 좁으면 글자가 위아래로 튀어 보입니다. 그래서 모바일에서는 글씨를 살짝 줄이고, 줄 간격은 여유 있게 두는 쪽이 더 안정적으로 보였습니다.

정렬도 조금 바꿔봤습니다. PC에서는 양쪽 정렬이 깔끔해 보일 때가 있지만, 모바일에서는 글자 사이가 이상하게 벌어지는 경우가 있습니다. 그래서 모바일에서는 왼쪽 정렬이 더 편하게 보입니다. 줄 노트 스타일은 애초에 손으로 적은 글처럼 보이는 맛이 있어야 하니, 너무 반듯하게 맞추려다 오히려 어색해지는 것보다 자연스럽게 흘러가는 편이 낫다고 봅니다.

형광펜 효과도 같이 확인해야 합니다. 배경색이 들어간 span 태그를 자동으로 형광펜처럼 바꾸는 방식이라, 본문 글씨 크기와 줄 간격이 바뀌면 강조 부분도 같이 따라와야 합니다. 강조한 부분만 줄 높이가 따로 놀면 그것도 은근히 눈에 띕니다. 그래서 이번에는 본문 안의 span, u, 자동 형광펜 요소가 모두 부모의 글씨 크기와 줄 간격을 따라가도록 맞췄습니다. 쉽게 말해, 다 같이 움직이게 만든 셈입니다.

<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;
}

/* =========================================================
   전체 폰트 적용
   ========================================================= */
body,
p,
span,
div,
u {
  font-family: 'MunmakchoByeolban', serif !important;
}

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

/* =========================================================
   줄 노트 본문 기본 설정

   핵심:
   line-height와 background-size 값을 맞춰야
   글씨 줄과 노트 줄이 어긋나지 않음
   ========================================================= */
.lined-paper {
  margin: 0;
  padding: 20px 18px;
  font-size: 19px !important;
  line-height: 42px !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 41px,
    #e5e5e5 41px,
    #e5e5e5 42px
  ) !important;
  background-size: 100% 42px !important;
}

/* =========================================================
   본문 안쪽 span, u 태그 보정

   티스토리 모바일에서 span 스타일이 풀리는 경우가 있어
   본문 span도 부모 글씨 크기와 줄간격을 따라가게 함
   ========================================================= */
.lined-paper span,
.lined-paper u {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: 'MunmakchoByeolban', serif !important;
}

/* =========================================================
   밑줄 강조
   <u>내용</u>을 쓰면 일반 밑줄 대신 형광펜처럼 표시
   ========================================================= */
.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;
  padding: 0 2px 2px 2px !important;
}

/* =========================================================
   자동 형광펜 변환 후 적용되는 클래스
   background-color가 들어간 span을 JS가 자동 변환함
   ========================================================= */
.lined-paper .auto-hl {
  font-family: 'MunmakchoByeolban', serif !important;
  text-decoration: none !important;
  padding: 0 2px 2px 2px !important;
  line-height: inherit !important;
}

/* =========================================================
   모바일 줄 노트 보정
   ========================================================= */
@media screen and (max-width: 768px) {
  .my-post-wrap {
    max-width: 100% !important;
    padding: 14px 0 28px !important;
  }

  .lined-paper {
    font-size: 17px !important;
    line-height: 42px !important;
    padding: 18px 12px !important;

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

    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 41px,
      #e5e5e5 41px,
      #e5e5e5 42px
    ) !important;
    background-size: 100% 42px !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;
  }
}

/* =========================================================
   아주 작은 모바일 화면 보정
   ========================================================= */
@media screen and (max-width: 390px) {
  .lined-paper {
    font-size: 16px !important;
    line-height: 42px !important;
    padding: 16px 10px !important;

    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 41px,
      #e5e5e5 41px,
      #e5e5e5 42px
    ) !important;
    background-size: 100% 42px !important;
  }
}
</style>
</div>

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

<p class="lined-paper" data-ke-size="size16">
<span style="font-family: 'MunmakchoByeolban', serif !important;">

<!-- =======================================================
     여기부터 본문을 입력하세요
     아래 예시 문장은 지우고 본문으로 바꾸면 됩니다.
     ======================================================= -->

여기에 본문을 입력하세요.<br /><br />

문단을 나누고 싶으면 이렇게 줄바꿈을 넣으면 됩니다.<br /><br />

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

밑줄 강조를 쓰고 싶으면 <u>이런 식으로 u 태그</u>를 쓰면 됩니다.<br /><br />

<!-- =======================================================
     여기까지 본문을 입력하세요
     ======================================================= -->

</span>
</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>

전체 코드입니다.(저는 티스토리 글쓰기 에디터 내에서 구현하고 있습니다.)

문막초 별반체까지 같이 쓰려면 맨 위에 @font-face 폰트 코드도 함께 넣어야 합니다. 폰트 코드 없이 font-family: 'MunmakchoByeolban' 만 적으면 브라우저가 해당 폰트를 불러오지 못할 수 있습니다.

댓글 쪽을 건드리고 싶지 않으면 댓글 관련 선택자 .tt-comment..., .comment..., .rp_..., .area_reply... 들어간 블록을 통째로 삭제하면 됩니다.

줄 노트 본문에는 영향 없습니다. 줄 노트에 필요한 건 주로 @font-face, .my-post-wrap, .lined-paper, .lined-paper span, .lined-paper u, @media screen and (max-width: 768px) 쪽입니다.

 

물론 제가 직접 코드를 척척 짠 것은 아닙니다. HTML이나 CSS를 잘 아는 사람이 보면 별것 아닌 문제일 수도 있겠지만, 저 같은 사람에게는 폰트 변경이나 줄 하나 맞추는 것도 꽤 번거로운 일입니다. 그래서 챗GPT의 도움을 받았습니다. 예전 같으면 그냥 포기했을지도 모릅니다. 모바일에서 좀 이상하네. 어쩔 수 없지 하고 넘어갔을 겁니다. 그런데 이제는 일단 물어봅니다. 왜 줄이 어긋나는지, 글씨 크기가 왜 다르게 보이는지, 모바일에서는 어떤 값을 따로 줘야 하는지. 정확히 다 이해하는 건 아니지만, 적어도 고쳐볼 수는 있게 됐습니다.

아마 더 좋은 방법도 있을 겁니다. 스킨 CSS에서 한 번에 정리하는 방법이 있을 수도 있고, 본문마다 코드를 넣지 않아도 되는 더 깔끔한 방식이 있을 수도 있습니다. 애초에 줄 노트 배경을 이미지로 처리하는 방법도 있을 테고, CSS 변수를 써서 글씨 크기와 줄 간격을 더 편하게 관리하는 방법도 있을 겁니다. 그런데 저는 그걸 모릅니다. 좋은 방법이 있어도 모르면 없는 것과 비슷합니다. 코드가 조금 길어지고 지저분해 보일 수는 있습니다. 하지만 지금 제게 중요한 건 코드의 우아함보다는, 휴대폰으로 봤을 때 글자가 줄 밖으로 도망가지 않는 것입니다. 보기 좋은 코드보다 보기 덜 이상한 블로그가 먼저입니다. 나중에 더 좋은 방법을 알게 되면 또 바꾸면 됩니다.

결론적으로 이번 글은 줄 노트 스타일 모바일 테스트용 포스팅입니다. 이미 올린 글은 어쩔 수 없고, 앞으로 올릴 글에서라도 조금 더 보기 좋게 맞춰보려는 중입니다. 블로그 꾸미기는 참 묘합니다. 대단한 기능을 넣는 것도 아닌데, 글씨 한 줄이 노트 선에 맞느냐 안 맞느냐로 한참을 들여다보게 됩니다. 그리고 결국 이런 생각을 하게 됩니다. 나는 글을 쓰고 있는 걸까, 줄 간격을 키우고 있는 걸까.

아무튼 이번에는 모바일 화면 기준으로 줄 간격, 글씨 크기, 형광펜 강조까지 다시 확인해 보는 중입니다. 완벽하다고 말할 수는 없지만, 적어도 이전처럼 글자가 노트 줄 밖으로 도망가는 느낌은 줄이고 싶었습니다. 블로그는 올리고 나면 끝인 줄 알았는데, 올리고 나서부터 보이는 것들이 있습니다. 그래서 오늘도 글을 쓰는 척하면서, 사실은 줄을 맞추고 있습니다.