diff --git a/src/app/(main)/_components/footer/LinkIcon.tsx b/src/app/(main)/_components/footer/ChannelIcons.tsx
similarity index 61%
rename from src/app/(main)/_components/footer/LinkIcon.tsx
rename to src/app/(main)/_components/footer/ChannelIcons.tsx
index bc53bbaf..026ddaa0 100644
--- a/src/app/(main)/_components/footer/LinkIcon.tsx
+++ b/src/app/(main)/_components/footer/ChannelIcons.tsx
@@ -8,42 +8,42 @@ import {
 import { IconProps } from '@radix-ui/react-icons/dist/types'
 import Link from 'next/link'
 
-type LinkIconData = {
+type Channel = {
   id: number
+  name: string
   href: string
   icon: ComponentType<IconProps>
-  alt: string
 }
 
-export const LinkIcon = () => {
+export const ChannelIcons = () => {
   return (
-    <div className="absolute bottom-8 right-12 flex gap-4">
-      {linkIconData.map((linkIcon) => (
-        <Link href={linkIcon.href} key={linkIcon.id}>
-          <linkIcon.icon className="h-6 w-6" />
+    <div className="bottom-8 right-12 flex gap-4 sm:absolute">
+      {channels.map((channel) => (
+        <Link href={channel.href} key={channel.id}>
+          <channel.icon className="h-6 w-6" />
         </Link>
       ))}
     </div>
   )
 }
 
-const linkIconData: LinkIconData[] = [
+const channels: Channel[] = [
   {
     id: 0,
+    name: 'HAEDAL Email',
     href: 'mailto:knu.haedal@gmail.com',
     icon: EnvelopeClosedIcon,
-    alt: 'HAEDAL Email Link',
   },
   {
     id: 1,
+    name: 'HAEDAL GitHub',
     href: 'https://github.com/KNU-HAEDAL',
     icon: GitHubLogoIcon,
-    alt: 'HAEDAL Github Link',
   },
   {
     id: 2,
+    name: 'HAEDAL Instagram',
     href: 'https://www.instagram.com/knu.haedal/',
     icon: InstagramLogoIcon,
-    alt: 'HAEDAL Instagram Link',
   },
 ]
diff --git a/src/app/(main)/_components/footer/Footer.tsx b/src/app/(main)/_components/footer/Footer.tsx
index 8bb43bfb..0efa4de9 100644
--- a/src/app/(main)/_components/footer/Footer.tsx
+++ b/src/app/(main)/_components/footer/Footer.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
+import { ChannelIcons } from './ChannelIcons'
 import { FooterDetail } from './FooterDetail'
-import { LinkIcon } from './LinkIcon'
 
 export const Footer = () => {
   return (
@@ -21,8 +21,10 @@ export const Footer = () => {
         </p>
       </div>
       <FooterDetail />
-      <p className="text-xs">© 2024 해달. All rights reserved.</p>
-      <LinkIcon />
+      <p className="text-xs text-slate-500">
+        © 2024 해달. All rights reserved.
+      </p>
+      <ChannelIcons />
     </div>
   )
 }
diff --git a/src/app/(main)/_components/footer/FooterDetail.tsx b/src/app/(main)/_components/footer/FooterDetail.tsx
index 2e383a23..257ae9e9 100644
--- a/src/app/(main)/_components/footer/FooterDetail.tsx
+++ b/src/app/(main)/_components/footer/FooterDetail.tsx
@@ -6,11 +6,13 @@ type FooterDetailData = {
 
 export const FooterDetail = () => {
   return (
-    <div className="flex flex-col justify-start gap-6 text-sm sm:flex-col sm:gap-2">
+    <div className="flex flex-col justify-start gap-2 text-sm">
       {footerDetailData.map((detail) => (
         <div key={detail.id} className="flex flex-row gap-4">
-          <div className="font-semibold">{detail.label}</div>
-          <div>{detail.content}</div>
+          <span className="whitespace-nowrap break-keep font-semibold">
+            {detail.label}
+          </span>
+          <span className="break-keep">{detail.content}</span>
         </div>
       ))}
     </div>