diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..90a65f4
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+VITE_API_URL=/
+VITE_API_PROXY_TARGET=https://snuclear.wafflestudio.com
diff --git a/src/app/index.tsx b/src/app/index.tsx
index d7166e2..3ffea22 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -5,6 +5,7 @@ import { Header } from '@widgets/header';
 import { Footer } from '@widgets/footer';
 import { SideMenu } from '@widgets/side-menu';
 import { WarningModal } from '@shared/ui/Warning';
+import { TourController } from '@features/tour';
 import { AppRoutes } from './routes';
 import './styles/global.css';
 
@@ -96,6 +97,7 @@ export default function App() {
           setShowLoginWarningOpen={setShowLoginWarningOpen}
         />
       )}
+      <TourController />
     </div>
   );
 }
diff --git a/src/features/course-search/ui/SearchCourseItem.tsx b/src/features/course-search/ui/SearchCourseItem.tsx
index d95fa9c..e07bd4d 100644
--- a/src/features/course-search/ui/SearchCourseItem.tsx
+++ b/src/features/course-search/ui/SearchCourseItem.tsx
@@ -7,6 +7,7 @@ export interface SearchCourseItemProps {
   isSelected: boolean;
   cartCount?: number;
   onSelect: () => void;
+  checkDataTourId?: string;
 }
 
 export function SearchCourseItem({
@@ -14,6 +15,7 @@ export function SearchCourseItem({
   isSelected,
   cartCount = 0,
   onSelect,
+  checkDataTourId,
 }: SearchCourseItemProps) {
   const schedule = useMemo(
     () => formatSchedule(course.placeAndTime, '시간 미정'),
@@ -35,6 +37,7 @@ export function SearchCourseItem({
         <button
           type="button"
           className={`customCheckBtn ${isSelected ? 'checked' : ''}`}
+          data-tour-id={checkDataTourId}
         >
           <svg
             className="checkIcon"
diff --git a/src/features/registration-practice/ui/SortableCourseItem.tsx b/src/features/registration-practice/ui/SortableCourseItem.tsx
index 8f0d8a9..27b5fef 100644
--- a/src/features/registration-practice/ui/SortableCourseItem.tsx
+++ b/src/features/registration-practice/ui/SortableCourseItem.tsx
@@ -9,12 +9,14 @@ export interface SortableCourseItemProps {
   courseData: CourseData;
   isSelected: boolean;
   onSelect: () => void;
+  checkDataTourId?: string;
 }
 
 export function SortableCourseItem({
   courseData,
   isSelected,
   onSelect,
+  checkDataTourId,
 }: SortableCourseItemProps) {
   const {
     attributes,
@@ -58,6 +60,7 @@ export function SortableCourseItem({
           type="button"
           className={`customCheckBtn ${isSelected ? 'checked' : ''}`}
           aria-label={`${c.course.courseTitle} 선택`}
+          data-tour-id={checkDataTourId}
         >
           <svg
             viewBox="0 0 24 24"
diff --git a/src/features/tour/api/tourApi.ts b/src/features/tour/api/tourApi.ts
new file mode 100644
index 0000000..d00639e
--- /dev/null
+++ b/src/features/tour/api/tourApi.ts
@@ -0,0 +1,10 @@
+import { api } from '@shared/api/fetch';
+import type { TourCompletionRequest, TourStatusResponse } from '../model/types';
+
+export const getTourStatusApi = async () => {
+  return api.get<TourStatusResponse>('/api/tour/status');
+};
+
+export const completeTourApi = async (data: TourCompletionRequest) => {
+  return api.post<void>('/api/tour/completion', data);
+};
diff --git a/src/features/tour/index.ts b/src/features/tour/index.ts
new file mode 100644
index 0000000..748e4f9
--- /dev/null
+++ b/src/features/tour/index.ts
@@ -0,0 +1,9 @@
+export { TourController } from './ui/TourController';
+export { useTourStore } from './model/tourStore';
+export { useIsDesktop } from './model/useIsDesktop';
+export {
+  TOUR_KEYWORD,
+  tutorialCourse,
+  createTutorialPreEnroll,
+} from './model/tutorialCourse';
+export type { TourStep } from './model/types';
diff --git a/src/features/tour/model/tourStore.ts b/src/features/tour/model/tourStore.ts
new file mode 100644
index 0000000..1c4e2e9
--- /dev/null
+++ b/src/features/tour/model/tourStore.ts
@@ -0,0 +1,91 @@
+import { create } from 'zustand';
+import type { TourStep } from './types';
+import { getTutorialOverQuotaCount } from './tutorialCourse';
+
+interface TourStoreState {
+  isActive: boolean;
+  currentStep: TourStep | null;
+  publishedAt: string | null;
+  hasPrompted: boolean;
+  isManuallyStopped: boolean;
+  cartCount: number;
+  hasSelectedSearchCourse: boolean;
+  hasSelectedRegistrationCourse: boolean;
+  captchaInput: string;
+  isPracticeReady: boolean;
+  isRegistrationSucceeded: boolean;
+  start: (publishedAt?: string | null) => void;
+  startAtStep: (step: TourStep, publishedAt?: string | null) => void;
+  stop: () => void;
+  complete: () => void;
+  setStep: (step: TourStep) => void;
+  markPrompted: () => void;
+  setPublishedAt: (publishedAt: string | null) => void;
+  selectSearchCourse: () => void;
+  setCartOverQuota: () => void;
+  selectRegistrationCourse: () => void;
+  setCaptchaInput: (value: string) => void;
+  setPracticeReady: () => void;
+  markRegistrationSucceeded: () => void;
+}
+
+const initialRuntimeState = {
+  cartCount: 0,
+  hasSelectedSearchCourse: false,
+  hasSelectedRegistrationCourse: false,
+  captchaInput: '',
+  isPracticeReady: false,
+  isRegistrationSucceeded: false,
+};
+
+export const useTourStore = create<TourStoreState>((set) => ({
+  isActive: false,
+  currentStep: null,
+  publishedAt: null,
+  hasPrompted: false,
+  isManuallyStopped: false,
+  ...initialRuntimeState,
+
+  start: (publishedAt) =>
+    set((state) => ({
+      ...initialRuntimeState,
+      isActive: true,
+      currentStep: 'searchIntro',
+      publishedAt: publishedAt ?? state.publishedAt,
+      isManuallyStopped: false,
+    })),
+
+  startAtStep: (step, publishedAt) =>
+    set((state) => ({
+      ...initialRuntimeState,
+      isActive: true,
+      currentStep: step,
+      publishedAt: publishedAt ?? state.publishedAt,
+      isManuallyStopped: false,
+    })),
+
+  stop: () =>
+    set({
+      isActive: false,
+      currentStep: null,
+      isManuallyStopped: true,
+    }),
+
+  complete: () =>
+    set({
+      isActive: false,
+      currentStep: null,
+      isRegistrationSucceeded: true,
+      isManuallyStopped: false,
+    }),
+
+  setStep: (step) => set({ currentStep: step }),
+  markPrompted: () => set({ hasPrompted: true }),
+  setPublishedAt: (publishedAt) => set({ publishedAt }),
+  selectSearchCourse: () => set({ hasSelectedSearchCourse: true }),
+  setCartOverQuota: () => set({ cartCount: getTutorialOverQuotaCount() }),
+  selectRegistrationCourse: () => set({ hasSelectedRegistrationCourse: true }),
+  setCaptchaInput: (value) => set({ captchaInput: value.replace(/\D/g, '').slice(0, 2) }),
+  setPracticeReady: () => set({ isPracticeReady: true }),
+  markRegistrationSucceeded: () => set({ isRegistrationSucceeded: true }),
+}));
diff --git a/src/features/tour/model/tutorialCourse.ts b/src/features/tour/model/tutorialCourse.ts
new file mode 100644
index 0000000..471da04
--- /dev/null
+++ b/src/features/tour/model/tutorialCourse.ts
@@ -0,0 +1,38 @@
+import type { CourseDetailResponse } from '@entities/course';
+import type { PreEnrollCourseResponse } from '@features/cart-management';
+
+export const TOUR_KEYWORD = '미시경제이론';
+export const TOUR_PRE_ENROLL_ID = 9260720;
+
+export const tutorialCourse: CourseDetailResponse = {
+  id: 260720,
+  year: 2026,
+  semester: 'SPRING',
+  classification: '전공선택',
+  college: '사회과학대학',
+  department: '경제학부',
+  academicCourse: '학사',
+  academicYear: '2학년',
+  courseNumber: 'M1314.000100',
+  lectureNumber: '001',
+  courseTitle: TOUR_KEYWORD,
+  credit: 3,
+  instructor: '경제학부',
+  placeAndTime: JSON.stringify({
+    time: '월(09:30~10:45)/수(09:30~10:45)',
+    place: '16동 349호',
+  }),
+  quota: 60,
+  freshmanQuota: 0,
+  registrationCount: 59,
+};
+
+export const createTutorialPreEnroll = (
+  cartCount: number
+): PreEnrollCourseResponse => ({
+  preEnrollId: TOUR_PRE_ENROLL_ID,
+  course: tutorialCourse,
+  cartCount,
+});
+
+export const getTutorialOverQuotaCount = () => tutorialCourse.quota + 1;
diff --git a/src/features/tour/model/types.ts b/src/features/tour/model/types.ts
new file mode 100644
index 0000000..b30fcf8
--- /dev/null
+++ b/src/features/tour/model/types.ts
@@ -0,0 +1,26 @@
+export type TourStep =
+  | 'searchIntro'
+  | 'searchType'
+  | 'searchCheck'
+  | 'searchAddToCart'
+  | 'searchGoToCart'
+  | 'cartCount'
+  | 'cartGoRegistration'
+  | 'registrationTimer'
+  | 'registrationStart'
+  | 'registrationWaiting'
+  | 'registrationCheck'
+  | 'registrationCaptcha'
+  | 'registrationSubmit'
+  | 'registrationGoHistory'
+  | 'historyResult';
+
+export interface TourStatusResponse {
+  shouldShow: boolean;
+  publishedAt: string;
+  completedAt?: string | null;
+}
+
+export interface TourCompletionRequest {
+  publishedAt: string;
+}
diff --git a/src/features/tour/model/useIsDesktop.ts b/src/features/tour/model/useIsDesktop.ts
new file mode 100644
index 0000000..b35a339
--- /dev/null
+++ b/src/features/tour/model/useIsDesktop.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export function useIsDesktop() {
+  const [isDesktop, setIsDesktop] = useState(() =>
+    typeof window === 'undefined'
+      ? true
+      : window.matchMedia('(min-width: 769px)').matches
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 769px)');
+    const handleChange = () => setIsDesktop(mediaQuery.matches);
+
+    handleChange();
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return isDesktop;
+}
diff --git a/src/features/tour/ui/TourController.tsx b/src/features/tour/ui/TourController.tsx
new file mode 100644
index 0000000..6e34355
--- /dev/null
+++ b/src/features/tour/ui/TourController.tsx
@@ -0,0 +1,528 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from '@features/auth';
+import { WarningModal } from '@shared/ui/Warning';
+import { completeTourApi, getTourStatusApi } from '../api/tourApi';
+import { useIsDesktop } from '../model/useIsDesktop';
+import { TOUR_KEYWORD } from '../model/tutorialCourse';
+import { useTourStore } from '../model/tourStore';
+import type { TourStep } from '../model/types';
+import './tour.css';
+
+const TOUR_STEP_META: Record<
+  TourStep,
+  {
+    targetId: string;
+    message: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+  }
+> = {
+  searchIntro: {
+    targetId: 'header-search-input',
+    message: '검색창을 통해 과목을 검색할 수 있습니다.',
+    placement: 'bottom',
+  },
+  searchType: {
+    targetId: 'header-search-box',
+    message: `'${TOUR_KEYWORD}'이라고 검색해보세요`,
+    placement: 'bottom',
+  },
+  searchCheck: {
+    targetId: 'search-course-check',
+    message: '체크표시를 누르세요',
+    placement: 'right',
+  },
+  searchAddToCart: {
+    targetId: 'search-add-cart',
+    message: '장바구니 담기를 클릭하세요',
+    placement: 'left',
+  },
+  searchGoToCart: {
+    targetId: 'search-go-cart',
+    message: '장바구니로 이동을 누르세요',
+    placement: 'right',
+  },
+  cartCount: {
+    targetId: 'cart-count',
+    message:
+      '이곳을 눌러 담은 수를 변경하세요. 담은 수가 정원을 초과하면 수강신청 탭에서 수강신청 할 수 있습니다.',
+    placement: 'left',
+  },
+  cartGoRegistration: {
+    targetId: 'nav-registration',
+    message: '이곳을 눌러 수강신청 탭으로 이동하세요.',
+    placement: 'bottom',
+  },
+  registrationTimer: {
+    targetId: 'registration-timer',
+    message: '연습 시작 시간을 선택하세요',
+    placement: 'left',
+  },
+  registrationStart: {
+    targetId: 'registration-start',
+    message: '연습 시작 버튼을 누르세요',
+    placement: 'left',
+  },
+  registrationWaiting: {
+    targetId: 'registration-start',
+    message: '수신 시간이 될 때까지 기다리세요',
+    placement: 'left',
+  },
+  registrationCheck: {
+    targetId: 'registration-course-check',
+    message: '체크표시를 누르세요',
+    placement: 'right',
+  },
+  registrationCaptcha: {
+    targetId: 'registration-captcha-input',
+    message: '숫자를 입력하세요',
+    placement: 'top',
+  },
+  registrationSubmit: {
+    targetId: 'registration-submit',
+    message: '수강신청 버튼을 누르세요',
+    placement: 'left',
+  },
+  registrationGoHistory: {
+    targetId: 'nav-enrollment-history',
+    message: '이곳을 누르면 결과를 확인 하실 수 있습니다.',
+    placement: 'bottom',
+  },
+  historyResult: {
+    targetId: 'enrollment-result',
+    message: '',
+    placement: 'top',
+  },
+};
+
+interface TargetRect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export function TourController() {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isDesktop = useIsDesktop();
+  const [isIntroOpen, setIntroOpen] = useState(false);
+  const [doNotShowAgain, setDoNotShowAgain] = useState(false);
+  const [isDismissNoticeOpen, setDismissNoticeOpen] = useState(false);
+  const [isExitConfirmOpen, setExitConfirmOpen] = useState(false);
+  const completionSentRef = useRef(false);
+
+  const {
+    isActive,
+    currentStep,
+    publishedAt,
+    hasPrompted,
+    start,
+    stop,
+    complete,
+    markPrompted,
+    setPublishedAt,
+  } = useTourStore();
+
+  const statusQuery = useQuery({
+    queryKey: ['tour', 'status', user?.id],
+    queryFn: async () => {
+      const response = await getTourStatusApi();
+      return response.data;
+    },
+    enabled: !!user && !user.admin && isDesktop,
+    retry: 1,
+    refetchOnWindowFocus: false,
+  });
+
+  const completionMutation = useMutation({
+    mutationFn: (targetPublishedAt: string) =>
+      completeTourApi({ publishedAt: targetPublishedAt }),
+  });
+
+  useEffect(() => {
+    if (!statusQuery.data) return;
+    setPublishedAt(statusQuery.data.publishedAt);
+    if (statusQuery.data.shouldShow && !hasPrompted && !isActive) {
+      markPrompted();
+      const timerId = window.setTimeout(() => setIntroOpen(true), 0);
+      return () => window.clearTimeout(timerId);
+    }
+  }, [
+    hasPrompted,
+    isActive,
+    markPrompted,
+    setPublishedAt,
+    statusQuery.data,
+  ]);
+
+  useEffect(() => {
+    if (!isDesktop && isActive) {
+      stop();
+    }
+  }, [isActive, isDesktop, stop]);
+
+  useEffect(() => {
+    if (!isActive || !currentStep) return;
+
+    const targetPathByStep: Partial<Record<TourStep, string>> = {
+      searchIntro: '/',
+      searchType: '/',
+      searchCheck: '/search',
+      searchAddToCart: '/search',
+      searchGoToCart: '/search',
+      cartCount: '/cart',
+      cartGoRegistration: '/cart',
+      registrationTimer: '/registration',
+      registrationStart: '/registration',
+      registrationWaiting: '/registration',
+      registrationCheck: '/registration',
+      registrationCaptcha: '/registration',
+      registrationSubmit: '/registration',
+      registrationGoHistory: '/registration',
+      historyResult: '/enrollment-history',
+    };
+    const targetPath = targetPathByStep[currentStep];
+
+    if (targetPath && location.pathname !== targetPath) {
+      if (targetPath === '/search') {
+        navigate(`/search?query=${encodeURIComponent(TOUR_KEYWORD)}&tour=1`);
+      } else {
+        navigate(targetPath);
+      }
+    }
+  }, [currentStep, isActive, location.pathname, navigate]);
+
+  useEffect(() => {
+    if (
+      statusQuery.isError &&
+      import.meta.env.DEV &&
+      user &&
+      !hasPrompted &&
+      !isActive
+    ) {
+      setPublishedAt(new Date().toISOString());
+      markPrompted();
+      const timerId = window.setTimeout(() => setIntroOpen(true), 0);
+      return () => window.clearTimeout(timerId);
+    }
+  }, [
+    hasPrompted,
+    isActive,
+    markPrompted,
+    setPublishedAt,
+    statusQuery.isError,
+    user,
+  ]);
+
+  useEffect(() => {
+    if (!isActive || currentStep !== 'historyResult') return;
+    if (completionSentRef.current) return;
+
+    completionSentRef.current = true;
+    const finish = async () => {
+      if (publishedAt) {
+        try {
+          await completionMutation.mutateAsync(publishedAt);
+        } catch (error) {
+          console.error('[Tour] completion failed:', error);
+        }
+      }
+      complete();
+    };
+
+    const timerId = window.setTimeout(finish, 700);
+    return () => window.clearTimeout(timerId);
+  }, [complete, completionMutation, currentStep, isActive, publishedAt]);
+
+  const handleStart = () => {
+    completionSentRef.current = false;
+    setIntroOpen(false);
+    setDoNotShowAgain(false);
+    navigate('/');
+    window.scrollTo(0, 0);
+    start(publishedAt);
+  };
+
+  const handleDismiss = async () => {
+    setIntroOpen(false);
+
+    if (doNotShowAgain && publishedAt) {
+      try {
+        await completionMutation.mutateAsync(publishedAt);
+      } catch (error) {
+        console.error('[Tour] dismiss completion failed:', error);
+      }
+      setDismissNoticeOpen(true);
+    }
+
+    setDoNotShowAgain(false);
+  };
+
+  const handleExitConfirm = () => {
+    setExitConfirmOpen(false);
+    stop();
+
+    const params = new URLSearchParams(location.search);
+    if (params.has('tour')) {
+      params.delete('tour');
+      const nextSearch = params.toString();
+      navigate(
+        {
+          pathname: location.pathname,
+          search: nextSearch ? `?${nextSearch}` : '',
+        },
+        { replace: true }
+      );
+    }
+  };
+
+  if (!isDesktop || !user || user.admin) return null;
+
+  return (
+    <>
+      <WarningModal.Confirm
+        isOpen={isIntroOpen}
+        onCancel={handleDismiss}
+        onConfirm={handleStart}
+        icon="question"
+        title="튜토리얼을 시작하시겠습니까?"
+        subtitle="수강신청 연습사이트 이용 방법을 단계별로 안내합니다."
+        cancelLabel="닫기"
+        confirmLabel="진행하기"
+      >
+        <label className="tourIntroCheck">
+          <input
+            type="checkbox"
+            checked={doNotShowAgain}
+            onChange={(event) => setDoNotShowAgain(event.target.checked)}
+          />
+          <span>다시보지 않기</span>
+        </label>
+      </WarningModal.Confirm>
+
+      <WarningModal.Alert
+        isOpen={isDismissNoticeOpen}
+        onClose={() => setDismissNoticeOpen(false)}
+        icon="warning"
+      >
+        <p className="warningText">
+          튜토리얼은 홈 화면 '튜토리얼'을 통해 진행할 수 있습니다.
+        </p>
+      </WarningModal.Alert>
+
+      {isActive &&
+        currentStep &&
+        currentStep !== 'historyResult' &&
+        !isExitConfirmOpen &&
+        createPortal(
+          <TourOverlay
+            step={currentStep}
+            onExitRequest={() => setExitConfirmOpen(true)}
+          />,
+          document.body
+        )}
+
+      {isExitConfirmOpen &&
+        createPortal(
+          <WarningModal.Confirm
+            isOpen={isExitConfirmOpen}
+            onCancel={() => setExitConfirmOpen(false)}
+            onConfirm={handleExitConfirm}
+            icon="question"
+            title="튜토리얼을 종료하시겠습니까?"
+            subtitle="튜토리얼 탭에서 언제든지 다시 하실 수 있습니다"
+            cancelLabel="계속하기"
+            confirmLabel="종료하기"
+          />,
+          document.body
+        )}
+    </>
+  );
+}
+
+function TourOverlay({
+  step,
+  onExitRequest,
+}: {
+  step: TourStep;
+  onExitRequest: () => void;
+}) {
+  const meta = TOUR_STEP_META[step];
+  const [rect, setRect] = useState<TargetRect | null>(null);
+
+  useEffect(() => {
+    let frameId = 0;
+    let retryId = 0;
+
+    const updateRect = () => {
+      const target = document.querySelector<HTMLElement>(
+        `[data-tour-id="${meta.targetId}"]`
+      );
+
+      if (!target) {
+        setRect(null);
+        retryId = window.setTimeout(updateRect, 100);
+        return;
+      }
+
+      target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+      });
+
+      frameId = window.requestAnimationFrame(() => {
+        const nextRect = target.getBoundingClientRect();
+        if (nextRect.width === 0 || nextRect.height === 0) {
+          setRect(null);
+          retryId = window.setTimeout(updateRect, 100);
+          return;
+        }
+
+        setRect({
+          top: Math.max(0, nextRect.top),
+          left: Math.max(0, nextRect.left),
+          width: nextRect.width,
+          height: nextRect.height,
+        });
+      });
+    };
+
+    updateRect();
+    window.addEventListener('resize', updateRect);
+    window.addEventListener('scroll', updateRect, true);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.clearTimeout(retryId);
+      window.removeEventListener('resize', updateRect);
+      window.removeEventListener('scroll', updateRect, true);
+    };
+  }, [meta.targetId]);
+
+  if (!rect) {
+    return (
+      <div className="tourLayer" data-tour-step={step}>
+        <button
+          type="button"
+          className="tourExitBtn"
+          aria-label="튜토리얼 종료"
+          onClick={onExitRequest}
+        >
+          x
+        </button>
+      </div>
+    );
+  }
+
+  const tooltipStyle = getTooltipStyle(rect, meta.placement ?? 'bottom');
+
+  return (
+    <div className="tourLayer" aria-live="polite" data-tour-step={step}>
+      <div className="tourBlocker top" style={{ height: rect.top }} />
+      <div
+        className="tourBlocker left"
+        style={{
+          top: rect.top,
+          width: rect.left,
+          height: rect.height,
+        }}
+      />
+      <div
+        className="tourBlocker right"
+        style={{
+          top: rect.top,
+          left: rect.left + rect.width,
+          height: rect.height,
+        }}
+      />
+      <div
+        className="tourBlocker bottom"
+        style={{ top: rect.top + rect.height }}
+      />
+
+      <div
+        className="tourFocusRing"
+        style={{
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height,
+        }}
+      />
+
+      <div
+        className={`tourTooltip ${meta.placement ?? 'bottom'}`}
+        style={tooltipStyle}
+      >
+        <span className="tourTooltipArrow" />
+        <p>{meta.message}</p>
+      </div>
+
+      <button
+        type="button"
+        className="tourExitBtn"
+        aria-label="튜토리얼 종료"
+        onClick={onExitRequest}
+      >
+        x
+      </button>
+    </div>
+  );
+}
+
+function getTooltipStyle(
+  rect: TargetRect,
+  placement: 'top' | 'bottom' | 'left' | 'right'
+) {
+  const gap = 18;
+  const width = Math.min(320, window.innerWidth - 32);
+  const horizontalCenter = rect.left + rect.width / 2;
+  const verticalCenter = rect.top + rect.height / 2;
+
+  if (placement === 'top') {
+    return {
+      left: Math.min(
+        window.innerWidth - width - 16,
+        Math.max(16, horizontalCenter - width / 2)
+      ),
+      top: Math.max(16, rect.top - gap),
+      transform: 'translateY(-100%)',
+      width,
+    };
+  }
+
+  if (placement === 'left') {
+    return {
+      left: Math.max(16, rect.left - width - gap),
+      top: Math.max(16, verticalCenter),
+      transform: 'translateY(-50%)',
+      width,
+    };
+  }
+
+  if (placement === 'right') {
+    return {
+      left: Math.min(
+        window.innerWidth - width - 16,
+        rect.left + rect.width + gap
+      ),
+      top: Math.max(16, verticalCenter),
+      transform: 'translateY(-50%)',
+      width,
+    };
+  }
+
+  return {
+    left: Math.min(
+      window.innerWidth - width - 16,
+      Math.max(16, horizontalCenter - width / 2)
+    ),
+    top: Math.min(window.innerHeight - 120, rect.top + rect.height + gap),
+    width,
+  };
+}
diff --git a/src/features/tour/ui/tour.css b/src/features/tour/ui/tour.css
new file mode 100644
index 0000000..81d1737
--- /dev/null
+++ b/src/features/tour/ui/tour.css
@@ -0,0 +1,147 @@
+.tourIntroCheck {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 18px;
+  font-size: 14px;
+  color: #555;
+  cursor: pointer;
+}
+
+.tourIntroCheck input {
+  width: 16px;
+  height: 16px;
+  accent-color: #1b4594;
+}
+
+.tourLayer {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.tourBlocker {
+  position: fixed;
+  background: rgba(0, 0, 0, 0.72);
+  pointer-events: auto;
+}
+
+.tourBlocker.top {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.tourBlocker.left {
+  left: 0;
+}
+
+.tourBlocker.right {
+  right: 0;
+}
+
+.tourBlocker.bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.tourFocusRing {
+  position: fixed;
+  outline: 3px solid #ffffff;
+  outline-offset: 0;
+  border: 2px solid #376dc8;
+  border-radius: 8px;
+  box-shadow: 0 0 22px rgba(255, 255, 255, 0.85);
+  pointer-events: none;
+}
+
+.tourTooltip {
+  position: fixed;
+  z-index: 10002;
+  background: #ffffff;
+  color: #111827;
+  border-radius: 8px;
+  padding: 14px 16px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
+  border: 1px solid #e5e7eb;
+  pointer-events: none;
+  max-width: min(320px, calc(100vw - 32px));
+}
+
+.tourTooltip p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.55;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-align: left;
+  letter-spacing: 0;
+}
+
+.tourTooltipArrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.tourTooltip.bottom .tourTooltipArrow {
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid #ffffff;
+}
+
+.tourTooltip.top .tourTooltipArrow {
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #ffffff;
+}
+
+.tourTooltip.left .tourTooltipArrow {
+  right: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-left: 8px solid #ffffff;
+}
+
+.tourTooltip.right .tourTooltipArrow {
+  left: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid #ffffff;
+}
+
+.tourExitBtn {
+  position: fixed;
+  top: 24px;
+  right: 28px;
+  z-index: 10003;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.65);
+  background: rgba(0, 0, 0, 0.45);
+  color: #ffffff;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  pointer-events: auto;
+  display: grid;
+  place-items: center;
+  padding: 0 0 2px;
+}
+
+.tourExitBtn:hover {
+  background: rgba(0, 0, 0, 0.68);
+}
diff --git a/src/pages/cart/index.tsx b/src/pages/cart/index.tsx
index c7f5ca5..36507ab 100644
--- a/src/pages/cart/index.tsx
+++ b/src/pages/cart/index.tsx
@@ -9,11 +9,23 @@ import { useModalStore } from '@shared/model/modalStore';
 import { WarningModal } from '@shared/ui/Warning';
 import { TimeTable } from '@widgets/timetable';
 import { formatSchedule } from '@shared/lib/timeUtils';
+import { createTutorialPreEnroll, useTourStore } from '@features/tour';
 import './cart.css';
 
 export default function Cart() {
+  const tour = useTourStore();
+  const isTourActive = tour.isActive;
   const { data, isLoading } = useCartQuery();
-  const cartCourses = Array.isArray(data) ? data : [];
+  const isDisplayLoading = isTourActive ? false : isLoading;
+  const cartCourses = useMemo(
+    () =>
+      isTourActive
+        ? [createTutorialPreEnroll(tour.cartCount)]
+        : Array.isArray(data)
+          ? data
+          : [],
+    [data, isTourActive, tour.cartCount]
+  );
   const deleteFromCartMutation = useDeleteFromCartMutation();
   const updateCartCountMutation = useUpdateCartCountMutation();
   const {
@@ -69,6 +81,23 @@ export default function Cart() {
   };
 
   const handleCartCountChange = async (courseId: number, newValue: string) => {
+    if (isTourActive) {
+      const newCount = parseInt(newValue);
+      const targetCourse = cartCourses.find((item) => item.course.id === courseId);
+
+      if (
+        targetCourse &&
+        !isNaN(newCount) &&
+        newCount > targetCourse.course.quota
+      ) {
+        tour.setCartOverQuota();
+        tour.setStep('cartGoRegistration');
+      }
+      setEditingCourseId(null);
+      setEditingValue('');
+      return;
+    }
+
     const newCount = parseInt(newValue);
     if (isNaN(newCount) || newCount < 0) {
       return;
@@ -132,7 +161,7 @@ export default function Cart() {
           </div>
 
           <div className={`cart-content-box${cartCourses.length > 0 ? ' has-items' : ''}`}>
-            {isLoading ? (
+            {isDisplayLoading ? (
               <div className="cart-empty-state">
                 <p className="cart-empty-title">로딩 중...</p>
               </div>
@@ -275,6 +304,9 @@ export default function Cart() {
                               }}
                               onClick={(e) => e.stopPropagation()}
                               className="cartCountInput"
+                              data-tour-id={
+                                isTourActive ? 'cart-count' : undefined
+                              }
                               min="0"
                               autoFocus
                             />
@@ -284,8 +316,11 @@ export default function Cart() {
                               onClick={(e) => {
                                 e.stopPropagation();
                                 setEditingCourseId(item.course.id);
-                                setEditingValue(String(item.cartCount));
+                                setEditingValue('');
                               }}
+                              data-tour-id={
+                                isTourActive ? 'cart-count' : undefined
+                              }
                             >
                               {item.cartCount}
                             </span>
diff --git a/src/pages/enrollment-history/index.tsx b/src/pages/enrollment-history/index.tsx
index 2b08237..63ce6b0 100644
--- a/src/pages/enrollment-history/index.tsx
+++ b/src/pages/enrollment-history/index.tsx
@@ -1,18 +1,23 @@
 import { useState, useMemo } from 'react';
 import { useEnrolledCoursesQuery } from '@features/registration-practice';
 import { useCartQuery } from '@features/cart-management';
+import { tutorialCourse, useTourStore } from '@features/tour';
 import { useModalStore } from '@shared/model/modalStore';
 import { TimeTable } from '@widgets/timetable';
 import { formatSchedule } from '@shared/lib/timeUtils';
 import './enrollmentHistory.css';
 
 export default function EnrollmentHistory() {
+  const tour = useTourStore();
+  const isTourResult = tour.isRegistrationSucceeded;
   const { data: enrolledData, isLoading: isEnrolledLoading } = useEnrolledCoursesQuery();
   const { data: cartData, isLoading: isCartLoading } = useCartQuery();
 
-  const isLoading = isEnrolledLoading || isCartLoading;
+  const isLoading = isTourResult ? false : isEnrolledLoading || isCartLoading;
 
   const enrolledCourses = useMemo(() => {
+    if (isTourResult) return [tutorialCourse];
+
     const enrolled = Array.isArray(enrolledData) ? enrolledData : [];
     const cartCourses = Array.isArray(cartData) ? cartData : [];
 
@@ -30,7 +35,7 @@ export default function EnrollmentHistory() {
     }
 
     return merged;
-  }, [enrolledData, cartData]);
+  }, [cartData, enrolledData, isTourResult]);
   const [selectedCourseId, setSelectedCourseId] = useState<number | null>(null);
   const { openNotSupported } = useModalStore();
 
@@ -109,6 +114,9 @@ export default function EnrollmentHistory() {
                         <div
                           key={course.id}
                           className="courseItem"
+                          data-tour-id={
+                            isTourResult ? 'enrollment-result' : undefined
+                          }
                           onClick={(event) => {
                             const infoArea =
                               event.currentTarget.querySelector<HTMLElement>(
diff --git a/src/pages/registration/index.tsx b/src/pages/registration/index.tsx
index c1ea8d0..2e37639 100644
--- a/src/pages/registration/index.tsx
+++ b/src/pages/registration/index.tsx
@@ -27,11 +27,14 @@ import {
   type CourseData,
 } from '@features/registration-practice';
 import { useCartQuery } from '@features/cart-management';
+import { createTutorialPreEnroll, useTourStore } from '@features/tour';
 import { useModalStore } from '@shared/model/modalStore';
 import { WarningModal } from '@shared/ui/Warning';
 import './registration.css';
 
 export default function Registration() {
+  const tour = useTourStore();
+  const isTourActive = tour.isActive;
   const { pipWindow, openWindow, closeWindow } = usePracticeWindow();
   const { openModal, closeModal } = useModalStore();
   const isPracticeEndOpen = useModalStore((s) => s.openModals.has('registration/practiceEnd'));
@@ -128,7 +131,11 @@ export default function Registration() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pipWindow]);
 
-  const courseList = localCourseList.length > 0 ? localCourseList : null;
+  const courseList = isTourActive
+    ? [createTutorialPreEnroll(tour.cartCount)]
+    : localCourseList.length > 0
+      ? localCourseList
+      : null;
 
   // Drag and drop
   const sensors = useSensors(
@@ -155,6 +162,87 @@ export default function Registration() {
     }
   };
 
+  const handleTimerChange = (value: number) => {
+    timer.setStartOffset(value);
+    if (isTourActive && tour.currentStep === 'registrationTimer') {
+      tour.setStep('registrationStart');
+    }
+  };
+
+  const handlePracticeStartClick = () => {
+    handlePracticeToggle();
+
+    if (isTourActive && tour.currentStep === 'registrationStart') {
+      tour.setPracticeReady();
+      tour.setStep('registrationWaiting');
+    }
+  };
+
+  useEffect(() => {
+    if (!isTourActive || tour.currentStep !== 'registrationWaiting') return;
+    if (!tour.isPracticeReady) return;
+
+    const targetTime = new Date(timer.currentTime);
+    targetTime.setHours(8, 30, 0, 0);
+
+    if (timer.currentTime.getTime() >= targetTime.getTime()) {
+      tour.setStep('registrationCheck');
+    }
+  }, [
+    isTourActive,
+    timer.currentTime,
+    tour,
+    tour.currentStep,
+    tour.isPracticeReady,
+  ]);
+
+  const handleCourseSelect = (courseData: CourseData) => {
+    if (isTourActive) {
+      if (tour.currentStep === 'registrationCheck') {
+        tour.selectRegistrationCourse();
+        tour.setStep('registrationCaptcha');
+      }
+      return;
+    }
+
+    courseSelection.handleSelectCourse(
+      courseData.course.id,
+      0,
+      courseData.course.quota,
+      courseData.cartCount,
+      courseData.course.courseTitle,
+      courseData.course.courseNumber,
+      courseData.course.lectureNumber || ''
+    );
+  };
+
+  const handleCaptchaChange = (value: string) => {
+    if (isTourActive) {
+      tour.setCaptchaInput(value);
+      if (
+        tour.currentStep === 'registrationCaptcha' &&
+        value.replace(/\D/g, '').length > 0
+      ) {
+        tour.setStep('registrationSubmit');
+      }
+      return;
+    }
+
+    captcha.setCaptchaInput(value);
+  };
+
+  const handleSubmit = () => {
+    if (isTourActive) {
+      if (tour.currentStep === 'registrationSubmit') {
+        tour.markRegistrationSucceeded();
+        tour.setStep('registrationGoHistory');
+      }
+      return;
+    }
+
+    attempt.handleRegisterAttempt();
+  };
+
   return (
     <div className="registrationPage">
       <div className="containerX">
@@ -175,7 +263,7 @@ export default function Registration() {
           <div className="mobilePracticeControls">
             <button
               className={`mobilePracticeToggleBtn ${pipWindow ? 'active' : ''}`}
-              onClick={handlePracticeToggle}
+              onClick={handlePracticeStartClick}
               disabled={timer.isCooldown}
               style={{
                 cursor: timer.isCooldown ? 'not-allowed' : 'pointer',
@@ -191,7 +279,7 @@ export default function Registration() {
             <select
               className="mobilePracticeDropdown"
               value={timer.startOffset}
-              onChange={(e) => timer.setStartOffset(Number(e.target.value))}
+              onChange={(e) => handleTimerChange(Number(e.target.value))}
             >
               <option value={0} disabled hidden>연습 시작 설정</option>
               <option value={60}>60초 전</option>
@@ -234,18 +322,15 @@ export default function Registration() {
                         key={c.course.id}
                         courseData={c}
                         isSelected={
-                          courseSelection.selectedCourseId === c.course.id
+                          isTourActive
+                            ? tour.hasSelectedRegistrationCourse
+                            : courseSelection.selectedCourseId === c.course.id
                         }
-                        onSelect={() =>
-                          courseSelection.handleSelectCourse(
-                            c.course.id,
-                            0,
-                            c.course.quota,
-                            c.cartCount,
-                            c.course.courseTitle,
-                            c.course.courseNumber,
-                            c.course.lectureNumber || ''
-                          )
+                        onSelect={() => handleCourseSelect(c)}
+                        checkDataTourId={
+                          isTourActive
+                            ? 'registration-course-check'
+                            : undefined
                         }
                       />
                     ))}
@@ -279,15 +364,19 @@ export default function Registration() {
                     placeholder="입 력"
                     name="captchaInput"
                     autoComplete="off"
-                    value={captcha.captchaInput}
-                    onChange={(e) => captcha.setCaptchaInput(e.target.value)}
+                    value={
+                      isTourActive ? tour.captchaInput : captcha.captchaInput
+                    }
+                    onChange={(e) => handleCaptchaChange(e.target.value)}
+                    data-tour-id="registration-captcha-input"
                   />
                 </div>
               </div>
 
               <button
                 className="regSubmitBtn"
-                onClick={attempt.handleRegisterAttempt}
+                onClick={handleSubmit}
+                data-tour-id="registration-submit"
               >
                 수강신청
               </button>
@@ -296,9 +385,10 @@ export default function Registration() {
             <div className="practiceArea">
               <button
                 className={`practiceToggleBtn ${pipWindow ? 'active' : ''}`}
-                onClick={handlePracticeToggle}
+                onClick={handlePracticeStartClick}
                 disabled={timer.isCooldown}
                 aria-label="연습 시작 시간 설정"
+                data-tour-id="registration-start"
                 style={{
                   cursor: timer.isCooldown ? 'not-allowed' : 'pointer',
                   opacity: timer.isCooldown ? 0.6 : 1,
@@ -314,7 +404,8 @@ export default function Registration() {
               <select
                 className="timeSettingDropdown"
                 value={timer.startOffset}
-                onChange={(e) => timer.setStartOffset(Number(e.target.value))}
+                onChange={(e) => handleTimerChange(Number(e.target.value))}
+                data-tour-id="registration-timer"
               >
                 <option value={0} disabled hidden>
                   연습 시작 설정
@@ -356,14 +447,14 @@ export default function Registration() {
               placeholder="입 력"
               name="mobileCaptchaInput"
               autoComplete="off"
-              value={captcha.captchaInput}
-              onChange={(e) => captcha.setCaptchaInput(e.target.value)}
+              value={isTourActive ? tour.captchaInput : captcha.captchaInput}
+              onChange={(e) => handleCaptchaChange(e.target.value)}
             />
           </div>
         </div>
         <button
           className="regMobileSubmitBtn"
-          onClick={attempt.handleRegisterAttempt}
+          onClick={handleSubmit}
         >
           수강신청
         </button>
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index e87c2e0..97b7a3b 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { isApiError } from '@shared/api/fetch';
 import {
@@ -11,6 +11,12 @@ import type { CourseDetailResponse } from '@entities/course';
 import { useModalStore } from '@shared/model/modalStore';
 import { WarningModal } from '@shared/ui/Warning';
 import { Pagination } from '@shared/ui/Pagination';
+import {
+  TOUR_KEYWORD,
+  createTutorialPreEnroll,
+  tutorialCourse,
+  useTourStore,
+} from '@features/tour';
 import {
   hasTimeConflict,
   extractTimeFromPlaceAndTime,
@@ -22,8 +28,11 @@ const PAGE_SIZE = 10;
 export default function SearchPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
+  const tour = useTourStore();
+  const isTourActive = tour.isActive;
 
   const keyword = searchParams.get('query') || '';
+  const isTourSearch = searchParams.get('tour') === '1' && keyword === TOUR_KEYWORD;
   const currentPage = parseInt(searchParams.get('page') || '0', 10);
 
   const captcha = useCaptcha();
@@ -53,12 +62,32 @@ export default function SearchPage() {
     page: currentPage,
     size: PAGE_SIZE,
   });
+  const isDisplayLoading = isTourActive ? false : isLoading;
+  const displayError = isTourActive ? null : error;
 
   const addToCartMutation = useAddToCartMutation();
 
-  const courses = data?.items ?? [];
-  const totalCount = data?.pageInfo.totalElements ?? 0;
-  const totalPages = data?.pageInfo.totalPages ?? 0;
+  const shouldUseTourMode = isTourActive || isTourSearch;
+  const courses = shouldUseTourMode ? [tutorialCourse] : data?.items ?? [];
+  const totalCount = shouldUseTourMode ? 1 : data?.pageInfo.totalElements ?? 0;
+  const totalPages = shouldUseTourMode ? 1 : data?.pageInfo.totalPages ?? 0;
+
+  useEffect(() => {
+    if (!isTourSearch) return;
+    if (tour.isManuallyStopped) return;
+    if (!tour.isActive) {
+      tour.startAtStep('searchCheck', tour.publishedAt);
+      return;
+    }
+    if (keyword !== TOUR_KEYWORD) return;
+    if (
+      tour.currentStep === 'searchIntro' ||
+      tour.currentStep === 'searchType' ||
+      tour.currentStep === null
+    ) {
+      tour.setStep('searchCheck');
+    }
+  }, [isTourSearch, keyword, tour, tour.currentStep]);
 
   const setPage = (page: number) => {
     const newParams = new URLSearchParams(searchParams);
@@ -67,6 +96,12 @@ export default function SearchPage() {
   };
 
   const toggleCourseSelection = (courseId: number) => {
+    if (shouldUseTourMode && tour.currentStep === 'searchCheck') {
+      tour.selectSearchCourse();
+      tour.setStep('searchAddToCart');
+      return;
+    }
+
     setSelectedCourses((prev) => {
       if (prev.has(courseId)) {
         return new Set();
@@ -77,6 +112,14 @@ export default function SearchPage() {
   };
 
   const handleAddToCart = async () => {
+    if (shouldUseTourMode) {
+      if (tour.currentStep === 'searchAddToCart') {
+        tour.setStep('searchGoToCart');
+        openModal('search/cart');
+      }
+      return;
+    }
+
     if (selectedCourses.size === 0) {
       openModal('search/noCourseSelected');
       return;
@@ -141,12 +184,16 @@ export default function SearchPage() {
         onCancel={() => closeModal('search/cart')}
         onConfirm={() => {
           closeModal('search/cart');
+          if (shouldUseTourMode && tour.currentStep === 'searchGoToCart') {
+            tour.setStep('cartCount');
+          }
           navigate('/cart');
         }}
         title="장바구니에 담겼습니다."
         subtitle="지금 바로 장바구니로 이동하시겠습니까?"
         cancelLabel="아니요, 괜찮습니다."
         confirmLabel="장바구니로 이동"
+        confirmButtonDataTourId="search-go-cart"
       />
 
       <WarningModal.Alert
@@ -195,7 +242,9 @@ export default function SearchPage() {
             <span className="quote">'{keyword}'</span> 검색 결과
           </h2>
           <p className="searchCount">
-            <span className="countNum">{isLoading ? '...' : totalCount}</span>
+            <span className="countNum">
+              {isDisplayLoading ? '...' : totalCount}
+            </span>
             건의 교과목이 검색되었습니다.
           </p>
         </div>
@@ -240,21 +289,35 @@ export default function SearchPage() {
           <div className="searchLeftColumn">
             <hr className="blackLine" />
             <div className="resultListArea">
-              {isLoading && <p className="stateMessage">검색 중...</p>}
-              {error && (
+              {isDisplayLoading && <p className="stateMessage">검색 중...</p>}
+              {displayError && (
                 <p className="stateMessage error">강의 검색에 실패했습니다.</p>
               )}
-              {!isLoading && !error && courses.length === 0 && keyword && (
-                <p className="stateMessage">검색 결과가 없습니다.</p>
-              )}
-              {!isLoading &&
+              {!isDisplayLoading &&
+                !displayError &&
+                courses.length === 0 &&
+                keyword && (
+                  <p className="stateMessage">검색 결과가 없습니다.</p>
+                )}
+              {!isDisplayLoading &&
                 courses.map((course: CourseDetailResponse) => (
                   <SearchCourseItem
                     key={course.id}
                     course={course}
-                    isSelected={selectedCourses.has(course.id)}
-                    cartCount={0}
+                    isSelected={
+                      shouldUseTourMode
+                        ? tour.hasSelectedSearchCourse
+                        : selectedCourses.has(course.id)
+                    }
+                    cartCount={
+                      shouldUseTourMode
+                        ? createTutorialPreEnroll(tour.cartCount).cartCount
+                        : 0
+                    }
                     onSelect={() => toggleCourseSelection(course.id)}
+                    checkDataTourId={
+                      shouldUseTourMode ? 'search-course-check' : undefined
+                    }
                   />
                 ))}
             </div>
@@ -269,7 +332,7 @@ export default function SearchPage() {
               </p>
             </div>
 
-            {!isLoading && !error && (
+            {!isDisplayLoading && !displayError && (
               <Pagination
                 currentPage={currentPage}
                 totalPages={totalPages}
@@ -289,6 +352,7 @@ export default function SearchPage() {
               <button
                 className="floatBtn fillBlueBtn"
                 onClick={handleAddToCart}
+                data-tour-id="search-add-cart"
               >
                 장바구니 담기
               </button>
diff --git a/src/shared/ui/Warning/components/Confirm.tsx b/src/shared/ui/Warning/components/Confirm.tsx
index d6f518a..9373a20 100644
--- a/src/shared/ui/Warning/components/Confirm.tsx
+++ b/src/shared/ui/Warning/components/Confirm.tsx
@@ -13,6 +13,7 @@ interface ConfirmProps {
   subtitle?: string;
   cancelLabel?: string;
   confirmLabel?: string;
+  confirmButtonDataTourId?: string;
   children?: ReactNode;
   enterAction?: 'confirm' | 'cancel';
 }
@@ -51,6 +52,7 @@ export function Confirm({
   subtitle,
   cancelLabel = '취소',
   confirmLabel = '확인',
+  confirmButtonDataTourId,
   children,
   enterAction = 'confirm',
 }: ConfirmProps) {
@@ -83,7 +85,11 @@ export function Confirm({
           <button className="success-btn gray" onClick={onCancel}>
             {cancelLabel}
           </button>
-          <button className="success-btn blue" onClick={onConfirm}>
+          <button
+            className="success-btn blue"
+            onClick={onConfirm}
+            data-tour-id={confirmButtonDataTourId}
+          >
             {confirmLabel}
           </button>
         </div>
diff --git a/src/widgets/header/Header.tsx b/src/widgets/header/Header.tsx
index 8da9920..89c293c 100644
--- a/src/widgets/header/Header.tsx
+++ b/src/widgets/header/Header.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '@features/auth';
+import { TOUR_KEYWORD, useIsDesktop, useTourStore } from '@features/tour';
 import { useModalStore } from '@shared/model/modalStore';
 import { WarningModal } from '@shared/ui/Warning';
 import { MobilePageNav } from '@widgets/mobile-page-nav';
@@ -15,6 +16,8 @@ export default function Header({ handleLogout, onToggleSideMenu }: HeaderProps)
   const loc = useLocation();
   const navigate = useNavigate();
   const { user } = useAuth();
+  const isDesktop = useIsDesktop();
+  const tour = useTourStore();
   const {
     showLoginWarning,
     showNotSupported,
@@ -29,8 +32,22 @@ export default function Header({ handleLogout, onToggleSideMenu }: HeaderProps)
   const mobileSearchInputRef = React.useRef<HTMLInputElement>(null);
 
   const handleSearch = () => {
-    const query = searchInputRef.current?.value || '';
-    navigate(`/search?query=${encodeURIComponent(query)}`);
+    const query = searchInputRef.current?.value.trim() || '';
+
+    if (tour.isActive && tour.currentStep === 'searchType') {
+      if (query !== TOUR_KEYWORD) {
+        searchInputRef.current?.focus();
+        return;
+      }
+
+      tour.setStep('searchCheck');
+      navigate(`/search?query=${encodeURIComponent(query)}&tour=1`);
+      window.scrollTo(0, 0);
+      return;
+    }
+
+    const tourParam = tour.isActive ? '&tour=1' : '';
+    navigate(`/search?query=${encodeURIComponent(query)}${tourParam}`);
     window.scrollTo(0, 0);
   };
 
@@ -65,6 +82,46 @@ export default function Header({ handleLogout, onToggleSideMenu }: HeaderProps)
     }
   };
 
+  const handleSearchInputClick = () => {
+    if (tour.isActive && tour.currentStep === 'searchIntro') {
+      tour.setStep('searchType');
+      searchInputRef.current?.focus();
+    }
+  };
+
+  const handleTourStart = () => {
+    if (!user) {
+      openLoginWarning();
+      return;
+    }
+
+    tour.start(tour.publishedAt);
+    navigate('/');
+    window.scrollTo(0, 0);
+  };
+
+  const handleRegistrationNavClick = (
+    e: React.MouseEvent<HTMLAnchorElement>
+  ) => {
+    handleProtectedClick(e);
+    if (!e.defaultPrevented && tour.isActive && tour.currentStep === 'cartGoRegistration') {
+      tour.setStep('registrationTimer');
+    }
+  };
+
+  const handleEnrollmentHistoryNavClick = (
+    e: React.MouseEvent<HTMLAnchorElement>
+  ) => {
+    handleProtectedClick(e);
+    if (
+      !e.defaultPrevented &&
+      tour.isActive &&
+      tour.currentStep === 'registrationGoHistory'
+    ) {
+      tour.setStep('historyResult');
+    }
+  };
+
   useEffect(() => {
     const isModalOpen = showLoginWarning || showNotSupported;
     document.body.style.overflow = isModalOpen ? 'hidden' : 'auto';
@@ -112,7 +169,7 @@ export default function Header({ handleLogout, onToggleSideMenu }: HeaderProps)
           </Link>
 
           <div className="searchArea">
-            <div className="searchBox">
+            <div className="searchBox" data-tour-id="header-search-box">
               <select className="searchSelect" aria-hidden="true" disabled>
                 <option>Search</option>
               </select>
@@ -123,6 +180,8 @@ export default function Header({ handleLogout, onToggleSideMenu }: HeaderProps)
                 placeholder="전체 강좌 검색은 돋보기 버튼을 클릭하세요"
                 ref={searchInputRef}
                 onKeyDown={handleKeyDown}
+                onClick={handleSearchInputClick}
+                data-tour-id="header-search-input"
               />
               <button
                 className="iconBtn"
@@ -339,14 +398,16 @@ export default function Header({ handleLogout, onToggleSideMenu }: HeaderProps)
             <Link
               className={`gnbItem ${loc.pathname === '/registration' ? 'active' : ''}`}
               to="/registration"
-              onClick={handleProtectedClick}
+              onClick={handleRegistrationNavClick}
+              data-tour-id="nav-registration"
             >
               수강신청
             </Link>
             <Link
               className={`gnbItem ${loc.pathname === '/enrollment-history' ? 'active' : ''}`}
               to="/enrollment-history"
-              onClick={handleProtectedClick}
+              onClick={handleEnrollmentHistoryNavClick}
+              data-tour-id="nav-enrollment-history"
             >
               수강신청내역
             </Link>
@@ -363,6 +424,15 @@ export default function Header({ handleLogout, onToggleSideMenu }: HeaderProps)
             >
               리더보드
             </Link>
+            {isDesktop && (
+              <button
+                type="button"
+                className="gnbItem gnbButton"
+                onClick={handleTourStart}
+              >
+                튜토리얼
+              </button>
+            )}
           </nav>
         </div>
       </div>
diff --git a/src/widgets/header/header.css b/src/widgets/header/header.css
index 15e5fe0..02971b6 100644
--- a/src/widgets/header/header.css
+++ b/src/widgets/header/header.css
@@ -273,6 +273,12 @@
   color: #222;
   font-weight: 400;
 }
+.gnbButton {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
 .gnbItem.active {
   color: #376dc8;
   text-underline-offset: 6px;
diff --git a/vite.config.ts b/vite.config.ts
index 745b6bb..f8cb23d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,33 +1,39 @@
-import {defineConfig} from 'vite';
+import {defineConfig, loadEnv} from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    react({
-      babel: {
-        plugins: [['babel-plugin-react-compiler']],
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const apiProxyTarget =
+    env.VITE_API_PROXY_TARGET || 'https://snuclear-server.wafflestudio.com/';
+
+  return {
+    plugins: [
+      react({
+        babel: {
+          plugins: [['babel-plugin-react-compiler']],
+        },
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@app': path.resolve(__dirname, './src/app'),
+        '@pages': path.resolve(__dirname, './src/pages'),
+        '@widgets': path.resolve(__dirname, './src/widgets'),
+        '@features': path.resolve(__dirname, './src/features'),
+        '@entities': path.resolve(__dirname, './src/entities'),
+        '@shared': path.resolve(__dirname, './src/shared'),
       },
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@app': path.resolve(__dirname, './src/app'),
-      '@pages': path.resolve(__dirname, './src/pages'),
-      '@widgets': path.resolve(__dirname, './src/widgets'),
-      '@features': path.resolve(__dirname, './src/features'),
-      '@entities': path.resolve(__dirname, './src/entities'),
-      '@shared': path.resolve(__dirname, './src/shared'),
     },
-  },
-  server: {
-    proxy: {
-      '/api': {
-        target: 'https://snuclear-server.wafflestudio.com/',
-        changeOrigin: true,
-        secure: false,
+    server: {
+      proxy: {
+        '/api': {
+          target: apiProxyTarget,
+          changeOrigin: true,
+          secure: false,
+        },
       },
     },
-  },
+  };
 });