diff --git a/app/on-boarding/page.tsx b/app/on-boarding/page.tsx
index 59e28410..9826376e 100644
--- a/app/on-boarding/page.tsx
+++ b/app/on-boarding/page.tsx
@@ -12,9 +12,9 @@ import {
   ProgressIndicator,
   SkipButton,
   Steps,
+  stepsIntroduce,
   useProgressIndicator,
 } from '@/features/on-boarding';
-import { OnBoardingImages } from '@/public/images/on-boarding';
 import { css } from '@/styled-system/css';
 
 export default function OnBoarding() {
@@ -57,7 +57,7 @@ export default function OnBoarding() {
         </CSSTransition>
       </TransitionGroup>
       <div className={layoutStyles.button}>
-        {step < OnBoardingImages.length - 1 ? (
+        {step < stepsIntroduce.length - 1 ? (
           <Button
             buttonType="secondary"
             variant="outlined"
diff --git a/features/on-boarding/components/molecules/progress-indicator.tsx b/features/on-boarding/components/molecules/progress-indicator.tsx
index aba8111d..ff6fd9b6 100644
--- a/features/on-boarding/components/molecules/progress-indicator.tsx
+++ b/features/on-boarding/components/molecules/progress-indicator.tsx
@@ -1,7 +1,8 @@
-import { OnBoardingImages } from '@/public/images/on-boarding';
 import { css, cva } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
+import { stepsIntroduce } from '../../constants';
+
 interface ProgressIndicatorProps {
   step: number;
 }
@@ -9,7 +10,7 @@ interface ProgressIndicatorProps {
 export function ProgressIndicator({ step }: ProgressIndicatorProps) {
   return (
     <div className={progressIndicatorStyles}>
-      {Array.from({ length: OnBoardingImages.length }, (_, i) => (
+      {Array.from({ length: stepsIntroduce.length }, (_, i) => (
         <IndicatorDot key={i} selected={step === i} />
       ))}
     </div>
diff --git a/features/on-boarding/components/molecules/steps.tsx b/features/on-boarding/components/molecules/steps.tsx
index dd4ac1ea..9d482cc7 100644
--- a/features/on-boarding/components/molecules/steps.tsx
+++ b/features/on-boarding/components/molecules/steps.tsx
@@ -1,7 +1,6 @@
 import { Fragment } from 'react';
 
 import { Image } from '@/components/atoms';
-import { OnBoardingImages } from '@/public/images/on-boarding';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -12,7 +11,7 @@ interface StepsProps {
 }
 
 export function Steps({ current }: StepsProps) {
-  const highlightText = (text: string, highlightTexts: string[]) => {
+  const getHighlightedText = (text: string, highlightTexts: string[]) => {
     const regex = new RegExp(`(${highlightTexts.join('|')})`, 'g');
     const parts = text.split(regex);
 
@@ -30,7 +29,7 @@ export function Steps({ current }: StepsProps) {
   return (
     <div className={layout.total}>
       <p className={textStyles.total}>
-        {highlightText(
+        {getHighlightedText(
           stepsIntroduce[current].total,
           stepsIntroduce[current].highlight,
         )}
@@ -38,7 +37,7 @@ export function Steps({ current }: StepsProps) {
       <div className={layout.image}>
         <Image
           key={current}
-          src={OnBoardingImages[current]}
+          src={stepsIntroduce[current].image}
           alt="온보딩 이미지"
           fill
           style={{ objectFit: 'contain' }}
diff --git a/features/on-boarding/constants/steps-introduce.ts b/features/on-boarding/constants/steps-introduce.ts
index 8e07f6b7..669f32ae 100644
--- a/features/on-boarding/constants/steps-introduce.ts
+++ b/features/on-boarding/constants/steps-introduce.ts
@@ -1,26 +1,39 @@
+import OnBoardingImage0 from '@/public/images/on-boarding/on-boarding-image0.png';
+import OnBoardingImage1 from '@/public/images/on-boarding/on-boarding-image1.png';
+import OnBoardingImage2 from '@/public/images/on-boarding/on-boarding-image2.png';
+import OnBoardingImage3 from '@/public/images/on-boarding/on-boarding-image3.png';
+import OnBoardingImage4 from '@/public/images/on-boarding/on-boarding-image4.png';
+import OnBoardingImage5 from '@/public/images/on-boarding/on-boarding-image5.png';
+
 export const stepsIntroduce = [
   {
     total: '캘린더에서 날짜를 클릭하면 수영을 기록할 수 있어요',
     highlight: ['날짜를 클릭'],
+    image: OnBoardingImage0,
   },
   {
     total: '스마트 워치가 없어도 바퀴 수로 거리 기록이 가능해요',
     highlight: ['바퀴 수'],
+    image: OnBoardingImage1,
   },
   {
     total: '기록한 수영 거리에 따라 물결 높이가 달라져요',
     highlight: ['물결 높이'],
+    image: OnBoardingImage2,
   },
   {
     total: '영법별로 기록하면 색으로 구분되어 보여요',
     highlight: ['영법별', '색'],
+    image: OnBoardingImage3,
   },
   {
     total: '캘린더와 타임라인으로 나의 실력 성장을 확인해요',
     highlight: ['캘린더', '타임라인'],
+    image: OnBoardingImage4,
   },
   {
     total: '수영 친구를 팔로우하고 응원을 주고받아요',
     highlight: ['수영 친구를 팔로우'],
+    image: OnBoardingImage5,
   },
 ];
diff --git a/public/images/on-boarding/index.ts b/public/images/on-boarding/index.ts
deleted file mode 100644
index d21e3d09..00000000
--- a/public/images/on-boarding/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import OnBoardingImage0 from './on-boarding-image0.png';
-import OnBoardingImage1 from './on-boarding-image1.png';
-import OnBoardingImage2 from './on-boarding-image2.png';
-import OnBoardingImage3 from './on-boarding-image3.png';
-import OnBoardingImage4 from './on-boarding-image4.png';
-import OnBoardingImage5 from './on-boarding-image5.png';
-
-export const OnBoardingImages = [
-  OnBoardingImage0,
-  OnBoardingImage1,
-  OnBoardingImage2,
-  OnBoardingImage3,
-  OnBoardingImage4,
-  OnBoardingImage5,
-];