diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..0f8fb64d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,22 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#9a95fa",
+    "activityBar.background": "#9a95fa",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#d5140a",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#9a95fa",
+    "statusBar.background": "#6c64f8",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#9a95fa",
+    "statusBarItem.remoteBackground": "#6c64f8",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#6c64f8",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#6c64f899",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#6C64F8"
+}
diff --git a/.vscode/stories.tsx.code-snippets b/.vscode/stories.tsx.code-snippets
new file mode 100644
index 00000000..8e53f61c
--- /dev/null
+++ b/.vscode/stories.tsx.code-snippets
@@ -0,0 +1,29 @@
+{
+  "storyTemplate": {
+    "prefix": "!story",
+    "description": "storybook 기초 템플릿입니다.",
+    "body": [
+      "import type { Meta, StoryObj } from '@storybook/react'",
+
+      "",
+      "const meta = {",
+      "  title: 'UI/컴포넌트이름',",
+      "  component: 컴포넌트이름,",
+      "  tags: ['autodocs'],",
+      "  argTypes: {},",
+      "} satisfies Meta<typeof 컴포넌트이름>",
+      "",
+      "export default meta",
+      "type Story = StoryObj<typeof meta>",
+      "",
+      "export const Normal: Story = {",
+      "  args: {}",
+      "}",
+      "",
+      "export const Disabled: Story = {",
+      "  args: {}",
+      "}"
+    ],
+    "scope": "stories.tsx, typescript, javascript, javascriptreact, typescriptreact"
+  }
+}
diff --git a/.vscode/test.code-snippets b/.vscode/test.code-snippets
new file mode 100644
index 00000000..409f7836
--- /dev/null
+++ b/.vscode/test.code-snippets
@@ -0,0 +1,18 @@
+{
+  "vitestTemplate": {
+    "prefix": "!test",
+    "description": "vitest 기초 템플릿입니다.",
+    "body": [
+      "import { describe, it } from 'vitest'",
+      "",
+      "describe('테스트 주제', () => {",
+      "  it('테스트 케이스 ex)classname을 적절히 merge합니다', () => {",
+      "    ",
+      "  })",
+      "})",
+      ""
+    ],
+    "description": "testTemplate",
+    "scope": "stories.tsx, typescript, javascript, javascriptreact, typescriptreact"
+  }
+}