티스토리는 다음(Daum) 검색에는 자동으로 노출되지만, 네이버와 구글이라는 거대 포털에서는 내 블로그가 개설된 사실조차 모르는 경우가 많다. 이럴 경우 아무리 공들여 좋은 글을 써도, 사람들은 내가 포스팅한 글의 존재 자체를 모를 것이다. 검색 엔진에 내 블로그를 직접 등록하고 검색 로봇들이 내 글을 효율적으로 가져가도록 길을 터주는 작업, 즉 `검색엔진 최적화(SEO)`의 가장 기본이자 핵심 단계를 지금부터 알아보자. 검색 엔진에 내 블로그 등록하기구글과 네이버 검색 엔진에 블로그를 노출시키기 위해서는 각각의 자체 도구에 내 사이트를 등록해야 한다. 구글에는 `구글 서치 콘솔 (Google Search Console)`, 네이버에는 `네이버 서치어드바이저 (Naver Search Advisor)`가..

블로그 글을 작성하다 보면 텍스트만으로 표현하기 아쉬울 때가 많다. 이럴 때 아이콘을 적절히 활용하면 글의 가독성을 높이고 시각적인 재미를 더할 수 있다. 특히 개발 블로그나 정보성 글에서는 특정 개념이나 기능을 아이콘으로 직관적으로 나타내면 독자의 이해를 돕는 데 큰 도움이 된다. 이럴때 보통 많이 사용하는 것이 Font Awesome 이라는 폰트 아이콘이다.Font Awesome 사용을 위해선 티스토리에서 HTML 모드로 전환하여 `` 태그를 직접 입력하는 방법도 있다. 하지만 이 방법은 글쓰기 중 기본 모드와 HTML 모드를 번거롭게 오가야 하며, 그 과정에서 글의 포맷이 깨질 위험이 있어 효율적이지 않다.그래서 이 글에서는 폰트 어썸 아이콘을 마치 이모티콘처럼 `:아이콘이름:` 패턴(콜론으로 양끝..

이 글에서는 hELLO 스킨을 사용하는 티스토리 블로그에서 기본 글쓰기 모드에서도 백틱을 이용해 인라인 코드 블럭을 노션 스타일로 손쉽게 변경하는 방법을 소개한다. 간단한 코드 추가만으로 블로그의 가독성을 한층 더 높일 수 있다. 왜 인라인 코드 블럭을 노션 스타일로? 코드를 포함하는 기술 블로그나 개발 관련 글에서 코드 블럭의 `가독성`은 매우 중요하다. 특히 문장 중간에 짧게 들어가는 인라인 코드의 경우, 주변 텍스트와 잘 구분되어야 독자가 내용을 쉽게 파악할 수 있다. 노션 스타일의 `인라인 코드 블럭`은 배경색과 텍스트 색상을 다르게 하여 시각적으로 명확하게 구분해 주고, `둥근` 모서리와 적절한 `패딩`으로 깔끔하고 보기 좋은 디자인을 제공한다. 이는 독자가 코드와 일반 텍스트를 빠르게 구분하고..

[티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기현재 블로그 스킨으로 `hELLO` 스킨을 사용하고 있다. 개인적으로 티스토리 스킨 중 완성도가 가장 높다고 생각한다. 이 스킨은 다크 모드를 완벽히 지원하며 디자인이 너무 미니멀해서 보는 순간deploylife.tistory.com지난번 "[티스토리] hELLO 스킨에 코드 블럭 복사 버튼 추가하기" 글에 이어, 이번에는 hELLO 스킨의 코드 블럭에 라인 번호를 추가하는 방법을 소개한다. 코드에 라인 번호가 있으면 특정 줄을 지칭하거나 코드의 흐름을 파악하는 데 훨씬 용이하여 가독성을 크게 높일 수 있다.hELLO 스킨은 `highlight.js`를 사용하여 코드 블럭을 렌더링하는데, 여기에 `highlightjs-line-numbers.js..

현재 블로그 스킨으로 `hELLO` 스킨을 사용하고 있다. 개인적으로 티스토리 스킨 중 완성도가 가장 높다고 생각한다. 이 스킨은 다크 모드를 완벽히 지원하며 디자인이 너무 미니멀해서 보는 순간 이 스킨을 이용하여 블로그를 만들어야겠다는 생각을 했다. 제작자 분이 개발자라서 그런지 코드 블럭에 `highlight.js`가 이미 적용되어 있는 점도 맘에 들었다.`highlight.js`는 웹에서 코드 구문을 강조해주는 강력한 JavaScript 라이브러리로, 다양한 언어의 코드를 시각적으로 보기 좋게 만들어준다. 하지만 아쉽게도 hELLO 스킨의 기본 코드 블럭에는 코드를 간편하게 복사할 수 있는 기능이 없어 코드 복사가 필요한 방문자에게는 다소 불편함이 있었다. 이 글에서는 hELLO 스킨의 코드 블럭에..