[이모저모] 티스토리 글쓰기 에디터에서 폰트 선택 기능 넣어보기

본문 폰트를 선택해서 읽을 수 있습니다.

도스이야기체 써라운드 에어체

안녕하세요. 목요일의 21입니다. 이번에는 티스토리 글쓰기 에디터 안에서 폰트를 두 개 넣고, 독자가 직접 선택해서 읽을 수 있게 하는 방법을 정리해 보려고 한다. 처음에는 단순히 내가 원하는 폰트를 본문에 적용하는 정도만 생각했다. 다만 이런 방식이 실제로 제대로 작동할지는 글을 올리기 전까지 알 수 없다. 티스토리는 에디터 화면, 미리보기 화면, 실제 발행 화면, 모바일 화면이 서로 다르게 보일 때가 있어서, 코드를 넣었다고 곧바로 안심하기는 어렵다. 결국 이번에도 답은 하나다. 일단 넣어보고, 발행한 뒤에 직접 확인하는 수밖에 없다.

지금 보다시피 미리보기 화면에서는 폰트 선택 박스가 제대로 보인다. 다만 문제는 여기서부터다. 버튼은 화면에 나오지만 눌러지지 않고, 폰트도 바뀌지 않는다. 결국 에디터 안에서는 모양만 확인할 수 있을 뿐, 실제 작동 여부까지 판단하기는 어렵다. 발행 후 화면에서 다시 확인해야 하는 이유가 여기에 있다.

이번에는 버튼이 잘 눌리고, 폰트도 정상적으로 바뀐다. 다만 이것도 어디까지나 현재 화면에서 확인한 결과일 뿐이다. 티스토리는 미리보기와 실제 발행 화면이 다를 때가 있어서, 최종적으로는 글을 올린 뒤 다시 확인해야 한다.

그래서 챗GPT의 도움을 받아 이번에는 JavaScript 없이 CSS만으로 폰트를 바꾸는 방식도 같이 시도해 봤다. onclick처럼 티스토리 에디터가 자동으로 제거할 수 있는 속성 대신, input radio와 label을 이용해서 선택 상태에 따라 본문 폰트가 바뀌도록 만든 것이다. 말하자면 버튼처럼 보이지만 실제로는 라디오 선택지이고, 선택된 값에 따라 아래 본문 영역의 폰트가 도스이야기 또는 카페24 써라운드에어로 바뀌는 구조다.

다행히 현재까지는 이 방식이 티스토리 에디터에서 지워지지 않고 그대로 남아 있었다. onclick은 사라졌지만, input radio와 label 구조는 유지됐고, 그래서 버튼처럼 눌렀을 때 폰트가 바뀌는 것까지 확인할 수 있었다.

 

PC와 모바일을 오가며 확인하다 보니 문제가 하나씩 보였다. PC에서는 CSS가 잘 먹는데 모바일에서는 이상하게 기본 폰트로 돌아가는 경우가 있었고, span을 빼면 깔끔하긴 하지만 모바일 반영이 확실하지 않은 것처럼 보였다. 그래서 결국 생각은 다시 처음으로 돌아왔다. 보기 좋은 코드보다 중요한 건 실제 화면에서 제대로 보이는 코드라는 것이다.

이번 실험의 핵심은 span style을 완전히 버릴 수 있느냐가 아니라, 필요한 순간에 어떤 방식으로 써야 하느냐였다. 챗GPT는 span style을 쓰지 않고 그냥 span만 써도 된다고 했지만, 실제로 티스토리 모바일 화면에서 폰트가 제대로 반영되는지는 따로 확인이 필요했다.

코드상으로는 그냥 span이 더 깔끔해 보이지만, 발행 화면에서는 이론보다 실제 표시 결과가 더 중요하기 때문이다. 그래서 지금은 결국 span style을 쓰고 있다. 조금 지저분해 보이더라도, PC와 모바일에서 확실히 보이는 쪽이 우선이라고 봤다.

 

일반적인 CSS 구조만 놓고 보면 span 없이 p 태그 안에 본문을 바로 넣는 방식이 가장 깔끔하다. 하지만 티스토리 모바일에서 폰트 적용이 불안정하다면 이야기가 달라진다. 그럴 때는 span style을 무조건 나쁜 코드로 볼 수 없다. 오히려 모바일 화면까지 확실하게 잡기 위한 코드가 될 수 있다.

처음에는 그냥 도스이야기 폰트를 전체 본문에 적용하는 방식으로 갔다. CSS에서 body, p, span, div를 한꺼번에 잡으면 간단하다.

하지만 그 방식은 너무 넓다. 본문만 바꾸고 싶은데 스킨, 사이드바, 댓글 영역까지 건드릴 가능성이 생긴다.

이 방법을 오래 쓰긴 했는데, 이 게시글에서는 조금 다르게 가고 싶었다. 본문은 도스이야기로 보이게 하고 싶었지만, 댓글 영역까지 같은 폰트로 바뀌는 건 바라지 않았다. 댓글은 댓글대로 기존의 한컴 말랑말랑 폰트가 유지되는 편이 더 자연스럽다고 봤다.

<div id="fontSelectPostArea" class="font-select-post">
<p class="line-note-only-pc" data-ke-size="size16"><span style="font-family: inherit;">안녕하세요. 월요일의 21입니다. 이번에는 티스토리 글쓰기 에디터 안에서 <u>폰트를 두 개 넣고</u>, 독자가 <u>직접 선택해서 읽을 수 있게</u> 하는 방법을 정리해 보려고 한다. 처음에는 단순히 내가 원하는 폰트를 본문에 적용하는 정도만 생각했다. 다만 이런 방식이 실제로 <span style="background-color: #f6e199;">제대로 작동할지는 글을 올리기 전까지</span> 알 수 없다. 티스토리는 에디터 화면, 미리보기 화면, 실제 발행 화면, 모바일 화면이 서로 다르게 보일 때가 있어서, 코드를 넣었다고 곧바로 안심하기는 어렵다. 결국 이번에도 답은 하나다. 일단 넣어보고, 발행한 뒤에 직접 확인하는 수밖에 없다.<br /></span></p>
<div>

그래서 글 전체를 하나의 div로 감싸고, 그 안쪽에서만 폰트와 문단 스타일을 적용하는 방식이 더 낫다고 봤다. 예를 들면 font-select-post 같은 클래스를 만들고, 본문 전체를 그 안에 넣는 방식이다. 이렇게 하면 다른 글이나 블로그 전체 구조를 건드리지 않고, 해당 포스팅 안에서만 폰트 실험을 할 수 있다.

여기서 한 단계 더 나간 것이 독자 선택 방식이다. 기본은 도스이야기로 보여주고, 버튼을 누르면 카페24 써라운드에어로 바뀌게 하는 구조다.

본문을 감싼 div에 class를 하나 붙여두고, 버튼을 누르면 그 class 이름을 바꾼다. font-dos일 때는 도스이야기가 적용되고, font-cafe일 때는 카페24 써라운드에어가 적용된다. 실제 구조는 버튼 두 개와 본문 div 하나면 된다.

다만 티스토리 에디터에서 onclick이 자동으로 제거되는 듯해서, 버튼만으로는 원하는 대로 작동하지 않았다. 그래서 이번에는 JavaScript 대신 CSS 라디오 버튼 방식으로 다시 바꿔봤다.

이 방식에서 가장 중요한 부분은 본문 안 span을 어떻게 쓰느냐다. 만약 본문에 span style="font-family: 'DosStory'"처럼 특정 폰트를 직접 박아버리면, 독자가 카페24 써라운드에어를 선택해도 본문이 바뀌지 않을 수 있다.

이미 안쪽 span에 도스이야기가 고정되어 있기 때문이다. 그래서 독자 선택 기능을 넣을 때는 span style을 쓰더라도 특정 폰트명을 박는 대신 font-family: inherit으로 처리하는 게 낫다. inherit은 부모의 폰트를 따라가라는 뜻이다. 그러면 선택 상태가 도스이야기일 때는 도스이야기를 따라가고, 카페24 써라운드에어일 때는 카페24 써라운드에어를 따라간다.

 

줄 노트도 같이 정리했다. PC에서는 줄 노트가 있으면 글이 노트에 적힌 것처럼 보여서 나름 분위기가 산다. 특히 도스이야기처럼 레트로한 느낌이 있는 폰트와도 잘 맞는다. 다만 모바일에서는 줄 폭이 좁고 화면이 작아서 줄 노트가 오히려 지저분해 보일 수 있다. 그래서 PC에서는 줄 노트를 유지하고, 모바일에서는 줄 노트를 제거하는 쪽으로 정리했다.

PC에서는 양쪽 정렬을 쓰면 문단이 정돈되어 보인다. 모바일에서도 양쪽 정렬을 유지해 보기로 했다. 다만 모바일은 줄 폭이 좁아서 단어 사이 간격이 이상하게 벌어질 수 있다. 특히 한글과 영어, URL이 섞인 글에서는 어색해질 수 있다.

그래도 이번 글에서는 PC와 모바일 모두 text-align: justify로 맞춰두고, 실제 발행 화면에서 얼마나 자연스럽게 보이는지 확인해 보기로 했다.

 

• 기본 폰트는 도스이야기로 시작한다.
• 독자가 선택하면 카페24 써라운드에어로 바꿀 수 있다.
• 본문 span은 특정 폰트를 고정하지 않고 inherit으로 처리한다.
• PC에서는 줄 노트를 유지하고 모바일에서는 제거한다.
• PC와 모바일 본문 모두 양쪽 정렬로 둔다.

티스토리에서 폰트를 예쁘게 적용하는 것과 안정적으로 적용하는 것은 조금 다른 문제다. 코드만 놓고 보면 span 없이 깔끔하게 쓰는 게 좋다. 하지만 모바일에서 폰트가 제대로 반영되지 않는다면, span style을 쓰는 쪽이 낫다. 다만 독자 선택 기능까지 넣을 거라면 특정 폰트를 직접 박는 방식은 피해야 한다. 그 대신 font-family: inherit을 써서 부모 폰트를 따라가게 만드는 게 핵심이다. 그렇게 해두면 기본은 도스이야기, 선택은 카페24 써라운드에어로 바꿀 수 있다.

물론 이 방식도 완벽하다고 말하기는 어렵다. 미리보기에서는 안 되던 게 발행 후에는 되기도 하고, 반대로 되던 게, 발행 후에는 안 되기도 하고, PC에서는 멀쩡한데 모바일에서는 이상하게 보이기도 한다. 게다가 onclick처럼 일부 속성은 에디터가 자동으로 제거한다. 그래서 이번에는 JavaScript가 아니라 CSS만으로 폰트 선택을 구현하는 쪽으로 바꿨다. 그래도 실제 발행 화면에서 input과 label이 유지되는지는 확인해야 한다. 지금으로서는 이게 글쓰기 에디터 안에서 시도해 볼 수 있는 가장 덜 지저분하면서도 가장 현실적인 방식이다.