HowAboutQuestion · cod0216 · Jun 11, 2026 · Jun 10, 2026 · Jun 10, 2026 · Jun 10, 2026
diff --git a/index.html b/index.html
@@ -1,10 +1,23 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HowAboutQuestion</title>
+    <title>문제어때</title>
+    <meta name="description" content="내 안의 작은 학습방, 문제어때. 문제를 만들고 풀고 분석하세요." />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="문제어때" />
+    <meta property="og:description" content="내 안의 작은 학습방, 문제어때. 문제를 만들고 풀고 분석하세요." />
+    <meta property="og:image" content="https://d2ab13l3eziju4.cloudfront.net/frontend/thumbnail.png" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="문제어때" />
+    <meta name="twitter:description" content="내 안의 작은 학습방, 문제어때. 문제를 만들고 풀고 분석하세요." />
+    <meta name="twitter:image" content="https://d2ab13l3eziju4.cloudfront.net/frontend/thumbnail.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/src/assets/images/logo.webp b/src/assets/images/logo.webp
diff --git a/src/pages/help/Help.module.scss b/src/pages/help/Help.module.scss
@@ -65,3 +65,61 @@
   flex-direction: column;
   gap: 64px;
 }
+
+.floatingBtn {
+  display: none;
+  position: fixed;
+  bottom: 28px;
+  left: 24px;
+  z-index: 198;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background-color: $bg-white;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &:hover {
+    transform: scale(1.08);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+  }
+}
+
+@media (max-width: 768px) {
+  .main {
+    padding: 40px 24px 80px;
+  }
+
+  .heroTitle {
+    font-size: $font-2xl;
+  }
+
+  .heroDesc {
+    font-size: $font-md;
+  }
+
+  .categoryTitle {
+    font-size: $font-xl;
+    margin-bottom: 24px;
+  }
+
+  .sectionList {
+    gap: 48px;
+  }
+
+  .floatingBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/src/pages/help/Help.tsx b/src/pages/help/Help.tsx
@@ -13,6 +13,7 @@ import styles from '@/pages/help/Help.module.scss';
 const Help: React.FC = () => {
   const firstStepId = helpCategories[0].steps[0].id;
   const [activeStepId, setActiveStepId] = useState(firstStepId);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const sectionRefs = useRef<Map<string, HTMLElement>>(new Map());
 
   useEffect(() => {
@@ -50,7 +51,10 @@ const Help: React.FC = () => {
   const handleStepClick = (_categoryId: string, stepId: string) => {
     const el = sectionRefs.current.get(stepId);
     if (el) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const NAVBAR_HEIGHT = 60;
+      const PADDING = 24;
+      const top = el.getBoundingClientRect().top + window.scrollY - NAVBAR_HEIGHT - PADDING;
+      window.scrollTo({ top, behavior: 'smooth' });
     }
   };
 
@@ -69,6 +73,8 @@ const Help: React.FC = () => {
           categories={helpCategories}
           activeStepId={activeStepId}
           onStepClick={handleStepClick}
+          isOpen={isSidebarOpen}
+          onClose={() => setIsSidebarOpen(false)}
         />
         <div className={styles.mainWrapper}>
           <main className={styles.main}>
@@ -96,6 +102,15 @@ const Help: React.FC = () => {
           </main>
         </div>
       </div>
+
+      <button
+        className={styles.floatingBtn}
+        onClick={() => setIsSidebarOpen(prev => !prev)}
+        aria-label="목차 열기"
+      >
+        <img src="src/assets/images/logo.webp" alt="목차" />
+      </button>
+
       <Footer />
     </div>
   );

diff --git a/src/pages/help/components/HelpSection.tsx b/src/pages/help/components/HelpSection.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import styles from '@/pages/help/components/HelpSection.module.scss';
 import type { HelpStep } from '@/pages/help/types';
 

diff --git a/src/pages/help/components/HelpSidebar.module.scss b/src/pages/help/components/HelpSidebar.module.scss
@@ -65,3 +65,37 @@
     background-color: $blue-1;
   }
 }
+
+.overlay {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    z-index: 200;
+    height: calc(100vh - 60px);
+    width: 280px;
+    min-width: 280px;
+    background-color: $bg-white;
+    border-right: 1px solid $gray-1;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    display: block;
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+
+  .overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    top: 60px;
+    z-index: 199;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
diff --git a/src/pages/help/components/HelpSidebar.tsx b/src/pages/help/components/HelpSidebar.tsx
@@ -6,34 +6,53 @@ interface Props {
   categories: HelpCategory[];
   activeStepId: string;
   onStepClick: (categoryId: string, stepId: string) => void;
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
 /**
  *
  */
-const HelpSidebar: React.FC<Props> = ({ categories, activeStepId, onStepClick }) => {
+const HelpSidebar: React.FC<Props> = ({
+  categories,
+  activeStepId,
+  onStepClick,
+  isOpen,
+  onClose,
+}) => {
+  /**
+   *
+   */
+  const handleStepClick = (categoryId: string, stepId: string) => {
+    onStepClick(categoryId, stepId);
+    onClose?.();
+  };
+
   return (
-    <aside className={styles.sidebar}>
-      <nav className={styles.nav}>
-        {categories.map(category => (
-          <div key={category.id} className={styles.navSection}>
-            <p className={styles.navCategory}>{category.label}</p>
-            <ul className={styles.stepList}>
-              {category.steps.map(step => (
-                <li key={step.id}>
-                  <button
-                    className={`${styles.stepItem} ${activeStepId === step.id ? styles.active : ''}`}
-                    onClick={() => onStepClick(category.id, step.id)}
-                  >
-                    {step.title}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </nav>
-    </aside>
+    <>
+      {isOpen && <div className={styles.overlay} onClick={onClose} />}
+      <aside className={`${styles.sidebar} ${isOpen ? styles.open : ''}`}>
+        <nav className={styles.nav}>
+          {categories.map(category => (
+            <div key={category.id} className={styles.navSection}>
+              <p className={styles.navCategory}>{category.label}</p>
+              <ul className={styles.stepList}>
+                {category.steps.map(step => (
+                  <li key={step.id}>
+                    <button
+                      className={`${styles.stepItem} ${activeStepId === step.id ? styles.active : ''}`}
+                      onClick={() => handleStepClick(category.id, step.id)}
+                    >
+                      {step.title}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+      </aside>
+    </>
   );
 };
 

diff --git a/src/pages/landing/Landing.module.scss b/src/pages/landing/Landing.module.scss
@@ -324,6 +324,10 @@
 
   .hero {
     grid-template-columns: 1fr;
+
+    .heroText {
+      max-width: 100%;
+    }
   }
 
   .featuresCard {
@@ -340,15 +344,60 @@
     gap: 72px;
   }
 
+  .hero {
+    text-align: center;
+
+    .heroText {
+      max-width: 100%;
+
+      h2 {
+        font-size: $font-3xl;
+      }
+
+      .heroButtons {
+        justify-content: center;
+
+        > * {
+          font-size: $font-md;
+          padding: 8px 16px;
+        }
+      }
+    }
+
+    .heroImage {
+      max-width: 200px;
+      margin: 0 auto;
+    }
+  }
+
   .featuresCard {
     padding: 36px 20px 48px;
   }
 
+  .featuresTitle {
+    font-size: $font-2xl;
+  }
+
   .featuresTabs {
     gap: 12px;
   }
 
-  .featureDetailCard,
+  .featureDetailCard {
+    grid-template-columns: 1fr;
+
+    .featureDetailContent {
+      order: 2;
+    }
+
+    .featureDetailImage {
+      order: 1;
+    }
+  }
+
+  .featureDetailTitle {
+    font-size: $font-xl;
+  }
+
   .previewStats,
   .previewChartArea {
     grid-template-columns: 1fr;

diff --git a/src/pages/landing/Landing.tsx b/src/pages/landing/Landing.tsx
@@ -74,7 +74,7 @@ const Landing: React.FC = () => {
           className={`${styles.hero} ${visible.hero ? styles['animate-stagger'] : ''}`}
         >
           <div className={styles.heroText}>
-            <h1>내 손 안에 작은 학습방</h1>
+            <h1>내 안의 작은 학습방</h1>
             <h2>문제 어때</h2>
             <div className={styles.heroButtons}>
               <CustomButton

diff --git a/src/pages/welcome/Welcome.tsx b/src/pages/welcome/Welcome.tsx
@@ -73,15 +73,15 @@ const Welcome: React.FC = () => {
           className={`${styles.hero} ${visible.hero ? styles['animate-stagger'] : ''}`}
         >
           <div className={styles.heroText}>
-            <h1>내 손 안에 작은 학습방</h1>
+            <h1>내 안의 작은 학습방</h1>
             <h2>문제 어때</h2>
             <div className={styles.heroButtons}>
               <CustomButton text="문제풀기" variant="primary" size="medium" />
               <CustomButton text="학습하기" variant="secondary" size="medium" />
             </div>
           </div>
           <div className={styles.heroImage}>
-            <img src="src/assets/images/logo.png" alt="Hero" />
+            <img src="src/assets/images/logo.webp" alt="Hero" />
           </div>
         </section>