티스토리 블로그 메뉴·네비게이션 커스터마이징 완벽 가이드

상단 메뉴부터 사이드바까지, 원하는 대로 블로그 동선 만들기

티스토리 블로그를 처음 만들고 나면 많은 분들이 가장 먼저 수정하고 싶어 하는 것이
‘메뉴’와 ‘네비게이션’ 구조입니다. 기본 스킨에 따라 상단 메뉴나 사이드바 메뉴 구성이
제한적일 수 있지만, HTML과 CSS 커스터마이징을 통해 충분히 원하는 방식으로 변경할 수 있습니다.
이 글에서는 티스토리 메뉴 커스터마이징의 기본 개념부터 적용 방법, 실제 적용 예시까지
한 번에 정리해드립니다.

메뉴와 네비게이션은 블로그의 ‘길 안내판’입니다

메뉴 구조는 방문자가 원하는 정보를 쉽게 찾게 만들어주는 역할을 합니다.
잘 정리된 메뉴는 검색엔진에도 유리하게 작용하며, 체류 시간과 재방문률을 높이는
핵심 UX(사용자 경험) 요소입니다. 티스토리는 스킨에 따라 상단 메뉴, 사이드바 메뉴,
푸터 메뉴 등을 설정할 수 있습니다.

티스토리 메뉴 설정 기본 방법 (기본 설정)

별도의 코드 수정 없이 메뉴를 만드는 가장 쉬운 방법은 ‘관리자 메뉴 → 꾸미기 → 메뉴’입니다.

1단계: 관리자 페이지 접속
2단계: 꾸미기 → 메뉴 편집 클릭
3단계: '카테고리', '페이지', '링크' 중 선택하여 메뉴 추가
4단계: 드래그로 순서 변경, 저장

메뉴 유형 설명

카테고리	블로그에 등록된 글 분류 연결 메뉴
페이지	별도로 생성한 소개, 연락처 등 연결
외부 링크	타 웹사이트, SNS 등 외부 주소 연결 가능

HTML을 통한 상단 네비게이션 직접 수정하기

고급 커스터마이징을 원한다면 HTML 소스를 직접 수정할 수 있습니다.
skin.html 파일 내 <nav> 또는 <ul class="gnb"> 영역이
상단 메뉴를 구성하는 부분입니다.

예시 코드:

<ul class="gnb">
  <li><a href="/">홈</a></li>
  <li><a href="/category/여행">여행</a></li>
  <li><a href="/category/리뷰">리뷰</a></li>
  <li><a href="/about">소개</a></li>
</ul>

CSS와 함께 적용하여 색상, 크기, 간격 등도 자유롭게 변경 가능합니다.

CSS로 스타일 변경하기 (폰트, 색상, 위치 등)

메뉴 디자인은 CSS로 조정합니다. 아래는 기본적인 CSS 속성 예시입니다.

.gnb {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}
.gnb li {
  margin: 0 20px;
  font-weight: bold;
}
.gnb a {
  color: #333;
  text-decoration: none;
}

속성 효과

background	메뉴 바 배경색 지정
margin	메뉴 간 간격 조정
font-weight	글자 굵기 설정
text-decoration	링크 밑줄 제거 등 스타일링

드롭다운 메뉴 만들기 (2차 메뉴 구성법)

2단 메뉴를 구성하려면 <ul> 안에 또 다른 <ul>을 중첩하여 사용합니다.

예시 HTML 구조:

<ul class="gnb">
  <li>
    <a href="#">여행</a>
    <ul class="sub-menu">
      <li><a href="/category/국내여행">국내여행</a></li>
      <li><a href="/category/해외여행">해외여행</a></li>
    </ul>
  </li>
</ul>

CSS 예시:

.sub-menu {
  display: none;
  position: absolute;
}
.gnb li:hover .sub-menu {
  display: block;
}

항목 설명

display:none	기본 상태에서 숨김 처리
hover	마우스를 올릴 때 하위 메뉴 표시
position	하위 메뉴 위치 설정 (상대 or 절대값)

사이드바 메뉴 커스터마이징 방법

일부 스킨에서는 사이드바 영역도 메뉴 역할을 합니다. HTML 내 <aside> 또는
<div class="sidebar"> 영역을 확인하면, 사이드 메뉴 구성을 직접 수정할 수 있습니다.

예시:

<div class="sidebar">
  <h3>카테고리</h3>
  <ul>
    <li><a href="/category/IT">IT</a></li>
    <li><a href="/category/라이프">라이프</a></li>
  </ul>
</div>

이와 함께 CSS에서 높이, 정렬, 테두리 등도 자유롭게 설정 가능합니다.

메뉴 구성 시 자주 하는 실수와 피해야 할 점

메뉴가 너무 많아 복잡할 경우: 사용자 혼란 유발
외부 링크 누락: SNS, 유튜브 등 연결 안 되어 있는 경우
모바일 반응형 메뉴 미설정: 모바일에서 메뉴 깨짐 현상 발생

반응형 디자인을 고려한 메뉴는 필수입니다. CSS 미디어쿼리를 활용하여
모바일 전용 메뉴 스타일을 따로 설정할 수 있습니다.

대표적인 반응형 메뉴 구조 예시

화면 너비 조건 적용되는 메뉴 디자인

PC (min-width: 1024px)	전체 메뉴 가로 노출
태블릿 (768~1023px)	메뉴 축소 및 드롭다운 전환
모바일 (max-width: 767px)	햄버거 버튼 형태로 전환, 클릭 시 펼쳐짐

미디어쿼리 예시:

@media (max-width: 767px) {
  .gnb {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

메뉴 구성은 콘텐츠 중심으로, 방문자 동선을 고려해서 설계하자

메뉴는 디자인보다도 구조가 더 중요합니다.
자주 작성하는 카테고리, 정보 탐색 흐름, 사용자 유형(모바일 vs. 데스크탑)을
고려하여 메뉴 항목을 배치하세요.

메뉴 항목 전략적 배치 이유

블로그 소개	첫인상 전달용, 상단에 배치
콘텐츠 카테고리	탐색 편의성 제공, 중간 우선 배치
외부 채널	추가 신뢰 확보, 하단 또는 사이드 배치

네비게이션 커스터마이징은 블로그 운영 철학을 시각적으로 보여주는 과정입니다. 사용자 친화적 메뉴 구조로 방문자 만족도와 체류 시간을 높여보세요.

에드센스 승인됨