diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 558877e..89712ee 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -17,6 +17,10 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@master
 
+      - name: .env setting
+        run: |
+          echo "VITE_KAKAOMAP_API_KEY=${{ secrets.VITE_KAKAOMAP_API_KEY }}" >> .env
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
diff --git a/.gitignore b/.gitignore
index f797607..ebc156e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment variables
+.env
\ No newline at end of file
diff --git a/package.json b/package.json
index 73bc4dd..de24366 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
+    "react-kakao-maps-sdk": "^1.2.0",
     "react-router-dom": "^7.8.1",
     "recharts": "^3.1.2",
     "sonner": "^2.0.7",
@@ -66,6 +67,7 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
+    "kakao.maps.d.ts": "^0.1.40",
     "lint-staged": "^16.1.5",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "tw-animate-css": "^1.3.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a37b2fa..c49edd5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       react-hook-form:
         specifier: ^7.62.0
         version: 7.62.0(react@19.1.1)
+      react-kakao-maps-sdk:
+        specifier: ^1.2.0
+        version: 1.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react-router-dom:
         specifier: ^7.8.1
         version: 7.8.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -138,6 +141,9 @@ importers:
       husky:
         specifier: ^9.1.7
         version: 9.1.7
+      kakao.maps.d.ts:
+        specifier: ^0.1.40
+        version: 0.1.40
       lint-staged:
         specifier: ^16.1.5
         version: 16.1.5
@@ -184,6 +190,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/runtime@7.28.3':
+    resolution: {integrity: sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -2054,6 +2064,9 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  kakao.maps.d.ts@0.1.40:
+    resolution: {integrity: sha512-nX69MB1ok04epe3OqS+/tEeWBbU31GSQbvDPJmQRRltzzqn6t4jBsO5v1nzalUjCKzwcH2CptOc767NZ7Hbu3g==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -2436,6 +2449,12 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-kakao-maps-sdk@1.2.0:
+    resolution: {integrity: sha512-ptyHhtSbvyza+9IAf6TXjE4ZhwwLbXR6avgNM2ju5xed2+fDwJ+gJDFSqhfsKbvFn9K9+3I+dY3JrqruwsGNBw==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   react-redux@9.2.0:
     resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
     peerDependencies:
@@ -2888,6 +2907,8 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.2
 
+  '@babel/runtime@7.28.3': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -4718,6 +4739,8 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  kakao.maps.d.ts@0.1.40: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -5014,6 +5037,13 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-kakao-maps-sdk@1.2.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@babel/runtime': 7.28.3
+      kakao.maps.d.ts: 0.1.40
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
   react-redux@9.2.0(@types/react@19.1.10)(react@19.1.1)(redux@5.0.1):
     dependencies:
       '@types/use-sync-external-store': 0.0.6
diff --git a/src/features/main/ui/MapSection.tsx b/src/features/main/ui/MapSection.tsx
index 345399b..96f0445 100644
--- a/src/features/main/ui/MapSection.tsx
+++ b/src/features/main/ui/MapSection.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/shared';
+import { Button, KakaoMap } from '@/shared';
 
 import { HOUSE_TYPES } from '../constants';
 
@@ -15,10 +15,7 @@ export const MapSection = () => {
 
       {/* TODO: 추후 지도 (카카오맵, 네이버 지도, 구글 맵 등) 컴포넌트 추가 */}
       <div className='flex flex-1 items-center justify-center bg-gray-100'>
-        <div className='text-center text-gray-500'>
-          <p className='mb-2 text-lg font-medium'>지도가 여기에 표시됩니다</p>
-          <p className='text-sm'>주소를 입력하고 진단하기를 눌러보세요</p>
-        </div>
+        <KakaoMap lat={35.1690637154991} lng={129.136018268316} />
       </div>
     </div>
   );
diff --git a/src/shared/components/features/index.ts b/src/shared/components/features/index.ts
index 37d77ea..96856a9 100644
--- a/src/shared/components/features/index.ts
+++ b/src/shared/components/features/index.ts
@@ -1,3 +1,4 @@
 export * from './layout';
 export * from './header';
 export * from './optimized-image';
+export * from './kakao-map';
diff --git a/src/shared/components/features/kakao-map/KakaoMap.tsx b/src/shared/components/features/kakao-map/KakaoMap.tsx
new file mode 100644
index 0000000..1fb5eac
--- /dev/null
+++ b/src/shared/components/features/kakao-map/KakaoMap.tsx
@@ -0,0 +1,32 @@
+import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
+
+type Props = {
+  lat: number;
+  lng: number;
+};
+
+export const KakaoMap = ({ lat, lng }: Props) => {
+  const [loading, error] = useKakaoLoader({
+    appkey: import.meta.env.VITE_KAKAOMAP_API_KEY,
+    libraries: ['clusterer', 'drawing', 'services'],
+  });
+
+  const center = {
+    lat: lat,
+    lng: lng,
+  };
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <Map // 지도를 표시할 Container
+      id='map'
+      center={center}
+      className='h-full w-full'
+      level={3} // 지도의 확대 레벨
+    >
+      <MapMarker position={center} />
+    </Map>
+  );
+};
diff --git a/src/shared/components/features/kakao-map/index.ts b/src/shared/components/features/kakao-map/index.ts
new file mode 100644
index 0000000..bab08f6
--- /dev/null
+++ b/src/shared/components/features/kakao-map/index.ts
@@ -0,0 +1 @@
+export * from './KakaoMap';
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 5b3034e..8f90cf1 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -27,7 +27,9 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+
+    "types": ["kakao.maps.d.ts"]
   },
   "include": ["src"]
 }
diff --git a/tsconfig.json b/tsconfig.json
index fec8c8e..219175b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,9 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
   "compilerOptions": {
+    "types": ["kakao.maps.d.ts"],
+
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]