diff --git a/app/matching/_components/AgeRangeDrawer.tsx b/app/matching/_components/AgeRangeDrawer.tsx
new file mode 100644
index 0000000..ad3f37c
--- /dev/null
+++ b/app/matching/_components/AgeRangeDrawer.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import React, { useState } from "react";
+import { Minus, Plus } from "lucide-react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import { cn } from "@/lib/utils";
+import Button from "@/components/ui/Button";
+
+interface AgeRangeDrawerProps {
+  trigger: React.ReactNode;
+  minAge: number;
+  maxAge: number;
+  onConfirm: (minAge: number, maxAge: number) => void;
+}
+
+const MIN_AGE = 20;
+const MAX_AGE = 29;
+const ALL_AGES = Array.from(
+  { length: MAX_AGE - MIN_AGE + 1 },
+  (_, i) => MIN_AGE + i,
+);
+
+export default function AgeRangeDrawer({
+  trigger,
+  minAge: initialMin,
+  maxAge: initialMax,
+  onConfirm,
+}: AgeRangeDrawerProps) {
+  const [localMin, setLocalMin] = useState(initialMin);
+  const [localMax, setLocalMax] = useState(initialMax);
+
+  // Drawer가 열릴 때 현재 값으로 리셋
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setLocalMin(initialMin);
+      setLocalMax(initialMax);
+    }
+  };
+
+  const handleConfirm = () => {
+    onConfirm(localMin, localMax);
+  };
+
+  const increaseMin = () => {
+    if (localMin < localMax) setLocalMin((v) => v + 1);
+  };
+  const decreaseMin = () => {
+    if (localMin > MIN_AGE) setLocalMin((v) => v - 1);
+  };
+  const increaseMax = () => {
+    if (localMax < MAX_AGE) setLocalMax((v) => v + 1);
+  };
+  const decreaseMax = () => {
+    if (localMax > localMin) setLocalMax((v) => v - 1);
+  };
+
+  return (
+    <Drawer onOpenChange={handleOpenChange}>
+      <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+      <DrawerContent className="pb-8 outline-none" showHandle={false}>
+        <div className="flex flex-col px-6">
+          <DrawerHeader className="gap-4 px-0 pt-6 pb-0">
+            <div className="relative flex items-center justify-between">
+              <div className="w-[40px]" />
+              <DrawerTitle className="typo-16-700 text-color-text-black flex-1 text-center">
+                나이 구간 설정
+              </DrawerTitle>
+              <DrawerClose asChild>
+                <button
+                  type="button"
+                  className="typo-16-500 text-color-text-caption3 w-[40px] text-right"
+                >
+                  닫기
+                </button>
+              </DrawerClose>
+            </div>
+            <p className="typo-14-500 text-color-text-caption3 text-center">
+              원하는 나이 범위를 설정하세요.
+            </p>
+          </DrawerHeader>
+
+          {/* 시각적 나이 구간 표시 */}
+          <div className="mt-8">
+            <div className="flex">
+              {ALL_AGES.map((age, i) => {
+                const isInRange = age >= localMin && age <= localMax;
+                const isStart = age === localMin;
+                const isEnd = age === localMax;
+                const isFirst = i === 0;
+                const isLast = i === ALL_AGES.length - 1;
+
+                return (
+                  <div
+                    key={age}
+                    className="flex flex-1 flex-col items-center gap-2"
+                  >
+                    {/* 셀 */}
+                    <div
+                      className={cn(
+                        "h-10 w-full border-y border-r transition-all duration-300",
+                        // 첫 번째 셀 왼쪽 둥글게
+                        isFirst && "rounded-l-lg border-l",
+                        // 마지막 셀 오른쪽 둥글게
+                        isLast && "rounded-r-lg",
+                        // 선택 시작점 왼쪽 둥글게
+                        isStart && !isFirst && "rounded-l-lg border-l",
+                        // 선택 끝점 오른쪽 둥글게
+                        isEnd && !isLast && "rounded-r-lg",
+                      )}
+                      style={
+                        isInRange
+                          ? {
+                              borderColor: "rgba(255, 77, 97, 0.3)",
+                              background:
+                                "linear-gradient(to bottom, rgba(255, 77, 97, 0.2), rgba(255, 119, 94, 0.1))",
+                            }
+                          : {
+                              borderColor: "#e8e8e8",
+                              backgroundColor: "#f8f8f8",
+                            }
+                      }
+                    />
+                    {/* 나이 레이블 */}
+                    <span
+                      className={cn(
+                        "text-[11px] font-semibold transition-colors duration-300",
+                        isInRange
+                          ? "text-color-main-900"
+                          : "text-color-text-disabled",
+                      )}
+                    >
+                      {age}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* +/- 조절 영역 */}
+          <div className="mt-8 flex items-center justify-center gap-6">
+            {/* 최소 나이 조절 */}
+            <div className="flex flex-col items-center gap-2">
+              <span className="typo-12-500 text-color-text-caption3">
+                최소 나이
+              </span>
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  aria-label="최소 나이 감소"
+                  onClick={decreaseMin}
+                  disabled={localMin <= MIN_AGE}
+                  className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
+                  style={{ borderColor: "#e5e5e5" }}
+                >
+                  <Minus size={16} className="text-color-text-black" />
+                </button>
+                <span className="typo-24-700 text-color-main-900 w-12 text-center">
+                  {localMin}
+                </span>
+                <button
+                  type="button"
+                  aria-label="최소 나이 증가"
+                  onClick={increaseMin}
+                  disabled={localMin >= localMax}
+                  className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
+                  style={{ borderColor: "#e5e5e5" }}
+                >
+                  <Plus size={16} className="text-color-text-black" />
+                </button>
+              </div>
+            </div>
+
+            {/* 구분선 */}
+            <span className="typo-20-700 text-color-text-disabled mt-5">~</span>
+
+            {/* 최대 나이 조절 */}
+            <div className="flex flex-col items-center gap-2">
+              <span className="typo-12-500 text-color-text-caption3">
+                최대 나이
+              </span>
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  aria-label="최대 나이 감소"
+                  onClick={decreaseMax}
+                  disabled={localMax <= localMin}
+                  className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
+                  style={{ borderColor: "#e5e5e5" }}
+                >
+                  <Minus size={16} className="text-color-text-black" />
+                </button>
+                <span className="typo-24-700 text-color-main-900 w-12 text-center">
+                  {localMax}
+                </span>
+                <button
+                  type="button"
+                  aria-label="최대 나이 증가"
+                  onClick={increaseMax}
+                  disabled={localMax >= MAX_AGE}
+                  className="flex h-9 w-9 items-center justify-center rounded-full border bg-white transition-all active:scale-95 disabled:opacity-30"
+                  style={{ borderColor: "#e5e5e5" }}
+                >
+                  <Plus size={16} className="text-color-text-black" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* 확인 버튼 */}
+          <DrawerClose asChild>
+            <Button onClick={handleConfirm} className="mt-8">
+              확인
+            </Button>
+          </DrawerClose>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/app/matching/_components/MatchingAgeOption.tsx b/app/matching/_components/MatchingAgeOption.tsx
new file mode 100644
index 0000000..b9d45eb
--- /dev/null
+++ b/app/matching/_components/MatchingAgeOption.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { Check, Delete } from "lucide-react";
+import { cn } from "@/lib/utils";
+import AgeRangeDrawer from "./AgeRangeDrawer";
+
+interface MatchingAgeOptionProps {
+  onAgeRangeSelect: (minAge: number, maxAge: number) => void;
+  onReset: () => void;
+  minAge?: number;
+  maxAge?: number;
+}
+
+const DEFAULT_MIN = 20;
+const DEFAULT_MAX = 29;
+
+export default function MatchingAgeOption({
+  onAgeRangeSelect,
+  onReset,
+  minAge,
+  maxAge,
+}: MatchingAgeOptionProps) {
+  const isSelected = minAge !== undefined && maxAge !== undefined;
+  const [showCheck, setShowCheck] = useState(false);
+
+  const handleConfirm = (min: number, max: number) => {
+    onAgeRangeSelect(min, max);
+    setShowCheck(true);
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onReset();
+  };
+
+  useEffect(() => {
+    if (showCheck) {
+      const timer = setTimeout(() => setShowCheck(false), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [showCheck]);
+
+  const displayText =
+    isSelected && minAge === maxAge
+      ? `${minAge}살`
+      : isSelected
+        ? `${minAge}~${maxAge}살`
+        : "";
+
+  // 선택된 상태: Delete 버튼은 Drawer 밖에서 독립적으로 동작
+  if (isSelected) {
+    return (
+      <div className="border-color-gray-100 flex w-full items-center justify-between border-b pb-5">
+        <AgeRangeDrawer
+          minAge={minAge ?? DEFAULT_MIN}
+          maxAge={maxAge ?? DEFAULT_MAX}
+          onConfirm={handleConfirm}
+          trigger={
+            <button className="flex flex-col gap-1 text-left outline-none">
+              <h2 className="typo-20-700 text-color-text-black">
+                나이 구간 선택하기
+              </h2>
+              <p className="typo-14-500 text-color-text-caption3">
+                선택됨: {displayText}
+              </p>
+            </button>
+          }
+        />
+        {/* Delete 버튼: Drawer 트리거 밖에 위치 */}
+        <button
+          className="bg-pink-gradient border-color-pink-700 relative flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-[32px] border transition-transform active:scale-95 disabled:opacity-50"
+          onClick={handleDelete}
+          disabled={showCheck}
+          aria-label="나이 설정 삭제"
+        >
+          <div
+            className={cn(
+              "absolute flex items-center justify-center transition-opacity duration-300",
+              showCheck ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <Check
+              className="text-color-pink-700 h-[14px] w-[14px]"
+              strokeWidth={3}
+            />
+          </div>
+          <div
+            className={cn(
+              "absolute flex items-center justify-center transition-opacity duration-300",
+              !showCheck ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <Delete
+              className="text-color-pink-700 h-[20px] w-[20px]"
+              strokeWidth={2}
+            />
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  // 미선택 상태: 전체가 Drawer 트리거
+  return (
+    <AgeRangeDrawer
+      minAge={DEFAULT_MIN}
+      maxAge={DEFAULT_MAX}
+      onConfirm={handleConfirm}
+      trigger={
+        <button className="border-color-gray-100 flex w-full items-center justify-between border-b pb-5 text-left outline-none">
+          <div className="flex flex-col gap-1">
+            <h2 className="typo-20-700 text-color-text-black">
+              나이 구간 선택하기
+            </h2>
+            <p className="typo-14-500 text-color-text-caption3">
+              원하는 나이 범위를 설정해 보세요!
+            </p>
+          </div>
+          <div className="border-color-gray-100 flex h-9 w-[86px] items-center justify-center gap-[5px] rounded-[36px] border bg-white px-2">
+            <Image
+              src="/main/elec-bulb.png"
+              alt="bulb"
+              width={20}
+              height={20}
+              className="shrink-0"
+            />
+            <span className="typo-16-700 text-color-text-black leading-[19px]">
+              1
+            </span>
+          </div>
+        </button>
+      }
+    />
+  );
+}
diff --git a/app/matching/_components/MatchingAgeSection.tsx b/app/matching/_components/MatchingAgeSection.tsx
index 9d3972b..23c7a15 100644
--- a/app/matching/_components/MatchingAgeSection.tsx
+++ b/app/matching/_components/MatchingAgeSection.tsx
@@ -2,31 +2,40 @@
 
 import React from "react";
 import ProfileButton from "../../profile-builder/_components/ProfileButton";
+import { cn } from "@/lib/utils";
+
 interface MatchingAgeSectionProps {
   onAgeGroupSelect: (ageGroup: string) => void;
-  defaultValue?: string;
+  selected: string;
+  disabled?: boolean;
 }
 
 const AGE_GROUPS = ["연하", "동갑", "연상"];
 
 export default function MatchingAgeSection({
   onAgeGroupSelect,
-  defaultValue = "",
+  selected,
+  disabled = false,
 }: MatchingAgeSectionProps) {
-  const [selected, setSelected] = React.useState(defaultValue);
-
   const handleSelect = (group: string) => {
-    setSelected(group);
+    if (disabled) return;
     onAgeGroupSelect(group);
   };
 
   return (
-    <div className="border-color-gray-100 flex flex-col gap-4 border-b pb-5">
+    <div
+      className={cn(
+        "border-color-gray-100 flex flex-col gap-4 border-b pb-5 transition-opacity duration-300",
+        disabled && "pointer-events-none opacity-40",
+      )}
+    >
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1">
           <h2 className="typo-20-700 text-color-text-black">나이</h2>
           <p className="typo-14-500 text-color-text-caption3">
-            상대의 나이를 골라주세요.
+            {disabled
+              ? "나이 구간 옵션이 선택되어 비활성화되었습니다."
+              : "상대의 나이를 골라주세요."}
           </p>
         </div>
       </div>
diff --git a/app/matching/_components/MatchingFrequencySection.tsx b/app/matching/_components/MatchingFrequencySection.tsx
index 5534ed9..78fca2a 100644
--- a/app/matching/_components/MatchingFrequencySection.tsx
+++ b/app/matching/_components/MatchingFrequencySection.tsx
@@ -5,19 +5,16 @@ import ProfileButton from "../../profile-builder/_components/ProfileButton";
 
 interface MatchingFrequencySectionProps {
   onFrequencySelect: (frequency: string) => void;
-  defaultValue?: string;
+  selected: string;
 }
 
 const OPTIONS = ["자주", "보통", "적음"];
 
 export default function MatchingFrequencySection({
   onFrequencySelect,
-  defaultValue = "",
+  selected,
 }: MatchingFrequencySectionProps) {
-  const [selected, setSelected] = React.useState(defaultValue);
-
   const handleSelect = (frequency: string) => {
-    setSelected(frequency);
     onFrequencySelect(frequency);
   };
 
diff --git a/app/matching/_components/MatchingMBTISection.tsx b/app/matching/_components/MatchingMBTISection.tsx
index 0acb70f..78f60b3 100644
--- a/app/matching/_components/MatchingMBTISection.tsx
+++ b/app/matching/_components/MatchingMBTISection.tsx
@@ -5,7 +5,7 @@ import ProfileButton from "../../profile-builder/_components/ProfileButton";
 
 interface MatchingMBTISectionProps {
   onMBTISelect: (mbti: string) => void;
-  defaultValue?: string;
+  selected: string;
 }
 
 const OPPOSITES: Record<string, string> = {
@@ -26,15 +26,12 @@ const ROWS = [
 
 export default function MatchingMBTISection({
   onMBTISelect,
-  defaultValue = "",
+  selected,
 }: MatchingMBTISectionProps) {
-  // 온보딩 MBTI와 느낌을 맞추기 위해 내부 상태(useState) 사용
-  const [selected, setSelected] = React.useState<string[]>(
-    defaultValue.split("").filter(Boolean),
-  );
+  const selectedChars = selected.split("").filter(Boolean);
 
   const handleSelect = (char: string) => {
-    const newSelection = [...selected];
+    const newSelection = [...selectedChars];
     const index = newSelection.indexOf(char);
 
     if (index > -1) {
@@ -66,7 +63,6 @@ export default function MatchingMBTISection({
       }
     }
 
-    setSelected(newSelection);
     onMBTISelect(newSelection.join(""));
   };
 
@@ -87,7 +83,7 @@ export default function MatchingMBTISection({
             {row.map((char) => (
               <ProfileButton
                 key={char}
-                selected={selected.includes(char)}
+                selected={selectedChars.includes(char)}
                 onClick={() => handleSelect(char)}
               >
                 {char}
diff --git a/app/matching/_components/ScreenMatching.tsx b/app/matching/_components/ScreenMatching.tsx
index 1c1ecf1..7b1a083 100644
--- a/app/matching/_components/ScreenMatching.tsx
+++ b/app/matching/_components/ScreenMatching.tsx
@@ -4,6 +4,7 @@ import MyCoinSection from "@/components/common/MyCoinSection";
 import { BackButton } from "@/components/ui/BackButton";
 import Image from "next/image";
 import React, { useState } from "react";
+import MatchingAgeOption from "./MatchingAgeOption";
 import MatchingAgeSection from "./MatchingAgeSection";
 import MatchingHobbySection from "./MatchingHobbySection";
 import MatchingMBTISection from "./MatchingMBTISection";
@@ -41,10 +42,12 @@ import { useItems } from "@/hooks/useItems";
 import { useMatching } from "@/hooks/useMatching";
 
 const ScreenMatching = () => {
-  const { data: itemData } = useItems();
+  const { data: itemData, isLoading: isItemsLoading } = useItems();
   const { mutate: match, isPending } = useMatching();
   const [selectedMBTI, setSelectedMBTI] = useState("");
   const [selectedAgeGroup, setSelectedAgeGroup] = useState("");
+  const [minAge, setMinAge] = useState<number | undefined>(undefined);
+  const [maxAge, setMaxAge] = useState<number | undefined>(undefined);
   const [selectedFrequency, setSelectedFrequency] = useState("");
   const [isSameMajorExclude, setIsSameMajorExclude] = useState(false);
   const [selectedHobbyCategory, setSelectedHobbyCategory] = useState<
@@ -54,42 +57,57 @@ const ScreenMatching = () => {
     useState<ImportantOption | null>(null);
 
   const matchingTicketCount = itemData?.data.matchingTicketCount ?? 0;
-  const hasExtraOption = !!(importantOption || isSameMajorExclude);
+  const isAgeRangeActive = minAge !== undefined && maxAge !== undefined;
+  const hasExtraOption = !!(
+    importantOption ||
+    isSameMajorExclude ||
+    isAgeRangeActive
+  );
 
   const canSubmit = !!(
     selectedMBTI.length === 2 &&
-    selectedAgeGroup &&
+    (selectedAgeGroup || isAgeRangeActive) &&
     selectedFrequency &&
     selectedHobbyCategory &&
     matchingTicketCount > 0
   );
 
-  const bubbleText =
-    matchingTicketCount === 0 ? (
-      "사용할 수 있는 매칭권이 없어요."
-    ) : (
-      <div className="flex items-center gap-1">
-        <Image src="/main/coin.png" alt="coin" width={20} height={20} />
-        <span>매칭권 1</span>
-        {hasExtraOption && (
-          <>
-            <Image
-              src="/main/elec-bulb.png"
-              alt="bulb"
-              width={20}
-              height={20}
-              className="ml-1"
-            />
-            <span>아이템 1</span>
-          </>
-        )}
-        <span>소모</span>
-      </div>
-    );
+  const bubbleText = isItemsLoading ? null : matchingTicketCount === 0 ? (
+    "사용할 수 있는 매칭권이 없어요."
+  ) : (
+    <div className="flex items-center gap-1">
+      <Image src="/main/coin.png" alt="coin" width={20} height={20} />
+      <span>매칭권 1</span>
+      {hasExtraOption && (
+        <>
+          <Image
+            src="/main/elec-bulb.png"
+            alt="bulb"
+            width={20}
+            height={20}
+            className="ml-1"
+          />
+          <span>아이템 1</span>
+        </>
+      )}
+      <span>소모</span>
+    </div>
+  );
 
   const bubbleTextColor =
     matchingTicketCount === 0 ? "text-color-gray-600" : "text-black";
 
+  const handleAgeRangeSelect = (min: number, max: number) => {
+    if (selectedAgeGroup) {
+      alert(
+        "나이 구간 옵션을 사용하면 기존에 선택한 나이 옵션(연하/동갑/연상)이 해제됩니다.",
+      );
+      setSelectedAgeGroup("");
+    }
+    setMinAge(min);
+    setMaxAge(max);
+  };
+
   const calculateAgeOffsets = (
     group: string,
   ): {
@@ -118,7 +136,7 @@ const ScreenMatching = () => {
     const ageInfo = calculateAgeOffsets(selectedAgeGroup);
 
     const payload: MatchingRequest = {
-      ageOption: ageInfo.option,
+      ageOption: isAgeRangeActive ? undefined : ageInfo.option,
       mbtiOption: selectedMBTI || undefined,
       hobbyOption: selectedHobbyCategory
         ? hobbyMapping[selectedHobbyCategory]
@@ -128,8 +146,8 @@ const ScreenMatching = () => {
         : undefined,
       sameMajorOption: isSameMajorExclude,
       importantOption: importantOption || undefined,
-      minAgeOffset: ageInfo.min,
-      maxAgeOffset: ageInfo.max,
+      minAgeOffset: minAge ?? ageInfo.min,
+      maxAgeOffset: maxAge ?? ageInfo.max,
     };
 
     match(payload);
@@ -143,7 +161,7 @@ const ScreenMatching = () => {
       <div className="flex w-full flex-col gap-4">
         <MatchingMBTISection
           onMBTISelect={setSelectedMBTI}
-          defaultValue={selectedMBTI}
+          selected={selectedMBTI}
         />
 
         <MatchingHobbySection
@@ -153,12 +171,13 @@ const ScreenMatching = () => {
 
         <MatchingAgeSection
           onAgeGroupSelect={setSelectedAgeGroup}
-          defaultValue={selectedAgeGroup}
+          selected={isAgeRangeActive ? "" : selectedAgeGroup}
+          disabled={isAgeRangeActive}
         />
 
         <MatchingFrequencySection
           onFrequencySelect={setSelectedFrequency}
-          defaultValue={selectedFrequency}
+          selected={selectedFrequency}
         />
 
         <MatchingImportantOptionSection
@@ -171,6 +190,15 @@ const ScreenMatching = () => {
             CONTACT: selectedFrequency || "",
           }}
         />
+        <MatchingAgeOption
+          onAgeRangeSelect={handleAgeRangeSelect}
+          onReset={() => {
+            setMinAge(undefined);
+            setMaxAge(undefined);
+          }}
+          minAge={minAge}
+          maxAge={maxAge}
+        />
         <MatchingSameMajorSection
           onSameMajorToggle={setIsSameMajorExclude}
           isExcluded={isSameMajorExclude}