diff --git a/app/analyzers/clarity.tsx b/app/analyzers/clarity.tsx
new file mode 100644
index 00000000..1fba797b
--- /dev/null
+++ b/app/analyzers/clarity.tsx
@@ -0,0 +1,17 @@
+import Script from 'next/script';
+
+export const Clarity = () => {
+  if (process.env.NODE_ENV !== 'production') return null;
+
+  return (
+    <Script id="clarity" type="text/javascript">
+      {`
+          (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "o2k3nk4cvl");
+        `}
+    </Script>
+  );
+};
diff --git a/app/analyzers/index.ts b/app/analyzers/index.ts
new file mode 100644
index 00000000..5b96b769
--- /dev/null
+++ b/app/analyzers/index.ts
@@ -0,0 +1 @@
+export * from './clarity';
diff --git a/app/layout.tsx b/app/layout.tsx
index 5a564d0a..601841ff 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -9,6 +9,7 @@ import MetaTagImage from '@/public/images/meta-tag.png';
 import { css } from '@/styled-system/css';
 import { pretendard } from '@/styles/font';
 
+import { Clarity } from './analyzers';
 import ReactQueryProvider from './providers/ReactQueryProvider';
 
 export const metadata: Metadata = {
@@ -62,6 +63,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko" className={pretendard.className}>
+      <head>
+        <Clarity />
+      </head>
       <body className={rootStyle}>
         <ReactQueryProvider>
           <ReactQueryDevtools initialIsOpen={true} />
