2025. 5. 2. 15:02ㆍIT 라이프/티스토리 블로그 팁
티스토리 블로그를 처음 접하고 작성해보면 사용자 친화적이지 않다는 생각을 많이 하게 됩니다.
만약, 네이버 블로그를 사용하는데 익숙한 분이시라면 더욱 그렇게 느낄 것이고 저 또한 그랬습니다.
티스토리 블로그가 일반 유저에게는 친화적이지 않은 반면, html, CSS 등의 지식이 있거나 개발하시는 분들은 이미 아는 지식이 활용되는 영역이 많아서 자율성이 높다고 느끼실거예요. 물론 저는 그렇지 않은 축에 속했습니다.
어찌저찌 글만 써서 업로드해놓고 보니, 기본 글자 사이즈도 맘에 안들고 서식이 엉망인 경우를 많이 반복하다보니 서식의 필요성을 느꼈습니다. 이게 스트레스 받을 일이 아닌데 말이죠.
밑에서 크게 두 가지 얘기를 하겠습니다.
1. 서식 작성 방법
2. 작성한 서식 적용하는 방법
1. 서식 작성 방법
서식은 작성하고 관리하는 위치가 어디인지, 서식의 예시를 통해 어떤 식으로 사용하면 되는지 파악하실 수 있게 얘기해 보겠습니다. 이게 파악이 되면 응용이 쉬워져서 원하는 디자인이 달라지더라도 금방 찾아내서 복붙으로 적용하실 수 있으실 겁니다. 결국 html 관련된 서식을 어디서 어떻게 작성하는지 말씀드릴게요.
서식 작성/관리 위치
블로그의 우측 상단 메뉴(가로 3줄) 클릭 → 관리 클릭 → 좌측 탭 중 콘텐츠의 서식 관리 클릭하면 아래처럼 서식 관리 화면이 나옵니다.
이 화면에서 1) 자신이 만든 서식 목록을 확인/수정할 수 있고, 2) 새로운 서식을 추가할 수 있습니다.
현재 작성 중인 글도 서식을 적용한 후 작성하고 있습니다. 서식을 따로 신경쓰지 않아도 되니 글 작성에만 집중할 시간을 확보해서 좋고, 서식과 관련된 작업을 매 번 안해도 되니 효율적입니다. 그리고 서식과 관련해서 잦던 실수도 없어진 셈이죠.
서식 예시
위의 서식 관리 화면에서 서식 쓰기 클릭 후 서식 작성을 시작합니다.
저는 처음에 이 글에 있는 것처럼 생긴 디자인된 서식이 쓰고 싶어서 뒤지다가 템플릿 작성으로 자연스럽게 넘어갔는데요.
html, CSS 몰라도 그냥 남이 작성한 것 중 맘에 드는 디자인을 복붙한 뒤 색상, 폰트 사이즈 등만 수정해서 쓰면 되니 무겁게 생각하지 않으셔도 됩니다.
html, CSS와 관련된 것과 아닌 것으로 나누어 말씀드리겠습니다.
1. html, CSS 관련된 예시
예시 1
위와 같은 소제목 디자인을 사용하려면 아래의 html 코드를 템플릿에 삽입하면 적용됩니다.(적용 방법은 아래에서 따로 설명하겠습니다)
<h2 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000000; border-left: 10px solid #04B404; border-bottom: 2px #04B404 solid; font-weight: bold;" data-ke-size="size23">소제목 1</h2>
원하는 색상으로 변경하려면, html color code에서 원하는 색상을 클릭하기만 하면 됩니다. 색상을 클릭하면 해당 색상의 코드(예: #000000, #04B404)가 나오는데 그 부분만 위의 html 코드에서 바꿔주면 됩니다.
HTML Color Code 사이트에서 색상 별 컬러코드를 바로바로 확인하실 수 있습니다.
2. 그 외
소제목과 본문글은 폰트 크기나 색상 등을 구분하는 것이 가독성을 위해 좋습니다.
이를 손쉽게 적용할 수 있는 방법이 상단에 주어진 문단모양을 활용하는 것입니다.
아래처럼 소제목에는 제목1,2,3 중 하나를, 본문에는 본문1,2,3 중 하나를 적용하기만 하면 됩니다.
이걸 활용하는 이유는 1) 손쉽게 활용 가능해서도 있지만 2) 저걸 적용하면 html 구조에서 봤을 때 태그가 형성되고, 그 뜻은 글에 구조가 생긴다는 뜻입니다. 이게 중요한 이유는 구글이 이런 구조적인 글을 좋아하기 때문입니다.
서식 작성 방법 (기본모드, HTML)
서식 쓰기로 들어가면 아래같은 화면이 나옵니다.
저는 이미 작성한 서식으로 들어갔기 때문에 제목과 내용이 적혀 있는 것을 확인할 수 있습니다.
여기서 말하고 싶은 것은 서식 쓰기를 클릭하면 보이는 화면은 기본모드이고, 이는 미리보기와 같은 화면입니다.
근데 우리가 적용할 서식 관련 내용은 이 화면에서 편집이 불가능합니다.
그럼 어디서 서식을 작성할 수 있느냐?! 기본모드를 클릭하면 나오는 HTML로 들어가야 합니다.
위의 화면에서 기본모드로 보던 걸 HTML(모드)에서 보겠습니다.
HTML 클릭!했더니 나오는 화면입니다.
이 HTML(모드)에서 html 코드를 복붙하고 하단의 미리보기를 눌러보세요. 그럼 일반모드에서 봤던 것과 같이 적용된 걸 확인할 수 있습니다. 색상 등을 변경하고 미리보기도 합격이면 완료를 누르시면 끝입니다.
그리고 다시 HTML(모드)을 클릭해서 일반모드로 돌아오실 수도 있습니다.
소제목은 서식 적용이 끝났지만, 추가로 본문의 폰트 사이즈 등 추가 작업할 게 있으시면 일반모드에서 마저 작업하시고 저장하세요.
2. 만든 서식 불러오는 방법
이제 글을 쓸 때, 만들어둔 서식을 불러와서 적용하는 방법입니다.
1. 글쓰기 클릭 → 점3개 아이콘 클릭 → 서식 클릭
글쓰기로 들어가면 빈 페이지가 나옵니다.
여기서 아래 캡처화면 처럼 점3개 아이콘을 클릭하고, 서식을 클릭합니다.
2. 서식 목록 중 적용하려는 서식 클릭
지금까지 작서해서 저장해둔 서식 목록이 보이는데요.
이 중 지금 글에 적용하려고 하는 서식 목록을 클릭하시면 바로 템플릿이 만들어지는 걸 보실 수 있습니다.
저는 정보 전달 서식을 클릭했더니 아래처럼 적용되었습니다.
이제 글을 쓰면 됩니다.
정리
글을 쓰다보면 자신이 자주 쓰고 싶은 글의 유형이 생기고, 유형에 맞는 형식도 생길겁니다.
그 때 템플릿을 하나씩 늘려나가면 글을 쓸 때마다 불필요하게 소모되는 시간도 줄이고, 자잘하게 여기저기 신경써야 하는 부분도 상당히 많이 줄어들 겁니다.