[이모저모] 티스토리 본문 줄 노트 스타일 만들기(feat. 챗GPT)

안녕하세요. 월요일의 21입니다. 오늘은 티스토리 글쓰기에서 줄 노트처럼 보이는 본문 스타일을 다시 만져봤다. 원래는 그냥 글만 쓰면 되는 건데, 가끔은 글을 쓰는 화면이나 읽히는 모양까지 건드리고 싶어진다. 그냥 글만 쓰자니 글 길어지니 눈 아프기도 해서 줄 노트 시도해 본 건데, 나름 괜찮더라고. 티스토리는 이런 쓸데없는 실험을 하기에 좋은 곳이기도 하고, 동시에 사람을 피곤하게 만드는 곳이기도 하다.

처음에는 티스토리 에디터 안에서만 해결하고 싶었다. 스킨 편집까지 들어가면 일이 커지고, 나중에 다시 바꾸기도 귀찮아진다. 게다가 CSS 하나도 모른다. HTML도 마찬가지고. 전부 챗GPT의 손길을 거쳤다. 글쓰기 화면에서 HTML을 열고, 글 전체에 줄 노트 배경을 넣는 식으로 시도했다. 결과만 보면 가능은 했다. 배경에 반복되는 얇은 선을 넣고, 글의 줄 간격과 배경 줄 간격을 맞추면 얼핏 노트에 글을 쓰는 것처럼 보인다.

문제는 화면이 바뀌면 틀어진다는 점이었다. 내 모니터에서는 괜찮아 보이는데, 다른 모니터에서 보면 줄이 애매하게 어긋난다. 모니터는 32인치 쓰고 있다. 모바일에서는 더 신경 쓰인다. 글자 크기, 본문 폭, 폰트 로딩, 브라우저 확대 비율 같은 것들이 전부 개입하다 보니 내가 맞춰둔 줄이 계속 같은 위치에 머물러주지 않는다더라. 게다가 브라우저 확대 비율 같은 건 사람마다 다르게 설정하니까. 결국 줄 노트는 단순한 장식 같지만, 실제로는 텍스트 렌더링과 배경 패턴이 맞물리는 꽤 귀찮은 문제였다. 솔직히 남들 알바 아니긴 한데... 그래도 남들이 그냥 나가 버리면 안 되니까. 예전에 그래도 글 봐주는 사람들 예의상 눈 아프지 말라고 글씨 크기 고를 수 있게 해보려고 했는데, 어렵더라고. 그것도 티스토리 에디터 안에서만 하려고 했거든.

/* 모바일에서는 줄 노트 제거 */
@media screen and (max-width: 768px) {
  .line-note-only-pc {
    background-image: none !important;
    padding: 0 !important;
  }
}

그래서 이번에는 방향을 조금 바꿨다. PC에서는 줄 노트가 보이게 하고, 모바일에서는 아예 줄 노트가 안 보이게 했다. 모바일까지 억지로 맞추려 하면 더 지저분해질 것 같았다. 작은 화면에서는 줄 노트보다 그냥 읽기 편한 본문이 낫다. PC에서는 맛을 살리고, 모바일에서는 깔끔하게 빠지는 방식이다. 완벽한 해결이라기보다는 타협에 가깝지만, 블로그 운영은 원래 이런 타협의 연속이다. 다른 사람들 눈에 잘 보이는 것도 중요하지만, 나도 보기 편해야 해.

/* 밑줄 스타일 변경: 기본 밑줄 대신 붉은색 두꺼운 밑줄로 표시 */
u,
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;                    /* 밑줄 때문에 생길 수 있는 여백 제거 */
}

이 부분은 밑줄 스타일을 따로 잡아주는 코드다. 티스토리에서 밑줄을 넣으면 기본 밑줄이 너무 밋밋하게 보일 때가 있어서 색상과 두께, 글자와 밑줄 사이 간격을 따로 조정했다. 별것 아닌 것 같아도 이런 부분이 글 전체 분위기를 꽤 바꾼다. 그냥 검은 밑줄 하나 들어가는 것보다 붉은 기운이 살짝 도는 밑줄이 들어가면 강조한 부분이 더 자연스럽게 눈에 들어온다.

/* DosStory 웹 폰트 불러오기 */
@font-face {
  font-family: 'DosStory';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/DOSIyagiMedium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 본문 전체에 DosStory 폰트 적용 */
body, p, span, div {
  font-family: 'DosStory', serif !important;
}

이 부분은 먼저 웹 폰트를 불러오는 코드다. 여기서 DosStory라는 이름을 정해두고, 실제 폰트 파일 주소를 연결해 둔다. 쉽게 말하면 “이 주소에 있는 폰트를 앞으로 DosStory라는 이름으로 쓰겠다”는 선언에 가깝다. 그 아래에 있는 body, p, span, div 코드가 이 폰트를 본문에 적용하는 역할이라면, 이 부분은 그 전에 폰트를 준비해 두는 역할이다.

이 부분은 글 전체에 내가 쓰는 폰트를 적용하는 코드다. 본문, 문단, span, div 같은 요소에 같은 폰트를 강제로 먹이는 방식이다. 티스토리 에디터에서 글을 쓰다 보면 중간에 색을 넣거나 배경색을 넣었을 때 폰트가 미묘하게 바뀌는 경우가 있어서, 그런 걸 최대한 막으려고 넣었다. 정확히 다 이해하고 넣은 건 아니지만, 적어도 보기에는 통일감이 생긴다.

/* 색상이나 배경색이 들어간 span에도 DosStory 폰트 유지 */
span[style*="color"],
span[style*="background-color"] {
  font-family: 'DosStory', serif !important;
}

이 부분은 색상이나 배경색이 들어간 글자에도 폰트를 유지하게 하는 코드다. 티스토리에서 글을 쓰다 보면 특정 단어에 색을 넣거나 형광펜처럼 배경색을 넣는 경우가 있는데, 그 순간 해당 글자만 다른 폰트처럼 보일 때가 있다. 그래서 span[style*="color"], span[style*="background-color"]처럼 색상 스타일이 들어간 span까지 따로 잡아둔 것이다. 쉽게 말하면 강조 표시를 해도 DosStory 폰트가 풀리지 않게 막아두는 장치에 가깝다.

<p class="line-note-only-pc" style="font-size: 17px; line-height: 2em; text-align: justify; font-family: 'DosStory', serif; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2em - 1px), #e9e9e9 calc(2em - 1px), #e9e9e9 2em); background-size: 100% 2em; padding: 20px; box-sizing: border-box;" data-ke-size="size16"><span style="font-family: 'DosStory', serif;">여기에 본문 입력</span></p>

줄 노트 본문 예시로 실제로 글을 넣을 때 쓰는 틀이다. line-note-only-pc라는 클래스를 붙여두고, 그 안에 글자 크기, 줄 간격, 정렬, 폰트, 줄 노트 배경을 한 번에 넣어둔 구조다. 여기에 본문 입력 부분만 쓰고 싶은 글로 바꾸면 된다는 점이다.

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

body, p, span, div {
  font-family: 'DosStory', serif !important;
}

span[style*="color"],
span[style*="background-color"] {
  font-family: 'DosStory', serif !important;
}

/* 밑줄 */
u,
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;
}

/* 본문 안 리스트만 적용 */
.contents_style ol,
.contents_style ul,
.contents_style ol[style],
.contents_style ul[style],
.tt_article_useless_p_margin ol,
.tt_article_useless_p_margin ul,
.tt_article_useless_p_margin ol[style],
.tt_article_useless_p_margin ul[style],
.article ol,
.article ul,
.article ol[style],
.article ul[style],
.entry-content ol,
.entry-content ul,
.entry-content ol[style],
.entry-content ul[style] {
  font-family: 'DosStory', serif !important;
  font-size: 17px;
  line-height: 2em;
  padding: 0 0 0 24px;
  box-sizing: border-box;
}

/* 모바일에서는 줄 노트 제거 */
@media screen and (max-width: 768px) {
  .line-note-only-pc {
    background-image: none !important;
    padding: 0 !important;
  }
}
  
  /* 코드블럭 줄 바꿈 */
pre,
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;
}
  
/* 티스토리 코드블럭 전체 DosStory 폰트 적용 */
pre,
pre code,
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: 'DosStory', serif !important;
}
</style>
</div>
<p class="line-note-only-pc" style="font-size: 17px; line-height: 2em; text-align: justify; font-family: 'DosStory', serif; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2em - 1px), #e9e9e9 calc(2em - 1px), #e9e9e9 2em); background-size: 100% 2em; padding: 20px; box-sizing: border-box;" data-ke-size="size16"><span style="font-family: 'DosStory', serif;">여기에 본문 입력</span></p>

귀찮다면 그냥 이 전체 코드를 복사한 뒤, 여기에 본문 입력 부분만 지우고 원하는 글을 넣으면 된다.

/* 본문 안의 번호 목록(ol)과 점 목록(ul)에도 DosStory 폰트와 본문 스타일 적용 */
.contents_style ol,
.contents_style ul,
.contents_style ol[style],
.contents_style ul[style],
.tt_article_useless_p_margin ol,
.tt_article_useless_p_margin ul,
.tt_article_useless_p_margin ol[style],
.tt_article_useless_p_margin ul[style],
.article ol,
.article ul,
.article ol[style],
.article ul[style],
.entry-content ol,
.entry-content ul,
.entry-content ol[style],
.entry-content ul[style] {
  font-family: 'DosStory', serif !important; /* 목록에도 DosStory 폰트 적용 */
  font-size: 17px;                           /* 목록 글자 크기 */
  line-height: 2em;                          /* 목록 줄 간격 */
  padding: 0 0 0 24px;                       /* 목록 앞쪽 들여쓰기 */
  box-sizing: border-box;                    /* 여백 계산 방식 안정화 */
}

이 부분은 리스트에 적용되는 코드다. 글 안에 번호 목록이나 점 목록을 넣었을 때, 그 부분만 폰트나 줄 간격이 따로 노는 경우가 있어서 본문과 비슷하게 맞춰주는 용도다. 평소에는 크게 티가 안 나지만, 막상 목록을 넣으면 글자 크기나 줄 간격이 혼자 달라 보여서 은근히 거슬린다. 그래서 본문 안 리스트도 같은 폰트, 같은 크기, 비슷한 줄 간격으로 보이게 맞추려 한 것이다. 다만 내 경우에는 생각처럼 잘되지는 않았다. 리스트 기능을 쓰지 않는다면, 이 부분은 굳이 넣지 않아도 크게 문제는 없다.

코드도 복잡하게 가지 않았다. 본문에 직접 배경을 넣고, 줄 간격은 2em으로 맞췄다고 챗GPT가 그렇다는데 내가 알 턱이 있나. 배경은 repeating-linear-gradient를 사용했다. 그냥 linear-gradient도 비슷하게 보이긴 하지만, 줄 노트처럼 반복되는 패턴에는 repeating-linear-gradient가 더 맞는 방식이다. 챗GPT가 그렇다는데, 하나도 모르겠다. 그렇다고 하니 시도해 봤다. 한 번 그리고 복사하는 느낌보다, 애초에 반복되는 배경 패턴으로 처리하는 쪽이 덜 불안하다나.

다만 이 방식도 완벽하다고 말하기는 어렵다더라. 이 방식 또한 티스토리 스킨, 모바일 설정, 폰트 로딩 속도, 브라우저 환경에 따라 조금씩 달라질 수 있다고. 특히 웹 폰트를 쓰면 처음 로딩될 때 기본 폰트로 먼저 표시됐다가 나중에 바뀌는 경우도 있어서 줄 간격이 순간적으로 다르게 보일 수 있다더라. 그래도 에디터 안에서 게시글에만 적용하는 방식으로는 이 정도가 가장 현실적인 선이란다.

결론적으로 티스토리에서 줄 노트 스타일을 완벽하게 구현하려면 CSS를 제대로 손보는 게 맞다고. 하지만 매번 스킨 편집까지 들어가고 싶지 않다면, 특정 게시글에만 줄 노트를 적용하고 모바일에서는 숨기는 방식이 그나마 낫다. 내가 원했던 것도 대단한 기능은 아니었다. 그냥 글을 쓸 때 조금 더 노트 같은 느낌이 나면 좋겠다는 정도였다. 그런데 그 작은 욕심 하나에도 모니터 비율, 모바일 화면, 폰트, 줄 간격이 전부 따라붙는다. 역시 블로그는 글보다 주변 장식이 더 사람을 귀찮게 만들 때가 있다.