[스킨 가이드 #03] 블로그스팟 계층형 카테고리 만들기｜슬래시(/) 라벨·드롭다운 메뉴·카드 뷰 설정법

서재에 책을 꽂을 때 주제별로 가지런히 서랍을 나누어 두듯, 흩어져 있는 생각의 편린들에 단정한 제자리를 찾아주는 일은 블로그를 찾아온 소중한 독자를 향한 가장 정갈한 환대입니다.

처음 블로그를 시작할 때는 글이 몇 개 되지 않으니 카테고리가 없어도 크게 불편하지 않습니다. 하지만 글이 50개, 100개씩 쌓이기 시작하면 이야기가 달라집니다. 독자는 필요한 정보를 찾기 위해 여러 페이지를 넘겨야 하고, 운영자 역시 어떤 글을 어디에 배치해야 할지 고민하게 됩니다.

특히 구글 블로그스팟(Blogger)은 일반적인 블로그 서비스와 달리 기본적으로 평면적인 라벨(Label) 구조를 사용합니다. 글에 주제를 표시할 수는 있지만, 대분류 아래 소분류를 넣는 전통적인 폴더형 카테고리 기능은 기본으로 제공하지 않습니다.

이러한 불편함을 해결하기 위해 일부 커스텀 테마는 특별한 라벨 해석 기능을 제공합니다. 오늘 소개할 방법도 그중 하나입니다. 복잡한 코드를 매번 수정하는 대신 키보드의 작은 빗금, 슬래시(/) 하나로 카테고리의 부모와 자식을 구분하는 방식입니다.

이번 스킨 가이드에서는 라벨을 입력하는 기초부터 상단 드롭다운 메뉴 연결, 카드 뷰 활용, 기존 글 정리 방법까지 차근차근 살펴보겠습니다.

먼저 확인하세요. 이 글에서 소개하는 자동 폴더 트리, #categories 패널, 카드 뷰 전환 기능은 해당 기능을 지원하는 커스텀 테마를 기준으로 합니다. Blogger 기본 테마에서는 동일하게 작동하지 않을 수 있습니다.

1. 블로그스팟 계층형 카테고리는 어떤 원리로 만들어질까요?

핵심은 기존 라벨에 계층 정보를 담고, 테마가 그 정보를 폴더 형태로 보여주는 것입니다.

Blogger의 라벨은 원래 글을 주제별로 구분하기 위한 기능입니다. 예를 들어 스마트폰 리뷰 글에는 '스마트폰', 노트북 관련 글에는 '노트북'이라는 라벨을 붙일 수 있습니다.

다만 이런 방식으로 라벨이 늘어나면 스마트폰과 노트북이 모두 IT 관련 글이라는 사실을 한눈에 알아보기 어렵습니다.

여기서 슬래시(/)를 활용하면 이야기가 달라집니다.

입력하는 라벨	테마에서 표현하는 구조
IT 리뷰/스마트폰	📁 IT 리뷰 → 스마트폰
IT 리뷰/노트북	📁 IT 리뷰 → 노트북
재테크 전략/절세 꿀팁	📁 재테크 전략 → 절세 꿀팁
국내 여행/경상북도/포항	📁 국내 여행 → 경상북도 → 포항

예를 들어 'IT 리뷰/스마트폰'이라는 라벨을 입력하면 Blogger는 이를 하나의 라벨 이름으로 저장합니다. 이후 커스텀 테마의 스크립트가 슬래시를 기준으로 문구를 나누어 'IT 리뷰'라는 상위 폴더와 '스마트폰'이라는 하위 항목으로 표시하는 것입니다.

즉, 실제 Blogger 내부에 폴더가 새로 생기는 것은 아닙니다. 기존 라벨 데이터를 활용해 방문자 화면에 계층 구조를 구현하는 방식이라고 이해하시면 됩니다.

이 차이를 알아두면 나중에 라벨을 수정하거나 다른 테마로 교체할 때도 혼란을 줄일 수 있습니다.

2. 슬래시(/) 라벨은 어떻게 입력하면 될까요?

설정 방법은 생각보다 간단합니다. 별도의 카테고리 관리 화면을 만들 필요 없이 평소 글을 작성하던 Blogger 편집기에서 라벨을 입력하면 됩니다.

글 작성 화면에서 라벨 설정하기

1. Blogger 관리자 페이지에 로그인합니다.
2. [새 글]을 선택하거나 기존 글의 편집 화면을 엽니다.
3. 오른쪽 게시물 설정에서 [라벨] 항목을 찾습니다.
4. 원하는 대분류와 소분류를 슬래시(/)로 연결해 입력합니다.
5. 글을 저장하거나 발행한 뒤 실제 블로그에서 카테고리 표시를 확인합니다.

여기서 중요한 점이 있습니다. 슬래시로 연결한 문구 전체를 하나의 라벨로 입력해야 한다는 것입니다.

예를 들어 'IT 리뷰/스마트폰'을 입력하려는데 'IT 리뷰'와 '스마트폰'을 쉼표로 구분하면 두 개의 독립된 라벨이 됩니다. 이렇게 입력하면 테마가 의도한 계층 구조를 구성하지 못할 수 있습니다.

여러 개의 완성된 라벨을 하나의 글에 지정할 때는 쉼표로 구분할 수 있지만, 하나의 계층을 표현하는 도중에는 쉼표를 넣지 않는 것이 좋습니다.

실전 예시: 스마트폰 배터리 관리법에 관한 글을 작성한다면 'IT 리뷰/스마트폰'을 입력할 수 있습니다. 다른 글에서 같은 라벨을 다시 사용하면 해당 라벨에 속한 글들을 하나의 주제로 모아 보여줄 수 있습니다.

처음 설정하시는 분이라면 기존 글을 한꺼번에 변경하기보다 테스트 글 하나에 먼저 적용해 보는 것을 추천합니다.

3. 2단계부터 3단계 이상까지 폴더 트리를 확장할 수 있을까요?

슬래시 라벨의 매력은 단순히 대분류와 소분류를 나누는 데 그치지 않는다는 점입니다.

테마가 다단계 경로 분석을 지원한다면 슬래시를 추가해 더 깊은 카테고리 구조를 표현할 수 있습니다.

이와 같은 구조를 표현하려면 '블로그 운영/스킨 가이드/설치 방법', '블로그 운영/SEO 전략/키워드 분석'처럼 전체 경로를 라벨 이름에 담는 방식을 생각해 볼 수 있습니다.

다만 여기서 한 가지를 기억해야 합니다. 슬래시를 여러 번 입력할 수 있다는 사실과 테마가 무제한 깊이를 지원한다는 사실은 서로 다릅니다. 실제로 몇 단계까지 접고 펼칠 수 있는지는 설치한 테마의 구현 방식에 따라 달라집니다.

또한 계층이 깊다고 반드시 편리한 것도 아닙니다. 방문자가 원하는 글을 찾으려면 폴더를 너무 많이 열어야 할 수도 있기 때문입니다.

일반적인 정보성 블로그라면 대분류와 소분류를 중심으로 구성하고, 주제가 충분히 늘어난 경우에만 세 번째 단계를 사용하는 편이 관리하기 쉽습니다.

특히 처음 블로그를 운영하는 분들은 상위 카테고리 5~7개 정도를 기준으로 먼저 정리하고, 실제 글의 양에 따라 소분류를 늘려보세요. 이는 필수 규칙이 아니라 지나치게 복잡한 메뉴를 피하기 위한 실용적인 출발점입니다.

4. 상단 메뉴에 카테고리 드롭다운을 연결하는 방법

사이드바에 폴더 트리를 마련했다면 이번에는 블로그 상단에도 카테고리 메뉴를 연결해 보겠습니다.

PC에서는 사이드바가 눈에 잘 띄지만 모바일에서는 화면 공간이 좁아 사이드바가 아래쪽으로 이동하거나 숨겨지는 경우가 있습니다. 따라서 상단 메뉴에서도 카테고리에 접근할 수 있도록 만드는 것이 유용합니다.

이 가이드에서 사용하는 커스텀 테마는 #categories라는 특별한 주소 값을 카테고리 패널을 여는 신호로 활용하도록 설계된 경우를 전제로 합니다.

상단 메뉴 LinkList 설정 순서

1. Blogger 관리자 페이지에서 [레이아웃]으로 이동합니다.
2. 테마에 마련된 [상단 메뉴바(LinkList)] 가젯을 찾습니다.
3. 가젯의 [수정]을 선택합니다.
4. 새 메뉴 항목을 추가합니다.
5. 사이트 이름에는 카테고리를 입력합니다.
6. 사이트 URL에는 #categories를 입력합니다.
7. 저장한 다음 실제 블로그 화면에서 동작을 확인합니다.

설정이 정상적으로 연결되면 방문자가 상단의 '카테고리'를 선택했을 때 별도의 목록 페이지로 이동하는 대신 현재 화면에서 카테고리 패널이 열리도록 구성할 수 있습니다.

마치 서랍장의 손잡이를 잡아당기면 안쪽에 정리된 물건들이 보이듯, 블로그 전체의 주제를 한자리에서 살펴볼 수 있는 것입니다.

#categories를 입력했는데 메뉴가 열리지 않는다면?

먼저 사용 중인 테마가 해당 값을 인식하는지 확인해야 합니다. #categories는 Blogger 전체에 적용되는 공통 명령어가 아닙니다.

일반 테마에서는 단순히 현재 페이지의 주소 끝에 '#categories'가 붙을 뿐, 별도의 패널이 열리지 않을 수 있습니다.

또한 테마마다 상단 메뉴 가젯의 이름과 배치 위치가 다를 수 있습니다. LinkList 대신 다른 메뉴 시스템을 사용하는 테마라면 해당 테마의 안내에 따라 설정해야 합니다.

설정 후에는 PC뿐 아니라 휴대전화에서도 메뉴가 정상적으로 열리고 닫히는지 확인해 보시는 것이 좋습니다.

5. 사이드바의 접이식 폴더 트리는 어떻게 활용할까요?

폴더형 카테고리의 장점은 모든 항목을 한꺼번에 펼쳐놓지 않아도 된다는 데 있습니다.

주제가 많아질수록 단순 라벨 목록은 길어지기 쉽습니다. 반면 접이식 폴더 트리에서는 대분류만 먼저 보여주고 필요한 소분류를 선택적으로 펼칠 수 있습니다.

예를 들어 방문자가 '국내 여행'이라는 폴더를 선택하면 그 아래 '경상북도', '강원도', '제주도' 같은 하위 항목이 나타나는 방식입니다.

독자는 자신과 관계없는 주제를 지나치지 않고 원하는 정보로 이동할 수 있습니다.

접이식 카테고리를 활용하면 좋은 블로그

• 여행 블로그: 국내 여행, 해외 여행, 지역별 여행 정보 분류
• IT 블로그: 스마트폰, 노트북, 주변기기, 소프트웨어 정리
• 생활 정보 블로그: 자동차 관리, 집 관리, 생활 요령 구분
• 블로그 운영 가이드: 테마 설치, 광고 설정, SEO, 글쓰기 방법 분류

특히 여러 주제를 장기간 다루는 블로그에서는 이런 구조가 더욱 유용합니다. 새 글을 올릴 때 기존 분류를 그대로 활용할 수 있어 운영 방식에 일관성이 생기기 때문입니다.

다만 폴더가 너무 많거나 이름이 길면 오히려 가독성이 떨어집니다. '일상생활에서 활용할 수 있는 다양한 유용한 정보'처럼 긴 명칭보다는 '생활 정보'처럼 짧고 분명한 이름이 좋습니다.

카테고리는 운영자가 만든 분류표이지만, 방문자에게는 길을 알려주는 안내판이라는 점을 기억해 주세요.

6. 목록 뷰와 2단·3단·4단 카드 뷰는 어떻게 다를까요?

카테고리를 정리했다면 다음으로 살펴볼 부분은 글을 보여주는 방식입니다.

어떤 독자는 제목과 날짜를 빠르게 훑어보기를 원합니다. 반면 다른 독자는 사진과 본문 요약을 함께 보면서 관심 있는 글을 선택합니다.

이 가이드에서 다루는 커스텀 테마는 이러한 차이를 고려해 목록 뷰와 여러 가지 카드 그리드 뷰를 제공하도록 구성된 경우를 전제로 합니다.

보기 방식	특징	추천 활용
목록 뷰	제목 중심의 간결한 배열	정보성 글, 공지, 가이드
2단 카드	큰 이미지와 넉넉한 요약 공간	여행, 제품 리뷰
3단 카드	이미지와 정보량의 균형	일반적인 매거진형 블로그
4단 카드	한 화면에 많은 글 표시	글이 많은 자료형 블로그

목록 뷰는 글을 빠르게 탐색하기에 좋습니다. 특히 블로그 운영법이나 문제 해결 방법처럼 제목만으로 내용을 판단할 수 있는 글에 잘 어울립니다.

반대로 여행지 소개나 제품 사용기처럼 사진이 중요한 콘텐츠는 카드 뷰가 유용합니다. 여러 글의 대표 이미지를 비교하면서 자연스럽게 관심 있는 콘텐츠를 선택할 수 있기 때문입니다.

16:9 썸네일과 WebP 이미지 활용

카드형 화면에서는 대표 이미지의 품질과 비율도 중요합니다. 각 이미지의 크기와 비율이 들쭉날쭉하면 전체 화면이 어수선하게 느껴질 수 있습니다.

테마가 16:9 썸네일을 사용하는 경우라면 대표 이미지도 가로형 비율로 준비하는 편이 좋습니다. 또한 WebP처럼 파일 크기를 줄이기 쉬운 이미지 형식을 활용하면 페이지 용량을 관리하는 데 도움이 됩니다.

다만 이미지를 WebP로 저장했다고 자동으로 화면 속도가 빨라지는 것은 아닙니다. 실제 파일 크기, 이미지 해상도, 테마의 불러오기 방식도 함께 영향을 줍니다.

7. 방문자가 선택한 보기 방식은 다음 방문에도 유지될까요?

매번 블로그에 들어올 때마다 원하는 보기 방식으로 다시 바꿔야 한다면 조금 번거롭겠지요.

일부 커스텀 테마는 이런 불편을 줄이기 위해 브라우저의 localStorage 기능을 사용합니다.

localStorage는 웹사이트가 방문자의 브라우저에 간단한 설정값을 보관할 수 있도록 돕는 저장 공간입니다.

예를 들어 방문자가 글 목록을 3단 카드로 전환했을 때 테마가 이 선택을 저장하도록 만들어져 있다면, 다음 방문에도 이전 설정을 다시 적용할 수 있습니다.

독자의 입장에서는 자신에게 익숙한 화면을 반복해서 설정하지 않아도 되는 장점이 있습니다.

하지만 이 기능은 반드시 모든 환경에서 유지되는 것은 아닙니다. 다른 브라우저나 기기를 사용하거나 저장된 사이트 데이터를 삭제하면 설정이 초기화될 수 있습니다. 브라우저의 개인정보 보호 설정에 따라 저장 동작이 제한될 수도 있습니다.

따라서 보기 방식 기억 기능은 편의성을 높이는 보조 기능으로 이해하는 것이 정확합니다.

8. 기존 글의 라벨을 정리할 때 주의할 점은 무엇일까요?

새 블로그라면 처음부터 분류 규칙을 정하면 되지만, 이미 많은 글을 발행한 블로그라면 조금 더 신중하게 접근하는 것이 좋습니다.

기존 라벨을 한꺼번에 변경하면 독자가 사용하던 라벨 목록 주소나 내부 링크가 영향을 받을 수 있기 때문입니다.

기존 라벨과 새 계층형 라벨의 차이

예를 들어 기존에 '스마트폰'이라는 라벨을 사용하고 있었다고 가정해 보겠습니다.

이를 'IT 리뷰/스마트폰'으로 바꾸면 새로운 라벨은 Blogger에서 기존 라벨과 별개의 이름으로 취급됩니다. 따라서 기존 '스마트폰' 라벨 목록으로 연결되는 링크가 새 라벨 목록을 자동으로 가리키는 것은 아닙니다.

이 부분은 특히 블로그 내부 링크를 많이 사용하거나 외부에 라벨 주소가 공유되어 있는 경우 확인해야 합니다.

기존 블로그를 안전하게 정리하는 순서

1. 현재 사용 중인 라벨의 이름과 용도를 먼저 정리합니다.
2. 앞으로 사용할 대분류와 소분류의 명칭을 결정합니다.
3. 테마를 백업하고 테스트 글 한 개에 새 라벨을 적용합니다.
4. 사이드바와 상단 메뉴에서 정상적으로 표시되는지 확인합니다.
5. 문제가 없다면 관련 글의 라벨을 순서대로 변경합니다.
6. 기존 라벨 목록으로 연결되는 내부 링크가 있는지 점검합니다.

이때 기존 라벨을 반드시 모두 삭제할 필요는 없습니다. 방문자의 이용 흐름과 기존 링크 구조를 살펴보고 유지할 라벨과 정리할 라벨을 구분하면 됩니다.

카테고리 정리는 한 번에 끝내야 하는 작업이 아니라, 블로그가 성장하면서 조금씩 다듬는 과정이라고 생각하시면 부담이 줄어듭니다.

9. 카테고리 구조를 잘 만들면 SEO에도 도움이 될까요?

카테고리는 단순히 디자인을 꾸미는 장식이 아닙니다. 방문자가 필요한 글을 쉽게 찾고 관련 콘텐츠를 이어서 읽을 수 있도록 돕는 탐색 구조이기도 합니다.

예를 들어 '블로그스팟 테마 설치 방법'을 읽은 방문자가 같은 폴더 안에서 '광고 슬롯 설정'이나 '본문 서식 적용 방법'을 발견한다면 자연스럽게 다음 글로 이동할 수 있습니다.

이런 구조는 독자의 편리함을 높이고 관련 글을 서로 연결하는 데 도움이 됩니다.

검색엔진 역시 실제로 연결된 링크를 통해 블로그의 다양한 페이지를 발견할 수 있습니다. 하지만 슬래시 라벨을 사용하거나 폴더 트리를 만들었다는 사실만으로 검색 순위가 올라가는 것은 아닙니다.

중요한 것은 독자가 이해하기 쉬운 분류와 실제로 접근할 수 있는 링크입니다.

검색 친화적인 카테고리 이름 정하기

카테고리 이름에는 가능하면 독자가 실제로 이해하고 검색할 만한 단어를 사용하는 것이 좋습니다.

예를 들어 '나의 디지털 서랍'보다는 'IT 리뷰', '돈 이야기 모음'보다는 '재테크 정보'처럼 주제를 명확히 전달하는 이름이 유용할 수 있습니다.

그렇다고 카테고리 이름에 검색어를 지나치게 많이 넣을 필요는 없습니다. 긴 키워드를 억지로 나열하면 오히려 탐색이 불편해질 수 있습니다.

카테고리를 잘 정리한 뒤에는 관련 글끼리 자연스러운 내부 링크를 추가해 보세요. 폴더 메뉴는 전체 길을 알려주고, 본문 속 내부 링크는 다음에 읽으면 좋은 글을 안내하는 역할을 합니다.

이 두 가지가 함께 작동할 때 독자는 블로그를 하나의 잘 정리된 자료실처럼 이용할 수 있습니다.

10. 실수 줄이는 스마트 팁｜카테고리 운영에서 놓치기 쉬운 부분

설정을 마쳤다고 바로 모든 작업이 끝나는 것은 아닙니다. 작은 차이 때문에 메뉴가 어긋나거나 의도하지 않은 라벨이 만들어질 수 있어 몇 가지를 확인하면 좋습니다.

특히 'IT 리뷰/스마트폰'과 'IT 리뷰 / 스마트폰'처럼 공백이 섞인 입력은 주의해야 합니다. 테마가 트리 화면에서는 슬래시 앞뒤 공백을 정리해 하나로 묶어주더라도, Blogger 자체는 이를 서로 다른 라벨 이름과 목록 주소(/search/label/...)로 저장하기 때문에 처음부터 표기를 통일하는 편이 안전합니다.

또한 한 글에 관련 없는 라벨을 지나치게 많이 지정하면 카테고리 정리의 의미가 약해집니다. 글의 핵심 주제를 가장 잘 설명하는 분류를 중심으로 사용하는 것이 좋습니다.

마지막으로 테마를 교체할 계획이 있다면 현재 사용하는 계층형 카테고리 기능이 새 테마에서도 지원되는지 확인해 보세요. 라벨 자체는 남아 있더라도 폴더 트리 화면은 달라질 수 있습니다.

11. 카테고리가 잘 작동하는지 최종 확인하기

지금까지 설정한 내용을 실제 방문자의 입장에서 살펴볼 차례입니다.

먼저 블로그 첫 화면에서 상단 카테고리 메뉴를 선택해 보세요. 원하는 폴더가 열리고 하위 항목이 정상적으로 나타나는지 확인합니다.

다음으로 특정 소분류를 선택해 해당 주제의 글 목록으로 이동해 봅니다. 글 제목과 대표 이미지가 잘 나타나는지, 관련 없는 글이 함께 표시되지는 않는지도 살펴봅니다.

마지막으로 목록 뷰와 카드 뷰를 전환하고 모바일에서도 같은 과정을 반복해 보세요.

가능하다면 실제 방문자가 사용할 만한 휴대전화로 확인하는 것이 좋습니다. PC에서는 깔끔하게 보이는 메뉴도 작은 화면에서는 글자가 겹치거나 터치 영역이 좁아질 수 있기 때문입니다.

카테고리 구조의 완성도는 폴더가 얼마나 많이 만들어졌느냐보다 방문자가 원하는 글을 얼마나 쉽게 찾을 수 있느냐에 달려 있습니다.

12. 함께 엮어 읽는 거미줄 가이드

단정한 서랍을 마련하셨다면 이제 그 안에 담길 글의 표현과 블로그 운영 환경도 함께 다듬어 볼 차례입니다.

이번 카테고리 설정을 기준으로 다음 세 가지 스킨 가이드를 함께 살펴보시면 블로그 전체의 구조를 이해하는 데 도움이 됩니다.

각 카드는 스킨 가이드 개별 글의 영문 퍼머링크 규칙(/2026/11/...html)으로 연결되어 있습니다. 발행 연월이나 퍼머링크를 다르게 지정했다면 실제 글 주소에 맞게 조정해 주세요.

마무리하며｜잘 정리된 블로그는 다시 찾고 싶은 공간이 됩니다

길이 잘 닦인 숲길을 걷는 여행자는 쉽게 지치지 않고 더 깊은 숲으로 걸어 들어갑니다.

블로그도 그렇습니다. 독자가 첫 번째 글을 읽고 자연스럽게 두 번째 글을 발견하고, 원하는 주제를 쉽게 찾아갈 수 있다면 그 블로그는 단순한 글 목록을 넘어 하나의 유용한 자료실이 됩니다.

오늘 살펴본 슬래시(/) 라벨은 작은 입력 규칙이지만, 이를 지원하는 테마와 함께 사용하면 블로그의 구조를 훨씬 체계적으로 표현할 수 있습니다.

라벨은 분류의 기준을 만들고, 폴더 트리는 길을 보여주며, 상단 메뉴와 카드 뷰는 방문자가 그 길을 편리하게 이동하도록 돕습니다.

처음부터 모든 글을 완벽하게 분류하려고 애쓸 필요는 없습니다. 먼저 대분류를 정하고, 자주 쓰는 소분류를 만들고, 새 글을 발행할 때마다 같은 규칙을 적용해 보세요.

그렇게 조금씩 정돈된 구조는 시간이 흐를수록 운영자에게도 독자에게도 편리한 자산이 됩니다.

주변에 블로그스팟의 복잡한 라벨 때문에 고민하는 분이 있다면 이 가이드를 함께 공유해 보셔도 좋겠습니다.

다음 스킨 가이드에서는 카테고리 안에 담긴 글을 더욱 읽기 좋게 만드는 본문 5대 서식 활용법을 살펴보겠습니다.

오늘도 여러분의 블로그가 누군가에게 오래 머물고 싶은 작은 서재가 되기를 바랍니다.