diff --git a/gatsby-config.ts b/gatsby-config.ts
index 81bd130..e579ee7 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -70,6 +70,20 @@ const config: GatsbyConfig = {
         policy: [{ userAgent: '*', allow: '/' }],
       },
     },
+    {
+      resolve: `gatsby-plugin-alias-imports`,
+      options: {
+        alias: {
+          '@src': 'src',
+          '@api': 'src/api',
+          '@components': 'src/components',
+          '@images': 'src/images',
+          '@pages': 'src/pages',
+          '@styles': 'src/styles',
+        },
+        extensions: [],
+      },
+    },
   ],
 };
 
diff --git a/package-lock.json b/package-lock.json
index 618e1c0..fc35007 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@types/node": "^20.11.19",
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
+        "gatsby-plugin-alias-imports": "^1.0.5",
         "typescript": "^5.3.3"
       }
     },
@@ -8498,6 +8499,18 @@
         "@parcel/core": "^2.0.0"
       }
     },
+    "node_modules/gatsby-plugin-alias-imports": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-alias-imports/-/gatsby-plugin-alias-imports-1.0.5.tgz",
+      "integrity": "sha512-q58JrSjuVNh4NApamqElR0zqwm55FOb9vFAVb2i2ftPRu0uYzWJkbOz2IN3vSw7a+5PmGzX7VL8XDFXlNHrMNA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.2.0"
+      },
+      "peerDependencies": {
+        "gatsby": ">2.0.0"
+      }
+    },
     "node_modules/gatsby-plugin-google-gtag": {
       "version": "5.13.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-google-gtag/-/gatsby-plugin-google-gtag-5.13.1.tgz",
@@ -22819,6 +22832,15 @@
         "@parcel/transformer-json": "2.8.3"
       }
     },
+    "gatsby-plugin-alias-imports": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-alias-imports/-/gatsby-plugin-alias-imports-1.0.5.tgz",
+      "integrity": "sha512-q58JrSjuVNh4NApamqElR0zqwm55FOb9vFAVb2i2ftPRu0uYzWJkbOz2IN3vSw7a+5PmGzX7VL8XDFXlNHrMNA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.2.0"
+      }
+    },
     "gatsby-plugin-google-gtag": {
       "version": "5.13.1",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-google-gtag/-/gatsby-plugin-google-gtag-5.13.1.tgz",
diff --git a/package.json b/package.json
index cfbc126..c1b4492 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "gatsby"
   ],
   "scripts": {
-    "develop": "gatsby develop",
+    "dev": "gatsby develop",
     "start": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
@@ -36,6 +36,7 @@
     "@types/node": "^20.11.19",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "gatsby-plugin-alias-imports": "^1.0.5",
     "typescript": "^5.3.3"
   }
 }
diff --git a/src/components/Alliance/AllianceContact/AllianceContact.tsx b/src/components/Alliance/AllianceContact/AllianceContact.tsx
index 8504591..9b909ed 100644
--- a/src/components/Alliance/AllianceContact/AllianceContact.tsx
+++ b/src/components/Alliance/AllianceContact/AllianceContact.tsx
@@ -3,8 +3,8 @@ import * as styles from './AllianceContact.module.scss';
 import AllianceInputField from '../BaseComponents/AllianceInputField';
 import { StaticImage } from 'gatsby-plugin-image';
 import AllianceDropdown from '../AllianceDropdown/AllianceDropdown';
-import { ContactInfoType } from '../../../api/types';
-import allianceApi from '../../../api/alliance';
+import { ContactInfoType } from '@api/types';
+import allianceApi from '@api/alliance';
 
 const PlatformList = ['업체 홈페이지', '네이버 블로그', '인스타그램', '구글 폼', '전화예약'];
 const { applyContactInfo } = allianceApi();
diff --git a/src/components/common/ApplyLink.tsx b/src/components/Common/ApplyLink.tsx
similarity index 100%
rename from src/components/common/ApplyLink.tsx
rename to src/components/Common/ApplyLink.tsx
diff --git a/src/components/common/NavbarMenuLink.tsx b/src/components/Common/NavbarMenuLink.tsx
similarity index 100%
rename from src/components/common/NavbarMenuLink.tsx
rename to src/components/Common/NavbarMenuLink.tsx
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index bdd9310..e2068ef 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -3,7 +3,7 @@ import Nav from './Nav/Nav';
 import * as styles from './Layout.module.scss';
 import Footer from './Footer/Footer';
 import { Link } from 'gatsby';
-import ApplyLink from '../common/ApplyLink';
+import ApplyLink from '../Common/ApplyLink';
 type LayoutProps = {
   children: React.ReactNode;
 };
@@ -14,11 +14,9 @@ const Layout = ({ children }: LayoutProps) => {
       <Nav />
       {children}
       <Footer />
-      {
-        typeof window !== 'undefined' &&
-        window.location.pathname === '/' &&
-      <ApplyLink className={styles.LayoutMobileApplyLink} />
-      }
+      {typeof window !== 'undefined' && window.location.pathname === '/' && (
+        <ApplyLink className={styles.LayoutMobileApplyLink} />
+      )}
     </div>
   );
 };
diff --git a/src/components/Layout/Nav/Nav.tsx b/src/components/Layout/Nav/Nav.tsx
index 204597e..a7b4f8f 100644
--- a/src/components/Layout/Nav/Nav.tsx
+++ b/src/components/Layout/Nav/Nav.tsx
@@ -2,8 +2,8 @@ import { Link } from 'gatsby';
 import { StaticImage } from 'gatsby-plugin-image';
 import React from 'react';
 import * as styles from './Nav.module.scss';
-import NavbarMenuLink from '../../common/NavbarMenuLink';
-import ApplyLink from '../../common/ApplyLink';
+import NavbarMenuLink from '@components/Common/NavbarMenuLink';
+import ApplyLink from '@components/Common/ApplyLink';
 
 const Nav = () => {
   return (
@@ -25,11 +25,9 @@ const Nav = () => {
               </li>
             </div>
             <li>
-              {
-                typeof window !== 'undefined' &&
-                window.location.pathname === '/' &&
-              <ApplyLink className={styles.BenefitButton} />
-              }
+              {typeof window !== 'undefined' && window.location.pathname === '/' && (
+                <ApplyLink className={styles.BenefitButton} />
+              )}
             </li>
           </ul>
         </div>
diff --git a/src/components/Lending/LendingApply/LedingApply.tsx b/src/components/Lending/LendingApply/LedingApply.tsx
index e1f2839..ed4de81 100644
--- a/src/components/Lending/LendingApply/LedingApply.tsx
+++ b/src/components/Lending/LendingApply/LedingApply.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import * as styles from './LendingApply.module.scss';
 import { StaticImage } from 'gatsby-plugin-image';
-import ApplyLink from '../../common/ApplyLink';
+import ApplyLink from '../../Common/ApplyLink';
 
 const LedingApply = () => {
-  
   return (
     <section className={styles.LendingApplyWrapper}>
       <main className={styles.LendingApplyContainer}>
diff --git a/src/components/Lending/LendingReservation/LendingReservation.tsx b/src/components/Lending/LendingReservation/LendingReservation.tsx
index 03f8ea1..d8b5d20 100644
--- a/src/components/Lending/LendingReservation/LendingReservation.tsx
+++ b/src/components/Lending/LendingReservation/LendingReservation.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import * as styles from './LendingReservation.module.scss';
-import Reservation1 from '../../../images/lending/lending_reservation_1.inline.svg';
-import Reservation2 from '../../../images/lending/lending_reservation_2.inline.svg';
-import Reservation3 from '../../../images/lending/lending_reservation_3.inline.svg';
+import Reservation1 from '@images/lending/lending_reservation_1.inline.svg';
+import Reservation2 from '@images/lending/lending_reservation_2.inline.svg';
+import Reservation3 from '@images/lending/lending_reservation_3.inline.svg';
 
 const LendingReservation = () => {
   return (
diff --git a/src/components/Lending/LendingStore/LendingStore.tsx b/src/components/Lending/LendingStore/LendingStore.tsx
index 6feed12..fdc7d6d 100644
--- a/src/components/Lending/LendingStore/LendingStore.tsx
+++ b/src/components/Lending/LendingStore/LendingStore.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import * as styles from './LendingStore.module.scss';
 import LendingFlexContent from '../BaseComponents/LendingFlexContent';
-import ReviewMbSvg from '../../../images/lending/lending_review_mbReview.inline.svg';
-import ReviewPcSvg from '../../../images/lending/lending_review_pcReview.inline.svg';
+import ReviewMbSvg from '@images/lending/lending_review_mbReview.inline.svg';
+import ReviewPcSvg from '@images/lending/lending_review_pcReview.inline.svg';
 
 const LendingStore = () => {
   return (
diff --git a/src/pages/alliance/index.tsx b/src/pages/alliance/index.tsx
index c2fd23e..f5e5553 100644
--- a/src/pages/alliance/index.tsx
+++ b/src/pages/alliance/index.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { HeadFC, PageProps } from 'gatsby';
-import LedingApply from '../../components/Lending/LendingApply/LedingApply';
-import AllianceBenefit from '../../components/Alliance/AllianceBenefit/AllianceBenefit';
-import AllianceMain from '../../components/Alliance/AllianceMain/AllianceMain';
-import AllianceContact from '../../components/Alliance/AllianceContact/AllianceContact';
-import Layout from '../../components/Layout/Layout';
+import LedingApply from '@components/Lending/LendingApply/LedingApply';
+import AllianceBenefit from '@components/Alliance/AllianceBenefit/AllianceBenefit';
+import AllianceMain from '@components/Alliance/AllianceMain/AllianceMain';
+import AllianceContact from '@components/Alliance/AllianceContact/AllianceContact';
+import Layout from '@components/Layout/Layout';
 
 type CustomLocationType = {
   shouldScrollToContact: boolean;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 94de668..28d02ef 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { HeadFC, PageProps } from 'gatsby';
-import LedingApply from '../components/Lending/LendingApply/LedingApply';
-import LendingReservation from '../components/Lending/LendingReservation/LendingReservation';
-import LendingStore from '../components/Lending/LendingStore/LendingStore';
-import Layout from '../components/Layout/Layout';
+import LedingApply from '@components/Lending/LendingApply/LedingApply';
+import LendingReservation from '@components/Lending/LendingReservation/LendingReservation';
+import LendingStore from '@components/Lending/LendingStore/LendingStore';
+import Layout from '@components/Layout/Layout';
 
 const IndexPage: React.FC<PageProps> = () => {
   return (
diff --git a/src/types/png.d.ts b/src/types/png.d.ts
new file mode 100644
index 0000000..dd84df4
--- /dev/null
+++ b/src/types/png.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const content: any;
+  export default content;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 25419bb..6939740 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,9 +11,12 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "esnext",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    "lib": ["dom", "esnext"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "react",                                /* Specify what JSX code is generated. */
+    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "lib": [
+      "dom",
+      "esnext"
+    ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+    "jsx": "react" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
@@ -24,11 +27,18 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "esnext",                                /* Specify what module code is generated. */
+    "module": "esnext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
+    "paths": {
+      "@src/*": ["src/*"],
+      "@api/*": ["src/api/*"],
+      "@components/*": ["src/components/*"],
+      "@images/*": ["src/images/*"],
+      "@pages/*": ["src/pages/*"],
+      "@styles/*": ["src/styles/*"]
+    } /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
@@ -69,12 +79,12 @@
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
     // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -96,7 +106,7 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
   "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
 }