diff --git a/apps/client/src/entities/workspace/WorkspaceNameInput.tsx b/apps/client/src/entities/workspace/WorkspaceNameInput.tsx
index 19fe9e0f..1f4b0b29 100644
--- a/apps/client/src/entities/workspace/WorkspaceNameInput.tsx
+++ b/apps/client/src/entities/workspace/WorkspaceNameInput.tsx
@@ -1,9 +1,9 @@
 import { FocusEventHandler, KeyboardEventHandler } from 'react';
 
+import { Spinner } from '@/shared/ui';
 import { useParams } from 'react-router-dom';
 import { useUpdateWorkspaceName } from '@/shared/hooks';
 import { useWorkspaceStore } from '@/shared/store';
-import { Spinner } from '@/shared/ui';
 
 export const WorkspaceNameInput = () => {
   const { workspaceId } = useParams() as { workspaceId: string };
@@ -47,7 +47,7 @@ export const WorkspaceNameInput = () => {
         />
         {isPending && (
           <div className="absolute right-5">
-            <Spinner width={4} height={4} foregroundColor="green-500" backgroundColor="gray-200" />
+            <Spinner width={4} height={4} foregroundColor="green500" backgroundColor="gray200" />
           </div>
         )}
       </div>
diff --git a/apps/client/src/shared/ui/loading/Spinner.tsx b/apps/client/src/shared/ui/loading/Spinner.tsx
index 57cb04ef..9968f7d5 100644
--- a/apps/client/src/shared/ui/loading/Spinner.tsx
+++ b/apps/client/src/shared/ui/loading/Spinner.tsx
@@ -1,28 +1,23 @@
+import { background, foreground, h, w } from '@/shared/utils';
+
 import SpinIcon from '@/shared/assets/spinner.svg?react';
 
 type SpinnerProps = {
-  width: number;
-  height: number;
-  foregroundColor: string;
-  backgroundColor: string;
+  width: keyof typeof w;
+  height: keyof typeof h;
+  foregroundColor: keyof typeof foreground;
+  backgroundColor: keyof typeof background;
 };
 
 /**
  * @description
  * 스피너 컴포넌트
- * width, height에 들어가는 값은 tailwind css에 정의된 값만 들어갈 수 있습니다.
- * @param {string} width
- * @param {string} height
- * @param {string} foregroundColor
- * @param {string} backgroundColor
- *
- * @returns
+ * width, height, foregroundColor, backgroundColor에 들어가는 값은 spinnerStyle.ts에 정의된 객체의 키값만 들어갈 수 있습니다.
  */
 export const Spinner = ({ width, height, foregroundColor, backgroundColor }: SpinnerProps) => {
-  const w = `w-${width}`;
-  const h = `h-${height}`;
-  const foreground = `fill-${foregroundColor}`;
-  const background = `text-${backgroundColor}`;
-
-  return <SpinIcon className={`inline ${h} ${w} animate-spin ${foreground} ${background}`} />;
+  return (
+    <SpinIcon
+      className={`inline ${w[width]} ${h[height]} animate-spin ${foreground[foregroundColor]} ${background[backgroundColor]}`}
+    />
+  );
 };
diff --git a/apps/client/src/shared/utils/category_icons.ts b/apps/client/src/shared/utils/categoryIcons.ts
similarity index 100%
rename from apps/client/src/shared/utils/category_icons.ts
rename to apps/client/src/shared/utils/categoryIcons.ts
diff --git a/apps/client/src/shared/utils/index.ts b/apps/client/src/shared/utils/index.ts
index a0dbf515..9732fd5b 100644
--- a/apps/client/src/shared/utils/index.ts
+++ b/apps/client/src/shared/utils/index.ts
@@ -1,3 +1,4 @@
-export { CATEGORY_ICONS } from './category_icons';
+export { CATEGORY_ICONS } from './categoryIcons';
 export { getUserId } from './userId';
 export { formatRelativeOrAbsoluteDate } from './dateFormat';
+export { w, h, foreground, background } from './spinnerStyle';
diff --git a/apps/client/src/shared/utils/spinnerStyle.ts b/apps/client/src/shared/utils/spinnerStyle.ts
new file mode 100644
index 00000000..938e454b
--- /dev/null
+++ b/apps/client/src/shared/utils/spinnerStyle.ts
@@ -0,0 +1,35 @@
+export const w = {
+  1: 'w-1',
+  2: 'w-2',
+  3: 'w-3',
+  4: 'w-4',
+  5: 'w-5',
+  6: 'w-6',
+  7: 'w-7',
+  8: 'w-8',
+  9: 'w-9',
+  10: 'w-10',
+};
+
+export const h = {
+  1: 'h-1',
+  2: 'h-2',
+  3: 'h-3',
+  4: 'h-4',
+  5: 'h-5',
+  6: 'h-6',
+  7: 'h-7',
+  8: 'h-8',
+  9: 'h-9',
+  10: 'h-10',
+};
+
+export const foreground = {
+  grayWhite: 'fill-gray-white',
+  gray200: 'fill-gray-200',
+  green500: 'fill-green-500',
+};
+
+export const background = {
+  gray200: 'text-gray-200',
+};
diff --git a/apps/client/src/widgets/home/WorkspaceModal.tsx b/apps/client/src/widgets/home/WorkspaceModal.tsx
index 9e2773ea..90d2c405 100644
--- a/apps/client/src/widgets/home/WorkspaceModal.tsx
+++ b/apps/client/src/widgets/home/WorkspaceModal.tsx
@@ -46,8 +46,8 @@ export const WorkspaceModal = () => {
                   <Spinner
                     width={4}
                     height={4}
-                    foregroundColor="gray-white"
-                    backgroundColor="gray-200"
+                    foregroundColor="grayWhite"
+                    backgroundColor="gray200"
                   />
                 ) : (
                   content.name