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

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

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

 

블로그스팟 사이드바에 기본 가젯이 잔뜩 깔려 있으면 방문자 체류시간이 짧아지고, 애드센스 자동광고 배치도 엉망이 된다. 불필요한 위젯을 걷어내고 순서를 바꾸는 것만으로 블로그 전체 분위기가 확 달라진다.

블로그스팟을 처음 개설하면 사이드바에 온갖 가젯이 기본으로 붙어 있거든요. 블로그 보관함, 프로필, 인기 글, 태그 목록까지. 솔직히 처음엔 하나도 안 건드렸어요. "원래 이렇게 쓰는 건가 보다" 싶었으니까요.

근데 한 달쯤 지나니까 이상한 점이 보이기 시작했어요. 구글 애널리틱스를 열어보면 평균 체류시간이 30초도 안 되는 거예요. 글은 나름 2,000자 넘게 쓰는데, 사람들이 사이드바 쪽으로 시선이 분산되면서 본문을 제대로 안 읽고 나가는 느낌이었죠. 그래서 과감하게 사이드바를 뜯어고쳤는데, 결과적으로 체류시간이 1분 20초까지 올라갔어요.

사이드바 정리, 레이아웃 메뉴부터 열어야 한다

블로그스팟 관리자 페이지 왼쪽 메뉴에서 레이아웃을 클릭하면 현재 블로그에 붙어 있는 모든 가젯이 한눈에 보여요. 헤더, 본문, 사이드바, 푸터까지 영역별로 나뉘어 있는데, 여기서 사이드바 섹션만 집중해서 보면 돼요.

각 가젯 왼쪽에 세로 점 다섯 개가 보이면 드래그로 위치 이동이 가능한 가젯이에요. 점이 없는 건 고정형이라 이동도, 삭제도 안 되고 수정만 됩니다. 처음에 이 차이를 몰라서 "왜 이건 삭제 버튼이 없지?" 하고 한참 헤맸거든요.

가젯 오른쪽의 연필 아이콘을 누르면 구성 설정창이 뜨고, 여기서 On/Off 토글, 제목 수정, 표시 옵션 변경, 삭제까지 다 할 수 있어요. 삭제해도 나중에 "가젯 추가" 버튼으로 언제든 다시 복원할 수 있으니까, 일단 과감하게 정리하는 게 맞아요.

레이아웃 수정 후에는 반드시 오른쪽 하단의 저장 버튼을 눌러야 반영됩니다. 미리보기로 먼저 확인해보는 습관도 중요해요.

처음 세팅 때 과감하게 삭제해야 할 가젯들

블로그스팟 기본 테마를 적용하면 사이드바에 꽤 많은 가젯이 자동 생성되거든요. 전부 남겨두면 사이드바가 본문보다 길어지는 웃긴 상황이 벌어져요. 제가 직접 하나씩 테스트하면서 남긴 것과 지운 것을 정리해봤어요.

가젯 이름 유지 / 삭제 이유
블로그 보관함 삭제 연도별 분류라 클릭률 거의 없음
프로필 삭제 또는 비활성화 수익형이면 노출 불필요
인기 글(가장 많이 본 글) 삭제 경쟁 블로그에 키워드 노출 우려
라벨(태그) 유지 카테고리 역할 가능
검색창(Search) 유지 내부 검색으로 체류시간 증가

블로그 보관함이 제일 먼저 삭제 대상이었어요. 2024년 12월, 2025년 1월 이런 식으로 정렬되는 건데, 솔직히 이걸 눌러서 글을 찾아 읽는 사람이 있을까 싶었거든요. 실제로 클릭 데이터를 보면 거의 제로에 가까웠어요.

인기 글도 마찬가지예요. 내 블로그에서 어떤 키워드가 잘 되는지를 다른 사람한테 보여주는 셈이라, 수익형 블로그에서는 오히려 독이 될 수 있어요. 프로필도 브랜딩 목적이 아니면 과감하게 꺼두는 게 사이드바를 깔끔하게 만드는 첫걸음이에요.

⚠️ 주의

악용사례 신고 가젯은 숨길 수는 있지만 삭제하면 안 돼요. 구글 블로거 정책상 강제 삭제 시 불이익이 발생할 수 있거든요. 이 가젯만큼은 건드리지 말고 그대로 두는 게 안전합니다.

위젯 순서 바꾸기, 드래그 한 번이면 끝

삭제할 건 지웠으면 이제 남은 가젯의 순서를 잡아야 해요. 레이아웃 화면에서 가젯 왼쪽의 점 아이콘을 마우스로 잡고 위아래로 끌면 순서가 바뀌거든요. 이게 정말 단순한 작업인데 효과가 꽤 크더라고요.

제가 여러 조합을 테스트해본 결과, 사이드바 맨 위에 검색창을 두고 그 아래에 라벨(카테고리)을 배치하는 게 가장 자연스러웠어요. 방문자가 사이드바를 처음 볼 때 "여기서 다른 글도 찾아볼 수 있구나" 하는 인식을 바로 줄 수 있거든요.

그 아래에는 필요에 따라 HTML/JavaScript 가젯으로 만든 커스텀 배너나 소개 문구를 넣어주면 됩니다. 너무 많이 쌓으면 안 돼요. 사이드바 가젯은 3~5개 이내가 적당하다는 게 직접 운영해보면서 느낀 점이에요.

순서를 바꾼 뒤에는 꼭 저장 버튼을 누르고, 실제 블로그에서 PC와 모바일 양쪽 다 확인해봐야 해요. 테마에 따라 사이드바 위치가 왼쪽일 수도, 오른쪽일 수도 있고, 모바일에서는 아예 접히는 경우도 있으니까요.

애드센스 수익과 사이드바의 관계

애드센스 승인 전이라면 사이드바의 애드센스 가젯은 활성화가 안 돼요. 편집 버튼을 눌러서 On으로 바꿔도 저장이 안 되더라고요. 승인이 난 뒤에야 비로소 사이드바에 수동 광고를 넣을 수 있게 됩니다.

근데 여기서 흔한 오해가 하나 있어요. "사이드바에 광고를 직접 넣어야 수익이 올라간다"고 생각하는 분이 많은데, 실제로는 자동광고를 켜두는 게 초보자한테는 훨씬 편하고 효율적이에요. 블로그스팟 관리자의 수익 탭에서 애드센스를 연결하면, 구글이 알아서 본문과 사이드바에 광고를 배치해주거든요.

💬 직접 써본 경험

사이드바에 수동으로 애드센스 가젯을 넣고 자동광고도 동시에 켰더니, 광고가 너무 빽빽하게 붙어서 오히려 방문자 이탈이 심해졌어요. 자동광고 하나만 켜두고 사이드바는 깨끗하게 비워두는 쪽이 RPM(1,000회 노출당 수익)이 더 높았습니다. 사이드바가 지저분하면 본문 광고 클릭률까지 떨어지는 느낌이에요.

결국 사이드바를 깔끔하게 유지하는 것 자체가 애드센스 수익에 긍정적으로 작용해요. 방문자가 본문에 집중할수록 본문 안에 있는 자동광고를 자연스럽게 보게 되니까요. 사이드바는 네비게이션 역할에만 충실하게 만드는 게 수익 면에서도 나은 선택이었어요.

라벨 가젯으로 카테고리처럼 쓰는 법

블로그스팟에는 네이버 블로그나 티스토리 같은 "카테고리" 기능이 따로 없어요. 대신 라벨이 그 역할을 대신하거든요. 글을 쓸 때 오른쪽 패널에서 라벨을 쉼표로 구분해 입력하면 되는데, 이 라벨 중 일부만 골라서 사이드바에 보여주면 카테고리랑 똑같은 효과가 나요.

레이아웃 메뉴에서 가젯 추가를 누른 다음 "라벨"을 선택해요. 설정창이 뜨면 제목을 "카테고리"라고 적고, 라벨 표시 방식을 "선택한 라벨"로 바꿔주면 원하는 라벨만 사이드바에 노출시킬 수 있어요.

"모든 라벨"로 설정하면 태그 클라우드처럼 전부 다 보여서 사이드바가 지저분해져요. 처음에 이걸 몰라서 라벨을 30개 넘게 만들었다가 사이드바가 끝없이 길어진 적이 있거든요. 선택한 라벨로 5~8개만 추려서 보여주는 게 핵심이에요.

💡 꿀팁

라벨 정렬을 "빈도순"으로 하면 글이 많은 라벨만 상단에 올라와서 편해 보이지만, 새로 만든 카테고리가 밀려요. "가나다순"이 카테고리 역할에는 더 적합합니다. 그리고 "라벨당 글 수 표시"를 켜두면 방문자가 각 주제에 글이 몇 개인지 바로 파악할 수 있어서 클릭률이 올라가더라고요.

HTML/JavaScript 가젯 활용하기

블로그스팟의 진짜 강점 중 하나가 사이드바에 직접 HTML 코드를 넣을 수 있다는 거예요. 가젯 추가에서 "HTML/JavaScript"를 선택하면 제목과 내용란이 나오는데, 여기에 원하는 코드를 그냥 붙여넣으면 돼요.

저는 이걸로 간단한 자기소개 박스를 만들었어요. 이미지 태그 하나, 텍스트 몇 줄, 이메일 링크 하나. 딱 그 정도만 넣었는데 프로필 가젯보다 훨씬 깔끔하더라고요. 기본 프로필 가젯은 구글 프로필 페이지로 연결되는 구조라 방문자가 외부로 빠져나가는 문제가 있었거든요.

SNS 링크 버튼도 이 가젯으로 만들 수 있어요. 인스타그램, 유튜브 같은 채널 아이콘을 넣어두면 블로그에서 다른 플랫폼으로의 유입 경로가 생기는 거죠. 다만 너무 많은 외부 링크를 사이드바에 넣으면 SEO 측면에서 좋지 않다는 의견도 있으니, 2~3개 정도만 넣는 게 적당해요.

하나 주의할 점이 있어요. JavaScript를 포함한 코드를 넣을 때는 블로그 로딩 속도에 영향을 줄 수 있거든요. 외부 스크립트를 불러오는 코드라면 페이지 속도 측정 도구(PageSpeed Insights 같은)로 꼭 확인해보세요.

모바일에서 사이드바가 사라질 때 대처법

이건 처음에 정말 당황했던 부분이에요. PC에서 열심히 사이드바를 정리해놨는데, 모바일로 확인하면 사이드바가 통째로 안 보이는 거예요. 사라진 게 아니라 본문 아래로 밀려 내려가 있었어요.

블로그스팟의 최신 테마들은 반응형이라 화면이 좁아지면 사이드바가 본문 하단으로 자동 재배치돼요. 반면 구형 테마(예전 Contempo 이전 세대)는 모바일 버전이 따로 있어서 사이드바 자체가 렌더링 안 되는 경우도 있거든요.

그래서 모바일 사용자 비중이 높은 블로그라면, 사이드바에 핵심 네비게이션만 넣고 나머지는 본문이나 푸터로 옮기는 전략이 효과적이에요. 저도 처음엔 사이드바에 이것저것 몰아넣었다가, 모바일에서 아무도 안 본다는 걸 깨닫고 검색창이랑 라벨 두 개만 남겨뒀어요.

📊 실제 데이터

구글 애널리틱스 기준으로 블로그스팟 방문자의 약 70% 이상이 모바일에서 접속하는 경우가 많아요. 사이드바에 공을 들여도 대부분의 방문자는 사이드바를 볼 기회 자체가 적은 셈이죠. 그러니 사이드바는 PC 사용자를 위한 보조 네비게이션 정도로만 생각하고, 핵심 동선은 본문 안에서 해결하는 게 맞아요.

테마 선택도 여기에 영향을 줘요. Soho Dark처럼 왼쪽 사이드바 테마는 PC에서는 깔끔한데 모바일에서는 햄버거 메뉴 안에 사이드바가 숨겨지는 구조거든요. Notable이나 Emporio 같은 테마는 모바일에서도 일부 위젯이 보이는 편이에요. 테마를 고를 때 모바일 사이드바 표시 방식을 꼭 체크해보세요.

❓ 자주 묻는 질문

Q. 사이드바 위젯을 전부 삭제해도 괜찮은가요?

기술적으로는 가능하지만, 최소한 검색창과 라벨 가젯은 남겨두는 게 좋아요. 사이드바가 완전히 비면 테마에 따라 레이아웃이 무너질 수도 있고, 방문자가 다른 글을 탐색할 동선이 사라져요.

Q. 추천 게시물 가젯은 켜두는 게 나은가요?

추천 게시물은 사이드바가 아니라 본문 상단에 표시되는 가젯이에요. 이미지가 크게 나와서 본문 글 가독성을 방해할 수 있으니, 특별히 홍보할 글이 없다면 비활성화해두는 편이 낫더라고요.

Q. 가젯 추가에 "페이지 목록"이 있는데 이건 뭔가요?

블로그스팟의 "페이지"는 일반 포스팅과 별개로 독립된 고정 페이지를 만드는 기능이에요. 소개 페이지나 연락처 페이지를 만들어두면 상단 메뉴로 활용할 수 있지만, 초기에는 굳이 건드리지 않아도 돼요.

Q. 사이드바 위치를 왼쪽에서 오른쪽으로 바꿀 수 있나요?

레이아웃 메뉴에서는 불가능하고, 테마의 HTML을 직접 수정해야 해요. 혹은 처음부터 원하는 사이드바 위치를 지원하는 테마를 선택하는 게 훨씬 간편합니다.

Q. 외부 테마를 설치하면 기존 사이드바 위젯이 날아가나요?

테마를 교체하면 레이아웃 구조가 바뀌면서 기존 가젯이 초기화될 수 있어요. 테마 변경 전에 현재 HTML을 백업해두고, 변경 후 레이아웃 메뉴에서 가젯을 다시 추가하면 됩니다.

본 포스팅은 개인 경험과 공개 자료를 바탕으로 작성되었으며, 전문적인 의료·법률·재무 조언을 대체하지 않습니다. 정확한 정보는 해당 분야 전문가 또는 공식 기관에 확인하시기 바랍니다.

👉 함께 읽으면 좋은 글: 블로그스팟 파비콘 설정하는 법 (아이콘 안 뜨는 문제 포함)

👉 함께 읽으면 좋은 글: 블로그스팟 메뉴바 만들고 카테고리 정리하는 법

👉 함께 읽으면 좋은 글: E-E-A-T 적용하고 검색 순위 확 바뀐 블로그 글쓰기 경험담

블로그스팟 사이드바는 "많이 넣는 것"보다 "적게, 정확하게 배치하는 것"이 핵심이에요. 검색창과 라벨만 깔끔하게 남기고 나머지를 과감히 걷어내면, 방문자 동선이 본문으로 집중되면서 체류시간과 광고 수익 모두 자연스럽게 올라갑니다.


사이드바 정리하면서 겪은 시행착오나 궁금한 점이 있다면 댓글로 남겨주세요. 비슷한 고민을 가진 분들한테 도움이 될 수 있어요. 글이 유용했다면 공유도 부탁드립니다.

댓글