diff --git a/packages/velog-server/src/graphql/resolvers/userResolvers.ts b/packages/velog-server/src/graphql/resolvers/userResolvers.ts
index df8a5575..3fc6458e 100644
--- a/packages/velog-server/src/graphql/resolvers/userResolvers.ts
+++ b/packages/velog-server/src/graphql/resolvers/userResolvers.ts
@@ -79,7 +79,6 @@ const userResolvers: Resolvers = {
     checkEmailExists: async (_, { input }) => {
       const userService = container.resolve(UserService)
       const user = await userService.findByEmail(input.email)
-      console.log('user', user)
       return !!user
     },
   },
diff --git a/packages/velog-server/src/services/UserService/index.ts b/packages/velog-server/src/services/UserService/index.ts
index 97bff4eb..80773c69 100644
--- a/packages/velog-server/src/services/UserService/index.ts
+++ b/packages/velog-server/src/services/UserService/index.ts
@@ -242,13 +242,13 @@ export class UserService implements Service {
     try {
       if (ENV.dockerEnv === 'development') {
         console.log(`Login URL: ${ENV.clientV3Host}/email-change?code=${code}`)
+      } else {
+        await this.mail.sendMail({
+          to: email,
+          from: 'verify@velog.io',
+          ...template,
+        })
       }
-
-      await this.mail.sendMail({
-        to: email,
-        from: 'verify@velog.io',
-        ...template,
-      })
     } catch (error) {
       console.error('change email error', error)
       throw error
diff --git a/packages/velog-server/src/template/changeEmailTemplate.ts b/packages/velog-server/src/template/changeEmailTemplate.ts
index 42272d1b..3a9fe938 100644
--- a/packages/velog-server/src/template/changeEmailTemplate.ts
+++ b/packages/velog-server/src/template/changeEmailTemplate.ts
@@ -9,9 +9,9 @@ export const changeEmailTemplate: ChangeEmailTemplateArgs = (username, email, co
   <a href="https://velog.io/">
     <img src="https://images.velog.io/email-logo.png" style="display: block; width: 128px; margin: 0 auto;"/>
   </a>
-  <div style="max-width: 100%; width: 400px; margin: 0 auto; padding: 1rem; text-align: justify; background: #f8f9fa; border: 1px solid #dee2e6; box-sizing: border-box; border-radius: 4px; color: #868e96; margin-top: 0.5rem; box-sizing: border-box;">
-    <b style="black">안녕하세요!</b>
-    ${username}의 이메일을 ${email}로 ${text}하는 것을 승인하겠습니까?
+  <div style="max-width: 100%; margin: 0 auto; padding: 1rem; text-align: justify; background: #f8f9fa; border: 1px solid #dee2e6; box-sizing: border-box; border-radius: 4px; color: #868e96; margin-top: 0.5rem; box-sizing: border-box;">
+    <div><b style="black">안녕하세요!</b></div>
+    <p style="word-wrap: break-word; word-break: break-all;">${username}의 이메일을 ${email}로 ${text}하는 것을 승인하겠습니까?</p>
   </div>
   <a href="https://github.com/$%7Bendpoint%7D/email-change?code=${code}" style="text-decoration: none; width: 400px; text-align:center; display:block; margin: 0 auto; margin-top: 1rem; background: #845ef7; padding-top: 1rem; color: white; font-size: 1.25rem; padding-bottom: 1rem; font-weight: 600; border-radius: 4px;">
     ${text}하기
@@ -25,6 +25,7 @@ export const changeEmailTemplate: ChangeEmailTemplateArgs = (username, email, co
   </div>
 </div>
   `
+
   return {
     subject,
     body,
diff --git a/packages/velog-web/src/app/notifications/page.tsx b/packages/velog-web/src/app/notifications/page.tsx
index 2f3efe44..0f537aff 100644
--- a/packages/velog-web/src/app/notifications/page.tsx
+++ b/packages/velog-web/src/app/notifications/page.tsx
@@ -1,14 +1,14 @@
+import RequireLogin from '@/components/RequireLogin'
 import NotificationList from '@/features/notification/components/NotificationList'
 import NotificationSelector from '@/features/notification/components/NotificationSelector'
 import NotificationTitle from '@/features/notification/components/NotificationTitle'
 import getCurrentUser from '@/prefetch/getCurrentUser'
-import { notFound } from 'next/navigation'
 
 export default async function NotificationPage() {
   const user = await getCurrentUser()
 
   if (!user) {
-    notFound()
+    return <RequireLogin />
   }
 
   return (
diff --git a/packages/velog-web/src/app/setting/page.tsx b/packages/velog-web/src/app/setting/page.tsx
index 68e006e3..5a8dd953 100644
--- a/packages/velog-web/src/app/setting/page.tsx
+++ b/packages/velog-web/src/app/setting/page.tsx
@@ -1,3 +1,4 @@
+import RequireLogin from '@/components/RequireLogin'
 import SettingEmailRow from '@/features/setting/components/SettingEmailRow'
 import SettingEmailRulesRow from '@/features/setting/components/SettingEmailRulesRow'
 import SettingSocialInfoRow from '@/features/setting/components/SettingSocialInfoRow'
@@ -13,7 +14,7 @@ export default async function SettingPage() {
   const user = await getCurrentUser()
 
   if (!user) {
-    notFound()
+    return <RequireLogin />
   }
 
   const velogConfig = await getVelogConfig({ username: user.username })
diff --git a/packages/velog-web/src/components/Error/ErrorScreenTemplate/ErrorScreenTemplate.module.css b/packages/velog-web/src/components/Error/ErrorScreenTemplate/ErrorScreenTemplate.module.css
index 6a791b5e..95178782 100644
--- a/packages/velog-web/src/components/Error/ErrorScreenTemplate/ErrorScreenTemplate.module.css
+++ b/packages/velog-web/src/components/Error/ErrorScreenTemplate/ErrorScreenTemplate.module.css
@@ -2,7 +2,6 @@
   display: flex;
   width: 100%;
   height: 100%;
-  min-height: 100svh;
   align-items: center;
   justify-content: center;
   flex-direction: column;
diff --git a/packages/velog-web/src/components/RequireLogin/RequireLogin.module.css b/packages/velog-web/src/components/RequireLogin/RequireLogin.module.css
new file mode 100644
index 00000000..70c0aeff
--- /dev/null
+++ b/packages/velog-web/src/components/RequireLogin/RequireLogin.module.css
@@ -0,0 +1,3 @@
+.block {
+  height: 70svh;
+}
diff --git a/packages/velog-web/src/components/RequireLogin/RequireLogin.test.tsx b/packages/velog-web/src/components/RequireLogin/RequireLogin.test.tsx
new file mode 100644
index 00000000..ec60200d
--- /dev/null
+++ b/packages/velog-web/src/components/RequireLogin/RequireLogin.test.tsx
@@ -0,0 +1,8 @@
+import RequireLogin from './RequireLogin'
+import { render } from '@testing-library/react'
+
+describe('RequireLogin', () => {
+  it('renders successfully', () => {
+    render(<RequireLogin />)
+  })
+})
diff --git a/packages/velog-web/src/components/RequireLogin/RequireLogin.tsx b/packages/velog-web/src/components/RequireLogin/RequireLogin.tsx
new file mode 100644
index 00000000..01e3a5fe
--- /dev/null
+++ b/packages/velog-web/src/components/RequireLogin/RequireLogin.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import styles from './RequireLogin.module.css'
+import { bindClassNames } from '@/lib/styles/bindClassNames'
+import ErrorScreenTemplate from '@/components/Error/ErrorScreenTemplate'
+import { UndrawLogin } from '@/assets/vectors/components'
+import { useModal } from '@/state/modal'
+import { useEffect } from 'react'
+import { useAuth } from '@/state/auth'
+import { usePathname, useRouter } from 'next/navigation'
+
+const cx = bindClassNames(styles)
+
+type Props = {
+  redirectTo?: string
+}
+
+function RequireLogin({ redirectTo }: Props) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { actions } = useModal()
+
+  const redirectToPath = redirectTo || pathname
+
+  const {
+    value: { currentUser },
+  } = useAuth()
+
+  const onButtonClick = () => {
+    actions.showModal('login', redirectToPath)
+  }
+
+  useEffect(() => {
+    if (!currentUser) return
+    router.push(redirectToPath)
+  }, [router, currentUser, redirectToPath])
+
+  return (
+    <div className={cx('block')}>
+      <ErrorScreenTemplate
+        Illustration={UndrawLogin}
+        message="로그인 후 이용해주세요."
+        onButtonClick={onButtonClick}
+        buttonText="로그인"
+      />
+    </div>
+  )
+}
+
+export default RequireLogin
diff --git a/packages/velog-web/src/components/RequireLogin/index.tsx b/packages/velog-web/src/components/RequireLogin/index.tsx
new file mode 100644
index 00000000..0dcf0412
--- /dev/null
+++ b/packages/velog-web/src/components/RequireLogin/index.tsx
@@ -0,0 +1 @@
+export { default } from './RequireLogin'