diff --git a/components/admin/AdminSettingsNavigation.vue b/components/admin/AdminSettingsNavigation.vue
new file mode 100644
index 0000000..1b68bc7
--- /dev/null
+++ b/components/admin/AdminSettingsNavigation.vue
@@ -0,0 +1,119 @@
+<script setup>
+/**
+ * 관리자 설정 화면 내비게이션
+ * @property {string} searchValue - 검색 입력 표시값
+ * @property {Array} filteredGroups - 검색 결과가 반영된 내비 그룹
+ * @property {Array} groups - 전체 내비 그룹
+ * @property {string} activeSectionId - 현재 활성 섹션 id
+ */
+defineProps({
+  searchValue: {
+    type: String,
+    default: ''
+  },
+  filteredGroups: {
+    type: Array,
+    default: () => []
+  },
+  groups: {
+    type: Array,
+    default: () => []
+  },
+  activeSectionId: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits([
+  'search-input',
+  'search-composition-end',
+  'navigate'
+])
+
+/**
+ * 모바일 구역 선택 변경을 부모 내비게이션 요청으로 전달한다.
+ * @param {Event} event - change 이벤트
+ * @returns {void}
+ */
+const onMobileNavChange = (event) => {
+  const target = event.target
+  if (!(target instanceof HTMLSelectElement) || !target.value) {
+    return
+  }
+
+  emit('navigate', target.value)
+}
+</script>
+
+<template>
+  <aside class="admin-settings-navigation admin-settings-screen__nav-column w-full shrink-0 border-b border-[#e6e8eb] bg-[#f7f8fa] lg:w-72 lg:max-w-[320px] lg:flex-none lg:border-b-0 lg:border-r lg:border-[#e6e8eb]">
+    <div class="admin-settings-navigation__inner admin-settings-screen__nav-inner max-h-[40vh] overflow-y-auto p-4 lg:max-h-none lg:h-full lg:overflow-y-auto lg:p-5">
+      <label class="admin-settings-navigation__search admin-settings-screen__search relative mb-4 block">
+        <span class="sr-only">설정 검색</span>
+        <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa3ad]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5" />
+          <path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+        <input
+          :value="searchValue"
+          class="admin-settings-navigation__search-input admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+          type="search"
+          autocomplete="off"
+          placeholder="설정 검색"
+          @input="$emit('search-input', $event)"
+          @compositionupdate="$emit('search-input', $event)"
+          @compositionend="$emit('search-composition-end', $event)"
+        >
+      </label>
+
+      <p
+        v-if="filteredGroups.length === 0"
+        class="admin-settings-navigation__empty admin-settings-screen__nav-empty rounded-md border border-dashed border-[#dce0e5] px-3 py-4 text-center text-xs text-[#657080]"
+      >
+        검색과 일치하는 설정 항목이 없습니다.
+      </p>
+      <nav v-else class="admin-settings-navigation__list admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
+        <template v-for="(group, gi) in filteredGroups" :key="group.heading">
+          <div v-if="gi > 0" class="admin-settings-navigation__separator admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
+          <div class="admin-settings-navigation__group admin-settings-screen__nav-group">
+            <p class="admin-settings-navigation__heading admin-settings-screen__nav-heading mb-2 px-2 text-xs font-semibold tracking-wide text-[#9aa3ad] uppercase">
+              {{ group.heading }}
+            </p>
+            <ul class="admin-settings-navigation__items admin-settings-screen__nav-list grid gap-0.5">
+              <li v-for="item in group.items" :key="item.id">
+                <button
+                  class="admin-settings-navigation__item admin-settings-screen__nav-item flex w-full items-center gap-2 rounded-md px-2 py-2 text-left font-medium text-[#5d6673] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
+                  :class="activeSectionId === item.id ? 'bg-[#e9ecef] text-[#15171a]' : ''"
+                  type="button"
+                  @click="$emit('navigate', item.id)"
+                >
+                  <AdminSettingsNavIcon :icon-id="item.iconId" />
+                  <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </template>
+      </nav>
+
+      <label class="admin-settings-navigation__jump admin-settings-screen__nav-jump mt-4 grid gap-1 lg:hidden">
+        <span class="mb-1 block text-xs font-medium text-[#657080]">구역 이동</span>
+        <span class="relative">
+          <select
+            class="w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-2 py-2 pr-10 text-sm"
+            :value="activeSectionId"
+            @change="onMobileNavChange"
+          >
+            <optgroup v-for="group in groups" :key="group.heading" :label="group.heading">
+              <option v-for="item in group.items" :key="item.id" :value="item.id">
+                {{ item.label }}
+              </option>
+            </optgroup>
+          </select>
+          <svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+        </span>
+      </label>
+    </div>
+  </aside>
+</template>
diff --git a/docs/map.md b/docs/map.md
index 9a8a894..19b2383 100644
--- a/docs/map.md
+++ b/docs/map.md
@@ -258,7 +258,8 @@
 | pages/admin/tags/index.vue | 태그 관리(메인 태그 드래그 정렬 자동 저장·more vert 메뉴, 일반 태그 배지 more vert 메뉴·검색/정렬, 태그 추가 버튼), 액션 피드백 토스트 |
 | pages/admin/tags/new.vue | 태그 생성 |
 | pages/admin/tags/[id].vue | 태그 수정 |
-| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **SNS 정보** 편집 상태·저장 요청 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **메인 화면** 편집 상태·저장 요청·커버 업로드 처리 연결, **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바** 편집 상태·저장 요청 연결, **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, 설정 검색 상태·활성 구역 계산·스크롤 이동 처리, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **SNS 정보** 편집 상태·저장 요청 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **메인 화면** 편집 상태·저장 요청·커버 업로드 처리 연결, **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바** 편집 상태·저장 요청 연결, **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
+| components/admin/AdminSettingsNavigation.vue | 관리자 설정 좌측 내비게이션(설정 검색 입력·검색 결과 목록·모바일 구역 선택·구역 이동 이벤트) |
 | components/admin/AdminHomeCoverSettingsCard.vue | 관리자 설정 메인 화면 카드(라이트·다크 커버 미리보기·드롭존·파일 선택·오버레이 문구·저장 이벤트) |
 | components/admin/AdminBrandSettingsCard.vue | 관리자 설정 브랜드 컬러 카드(읽기 미리보기·색상 입력·텍스트 입력·예시 배지·저장 이벤트) |
 | components/admin/AdminTitleDescriptionSettingsCard.vue | 관리자 설정 블로그 제목·설명 카드(읽기 행·편집 입력·공개 화면 미리보기·저장 이벤트) |
diff --git a/docs/todo.md b/docs/todo.md
index c42f40d..245c002 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -4,7 +4,7 @@
 
 - 거대 컴포넌트 책임 분리 진행.
   - `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
-  - `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정·블로그 제목/설명·사이트 정보·SNS 정보·어나운스 바·메인 화면처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
+  - `pages/admin/settings/index.vue`: 설정 카드별 편집 상태·스냅샷·저장 요청 로직을 composable 단위로 추가 분리.
   - `pages/admin/settings/index.vue`: 업로드 제한 셀렉트가 블로그 제목·설명 읽기 카드 안에 있으나 저장 필드는 POST 설정에 묶여 있어, 별도 업로드 제한 카드 또는 POST 설정 편집 영역으로 위치와 저장 흐름을 정리.
   - `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
   - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
diff --git a/docs/update.md b/docs/update.md
index 988fd07..5ce2ae7 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,11 @@
 # 업데이트 이력
 
+## v1.11.31
+
+- 관리자 설정 좌측 내비게이션을 `AdminSettingsNavigation` 컴포넌트로 분리.
+- 설정 검색 입력·검색 결과 목록·모바일 구역 선택 렌더링 책임을 설정 화면에서 하위 컴포넌트로 이동.
+- 설정 화면은 검색 상태·활성 구역 계산·스크롤 이동 처리만 담당하도록 정리.
+
 ## v1.11.30
 
 - 관리자 설정의 메인 화면 카드를 `AdminHomeCoverSettingsCard` 컴포넌트로 분리.
diff --git a/package-lock.json b/package-lock.json
index 335a89b..635d688 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.30",
+  "version": "1.11.31",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.30",
+      "version": "1.11.31",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/package.json b/package.json
index 9233fc6..f34f9cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.30",
+  "version": "1.11.31",
   "private": true,
   "type": "module",
   "imports": {
diff --git a/pages/admin/settings/index.vue b/pages/admin/settings/index.vue
index d91eeb9..e2abdf4 100644
--- a/pages/admin/settings/index.vue
+++ b/pages/admin/settings/index.vue
@@ -745,19 +745,6 @@ const scrollToSection = (sectionId) => {
   }, 520)
 }
 
-/**
- * 모바일 구역 선택 변경
- * @param {Event} event - change 이벤트
- * @returns {void}
- */
-const onMobileNavChange = (event) => {
-  const target = event.target
-  if (!(target instanceof HTMLSelectElement) || !target.value) {
-    return
-  }
-  scrollToSection(target.value)
-}
-
 /**
  * 설정 화면을 닫고 이전 관리 화면으로 돌아간다.
  * @returns {Promise<void>}
@@ -2020,75 +2007,15 @@ onBeforeUnmount(() => {
 
     <div class="admin-settings-screen__shell flex min-h-0 flex-1 justify-center overflow-hidden px-0 sm:px-4 lg:px-6">
       <div class="admin-settings-screen__body flex min-h-0 w-full max-w-[1120px] flex-1 flex-col lg:flex-row">
-        <aside class="admin-settings-screen__nav-column w-full shrink-0 border-b border-[#e6e8eb] bg-[#f7f8fa] lg:w-72 lg:max-w-[320px] lg:flex-none lg:border-b-0 lg:border-r lg:border-[#e6e8eb]">
-          <div class="admin-settings-screen__nav-inner max-h-[40vh] overflow-y-auto p-4 lg:max-h-none lg:h-full lg:overflow-y-auto lg:p-5">
-          <label class="admin-settings-screen__search relative mb-4 block">
-            <span class="sr-only">설정 검색</span>
-            <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa3ad]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-              <circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5" />
-              <path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-            </svg>
-            <input
-              :value="navSearchInput"
-              class="admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
-              type="search"
-              autocomplete="off"
-              placeholder="설정 검색"
-              @input="onNavSearchInput"
-              @compositionupdate="onNavSearchInput"
-              @compositionend="onNavSearchCompositionEnd"
-            >
-          </label>
-
-          <p
-            v-if="filteredSettingsNavGroups.length === 0"
-            class="admin-settings-screen__nav-empty rounded-md border border-dashed border-[#dce0e5] px-3 py-4 text-center text-xs text-[#657080]"
-          >
-            검색과 일치하는 설정 항목이 없습니다.
-          </p>
-          <nav v-else class="admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
-            <template v-for="(group, gi) in filteredSettingsNavGroups" :key="group.heading">
-              <div v-if="gi > 0" class="admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
-              <div class="admin-settings-screen__nav-group">
-                <p class="admin-settings-screen__nav-heading mb-2 px-2 text-xs font-semibold tracking-wide text-[#9aa3ad] uppercase">
-                  {{ group.heading }}
-                </p>
-                <ul class="admin-settings-screen__nav-list grid gap-0.5">
-                  <li v-for="item in group.items" :key="item.id">
-                    <button
-                      class="admin-settings-screen__nav-item flex w-full items-center gap-2 rounded-md px-2 py-2 text-left font-medium text-[#5d6673] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
-                      :class="activeSectionId === item.id ? 'bg-[#e9ecef] text-[#15171a]' : ''"
-                      type="button"
-                      @click="scrollToSection(item.id)"
-                    >
-                      <AdminSettingsNavIcon :icon-id="item.iconId" />
-                      <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
-                    </button>
-                  </li>
-                </ul>
-              </div>
-            </template>
-          </nav>
-
-          <label class="admin-settings-screen__nav-jump mt-4 grid gap-1 lg:hidden">
-            <span class="mb-1 block text-xs font-medium text-[#657080]">구역 이동</span>
-            <span class="relative">
-              <select
-                class="w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-2 py-2 pr-10 text-sm"
-                :value="activeSectionId"
-                @change="onMobileNavChange"
-              >
-                <optgroup v-for="group in settingsNavGroups" :key="group.heading" :label="group.heading">
-                  <option v-for="item in group.items" :key="item.id" :value="item.id">
-                    {{ item.label }}
-                  </option>
-                </optgroup>
-              </select>
-              <svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
-            </span>
-          </label>
-        </div>
-      </aside>
+        <AdminSettingsNavigation
+          :search-value="navSearchInput"
+          :filtered-groups="filteredSettingsNavGroups"
+          :groups="settingsNavGroups"
+          :active-section-id="activeSectionId"
+          @search-input="onNavSearchInput"
+          @search-composition-end="onNavSearchCompositionEnd"
+          @navigate="scrollToSection"
+        />
 
       <main
         ref="mainScrollRef"