글

블로그스팟 글에 코드 블록 삽입하는 법

  📋 목차 블로그스팟에 코드 블록이 없다고? highlight.js 테마에 설치하기 글 작성할 때 코드 넣는 실전 방법 GitHub Gist로 더 간단하게 삽입하기 코드 블록 디자인 입맛대로 바꾸기 처음에 다 겪는 실수 모음 자주 묻는 질문 블로그스팟에서 개발 관련 글을 쓰려는데 코드 블록 기능이 없어서 당황했다면, highlight.js 라이브러리 하나면 깔끔한 신택스 하이라이팅까지 해결된다. 블로그스팟으로 기술 블로그를 운영하겠다고 마음먹고 첫 글을 쓰는데, 코드를 넣을 방법이 없어서 멘붕이 왔다. 티스토리는 버튼 하나로 코드 블록이 들어가잖아요. 근데 블로그스팟 에디터에는 그런 게 없더라고요. 코드를 그냥 텍스트로 붙여넣으면 들여쓰기가 다 깨지고, 줄바꿈도 엉망이 되고. 처음에는 스크린샷을 찍어서 이미지로 넣을까도 생각했는데, 그러면 복사도 안 되고 SEO에도 최악이라 포기했다. 이리저리 검색하면서 highlight.js라는 라이브러리를 발견했고, GitHub Gist를 활용하는 방법도 알게 됐다. 둘 다 써보니 상황에 따라 쓰임이 다르더라고요. 이 글에서 두 가지 방법 다 정리해놓을 테니까 본인 상황에 맞는 걸 골라 쓰면 된다. 블로그스팟에 코드 블록이 없다고? 블로그스팟(Blogger)은 구글에서 제공하는 무료 블로그 플랫폼인데, 글꼴 변경이나 자동 임시저장 같은 기능은 괜찮다. 문제는 개발자에게 필수인 코드 블록 삽입 기능을 기본으로 제공하지 않는다는 거다. 에디터에서 Courier 폰트를 적용할 수는 있거든요. 근데 이걸 코드 블록처럼 쓰면 각 줄이 별도 문단으로 처리되면서 줄 간격이 벌어진다. 보기 흉하다. HTML 보기로 전환해서 <pre> 태그로 감싸면 줄 간격은 해결되지만, 구문 강조(syntax highlighting)가 안 되니까 코드가 시각적으로 묻혀버린다. 그래서 필요한 게 외부 라이브러리다. 블로그스팟은 테마 HTML을 직접 편집할 수 있어서, 여기에 자바스크립...
댓글 쓰기
자세한 내용 보기

블로그스팟 테마 추천, 무료인데 속도 빠른 테마 3개

  📋 목차 블로그스팟 기본 테마가 느린 진짜 이유 Sora One — 미니멀 끝판왕 VTrick — 애드센스 특화 테마 Neomax — 테스트 최고 속도 세 테마 속도 실측 비교 테마 설치할 때 꼭 알아야 할 것 결국 뭘 써야 하냐면 블로그스팟 기본 테마를 쓰면서 PageSpeed 점수가 30~40대로 나와 답답했다면, 무료인데도 90점대를 찍는 테마 세 개를 직접 비교해봤거든요. 솔직히 블로그스팟을 처음 시작했을 때 테마 같은 건 크게 신경 안 썼어요. "구글 거니까 알아서 빠르겠지"라는 생각이었거든요. 근데 글을 10개쯤 올리고 나서 PageSpeed Insights를 돌려봤는데 모바일 점수가 38이 나온 거예요. 순간 멍해졌어요. 그때부터 무료 테마를 하나씩 바꿔가며 테스트하기 시작했는데, 진짜 같은 블로그스팟이 맞나 싶을 정도로 차이가 컸어요. 특히 LCP(Largest Contentful Paint) 수치가 테마 하나 바꿨을 뿐인데 4초에서 0.8초로 떨어진 적도 있었거든요. 그래서 세 달간 돌려쓴 테마 세 개를 정리해봤어요. 블로그스팟 기본 테마가 느린 진짜 이유 많은 분들이 오해하는 게 있어요. 블로그스팟은 구글 서버라서 빠르다고요. 맞아요, 서버 자체는 빠릅니다. 문제는 테마 코드에요. 블로그스팟 기본 테마(Contempo, Soho, Emporio 같은 것들)는 대충 300~500KB 정도 되는 코드 덩어리를 한 번에 불러와요. 여기엔 사용하지도 않는 위젯 스크립트, 무거운 웹폰트, 레이아웃 관련 CSS가 잔뜩 들어있거든요. 결국 구글 서버가 아무리 빨라도 브라우저가 이 코드를 해석하는 데 시간이 걸리니까 느려지는 거예요. 실제로 GTmetrix로 측정해보면 기본 테마의 Total Blocking Time이 1,500ms를 넘기는 경우가 흔해요. 반면 최적화된 서드파티 무료 테마는 같은 지표가 100ms 이하로 떨어지기도 하고요. 이 차이가 검색 순위에 직접 영향을 주는 코어...
댓글 쓰기
자세한 내용 보기

블로그스팟에서 글 목차 자동 생성하는 법

  📋 목차 블로그스팟 TOC가 뭐길래 다들 넣으라는 건지 설치 전에 꼭 알아둬야 할 것들 테마 HTML 편집으로 코드 넣는 과정 목차 디자인 CSS까지 한 번에 세팅하기 글 작성할 때 목차 활성화하는 방법 목차 넣고 나서 실제로 달라진 점 자주 생기는 오류와 해결법 블로그스팟에서 목차를 자동으로 만들어주는 TOC 기능, h2 태그만 있으면 JavaScript가 알아서 목차를 뽑아주는데 설치 과정에서 코드 붙여넣기 위치 하나 틀리면 블로그 전체가 깨질 수 있거든요. 처음 블로그스팟을 시작했을 때 솔직히 목차 같은 건 신경도 안 썼어요. 글만 잘 쓰면 되는 줄 알았거든요. 근데 서치 콘솔에서 데이터를 들여다보니까, 긴 글일수록 이탈률이 높더라고요. 3,000자 넘어가는 글은 평균 체류시간이 40초대밖에 안 되는 거예요. 그때 워드프레스 하는 지인이 "목차 하나 넣어봐"라고 했는데, 블로그스팟은 워드프레스처럼 플러그인이 없잖아요. Easy TOC 같은 거 클릭 한 번이면 끝나는 그런 게 없어요. 직접 HTML 편집 들어가서 코드를 넣어야 하는 구조라 처음엔 좀 막막했어요. 근데 막상 해보니까 복붙 다섯 번이면 끝나더라고요. 블로그스팟 TOC가 뭐길래 다들 넣으라는 건지 TOC는 Table of Contents, 말 그대로 글의 목차예요. 본문에 있는 h2 태그(소제목)를 자동으로 읽어서 클릭하면 해당 위치로 이동하는 링크 목록을 만들어주는 거거든요. 위키백과에서 글 상단에 있는 그 목차 생각하면 딱 맞아요. 워드프레스는 Easy TOC, Table of Contents Plus 같은 플러그인을 설치하면 자동으로 생성돼요. 클릭 몇 번이면 끝이에요. 근데 블로그스팟은 이런 플러그인 시스템 자체가 없어요. 구글이 제공하는 가젯(위젯)에 TOC 기능이 포함되어 있지 않거든요. 그래서 직접 JavaScript 코드와 CSS를 테마 HTML에 삽입하는 방식을 쓰는 거예요. 순수 자바스크립트로 18줄 정도 ...
댓글 쓰기
자세한 내용 보기

블로그스팟 사이드바 위젯 직접 정리해봤더니 체류시간이 달라졌다

  📋 목차 사이드바 정리, 레이아웃 메뉴부터 열어야 한다 처음 세팅 때 과감하게 삭제해야 할 가젯들 위젯 순서 바꾸기, 드래그 한 번이면 끝 애드센스 수익과 사이드바의 관계 라벨 가젯으로 카테고리처럼 쓰는 법 HTML/JavaScript 가젯 활용하기 모바일에서 사이드바가 사라질 때 대처법 블로그스팟 사이드바에 기본 가젯이 잔뜩 깔려 있으면 방문자 체류시간이 짧아지고, 애드센스 자동광고 배치도 엉망이 된다. 불필요한 위젯을 걷어내고 순서를 바꾸는 것만으로 블로그 전체 분위기가 확 달라진다. 블로그스팟을 처음 개설하면 사이드바에 온갖 가젯이 기본으로 붙어 있거든요. 블로그 보관함, 프로필, 인기 글, 태그 목록까지. 솔직히 처음엔 하나도 안 건드렸어요. "원래 이렇게 쓰는 건가 보다" 싶었으니까요. 근데 한 달쯤 지나니까 이상한 점이 보이기 시작했어요. 구글 애널리틱스를 열어보면 평균 체류시간이 30초도 안 되는 거예요. 글은 나름 2,000자 넘게 쓰는데, 사람들이 사이드바 쪽으로 시선이 분산되면서 본문을 제대로 안 읽고 나가는 느낌이었죠. 그래서 과감하게 사이드바를 뜯어고쳤는데, 결과적으로 체류시간이 1분 20초까지 올라갔어요. 사이드바 정리, 레이아웃 메뉴부터 열어야 한다 블로그스팟 관리자 페이지 왼쪽 메뉴에서 레이아웃 을 클릭하면 현재 블로그에 붙어 있는 모든 가젯이 한눈에 보여요. 헤더, 본문, 사이드바, 푸터까지 영역별로 나뉘어 있는데, 여기서 사이드바 섹션만 집중해서 보면 돼요. 각 가젯 왼쪽에 세로 점 다섯 개가 보이면 드래그로 위치 이동이 가능한 가젯이에요. 점이 없는 건 고정형이라 이동도, 삭제도 안 되고 수정만 됩니다. 처음에 이 차이를 몰라서 "왜 이건 삭제 버튼이 없지?" 하고 한참 헤맸거든요. 가젯 오른쪽의 연필 아이콘을 누르면 구성 설정창이 뜨고, 여기서 On/Off 토글, 제목 수정, 표시 옵션 변경, 삭제까지 다 할 수 있어요. 삭제해도 나중에 ...
댓글 쓰기
자세한 내용 보기

블로그스팟 퍼머링크 직접 설정했더니 검색 유입이 달라졌다

  📋 목차 퍼머링크가 뭔데 이렇게 중요한 건지 자동 퍼머링크 vs 맞춤 퍼머링크 차이 새 글 작성할 때 슬러그 직접 정하는 방법 이미 발행한 글의 URL 바꾸는 법 SEO 잘 먹히는 슬러그 작성 규칙 슬러그 설정할 때 흔히 하는 실수들 블로그스팟에서 글을 발행하면 URL 주소가 자동으로 생성되는데, 한글 제목만 쓰면 "blog-post_17"처럼 의미 없는 주소가 붙어버린다. 퍼머링크를 직접 설정하면 구글 검색 노출과 클릭률이 눈에 띄게 달라진다. 처음 블로그스팟 시작했을 때 퍼머링크라는 걸 몰랐거든요. 글 20개 정도 올리고 나서 구글 서치 콘솔을 열어봤는데, URL 목록이 전부 blog-post, blog-post_14, blog-post_22 이런 식이었어요. 어떤 글이 어떤 주소인지 구분이 안 되는 거예요. 그때 뒤늦게 맞춤 퍼머링크라는 기능을 알게 됐는데, 솔직히 이걸 왜 기본값으로 안내해주지 않는지 좀 의아했어요. 설정 자체는 정말 간단한데 모르면 그냥 넘어가게 되거든요. 그래서 저처럼 허탈하게 넘어가는 분이 없었으면 하는 마음으로 정리해봤어요. 퍼머링크가 뭔데 이렇게 중요한 건지 퍼머링크(Permalink)는 permanent link의 줄임말이에요. 말 그대로 한 번 정해지면 영구적으로 유지되는 게시물의 고유 URL 주소를 뜻하거든요. 블로그스팟에서는 "블로그주소/연도/월/슬러그.html" 형태로 만들어지는데, 여기서 슬러그 부분을 직접 정할 수 있느냐 없느냐가 꽤 큰 차이를 만들어요. 구글 검색엔진은 URL 안에 포함된 단어도 참고한다고 알려져 있어요. 예를 들어 "best-air-purifier-review"라는 슬러그가 들어간 URL과 "blog-post_17"이라는 슬러그가 들어간 URL이 있으면, 검색엔진 입장에서는 전자가 글의 내용을 파악하기 훨씬 수월한 거죠. 사용자 클릭률도 마찬가지예요. 검색 결과에서 URL이 깔끔...
댓글 쓰기
자세한 내용 보기

블로그스팟 검색 설명 메타태그 설정하는 법

  📋 목차 검색 설명이 뭔데 이렇게 중요한 거야 블로그스팟 메타태그 활성화하는 법 블로그 전체 검색 설명 작성하기 글마다 검색 설명 따로 넣는 방법 클릭 부르는 검색 설명 쓰는 요령 나도 했던 실수, 이것만은 피하자 세팅 후 달라진 점과 체감 효과 블로그스팟에서 글을 쓰면서 '검색 설명'을 비워둔 적 있다면, 구글 검색 결과에서 내 글이 어떻게 보이는지 한번 확인해 보면 좋겠어요. 직접 세팅 전후를 비교해 보니 클릭률 차이가 꽤 체감되더라고요. 처음 블로그스팟을 시작했을 때 솔직히 검색 설명 같은 건 신경도 안 썼거든요. 글만 잘 쓰면 되지, 뭘 또 설정해야 하나 싶었어요. 그런데 서치콘솔에서 노출 수 대비 클릭 수를 보다가 뭔가 이상하다는 걸 느꼈어요. 노출은 되는데 클릭이 안 되는 거예요. 알고 보니 구글 검색 결과에 뜨는 내 글의 설명 부분이 엉뚱한 문장으로 채워져 있었어요. 본문 첫 줄이 그대로 잘려서 나오는데, 맥락 없이 중간에 끊기니까 뭔 글인지 알 수가 없는 거죠. 이걸 보고 '아, 이래서 검색 설명을 직접 쓰라는 거구나' 깨달았어요. 검색 설명이 뭔데 이렇게 중요한 거야 검색 설명은 HTML에서 meta name="description" 태그에 들어가는 내용이에요. 쉽게 말하면 구글이나 네이버 같은 검색엔진에서 내 글을 보여줄 때 제목 아래에 붙는 짧은 설명문이거든요. 사람들이 검색 결과 페이지에서 어떤 글을 클릭할지 고를 때, 제목 다음으로 가장 많이 보는 부분이 바로 이 설명문이에요. 블로그스팟에서는 이걸 '검색 설명(Search Description)'이라는 이름으로 제공하고 있어요. 그런데 문제는 기본값이 꺼져 있다는 거예요. 따로 활성화하지 않으면 블로그스팟이 알아서 본문 앞부분을 잘라 넣는데, 이게 대부분 어색하게 잘려요. 구글 공식 문서에서도 각 페이지의 내용을 정확하게 요약하는 메타 디스크립션을 직접 작성할 것을 권장하...
댓글 쓰기
자세한 내용 보기