From f71207aeb5e3f8b23ca8741396290801d738beb7 Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Wed, 10 Dec 2025 15:56:51 +0900
Subject: [PATCH 1/3] =?UTF-8?q?i18n=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dashboard/page.tsx                    |   72 +-
 src/app/editor/EditorCanvas.tsx               |   22 +-
 .../forms/FormCheckboxPropertiesPanel.tsx     |  162 +--
 src/app/editor/forms/FormControllerPanel.tsx  |   96 +-
 .../editor/forms/FormInputPropertiesPanel.tsx |  131 +-
 .../editor/forms/FormRadioPropertiesPanel.tsx |  125 +-
 .../forms/FormSelectPropertiesPanel.tsx       |  126 +-
 src/app/editor/page.tsx                       |  151 +-
 src/app/editor/panels/BlocksSidebar.tsx       |   80 +-
 .../editor/panels/ButtonPropertiesPanel.tsx   |  152 +-
 .../editor/panels/DividerPropertiesPanel.tsx  |   61 +-
 .../editor/panels/ImagePropertiesPanel.tsx    |   76 +-
 src/app/editor/panels/ListPropertiesPanel.tsx |   82 +-
 .../editor/panels/ProjectPropertiesPanel.tsx  |   79 +-
 src/app/editor/panels/PropertiesSidebar.tsx   |  615 +-------
 .../editor/panels/SectionPropertiesPanel.tsx  |  122 +-
 src/app/editor/panels/TextPropertiesPanel.tsx |   98 +-
 .../editor/panels/VideoPropertiesPanel.tsx    |  102 +-
 src/app/layout.tsx                            |   17 +-
 src/app/login/page.tsx                        |   30 +-
 src/app/preview/page.tsx                      |   14 +-
 src/app/projects/page.tsx                     |   92 +-
 src/app/projects/submissions/page.tsx         |   54 +-
 src/app/signup/page.tsx                       |   59 +-
 .../editor/components/ColorPickerField.tsx    |   13 +-
 .../editor/components/PublicPageRenderer.tsx  |   20 +-
 src/features/i18n/LocaleProvider.tsx          |   39 +
 src/features/i18n/LocaleSwitcher.tsx          |   30 +
 src/features/i18n/locale.ts                   |   22 +
 src/features/i18n/messages/auth.ts            |  120 ++
 src/features/i18n/messages/dashboard.ts       |  103 ++
 src/features/i18n/messages/editor.ts          |  153 ++
 .../i18n/messages/editorButtonPanel.ts        |  286 ++++
 src/features/i18n/messages/editorCanvas.ts    |   40 +
 .../i18n/messages/editorColorPickerField.ts   |   70 +
 .../messages/editorDividerPropertiesPanel.ts  |  122 ++
 .../i18n/messages/editorFormCheckboxPanel.ts  |  298 ++++
 .../messages/editorFormControllerPanel.ts     |  205 +++
 .../i18n/messages/editorFormInputPanel.ts     |  266 ++++
 .../i18n/messages/editorFormRadioPanel.ts     |  152 ++
 .../i18n/messages/editorFormSelectPanel.ts    |  226 +++
 .../i18n/messages/editorImagePanel.ts         |  148 ++
 src/features/i18n/messages/editorListPanel.ts |  160 +++
 .../messages/editorProjectPropertiesPanel.ts  |  170 +++
 .../i18n/messages/editorPropertiesSidebar.ts  | 1251 +++++++++++++++++
 .../i18n/messages/editorSectionPanel.ts       |  301 ++++
 .../i18n/messages/editorSidebar.broken.ts.bak |  Bin 0 -> 4835 bytes
 src/features/i18n/messages/editorSidebar.ts   |  128 ++
 src/features/i18n/messages/editorTemplates.ts |  291 ++++
 src/features/i18n/messages/editorTextPanel.ts |  160 +++
 .../i18n/messages/editorVideoPanel.ts         |  215 +++
 src/features/i18n/messages/preview.ts         |   32 +
 src/features/i18n/messages/projects.ts        |  122 ++
 .../i18n/messages/publicPageRenderer.ts       |   40 +
 src/features/i18n/messages/submissions.ts     |   70 +
 tests/api/export.spec.ts                      |   24 +-
 tests/e2e/auth.spec.ts                        |   16 +-
 tests/e2e/dashboard.spec.ts                   |   16 +-
 tests/e2e/editor.spec.ts                      |   64 +-
 tests/e2e/preview.spec.ts                     |   40 +-
 tests/e2e/projects.spec.ts                    |   18 +-
 tests/unit/AllProjectSubmissionsPage.spec.tsx |   22 +-
 tests/unit/BlocksSidebar.spec.tsx             |   81 +-
 tests/unit/ButtonPropertiesPanel.spec.tsx     |   54 +-
 tests/unit/ColorPickerField.spec.tsx          |    9 +-
 tests/unit/DashboardPage.spec.tsx             |   55 +-
 tests/unit/DividerPropertiesPanel.spec.tsx    |   18 +-
 tests/unit/EditorCanvasBackground.spec.tsx    |   62 +-
 tests/unit/EditorExportPreview.spec.tsx       |    6 +-
 tests/unit/EditorJsonExportImport.spec.tsx    |   16 +-
 tests/unit/EditorLayoutScroll.spec.tsx        |    2 +-
 tests/unit/EditorPageBackground.spec.tsx      |   14 +-
 tests/unit/EditorProjectSaveLoad.spec.tsx     |   54 +-
 tests/unit/FormControllerPanel.spec.tsx       |   40 +-
 tests/unit/FormFieldPropertiesPanels.spec.tsx |  152 +-
 tests/unit/ImagePropertiesPanel.spec.tsx      |   22 +-
 tests/unit/ListPropertiesPanel.spec.tsx       |   32 +-
 tests/unit/LocaleProvider.spec.tsx            |   56 +
 tests/unit/LocaleSwitcher.spec.tsx            |   54 +
 tests/unit/LoginPage.spec.tsx                 |   18 +-
 tests/unit/PreviewExport.spec.tsx             |    6 +-
 tests/unit/ProjectPropertiesPanel.spec.tsx    |   38 +-
 tests/unit/ProjectsPage.spec.tsx              |   82 +-
 tests/unit/PropertiesSidebar.spec.tsx         |   14 +-
 ...licPageRendererFormSubmitMessages.spec.tsx |   50 +-
 .../unit/PublicPageRendererTemplates.spec.tsx |   18 +-
 tests/unit/SectionLayoutPresets.spec.tsx      |    2 +-
 tests/unit/SectionPropertiesPanel.spec.tsx    |   52 +-
 tests/unit/SignupPage.spec.tsx                |   67 +-
 .../TextListFormBackgroundControls.spec.tsx   |    4 +-
 tests/unit/TextPropertiesPanel.spec.tsx       |    8 +-
 tests/unit/VideoPropertiesPanel.spec.tsx      |   32 +-
 tests/unit/dashboardMessages.spec.ts          |   40 +
 tests/unit/editorCanvasMessages.spec.ts       |   31 +
 tests/unit/editorMessages.spec.ts             |   39 +
 tests/unit/localeHelpers.spec.ts              |   29 +
 tests/unit/projectsMessages.spec.ts           |   35 +
 tests/unit/submissionsMessages.spec.ts        |   33 +
 uploads/0d82dd3a-1874-41d9-b959-0f11e45eaf1d  |    1 +
 uploads/6b0d957a-9e6d-414d-809e-0087ddb80438  |    1 +
 uploads/73719364-214f-48db-85a7-82ae85c7aa04  |    1 +
 uploads/aa796672-4c41-4acc-831d-1e51b3055466  |    1 +
 uploads/ac619ab0-6e38-4d81-8dc1-64c37c1969ad  |    1 +
 uploads/b9e53c73-8533-454b-8256-00d37582fd99  |    1 +
 uploads/d9c0c842-9ae1-4ff0-ab46-f55633e18aea  |    1 +
 uploads/dc7f0267-4caa-4559-b12e-b6aca44c1faa  |    1 +
 uploads/e90e54f3-4d76-4075-8d51-af8a2cb26ace  |    1 +
 uploads/test-image-1765335114803              |    1 +
 uploads/test-image-1765335614192              |    1 +
 uploads/test-image-1765335859857              |    1 +
 uploads/test-image-1765335931937              |    1 +
 uploads/test-section-bg-1765335114818         |    1 +
 uploads/test-section-bg-1765335614314         |    1 +
 uploads/test-section-bg-1765335859869         |    1 +
 uploads/test-section-bg-1765335931955         |    1 +
 uploads/test-section-bg-video-1765335114930   |    1 +
 uploads/test-section-bg-video-1765335614345   |    1 +
 uploads/test-section-bg-video-1765335860069   |    1 +
 uploads/test-section-bg-video-1765335931973   |    1 +
 uploads/test-video-1765335114884              |    1 +
 uploads/test-video-1765335614339              |    1 +
 uploads/test-video-1765335860061              |    1 +
 uploads/test-video-1765335931969              |    1 +
 uploads/test-video-poster-1765335114809       |    1 +
 uploads/test-video-poster-1765335614201       |    1 +
 uploads/test-video-poster-1765335859862       |    1 +
 uploads/test-video-poster-1765335931948       |    1 +
 127 files changed, 7346 insertions(+), 2079 deletions(-)
 create mode 100644 src/features/i18n/LocaleProvider.tsx
 create mode 100644 src/features/i18n/LocaleSwitcher.tsx
 create mode 100644 src/features/i18n/locale.ts
 create mode 100644 src/features/i18n/messages/auth.ts
 create mode 100644 src/features/i18n/messages/dashboard.ts
 create mode 100644 src/features/i18n/messages/editor.ts
 create mode 100644 src/features/i18n/messages/editorButtonPanel.ts
 create mode 100644 src/features/i18n/messages/editorCanvas.ts
 create mode 100644 src/features/i18n/messages/editorColorPickerField.ts
 create mode 100644 src/features/i18n/messages/editorDividerPropertiesPanel.ts
 create mode 100644 src/features/i18n/messages/editorFormCheckboxPanel.ts
 create mode 100644 src/features/i18n/messages/editorFormControllerPanel.ts
 create mode 100644 src/features/i18n/messages/editorFormInputPanel.ts
 create mode 100644 src/features/i18n/messages/editorFormRadioPanel.ts
 create mode 100644 src/features/i18n/messages/editorFormSelectPanel.ts
 create mode 100644 src/features/i18n/messages/editorImagePanel.ts
 create mode 100644 src/features/i18n/messages/editorListPanel.ts
 create mode 100644 src/features/i18n/messages/editorProjectPropertiesPanel.ts
 create mode 100644 src/features/i18n/messages/editorPropertiesSidebar.ts
 create mode 100644 src/features/i18n/messages/editorSectionPanel.ts
 create mode 100644 src/features/i18n/messages/editorSidebar.broken.ts.bak
 create mode 100644 src/features/i18n/messages/editorSidebar.ts
 create mode 100644 src/features/i18n/messages/editorTemplates.ts
 create mode 100644 src/features/i18n/messages/editorTextPanel.ts
 create mode 100644 src/features/i18n/messages/editorVideoPanel.ts
 create mode 100644 src/features/i18n/messages/preview.ts
 create mode 100644 src/features/i18n/messages/projects.ts
 create mode 100644 src/features/i18n/messages/publicPageRenderer.ts
 create mode 100644 src/features/i18n/messages/submissions.ts
 create mode 100644 tests/unit/LocaleProvider.spec.tsx
 create mode 100644 tests/unit/LocaleSwitcher.spec.tsx
 create mode 100644 tests/unit/dashboardMessages.spec.ts
 create mode 100644 tests/unit/editorCanvasMessages.spec.ts
 create mode 100644 tests/unit/editorMessages.spec.ts
 create mode 100644 tests/unit/localeHelpers.spec.ts
 create mode 100644 tests/unit/projectsMessages.spec.ts
 create mode 100644 tests/unit/submissionsMessages.spec.ts
 create mode 100644 uploads/0d82dd3a-1874-41d9-b959-0f11e45eaf1d
 create mode 100644 uploads/6b0d957a-9e6d-414d-809e-0087ddb80438
 create mode 100644 uploads/73719364-214f-48db-85a7-82ae85c7aa04
 create mode 100644 uploads/aa796672-4c41-4acc-831d-1e51b3055466
 create mode 100644 uploads/ac619ab0-6e38-4d81-8dc1-64c37c1969ad
 create mode 100644 uploads/b9e53c73-8533-454b-8256-00d37582fd99
 create mode 100644 uploads/d9c0c842-9ae1-4ff0-ab46-f55633e18aea
 create mode 100644 uploads/dc7f0267-4caa-4559-b12e-b6aca44c1faa
 create mode 100644 uploads/e90e54f3-4d76-4075-8d51-af8a2cb26ace
 create mode 100644 uploads/test-image-1765335114803
 create mode 100644 uploads/test-image-1765335614192
 create mode 100644 uploads/test-image-1765335859857
 create mode 100644 uploads/test-image-1765335931937
 create mode 100644 uploads/test-section-bg-1765335114818
 create mode 100644 uploads/test-section-bg-1765335614314
 create mode 100644 uploads/test-section-bg-1765335859869
 create mode 100644 uploads/test-section-bg-1765335931955
 create mode 100644 uploads/test-section-bg-video-1765335114930
 create mode 100644 uploads/test-section-bg-video-1765335614345
 create mode 100644 uploads/test-section-bg-video-1765335860069
 create mode 100644 uploads/test-section-bg-video-1765335931973
 create mode 100644 uploads/test-video-1765335114884
 create mode 100644 uploads/test-video-1765335614339
 create mode 100644 uploads/test-video-1765335860061
 create mode 100644 uploads/test-video-1765335931969
 create mode 100644 uploads/test-video-poster-1765335114809
 create mode 100644 uploads/test-video-poster-1765335614201
 create mode 100644 uploads/test-video-poster-1765335859862
 create mode 100644 uploads/test-video-poster-1765335931948

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 482f5c0..8f44c06 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
 
 // 대시보드 페이지 (/dashboard)
 // - /api/dashboard/overview 에서 요약/프로젝트별 통계를 가져와 카드 형태로 렌더링한다.
@@ -35,6 +37,8 @@ type PageStatus = "idle" | "loading" | "error";
 
 export default function DashboardPage() {
   const router = useRouter();
+  const locale = useAppLocale();
+  const t = getDashboardMessages(locale);
 
   const [summary, setSummary] = useState<SummaryStats | null>(null);
   const [projects, setProjects] = useState<ProjectStatsItem[]>([]);
@@ -59,13 +63,13 @@ export default function DashboardPage() {
 
           if (res.status === 401) {
             setStatus("error");
-            setErrorMessage("대시보드를 보려면 로그인이 필요합니다. 다시 로그인해 주세요.");
+            setErrorMessage(t.errorUnauthorized);
             router.push("/login");
             return;
           }
 
           setStatus("error");
-          setErrorMessage("대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+          setErrorMessage(t.errorGeneric);
           return;
         }
 
@@ -87,9 +91,7 @@ export default function DashboardPage() {
       } catch {
         if (!cancelled) {
           setStatus("error");
-          setErrorMessage(
-            "대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
-          );
+          setErrorMessage(t.errorGeneric);
         }
       }
     };
@@ -141,8 +143,8 @@ export default function DashboardPage() {
     <main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
       <header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">대시보드</h1>
-          <p className="text-sm text-slate-500 mt-1 dark:text-slate-400">프로젝트와 폼 제출 현황을 한눈에 확인할 수 있는 요약 화면입니다.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{t.title}</h1>
+          <p className="text-sm text-slate-500 mt-1 dark:text-slate-400">{t.description}</p>
         </div>
         <div className="flex items-center gap-3 text-sm">
           <nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
@@ -152,21 +154,21 @@ export default function DashboardPage() {
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-sky-600 text-white shadow-sm hover:bg-sky-700"
             >
               <LayoutDashboard className="w-4 h-4" aria-hidden="true" />
-              <span>대시보드</span>
+              <span>{t.navDashboard}</span>
             </Link>
             <Link
               href="/projects"
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
             >
               <FolderKanban className="w-4 h-4" aria-hidden="true" />
-              <span>프로젝트 목록</span>
+              <span>{t.navProjects}</span>
             </Link>
             <Link
               href="/projects/submissions"
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
             >
               <ListChecks className="w-4 h-4" aria-hidden="true" />
-              <span>전체 제출 내역</span>
+              <span>{t.navSubmissions}</span>
             </Link>
           </nav>
           <button
@@ -175,7 +177,7 @@ export default function DashboardPage() {
             onClick={handleToggleTheme}
           >
             <SunMoon className="w-4 h-4" aria-hidden="true" />
-            <span>테마 전환</span>
+            <span>{t.themeToggleLabel}</span>
           </button>
           <div className="relative">
             <button
@@ -185,7 +187,7 @@ export default function DashboardPage() {
                 setIsMenuOpen((prev) => !prev);
               }}
             >
-              메뉴
+              {t.menuLabel}
             </button>
             {isMenuOpen && (
               <div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
@@ -197,7 +199,7 @@ export default function DashboardPage() {
                     void handleLogout();
                   }}
                 >
-                  로그아웃
+                  {t.logoutLabel}
                 </button>
               </div>
             )}
@@ -211,7 +213,7 @@ export default function DashboardPage() {
         )}
 
         {status === "loading" && (
-          <p className="text-xs text-slate-400">대시보드 데이터를 불러오는 중입니다...</p>
+          <p className="text-xs text-slate-400">{t.loadingText}</p>
         )}
 
         {/* 상단 요약 위젯 영역 */}
@@ -220,7 +222,9 @@ export default function DashboardPage() {
             data-testid="dashboard-summary-total-projects"
             className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
           >
-            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">프로젝트 수</span>
+            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
+              {t.summaryTotalProjectsLabel}
+            </span>
             <span className="text-2xl font-bold tracking-tight">{safeSummary.totalProjects}</span>
           </div>
 
@@ -228,7 +232,9 @@ export default function DashboardPage() {
             data-testid="dashboard-summary-total-submissions"
             className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
           >
-            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">전체 폼 제출 수</span>
+            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
+              {t.summaryTotalSubmissionsLabel}
+            </span>
             <span className="text-2xl font-bold tracking-tight">{safeSummary.totalSubmissions}</span>
           </div>
 
@@ -236,7 +242,9 @@ export default function DashboardPage() {
             data-testid="dashboard-summary-today-submissions"
             className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
           >
-            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">오늘 제출 수</span>
+            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
+              {t.summaryTodaySubmissionsLabel}
+            </span>
             <span className="text-2xl font-bold tracking-tight">{safeSummary.todaySubmissions}</span>
           </div>
 
@@ -244,7 +252,9 @@ export default function DashboardPage() {
             data-testid="dashboard-summary-last7days-submissions"
             className="rounded-xl border border-slate-200 bg-white/80 px-4 py-3 flex flex-col gap-1 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
           >
-            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">최근 7일 제출 수</span>
+            <span className="text-[11px] font-medium text-slate-500 dark:text-slate-400">
+              {t.summaryLast7DaysSubmissionsLabel}
+            </span>
             <span className="text-2xl font-bold tracking-tight">{safeSummary.last7DaysSubmissions}</span>
           </div>
         </div>
@@ -255,12 +265,12 @@ export default function DashboardPage() {
           className="mt-2 rounded-xl border border-slate-200 bg-white/80 px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900/70"
         >
           <div className="flex items-baseline justify-between mb-2">
-            <h2 className="text-sm font-semibold text-slate-800 dark:text-slate-200">최근 제출 추이 (일별)</h2>
-            <span className="text-[10px] text-slate-500 dark:text-slate-500">최근 활동이 있는 날짜만 표시됩니다.</span>
+            <h2 className="text-sm font-semibold text-slate-800 dark:text-slate-200">{t.chartTitle}</h2>
+            <span className="text-[10px] text-slate-500 dark:text-slate-500">{t.chartSubtitle}</span>
           </div>
 
           {dailySubmissions.length === 0 ? (
-            <p className="text-[11px] text-slate-500 dark:text-slate-400">아직 일별 제출 내역이 없습니다.</p>
+            <p className="text-[11px] text-slate-500 dark:text-slate-400">{t.chartEmptyLabel}</p>
           ) : (
             <div className="flex items-end gap-2 text-[10px]">
               {dailySubmissions.map((item) => (
@@ -283,10 +293,12 @@ export default function DashboardPage() {
 
         {/* 프로젝트 카드 리스트 영역 */}
         <div className="mt-2">
-          <h2 className="text-base font-semibold mb-2 text-slate-800 dark:text-slate-100">프로젝트별 제출 현황</h2>
+          <h2 className="text-base font-semibold mb-2 text-slate-800 dark:text-slate-100">
+            {t.sectionProjectsTitle}
+          </h2>
 
           {projects.length === 0 && status === "idle" && !errorMessage && (
-            <p className="text-xs text-slate-500 dark:text-slate-400">아직 생성된 프로젝트가 없거나 제출 내역이 없습니다.</p>
+            <p className="text-xs text-slate-500 dark:text-slate-400">{t.sectionProjectsEmpty}</p>
           )}
 
           {projects.length > 0 && (
@@ -294,7 +306,7 @@ export default function DashboardPage() {
               {projects.map((project) => {
                 const lastSubmitted = project.lastSubmissionAt
                   ? new Date(project.lastSubmissionAt).toLocaleString()
-                  : "제출 내역 없음";
+                  : t.projectLatestSubmissionEmpty;
 
                 return (
                   <article
@@ -314,9 +326,13 @@ export default function DashboardPage() {
 
                     <div className="mt-1 flex items-center justify-between text-[11px] text-slate-700 dark:text-slate-300">
                       <span>
-                        총 제출 <span className="font-semibold">{project.totalSubmissions}</span>건
+                        {t.projectTotalSubmissionsPrefix}
+                        <span className="font-semibold">{project.totalSubmissions}</span>
+                        {t.projectTotalSubmissionsSuffix}
+                      </span>
+                      <span className="text-slate-500 dark:text-slate-400">
+                        {t.projectLatestSubmissionPrefix} {lastSubmitted}
                       </span>
-                      <span className="text-slate-500 dark:text-slate-400">최근 제출: {lastSubmitted}</span>
                     </div>
 
                     <div className="mt-2 flex items-center gap-2 text-[11px]">
@@ -324,13 +340,13 @@ export default function DashboardPage() {
                         href={`/projects/${encodeURIComponent(project.slug)}/submissions`}
                         className="text-emerald-700 hover:text-emerald-900 underline-offset-2 hover:underline dark:text-emerald-300 dark:hover:text-emerald-100"
                       >
-                        폼 제출 내역 보기
+                        {t.projectViewSubmissionsLink}
                       </Link>
                       <Link
                         href={`/p/${encodeURIComponent(project.slug)}`}
                         className="text-sky-700 hover:text-sky-900 underline-offset-2 hover:underline dark:text-sky-300 dark:hover:text-sky-200"
                       >
-                        퍼블릭 페이지 열기
+                        {t.projectOpenPublicPageLink}
                       </Link>
                     </div>
                   </article>
diff --git a/src/app/editor/EditorCanvas.tsx b/src/app/editor/EditorCanvas.tsx
index 01e106a..6523d59 100644
--- a/src/app/editor/EditorCanvas.tsx
+++ b/src/app/editor/EditorCanvas.tsx
@@ -11,6 +11,8 @@ import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { rectIntersection } from "@dnd-kit/core";
 
 import type { Block, ButtonBlockProps, ImageBlockProps, ProjectConfig, TextBlockProps } from "@/features/editor/state/editorStore";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorCanvasMessages } from "@/features/i18n/messages/editorCanvas";
 
 interface EditorCanvasProps {
   blocks: Block[];
@@ -42,6 +44,9 @@ export function EditorCanvas(props: EditorCanvasProps) {
     projectConfig,
   } = props;
 
+  const locale = useAppLocale();
+  const m = getEditorCanvasMessages(locale);
+
   const canvasOuterStyle: CSSProperties = {};
   const canvasInnerStyle: CSSProperties = {};
   const preset = projectConfig.canvasPreset ?? "full";
@@ -86,7 +91,7 @@ export function EditorCanvas(props: EditorCanvasProps) {
       >
         {blocks.length === 0 ? (
           <div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
-            왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요.
+            {m.emptyStateHint}
           </div>
         ) : (
           <DndContext
@@ -121,6 +126,9 @@ interface DragPreviewProps {
 export function EditorCanvasDragPreview({ block }: DragPreviewProps) {
   if (!block) return null;
 
+  const locale = useAppLocale();
+  const m = getEditorCanvasMessages(locale);
+
   return (
     <div className="pointer-events-none rounded border border-sky-500 bg-white px-3 py-2 text-xs text-slate-900 shadow-lg opacity-90 min-w-[160px] max-w-[260px] dark:bg-slate-900 dark:text-slate-100">
       <div className="text-[10px] uppercase tracking-wide text-sky-300 mb-1">
@@ -138,16 +146,16 @@ export function EditorCanvasDragPreview({ block }: DragPreviewProps) {
       </div>
       <div className="truncate">
         {block.type === "text"
-          ? (block.props as TextBlockProps).text || "텍스트 블록"
+          ? (block.props as TextBlockProps).text || m.previewFallbackTextBlock
           : block.type === "button"
-          ? (block.props as ButtonBlockProps).label || "버튼 블록"
+          ? (block.props as ButtonBlockProps).label || m.previewFallbackButtonBlock
           : block.type === "image"
-          ? (block.props as ImageBlockProps).alt || "이미지 블록"
+          ? (block.props as ImageBlockProps).alt || m.previewFallbackImageBlock
           : block.type === "list"
-          ? "리스트 블록"
+          ? m.previewFallbackListBlock
           : block.type === "divider"
-          ? "구분선 블록"
-          : "섹션 블록"}
+          ? m.previewFallbackDividerBlock
+          : m.previewFallbackSectionBlock}
       </div>
     </div>
   );
diff --git a/src/app/editor/forms/FormCheckboxPropertiesPanel.tsx b/src/app/editor/forms/FormCheckboxPropertiesPanel.tsx
index 4196a7e..05f163d 100644
--- a/src/app/editor/forms/FormCheckboxPropertiesPanel.tsx
+++ b/src/app/editor/forms/FormCheckboxPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { Block, FormCheckboxBlockProps } from "@/features/editor/state/editorStore";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorFormCheckboxPanelMessages } from "@/features/i18n/messages/editorFormCheckboxPanel";
 
 interface FormCheckboxPropertiesPanelProps {
   block: Block;
@@ -11,6 +13,8 @@ interface FormCheckboxPropertiesPanelProps {
 }
 
 export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBlock }: FormCheckboxPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorFormCheckboxPanelMessages(locale);
   if (!selectedBlockId || block.id !== selectedBlockId) return null;
 
   const checkboxProps = block.props as FormCheckboxBlockProps;
@@ -18,10 +22,10 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
 
   return (
     <div className="space-y-3 text-xs">
-      <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">체크박스 필드</h3>
+      <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">그룹 타이틀 타입</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.groupTitleTypeLabel}</span>
         <select
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={checkboxProps.groupLabelMode ?? "text"}
@@ -31,13 +35,13 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
             } as any)
           }
         >
-          <option value="text">텍스트</option>
-          <option value="image">이미지</option>
+          <option value="text">{m.groupTitleTypeOptionText}</option>
+          <option value="image">{m.groupTitleTypeOptionImage}</option>
         </select>
       </label>
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">그룹 타이틀 표시 방식</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.groupTitleDisplayLabel}</span>
         <select
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={groupLabelDisplay}
@@ -47,14 +51,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
             } as any)
           }
         >
-          <option value="visible">표시 (기본)</option>
-          <option value="hidden">숨김</option>
+          <option value="visible">{m.groupTitleDisplayOptionVisible}</option>
+          <option value="hidden">{m.groupTitleDisplayOptionHidden}</option>
         </select>
       </label>
 
       {groupLabelDisplay === "visible" && (
         <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
-          <span>레이아웃</span>
+          <span>{m.layoutLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             value={checkboxProps.labelLayout ?? "stacked"}
@@ -64,14 +68,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
               } as any)
             }
           >
-            <option value="stacked">세로 (기본)</option>
-            <option value="inline">가로 (인라인)</option>
+            <option value="stacked">{m.layoutOptionStacked}</option>
+            <option value="inline">{m.layoutOptionInline}</option>
           </select>
         </label>
       )}
 
       <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
-        <span>옵션 레이아웃</span>
+        <span>{m.optionLayoutLabel}</span>
         <select
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={checkboxProps.optionLayout ?? "stacked"}
@@ -81,14 +85,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
             } as any)
           }
         >
-          <option value="stacked">세로 (기본)</option>
-          <option value="inline">가로 (인라인)</option>
+          <option value="stacked">{m.layoutOptionStacked}</option>
+          <option value="inline">{m.layoutOptionInline}</option>
         </select>
       </label>
 
       {groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && (
         <NumericPropertyControl
-          label="라벨/필드 간격 (px)"
+          label={m.labelGapLabel}
           unitLabel="(px)"
           value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8}
           min={0}
@@ -109,7 +113,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
       )}
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">그룹 타이틀</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.groupTitleLabel}</span>
         <input
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={checkboxProps.groupLabel ?? ""}
@@ -131,7 +135,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
         return (
           <div className="space-y-1">
             <label className="flex flex-col gap-1">
-              <span className="text-slate-400">그룹 타이틀 이미지 소스</span>
+              <span className="text-slate-400">{m.groupTitleImageSourceLabel}</span>
               <select
                 className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                 value={source}
@@ -141,14 +145,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
                   } as any)
                 }
               >
-                <option value="url">URL</option>
-                <option value="upload">파일 업로드</option>
+                <option value="url">{m.groupTitleImageSourceOptionUrl}</option>
+                <option value="upload">{m.groupTitleImageSourceOptionUpload}</option>
               </select>
             </label>
 
             {source === "url" && (
               <label className="flex flex-col gap-1">
-                <span className="text-slate-400">그룹 타이틀 이미지 URL</span>
+                <span className="text-slate-400">{m.groupTitleImageUrlLabel}</span>
                 <input
                   className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                   value={checkboxProps.groupLabelImageUrl ?? ""}
@@ -163,12 +167,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
 
             {source === "upload" && (
               <label className="flex flex-col gap-1">
-                <span className="text-slate-400">그룹 타이틀 이미지 파일 업로드</span>
+                <span className="text-slate-400">{m.groupTitleImageUploadLabel}</span>
                 <input
                   type="file"
                   accept="image/*"
                   className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
-                  aria-label="그룹 타이틀 이미지 파일 업로드"
+                  aria-label={m.groupTitleImageUploadAria}
                   onChange={async (event) => {
                     const file = event.target.files?.[0];
                     if (!file) return;
@@ -208,7 +212,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
       })()}
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">전송 키</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.submitKeyLabel}</span>
         <input
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={checkboxProps.formFieldName ?? ""}
@@ -222,7 +226,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
 
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <span className="text-slate-500 dark:text-slate-400">옵션</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.optionsLabel}</span>
           <button
             type="button"
             className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
@@ -239,12 +243,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
               } as any);
             }}
           >
-            옵션 추가
+            {m.addOptionButtonLabel}
           </button>
         </div>
         <div className="space-y-2">
           <label className="flex flex-col gap-1">
-            <span className="text-slate-500 dark:text-slate-400">옵션 이미지 소스</span>
+            <span className="text-slate-500 dark:text-slate-400">{m.optionImageSourceLabel}</span>
             <select
               className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
               value={(() => {
@@ -259,8 +263,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
                 } as any)
               }
             >
-              <option value="url">URL</option>
-              <option value="upload">파일 업로드</option>
+              <option value="url">{m.optionImageSourceOptionUrl}</option>
+              <option value="upload">{m.optionImageSourceOptionUpload}</option>
             </select>
           </label>
 
@@ -269,7 +273,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
               <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
                 <input
                   className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                  placeholder="라벨"
+                  placeholder={m.optionLabelPlaceholder}
                   value={opt.label ?? ""}
                   onChange={(e) => {
                     const next = [...(((checkboxProps as any).options ?? []) as any[])];
@@ -284,7 +288,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
                 />
                 <input
                   className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                  placeholder="값(value)"
+                  placeholder={m.optionValuePlaceholder}
                   value={opt.value ?? ""}
                   onChange={(e) => {
                     const next = [...(((checkboxProps as any).options ?? []) as any[])];
@@ -321,7 +325,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
                       {source === "url" && (
                         <input
                           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                          placeholder="옵션 이미지 URL (선택)"
+                          placeholder={m.optionImageUrlPlaceholder}
                           value={opt.labelImageUrl ?? ""}
                           onChange={(e) => {
                             const next = [...(((checkboxProps as any).options ?? []) as any[])];
@@ -337,12 +341,12 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
                       )}
                       {source === "upload" && (
                         <label className="flex flex-col gap-1">
-                          <span className="text-slate-500 dark:text-slate-400">옵션 이미지 파일 업로드</span>
+                          <span className="text-slate-500 dark:text-slate-400">{m.optionImageUploadLabel}</span>
                           <input
                             type="file"
                             accept="image/*"
                             className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
-                            aria-label="옵션 이미지 파일 업로드"
+                            aria-label={m.optionImageUploadAria}
                             onChange={async (event) => {
                               const file = event.target.files?.[0];
                               if (!file) return;
@@ -393,15 +397,15 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
       </div>
 
       <label className="inline-flex items-center gap-2">
-        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+        <span className="text-slate-500">{m.requiredNoticeText}</span>
       </label>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
         {/* px 기반 체크박스 타이포 입력값을 노출하여 em 스케일 변환을 위한 근거를 남긴다 */}
         <NumericPropertyControl
-          label="체크박스 텍스트 크기 (px)"
-          unitLabel="(px)"
+          label={m.textSizeLabel}
+          unitLabel={m.textSizeUnitLabel}
           value={(() => {
             const raw = checkboxProps.fontSizeCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -418,16 +422,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
             { id: "lg", label: "L", value: 18 },
             { id: "xl", label: "XL", value: 20 },
           ]}
-          onChangeValue={(v) => {
+          onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
               fontSizeCustom: `${v}px`,
-            } as any);
-          }}
+            } as any)
+          }
         />
         {/* 줄간격 px 입력값을 노출해 preview em 변환과 TDD 케이스를 연동한다 */}
         <NumericPropertyControl
-          label="체크박스 줄간격 (px)"
-          unitLabel="(px)"
+          label={m.lineHeightLabel}
+          unitLabel={m.lineHeightUnitLabel}
           value={(() => {
             const raw = checkboxProps.lineHeightCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -442,16 +446,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
             { id: "normal", label: "보통", value: 24 },
             { id: "loose", label: "루즈", value: 32 },
           ]}
-          onChangeValue={(v) => {
+          onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
               lineHeightCustom: `${v}px`,
-            } as any);
-          }}
+            } as any)
+          }
         />
         {/* 자간 px 입력을 통한 폼 체크박스 미세 조정값을 노출 */}
         <NumericPropertyControl
-          label="체크박스 자간 (px)"
-          unitLabel="(px)"
+          label={m.letterSpacingLabel}
+          unitLabel={m.letterSpacingUnitLabel}
           value={(() => {
             const raw = checkboxProps.letterSpacingCustom ?? "";
             const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -466,14 +470,14 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
             { id: "normal", label: "보통", value: 0 },
             { id: "wide", label: "넓게", value: 2 },
           ]}
-          onChangeValue={(v) => {
+          onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
               letterSpacingCustom: `${v}px`,
-            } as any);
-          }}
+            } as any)
+          }
         />
         <label className="flex flex-col gap-1 text-[11px] text-slate-400">
-          <span>필드 너비</span>
+          <span>{m.widthModeLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             value={checkboxProps.widthMode ?? "full"}
@@ -483,15 +487,15 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
               } as any)
             }
           >
-            <option value="auto">자동</option>
-            <option value="full">전체 폭</option>
-            <option value="fixed">고정 값</option>
+            <option value="auto">{m.widthModeOptionAuto}</option>
+            <option value="full">{m.widthModeOptionFull}</option>
+            <option value="fixed">{m.widthModeOptionFixed}</option>
           </select>
         </label>
         {(checkboxProps.widthMode ?? "full") === "fixed" && (
           <NumericPropertyControl
-            label="필드 고정 너비"
-            unitLabel="(px)"
+            label={m.fixedWidthLabel}
+            unitLabel={m.fixedWidthUnitLabel}
             value={checkboxProps.widthPx ?? 240}
             min={80}
             max={800}
@@ -501,16 +505,16 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
               { id: "md", label: "보통", value: 280 },
               { id: "lg", label: "넓게", value: 360 },
             ]}
-            onChangeValue={(v) => {
+            onChangeValue={(v) =>
               updateBlock(selectedBlockId, {
                 widthPx: v,
-              } as any);
-            }}
+              } as any)
+            }
           />
         )}
         <NumericPropertyControl
-          label="체크박스 가로 패딩 (px)"
-          unitLabel="(px)"
+          label={m.paddingXLabel}
+          unitLabel={m.paddingXUnitLabel}
           value={typeof checkboxProps.paddingX === "number" ? checkboxProps.paddingX : 12}
           min={0}
           max={60}
@@ -529,8 +533,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
           }
         />
         <NumericPropertyControl
-          label="체크박스 세로 패딩 (px)"
-          unitLabel="(px)"
+          label={m.paddingYLabel}
+          unitLabel={m.paddingYUnitLabel}
           value={typeof checkboxProps.paddingY === "number" ? checkboxProps.paddingY : 10}
           min={0}
           max={40}
@@ -549,8 +553,8 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
           }
         />
         <NumericPropertyControl
-          label="체크박스 옵션 간격 (px)"
-          unitLabel="(px)"
+          label={m.optionGapLabel}
+          unitLabel={m.optionGapUnitLabel}
           value={typeof checkboxProps.optionGapPx === "number" ? checkboxProps.optionGapPx : 4}
           min={0}
           max={40}
@@ -568,9 +572,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
           }
         />
         <ColorPickerField
-          label="텍스트 색상"
-          ariaLabelColorInput="체크박스 텍스트 색상 피커"
-          ariaLabelHexInput="체크박스 텍스트 색상 HEX"
+          label={m.textColorLabel}
+          ariaLabelColorInput={m.textColorPickerAria}
+          ariaLabelHexInput={m.textColorHexAria}
           value={
             checkboxProps.textColorCustom && checkboxProps.textColorCustom.trim() !== ""
               ? checkboxProps.textColorCustom
@@ -589,9 +593,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
           }}
         />
         <ColorPickerField
-          label="배경 색상"
-          ariaLabelColorInput="체크박스 배경 색상 피커"
-          ariaLabelHexInput="체크박스 배경 색상 HEX"
+          label={m.fillColorLabel}
+          ariaLabelColorInput={m.fillColorPickerAria}
+          ariaLabelHexInput={m.fillColorHexAria}
           value={
             checkboxProps.fillColorCustom && checkboxProps.fillColorCustom.trim() !== ""
               ? checkboxProps.fillColorCustom
@@ -610,9 +614,9 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
           }}
         />
         <ColorPickerField
-          label="테두리 색상"
-          ariaLabelColorInput="체크박스 테두리 색상 피커"
-          ariaLabelHexInput="체크박스 테두리 색상 HEX"
+          label={m.strokeColorLabel}
+          ariaLabelColorInput={m.strokeColorPickerAria}
+          ariaLabelHexInput={m.strokeColorHexAria}
           value={
             checkboxProps.strokeColorCustom && checkboxProps.strokeColorCustom.trim() !== ""
               ? checkboxProps.strokeColorCustom
@@ -631,7 +635,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
           }}
         />
         <NumericPropertyControl
-          label="필드 모서리 둥글기"
+          label={m.borderRadiusLabel}
           value={(() => {
             const r = checkboxProps.borderRadius ?? "md";
             return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
@@ -640,11 +644,11 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
           max={8}
           step={1}
           presets={[
-            { id: "none", label: "없음", value: 0 },
-            { id: "sm", label: "작게", value: 2 },
-            { id: "md", label: "보통", value: 4 },
-            { id: "lg", label: "크게", value: 6 },
-            { id: "full", label: "완전 둥글게", value: 8 },
+            { id: "none", label: m.borderRadiusPresetNone, value: 0 },
+            { id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
+            { id: "md", label: m.borderRadiusPresetMedium, value: 4 },
+            { id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
+            { id: "full", label: m.borderRadiusPresetFull, value: 8 },
           ]}
           onChangeValue={(v) => {
             const next =
diff --git a/src/app/editor/forms/FormControllerPanel.tsx b/src/app/editor/forms/FormControllerPanel.tsx
index 979adde..57d6ee2 100644
--- a/src/app/editor/forms/FormControllerPanel.tsx
+++ b/src/app/editor/forms/FormControllerPanel.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import type { Block, ButtonBlockProps, FormBlockProps } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { computeFormControllerPublicTokens } from "@/features/editor/utils/formHelpers";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorFormControllerPanelMessages } from "@/features/i18n/messages/editorFormControllerPanel";
 
 interface FormControllerPanelProps {
   block: Block; // type === "form"
@@ -18,6 +20,8 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
   const [showSheetsGuide, setShowSheetsGuide] = useState(false);
 
   const formProps = block.props as FormBlockProps;
+  const locale = useAppLocale();
+  const m = getEditorFormControllerPanelMessages(locale);
 
   const sheetsScriptExample = (() => {
     const tokens = computeFormControllerPublicTokens(block, blocks);
@@ -71,13 +75,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
   return (
     <div className="space-y-4 text-xs">
       <p className="text-slate-400">
-        이 폼은 퍼블릭 페이지에서 <code className="font-mono text-[11px]">/api/forms/submit</code>
-        엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.
+        {m.introTextPrefix}
+        <code className="font-mono text-[11px]">/api/forms/submit</code>
+        {m.introTextSuffix}
       </p>
 
       <div className="space-y-2">
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">전송 대상</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.submitTargetLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             value={formProps.submitTarget ?? "internal"}
@@ -87,18 +92,18 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               } as any)
             }
           >
-            <option value="internal">서버 처리 전용 (Webhook 없이 사용)</option>
-            <option value="webhook">외부 Webhook / Google Sheets 로 전달</option>
+            <option value="internal">{m.submitTargetOptionInternal}</option>
+            <option value="webhook">{m.submitTargetOptionWebhook}</option>
           </select>
         </label>
 
         {formProps.submitTarget === "webhook" && (
           <div className="space-y-3">
             <label className="flex flex-col gap-1">
-              <span className="text-slate-500 dark:text-slate-400">Webhook URL (예: Google Apps Script 웹 앱 URL)</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.webhookUrlLabel}</span>
               <input
                 className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                placeholder="예: https://script.google.com/macros/s/.../exec"
+                placeholder={m.webhookUrlPlaceholder}
                 value={formProps.destinationUrl ?? ""}
                 onChange={(e) =>
                   updateBlock(selectedBlockId, {
@@ -108,7 +113,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               />
             </label>
             <label className="flex items-center justify-between gap-2">
-              <span className="text-slate-500 dark:text-slate-400">전송 포맷</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.payloadFormatLabel}</span>
               <select
                 className="w-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                 value={formProps.payloadFormat ?? "form"}
@@ -118,12 +123,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                   } as any)
                 }
               >
-                <option value="form">폼 데이터 (x-www-form-urlencoded)</option>
-                <option value="json">JSON (application/json)</option>
+                <option value="form">{m.payloadFormatOptionForm}</option>
+                <option value="json">{m.payloadFormatOptionJson}</option>
               </select>
             </label>
             <label className="flex items-center justify-between gap-2">
-              <span className="text-slate-500 dark:text-slate-400">HTTP 메서드</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.httpMethodLabel}</span>
               <select
                 className="w-28 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                 value={formProps.method ?? "POST"}
@@ -138,10 +143,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               </select>
             </label>
             <label className="flex flex-col gap-1">
-              <span className="text-slate-500 dark:text-slate-400">Authorization 토큰 (옵션)</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.authTokenLabel}</span>
               <input
                 className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                placeholder="예: Bearer xxxxxx"
+                placeholder={m.authTokenPlaceholder}
                 value={formProps.headers?.Authorization ?? ""}
                 onChange={(e) =>
                   updateBlock(selectedBlockId, {
@@ -154,10 +159,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               />
             </label>
             <label className="flex flex-col gap-1">
-              <span className="text-slate-500 dark:text-slate-400">추가 파라미터 (key=value 형식, 줄바꿈으로 구분)</span>
+              <span className="text-slate-500 dark:text-slate-400">{m.extraParamsLabel}</span>
               <textarea
                 className="w-full h-16 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                placeholder={"예:\nsource=landing\nformId=contact-hero"}
+                placeholder={m.extraParamsPlaceholder}
                 value={Object.entries(formProps.extraParams ?? {})
                   .map(([k, v]) => `${k}=${v}`)
                   .join("\n")}
@@ -186,7 +191,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                 className="inline-flex items-center gap-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                 onClick={() => setShowSheetsGuide(true)}
               >
-                Google Sheets 연동 가이드
+                {m.sheetsGuideButtonLabel}
               </button>
             </div>
           </div>
@@ -194,9 +199,9 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
       </div>
 
       <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
-        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 레이아웃</h3>
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.layoutSectionTitle}</h3>
         <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
-          <span>폼 너비 모드</span>
+          <span>{m.formWidthModeLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             value={formProps.formWidthMode ?? "auto"}
@@ -206,14 +211,14 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
               } as any)
             }
           >
-            <option value="auto">자동</option>
-            <option value="full">전체 폭</option>
-            <option value="fixed">고정 값</option>
+            <option value="auto">{m.formWidthModeOptionAuto}</option>
+            <option value="full">{m.formWidthModeOptionFull}</option>
+            <option value="fixed">{m.formWidthModeOptionFixed}</option>
           </select>
         </label>
         {(formProps.formWidthMode ?? "auto") === "fixed" && (
           <NumericPropertyControl
-            label="폼 고정 너비 (px)"
+            label={m.formFixedWidthLabel}
             unitLabel="(px)"
             value={typeof formProps.formWidthPx === "number" ? formProps.formWidthPx : 480}
             min={160}
@@ -232,17 +237,17 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
           />
         )}
         <NumericPropertyControl
-          label="폼 위/아래 여백 (px)"
+          label={m.marginYLabel}
           unitLabel="(px)"
           value={typeof formProps.marginYPx === "number" ? formProps.marginYPx : 24}
           min={0}
           max={160}
           step={4}
           presets={[
-            { id: "none", label: "없음", value: 0 },
-            { id: "compact", label: "좁게", value: 16 },
-            { id: "normal", label: "보통", value: 24 },
-            { id: "spacious", label: "넓게", value: 40 },
+            { id: "none", label: m.marginYPresetNone, value: 0 },
+            { id: "compact", label: m.marginYPresetCompact, value: 16 },
+            { id: "normal", label: m.marginYPresetNormal, value: 24 },
+            { id: "spacious", label: m.marginYPresetSpacious, value: 40 },
           ]}
           onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
@@ -253,12 +258,12 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
       </div>
 
       <div className="space-y-2 border-t border-slate-800 pt-3 mt-4">
-        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 메시지</h3>
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.messagesSectionTitle}</h3>
         <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
-          <span>성공 메시지</span>
+          <span>{m.successMessageLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            placeholder="예: 성공적으로 전송되었습니다."
+            placeholder={m.successMessagePlaceholder}
             value={formProps.successMessage ?? ""}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -268,10 +273,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
           />
         </label>
         <label className="flex flex-col gap-1 text-xs text-slate-500 dark:text-slate-400">
-          <span>에러 메시지</span>
+          <span>{m.errorMessageLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            placeholder="예: 전송 중 오류가 발생했습니다."
+            placeholder={m.errorMessagePlaceholder}
             value={formProps.errorMessage ?? ""}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -283,10 +288,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
       </div>
 
       <div className="space-y-3 border-t border-slate-800 pt-3 mt-4">
-        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">폼 컨트롤러</h3>
+        <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.controllerSectionTitle}</h3>
 
-        <fieldset className="space-y-2" aria-label="폼 필드 매핑">
-          <legend className="text-[11px] text-slate-400 mb-1">폼 필드 매핑</legend>
+        <fieldset className="space-y-2" aria-label={m.fieldMappingAriaLabel}>
+          <legend className="text-[11px] text-slate-400 mb-1">{m.fieldMappingLegend}</legend>
           {blocks
             .filter((b) =>
               b.type === "formInput" ||
@@ -355,10 +360,10 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
         </fieldset>
 
         <div className="space-y-1">
-          <span className="text-[11px] text-slate-400">Submit 버튼</span>
+          <span className="text-[11px] text-slate-400">{m.submitButtonLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="Submit 버튼"
+            aria-label={m.submitButtonAriaLabel}
             value={formProps.submitButtonId ?? ""}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -393,27 +398,26 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
           <div className="w-full max-w-xl rounded border border-slate-200 bg-white px-4 py-3 text-xs text-slate-900 shadow-lg dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
             <div className="mb-2 flex items-center justify-between">
-              <h4 className="text-[11px] font-semibold">Google Sheets 연동 가이드</h4>
+              <h4 className="text-[11px] font-semibold">{m.sheetsGuideHeading}</h4>
               <button
                 type="button"
                 className="text-[11px] text-slate-400 hover:text-slate-100"
                 onClick={() => setShowSheetsGuide(false)}
-                aria-label="Google Sheets 연동 가이드 닫기"
+                aria-label={m.sheetsGuideCloseAriaLabel}
               >
-                닫기
+                ×
               </button>
             </div>
             <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed">
-              구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다.
-              아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.
+              {m.sheetsGuideIntro}
             </p>
             <ol className="list-decimal list-inside space-y-1 text-[11px] text-slate-400 mt-2">
-              <li>Google Sheets 에서 새 스프레드시트를 만들고, 1행에 name, email, message 같은 헤더를 추가합니다.</li>
-              <li>시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.</li>
-              <li>"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.</li>
+              <li>{m.sheetsGuideStep1}</li>
+              <li>{m.sheetsGuideStep2}</li>
+              <li>{m.sheetsGuideStep3}</li>
             </ol>
             <div className="mt-2 space-y-1">
-              <span className="text-[11px] text-slate-500 dark:text-slate-400">예시 Apps Script 코드</span>
+              <span className="text-[11px] text-slate-500 dark:text-slate-400">{m.sheetsGuideExampleCodeLabel}</span>
               <textarea
                 className="w-full h-40 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                 readOnly
diff --git a/src/app/editor/forms/FormInputPropertiesPanel.tsx b/src/app/editor/forms/FormInputPropertiesPanel.tsx
index f0699a7..a59f41d 100644
--- a/src/app/editor/forms/FormInputPropertiesPanel.tsx
+++ b/src/app/editor/forms/FormInputPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { Block, FormInputBlockProps } from "@/features/editor/state/editorStore";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorFormInputPanelMessages } from "@/features/i18n/messages/editorFormInputPanel";
 
 interface FormInputPropertiesPanelProps {
 	block: Block;
@@ -11,6 +13,8 @@ interface FormInputPropertiesPanelProps {
 }
 
 export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }: FormInputPropertiesPanelProps) {
+	const locale = useAppLocale();
+	const m = getEditorFormInputPanelMessages(locale);
 	if (!selectedBlockId || block.id !== selectedBlockId || block.type !== "formInput") return null;
 
 	const inputProps = block.props as FormInputBlockProps;
@@ -18,9 +22,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 
 	return (
 		<div className="space-y-3 text-xs">
-			<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">입력 필드</h3>
+			<h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
 			<label className="flex flex-col gap-1">
-				<span className="text-slate-500 dark:text-slate-400">라벨 타입</span>
+				<span className="text-slate-500 dark:text-slate-400">{m.labelTypeLabel}</span>
 				<select
 					className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 					value={inputProps.labelMode ?? "text"}
@@ -30,12 +34,12 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						} as any)
 					}
 				>
-					<option value="text">텍스트</option>
-					<option value="image">이미지</option>
+					<option value="text">{m.labelTypeOptionText}</option>
+					<option value="image">{m.labelTypeOptionImage}</option>
 				</select>
 			</label>
 			<label className="flex flex-col gap-1">
-				<span className="text-slate-500 dark:text-slate-400">필드 라벨</span>
+				<span className="text-slate-500 dark:text-slate-400">{m.fieldLabelLabel}</span>
 				<input
 					className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 					value={inputProps.label ?? ""}
@@ -47,7 +51,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				/>
 			</label>
 			<label className="flex flex-col gap-1">
-				<span className="text-slate-500 dark:text-slate-400">라벨 표시 방식</span>
+				<span className="text-slate-500 dark:text-slate-400">{m.labelDisplayLabel}</span>
 				<select
 					className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 					value={labelDisplay}
@@ -57,14 +61,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						} as any)
 					}
 				>
-					<option value="visible">표시 (기본)</option>
-					<option value="hidden">숨김</option>
-					<option value="floating">플로팅 라벨</option>
+					<option value="visible">{m.labelDisplayOptionVisible}</option>
+					<option value="hidden">{m.labelDisplayOptionHidden}</option>
+					<option value="floating">{m.labelDisplayOptionFloating}</option>
 				</select>
 			</label>
 			{labelDisplay === "visible" && (
 				<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
-					<span>레이아웃</span>
+					<span>{m.layoutLabel}</span>
 					<select
 						className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 						value={inputProps.labelLayout ?? "stacked"}
@@ -74,15 +78,15 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 							} as any)
 						}
 					>
-						<option value="stacked">세로 (기본)</option>
-						<option value="inline">가로 (인라인)</option>
+						<option value="stacked">{m.layoutOptionStacked}</option>
+						<option value="inline">{m.layoutOptionInline}</option>
 					</select>
 				</label>
 			)}
 			{labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && (
 				<NumericPropertyControl
-					label="라벨/필드 간격 (px)"
-					unitLabel="(px)"
+					label={m.labelGapLabel}
+					unitLabel={m.labelGapUnitLabel}
 					value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
 					min={0}
 					max={80}
@@ -103,7 +107,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 			{inputProps.labelMode === "image" && (
 				<>
 					<label className="flex flex-col gap-1">
-						<span className="text-slate-500 dark:text-slate-400">라벨 이미지 URL</span>
+						<span className="text-slate-500 dark:text-slate-400">{m.labelImageUrlLabel}</span>
 						<input
 							className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 							value={inputProps.labelImageUrl ?? ""}
@@ -115,7 +119,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						/>
 					</label>
 					<label className="flex flex-col gap-1">
-						<span className="text-slate-500 dark:text-slate-400">라벨 이미지 대체 텍스트</span>
+						<span className="text-slate-500 dark:text-slate-400">{m.labelImageAltLabel}</span>
 						<input
 							className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 							value={inputProps.labelImageAlt ?? ""}
@@ -129,7 +133,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				</>
 			)}
 			<label className="flex flex-col gap-1">
-				<span className="text-slate-500 dark:text-slate-400">전송 키</span>
+				<span className="text-slate-500 dark:text-slate-400">{m.submitKeyLabel}</span>
 				<input
 					className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 					value={inputProps.formFieldName ?? ""}
@@ -141,10 +145,10 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				/>
 			</label>
 			<label className="flex flex-col gap-1">
-				<span className="text-slate-500 dark:text-slate-400">필드 타입</span>
+				<span className="text-slate-500 dark:text-slate-400">{m.fieldTypeLabel}</span>
 				<select
 					className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-					aria-label="필드 타입"
+					aria-label={m.fieldTypeAria}
 					value={inputProps.inputType ?? "text"}
 					onChange={(e) =>
 						updateBlock(selectedBlockId, {
@@ -152,16 +156,16 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						} as any)
 					}
 				>
-					<option value="text">텍스트</option>
-					<option value="email">이메일</option>
-					<option value="textarea">긴 텍스트</option>
+					<option value="text">{m.fieldTypeOptionText}</option>
+					<option value="email">{m.fieldTypeOptionEmail}</option>
+					<option value="textarea">{m.fieldTypeOptionTextarea}</option>
 				</select>
 			</label>
 			<label className="flex flex-col gap-1">
-				<span className="text-slate-500 dark:text-slate-400">Placeholder</span>
+				<span className="text-slate-500 dark:text-slate-400">{m.placeholderLabel}</span>
 				<input
 					className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-					aria-label="Placeholder"
+					aria-label={m.placeholderAria}
 					value={inputProps.placeholder ?? ""}
 					onChange={(e) =>
 						updateBlock(selectedBlockId, {
@@ -171,13 +175,13 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				/>
 			</label>
 			<label className="inline-flex items-center gap-2">
-				<span className="text-slate-500 dark:text-slate-400">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+				<span className="text-slate-500 dark:text-slate-400">{m.requiredNoticeText}</span>
 			</label>
 			<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
-				<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
+				<h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
 				<NumericPropertyControl
-					label="필드 텍스트 크기 (px)"
-					unitLabel="(px)"
+					label={m.textSizeLabel}
+					unitLabel={m.textSizeUnitLabel}
 					value={(() => {
 						const raw = inputProps.fontSizeCustom ?? "";
 						const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -202,8 +206,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				/>
 				{/* 줄간격 px 입력을 노출하여 preview em 변환의 근거를 제공 */}
 				<NumericPropertyControl
-					label="필드 줄간격 (px)"
-					unitLabel="(px)"
+					label={m.lineHeightLabel}
+					unitLabel={m.lineHeightUnitLabel}
 					value={(() => {
 						const raw = inputProps.lineHeightCustom ?? "";
 						const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -226,8 +230,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				/>
 				{/* 자간 px 입력으로 폼 입력 타이포를 세밀하게 조정 */}
 				<NumericPropertyControl
-					label="필드 자간 (px)"
-					unitLabel="(px)"
+					label={m.letterSpacingLabel}
+					unitLabel={m.letterSpacingUnitLabel}
 					value={(() => {
 						const raw = inputProps.letterSpacingCustom ?? "";
 						const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -249,7 +253,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}}
 				/>
 				<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
-					<span>텍스트 정렬</span>
+					<span>{m.textAlignLabel}</span>
 					<select
 						className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 						value={inputProps.align ?? "left"}
@@ -259,16 +263,16 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 							} as any)
 						}
 					>
-						<option value="left">왼쪽</option>
-						<option value="center">가운데</option>
-						<option value="right">오른쪽</option>
+						<option value="left">{m.textAlignOptionLeft}</option>
+						<option value="center">{m.textAlignOptionCenter}</option>
+						<option value="right">{m.textAlignOptionRight}</option>
 					</select>
 				</label>
 				<label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
-					<span>너비</span>
+					<span>{m.widthModeLabel}</span>
 					<select
 						className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-						aria-label="너비"
+						aria-label={m.widthModeAria}
 						value={inputProps.widthMode ?? "full"}
 						onChange={(e) =>
 							updateBlock(selectedBlockId, {
@@ -276,14 +280,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 							} as any)
 						}
 					>
-						<option value="auto">자동</option>
-						<option value="full">전체 폭</option>
-						<option value="fixed">고정 값</option>
+						<option value="auto">{m.widthModeOptionAuto}</option>
+						<option value="full">{m.widthModeOptionFull}</option>
+						<option value="fixed">{m.widthModeOptionFixed}</option>
 					</select>
 				</label>
 				<NumericPropertyControl
-					label="필드 고정 너비"
-					unitLabel="(px)"
+					label={m.fixedWidthLabel}
+					unitLabel={m.fixedWidthUnitLabel}
 					value={inputProps.widthPx ?? 240}
 					min={80}
 					max={800}
@@ -300,8 +304,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}}
 				/>
 				<NumericPropertyControl
-					label="필드 가로 패딩 (px)"
-					unitLabel="(px)"
+					label={m.paddingXLabel}
+					unitLabel={m.paddingXUnitLabel}
 					value={typeof inputProps.paddingX === "number" ? inputProps.paddingX : 12}
 					min={0}
 					max={60}
@@ -320,8 +324,8 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}}
 				/>
 				<NumericPropertyControl
-					label="필드 세로 패딩 (px)"
-					unitLabel="(px)"
+					label={m.paddingYLabel}
+					unitLabel={m.paddingYUnitLabel}
 					value={typeof inputProps.paddingY === "number" ? inputProps.paddingY : 10}
 					min={0}
 					max={40}
@@ -340,9 +344,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}}
 				/>
 				<ColorPickerField
-					label="필드 텍스트 색상"
-					ariaLabelColorInput="필드 텍스트 색상 피커"
-					ariaLabelHexInput="필드 텍스트 색상 HEX"
+					label={m.textColorLabel}
+					ariaLabelColorInput={m.textColorPickerAria}
+					ariaLabelHexInput={m.textColorHexAria}
 					value={
 						inputProps.textColorCustom && inputProps.textColorCustom.trim() !== ""
 							? inputProps.textColorCustom
@@ -361,9 +365,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}}
 				/>
 				<ColorPickerField
-					label="필드 채움 색상"
-					ariaLabelColorInput="필드 채움 색상 피커"
-					ariaLabelHexInput="필드 채움 색상 HEX"
+					label={m.fillColorLabel}
+					ariaLabelColorInput={m.fillColorPickerAria}
+					ariaLabelHexInput={m.fillColorHexAria}
 					value={
 						inputProps.fillColorCustom && inputProps.fillColorCustom.trim() !== ""
 							? inputProps.fillColorCustom
@@ -382,9 +386,9 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}}
 				/>
 				<ColorPickerField
-					label="필드 테두리 색상"
-					ariaLabelColorInput="필드 테두리 색상 피커"
-					ariaLabelHexInput="필드 테두리 색상 HEX"
+					label={m.strokeColorLabel}
+					ariaLabelColorInput={m.strokeColorPickerAria}
+					ariaLabelHexInput={m.strokeColorHexAria}
 					value={
 						inputProps.strokeColorCustom && inputProps.strokeColorCustom.trim() !== ""
 							? inputProps.strokeColorCustom
@@ -403,7 +407,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}}
 				/>
 				<NumericPropertyControl
-					label="필드 모서리 둥글기"
+					label={m.borderRadiusLabel}
 					value={(() => {
 						const r = inputProps.borderRadius ?? "md";
 						return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
@@ -412,15 +416,14 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					max={8}
 					step={1}
 					presets={[
-						{ id: "none", label: "없음", value: 0 },
-						{ id: "sm", label: "작게", value: 2 },
-						{ id: "md", label: "보통", value: 4 },
-						{ id: "lg", label: "크게", value: 6 },
-						{ id: "full", label: "완전 둥글게", value: 8 },
+						{ id: "none", label: m.borderRadiusPresetNone, value: 0 },
+						{ id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
+						{ id: "md", label: m.borderRadiusPresetMedium, value: 4 },
+						{ id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
+						{ id: "full", label: m.borderRadiusPresetFull, value: 8 },
 					]}
 					onChangeValue={(v) => {
-						const next =
-							v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
+						const next = v <= 0 ? "none" : v <= 2 ? "sm" : v <= 5 ? "md" : v <= 7 ? "lg" : "full";
 						updateBlock(selectedBlockId, {
 							borderRadius: next,
 						} as any);
diff --git a/src/app/editor/forms/FormRadioPropertiesPanel.tsx b/src/app/editor/forms/FormRadioPropertiesPanel.tsx
index 2783ad8..7980f3e 100644
--- a/src/app/editor/forms/FormRadioPropertiesPanel.tsx
+++ b/src/app/editor/forms/FormRadioPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { Block, FormRadioBlockProps } from "@/features/editor/state/editorStore";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorFormRadioPanelMessages } from "@/features/i18n/messages/editorFormRadioPanel";
 
 interface FormRadioPropertiesPanelProps {
   block: Block;
@@ -11,6 +13,8 @@ interface FormRadioPropertiesPanelProps {
 }
 
 export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }: FormRadioPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorFormRadioPanelMessages(locale);
   if (!selectedBlockId || block.id !== selectedBlockId) return null;
 
   const radioProps = block.props as FormRadioBlockProps;
@@ -18,7 +22,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
 
   return (
     <div className="space-y-3 text-xs">
-      <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">라디오 필드</h3>
+      <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
 
       <label className="flex flex-col gap-1">
         <span className="text-slate-500 dark:text-slate-400">그룹 타이틀 타입</span>
@@ -225,7 +229,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
           <span className="text-slate-500 dark:text-slate-400">옵션</span>
           <button
             type="button"
-            className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
+            className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark:hover:border-red-700"
             onClick={() => {
               const next = Array.isArray((radioProps as any).options)
                 ? [...(radioProps as any).options]
@@ -393,15 +397,15 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
       </div>
 
       <label className="inline-flex items-center gap-2">
-        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+        <span className="text-slate-500">{m.requiredNoticeText}</span>
       </label>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
-        {/* 라디오 타이포 px 값을 직접 입력받아 em 스케일 변환 로직과 연동한다 */}
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
+
         <NumericPropertyControl
-          label="라디오 텍스트 크기 (px)"
-          unitLabel="(px)"
+          label={m.textSizeLabel}
+          unitLabel={m.textSizeUnitLabel}
           value={(() => {
             const raw = radioProps.fontSizeCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -424,10 +428,10 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any);
           }}
         />
-        {/* 줄간격 px 입력을 노출하여 preview 에서 em 변환 근거로 사용 */}
+
         <NumericPropertyControl
-          label="라디오 줄간격 (px)"
-          unitLabel="(px)"
+          label={m.lineHeightLabel}
+          unitLabel={m.lineHeightUnitLabel}
           value={(() => {
             const raw = radioProps.lineHeightCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -448,10 +452,10 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any);
           }}
         />
-        {/* 자간 px 입력 컨트롤로 프리뷰 적용 근거 제공 */}
+
         <NumericPropertyControl
-          label="라디오 자간 (px)"
-          unitLabel="(px)"
+          label={m.letterSpacingLabel}
+          unitLabel={m.letterSpacingUnitLabel}
           value={(() => {
             const raw = radioProps.letterSpacingCustom ?? "";
             const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -472,8 +476,9 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any);
           }}
         />
+
         <label className="flex flex-col gap-1 text-[11px] text-slate-400">
-          <span>필드 너비</span>
+          <span>Field width</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             value={radioProps.widthMode ?? "full"}
@@ -483,23 +488,24 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
               } as any)
             }
           >
-            <option value="auto">자동</option>
-            <option value="full">전체 폭</option>
-            <option value="fixed">고정 값</option>
+            <option value="auto">Auto</option>
+            <option value="full">Full width</option>
+            <option value="fixed">Fixed width</option>
           </select>
         </label>
+
         {(radioProps.widthMode ?? "full") === "fixed" && (
           <NumericPropertyControl
-            label="필드 고정 너비"
+            label="Field fixed width"
             unitLabel="(px)"
             value={radioProps.widthPx ?? 240}
             min={80}
             max={800}
             step={10}
             presets={[
-              { id: "sm", label: "작게", value: 200 },
-              { id: "md", label: "보통", value: 280 },
-              { id: "lg", label: "넓게", value: 360 },
+              { id: "sm", label: "Small", value: 200 },
+              { id: "md", label: "Medium", value: 280 },
+              { id: "lg", label: "Large", value: 360 },
             ]}
             onChangeValue={(v) => {
               updateBlock(selectedBlockId, {
@@ -508,19 +514,20 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             }}
           />
         )}
+
         <NumericPropertyControl
-          label="라디오 가로 패딩 (px)"
-          unitLabel="(px)"
+          label={m.paddingXLabel}
+          unitLabel={m.paddingXUnitLabel}
           value={typeof radioProps.paddingX === "number" ? radioProps.paddingX : 12}
           min={0}
           max={60}
           step={2}
           presets={[
-            { id: "xs", label: "아주 얇게", value: 6 },
-            { id: "sm", label: "얇게", value: 10 },
-            { id: "md", label: "보통", value: 12 },
-            { id: "lg", label: "넓게", value: 16 },
-            { id: "xl", label: "아주 넓게", value: 20 },
+            { id: "xs", label: "Extra small", value: 6 },
+            { id: "sm", label: "Small", value: 10 },
+            { id: "md", label: "Medium", value: 12 },
+            { id: "lg", label: "Large", value: 16 },
+            { id: "xl", label: "Extra large", value: 20 },
           ]}
           onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
@@ -528,19 +535,20 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any)
           }
         />
+
         <NumericPropertyControl
-          label="라디오 세로 패딩 (px)"
-          unitLabel="(px)"
+          label={m.paddingYLabel}
+          unitLabel={m.paddingYUnitLabel}
           value={typeof radioProps.paddingY === "number" ? radioProps.paddingY : 10}
           min={0}
           max={40}
           step={1}
           presets={[
-            { id: "xs", label: "아주 얇게", value: 6 },
-            { id: "sm", label: "얇게", value: 8 },
-            { id: "md", label: "보통", value: 10 },
-            { id: "lg", label: "넓게", value: 12 },
-            { id: "xl", label: "아주 넓게", value: 16 },
+            { id: "xs", label: "Extra small", value: 6 },
+            { id: "sm", label: "Small", value: 8 },
+            { id: "md", label: "Medium", value: 10 },
+            { id: "lg", label: "Large", value: 12 },
+            { id: "xl", label: "Extra large", value: 16 },
           ]}
           onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
@@ -548,18 +556,19 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any)
           }
         />
+
         <NumericPropertyControl
-          label="라디오 옵션 간격 (px)"
-          unitLabel="(px)"
+          label={m.optionGapLabel}
+          unitLabel={m.optionGapUnitLabel}
           value={typeof radioProps.optionGapPx === "number" ? radioProps.optionGapPx : 4}
           min={0}
           max={40}
           step={1}
           presets={[
-            { id: "tight", label: "타이트", value: 2 },
-            { id: "normal", label: "보통", value: 4 },
-            { id: "relaxed", label: "느슨", value: 8 },
-            { id: "extra", label: "넓게", value: 12 },
+            { id: "tight", label: "Tight", value: 2 },
+            { id: "normal", label: "Normal", value: 4 },
+            { id: "relaxed", label: "Relaxed", value: 8 },
+            { id: "extra", label: "Extra", value: 12 },
           ]}
           onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
@@ -567,10 +576,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any)
           }
         />
+
         <ColorPickerField
-          label="텍스트 색상"
-          ariaLabelColorInput="라디오 텍스트 색상 피커"
-          ariaLabelHexInput="라디오 텍스트 색상 HEX"
+          label={m.textColorLabel}
+          ariaLabelColorInput={m.textColorPickerAria}
+          ariaLabelHexInput={m.textColorHexAria}
           value={
             radioProps.textColorCustom && radioProps.textColorCustom.trim() !== ""
               ? radioProps.textColorCustom
@@ -588,10 +598,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any);
           }}
         />
+
         <ColorPickerField
-          label="배경 색상"
-          ariaLabelColorInput="라디오 배경 색상 피커"
-          ariaLabelHexInput="라디오 배경 색상 HEX"
+          label={m.fillColorLabel}
+          ariaLabelColorInput={m.fillColorPickerAria}
+          ariaLabelHexInput={m.fillColorHexAria}
           value={
             radioProps.fillColorCustom && radioProps.fillColorCustom.trim() !== ""
               ? radioProps.fillColorCustom
@@ -609,10 +620,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any);
           }}
         />
+
         <ColorPickerField
-          label="테두리 색상"
-          ariaLabelColorInput="라디오 테두리 색상 피커"
-          ariaLabelHexInput="라디오 테두리 색상 HEX"
+          label={m.strokeColorLabel}
+          ariaLabelColorInput={m.strokeColorPickerAria}
+          ariaLabelHexInput={m.strokeColorHexAria}
           value={
             radioProps.strokeColorCustom && radioProps.strokeColorCustom.trim() !== ""
               ? radioProps.strokeColorCustom
@@ -630,8 +642,9 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
             } as any);
           }}
         />
+
         <NumericPropertyControl
-          label="필드 모서리 둥글기"
+          label={m.borderRadiusLabel}
           value={(() => {
             const r = radioProps.borderRadius ?? "md";
             return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
@@ -640,11 +653,11 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
           max={8}
           step={1}
           presets={[
-            { id: "none", label: "없음", value: 0 },
-            { id: "sm", label: "작게", value: 2 },
-            { id: "md", label: "보통", value: 4 },
-            { id: "lg", label: "크게", value: 6 },
-            { id: "full", label: "완전 둥글게", value: 8 },
+            { id: "none", label: m.borderRadiusPresetNone, value: 0 },
+            { id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
+            { id: "md", label: m.borderRadiusPresetMedium, value: 4 },
+            { id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
+            { id: "full", label: m.borderRadiusPresetFull, value: 8 },
           ]}
           onChangeValue={(v) => {
             const next =
diff --git a/src/app/editor/forms/FormSelectPropertiesPanel.tsx b/src/app/editor/forms/FormSelectPropertiesPanel.tsx
index bbf2be1..a8d17f0 100644
--- a/src/app/editor/forms/FormSelectPropertiesPanel.tsx
+++ b/src/app/editor/forms/FormSelectPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { Block, FormSelectBlockProps } from "@/features/editor/state/editorStore";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorFormSelectPanelMessages } from "@/features/i18n/messages/editorFormSelectPanel";
 
 interface FormSelectPropertiesPanelProps {
   block: Block;
@@ -11,6 +13,8 @@ interface FormSelectPropertiesPanelProps {
 }
 
 export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock }: FormSelectPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorFormSelectPanelMessages(locale);
   if (!selectedBlockId || block.id !== selectedBlockId) return null;
 
   const selectProps = block.props as FormSelectBlockProps;
@@ -18,10 +22,10 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
 
   return (
     <div className="space-y-3 text-xs">
-      <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">셀렉트 필드</h3>
+      <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.sectionTitle}</h3>
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">라벨 타입</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.labelTypeLabel}</span>
         <select
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={selectProps.labelMode ?? "text"}
@@ -31,13 +35,13 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
             } as any)
           }
         >
-          <option value="text">텍스트</option>
-          <option value="image">이미지</option>
+          <option value="text">{m.labelTypeOptionText}</option>
+          <option value="image">{m.labelTypeOptionImage}</option>
         </select>
       </label>
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">라벨 표시 방식</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.labelDisplayLabel}</span>
         <select
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={labelDisplay}
@@ -47,14 +51,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
             } as any)
           }
         >
-          <option value="visible">표시 (기본)</option>
-          <option value="hidden">숨김</option>
+          <option value="visible">{m.labelDisplayOptionVisible}</option>
+          <option value="hidden">{m.labelDisplayOptionHidden}</option>
         </select>
       </label>
 
       {labelDisplay === "visible" && (
         <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
-          <span>레이아웃</span>
+          <span>{m.layoutLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             value={selectProps.labelLayout ?? "stacked"}
@@ -64,15 +68,15 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
               } as any)
             }
           >
-            <option value="stacked">세로 (기본)</option>
-            <option value="inline">가로 (인라인)</option>
+            <option value="stacked">{m.layoutOptionStacked}</option>
+            <option value="inline">{m.layoutOptionInline}</option>
           </select>
         </label>
       )}
 
       {labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && (
         <NumericPropertyControl
-          label="라벨/필드 간격 (px)"
+          label={m.labelGapLabel}
           unitLabel="(px)"
           value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8}
           min={0}
@@ -93,7 +97,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
       )}
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">필드 라벨</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.fieldLabelLabel}</span>
         <input
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={selectProps.label ?? ""}
@@ -106,7 +110,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
       </label>
 
       <label className="flex flex-col gap-1">
-        <span className="text-slate-500 dark:text-slate-400">전송 키</span>
+        <span className="text-slate-500 dark:text-slate-400">{m.submitKeyLabel}</span>
         <input
           className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           value={selectProps.formFieldName ?? ""}
@@ -120,7 +124,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
 
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <span className="text-slate-500 dark:text-slate-400">옵션</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.optionsLabel}</span>
           <button
             type="button"
             className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
@@ -137,7 +141,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
               } as any);
             }}
           >
-            옵션 추가
+            {m.addOptionButtonLabel}
           </button>
         </div>
         <div className="space-y-2">
@@ -146,7 +150,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
               <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
                 <input
                   className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                  placeholder="라벨"
+                  placeholder={m.optionLabelPlaceholder}
                   value={opt.label ?? ""}
                   onChange={(e) => {
                     const next = [...(((selectProps as any).options ?? []) as any[])];
@@ -161,7 +165,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
                 />
                 <input
                   className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                  placeholder="값(value)"
+                  placeholder={m.optionValuePlaceholder}
                   value={opt.value ?? ""}
                   onChange={(e) => {
                     const next = [...(((selectProps as any).options ?? []) as any[])];
@@ -193,13 +197,13 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
       </div>
 
       <label className="inline-flex items-center gap-2">
-        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
+        <span className="text-slate-500">{m.requiredNoticeText}</span>
       </label>
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
         <NumericPropertyControl
-          label="셀렉트 텍스트 크기 (px)"
-          unitLabel="(px)"
+          label={m.textSizeLabel}
+          unitLabel={m.textSizeUnitLabel}
           value={(() => {
             const raw = selectProps.fontSizeCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -216,16 +220,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
             { id: "lg", label: "L", value: 18 },
             { id: "xl", label: "XL", value: 20 },
           ]}
-          onChangeValue={(v) => {
+          onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
               fontSizeCustom: `${v}px`,
-            } as any);
-          }}
+            } as any)
+          }
         />
         {/* 줄간격 px 입력을 받아 preview 렌더러의 em 변환 근거로 사용한다 */}
         <NumericPropertyControl
-          label="셀렉트 줄간격 (px)"
-          unitLabel="(px)"
+          label={m.lineHeightLabel}
+          unitLabel={m.lineHeightUnitLabel}
           value={(() => {
             const raw = selectProps.lineHeightCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -240,16 +244,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
             { id: "normal", label: "보통", value: 24 },
             { id: "loose", label: "루즈", value: 32 },
           ]}
-          onChangeValue={(v) => {
+          onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
               lineHeightCustom: `${v}px`,
-            } as any);
-          }}
+            } as any)
+          }
         />
         {/* 자간 px 입력을 제공하여 TDD 시나리오와 동기화한다 */}
         <NumericPropertyControl
-          label="셀렉트 자간 (px)"
-          unitLabel="(px)"
+          label={m.letterSpacingLabel}
+          unitLabel={m.letterSpacingUnitLabel}
           value={(() => {
             const raw = selectProps.letterSpacingCustom ?? "";
             const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -264,14 +268,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
             { id: "normal", label: "보통", value: 0 },
             { id: "wide", label: "넓게", value: 2 },
           ]}
-          onChangeValue={(v) => {
+          onChangeValue={(v) =>
             updateBlock(selectedBlockId, {
               letterSpacingCustom: `${v}px`,
-            } as any);
-          }}
+            } as any)
+          }
         />
         <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark:text-slate-400">
-          <span>필드 너비</span>
+          <span>{m.widthModeLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
             value={selectProps.widthMode ?? "full"}
@@ -282,14 +286,14 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
             }
           >
             <option value="auto">자동</option>
-            <option value="full">전체 폭</option>
-            <option value="fixed">고정 값</option>
+            <option value="full">전체</option>
+            <option value="fixed">고정</option>
           </select>
         </label>
         {(selectProps.widthMode ?? "full") === "fixed" && (
           <NumericPropertyControl
-            label="필드 고정 너비"
-            unitLabel="(px)"
+            label={m.fixedWidthLabel}
+            unitLabel={m.fixedWidthUnitLabel}
             value={selectProps.widthPx ?? 240}
             min={80}
             max={800}
@@ -299,16 +303,16 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
               { id: "md", label: "보통", value: 280 },
               { id: "lg", label: "넓게", value: 360 },
             ]}
-            onChangeValue={(v) => {
+            onChangeValue={(v) =>
               updateBlock(selectedBlockId, {
                 widthPx: v,
-              } as any);
-            }}
+              } as any)
+            }
           />
         )}
         <NumericPropertyControl
-          label="셀렉트 가로 패딩 (px)"
-          unitLabel="(px)"
+          label={m.paddingXLabel}
+          unitLabel={m.paddingXUnitLabel}
           value={typeof selectProps.paddingX === "number" ? selectProps.paddingX : 12}
           min={0}
           max={60}
@@ -327,8 +331,8 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
           }
         />
         <NumericPropertyControl
-          label="셀렉트 세로 패딩 (px)"
-          unitLabel="(px)"
+          label={m.paddingYLabel}
+          unitLabel={m.paddingYUnitLabel}
           value={typeof selectProps.paddingY === "number" ? selectProps.paddingY : 10}
           min={0}
           max={40}
@@ -347,9 +351,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
           }
         />
         <ColorPickerField
-          label="필드 텍스트 색상"
-          ariaLabelColorInput="셀렉트 텍스트 색상 피커"
-          ariaLabelHexInput="셀렉트 텍스트 색상 HEX"
+          label={m.textColorLabel}
+          ariaLabelColorInput={m.textColorPickerAria}
+          ariaLabelHexInput={m.textColorHexAria}
           value={
             selectProps.textColorCustom && selectProps.textColorCustom.trim() !== ""
               ? selectProps.textColorCustom
@@ -368,9 +372,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
           }}
         />
         <ColorPickerField
-          label="필드 채움 색상"
-          ariaLabelColorInput="셀렉트 채움 색상 피커"
-          ariaLabelHexInput="셀렉트 채움 색상 HEX"
+          label={m.fillColorLabel}
+          ariaLabelColorInput={m.fillColorPickerAria}
+          ariaLabelHexInput={m.fillColorHexAria}
           value={
             selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== ""
               ? selectProps.fillColorCustom
@@ -389,9 +393,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
           }}
         />
         <ColorPickerField
-          label="필드 테두리 색상"
-          ariaLabelColorInput="셀렉트 테두리 색상 피커"
-          ariaLabelHexInput="셀렉트 테두리 색상 HEX"
+          label={m.strokeColorLabel}
+          ariaLabelColorInput={m.strokeColorPickerAria}
+          ariaLabelHexInput={m.strokeColorHexAria}
           value={
             selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== ""
               ? selectProps.strokeColorCustom
@@ -410,7 +414,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
           }}
         />
         <NumericPropertyControl
-          label="필드 모서리 둥글기"
+          label={m.borderRadiusLabel}
           value={(() => {
             const r = selectProps.borderRadius ?? "md";
             return r === "none" ? 0 : r === "sm" ? 2 : r === "lg" ? 6 : r === "full" ? 8 : 4;
@@ -419,11 +423,11 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
           max={8}
           step={1}
           presets={[
-            { id: "none", label: "없음", value: 0 },
-            { id: "sm", label: "작게", value: 2 },
-            { id: "md", label: "보통", value: 4 },
-            { id: "lg", label: "크게", value: 6 },
-            { id: "full", label: "완전 둥글게", value: 8 },
+            { id: "none", label: m.borderRadiusPresetNone, value: 0 },
+            { id: "sm", label: m.borderRadiusPresetSmall, value: 2 },
+            { id: "md", label: m.borderRadiusPresetMedium, value: 4 },
+            { id: "lg", label: m.borderRadiusPresetLarge, value: 6 },
+            { id: "full", label: m.borderRadiusPresetFull, value: 8 },
           ]}
           onChangeValue={(v) => {
             const next =
diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
index a6650be..bce70b4 100644
--- a/src/app/editor/page.tsx
+++ b/src/app/editor/page.tsx
@@ -4,7 +4,19 @@ import type { CSSProperties, ReactNode } from "react";
 import { Fragment, Suspense, useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { FilePlus2, Trash2, Eye, Pencil, ListChecks, Undo2, Redo2 } from "lucide-react";
+import {
+  FilePlus2,
+  Trash2,
+  Eye,
+  Pencil,
+  ListChecks,
+  Undo2,
+  Redo2,
+  ArrowUp,
+  ArrowDown,
+  IndentIncrease,
+  IndentDecrease,
+} from "lucide-react";
 import {
   DndContext,
   PointerSensor,
@@ -25,6 +37,8 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useEditorStore } from "@/features/editor/state/editorStore";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorMessages } from "@/features/i18n/messages/editor";
 import type {
   Block,
   TextBlockProps,
@@ -81,6 +95,8 @@ export default function EditorPage() {
 function EditorPageInner() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const locale = useAppLocale();
+  const m = getEditorMessages(locale);
   const blocks = useEditorStore((state) => state.blocks);
   const selectedBlockId = useEditorStore((state) => state.selectedBlockId);
   const selectedListItemId = useEditorStore((state) => (state as any).selectedListItemId as string | null | undefined);
@@ -454,7 +470,7 @@ function EditorPageInner() {
   const handleSaveProject = async () => {
     const slug = (projectConfig.slug ?? "").trim();
     if (!slug) {
-      setProjectMessage("프로젝트 주소를 입력해 주세요.");
+      setProjectMessage(m.projectMessageSlugRequired);
       return;
     }
 
@@ -510,26 +526,26 @@ function EditorPageInner() {
           }
         }
 
-        setProjectMessage("프로젝트 저장에 실패했습니다.");
+        setProjectMessage(m.projectMessageSaveFailed);
         return;
       }
 
       const data = await response.json();
-      setProjectMessage(`프로젝트가 저장되었습니다: ${data.slug}`);
+      setProjectMessage(`${m.projectMessageSaveSuccessPrefix}${data.slug}`);
 
       if (typeof window !== "undefined") {
         window.location.href = "/projects";
       }
     } catch (error) {
       console.error(error);
-      setProjectMessage("프로젝트 저장 중 오류가 발생했습니다.");
+      setProjectMessage(m.projectMessageSaveError);
     }
   };
 
   const handleLoadProject = async () => {
     const slug = (projectConfig.slug ?? "").trim();
     if (!slug) {
-      setProjectMessage("불러올 주소를 입력해 주세요.");
+      setProjectMessage(m.projectMessageLoadSlugRequired);
       return;
     }
 
@@ -552,7 +568,7 @@ function EditorPageInner() {
               // 다른 프로젝트(slug)를 불러왔으므로 이전 history/future 를 초기화한다.
               resetHistory();
 
-              setProjectMessage(`로컬에서 프로젝트를 불러왔습니다: ${slug}`);
+              setProjectMessage(`${m.projectMessageLoadLocalSuccessPrefix}${slug}`);
               return;
             }
           } catch {
@@ -564,7 +580,7 @@ function EditorPageInner() {
       // 2) 로컬에 없으면 서버에서 조회
       const response = await fetch(`/api/projects/${slug}`);
       if (!response.ok) {
-        setProjectMessage("프로젝트를 불러오지 못했습니다.");
+        setProjectMessage(m.projectMessageLoadFailed);
         return;
       }
 
@@ -580,28 +596,26 @@ function EditorPageInner() {
         // 서버에서 다른 프로젝트를 불러온 뒤에는 이전 history/future 를 모두 비운다.
         resetHistory();
 
-        setProjectMessage(`프로젝트를 불러왔습니다: ${slug}`);
+        setProjectMessage(`${m.projectMessageLoadServerSuccessPrefix}${slug}`);
       } else {
-        setProjectMessage("프로젝트 데이터 형식이 올바르지 않습니다.");
+        setProjectMessage(m.projectMessageInvalidFormat);
       }
     } catch (error) {
       console.error(error);
-      setProjectMessage("프로젝트 불러오기 중 오류가 발생했습니다.");
+      setProjectMessage(m.projectMessageLoadError);
     }
   };
 
   const handleDeleteProject = async () => {
     const slug = (projectConfig.slug ?? "").trim();
     if (!slug) {
-      setProjectMessage("삭제할 프로젝트 주소가 없습니다.");
+      setProjectMessage(m.projectMessageDeleteSlugMissing);
       return;
     }
 
     if (typeof window === "undefined") return;
 
-    const confirmed = window.confirm(
-      "현재 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
-    );
+    const confirmed = window.confirm(m.confirmDeleteProject);
     if (!confirmed) return;
 
     try {
@@ -610,7 +624,7 @@ function EditorPageInner() {
       });
 
       if (!response.ok) {
-        setProjectMessage("프로젝트 삭제에 실패했습니다.");
+        setProjectMessage(m.projectMessageDeleteFailed);
         return;
       }
 
@@ -618,12 +632,12 @@ function EditorPageInner() {
       window.localStorage.removeItem(`pb:project:${slug}`);
       window.localStorage.removeItem(`pb:autosave:${slug}`);
 
-      setProjectMessage("프로젝트가 삭제되었습니다.");
+      setProjectMessage(m.projectMessageDeleteSuccess);
 
       window.location.href = "/projects";
     } catch (error) {
       console.error(error);
-      setProjectMessage("프로젝트 삭제 중 오류가 발생했습니다.");
+      setProjectMessage(m.projectMessageDeleteError);
     }
   };
 
@@ -1063,7 +1077,11 @@ function EditorPageInner() {
             selectListItem={selectListItem}
             allBlocks={blocks}
             renderBlocks={renderBlocks}
-            updateBlock={updateBlock}
+            updateBlock={(id, partial) => updateBlock(id, partial as any)}
+            listItemToolbarMoveUpLabel={m.listItemToolbarMoveUpLabel}
+            listItemToolbarMoveDownLabel={m.listItemToolbarMoveDownLabel}
+            listItemToolbarIndentLabel={m.listItemToolbarIndentLabel}
+            listItemToolbarOutdentLabel={m.listItemToolbarOutdentLabel}
           />
         </Fragment>
       );
@@ -1077,8 +1095,8 @@ function EditorPageInner() {
             <Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" />
           </span>
           <div className="flex flex-col">
-            <h1 className="text-xl font-semibold">Page Editor</h1>
-            <p className="text-xs text-slate-400">빌더 MVP용 에디터 페이지 골격</p>
+            <h1 className="text-xl font-semibold">{m.headerTitle}</h1>
+            <p className="text-xs text-slate-400">{m.headerDescription}</p>
           </div>
         </div>
         <div className="flex items-center gap-2 text-xs">
@@ -1087,14 +1105,14 @@ function EditorPageInner() {
             className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-3 py-1 text-slate-100 hover:bg-slate-800"
           >
             <ListChecks className="w-3 h-3" aria-hidden="true" />
-            <span>프로젝트 목록</span>
+            <span>{m.navProjects}</span>
           </Link>
           <Link
             href={previewHref}
             className="inline-flex items-center gap-1 rounded border border-slate-700 bg-slate-900 px-3 py-1 text-slate-100 hover:bg-slate-800"
           >
             <Eye className="w-3 h-3" aria-hidden="true" />
-            <span>프리뷰 열기</span>
+            <span>{m.navPreview}</span>
           </Link>
           <button
             type="button"
@@ -1103,7 +1121,7 @@ function EditorPageInner() {
             disabled={!canUndo}
           >
             <Undo2 className="w-3 h-3" aria-hidden="true" />
-            <span>실행 취소</span>
+            <span>{m.undoLabel}</span>
           </button>
           <button
             type="button"
@@ -1112,7 +1130,7 @@ function EditorPageInner() {
             disabled={!canRedo}
           >
             <Redo2 className="w-3 h-3" aria-hidden="true" />
-            <span>다시 실행</span>
+            <span>{m.redoLabel}</span>
           </button>
           <div className="relative">
             <button
@@ -1121,7 +1139,7 @@ function EditorPageInner() {
               onClick={() => setMenuOpen((prev) => !prev)}
             >
               <FilePlus2 className="w-3 h-3" aria-hidden="true" />
-              <span>메뉴</span>
+              <span>{m.menuLabel}</span>
               <span className="text-[9px]">▼</span>
             </button>
             {menuOpen && (
@@ -1136,7 +1154,7 @@ function EditorPageInner() {
                 >
                   <span className="inline-flex items-center gap-2">
                     <FilePlus2 className="w-3 h-3" aria-hidden="true" />
-                    <span>프로젝트 저장/불러오기</span>
+                    <span>{m.menuProjectSaveLoad}</span>
                   </span>
                 </button>
                 <button
@@ -1149,7 +1167,7 @@ function EditorPageInner() {
                 >
                   <span className="inline-flex items-center gap-2">
                     <FilePlus2 className="w-3 h-3" aria-hidden="true" />
-                    <span>JSON 내보내기/불러오기</span>
+                    <span>{m.menuJsonImportExport}</span>
                   </span>
                 </button>
                 <button
@@ -1162,22 +1180,7 @@ function EditorPageInner() {
                 >
                   <span className="inline-flex items-center gap-2">
                     <FilePlus2 className="w-3 h-3" aria-hidden="true" />
-                    <span>페이지 파일로 내보내기 (ZIP)</span>
-                  </span>
-                </button>
-                <button
-                  type="button"
-                  className="w-full px-3 py-2 text-left hover:bg-red-900/60 text-red-100 border-t border-slate-800"
-                  onClick={() => {
-                    setMenuOpen(false);
-                    if (window.confirm("캔버스를 모두 초기화할까요? 이 작업은 실행 취소로만 되돌릴 수 있습니다.")) {
-                      handleClearCanvas();
-                    }
-                  }}
-                >
-                  <span className="inline-flex items-center gap-2">
-                    <Trash2 className="w-3 h-3" aria-hidden="true" />
-                    <span>캔버스 초기화</span>
+                    <span>{m.menuExportZip}</span>
                   </span>
                 </button>
                 <button
@@ -1190,7 +1193,7 @@ function EditorPageInner() {
                 >
                   <span className="inline-flex items-center gap-2 text-red-500">
                     <Trash2 className="w-3 h-3" aria-hidden="true" />
-                    <span>프로젝트 삭제</span>
+                    <span>{m.menuDeleteProject}</span>
                   </span>
                 </button>
               </div>
@@ -1235,7 +1238,7 @@ function EditorPageInner() {
         <div className="fixed inset-0 z-30 flex items-center justify-center bg-black/60">
           <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-4 text-xs text-slate-900 shadow-xl dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
             <div className="flex items-center justify-between mb-3">
-              <h3 className="text-sm font-medium">프로젝트 저장 / 불러오기</h3>
+              <h3 className="text-sm font-medium">{m.modalProjectTitle}</h3>
               <button
                 type="button"
                 className="text-slate-400 hover:text-slate-700 text-sm dark:hover:text-slate-100"
@@ -1246,7 +1249,7 @@ function EditorPageInner() {
             </div>
             <div className="space-y-2">
               <label className="flex flex-col gap-1">
-                <span className="text-slate-600 dark:text-slate-400">프로젝트 제목</span>
+                <span className="text-slate-600 dark:text-slate-400">{m.modalProjectTitleLabel}</span>
                 <input
                   className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                   value={projectConfig.title ?? ""}
@@ -1254,7 +1257,7 @@ function EditorPageInner() {
                 />
               </label>
               <label className="flex flex-col gap-1">
-                <span className="text-slate-600 dark:text-slate-400">프로젝트 주소 (예: my-landing)</span>
+                <span className="text-slate-600 dark:text-slate-400">{m.modalProjectSlugLabel}</span>
                 <input
                   className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                   value={projectConfig.slug ?? ""}
@@ -1267,14 +1270,14 @@ function EditorPageInner() {
                   className="flex-1 rounded border border-sky-500 bg-sky-50 px-2 py-1 text-sky-700 hover:bg-sky-100 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-100 dark:hover:bg-sky-900"
                   onClick={handleSaveProject}
                 >
-                  저장 (로컬 + 서버)
+                  {m.modalSaveButton}
                 </button>
                 <button
                   type="button"
                   className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                   onClick={handleLoadProject}
                 >
-                  불러오기
+                  {m.modalLoadButton}
                 </button>
               </div>
               {projectMessage && (
@@ -1292,10 +1295,8 @@ function EditorPageInner() {
           <div className="w-full max-w-2xl rounded-lg border border-slate-200 bg-white p-4 text-xs text-slate-900 shadow-xl dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
             <div className="flex items-center justify-between mb-3">
               <h3 className="text-sm font-medium">
-                JSON Export / Import
-                <span className="text-xs text-slate-500 dark:text-slate-400">
-                  * 에디터 내용을 가져오거나 내보낼 수 있습니다.
-                </span>
+                {m.jsonModalTitle}
+                <span className="text-xs text-slate-500 dark:text-slate-400">{m.jsonModalSubtitle}</span>
               </h3>
               <button
                 type="button"
@@ -1312,19 +1313,19 @@ function EditorPageInner() {
                   className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                   onClick={handleExportJson}
                 >
-                  JSON 내보내기
+                  {m.jsonExportButton}
                 </button>
                 <button
                   type="button"
                   className="rounded border border-red-300 bg-white px-2 py-1 text-red-700 hover:bg-red-50 dark:border-red-700 dark:bg-red-950 dark:text-red-100 dark:hover:bg-red-900"
                   onClick={handleClearCanvas}
                 >
-                  캔버스 초기화
+                  {m.jsonClearCanvasButton}
                 </button>
               </div>
               <div className="grid grid-cols-2 gap-3">
                 <label className="flex flex-col gap-1">
-                  <span className="text-slate-600 dark:text-slate-400">에디터 상태 JSON</span>
+                  <span className="text-slate-600 dark:text-slate-400">{m.jsonEditorStateLabel}</span>
                   <textarea
                     className="w-full h-48 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                     value={exportJson}
@@ -1332,7 +1333,7 @@ function EditorPageInner() {
                   />
                 </label>
                 <label className="flex flex-col gap-1">
-                  <span className="text-slate-600 dark:text-slate-400">JSON에서 불러오기</span>
+                  <span className="text-slate-600 dark:text-slate-400">{m.jsonImportLabel}</span>
                   <textarea
                     className="w-full h-48 rounded border border-slate-300 bg-white px-2 py-1 text-[10px] font-mono text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                     value={importJson}
@@ -1343,7 +1344,7 @@ function EditorPageInner() {
                     className="mt-1 w-full rounded border border-slate-300 bg-white px-2 py-1 text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                     onClick={handleApplyImportJson}
                   >
-                    JSON 적용하기
+                    {m.jsonApplyButton}
                   </button>
                 </label>
               </div>
@@ -1418,6 +1419,10 @@ interface SortableEditorBlockProps {
   allBlocks: Block[];
   renderBlocks: (targetBlocks: Block[]) => ReactNode;
   updateBlock: (id: string, partial: Partial<TextBlockProps & ButtonBlockProps & FormBlockProps>) => void;
+  listItemToolbarMoveUpLabel: string;
+  listItemToolbarMoveDownLabel: string;
+  listItemToolbarIndentLabel: string;
+  listItemToolbarOutdentLabel: string;
 }
 
 function SortableEditorBlock({
@@ -1438,6 +1443,10 @@ function SortableEditorBlock({
   allBlocks,
   renderBlocks,
   updateBlock,
+  listItemToolbarMoveUpLabel,
+  listItemToolbarMoveDownLabel,
+  listItemToolbarIndentLabel,
+  listItemToolbarOutdentLabel,
 }: SortableEditorBlockProps) {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: block.id,
@@ -2172,7 +2181,9 @@ function SortableEditorBlock({
                       <span className="ml-2 inline-flex items-center gap-1 text-[10px] text-slate-900 dark:text-slate-300 align-middle">
                         <button
                           type="button"
-                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
+                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
+                          aria-label={listItemToolbarMoveUpLabel}
+                          title={listItemToolbarMoveUpLabel}
                           onClick={(event) => {
                             event.stopPropagation();
                             selectBlock(block.id);
@@ -2180,11 +2191,13 @@ function SortableEditorBlock({
                             (useEditorStore.getState() as any).moveSelectedListItemUp(block.id);
                           }}
                         >
-                          위
+                          <ArrowUp className="w-3 h-3" aria-hidden="true" />
                         </button>
                         <button
                           type="button"
-                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
+                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
+                          aria-label={listItemToolbarMoveDownLabel}
+                          title={listItemToolbarMoveDownLabel}
                           onClick={(event) => {
                             event.stopPropagation();
                             selectBlock(block.id);
@@ -2192,11 +2205,13 @@ function SortableEditorBlock({
                             (useEditorStore.getState() as any).moveSelectedListItemDown(block.id);
                           }}
                         >
-                          아래
+                          <ArrowDown className="w-3 h-3" aria-hidden="true" />
                         </button>
                         <button
                           type="button"
-                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
+                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
+                          aria-label={listItemToolbarIndentLabel}
+                          title={listItemToolbarIndentLabel}
                           onClick={(event) => {
                             event.stopPropagation();
                             selectBlock(block.id);
@@ -2204,11 +2219,13 @@ function SortableEditorBlock({
                             (useEditorStore.getState() as any).indentSelectedListItem(block.id);
                           }}
                         >
-                          들여쓰기
+                          <IndentIncrease className="w-3 h-3" aria-hidden="true" />
                         </button>
                         <button
                           type="button"
-                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800"
+                          className="rounded border border-slate-700 px-1 py-0.5 hover:bg-slate-800 inline-flex items-center justify-center"
+                          aria-label={listItemToolbarOutdentLabel}
+                          title={listItemToolbarOutdentLabel}
                           onClick={(event) => {
                             event.stopPropagation();
                             selectBlock(block.id);
@@ -2216,7 +2233,7 @@ function SortableEditorBlock({
                             (useEditorStore.getState() as any).outdentSelectedListItem(block.id);
                           }}
                         >
-                          내어쓰기
+                          <IndentDecrease className="w-3 h-3" aria-hidden="true" />
                         </button>
                       </span>
                       {node.children && node.children.length > 0 && renderListNodes(node.children, level + 1)}
diff --git a/src/app/editor/panels/BlocksSidebar.tsx b/src/app/editor/panels/BlocksSidebar.tsx
index d09826d..7a19e56 100644
--- a/src/app/editor/panels/BlocksSidebar.tsx
+++ b/src/app/editor/panels/BlocksSidebar.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useState } from "react";
 import { useEditorStore } from "@/features/editor/state/editorStore";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorSidebarMessages } from "@/features/i18n/messages/editorSidebar";
 import {
   FilePlus2,
   ListChecks,
@@ -21,6 +23,8 @@ import {
 
 // 좌측 블록/폼/템플릿 추가 사이드바를 분리한 컴포넌트
 export function BlocksSidebar() {
+  const locale = useAppLocale();
+  const m = getEditorSidebarMessages(locale);
   const addTextBlock = useEditorStore((state) => state.addTextBlock);
   const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
   const addImageBlock = useEditorStore((state) => state.addImageBlock);
@@ -103,7 +107,7 @@ export function BlocksSidebar() {
         >
           <span className="inline-flex items-center gap-2">
             <Pencil className="w-4 h-4 text-sky-400" aria-hidden="true" />
-            <span>블록</span>
+            <span>{m.blocksTitle}</span>
           </span>
         </button>
       </h2>
@@ -116,7 +120,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <Type className="w-3 h-3" aria-hidden="true" />
-              <span>텍스트</span>
+              <span>{m.blocksText}</span>
             </span>
           </button>
           <button
@@ -126,7 +130,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <MousePointerClick className="w-3 h-3" aria-hidden="true" />
-              <span>버튼</span>
+              <span>{m.blocksButton}</span>
             </span>
           </button>
           <button
@@ -136,7 +140,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <ImageIcon className="w-3 h-3" aria-hidden="true" />
-              <span>이미지</span>
+              <span>{m.blocksImage}</span>
             </span>
           </button>
           <button
@@ -146,7 +150,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <Video className="w-3 h-3" aria-hidden="true" />
-              <span>비디오</span>
+              <span>{m.blocksVideo}</span>
             </span>
           </button>
           <button
@@ -156,7 +160,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <Minus className="w-3 h-3" aria-hidden="true" />
-              <span>구분선</span>
+              <span>{m.blocksDivider}</span>
             </span>
           </button>
           <button
@@ -166,7 +170,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <List className="w-3 h-3" aria-hidden="true" />
-              <span>리스트</span>
+              <span>{m.blocksList}</span>
             </span>
           </button>
           <button
@@ -176,7 +180,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <LayoutTemplate className="w-3 h-3" aria-hidden="true" />
-              <span>섹션</span>
+              <span>{m.blocksSection}</span>
             </span>
           </button>
         </>
@@ -192,7 +196,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <ListChecks className="w-3 h-3" aria-hidden="true" />
-              <span>폼 요소</span>
+              <span>{m.formsTitle}</span>
             </span>
           </button>
         </h3>
@@ -205,7 +209,7 @@ export function BlocksSidebar() {
             >
               <span className="inline-flex items-center gap-2">
                 <FilePlus2 className="w-3 h-3" aria-hidden="true" />
-                <span>폼 컨트롤러</span>
+                <span>{m.formsController}</span>
               </span>
             </button>
             <button
@@ -215,7 +219,7 @@ export function BlocksSidebar() {
             >
               <span className="inline-flex items-center gap-2">
                 <FileText className="w-3 h-3" aria-hidden="true" />
-                <span>입력(Input)</span>
+                <span>{m.formsInput}</span>
               </span>
             </button>
             <button
@@ -225,7 +229,7 @@ export function BlocksSidebar() {
             >
               <span className="inline-flex items-center gap-2">
                 <ListFilter className="w-3 h-3" aria-hidden="true" />
-                <span>셀렉트(Select)</span>
+                <span>{m.formsSelect}</span>
               </span>
             </button>
             <button
@@ -235,7 +239,7 @@ export function BlocksSidebar() {
             >
               <span className="inline-flex items-center gap-2">
                 <CircleDot className="w-3 h-3" aria-hidden="true" />
-                <span>단일 선택(Radio)</span>
+                <span>{m.formsRadio}</span>
               </span>
             </button>
             <button
@@ -245,7 +249,7 @@ export function BlocksSidebar() {
             >
               <span className="inline-flex items-center gap-2">
                 <SquareCheck className="w-3 h-3" aria-hidden="true" />
-                <span>다중 선택(Checkbox)</span>
+                <span>{m.formsCheckbox}</span>
               </span>
             </button>
           </>
@@ -262,7 +266,7 @@ export function BlocksSidebar() {
           >
             <span className="inline-flex items-center gap-2">
               <FilePlus2 className="w-3 h-3" aria-hidden="true" />
-              <span>템플릿</span>
+              <span>{m.templatesTitle}</span>
             </span>
           </button>
         </h3>
@@ -270,7 +274,7 @@ export function BlocksSidebar() {
         {isTemplatesOpen && (
           <div className="space-y-3">
             <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">히어로 · CTA</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupHeroCta}</p>
               <div className="space-y-2">
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                   <div className="flex items-center justify-between gap-2">
@@ -279,7 +283,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddHeroTemplate}
                     >
-                      Hero 템플릿
+                      {m.templateHeroLabel}
                     </button>
                     <div
                       data-testid="template-preview-hero"
@@ -292,9 +296,7 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">
-                    페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)
-                  </p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateHeroDescription}</p>
                 </div>
 
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
@@ -304,7 +306,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddCtaTemplate}
                     >
-                      CTA 템플릿
+                      {m.templateCtaLabel}
                     </button>
                     <div
                       data-testid="template-preview-cta"
@@ -319,13 +321,13 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">콜투액션(CTA) 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateCtaDescription}</p>
                 </div>
               </div>
             </div>
 
             <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">콘텐츠 섹션</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupContent}</p>
               <div className="space-y-2">
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                   <div className="flex items-center justify-between gap-2">
@@ -334,7 +336,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddFeaturesTemplate}
                     >
-                      기능 템플릿
+                      {m.templateFeaturesLabel}
                     </button>
                     <div
                       data-testid="template-preview-features"
@@ -354,7 +356,7 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">3컬럼 기능 소개 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateFeaturesDescription}</p>
                 </div>
 
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
@@ -364,7 +366,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddFaqTemplate}
                     >
-                      FAQ 템플릿
+                      {m.templateFaqLabel}
                     </button>
                     <div
                       data-testid="template-preview-faq"
@@ -380,7 +382,7 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">자주 묻는 질문(FAQ) 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateFaqDescription}</p>
                 </div>
 
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
@@ -390,7 +392,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddPricingTemplate}
                     >
-                      상품 템플릿
+                      {m.templatePricingLabel}
                     </button>
                     <div
                       data-testid="template-preview-pricing"
@@ -411,7 +413,7 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">요금제/플랜 소개 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templatePricingDescription}</p>
                 </div>
 
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
@@ -421,7 +423,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddBlogTemplate}
                     >
-                      블로그 템플릿
+                      {m.templateBlogLabel}
                     </button>
                     <div
                       data-testid="template-preview-blog"
@@ -444,13 +446,13 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">블로그 포스트 목록 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateBlogDescription}</p>
                 </div>
               </div>
             </div>
 
             <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">신뢰/소개</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupTrust}</p>
               <div className="space-y-2">
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                   <div className="flex items-center justify-between gap-2">
@@ -459,7 +461,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddTestimonialsTemplate}
                     >
-                      후기 템플릿
+                      {m.templateTestimonialsLabel}
                     </button>
                     <div
                       data-testid="template-preview-testimonials"
@@ -479,7 +481,7 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">고객 후기(Testimonials) 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateTestimonialsDescription}</p>
                 </div>
 
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
@@ -489,7 +491,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddTeamTemplate}
                     >
-                      Team 템플릿
+                      {m.templateTeamLabel}
                     </button>
                     <div
                       data-testid="template-preview-team"
@@ -512,13 +514,13 @@ export function BlocksSidebar() {
                       </div>
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">팀 소개 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateTeamDescription}</p>
                 </div>
               </div>
             </div>
 
             <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">푸터/기타</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark:text-slate-400">{m.templatesGroupFooter}</p>
               <div className="space-y-2">
                 <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                   <div className="flex items-center justify-between gap-2">
@@ -527,7 +529,7 @@ export function BlocksSidebar() {
                       className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                       onClick={handleAddFooterTemplate}
                     >
-                      Footer 템플릿
+                      {m.templateFooterLabel}
                     </button>
                     <div
                       data-testid="template-preview-footer"
@@ -541,7 +543,7 @@ export function BlocksSidebar() {
                       <div className="flex-1 h-[1px] bg-slate-700/40" />
                     </div>
                   </div>
-                  <p className="text-[10px] text-slate-400 leading-snug">페이지 푸터 섹션</p>
+                  <p className="text-[10px] text-slate-400 leading-snug">{m.templateFooterDescription}</p>
                 </div>
               </div>
             </div>
diff --git a/src/app/editor/panels/ButtonPropertiesPanel.tsx b/src/app/editor/panels/ButtonPropertiesPanel.tsx
index 31622c3..efb1bd0 100644
--- a/src/app/editor/panels/ButtonPropertiesPanel.tsx
+++ b/src/app/editor/panels/ButtonPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { ButtonBlockProps } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorButtonPanelMessages } from "@/features/i18n/messages/editorButtonPanel";
 
 export type ButtonPropertiesPanelProps = {
   buttonProps: ButtonBlockProps;
@@ -11,6 +13,8 @@ export type ButtonPropertiesPanelProps = {
 };
 
 export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBlock }: ButtonPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorButtonPanelMessages(locale);
   const imageSource: "none" | "url" | "upload" = (() => {
     const hasSrc = (buttonProps.imageSrc ?? "").trim() !== "";
     if (!hasSrc) return "none";
@@ -22,10 +26,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
     <>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>버튼 텍스트</span>
+          <span>{m.buttonTextLabel}</span>
           <textarea
             className="w-full min-h-[60px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="버튼 텍스트"
+            aria-label={m.buttonTextAria}
             value={buttonProps.label}
             onChange={(e) => {
               updateBlock(selectedBlockId, { label: e.target.value } as any);
@@ -34,14 +38,14 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
         </label>
       </div>
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">버튼 이미지</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.imageSectionTitle}</h4>
 
         <div className="space-y-1">
           <label className="flex flex-col gap-1">
-            <span>버튼 이미지 소스</span>
+            <span>{m.imageSourceLabel}</span>
             <select
               className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              aria-label="버튼 이미지 소스"
+              aria-label={m.imageSourceAria}
               value={imageSource}
               onChange={(e) => {
                 const next = e.target.value as "none" | "url" | "upload";
@@ -62,9 +66,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
                 }
               }}
             >
-              <option value="none">사용 안 함</option>
-              <option value="url">URL</option>
-              <option value="upload">파일 업로드</option>
+              <option value="none">{m.imageSourceOptionNone}</option>
+              <option value="url">{m.imageSourceOptionUrl}</option>
+              <option value="upload">{m.imageSourceOptionUpload}</option>
             </select>
           </label>
         </div>
@@ -72,10 +76,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
         {imageSource === "url" && (
           <div className="space-y-1">
             <label className="flex flex-col gap-1">
-              <span>버튼 이미지 URL</span>
+              <span>{m.imageUrlLabel}</span>
               <input
                 className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                aria-label="버튼 이미지 URL"
+                aria-label={m.imageUrlAria}
                 value={buttonProps.imageSrc ?? ""}
                 onChange={(e) => {
                   const value = e.target.value;
@@ -93,12 +97,12 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
         {imageSource === "upload" && (
           <div className="space-y-1">
             <label className="flex flex-col gap-1">
-              <span>버튼 이미지 파일 업로드</span>
+              <span>{m.imageUploadLabel}</span>
               <input
                 type="file"
                 accept="image/*"
                 className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
-                aria-label="버튼 이미지 파일 업로드"
+                aria-label={m.imageUploadAria}
                 onChange={async (event) => {
                   const file = event.target.files?.[0];
                   if (!file) return;
@@ -113,7 +117,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
                     });
 
                     if (!response.ok) {
-                      console.error("버튼 이미지 업로드 실패", await response.text());
+                      console.error("Button image upload failed", await response.text());
                       return;
                     }
 
@@ -126,7 +130,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
                       imageAssetId: data.id,
                     } as any);
                   } catch (error) {
-                    console.error("버튼 이미지 업로드 중 오류", error);
+                    console.error("Error while uploading button image", error);
                   } finally {
                     event.target.value = "";
                   }
@@ -140,10 +144,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
           <>
             <div className="space-y-1">
               <label className="flex flex-col gap-1">
-                <span>버튼 이미지 대체 텍스트</span>
+                <span>{m.imageAltLabel}</span>
                 <input
                   className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                  aria-label="버튼 이미지 대체 텍스트"
+                  aria-label={m.imageAltAria}
                   value={buttonProps.imageAlt ?? ""}
                   onChange={(e) => {
                     updateBlock(selectedBlockId, { imageAlt: e.target.value } as any);
@@ -154,10 +158,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
 
             <div className="space-y-1">
               <label className="flex flex-col gap-1">
-                <span>버튼 이미지 위치</span>
+                <span>{m.imagePlacementLabel}</span>
                 <select
                   className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                  aria-label="버튼 이미지 위치"
+                  aria-label={m.imagePlacementAria}
                   value={buttonProps.imagePlacement ?? "left"}
                   onChange={(e) => {
                     updateBlock(selectedBlockId, {
@@ -165,10 +169,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
                     } as any);
                   }}
                 >
-                  <option value="left">텍스트 왼쪽</option>
-                  <option value="right">텍스트 오른쪽</option>
-                  <option value="top">텍스트 위쪽</option>
-                  <option value="bottom">텍스트 아래쪽</option>
+                  <option value="left">{m.imagePlacementOptionLeft}</option>
+                  <option value="right">{m.imagePlacementOptionRight}</option>
+                  <option value="top">{m.imagePlacementOptionTop}</option>
+                  <option value="bottom">{m.imagePlacementOptionBottom}</option>
                 </select>
               </label>
             </div>
@@ -177,7 +181,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <NumericPropertyControl
-          label="가로 패딩 (px)"
+          label={m.paddingXLabel}
           unitLabel="(px)"
           value={buttonProps.paddingX ?? 16}
           min={0}
@@ -199,7 +203,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <NumericPropertyControl
-          label="세로 패딩 (px)"
+          label={m.paddingYLabel}
           unitLabel="(px)"
           value={buttonProps.paddingY ?? 10}
           min={0}
@@ -221,10 +225,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>버튼 링크</span>
+          <span>{m.linkLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="버튼 링크"
+            aria-label={m.linkAria}
             value={buttonProps.href}
             onChange={(e) => {
               updateBlock(selectedBlockId, { href: e.target.value } as any);
@@ -234,19 +238,19 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>정렬</span>
+          <span>{m.alignLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="버튼 정렬"
+            aria-label={m.alignAria}
             value={buttonProps.align ?? "left"}
             onChange={(e) => {
               const value = e.target.value as NonNullable<ButtonBlockProps["align"]>;
               updateBlock(selectedBlockId, { align: value } as any);
             }}
           >
-            <option value="left">왼쪽</option>
-            <option value="center">가운데</option>
-            <option value="right">오른쪽</option>
+            <option value="left">{m.alignOptionLeft}</option>
+            <option value="center">{m.alignOptionCenter}</option>
+            <option value="right">{m.alignOptionRight}</option>
           </select>
         </label>
       </div>
@@ -255,9 +259,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <ColorPickerField
-          label="텍스트 색상"
-          ariaLabelColorInput="버튼 텍스트 색상 피커"
-          ariaLabelHexInput="버튼 텍스트 색상 HEX"
+          label={m.textColorLabel}
+          ariaLabelColorInput={m.textColorPickerAria}
+          ariaLabelHexInput={m.textColorHexAria}
           value={
             buttonProps.textColorCustom && buttonProps.textColorCustom.trim() !== ""
               ? buttonProps.textColorCustom
@@ -278,27 +282,27 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>스타일</span>
+          <span>{m.styleLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="버튼 스타일"
+            aria-label={m.styleAria}
             value={buttonProps.variant ?? "solid"}
             onChange={(e) => {
               const value = e.target.value as NonNullable<ButtonBlockProps["variant"]>;
               updateBlock(selectedBlockId, { variant: value } as any);
             }}
           >
-            <option value="solid">채움</option>
-            <option value="outline">외곽선</option>
-            <option value="ghost">고스트</option>
+            <option value="solid">{m.styleOptionSolid}</option>
+            <option value="outline">{m.styleOptionOutline}</option>
+            <option value="ghost">{m.styleOptionGhost}</option>
           </select>
         </label>
       </div>
       <div className="space-y-1">
         <ColorPickerField
-          label="채움 색상"
-          ariaLabelColorInput="버튼 채움 색상 피커"
-          ariaLabelHexInput="버튼 채움 색상 HEX"
+          label={m.fillColorLabel}
+          ariaLabelColorInput={m.fillColorPickerAria}
+          ariaLabelHexInput={m.fillColorHexAria}
           value={
             buttonProps.fillColorCustom && buttonProps.fillColorCustom.trim() !== ""
               ? buttonProps.fillColorCustom
@@ -319,9 +323,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <ColorPickerField
-          label="외곽선 색상"
-          ariaLabelColorInput="버튼 외곽선 색상 피커"
-          ariaLabelHexInput="버튼 외곽선 색상 HEX"
+          label={m.strokeColorLabel}
+          ariaLabelColorInput={m.strokeColorPickerAria}
+          ariaLabelHexInput={m.strokeColorHexAria}
           value={
             buttonProps.strokeColorCustom && buttonProps.strokeColorCustom.trim() !== ""
               ? buttonProps.strokeColorCustom
@@ -342,7 +346,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <NumericPropertyControl
-          label="모서리 둥글기"
+          label={m.borderRadiusLabel}
           value={(() => {
             const r = buttonProps.borderRadius ?? "md";
             return r === "none" ? 0 : r === "sm" ? 1 : r === "lg" ? 3 : r === "full" ? 4 : 2;
@@ -351,11 +355,11 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
           max={4}
           step={1}
           presets={[
-            { id: "none", label: "없음", value: 0 },
-            { id: "sm", label: "작게", value: 1 },
-            { id: "md", label: "보통", value: 2 },
-            { id: "lg", label: "크게", value: 3 },
-            { id: "full", label: "완전 둥글게", value: 4 },
+            { id: "none", label: m.borderRadiusPresetNone, value: 0 },
+            { id: "sm", label: m.borderRadiusPresetSmall, value: 1 },
+            { id: "md", label: m.borderRadiusPresetMedium, value: 2 },
+            { id: "lg", label: m.borderRadiusPresetLarge, value: 3 },
+            { id: "full", label: m.borderRadiusPresetFull, value: 4 },
           ]}
           onChangeValue={(v) => {
             const next =
@@ -366,10 +370,10 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>버튼 너비 모드</span>
+          <span>{m.widthModeLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="버튼 너비 모드"
+            aria-label={m.widthModeAria}
             value={buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")}
             onChange={(e) => {
               updateBlock(selectedBlockId, {
@@ -377,23 +381,23 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
               } as any);
             }}
           >
-            <option value="auto">자동</option>
-            <option value="full">전체 폭</option>
-            <option value="fixed">고정 값</option>
+            <option value="auto">{m.widthModeOptionAuto}</option>
+            <option value="full">{m.widthModeOptionFull}</option>
+            <option value="fixed">{m.widthModeOptionFixed}</option>
           </select>
         </label>
         {(buttonProps.widthMode ?? (buttonProps.fullWidth ? "full" : "auto")) === "fixed" && (
           <NumericPropertyControl
-            label="버튼 고정 너비"
-            unitLabel="(px)"
+            label={m.fixedWidthLabel}
+            unitLabel={m.fixedWidthUnitLabel}
             value={buttonProps.widthPx ?? 240}
             min={80}
             max={600}
             step={10}
             presets={[
-              { id: "sm", label: "작게", value: 180 },
-              { id: "md", label: "보통", value: 240 },
-              { id: "lg", label: "넓게", value: 320 },
+              { id: "sm", label: m.fixedWidthPresetSmall, value: 180 },
+              { id: "md", label: m.fixedWidthPresetMedium, value: 240 },
+              { id: "lg", label: m.fixedWidthPresetLarge, value: 320 },
             ]}
             onChangeValue={(v) => {
               updateBlock(selectedBlockId, {
@@ -405,8 +409,8 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <NumericPropertyControl
-          label="버튼 크기"
-          unitLabel="(px)"
+          label={m.fontSizeLabel}
+          unitLabel={m.fontSizeUnitLabel}
           value={(() => {
             const raw = buttonProps.fontSizeCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -437,7 +441,7 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <NumericPropertyControl
-          label="줄 간격"
+          label={m.lineHeightLabel}
           value={(() => {
             const raw = buttonProps.lineHeightCustom ?? "";
             const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -448,9 +452,9 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
           max={3}
           step={0.05}
           presets={[
-            { id: "tight", label: "좁게", value: 1.1 },
-            { id: "normal", label: "보통", value: 1.4 },
-            { id: "relaxed", label: "넓게", value: 1.8 },
+            { id: "tight", label: m.lineHeightPresetTight, value: 1.1 },
+            { id: "normal", label: m.lineHeightPresetNormal, value: 1.4 },
+            { id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
           ]}
           onChangeValue={(v) => {
             updateBlock(selectedBlockId, {
@@ -461,8 +465,8 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
       </div>
       <div className="space-y-1">
         <NumericPropertyControl
-          label="글자 간격"
-          unitLabel="(px)"
+          label={m.letterSpacingLabel}
+          unitLabel={m.letterSpacingUnitLabel}
           value={(() => {
             const raw = buttonProps.letterSpacingCustom ?? "";
             const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -476,11 +480,11 @@ export function ButtonPropertiesPanel({ buttonProps, selectedBlockId, updateBloc
           max={32}
           step={1}
           presets={[
-            { id: "tighter", label: "아주 좁게", value: -1.5 },
-            { id: "tight", label: "좁게", value: -0.5 },
-            { id: "normal", label: "보통", value: 0 },
-            { id: "wide", label: "넓게", value: 1 },
-            { id: "wider", label: "아주 넓게", value: 2 },
+            { id: "tighter", label: m.letterSpacingPresetTighter, value: -1.5 },
+            { id: "tight", label: m.letterSpacingPresetTight, value: -0.5 },
+            { id: "normal", label: m.letterSpacingPresetNormal, value: 0 },
+            { id: "wide", label: m.letterSpacingPresetWide, value: 1 },
+            { id: "wider", label: m.letterSpacingPresetWider, value: 2 },
           ]}
           onChangeValue={(px) => {
             const em = px / 16;
diff --git a/src/app/editor/panels/DividerPropertiesPanel.tsx b/src/app/editor/panels/DividerPropertiesPanel.tsx
index 046e04e..6183d9e 100644
--- a/src/app/editor/panels/DividerPropertiesPanel.tsx
+++ b/src/app/editor/panels/DividerPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { DividerBlockProps } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorDividerPropertiesPanelMessages } from "@/features/i18n/messages/editorDividerPropertiesPanel";
 
 export type DividerPropertiesPanelProps = {
   dividerProps: DividerBlockProps;
@@ -11,77 +13,80 @@ export type DividerPropertiesPanelProps = {
 };
 
 export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorDividerPropertiesPanelMessages(locale);
+
   return (
     <>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>정렬</span>
+          <span>{m.alignLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="구분선 정렬"
+            aria-label={m.alignAria}
             value={dividerProps.align}
             onChange={(e) => {
               const value = e.target.value as DividerBlockProps["align"];
               updateBlock(selectedBlockId, { align: value } as any);
             }}
           >
-            <option value="left">왼쪽</option>
-            <option value="center">가운데</option>
-            <option value="right">오른쪽</option>
+            <option value="left">{m.alignOptionLeft}</option>
+            <option value="center">{m.alignOptionCenter}</option>
+            <option value="right">{m.alignOptionRight}</option>
           </select>
         </label>
       </div>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>두께</span>
+          <span>{m.thicknessLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="구분선 두께"
+            aria-label={m.thicknessAria}
             value={dividerProps.thickness}
             onChange={(e) => {
               const value = e.target.value as DividerBlockProps["thickness"];
               updateBlock(selectedBlockId, { thickness: value } as any);
             }}
           >
-            <option value="thin">얇게</option>
-            <option value="medium">보통</option>
+            <option value="thin">{m.thicknessOptionThin}</option>
+            <option value="medium">{m.thicknessOptionMedium}</option>
           </select>
         </label>
       </div>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">구분선 스타일</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
 
         {/* 길이/너비 모드 */}
         <label className="flex flex-col gap-1">
-          <span>길이 모드</span>
+          <span>{m.lengthModeLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="구분선 길이 모드"
+            aria-label={m.lengthModeAria}
             value={dividerProps.widthMode ?? "full"}
             onChange={(e) => {
               const value = e.target.value as NonNullable<DividerBlockProps["widthMode"]>;
               updateBlock(selectedBlockId, { widthMode: value } as any);
             }}
           >
-            <option value="auto">내용에 맞춤</option>
-            <option value="full">전체 폭</option>
-            <option value="fixed">고정 길이 (px)</option>
+            <option value="auto">{m.lengthModeOptionAuto}</option>
+            <option value="full">{m.lengthModeOptionFull}</option>
+            <option value="fixed">{m.lengthModeOptionFixed}</option>
           </select>
         </label>
 
         {(dividerProps.widthMode ?? "full") === "fixed" && (
           <NumericPropertyControl
-            label="고정 길이 (px)"
-            unitLabel="(px)"
+            label={m.fixedLengthLabel}
+            unitLabel={m.fixedLengthUnitLabel}
             value={dividerProps.widthPx ?? 320}
             min={40}
             max={1200}
             step={10}
             presets={[
-              { id: "sm", label: "짧게", value: 240 },
-              { id: "md", label: "보통", value: 320 },
-              { id: "lg", label: "길게", value: 480 },
+              { id: "sm", label: m.fixedLengthPresetShort, value: 240 },
+              { id: "md", label: m.fixedLengthPresetNormal, value: 320 },
+              { id: "lg", label: m.fixedLengthPresetLong, value: 480 },
             ]}
             onChangeValue={(v) => {
               updateBlock(selectedBlockId, { widthPx: v } as any);
@@ -91,9 +96,9 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
 
         {/* 색상 */}
         <ColorPickerField
-          label="선 색상"
-          ariaLabelColorInput="구분선 색상 피커"
-          ariaLabelHexInput="구분선 색상 HEX"
+          label={m.colorLabel}
+          ariaLabelColorInput={m.colorPickerAria}
+          ariaLabelHexInput={m.colorHexAria}
           value={
             dividerProps.colorHex && dividerProps.colorHex.trim() !== ""
               ? dividerProps.colorHex
@@ -110,8 +115,8 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
 
         {/* 상하 여백 (슬라이더) */}
         <NumericPropertyControl
-          label="위/아래 여백"
-          unitLabel="(px)"
+          label={m.marginLabel}
+          unitLabel={m.marginUnitLabel}
           value={(() => {
             if (typeof dividerProps.marginYPx === "number") {
               return dividerProps.marginYPx;
@@ -123,9 +128,9 @@ export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBl
           max={50}
           step={2}
           presets={[
-            { id: "sm", label: "작게", value: 8 },
-            { id: "md", label: "보통", value: 16 },
-            { id: "lg", label: "크게", value: 24 },
+            { id: "sm", label: m.marginPresetSmall, value: 8 },
+            { id: "md", label: m.marginPresetNormal, value: 16 },
+            { id: "lg", label: m.marginPresetLarge, value: 24 },
           ]}
           onChangeValue={(v) => {
             updateBlock(selectedBlockId, { marginYPx: v } as any);
diff --git a/src/app/editor/panels/ImagePropertiesPanel.tsx b/src/app/editor/panels/ImagePropertiesPanel.tsx
index a989f46..d4b29a9 100644
--- a/src/app/editor/panels/ImagePropertiesPanel.tsx
+++ b/src/app/editor/panels/ImagePropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { ImageBlockProps } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorImagePanelMessages } from "@/features/i18n/messages/editorImagePanel";
 
 export type ImagePropertiesPanelProps = {
   imageProps: ImageBlockProps;
@@ -11,6 +13,8 @@ export type ImagePropertiesPanelProps = {
 };
 
 export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock }: ImagePropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorImagePanelMessages(locale);
   const source: "url" | "upload" =
     imageProps.sourceType === "asset" || (imageProps.src && imageProps.src.startsWith("/api/image/"))
       ? "upload"
@@ -20,10 +24,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
     <>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>이미지 소스</span>
+          <span>{m.imageSourceLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="이미지 소스"
+            aria-label={m.imageSourceAria}
             value={source}
             onChange={(e) => {
               const next = e.target.value as "url" | "upload";
@@ -39,8 +43,8 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
               }
             }}
           >
-            <option value="url">URL</option>
-            <option value="upload">파일 업로드</option>
+            <option value="url">{m.imageSourceOptionUrl}</option>
+            <option value="upload">{m.imageSourceOptionUpload}</option>
           </select>
         </label>
       </div>
@@ -48,10 +52,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
       {source === "url" && (
         <div className="space-y-1">
           <label className="flex flex-col gap-1 text-xs text-slate-400">
-            <span>이미지 URL</span>
+            <span>{m.imageUrlLabel}</span>
             <input
               className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              aria-label="이미지 URL"
+              aria-label={m.imageUrlAria}
               value={imageProps.src}
               onChange={(e) => {
                 const value = e.target.value;
@@ -69,12 +73,12 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
       {source === "upload" && (
         <div className="space-y-1">
           <label className="flex flex-col gap-1 text-xs text-slate-400">
-            <span>이미지 파일 업로드</span>
+            <span>{m.imageUploadLabel}</span>
             <input
               type="file"
               accept="image/*"
               className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
-              aria-label="이미지 파일 업로드"
+              aria-label={m.imageUploadAria}
               onChange={async (event) => {
                 const file = event.target.files?.[0];
                 if (!file) return;
@@ -89,7 +93,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
                   });
 
                   if (!response.ok) {
-                    console.error("이미지 업로드 실패", await response.text());
+                    console.error("Image upload failed", await response.text());
                     return;
                   }
 
@@ -102,7 +106,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
                     assetId: data.id,
                   } as any);
                 } catch (error) {
-                  console.error("이미지 업로드 중 오류", error);
+                  console.error("Error while uploading image", error);
                 } finally {
                   event.target.value = "";
                 }
@@ -113,10 +117,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
       )}
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>대체 텍스트</span>
+          <span>{m.altLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="대체 텍스트"
+            aria-label={m.altAria}
             value={imageProps.alt}
             onChange={(e) => {
               updateBlock(selectedBlockId, { alt: e.target.value } as any);
@@ -126,14 +130,14 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
       </div>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">이미지 스타일</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
 
         {/* 카드 배경색 */}
         <div className="space-y-1">
           <ColorPickerField
-            label="카드 배경색"
-            ariaLabelColorInput="이미지 카드 배경색 피커"
-            ariaLabelHexInput="이미지 카드 배경색 HEX"
+            label={m.cardBackgroundLabel}
+            ariaLabelColorInput={m.cardBackgroundPickerAria}
+            ariaLabelHexInput={m.cardBackgroundHexAria}
             value={imageProps.backgroundColorCustom ?? ""}
             onChange={(hex) => {
               const next = hex && hex.trim().length > 0 ? hex : undefined;
@@ -145,10 +149,10 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
 
         {/* 정렬 */}
         <label className="flex flex-col gap-1">
-          <span>정렬</span>
+          <span>{m.alignLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="이미지 정렬"
+            aria-label={m.alignAria}
             value={imageProps.align ?? "center"}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -156,18 +160,18 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
               } as any)
             }
           >
-            <option value="left">왼쪽</option>
-            <option value="center">가운데</option>
-            <option value="right">오른쪽</option>
+            <option value="left">{m.alignOptionLeft}</option>
+            <option value="center">{m.alignOptionCenter}</option>
+            <option value="right">{m.alignOptionRight}</option>
           </select>
         </label>
 
         {/* 너비 모드 */}
         <label className="flex flex-col gap-1">
-          <span>너비 모드</span>
+          <span>{m.widthModeLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="이미지 너비 모드"
+            aria-label={m.widthModeAria}
             value={imageProps.widthMode ?? "auto"}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -175,23 +179,23 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
               } as any)
             }
           >
-            <option value="auto">내용에 맞춤</option>
-            <option value="fixed">고정 너비 (px)</option>
+            <option value="auto">{m.widthModeOptionAuto}</option>
+            <option value="fixed">{m.widthModeOptionFixed}</option>
           </select>
         </label>
 
         {(imageProps.widthMode ?? "auto") === "fixed" && (
           <NumericPropertyControl
-            label="고정 너비 (px)"
-            unitLabel="(px)"
+            label={m.fixedWidthLabel}
+            unitLabel={m.fixedWidthUnitLabel}
             value={imageProps.widthPx ?? 320}
             min={40}
             max={1200}
             step={10}
             presets={[
-              { id: "sm", label: "작게", value: 240 },
-              { id: "md", label: "보통", value: 320 },
-              { id: "lg", label: "넓게", value: 480 },
+              { id: "sm", label: m.fixedWidthPresetSmall, value: 240 },
+              { id: "md", label: m.fixedWidthPresetMedium, value: 320 },
+              { id: "lg", label: m.fixedWidthPresetLarge, value: 480 },
             ]}
             onChangeValue={(v) => {
               updateBlock(selectedBlockId, {
@@ -203,7 +207,7 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
 
         {/* 모서리 둥글기 */}
         <NumericPropertyControl
-          label="모서리 둥글기"
+          label={m.borderRadiusLabel}
           value={(() => {
             if (typeof imageProps.borderRadiusPx === "number") {
               return imageProps.borderRadiusPx;
@@ -216,11 +220,11 @@ export function ImagePropertiesPanel({ imageProps, selectedBlockId, updateBlock
           max={200}
           step={1}
           presets={[
-            { id: "none", label: "없음", value: 0 },
-            { id: "sm", label: "작게", value: 20 },
-            { id: "md", label: "보통", value: 60 },
-            { id: "lg", label: "크게", value: 120 },
-            { id: "full", label: "완전 둥글게", value: 180 },
+            { id: "none", label: m.borderRadiusPresetNone, value: 0 },
+            { id: "sm", label: m.borderRadiusPresetSmall, value: 20 },
+            { id: "md", label: m.borderRadiusPresetMedium, value: 60 },
+            { id: "lg", label: m.borderRadiusPresetLarge, value: 120 },
+            { id: "full", label: m.borderRadiusPresetFull, value: 180 },
           ]}
           onChangeValue={(v) => {
             // 0~50 범위를 토큰으로 매핑한다.
diff --git a/src/app/editor/panels/ListPropertiesPanel.tsx b/src/app/editor/panels/ListPropertiesPanel.tsx
index 34e3cbd..eaf76ae 100644
--- a/src/app/editor/panels/ListPropertiesPanel.tsx
+++ b/src/app/editor/panels/ListPropertiesPanel.tsx
@@ -10,6 +10,8 @@ import {
 } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorListPanelMessages } from "@/features/i18n/messages/editorListPanel";
 
 export type ListPropertiesPanelProps = {
   listProps: ListBlockProps;
@@ -24,14 +26,16 @@ export function ListPropertiesPanel({
   selectedListItemId,
   updateBlock,
 }: ListPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorListPanelMessages(locale);
   return (
     <>
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>리스트 아이템 (줄바꿈으로 구분)</span>
+          <span>{m.listItemsLabel}</span>
           <textarea
             className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="리스트 아이템들"
+            aria-label={m.listItemsAria}
             value={(() => {
               const tree = (listProps as any).itemsTree as any[] | undefined;
 
@@ -83,30 +87,30 @@ export function ListPropertiesPanel({
       </div>
       <div className="flex items-center justify-between text-xs text-slate-400">
         <label className="flex items-center gap-2">
-          <span>정렬</span>
+          <span>{m.alignLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="리스트 정렬"
+            aria-label={m.alignAria}
             value={listProps.align}
             onChange={(e) => {
               const value = e.target.value as ListBlockProps["align"];
               updateBlock(selectedBlockId, { align: value } as any);
             }}
           >
-            <option value="left">왼쪽</option>
-            <option value="center">가운데</option>
-            <option value="right">오른쪽</option>
+            <option value="left">{m.alignOptionLeft}</option>
+            <option value="center">{m.alignOptionCenter}</option>
+            <option value="right">{m.alignOptionRight}</option>
           </select>
         </label>
       </div>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">리스트 스타일</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
 
         {/* 글자 크기 */}
         <NumericPropertyControl
-          label="글자 크기 (px)"
-          unitLabel="(px)"
+          label={m.fontSizeLabel}
+          unitLabel={m.fontSizeUnitLabel}
           value={(() => {
             const raw = listProps.fontSizeCustom ?? "";
             const match = raw.match(/([0-9]+(?:\.[0-9]+)?)/);
@@ -117,9 +121,9 @@ export function ListPropertiesPanel({
           max={32}
           step={1}
           presets={[
-            { id: "sm", label: "작게", value: 12 },
-            { id: "md", label: "보통", value: 14 },
-            { id: "lg", label: "크게", value: 18 },
+            { id: "sm", label: m.fontSizePresetSmall, value: 12 },
+            { id: "md", label: m.fontSizePresetMedium, value: 14 },
+            { id: "lg", label: m.fontSizePresetLarge, value: 18 },
           ]}
           onChangeValue={(px) => {
             updateBlock(selectedBlockId, { fontSizeCustom: `${px}px` } as any);
@@ -128,7 +132,7 @@ export function ListPropertiesPanel({
 
         {/* 줄 간격 */}
         <NumericPropertyControl
-          label="줄 간격"
+          label={m.lineHeightLabel}
           value={(() => {
             const raw = listProps.lineHeightCustom ?? "";
             const match = raw.match(/(-?[0-9]+(?:\.[0-9]+)?)/);
@@ -139,9 +143,9 @@ export function ListPropertiesPanel({
           max={3}
           step={0.05}
           presets={[
-            { id: "tight", label: "좁게", value: 1.2 },
-            { id: "normal", label: "보통", value: 1.5 },
-            { id: "relaxed", label: "넓게", value: 1.8 },
+            { id: "tight", label: m.lineHeightPresetTight, value: 1.2 },
+            { id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
+            { id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.8 },
           ]}
           onChangeValue={(v) => {
             updateBlock(selectedBlockId, { lineHeightCustom: v.toString() } as any);
@@ -150,9 +154,9 @@ export function ListPropertiesPanel({
 
         {/* 텍스트 색상 */}
         <ColorPickerField
-          label="텍스트 색상"
-          ariaLabelColorInput="리스트 텍스트 색상 피커"
-          ariaLabelHexInput="리스트 텍스트 색상 HEX"
+          label={m.textColorLabel}
+          ariaLabelColorInput={m.textColorPickerAria}
+          ariaLabelHexInput={m.textColorHexAria}
           // textColorCustom 이 비어 있으면 커스텀 색상을 사용하지 않고, "없음" 상태로 취급한다.
           // 이 경우 HEX 인풋은 빈 문자열을 유지하고, 팔레트 라벨은 "없음"으로 표시된다.
           value={
@@ -170,9 +174,9 @@ export function ListPropertiesPanel({
         />
 
         <ColorPickerField
-          label="블록 배경색"
-          ariaLabelColorInput="리스트 배경색 피커"
-          ariaLabelHexInput="리스트 배경색 HEX"
+          label={m.backgroundColorLabel}
+          ariaLabelColorInput={m.backgroundColorPickerAria}
+          ariaLabelHexInput={m.backgroundColorHexAria}
           value={listProps.backgroundColorCustom ?? ""}
           onChange={(hex) => {
             updateBlock(selectedBlockId, { backgroundColorCustom: hex } as any);
@@ -182,10 +186,10 @@ export function ListPropertiesPanel({
 
         {/* 불릿 스타일 (● / ○ / ■ / 숫자형 / 없음) */}
         <label className="flex flex-col gap-1">
-          <span>불릿 스타일</span>
+          <span>{m.bulletStyleLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="리스트 불릿 스타일"
+            aria-label={m.bulletStyleAria}
             value={listProps.bulletStyle ?? "disc"}
             onChange={(e) => {
               const value = e.target.value as NonNullable<ListBlockProps["bulletStyle"]>;
@@ -203,22 +207,22 @@ export function ListPropertiesPanel({
               updateBlock(selectedBlockId, { bulletStyle: value, ordered } as any);
             }}
           >
-            <option value="disc">기본 (●)</option>
-            <option value="circle">원 (○)</option>
-            <option value="square">사각 (■)</option>
-            <option value="decimal">숫자 (1.)</option>
-            <option value="lower-alpha">알파벳 소문자 (a.)</option>
-            <option value="upper-alpha">알파벳 대문자 (A.)</option>
-            <option value="lower-roman">로마 숫자 소문자 (i.)</option>
-            <option value="upper-roman">로마 숫자 대문자 (I.)</option>
-            <option value="none">없음</option>
+            <option value="disc">{m.bulletStyleOptionDisc}</option>
+            <option value="circle">{m.bulletStyleOptionCircle}</option>
+            <option value="square">{m.bulletStyleOptionSquare}</option>
+            <option value="decimal">{m.bulletStyleOptionDecimal}</option>
+            <option value="lower-alpha">{m.bulletStyleOptionLowerAlpha}</option>
+            <option value="upper-alpha">{m.bulletStyleOptionUpperAlpha}</option>
+            <option value="lower-roman">{m.bulletStyleOptionLowerRoman}</option>
+            <option value="upper-roman">{m.bulletStyleOptionUpperRoman}</option>
+            <option value="none">{m.bulletStyleOptionNone}</option>
           </select>
         </label>
 
         {/* 아이템 간 여백 (슬라이더) */}
         <NumericPropertyControl
-          label="아이템 간 여백 (px)"
-          unitLabel="(px)"
+          label={m.gapLabel}
+          unitLabel={m.gapUnitLabel}
           value={(() => {
             if (typeof listProps.gapYPx === "number") {
               return listProps.gapYPx;
@@ -230,9 +234,9 @@ export function ListPropertiesPanel({
           max={40}
           step={2}
           presets={[
-            { id: "tight", label: "좁게", value: 4 },
-            { id: "normal", label: "보통", value: 8 },
-            { id: "relaxed", label: "넓게", value: 16 },
+            { id: "tight", label: m.gapPresetTight, value: 4 },
+            { id: "normal", label: m.gapPresetNormal, value: 8 },
+            { id: "relaxed", label: m.gapPresetRelaxed, value: 16 },
           ]}
           onChangeValue={(v) => {
             updateBlock(selectedBlockId, { gapYPx: v } as any);
diff --git a/src/app/editor/panels/ProjectPropertiesPanel.tsx b/src/app/editor/panels/ProjectPropertiesPanel.tsx
index 256878c..eca4568 100644
--- a/src/app/editor/panels/ProjectPropertiesPanel.tsx
+++ b/src/app/editor/panels/ProjectPropertiesPanel.tsx
@@ -4,6 +4,8 @@ import { useEditorStore } from "@/features/editor/state/editorStore";
 import type { CanvasPreset, ProjectConfig } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorProjectPropertiesPanelMessages } from "@/features/i18n/messages/editorProjectPropertiesPanel";
 
 export function ProjectPropertiesPanel() {
   const projectConfig = useEditorStore((state) => (state as any).projectConfig as ProjectConfig);
@@ -11,6 +13,9 @@ export function ProjectPropertiesPanel() {
     (state) => (state as any).updateProjectConfig as (partial: Partial<ProjectConfig>) => void,
   );
 
+  const locale = useAppLocale();
+  const m = getEditorProjectPropertiesPanelMessages(locale);
+
   const handleChangePreset = (preset: CanvasPreset) => {
     if (preset === "mobile") {
       updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 390 });
@@ -39,14 +44,14 @@ export function ProjectPropertiesPanel() {
 
   return (
     <div className="space-y-4 text-xs text-slate-900 dark:text-slate-200">
-      <h3 className="text-sm font-medium text-slate-100">프로젝트 설정</h3>
+      <h3 className="text-sm font-medium text-slate-100">{m.sectionTitle}</h3>
 
       <div className="space-y-1">
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">프로젝트 제목</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.projectTitleLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="프로젝트 제목"
+            aria-label={m.projectTitleAria}
             value={projectConfig.title}
             onChange={(e) => updateProjectConfig({ title: e.target.value })}
           />
@@ -55,10 +60,10 @@ export function ProjectPropertiesPanel() {
 
       <div className="space-y-1">
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">프로젝트 주소 (slug)</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.projectSlugLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="프로젝트 주소 (slug)"
+            aria-label={m.projectSlugAria}
             value={projectConfig.slug}
             onChange={(e) => updateProjectConfig({ slug: e.target.value })}
           />
@@ -67,16 +72,16 @@ export function ProjectPropertiesPanel() {
 
       <div className="space-y-1">
         <NumericPropertyControl
-          label="캔버스 너비"
-          unitLabel="(px)"
+          label={m.canvasWidthLabel}
+          unitLabel={m.canvasWidthUnitLabel}
           value={projectConfig.canvasWidthPx ?? 1024}
           min={320}
           max={1920}
           step={10}
           presets={[
-            { id: "mobile", label: "모바일 (390px)", value: 390 },
-            { id: "tablet", label: "태블릿 (768px)", value: 768 },
-            { id: "desktop", label: "데스크톱 (1200px)", value: 1200 },
+            { id: "mobile", label: m.canvasWidthPresetMobile, value: 390 },
+            { id: "tablet", label: m.canvasWidthPresetTablet, value: 768 },
+            { id: "desktop", label: m.canvasWidthPresetDesktop, value: 1200 },
           ]}
           onChangeValue={handleChangeCanvasWidth}
         />
@@ -84,9 +89,9 @@ export function ProjectPropertiesPanel() {
 
       <div className="space-y-1">
         <ColorPickerField
-          label="캔버스 배경색"
-          ariaLabelColorInput="캔버스 배경색"
-          ariaLabelHexInput="캔버스 배경색 HEX"
+          label={m.canvasBgLabel}
+          ariaLabelColorInput={m.canvasBgColorAria}
+          ariaLabelHexInput={m.canvasBgHexAria}
           value={projectConfig.canvasBgColorHex ?? "#020617"}
           onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })}
           palette={TEXT_COLOR_PALETTE}
@@ -95,9 +100,9 @@ export function ProjectPropertiesPanel() {
 
       <div className="space-y-1">
         <ColorPickerField
-          label="페이지 배경색"
-          ariaLabelColorInput="페이지 배경색"
-          ariaLabelHexInput="페이지 배경색 HEX"
+          label={m.pageBgLabel}
+          ariaLabelColorInput={m.pageBgColorAria}
+          ariaLabelHexInput={m.pageBgHexAria}
           value={projectConfig.bodyBgColorHex ?? "#020617"}
           onChange={(hex) => updateProjectConfig({ bodyBgColorHex: hex })}
           palette={TEXT_COLOR_PALETTE}
@@ -105,47 +110,47 @@ export function ProjectPropertiesPanel() {
       </div>
 
       <div className="space-y-2 border-t border-slate-800 pt-3">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">SEO / 메타</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.seoSectionTitle}</h4>
 
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">SEO 타이틀</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.seoTitleLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="SEO 타이틀"
-            placeholder={projectConfig.title || "페이지 제목"}
+            aria-label={m.seoTitleAria}
+            placeholder={projectConfig.title || m.seoTitlePlaceholderFallback}
             value={projectConfig.seoTitle ?? ""}
             onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })}
           />
         </label>
 
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">메타 디스크립션</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.seoDescriptionLabel}</span>
           <textarea
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 min-h-[56px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="메타 디스크립션"
-            placeholder="검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요."
+            aria-label={m.seoDescriptionAria}
+            placeholder={m.seoDescriptionPlaceholder}
             value={projectConfig.seoDescription ?? ""}
             onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })}
           />
         </label>
 
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">OG/Twitter 이미지 URL</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.seoOgImageUrlLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="OG/Twitter 이미지 URL"
-            placeholder="예: https://example.com/og-image.png"
+            aria-label={m.seoOgImageUrlAria}
+            placeholder={m.seoOgImageUrlPlaceholder}
             value={projectConfig.seoOgImageUrl ?? ""}
             onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })}
           />
         </label>
 
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">Canonical URL</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.seoCanonicalUrlLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="Canonical URL"
-            placeholder="예: https://example.com/landing"
+            aria-label={m.seoCanonicalUrlAria}
+            placeholder={m.seoCanonicalUrlPlaceholder}
             value={projectConfig.seoCanonicalUrl ?? ""}
             onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })}
           />
@@ -155,36 +160,36 @@ export function ProjectPropertiesPanel() {
           <input
             type="checkbox"
             className="h-3 w-3 rounded border-slate-300 bg-white text-sky-600 dark:border-slate-600 dark:bg-slate-900"
-            aria-label="검색 엔진에 노출하지 않기 (noindex)"
+            aria-label={m.seoNoIndexAria}
             checked={Boolean(projectConfig.seoNoIndex)}
             onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })}
           />
-          <span>검색 엔진에 노출하지 않기 (noindex)</span>
+          <span>{m.seoNoIndexLabel}</span>
         </label>
       </div>
 
       <div className="space-y-1">
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">페이지 head HTML</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.headHtmlLabel}</span>
           <textarea
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="페이지 head HTML"
+            aria-label={m.headHtmlAria}
             value={projectConfig.headHtml ?? ""}
             onChange={(e) => updateProjectConfig({ headHtml: e.target.value })}
-            placeholder="예: &lt;meta name=&quot;description&quot; content=&quot;...&quot; /&gt;"
+            placeholder={m.headHtmlPlaceholder}
           />
         </label>
       </div>
 
       <div className="space-y-1">
         <label className="flex flex-col gap-1">
-          <span className="text-slate-500 dark:text-slate-400">추적 스크립트</span>
+          <span className="text-slate-500 dark:text-slate-400">{m.trackingScriptLabel}</span>
           <textarea
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="추적 스크립트"
+            aria-label={m.trackingScriptAria}
             value={projectConfig.trackingScript ?? ""}
             onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })}
-            placeholder="예: &lt;script&gt;/* GA, Pixel 코드 */&lt;/script&gt;"
+            placeholder={m.trackingScriptPlaceholder}
           />
         </label>
       </div>
diff --git a/src/app/editor/panels/PropertiesSidebar.tsx b/src/app/editor/panels/PropertiesSidebar.tsx
index ccb0d1f..16398e9 100644
--- a/src/app/editor/panels/PropertiesSidebar.tsx
+++ b/src/app/editor/panels/PropertiesSidebar.tsx
@@ -16,6 +16,8 @@ import { FormRadioPropertiesPanel } from "../forms/FormRadioPropertiesPanel";
 import { FormControllerPanel } from "../forms/FormControllerPanel";
 import { ProjectPropertiesPanel } from "./ProjectPropertiesPanel";
 import { Trash2, Copy, SlidersHorizontal, HelpCircle } from "lucide-react";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorPropertiesSidebarMessages } from "@/features/i18n/messages/editorPropertiesSidebar";
 
 type BlockHelpProperty = {
   label: string;
@@ -62,6 +64,8 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
   } = props;
 
   const [helpOpen, setHelpOpen] = useState(false);
+  const locale = useAppLocale();
+  const m = getEditorPropertiesSidebarMessages(locale);
 
   const getHelpContentForSelectedBlock = (): BlockHelpContent | null => {
     if (!selectedBlockId) return null;
@@ -70,596 +74,31 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
 
     switch (selectedBlock.type) {
       case "text":
-        return {
-          title: "텍스트 블록 튜토리얼",
-          description:
-            "제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다.\n\n좌측 패널에서 텍스트를 추가한 뒤, 캔버스에서 텍스트를 더블클릭하거나 속성 패널에서 내용을 수정해 보세요. 정렬, 크기, 색상 등을 조절해 다양한 스타일의 텍스트를 만들 수 있습니다.",
-          properties: [
-            {
-              label: "선택한 텍스트 블록 내용",
-              description:
-                "이 블록에 실제로 표시될 문장을 입력하는 영역입니다. 캔버스에서 텍스트를 더블클릭했을 때와 동일한 내용이며, 여러 줄을 입력하면 줄바꿈이 그대로 반영됩니다.",
-            },
-            {
-              label: "정렬",
-              description:
-                "텍스트를 왼쪽/가운데/오른쪽 중 어디에 맞출지 결정합니다. 일반 본문은 왼쪽, Hero 제목이나 짧은 강조 문구는 가운데 정렬을 추천합니다.",
-            },
-            {
-              label: "텍스트 스타일 (밑줄/가운데줄/이탤릭)",
-              description:
-                "밑줄은 링크처럼 보이게 하거나 특정 단어를 강조할 때, 가운데줄은 할인 전 가격처럼 취소선을 표현할 때, 이탤릭은 인용구나 제품명 등 살짝 톤을 바꾸고 싶을 때 사용합니다.",
-            },
-            {
-              label: "글자 크기",
-              description:
-                "텍스트의 폰트 크기를 px 단위로 조절합니다. 프리셋(XS~3XL)으로 대략적인 크기를 고른 뒤, 슬라이더/숫자 입력으로 세밀하게 조정할 수 있습니다.",
-            },
-            {
-              label: "글자 간격",
-              description:
-                "문자 사이의 간격(자간)을 조절합니다. 본문은 보통 또는 약간 넓게, 대문자 위주의 짧은 타이틀은 살짝 넓게 설정하면 가독성과 디자인이 좋아집니다.",
-            },
-            {
-              label: "줄 간격",
-              description:
-                "행과 행 사이의 간격(행간)을 정합니다. 본문은 1.5~1.7 정도가 읽기 좋고, 아주 짧은 제목은 1.25 정도로 줄이면 한 덩어리로 단단해 보입니다.",
-            },
-            {
-              label: "굵기",
-              description:
-                "폰트 두께를 100~900 범위에서 조절합니다. 본문은 보통(400), 섹션 제목은 세미볼드(600), 강한 CTA 문구는 볼드(700) 정도를 추천합니다.",
-            },
-            {
-              label: "텍스트 색상",
-              description:
-                "글자 색을 팔레트 또는 HEX 코드로 지정합니다. 본문은 대비가 높은 짙은 색을, 강조 문구는 브랜드 메인 색을 사용하는 것이 좋습니다.",
-            },
-            {
-              label: "블록 배경색",
-              description:
-                "텍스트가 들어 있는 카드/박스 전체 배경색을 지정합니다. 공지사항, 강조 박스, 경고 문구 등을 만들 때 연한 배경색과 함께 사용하면 좋습니다.",
-            },
-            {
-              label: "최대 너비",
-              description:
-                "한 줄 텍스트가 지나치게 길어지지 않도록 최대 줄 길이를 제한합니다. `본문 폭(60ch)`는 일반 문단에, `좁게(40ch)`는 카드/배너 같은 짧은 문구에 적합합니다.",
-            },
-          ],
-        };
+        return m.text;
       case "button":
-        return {
-          title: "버튼 블록 튜토리얼",
-          description:
-            "폼 제출이나 링크 이동을 위한 CTA 버튼을 만들 때 사용하는 블록입니다. 라벨, 링크(URL), 정렬, 색상/크기를 조절해 원하는 액션 버튼을 구성해 보세요.",
-          properties: [
-            {
-              label: "버튼 텍스트",
-              description:
-                "버튼 위에 표시될 문구입니다. 예: '지금 시작하기', '문의 남기기'. 짧고 행동을 유도하는 문장을 사용하는 것이 좋습니다.",
-            },
-            {
-              label: "가로 패딩 (px)",
-              description:
-                "버튼 양 옆의 여백을 조절합니다. 값이 클수록 버튼이 가로로 넓어져 더 강조됩니다.",
-            },
-            {
-              label: "세로 패딩 (px)",
-              description:
-                "버튼 위·아래 여백을 조절합니다. 값이 클수록 버튼 높이가 높아져 더 눈에 띱니다.",
-            },
-            {
-              label: "버튼 링크",
-              description:
-                "버튼 클릭 시 이동할 URL 또는 앵커(#section)입니다. 외부 페이지, 페이지 내 섹션, 폼 제출 엔드포인트 등으로 연결할 수 있습니다.",
-            },
-            {
-              label: "정렬",
-              description:
-                "해당 버튼이 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다. 주요 CTA 버튼은 가운데 정렬이 많이 쓰입니다.",
-            },
-            {
-              label: "텍스트 색상",
-              description:
-                "버튼 라벨 글자 색입니다. 채움 색상과 충분한 대비가 나도록 설정해야 가독성이 좋습니다.",
-            },
-            {
-              label: "스타일",
-              description:
-                "버튼 외형 스타일입니다. '채움'은 꽉 찬 스타일, '외곽선'은 테두리만 있는 스타일, '고스트'는 배경 없이 텍스트/테두리만 있는 스타일입니다.",
-            },
-            {
-              label: "채움 색상",
-              description:
-                "채움 스타일에서 버튼 내부를 채우는 색입니다. 브랜드 메인 색이나 강조 색을 사용하면 좋습니다.",
-            },
-            {
-              label: "외곽선 색상",
-              description:
-                "외곽선/고스트 스타일에서 버튼 테두리 색입니다. 배경색과의 대비를 고려해 설정합니다.",
-            },
-            {
-              label: "모서리 둥글기",
-              description:
-                "버튼 모서리를 얼마나 둥글게 처리할지 결정합니다. '없음'은 각진 버튼, '완전 둥글게'는 알약 모양 버튼입니다.",
-            },
-            {
-              label: "버튼 너비 모드 / 버튼 고정 너비",
-              description:
-                "버튼이 컨테이너 너비에 맞춰 늘어날지(전체 폭), 내용 길이에 맞출지(자동), 고정 px 너비를 가질지 결정합니다.",
-            },
-            {
-              label: "버튼 크기",
-              description:
-                "버튼 라벨 텍스트의 폰트 크기입니다. 중요한 CTA 버튼은 주변 텍스트보다 조금 더 크게 설정하면 좋습니다.",
-            },
-            {
-              label: "줄 간격 / 글자 간격",
-              description:
-                "버튼 라벨의 행간과 자간을 조절합니다. 글자가 너무 답답해 보이면 자간을 약간 넓히고, 여러 줄 버튼 문구는 줄 간격을 조금 넓혀 주세요.",
-            },
-          ],
-        };
+        return m.button;
       case "image":
-        return {
-          title: "이미지 블록 튜토리얼",
-          description:
-            "배너, 썸네일, 설명 이미지를 배치할 때 사용하는 블록입니다. 외부 이미지 URL을 입력하거나 업로드 이미지를 선택하고, 너비/정렬/모서리 둥글기를 조절해 레이아웃에 맞게 배치해 보세요.",
-          properties: [
-            {
-              label: "이미지 소스",
-              description:
-                "이미지를 외부 URL에서 가져올지(URL), 빌더에 업로드한 에셋을 사용할지(파일 업로드) 선택합니다.",
-            },
-            {
-              label: "이미지 URL / 이미지 파일 업로드",
-              description:
-                "URL 모드에서는 외부 이미지 주소를 입력하고, 업로드 모드에서는 로컬 이미지를 업로드해 `/api/image/:id` 형식으로 관리합니다.",
-            },
-            {
-              label: "대체 텍스트",
-              description:
-                "이미지가 로드되지 않거나 스크린리더를 사용하는 사용자에게 보여질 설명 텍스트입니다. 이미지가 전달하는 의미를 한두 문장으로 작성해 주세요.",
-            },
-            {
-              label: "카드 배경색",
-              description:
-                "이미지를 감싸는 카드 영역의 배경색입니다. 투명한 PNG 아이콘이나 로고를 올릴 때 배경을 살짝 깔아주면 더 잘 보입니다.",
-            },
-            {
-              label: "정렬",
-              description:
-                "이미지가 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다.",
-            },
-            {
-              label: "너비 모드 / 고정 너비 (px)",
-              description:
-                "이미지를 내용 크기에 맞출지(auto) 또는 px 단위로 고정된 너비를 사용할지 선택합니다. 썸네일 그리드에서는 고정 너비를 사용하는 편이 레이아웃이 안정적입니다.",
-            },
-            {
-              label: "모서리 둥글기",
-              description:
-                "이미지 카드 모서리 둥글기를 px 단위로 조절합니다. 아바타/아이콘은 완전 둥글게, 일반 사진은 살짝 둥글게 설정하면 자연스럽습니다.",
-            },
-          ],
-        };
+        return m.image;
       case "list":
-        return {
-          title: "리스트 블록 튜토리얼",
-          description:
-            "불릿/번호 리스트를 만들 때 사용하는 블록입니다. 아이템 텍스트를 수정하고, 정렬/불릿 스타일을 바꿔 체크리스트나 단계별 안내 등을 표현할 수 있습니다.",
-          properties: [
-            {
-              label: "리스트 아이템 (줄바꿈으로 구분)",
-              description:
-                "각 줄이 하나의 리스트 항목이 됩니다. 들여쓰기를 이용한 중첩 리스트는 TDD 기준의 변환 로직에 따라 자동으로 트리 구조로 변환됩니다.",
-            },
-            {
-              label: "정렬",
-              description:
-                "리스트 전체를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 체크리스트는 왼쪽 정렬, 특징 요약은 가운데 정렬이 자주 사용됩니다.",
-            },
-            {
-              label: "글자 크기 (px)",
-              description:
-                "리스트 텍스트의 폰트 크기를 조절합니다. 본문보다 약간 작게 설정하면 보조 정보 느낌을 줄 수 있습니다.",
-            },
-            {
-              label: "줄 간격",
-              description:
-                "리스트 항목 내부의 행간을 조절합니다. 항목 내용이 길어질수록 1.5~1.8 정도의 넉넉한 값을 추천합니다.",
-            },
-            {
-              label: "텍스트 색상",
-              description:
-                "리스트 텍스트의 색상입니다. 배경색과의 대비를 고려해 본문과 동일하거나 약간 연한 색상을 사용할 수 있습니다.",
-            },
-            {
-              label: "블록 배경색",
-              description:
-                "리스트 전체 카드의 배경색입니다. 단계별 안내나 체크리스트 박스를 강조하는 용도로 사용할 수 있습니다.",
-            },
-            {
-              label: "불릿 스타일",
-              description:
-                "불릿(●/○/■) 또는 번호(1., a., i.) 형식을 선택합니다. 숫자/알파벳/로마 숫자 스타일을 선택하면 자동으로 순서형 리스트(ordered)가 됩니다.",
-            },
-            {
-              label: "아이템 간 여백 (px)",
-              description:
-                "각 리스트 항목 사이의 세로 간격입니다. 설명이 긴 항목이 많다면 여백을 넉넉히 두어 가독성을 확보하세요.",
-            },
-          ],
-        };
+        return m.list;
       case "divider":
-        return {
-          title: "구분선 블록 튜토리얼",
-          description:
-            "섹션과 섹션 사이를 나누거나 콘텐츠를 시각적으로 구분할 때 사용하는 블록입니다. 정렬, 두께, 길이, 색상, 여백을 조절해 페이지 흐름을 정리해 보세요.",
-          properties: [
-            {
-              label: "정렬",
-              description:
-                "구분선을 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
-            },
-            {
-              label: "두께",
-              description:
-                "선의 두께입니다. '얇게'는 가벼운 보조 구분선, '보통'은 섹션 경계를 확실히 나눌 때 사용합니다.",
-            },
-            {
-              label: "길이 모드 / 고정 길이 (px)",
-              description:
-                "구분선을 전체 폭으로 쓸지, 내용에 맞출지, 또는 px 단위의 고정 길이를 사용할지 선택합니다.",
-            },
-            {
-              label: "선 색상",
-              description:
-                "구분선 컬러입니다. 너무 진한 색보다는 섹션 배경보다 살짝 진한 정도의 중간 톤을 추천합니다.",
-            },
-            {
-              label: "위/아래 여백",
-              description:
-                "구분선 위·아래에 들어가는 공백입니다. 값이 클수록 섹션이 더 명확하게 나뉘어 보입니다.",
-            },
-          ],
-        };
+        return m.divider;
       case "section":
-        return {
-          title: "섹션 블록 튜토리얼",
-          description:
-            "레이아웃의 큰 덩어리를 나누는 컨테이너 블록입니다. 배경색/배경 이미지/비디오, 위아래 패딩, 너비를 설정해 Hero, Features, Footer 같은 영역을 구성할 수 있습니다.",
-          properties: [
-            {
-              label: "배경 색상",
-              description:
-                "섹션 전체의 기본 배경색입니다. 페이지의 큰 분위기를 결정하는 요소이므로, 섹션 간 배경 대비를 적절히 주는 것이 좋습니다.",
-            },
-            {
-              label: "배경 이미지 소스 / URL / 파일 업로드",
-              description:
-                "섹션 배경으로 사용할 이미지를 외부 URL 또는 업로드 파일로 지정합니다. Hero 배경, 패턴, 질감 이미지를 설정할 때 사용합니다.",
-            },
-            {
-              label: "배경 이미지 크기 / 위치 / 반복",
-              description:
-                "cover/contain/auto로 크기를 조절하고, 프리셋 또는 X/Y 퍼센트로 위치를 조절하며, 반복 여부를 설정해 패턴 형태로 사용할 수 있습니다.",
-            },
-            {
-              label: "배경 비디오 소스 / URL / 파일 업로드",
-              description:
-                "섹션 배경에 비디오를 설정합니다. 시선을 끌어야 하는 Hero 영역 등에 사용하되, 가독성 저하를 막기 위해 텍스트 대비를 꼭 확인하세요.",
-            },
-            {
-              label: "세로 패딩",
-              description:
-                "섹션 위·아래 여백입니다. 값이 클수록 섹션이 여유 있고 강조되어 보입니다. Hero 섹션은 넉넉한 패딩을, 보조 섹션은 중간 정도를 추천합니다.",
-            },
-          ],
-        };
+        return m.section;
       case "video":
-        return {
-          title: "비디오 블록 튜토리얼",
-          description:
-            "YouTube/영상 URL 또는 직접 호스팅한 비디오를 삽입할 때 사용하는 블록입니다. 동영상 주소를 입력하고, 비율/정렬/재생 옵션을 조정해 페이지에 맞게 배치해 보세요.",
-          properties: [
-            {
-              label: "비디오 소스 / 비디오 URL / 비디오 파일 업로드",
-              description:
-                "외부 동영상 URL(YouTube, Vimeo 등)을 직접 입력하거나, 비디오 파일을 업로드해 `/api/video/:id` 형태로 사용할 수 있습니다.",
-            },
-            {
-              label: "포스터 이미지 URL",
-              description:
-                "동영상 재생 전/로딩 중에 보여줄 썸네일 이미지입니다. 영상의 핵심 장면이나 대표 이미지를 사용하면 클릭률을 높일 수 있습니다.",
-            },
-            {
-              label: "카드 배경색",
-              description:
-                "비디오가 들어가는 카드 영역의 배경색입니다. 주변 섹션과의 대비를 위해 살짝 어둡거나 밝은 색을 설정할 수 있습니다.",
-            },
-            {
-              label: "비디오 정렬",
-              description:
-                "비디오를 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
-            },
-            {
-              label: "비디오 너비 모드 / 고정 너비 (px)",
-              description:
-                "비디오를 내용 너비에 맞출지, 가로 전체를 채울지, 특정 px 너비로 고정할지 선택합니다.",
-            },
-            {
-              label: "카드 패딩 / 카드 모서리 둥글기",
-              description:
-                "비디오 주변 카드의 안쪽 여백과 모서리 둥글기입니다. 카드형 레이아웃에서는 적당한 패딩과 둥근 모서리를 주면 디자인이 정돈됩니다.",
-            },
-            {
-              label: "시작 시점 (초) / 종료 시점 (초)",
-              description:
-                "영상의 특정 구간만 재생하고 싶을 때 사용하는 옵션입니다. 예를 들어 10초~30초만 재생하도록 설정할 수 있습니다.",
-            },
-            {
-              label: "화면 비율",
-              description:
-                "동영상 프레임 비율입니다. 대부분의 웹 영상은 16:9를 사용하며, 정사각형/세로형 콘텐츠는 1:1, 4:3 등을 사용할 수 있습니다.",
-            },
-            {
-              label: "자동 재생 / 반복 재생 / 음소거 / 재생 컨트롤 표시",
-              description:
-                "자동 재생/반복 재생/음소거/컨트롤 표시 여부를 설정합니다. 자동 재생 영상은 보통 음소거를 함께 켜 두는 것이 좋습니다.",
-            },
-          ],
-        };
+        return m.video;
       case "form":
-        return {
-          title: "폼 컨트롤러 블록 튜토리얼",
-          description:
-            "입력 필드(formInput/select/checkbox/radio)를 하나의 폼으로 묶는 컨트롤러입니다. 전송 대상, 전송 포맷, 너비, 여백 등을 설정해 네이티브 폼 제출을 구성하고, 필드 ID를 연결해 폼 구조를 완성할 수 있습니다.",
-          properties: [
-            {
-              label: "전송 대상 / Webhook 설정",
-              description:
-                "폼 데이터를 내부 처리로만 사용할지, 외부 Webhook/Google Sheets 등으로 전송할지 결정하고, 목적지 URL/전송 포맷/HTTP 메서드 등을 설정합니다.",
-            },
-            {
-              label: "추가 파라미터",
-              description:
-                "`key=value` 형식으로 줄바꿈해 작성하면, 모든 폼 제출에 공통으로 포함될 추가 파라미터를 지정할 수 있습니다. 예: `source=landing`.",
-            },
-            {
-              label: "폼 너비 모드 / 폼 고정 너비 (px)",
-              description:
-                "폼 전체의 가로 폭을 자동/전체 폭/고정 px 값 중에서 선택합니다. 문의 폼은 보통 480~640px 정도의 고정 폭이 읽기 좋습니다.",
-            },
-            {
-              label: "폼 위/아래 여백 (px)",
-              description:
-                "폼 블록 위·아래에 들어가는 공백입니다. 페이지 내 다른 섹션과의 간격을 조절할 때 사용합니다.",
-            },
-            {
-              label: "성공 메시지 / 에러 메시지",
-              description:
-                "폼 전송 성공 또는 실패 시 사용자에게 보여줄 텍스트입니다. 명확하고 친절한 문구로 작성하는 것이 좋습니다.",
-            },
-            {
-              label: "폼 필드 매핑",
-              description:
-                "폼 컨트롤러와 연결할 입력 필드(formInput/select/checkbox/radio)를 체크박스로 선택합니다. 체크된 필드만 실제 폼 제출 payload에 포함됩니다.",
-            },
-            {
-              label: "Submit 버튼",
-              description:
-                "폼 제출을 담당할 버튼 블록을 지정합니다. 별도 버튼 블록을 만들어 이 컨트롤러와 연결하면, 해당 버튼 클릭 시 폼이 제출됩니다.",
-            },
-          ],
-        };
+        return m.form;
       case "formInput":
-        return {
-          title: "폼 입력 블록 튜토리얼",
-          description:
-            "이름, 이메일 등 한 줄 텍스트 또는 긴 텍스트 입력 필드를 만들 때 사용하는 블록입니다. 레이블, 플레이스홀더, 필수 여부, 너비 등을 설정해 폼 컨트롤러와 함께 사용합니다.",
-          properties: [
-            {
-              label: "라벨 타입 / 필드 라벨",
-              description:
-                "입력 필드 위나 옆에 표시될 설명입니다. 텍스트 또는 이미지로 라벨을 구성할 수 있으며, 사용자가 어떤 값을 입력해야 하는지 명확하게 알려줍니다.",
-            },
-            {
-              label: "라벨 이미지 URL / 대체 텍스트",
-              description:
-                "라벨을 이미지로 사용할 때 경로와 alt 텍스트를 지정합니다. 로고형 라벨이나 아이콘 기반 UI를 만들 때 활용할 수 있습니다.",
-            },
-            {
-              label: "전송 키",
-              description:
-                "이 입력값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
-            },
-            {
-              label: "필드 타입",
-              description:
-                "텍스트/이메일/긴 텍스트 중 어떤 형태의 입력을 받을지 결정합니다. 이메일 타입은 브라우저 기본 이메일 검증을 활용할 수 있습니다.",
-            },
-            {
-              label: "Placeholder",
-              description:
-                "입력 전 필드 안에 흐릿하게 보여줄 안내 문구입니다. 예: '이메일을 입력해 주세요'.",
-             },
-             {
-               label: "필수 필드",
-               description:
-                "체크 시 이 필드는 반드시 채워야 합니다. 이름/이메일 같은 필수 값에는 활성화하고, 선택 항목에는 비활성화하는 것을 추천합니다.",
-             },
-             {
-               label: "텍스트 크기 / 줄간격 / 자간",
-               description:
-                "입력 값의 폰트 크기(px), 줄간격(px), 자간(px)을 조절해 폼 필드의 가독성과 분위기를 세밀하게 튜닝합니다.",
-             },
-             {
-               label: "텍스트 정렬",
-               description:
-                "필드 안 텍스트를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 일반 입력은 왼쪽 정렬을 권장합니다.",
-             },
-             {
-               label: "레이아웃 / 라벨/필드 간격",
-               description:
-                "라벨과 필드를 세로(stack) 또는 가로(inline)로 배치하고, inline 모드에서 라벨과 입력 사이 간격(px)을 조절합니다.",
-             },
-             {
-               label: "너비 / 필드 고정 너비",
-               description:
-                "필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다. 짧은 필드는 고정 값, 긴 입력은 전체 폭을 사용할 수 있습니다.",
-             },
-             {
-               label: "필드 가로/세로 패딩",
-               description:
-                "입력 상자 안쪽 여백을 조절합니다. 값이 클수록 필드가 커지고 누르기/입력하기 편해집니다.",
-             },
-             {
-               label: "필드 텍스트/채움/테두리 색상",
-               description:
-                "입력 텍스트, 배경, 테두리 색상을 각각 조절합니다. 에러 상태/강조 상태 등을 표현할 때 조합해서 사용할 수 있습니다.",
-             },
-             {
-               label: "필드 모서리 둥글기",
-               description:
-                "입력 상자의 모서리를 얼마나 둥글게 할지 결정합니다. 페이지의 전체 디자인 톤과 맞춰 사용하세요.",
-             },
-          ],
-        };
+        return m.formInput;
       case "formSelect":
-        return {
-          title: "폼 셀렉트 블록 튜토리얼",
-          description:
-            "드롭다운 선택 필드를 만들 때 사용하는 블록입니다. 옵션 목록과 기본 선택값, 너비를 설정해 폼 컨트롤러와 함께 사용합니다.",
-          properties: [
-            {
-              label: "라벨 타입 / 필드 라벨",
-              description:
-                "셀렉트 필드의 제목 역할을 하는 라벨입니다. 텍스트 또는 이미지로 구성할 수 있으며, 선택해야 할 값의 의미를 설명합니다.",
-            },
-            {
-              label: "전송 키",
-              description:
-                "선택된 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
-            },
-            {
-              label: "옵션",
-              description:
-                "사용자가 선택할 수 있는 옵션 목록입니다. 라벨과 value를 함께 설정하며, '옵션 추가' 버튼으로 새 옵션을 만들 수 있습니다.",
-            },
-            {
-              label: "필수 필드",
-              description:
-                "체크 시 반드시 하나의 옵션을 선택해야 합니다. 중요 선택 항목에는 필수로 설정하는 것을 권장합니다.",
-            },
-            {
-              label: "셀렉트 텍스트 크기 / 줄간격 / 자간",
-              description:
-                "드롭다운 필드의 텍스트 타이포그래피를 px 단위로 조절해 가독성과 분위기를 맞춥니다.",
-            },
-            {
-              label: "필드 너비 / 필드 고정 너비",
-              description:
-                "셀렉트 필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다.",
-            },
-            {
-              label: "셀렉트 가로/세로 패딩",
-              description:
-                "드롭다운 안쪽 여백을 조절해 클릭 영역과 시각적 무게감을 조정합니다.",
-            },
-            {
-              label: "필드 텍스트/채움/테두리 색상",
-              description:
-                "선택 영역의 텍스트, 배경, 테두리 색상을 설정합니다. 폼 전체 톤과 잘 어울리는 색상을 사용하는 것이 좋습니다.",
-            },
-            {
-              label: "필드 모서리 둥글기",
-              description:
-                "셀렉트 박스의 모서리를 얼마나 둥글게 표시할지 결정합니다.",
-            },
-          ],
-        };
+        return m.formSelect;
       case "formCheckbox":
-        return {
-          title: "폼 체크박스 블록 튜토리얼",
-          description:
-            "여러 항목 중 복수 선택이 필요한 경우 사용하는 체크박스 그룹 블록입니다. 그룹 타이틀과 옵션 라벨/이미지를 설정해 동의 항목이나 관심사 선택 등을 구성할 수 있습니다.",
-          properties: [
-            {
-              label: "그룹 타이틀 타입 / 그룹 타이틀",
-              description:
-                "체크박스 그룹 전체의 제목입니다. 텍스트 또는 이미지로 표현할 수 있으며, 사용자가 어떤 범주를 선택하는지 알려줍니다.",
-            },
-            {
-              label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
-              description:
-                "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드된 이미지를 선택합니다.",
-            },
-            {
-              label: "전송 키",
-              description:
-                "체크된 옵션들의 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
-            },
-            {
-              label: "옵션 / 옵션 이미지 소스",
-              description:
-                "각 체크박스 옵션의 라벨/값/이미지를 설정합니다. URL 또는 업로드 이미지로 옵션별 아이콘을 붙일 수 있습니다.",
-            },
-            {
-              label: "필수 필드",
-              description:
-                "체크 시 하나 이상 옵션을 선택해야 합니다. 약관 동의 등 필수 동의 항목에 사용합니다.",
-            },
-            {
-              label: "체크박스 텍스트 크기 / 줄간격 / 자간",
-              description:
-                "체크박스 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 항목이 길어질수록 줄간격을 넉넉히 두는 것이 좋습니다.",
-            },
-          ],
-        };
+        return m.formCheckbox;
       case "formRadio":
-        return {
-          title: "폼 라디오 블록 튜토리얼",
-          description:
-            "여러 옵션 중 하나만 선택해야 할 때 사용하는 라디오 버튼 그룹 블록입니다. 옵션 라벨/이미지와 기본 선택값을 설정해 요금제 선택 등 단일 선택 시나리오를 구성할 수 있습니다.",
-          properties: [
-            {
-              label: "그룹 타이틀 타입 / 그룹 타이틀",
-              description:
-                "라디오 그룹의 제목입니다. 요금제 이름, 질문 문구 등 단일 선택의 맥락을 설명합니다.",
-            },
-            {
-              label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
-              description:
-                "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드 이미지를 선택합니다.",
-            },
-            {
-              label: "전송 키",
-              description:
-                "선택된 하나의 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
-            },
-            {
-              label: "옵션 / 옵션 이미지 소스",
-              description:
-                "각 라디오 옵션의 라벨/값/이미지를 설정합니다. 옵션별 아이콘이나 썸네일을 붙여 더 풍부한 선택 UI를 만들 수 있습니다.",
-            },
-            {
-              label: "필수 필드",
-              description:
-                "체크 시 반드시 하나의 옵션을 선택해야 합니다. 요금제/유형 선택처럼 반드시 선택이 필요한 경우에 사용합니다.",
-            },
-            {
-              label: "라디오 텍스트 크기 / 줄간격 / 자간",
-              description:
-                "라디오 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 옵션 설명이 긴 경우 줄간격을 넉넉히 두세요.",
-            },
-          ],
-        };
+        return m.formRadio;
       default:
-        return {
-          title: "블록 튜토리얼",
-          description: "이 블록에 대한 자세한 도움말은 추후 추가될 예정입니다.",
-        };
+        return m.fallback;
     }
   };
 
@@ -674,7 +113,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
     >
       <h2 className="font-medium mb-2 flex items-center gap-2 text-slate-900 dark:text-slate-100">
         <SlidersHorizontal className="w-4 h-4 text-sky-400" aria-hidden="true" />
-        <span>속성 패널</span>
+        <span>{m.panelTitle}</span>
       </h2>
       {selectedBlockId ? (
         <div className="space-y-3">
@@ -686,7 +125,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
             >
               <span className="inline-flex items-center gap-2">
                 <Trash2 className="w-3 h-3" aria-hidden="true" />
-                <span>블록 삭제</span>
+                <span>{m.actionDeleteBlock}</span>
               </span>
             </button>
             <button
@@ -696,7 +135,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
             >
               <span className="inline-flex items-center gap-2">
                 <Copy className="w-3 h-3" aria-hidden="true" />
-                <span>블록 복제</span>
+                <span>{m.actionDuplicateBlock}</span>
               </span>
             </button>
           </div>
@@ -707,7 +146,7 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
               onClick={() => setHelpOpen(true)}
             >
               <HelpCircle className="w-3 h-3" aria-hidden="true" />
-              <span>HELP</span>
+              <span>{m.actionHelp}</span>
             </button>
           </div>
           {(() => {
@@ -869,21 +308,21 @@ export function PropertiesSidebar(props: PropertiesSidebarProps) {
                 <h3 className="text-sm font-medium">{help.title}</h3>
                 <button
                   type="button"
-                  className="text-slate-400 hover:text-slate-100 text-xs"
+                  className="text-slate-600 dark:text-slate-400 hover:text-slate-100 text-xs"
                   onClick={() => setHelpOpen(false)}
                 >
-                  닫기
+                  {m.modalCloseLabel}
                 </button>
               </div>
-              <p className="text-[11px] text-slate-200 whitespace-pre-line">{help.description}</p>
+              <p className="text-[11px] text-slate-600 dark:text-slate-200 whitespace-pre-line">{help.description}</p>
               {help.properties && help.properties.length > 0 && (
                 <div className="mt-3 border-t border-slate-700 pt-2 space-y-2">
-                  <h4 className="text-[11px] font-semibold text-slate-200">속성별 설명</h4>
+                  <h4 className="text-[11px] font-semibold text-slate-900 dark:text-slate-200">{m.modalPropertiesSectionTitle}</h4>
                   <ul className="space-y-1">
                     {help.properties.map((prop) => (
                       <li key={prop.label}>
-                        <div className="text-[11px] font-semibold text-slate-100">{prop.label}</div>
-                        <div className="text-[11px] text-slate-300">{prop.description}</div>
+                        <div className="text-[11px] font-semibold text-slate-600 dark:text-slate:-100">{prop.label}</div>
+                        <div className="text-[11px] text-slate-500 dark:text-slate-300">{prop.description}</div>
                       </li>
                     ))}
                   </ul>
diff --git a/src/app/editor/panels/SectionPropertiesPanel.tsx b/src/app/editor/panels/SectionPropertiesPanel.tsx
index 913db13..63323a9 100644
--- a/src/app/editor/panels/SectionPropertiesPanel.tsx
+++ b/src/app/editor/panels/SectionPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { SectionBlockProps } from "@/features/editor/state/editorStore";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorSectionPanelMessages } from "@/features/i18n/messages/editorSectionPanel";
 
 export type SectionPropertiesPanelProps = {
   sectionProps: SectionBlockProps;
@@ -11,6 +13,8 @@ export type SectionPropertiesPanelProps = {
 };
 
 export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorSectionPanelMessages(locale);
   const backgroundSource: "none" | "url" | "upload" = (() => {
     const src = sectionProps.backgroundImageSrc?.trim();
     const type = sectionProps.backgroundImageSourceType;
@@ -44,9 +48,9 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
       {/* 섹션 배경: 커스텀 색상 피커만 사용 */}
       <div className="mt-1">
         <ColorPickerField
-          label="배경 색상"
-          ariaLabelColorInput="섹션 배경 색상 선택"
-          ariaLabelHexInput="섹션 배경 색상 HEX 입력"
+          label={m.backgroundColorLabel}
+          ariaLabelColorInput={m.backgroundColorPickerAria}
+          ariaLabelHexInput={m.backgroundColorHexAria}
           value={sectionProps.backgroundColorCustom ?? ""}
           onChange={(hex) => {
             const next = hex && hex.trim().length > 0 ? hex : undefined;
@@ -59,10 +63,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
       {/* 섹션 배경 이미지 */}
       <div className="mt-3 space-y-2 text-xs text-slate-400">
         <label className="flex flex-col gap-1">
-          <span>배경 이미지 소스</span>
+          <span>{m.backgroundImageSourceLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="배경 이미지 소스"
+            aria-label={m.backgroundImageSourceAria}
             value={backgroundSource}
             onChange={(e) => {
               const next = e.target.value as "none" | "url" | "upload";
@@ -84,18 +88,18 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
               }
             }}
           >
-            <option value="none">없음</option>
-            <option value="url">URL</option>
-            <option value="upload">파일 업로드</option>
+            <option value="none">{m.backgroundVideoSourceOptionNone}</option>
+            <option value="url">{m.backgroundVideoSourceOptionUrl}</option>
+            <option value="upload">{m.backgroundVideoSourceOptionUpload}</option>
           </select>
         </label>
 
         {backgroundSource === "url" && (
           <label className="flex flex-col gap-1">
-            <span>배경 이미지 URL</span>
+            <span>{m.backgroundImageUrlLabel}</span>
             <input
               className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              aria-label="배경 이미지 URL"
+              aria-label={m.backgroundImageUrlAria}
               value={sectionProps.backgroundImageSrc ?? ""}
               onChange={(e) => {
                 const value = e.target.value;
@@ -111,12 +115,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
 
         {backgroundSource === "upload" && (
           <label className="flex flex-col gap-1">
-            <span>배경 이미지 파일 업로드</span>
+            <span>{m.backgroundImageUploadLabel}</span>
             <input
               type="file"
               accept="image/*"
               className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
-              aria-label="배경 이미지 파일 업로드"
+              aria-label={m.backgroundImageUploadAria}
               onChange={async (event) => {
                 const file = event.target.files?.[0];
                 if (!file) return;
@@ -155,10 +159,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
         {backgroundSource !== "none" && (
           <>
             <label className="flex flex-col gap-1">
-              <span>배경 이미지 위치 모드</span>
+              <span>{m.backgroundImagePositionModeLabel}</span>
               <select
                 className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                aria-label="배경 이미지 위치 모드"
+                aria-label={m.backgroundImagePositionModeAria}
                 value={positionMode}
                 onChange={(e) =>
                   updateBlock(selectedBlockId, {
@@ -166,16 +170,16 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
                   } as any)
                 }
               >
-                <option value="preset">프리셋</option>
-                <option value="custom">커스텀 (X/Y)</option>
+                <option value="preset">{m.backgroundImagePositionModeOptionPreset}</option>
+                <option value="custom">{m.backgroundImagePositionModeOptionCustom}</option>
               </select>
             </label>
 
             <label className="flex flex-col gap-1">
-              <span>배경 이미지 크기</span>
+              <span>{m.backgroundImageSizeLabel}</span>
               <select
                 className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                aria-label="배경 이미지 크기"
+                aria-label={m.backgroundImageSizeAria}
                 value={sectionProps.backgroundImageSize ?? "cover"}
                 onChange={(e) =>
                   updateBlock(selectedBlockId, {
@@ -191,10 +195,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
 
             {positionMode === "preset" && (
               <label className="flex flex-col gap-1">
-                <span>배경 이미지 위치</span>
+                <span>{m.backgroundImagePositionLabel}</span>
                 <select
                   className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                  aria-label="배경 이미지 위치"
+                  aria-label={m.backgroundImagePositionAria}
                   value={sectionProps.backgroundImagePosition ?? "center"}
                   onChange={(e) =>
                     updateBlock(selectedBlockId, {
@@ -202,11 +206,11 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
                     } as any)
                   }
                 >
-                  <option value="center">가운데</option>
-                  <option value="top">위</option>
-                  <option value="bottom">아래</option>
-                  <option value="left">왼쪽</option>
-                  <option value="right">오른쪽</option>
+                  <option value="center">{m.backgroundImagePositionOptionCenter}</option>
+                  <option value="top">{m.backgroundImagePositionOptionTop}</option>
+                  <option value="bottom">{m.backgroundImagePositionOptionBottom}</option>
+                  <option value="left">{m.backgroundImagePositionOptionLeft}</option>
+                  <option value="right">{m.backgroundImagePositionOptionRight}</option>
                 </select>
               </label>
             )}
@@ -214,7 +218,7 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
             {positionMode === "custom" && (
               <>
                 <NumericPropertyControl
-                  label="배경 이미지 가로 위치"
+                  label={m.backgroundImagePositionXLabel}
                   unitLabel="(%)"
                   value={
                     typeof sectionProps.backgroundImagePositionXPercent === "number"
@@ -238,7 +242,7 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
                 />
 
                 <NumericPropertyControl
-                  label="배경 이미지 세로 위치"
+                  label={m.backgroundImagePositionYLabel}
                   unitLabel="(%)"
                   value={
                     typeof sectionProps.backgroundImagePositionYPercent === "number"
@@ -264,10 +268,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
             )}
 
             <label className="flex flex-col gap-1">
-              <span>배경 이미지 반복</span>
+              <span>{m.backgroundImageRepeatLabel}</span>
               <select
                 className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-                aria-label="배경 이미지 반복"
+                aria-label={m.backgroundImageRepeatAria}
                 value={sectionProps.backgroundImageRepeat ?? "no-repeat"}
                 onChange={(e) =>
                   updateBlock(selectedBlockId, {
@@ -275,10 +279,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
                   } as any)
                 }
               >
-                <option value="no-repeat">반복 없음</option>
-                <option value="repeat">가로/세로 반복</option>
-                <option value="repeat-x">가로 반복</option>
-                <option value="repeat-y">세로 반복</option>
+                <option value="no-repeat">{m.backgroundImageRepeatOptionNone}</option>
+                <option value="repeat">{m.backgroundImageRepeatOptionBoth}</option>
+                <option value="repeat-x">{m.backgroundImageRepeatOptionX}</option>
+                <option value="repeat-y">{m.backgroundImageRepeatOptionY}</option>
               </select>
             </label>
           </>
@@ -288,10 +292,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
       {/* 섹션 배경 비디오 */}
       <div className="mt-3 space-y-2 text-xs text-slate-400">
         <label className="flex flex-col gap-1">
-          <span>배경 비디오 소스</span>
+          <span>{m.backgroundVideoSourceLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="배경 비디오 소스"
+            aria-label={m.backgroundVideoSourceAria}
             value={backgroundVideoSource}
             onChange={(e) => {
               const next = e.target.value as "none" | "url" | "upload";
@@ -321,10 +325,10 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
 
         {backgroundVideoSource === "url" && (
           <label className="flex flex-col gap-1">
-            <span>배경 비디오 URL</span>
+            <span>{m.backgroundVideoUrlLabel}</span>
             <input
               className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              aria-label="배경 비디오 URL"
+              aria-label={m.backgroundVideoUrlAria}
               value={sectionProps.backgroundVideoSrc ?? ""}
               onChange={(e) => {
                 const value = e.target.value;
@@ -340,12 +344,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
 
         {backgroundVideoSource === "upload" && (
           <label className="flex flex-col gap-1">
-            <span>배경 비디오 파일 업로드</span>
+            <span>{m.backgroundVideoUploadLabel}</span>
             <input
               type="file"
               accept="video/*"
               className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
-              aria-label="배경 비디오 파일 업로드"
+              aria-label={m.backgroundVideoUploadAria}
               onChange={async (event) => {
                 const file = event.target.files?.[0];
                 if (!file) return;
@@ -386,8 +390,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
       {/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
       <div className="mt-3 space-y-1">
         <NumericPropertyControl
-          label="세로 패딩"
-          unitLabel="(px)"
+          label={m.paddingYLabel}
+          unitLabel={m.paddingYUnitLabel}
           value={typeof sectionProps.paddingYPx === "number" ? sectionProps.paddingYPx : 48}
           min={16}
           max={80}
@@ -407,14 +411,14 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
       </div>
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
-        <h4 className="text-[11px] font-semibold text-slate-200">섹션 레이아웃</h4>
+        <h4 className="text-[11px] font-semibold text-slate-200">{m.layoutSectionTitle}</h4>
 
         {/* 컬럼 레이아웃 프리셋 */}
         <label className="flex flex-col gap-1">
-          <span>섹션 컬럼 레이아웃</span>
+          <span>{m.columnLayoutLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="섹션 컬럼 레이아웃"
+            aria-label={m.columnLayoutAria}
             value={(() => {
               const cols = sectionProps.columns ?? [];
               const spans = cols.map((c) => c.span).join("-");
@@ -471,12 +475,12 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
               updateBlock(selectedBlockId, { columns: nextColumns } as any);
             }}
           >
-            <option value="one-full">1열 (1/1)</option>
-            <option value="two-equal">2열 (1/2 - 1/2)</option>
-            <option value="two-1-2">2열 (1/3 - 2/3)</option>
-            <option value="two-2-1">2열 (2/3 - 1/3)</option>
-            <option value="three-equal">3열 (1/3 - 1/3 - 1/3)</option>
-            <option value="custom">직접 조정</option>
+            <option value="one-full">{m.columnLayoutOptionOneFull}</option>
+            <option value="two-equal">{m.columnLayoutOptionTwoEqual}</option>
+            <option value="two-1-2">{m.columnLayoutOptionTwoOneTwo}</option>
+            <option value="two-2-1">{m.columnLayoutOptionTwoTwoOne}</option>
+            <option value="three-equal">{m.columnLayoutOptionThreeEqual}</option>
+            <option value="custom">{m.columnLayoutOptionCustom}</option>
           </select>
         </label>
 
@@ -680,8 +684,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
 
         {/* 최대 폭 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
         <NumericPropertyControl
-          label="최대 폭 (px)"
-          unitLabel="(px)"
+          label={m.maxWidthLabel}
+          unitLabel={m.maxWidthUnitLabel}
           value={typeof sectionProps.maxWidthPx === "number" ? sectionProps.maxWidthPx : 960}
           min={640}
           max={1440}
@@ -701,8 +705,8 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
 
         {/* 컬럼 간 간격 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
         <NumericPropertyControl
-          label="컬럼 간 간격 (px)"
-          unitLabel="(px)"
+          label={m.gapXLabel}
+          unitLabel={m.gapXUnitLabel}
           value={typeof sectionProps.gapXPx === "number" ? sectionProps.gapXPx : 24}
           min={0}
           max={64}
@@ -723,19 +727,19 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
 
         {/* 세로 정렬 */}
         <label className="flex flex-col gap-1">
-          <span>컬럼 세로 정렬</span>
+          <span>{m.alignItemsLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="섹션 컬럼 세로 정렬"
+            aria-label={m.alignItemsAria}
             value={sectionProps.alignItems ?? "top"}
             onChange={(e) => {
               const value = e.target.value as NonNullable<SectionBlockProps["alignItems"]>;
               updateBlock(selectedBlockId, { alignItems: value } as any);
             }}
           >
-            <option value="top">위</option>
-            <option value="center">가운데</option>
-            <option value="bottom">아래</option>
+            <option value="top">{m.alignItemsOptionTop}</option>
+            <option value="center">{m.alignItemsOptionCenter}</option>
+            <option value="bottom">{m.alignItemsOptionBottom}</option>
           </select>
         </label>
       </div>
diff --git a/src/app/editor/panels/TextPropertiesPanel.tsx b/src/app/editor/panels/TextPropertiesPanel.tsx
index 6425bac..98d72b1 100644
--- a/src/app/editor/panels/TextPropertiesPanel.tsx
+++ b/src/app/editor/panels/TextPropertiesPanel.tsx
@@ -4,6 +4,8 @@ import type { TextBlockProps } from "@/features/editor/state/editorStore";
 import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorTextPanelMessages } from "@/features/i18n/messages/editorTextPanel";
 
 export type TextPropertiesPanelProps = {
   textProps: TextBlockProps;
@@ -20,6 +22,8 @@ export function TextPropertiesPanel({
   editingBlockId,
   setEditingText,
 }: TextPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorTextPanelMessages(locale);
   const fontSizeMode = textProps.fontSizeMode ?? "scale";
   const fallbackScale =
     textProps.size === "sm" ? "sm" : textProps.size === "lg" ? "lg" : "base";
@@ -97,10 +101,10 @@ export function TextPropertiesPanel({
   return (
     <>
       <div className="space-y-1">
-        <p className="text-xs text-slate-400">선택한 텍스트 블록 내용</p>
+        <p className="text-xs text-slate-400">{m.selectedTextLabel}</p>
         <textarea
           className="w-full min-h-[80px] rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-          aria-label="선택한 텍스트 블록 내용"
+          aria-label={m.selectedTextAria}
           value={textProps.text}
           onChange={(e) => {
             const value = e.target.value;
@@ -114,26 +118,26 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>정렬</span>
+          <span>{m.alignLabel}</span>
           <select
             className="rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="정렬"
+            aria-label={m.alignAria}
             value={textProps.align}
             onChange={(e) => {
               const value = e.target.value as "left" | "center" | "right";
               updateBlock(selectedBlockId, { align: value });
             }}
           >
-            <option value="left">왼쪽</option>
-            <option value="center">가운데</option>
-            <option value="right">오른쪽</option>
+            <option value="left">{m.alignOptionLeft}</option>
+            <option value="center">{m.alignOptionCenter}</option>
+            <option value="right">{m.alignOptionRight}</option>
           </select>
         </label>
       </div>
 
       <div className="space-y-1">
         <div className="flex items-center justify-between text-[11px] text-slate-400">
-          <span>텍스트 스타일</span>
+          <span>{m.textStyleLabel}</span>
           <div className="flex gap-1">
             <button
               type="button"
@@ -148,7 +152,7 @@ export function TextPropertiesPanel({
                 } as any);
               }}
             >
-              밑줄
+              {m.underlineLabel}
             </button>
             <button
               type="button"
@@ -163,7 +167,7 @@ export function TextPropertiesPanel({
                 } as any);
               }}
             >
-              가운데줄
+              {m.strikeLabel}
             </button>
             <button
               type="button"
@@ -178,7 +182,7 @@ export function TextPropertiesPanel({
                 } as any);
               }}
             >
-              이탤릭
+              {m.italicLabel}
             </button>
           </div>
         </div>
@@ -186,8 +190,8 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <NumericPropertyControl
-          label="글자 크기"
-          unitLabel="(px)"
+          label={m.fontSizeLabel}
+          unitLabel={m.fontSizeUnitLabel}
           value={Number.isFinite(parsedFontSize) ? parsedFontSize : 16}
           min={10}
           max={72}
@@ -243,11 +247,11 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>글자 간격</span>
+          <span>{m.letterSpacingLabel}</span>
           <div className="flex items-center gap-2">
             <select
               className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              aria-label="글자 간격 프리셋"
+              aria-label={m.letterSpacingPresetAria}
               value={letterSpacingPreset}
               onChange={(e) => {
                 const preset = e.target.value as
@@ -276,17 +280,17 @@ export function TextPropertiesPanel({
                 } as any);
               }}
             >
-              <option value="tighter">아주 좁게</option>
-              <option value="tight">좁게</option>
-              <option value="normal">보통</option>
-              <option value="wide">넓게</option>
-              <option value="wider">아주 넓게</option>
+              <option value="tighter">{m.letterSpacingPresetTighter}</option>
+              <option value="tight">{m.letterSpacingPresetTight}</option>
+              <option value="normal">{m.letterSpacingPresetNormal}</option>
+              <option value="wide">{m.letterSpacingPresetWide}</option>
+              <option value="wider">{m.letterSpacingPresetWider}</option>
             </select>
 
             <PropertySliderField
               label=""
-              ariaLabelSlider="글자 간격 슬라이더"
-              ariaLabelInput="글자 간격 커스텀 (px)"
+              ariaLabelSlider={m.letterSpacingSliderAria}
+              ariaLabelInput={m.letterSpacingInputAria}
               value={Number.isFinite(parsedLetterSpacingPx) ? parsedLetterSpacingPx : 0}
               min={-2}
               max={10}
@@ -304,18 +308,18 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <NumericPropertyControl
-          label="줄 간격"
+          label={m.lineHeightLabel}
           unitLabel=""
           value={Number.isFinite(parsedLineHeight) ? parsedLineHeight : 1.5}
           min={-1}
           max={3}
           step={0.05}
           presets={[
-            { id: "tight", label: "좁게", value: 1.25 },
-            { id: "snug", label: "약간 좁게", value: 1.35 },
-            { id: "normal", label: "보통", value: 1.5 },
-            { id: "relaxed", label: "넓게", value: 1.7 },
-            { id: "loose", label: "아주 넓게", value: 1.9 },
+            { id: "tight", label: m.lineHeightPresetTight, value: 1.25 },
+            { id: "snug", label: m.lineHeightPresetSnug, value: 1.35 },
+            { id: "normal", label: m.lineHeightPresetNormal, value: 1.5 },
+            { id: "relaxed", label: m.lineHeightPresetRelaxed, value: 1.7 },
+            { id: "loose", label: m.lineHeightPresetLoose, value: 1.9 },
           ]}
           onChangeValue={(v) => {
             const preset: Record<NonNullable<TextBlockProps["lineHeightScale"]>, number> = {
@@ -350,7 +354,7 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <NumericPropertyControl
-          label="굵기"
+          label={m.fontWeightLabel}
           value={Number.isFinite(parsedFontWeight) ? parsedFontWeight : 400}
           min={100}
           max={900}
@@ -363,12 +367,12 @@ export function TextPropertiesPanel({
             id: scale,
             label:
               scale === "normal"
-                ? "보통"
+                ? m.fontWeightPresetNormal
                 : scale === "medium"
-                ? "중간"
+                ? m.fontWeightPresetMedium
                 : scale === "semibold"
-                ? "세미볼드"
-                : "볼드",
+                ? m.fontWeightPresetSemibold
+                : m.fontWeightPresetBold,
             value:
               scale === "normal"
                 ? 400
@@ -410,9 +414,9 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <ColorPickerField
-          label="텍스트 색상"
-          ariaLabelColorInput="텍스트 색상 피커"
-          ariaLabelHexInput="텍스트 색상 HEX"
+          label={m.textColorLabel}
+          ariaLabelColorInput={m.textColorPickerAria}
+          ariaLabelHexInput={m.textColorHexAria}
           value={
             (textProps.colorCustom && textProps.colorCustom.startsWith("#")
               ? textProps.colorCustom
@@ -439,9 +443,9 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <ColorPickerField
-          label="블록 배경색"
-          ariaLabelColorInput="텍스트 블록 배경색 피커"
-          ariaLabelHexInput="텍스트 블록 배경색 HEX"
+          label={m.backgroundColorLabel}
+          ariaLabelColorInput={m.backgroundColorPickerAria}
+          ariaLabelHexInput={m.backgroundColorHexAria}
           value={textProps.backgroundColorCustom ?? ""}
           onChange={(hex) => {
             updateBlock(selectedBlockId, {
@@ -454,11 +458,11 @@ export function TextPropertiesPanel({
 
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>최대 너비</span>
+          <span>{m.maxWidthLabel}</span>
           <div className="flex items-center gap-2">
             <select
               className="w-32 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              aria-label="최대 너비 프리셋"
+              aria-label={m.maxWidthPresetAria}
               value={maxWidthScale}
               onChange={(e) => {
                 const value = e.target.value as NonNullable<TextBlockProps["maxWidthScale"]>;
@@ -473,16 +477,16 @@ export function TextPropertiesPanel({
                 } as any);
               }}
             >
-              <option value="none">제한 없음</option>
-              <option value="prose">본문 폭 (60ch)</option>
-              <option value="narrow">좁게 (40ch)</option>
+              <option value="none">{m.maxWidthPresetNone}</option>
+              <option value="prose">{m.maxWidthPresetProse}</option>
+              <option value="narrow">{m.maxWidthPresetNarrow}</option>
             </select>
             <input
               type="range"
               min={20}
               max={120}
               step={5}
-              aria-label="최대 너비 슬라이더 (ch 단위)"
+              aria-label={m.maxWidthSliderAria}
               value={(() => {
                 const raw = textProps.maxWidthCustom ?? "";
                 const match = raw.match(/([0-9]+)ch/);
@@ -503,8 +507,8 @@ export function TextPropertiesPanel({
           </div>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="최대 너비 커스텀"
-            placeholder="예: 600px, 40rem, 80%, 60ch"
+            aria-label={m.maxWidthCustomAria}
+            placeholder={m.maxWidthPlaceholder}
             value={textProps.maxWidthCustom ?? ""}
             onChange={(e) => {
               updateBlock(selectedBlockId, {
diff --git a/src/app/editor/panels/VideoPropertiesPanel.tsx b/src/app/editor/panels/VideoPropertiesPanel.tsx
index 642e954..ab5aa12 100644
--- a/src/app/editor/panels/VideoPropertiesPanel.tsx
+++ b/src/app/editor/panels/VideoPropertiesPanel.tsx
@@ -3,6 +3,8 @@
 import type { VideoBlockProps } from "@/features/editor/state/editorStore";
 import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
 import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorVideoPanelMessages } from "@/features/i18n/messages/editorVideoPanel";
 
 export type VideoPropertiesPanelProps = {
   videoProps: VideoBlockProps;
@@ -11,6 +13,8 @@ export type VideoPropertiesPanelProps = {
 };
 
 export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock }: VideoPropertiesPanelProps) {
+  const locale = useAppLocale();
+  const m = getEditorVideoPanelMessages(locale);
   // 비디오 소스 유형: 업로드(/api/video/:id) 또는 외부 URL 구분
   const source: "url" | "upload" =
     videoProps.sourceType === "asset" || (videoProps.sourceUrl && videoProps.sourceUrl.startsWith("/api/video/"))
@@ -22,10 +26,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
       {/* 비디오 소스 선택 (URL / 업로드) */}
       <div className="space-y-1">
         <label className="flex flex-col gap-1 text-xs text-slate-400">
-          <span>비디오 소스</span>
+          <span>{m.sourceLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="비디오 소스"
+            aria-label={m.sourceAria}
             value={source}
             onChange={(e) => {
               const next = e.target.value as "url" | "upload";
@@ -41,8 +45,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
               }
             }}
           >
-            <option value="url">URL</option>
-            <option value="upload">파일 업로드</option>
+            <option value="url">{m.sourceOptionUrl}</option>
+            <option value="upload">{m.sourceOptionUpload}</option>
           </select>
         </label>
       </div>
@@ -51,10 +55,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
       {source === "url" && (
         <div className="space-y-1">
           <label className="flex flex-col gap-1 text-xs text-slate-400">
-            <span>비디오 URL</span>
+            <span>{m.urlLabel}</span>
             <input
               className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-              aria-label="비디오 URL"
+              aria-label={m.urlAria}
               value={videoProps.sourceUrl ?? ""}
               onChange={(e) => {
                 const value = e.target.value;
@@ -70,10 +74,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
           {/* 접근성: 제목 / aria-label / 캡션 텍스트 (현재는 UI에서 숨김 처리) */}
           <div className="hidden">
             <label className="flex flex-col gap-1 mt-2">
-              <span>비디오 제목</span>
+              <span>{m.titleLabel}</span>
               <input
                 className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
-                aria-label="비디오 제목"
+                aria-label={m.titleAria}
                 value={(videoProps as any).titleText ?? ""}
                 onChange={(e) => {
                   updateBlock(selectedBlockId, { titleText: e.target.value } as any);
@@ -82,10 +86,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
             </label>
 
             <label className="mt-2 flex flex-col gap-1">
-              <span>비디오 aria-label</span>
+              <span>{m.ariaLabelLabel}</span>
               <input
                 className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
-                aria-label="비디오 aria-label"
+                aria-label={m.ariaLabelAria}
                 value={(videoProps as any).ariaLabel ?? ""}
                 onChange={(e) => {
                   updateBlock(selectedBlockId, { ariaLabel: e.target.value } as any);
@@ -94,10 +98,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
             </label>
 
             <label className="mt-2 flex flex-col gap-1">
-              <span>비디오 캡션 텍스트</span>
+              <span>{m.captionTextLabel}</span>
               <input
                 className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
-                aria-label="비디오 캡션 텍스트"
+                aria-label={m.captionTextAria}
                 value={(videoProps as any).captionText ?? ""}
                 onChange={(e) => {
                   updateBlock(selectedBlockId, { captionText: e.target.value } as any);
@@ -110,10 +114,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
 
       <div className="mt-3 space-y-1 text-xs text-slate-400">
         <label className="flex flex-col gap-1">
-          <span>포스터 이미지 URL</span>
+          <span>{m.posterImageUrlLabel}</span>
           <input
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="포스터 이미지 URL"
+            aria-label={m.posterImageUrlAria}
             value={videoProps.posterImageSrc ?? ""}
             onChange={(e) => {
               const value = e.target.value;
@@ -131,12 +135,12 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
       {source === "upload" && (
         <div className="space-y-1">
           <label className="flex flex-col gap-1 text-xs text-slate-400">
-            <span>비디오 파일 업로드</span>
+            <span>{m.uploadLabel}</span>
             <input
               type="file"
               accept="video/*"
               className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
-              aria-label="비디오 파일 업로드"
+              aria-label={m.uploadAria}
               onChange={async (event) => {
                 const file = event.target.files?.[0];
                 if (!file) return;
@@ -175,14 +179,14 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
       )}
 
       <div className="mt-3 space-y-2 border-t border-slate-800 pt-3 text-xs text-slate-400">
-        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">비디오 스타일</h4>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.styleSectionTitle}</h4>
 
         {/* 카드 배경색 */}
         <div className="space-y-1">
           <ColorPickerField
-            label="카드 배경색"
-            ariaLabelColorInput="비디오 카드 배경색 피커"
-            ariaLabelHexInput="비디오 카드 배경색 HEX"
+            label={m.cardBackgroundLabel}
+            ariaLabelColorInput={m.cardBackgroundPickerAria}
+            ariaLabelHexInput={m.cardBackgroundHexAria}
             value={videoProps.backgroundColorCustom ?? ""}
             onChange={(hex) => {
               const next = hex && hex.trim().length > 0 ? hex : undefined;
@@ -194,10 +198,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
 
         {/* 정렬 */}
         <label className="flex flex-col gap-1">
-          <span>비디오 정렬</span>
+          <span>{m.alignLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="비디오 정렬"
+            aria-label={m.alignAria}
             value={videoProps.align ?? "center"}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -205,18 +209,18 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
               } as any)
             }
           >
-            <option value="left">왼쪽</option>
-            <option value="center">가운데</option>
-            <option value="right">오른쪽</option>
+            <option value="left">{m.alignOptionLeft}</option>
+            <option value="center">{m.alignOptionCenter}</option>
+            <option value="right">{m.alignOptionRight}</option>
           </select>
         </label>
 
         {/* 너비 모드 */}
         <label className="flex flex-col gap-1">
-          <span>비디오 너비 모드</span>
+          <span>{m.widthModeLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="비디오 너비 모드"
+            aria-label={m.widthModeAria}
             value={videoProps.widthMode ?? "auto"}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -224,24 +228,24 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
               } as any)
             }
           >
-            <option value="auto">내용에 맞춤</option>
-            <option value="full">가로 전체</option>
-            <option value="fixed">고정 너비 (px)</option>
+            <option value="auto">{m.widthModeOptionAuto}</option>
+            <option value="full">{m.widthModeOptionFull}</option>
+            <option value="fixed">{m.widthModeOptionFixed}</option>
           </select>
         </label>
 
         {(videoProps.widthMode ?? "auto") === "fixed" && (
           <NumericPropertyControl
-            label="고정 너비 (px)"
-            unitLabel="(px)"
+            label={m.fixedWidthLabel}
+            unitLabel={m.fixedWidthUnitLabel}
             value={videoProps.widthPx ?? 640}
             min={160}
             max={1920}
             step={10}
             presets={[
-              { id: "sm", label: "작게", value: 480 },
-              { id: "md", label: "보통", value: 640 },
-              { id: "lg", label: "넓게", value: 960 },
+              { id: "sm", label: m.fixedWidthPresetSmall, value: 480 },
+              { id: "md", label: m.fixedWidthPresetMedium, value: 640 },
+              { id: "lg", label: m.fixedWidthPresetLarge, value: 960 },
             ]}
             onChangeValue={(v) => {
               updateBlock(selectedBlockId, {
@@ -253,8 +257,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
 
         {/* 카드 패딩 */}
         <NumericPropertyControl
-          label="카드 패딩"
-          unitLabel="(px)"
+          label={m.cardPaddingLabel}
+          unitLabel={m.cardPaddingUnitLabel}
           value={typeof videoProps.cardPaddingPx === "number" ? videoProps.cardPaddingPx : 0}
           min={0}
           max={64}
@@ -267,8 +271,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
 
         {/* 카드 모서리 둥글기 */}
         <NumericPropertyControl
-          label="카드 모서리 둥글기"
-          unitLabel="(px)"
+          label={m.cardBorderRadiusLabel}
+          unitLabel={m.cardBorderRadiusUnitLabel}
           value={typeof videoProps.borderRadiusPx === "number" ? videoProps.borderRadiusPx : 0}
           min={0}
           max={64}
@@ -281,8 +285,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
 
         {/* 시작 시점 (초) */}
         <NumericPropertyControl
-          label="시작 시점 (초)"
-          unitLabel="(초)"
+          label={m.startTimeLabel}
+          unitLabel={m.startTimeUnitLabel}
           value={typeof videoProps.startTimeSec === "number" ? videoProps.startTimeSec : 0}
           min={0}
           max={600}
@@ -295,8 +299,8 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
 
         {/* 종료 시점 (초) */}
         <NumericPropertyControl
-          label="종료 시점 (초)"
-          unitLabel="(초)"
+          label={m.endTimeLabel}
+          unitLabel={m.endTimeUnitLabel}
           value={typeof videoProps.endTimeSec === "number" ? videoProps.endTimeSec : 0}
           min={0}
           max={600}
@@ -309,10 +313,10 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
 
         {/* 화면 비율 */}
         <label className="flex flex-col gap-1">
-          <span>화면 비율</span>
+          <span>{m.aspectRatioLabel}</span>
           <select
             className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
-            aria-label="화면 비율"
+            aria-label={m.aspectRatioAria}
             value={videoProps.aspectRatio ?? "16:9"}
             onChange={(e) =>
               updateBlock(selectedBlockId, {
@@ -339,7 +343,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
                 } as any)
               }
             />
-            <span className="text-[11px]">자동 재생</span>
+            <span className="text-[11px]">{m.autoplayLabel}</span>
           </label>
           <label className="flex items-center gap-1">
             <input
@@ -352,7 +356,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
                 } as any)
               }
             />
-            <span className="text-[11px]">반복 재생</span>
+            <span className="text-[11px]">{m.loopLabel}</span>
           </label>
           <label className="flex items-center gap-1">
             <input
@@ -365,7 +369,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
                 } as any)
               }
             />
-            <span className="text-[11px]">음소거</span>
+            <span className="text-[11px]">{m.mutedLabel}</span>
           </label>
           <label className="flex items-center gap-1">
             <input
@@ -378,7 +382,7 @@ export function VideoPropertiesPanel({ videoProps, selectedBlockId, updateBlock
                 } as any)
               }
             />
-            <span className="text-[11px]">재생 컨트롤 표시</span>
+            <span className="text-[11px]">{m.controlsLabel}</span>
           </label>
         </div>
       </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7e850b..a813e6b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,28 @@
 import "../styles/globals.css";
 import "../styles/builder.css";
 import type { ReactNode } from "react";
+import { headers } from "next/headers";
+import { LocaleProvider } from "@/features/i18n/LocaleProvider";
+import { LocaleSwitcher } from "@/features/i18n/LocaleSwitcher";
+import { resolveLocaleFromAcceptLanguage, DEFAULT_LOCALE } from "@/features/i18n/locale";
 
 export const metadata = {
   title: "Page Builder",
   description: "No-code single page builder",
 };
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const headerList = await headers();
+  const acceptLanguage = headerList.get("accept-language");
+  const locale = resolveLocaleFromAcceptLanguage(acceptLanguage ?? undefined) ?? DEFAULT_LOCALE;
+
   return (
-    <html lang="ko" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
       <body className="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
-        {children}
+        <LocaleProvider initialLocale={locale}>
+				{children}
+				<LocaleSwitcher />
+			</LocaleProvider>
       </body>
     </html>
   );
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 65c46ea..26e3ad5 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -4,6 +4,8 @@ import { FormEvent, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { SunMoon } from "lucide-react";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getAuthMessages } from "@/features/i18n/messages/auth";
 
 // 로그인 페이지 컴포넌트
 // - 이메일/비밀번호를 입력받아 /api/auth/login 으로 요청을 전송한다.
@@ -12,6 +14,9 @@ import { SunMoon } from "lucide-react";
 export default function LoginPage() {
   const router = useRouter();
 
+  const locale = useAppLocale();
+  const { login: t } = getAuthMessages(locale);
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -67,9 +72,9 @@ export default function LoginPage() {
       if (!res.ok) {
         try {
           const data = await res.json();
-          setError(data?.message ?? "로그인에 실패했습니다. 다시 시도해 주세요.");
+          setError(data?.message ?? t.errorLoginFailed);
         } catch {
-          setError("로그인에 실패했습니다. 다시 시도해 주세요.");
+          setError(t.errorLoginFailed);
         }
         setLoading(false);
         return;
@@ -78,7 +83,7 @@ export default function LoginPage() {
       // 성공 시에는 /dashboard 로 이동한다.
       router.push("/dashboard");
     } catch {
-      setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+      setError(t.errorNetwork);
     } finally {
       setLoading(false);
     }
@@ -88,24 +93,24 @@ export default function LoginPage() {
     <main className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
       <div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900/70">
         <div className="flex items-center justify-between mb-1">
-          <h1 className="text-lg font-semibold">로그인</h1>
+          <h1 className="text-lg font-semibold">{t.title}</h1>
           <button
             type="button"
             className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-[11px] font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
             onClick={handleToggleTheme}
           >
             <SunMoon className="w-4 h-4" aria-hidden="true" />
-            <span>테마 전환</span>
+            <span>{t.themeToggleLabel}</span>
           </button>
         </div>
-        <p className="text-xs text-slate-500 mb-4 dark:text-slate-400">프로젝트를 관리하려면 먼저 계정으로 로그인하세요.</p>
+        <p className="text-xs text-slate-500 mb-4 dark:text-slate-400">{t.description}</p>
 
         {error && <p className="mb-3 text-xs text-red-300">{error}</p>}
 
         <form onSubmit={handleSubmit} className="space-y-3 text-xs">
           <div className="space-y-1">
             <label htmlFor="email" className="block text-slate-800 dark:text-slate-200">
-              이메일
+              {t.emailLabel}
             </label>
             <input
               id="email"
@@ -119,7 +124,7 @@ export default function LoginPage() {
 
           <div className="space-y-1">
             <label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
-              비밀번호
+              {t.passwordLabel}
             </label>
             <input
               id="password"
@@ -137,17 +142,18 @@ export default function LoginPage() {
             disabled={loading}
             className="mt-2 w-full inline-flex items-center justify-center gap-1 rounded bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1 text-xs font-medium"
           >
-            {loading ? "로그인 중..." : "로그인"}
+            {loading ? t.submitLoading : t.submitIdle}
           </button>
         </form>
 
         <p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400">
-          아직 계정이 없다면
+          {t.signupPromptPrefix}
           {" "}
           <Link href="/signup" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
-            회원가입
+            {t.signupLinkText}
           </Link>
-          을 진행해 주세요.
+          {t.signupPromptSuffix && " "}
+          {t.signupPromptSuffix}
         </p>
       </div>
     </main>
diff --git a/src/app/preview/page.tsx b/src/app/preview/page.tsx
index b41bb0f..353c4bd 100644
--- a/src/app/preview/page.tsx
+++ b/src/app/preview/page.tsx
@@ -4,11 +4,15 @@ import type { CSSProperties } from "react";
 import { useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getPreviewMessages } from "@/features/i18n/messages/preview";
 import { useEditorStore } from "@/features/editor/state/editorStore";
 import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
 
 export default function PreviewPage() {
   const router = useRouter();
+  const locale = useAppLocale();
+  const m = getPreviewMessages(locale);
   const blocks = useEditorStore((state) => state.blocks);
   const projectConfig = useEditorStore((state) => (state as any).projectConfig);
   const replaceBlocks = useEditorStore((state) => state.replaceBlocks);
@@ -164,8 +168,8 @@ export default function PreviewPage() {
     <main className="min-h-screen flex flex-col" style={mainStyle}>
       <header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
         <div>
-          <h1 className="text-xl font-semibold">Page Preview</h1>
-          <p className="text-xs text-slate-500 dark:text-slate-400">빌더로 만든 페이지를 미리 보는 화면</p>
+          <h1 className="text-xl font-semibold">{m.headerTitle}</h1>
+          <p className="text-xs text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
         </div>
         <div className="flex items-center gap-2 text-xs">
           <button
@@ -175,19 +179,19 @@ export default function PreviewPage() {
               void handleExportZip();
             }}
           >
-            페이지 파일로 내보내기 (ZIP)
+            {m.exportZipButtonLabel}
           </button>
           <Link
             href="/projects"
             className="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1 text-xs text-slate-800 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
           >
-            프로젝트 목록
+            {m.navProjects}
           </Link>
           <Link
             href={editorHref}
             className="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1 text-xs text-slate-800 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
           >
-            에디터로 돌아가기
+            {m.navBackToEditor}
           </Link>
         </div>
       </header>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 2116172..ac86a82 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -15,6 +15,9 @@ import {
   FolderKanban,
   SunMoon,
 } from "lucide-react";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
+import { getProjectsMessages } from "@/features/i18n/messages/projects";
 
 interface ProjectListItem {
   id: string;
@@ -27,6 +30,9 @@ interface ProjectListItem {
 
 export default function ProjectsPage() {
   const router = useRouter();
+  const locale = useAppLocale();
+  const t = getDashboardMessages(locale);
+  const p = getProjectsMessages(locale);
   const [projects, setProjects] = useState<ProjectListItem[]>([]);
   const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -49,12 +55,10 @@ export default function ProjectsPage() {
             setStatus("error");
 
             if (res.status === 401) {
-              setErrorMessage("프로젝트 목록을 불러오는 중 인증 오류가 발생했습니다. 다시 로그인해 주세요.");
+              setErrorMessage(p.errorFetchUnauthorized);
               router.push("/login");
             } else {
-              setErrorMessage(
-                "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
-              );
+              setErrorMessage(p.errorFetchGeneric);
             }
           }
           return;
@@ -69,7 +73,7 @@ export default function ProjectsPage() {
       } catch {
         if (!cancelled) {
           setStatus("error");
-          setErrorMessage("프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+          setErrorMessage(p.errorFetchGeneric);
         }
       }
     };
@@ -88,9 +92,7 @@ export default function ProjectsPage() {
 
   const handleDelete = async (slug: string) => {
     if (typeof window !== "undefined") {
-      const confirmed = window.confirm(
-        "이 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
-      );
+      const confirmed = window.confirm(p.confirmDeleteSingle);
 
       if (!confirmed) return;
     }
@@ -102,7 +104,7 @@ export default function ProjectsPage() {
 
       if (!res.ok) {
         setStatus("error");
-        setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        setErrorMessage(p.errorDeleteSingle);
         return;
       }
 
@@ -118,7 +120,7 @@ export default function ProjectsPage() {
       setErrorMessage(null);
     } catch {
       setStatus("error");
-      setErrorMessage("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+      setErrorMessage(p.errorDeleteSingle);
     }
   };
 
@@ -152,9 +154,7 @@ export default function ProjectsPage() {
     if (slugs.length === 0) return;
 
     if (typeof window !== "undefined") {
-      const confirmed = window.confirm(
-        "선택한 프로젝트를 모두 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
-      );
+      const confirmed = window.confirm(p.confirmDeleteBulk);
       if (!confirmed) return;
     }
 
@@ -170,7 +170,7 @@ export default function ProjectsPage() {
 
       if (okSlugs.length === 0) {
         setStatus("error");
-        setErrorMessage("선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        setErrorMessage(p.errorDeleteBulkAllFailed);
         return;
       }
 
@@ -186,16 +186,14 @@ export default function ProjectsPage() {
   
       if (okSlugs.length !== slugs.length) {
         setStatus("error");
-        setErrorMessage(
-          "일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.",
-        );
+        setErrorMessage(p.errorDeleteBulkSomeFailed);
       } else {
         setStatus("idle");
         setErrorMessage(null);
       }
     } catch {
       setStatus("error");
-      setErrorMessage("선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+      setErrorMessage(p.errorDeleteBulkAllFailed);
     }
   };
 
@@ -216,8 +214,8 @@ export default function ProjectsPage() {
     <main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
       <header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">프로젝트 목록</h1>
-          <p className="text-sm text-slate-500 dark:text-slate-400">저장된 프로젝트들을 한 눈에 볼 수 있는 목록</p>
+          <h1 className="text-2xl font-bold tracking-tight">{p.headerTitle}</h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400">{p.headerDescription}</p>
         </div>
         <div className="flex items-center gap-3 text-sm">
           <nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
@@ -226,7 +224,7 @@ export default function ProjectsPage() {
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
             >
               <LayoutDashboard className="w-4 h-4" aria-hidden="true" />
-              <span>대시보드</span>
+              <span>{t.navDashboard}</span>
             </Link>
             <Link
               href="/projects"
@@ -234,14 +232,14 @@ export default function ProjectsPage() {
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-sky-600 text-white shadow-sm hover:bg-sky-700"
             >
               <FolderKanban className="w-4 h-4" aria-hidden="true" />
-              <span>프로젝트 목록</span>
+              <span>{t.navProjects}</span>
             </Link>
             <Link
               href="/projects/submissions"
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
             >
               <ListChecks className="w-4 h-4" aria-hidden="true" />
-              <span>전체 제출 내역</span>
+              <span>{t.navSubmissions}</span>
             </Link>
           </nav>
           <button
@@ -250,7 +248,7 @@ export default function ProjectsPage() {
             onClick={handleToggleTheme}
           >
             <SunMoon className="w-4 h-4" aria-hidden="true" />
-            <span>테마 전환</span>
+            <span>{t.themeToggleLabel}</span>
           </button>
           <div className="relative">
             <button
@@ -260,7 +258,7 @@ export default function ProjectsPage() {
                 setIsMenuOpen((prev) => !prev);
               }}
             >
-              메뉴
+              {t.menuLabel}
             </button>
             {isMenuOpen && (
               <div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
@@ -272,7 +270,7 @@ export default function ProjectsPage() {
                     void handleLogout();
                   }}
                 >
-                  로그아웃
+                  {t.logoutLabel}
                 </button>
               </div>
             )}
@@ -282,7 +280,7 @@ export default function ProjectsPage() {
       <section className="flex-1 px-6 py-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
         {status === "error" && (
           <p className="text-xs text-red-500 mb-3 dark:text-red-300">
-            {errorMessage ?? "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."}
+            {errorMessage ?? p.errorFetchGeneric}
           </p>
         )}
         {projects.length === 0 && status === "idle" && (
@@ -298,7 +296,9 @@ export default function ProjectsPage() {
                 <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full border bg-slate-100 border-slate-300 text-slate-700 dark:bg-slate-900/70 dark:border-slate-700 dark:text-slate-200">
                   <ListChecks className="w-3 h-3 text-slate-400 dark:text-slate-500" aria-hidden="true" />
                   <span>
-                    선택된 프로젝트: <span className="font-semibold">{selectedSlugs.length}</span>개
+                    {p.toolbarSelectedPrefix}
+                    <span className="font-semibold">{selectedSlugs.length}</span>
+                    {p.toolbarSelectedSuffix}
                   </span>
                 </span>
               </div>
@@ -312,14 +312,14 @@ export default function ProjectsPage() {
                   }}
                 >
                   <Trash2 className="w-3 h-3" aria-hidden="true" />
-                  <span>선택 삭제</span>
+                  <span>{p.toolbarDeleteSelected}</span>
                 </button>
                 <Link
                   href="/editor?new=1"
                   className="inline-flex items-center gap-1 rounded border px-2 py-1 text-xs font-medium border-sky-500 bg-sky-600 text-white hover:bg-sky-700 shadow-sm dark:border-sky-700 dark:bg-sky-950 dark:text-sky-100 dark:hover:bg-sky-900"
                 >
                   <FilePlus2 className="w-3 h-3" aria-hidden="true" />
-                  <span>새 프로젝트 만들기</span>
+                  <span>{p.toolbarCreateNew}</span>
                 </Link>
               </div>
             </div>
@@ -330,7 +330,7 @@ export default function ProjectsPage() {
                     <input
                       type="checkbox"
                       className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle"
-                      aria-label="전체 선택"
+                      aria-label={p.tableHeaderSelectAllAria}
                       checked={
                         pageProjects.length > 0 && pageProjects.every((p) => selectedSlugs.includes(p.slug))
                       }
@@ -345,12 +345,12 @@ export default function ProjectsPage() {
                       }}
                     />
                   </th>
-                  <th className="py-2 pr-4">제목</th>
-                  <th className="py-2 pr-4">주소(slug)</th>
-                  <th className="py-2 pr-4">상태</th>
-                  <th className="py-2 pr-4">생성일</th>
-                  <th className="py-2 pr-4">수정일</th>
-                  <th className="py-2 pr-4 text-right">액션</th>
+                  <th className="py-2 pr-4">{p.tableHeaderTitle}</th>
+                  <th className="py-2 pr-4">{p.tableHeaderSlug}</th>
+                  <th className="py-2 pr-4">{p.tableHeaderStatus}</th>
+                  <th className="py-2 pr-4">{p.tableHeaderCreatedAt}</th>
+                  <th className="py-2 pr-4">{p.tableHeaderUpdatedAt}</th>
+                  <th className="py-2 pr-4 text-right">{p.tableHeaderActions}</th>
                 </tr>
               </thead>
               <tbody>
@@ -365,7 +365,7 @@ export default function ProjectsPage() {
                         <input
                           type="checkbox"
                           className="h-3 w-3 rounded border-slate-700 bg-slate-900 align-middle"
-                          aria-label={`${project.title} 선택`}
+                          aria-label={`${project.title}${p.tableRowSelectAriaSuffix}`}
                           checked={checked}
                           onChange={(e) => {
                             if (e.target.checked) {
@@ -394,21 +394,21 @@ export default function ProjectsPage() {
                             className="inline-flex items-center gap-1 text-sky-600 hover:text-sky-700 underline-offset-2 hover:underline dark:text-sky-300 dark:hover:text-sky-200"
                           >
                             <Pencil className="w-3 h-3" aria-hidden="true" />
-                            <span>편집</span>
+                            <span>{p.actionEdit}</span>
                           </Link>
                           <Link
                             href={`/preview?slug=${encodeURIComponent(project.slug)}`}
                             className="inline-flex items-center gap-1 text-slate-600 hover:text-slate-800 underline-offset-2 hover:underline dark:text-slate-300 dark:hover:text-slate-100"
                           >
                             <Eye className="w-3 h-3" aria-hidden="true" />
-                            <span>미리보기</span>
+                            <span>{p.actionPreview}</span>
                           </Link>
                           <Link
                             href={`/projects/${encodeURIComponent(project.slug)}/submissions`}
                             className="inline-flex items-center gap-1 text-emerald-600 hover:text-emerald-700 underline-offset-2 hover:underline dark:text-emerald-300 dark:hover:text-emerald-100"
                           >
                             <ListChecks className="w-3 h-3" aria-hidden="true" />
-                            <span>폼 제출 내역</span>
+                            <span>{p.actionViewSubmissions}</span>
                           </Link>
                           <button
                             type="button"
@@ -418,7 +418,7 @@ export default function ProjectsPage() {
                             }}
                           >
                             <Trash2 className="w-3 h-3" aria-hidden="true" />
-                            <span>삭제</span>
+                            <span>{p.actionDelete}</span>
                           </button>
                         </div>
                       </td>
@@ -431,7 +431,9 @@ export default function ProjectsPage() {
             <div className="mt-3 flex items-center justify-between text-[11px] text-slate-600 dark:text-slate-300">
               <div className="inline-flex items-center gap-2">
                 <span className="px-2 py-1 rounded-full bg-slate-100 border border-slate-300 text-slate-700 dark:bg-slate-900/70 dark:border-slate-700 dark:text-slate-200">
-                  전체 {totalCount}개 중{" "}
+                  {p.pagerTotalPrefix}
+                  {totalCount}
+                  {p.pagerTotalCountSuffix}
                   <span className="font-semibold">
                     {totalCount === 0 ? 0 : startIndex + 1}–{Math.min(endIndex, totalCount)}
                   </span>
@@ -465,7 +467,7 @@ export default function ProjectsPage() {
                   onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                 >
                   <ChevronLeft className="w-3 h-3" aria-hidden="true" />
-                  <span>이전</span>
+                  <span>{p.pagerPrevLabel}</span>
                 </button>
                 <button
                   type="button"
@@ -473,7 +475,7 @@ export default function ProjectsPage() {
                   className="inline-flex items-center gap-1 px-2 py-1 rounded border border-slate-300 text-slate-700 bg-white disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:bg-slate-900 dark:hover:bg-slate-800"
                   onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                 >
-                  <span>다음</span>
+                  <span>{p.pagerNextLabel}</span>
                   <ChevronRight className="w-3 h-3" aria-hidden="true" />
                 </button>
               </div>
diff --git a/src/app/projects/submissions/page.tsx b/src/app/projects/submissions/page.tsx
index 1f0402b..b406a0c 100644
--- a/src/app/projects/submissions/page.tsx
+++ b/src/app/projects/submissions/page.tsx
@@ -4,6 +4,9 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
+import { getSubmissionsMessages } from "@/features/i18n/messages/submissions";
 
 interface SubmissionItem {
   id: string;
@@ -17,6 +20,9 @@ type PageStatus = "idle" | "loading" | "error";
 
 export default function AllProjectSubmissionsPage() {
   const router = useRouter();
+  const locale = useAppLocale();
+  const t = getDashboardMessages(locale);
+  const m = getSubmissionsMessages(locale);
   const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
   const [status, setStatus] = useState<PageStatus>("idle");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -37,13 +43,13 @@ export default function AllProjectSubmissionsPage() {
 
           if (res.status === 401) {
             setStatus("error");
-            setErrorMessage("폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요.");
+            setErrorMessage(m.errorUnauthorized);
             router.push("/login");
             return;
           }
 
           setStatus("error");
-          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+          setErrorMessage(m.errorGeneric);
           return;
         }
 
@@ -57,7 +63,7 @@ export default function AllProjectSubmissionsPage() {
       } catch {
         if (!cancelled) {
           setStatus("error");
-          setErrorMessage("폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+          setErrorMessage(m.errorGeneric);
         }
       }
     };
@@ -92,13 +98,13 @@ export default function AllProjectSubmissionsPage() {
       });
 
       if (!res.ok) {
-        setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        setErrorMessage(m.errorLogout);
         return;
       }
 
       router.push("/login");
     } catch {
-      setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+      setErrorMessage(m.errorLogout);
     }
   };
 
@@ -106,8 +112,8 @@ export default function AllProjectSubmissionsPage() {
     <main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
       <header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight">전체 폼 제출 내역</h1>
-          <p className="text-sm text-slate-500 dark:text-slate-400">로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.</p>
+          <h1 className="text-2xl font-bold tracking-tight">{m.headerTitle}</h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400">{m.headerDescription}</p>
         </div>
         <div className="flex items-center gap-3 text-sm">
           <nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
@@ -116,14 +122,14 @@ export default function AllProjectSubmissionsPage() {
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
             >
               <LayoutDashboard className="w-4 h-4" aria-hidden="true" />
-              <span>대시보드</span>
+              <span>{t.navDashboard}</span>
             </Link>
             <Link
               href="/projects"
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
             >
               <FolderKanban className="w-4 h-4" aria-hidden="true" />
-              <span>프로젝트 목록</span>
+              <span>{t.navProjects}</span>
             </Link>
             <Link
               href="/projects/submissions"
@@ -131,7 +137,7 @@ export default function AllProjectSubmissionsPage() {
               className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-emerald-600 text-white shadow-sm hover:bg-emerald-700"
             >
               <ListChecks className="w-4 h-4" aria-hidden="true" />
-              <span>전체 제출 내역</span>
+              <span>{t.navSubmissions}</span>
             </Link>
           </nav>
           <button
@@ -151,7 +157,7 @@ export default function AllProjectSubmissionsPage() {
             }}
           >
             <SunMoon className="w-4 h-4" aria-hidden="true" />
-            <span>테마 전환</span>
+            <span>{t.themeToggleLabel}</span>
           </button>
           <div className="relative">
             <button
@@ -161,7 +167,7 @@ export default function AllProjectSubmissionsPage() {
                 setIsMenuOpen((prev) => !prev);
               }}
             >
-              메뉴
+              {t.menuLabel}
             </button>
             {isMenuOpen && (
               <div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
@@ -173,7 +179,7 @@ export default function AllProjectSubmissionsPage() {
                     void handleLogout();
                   }}
                 >
-                  로그아웃
+                  {t.logoutLabel}
                 </button>
               </div>
             )}
@@ -187,25 +193,25 @@ export default function AllProjectSubmissionsPage() {
         )}
 
         {status === "loading" && (
-          <p className="text-xs text-slate-500 mb-3 dark:text-slate-400">폼 제출 내역을 불러오는 중입니다...</p>
+          <p className="text-xs text-slate-500 mb-3 dark:text-slate-400">{m.loadingText}</p>
         )}
 
-        {submissions.length === 0 && status === "idle" && !errorMessage && (
-          <p className="text-xs text-slate-500 dark:text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p>
+        {status === "idle" && !errorMessage && submissions.length === 0 && (
+          <p className="text-xs text-slate-500 dark:text-slate-400">{m.emptyText}</p>
         )}
 
         {submissions.length > 0 && (
           <table className="w-full text-xs text-left border-collapse mt-2">
             <thead>
               <tr className="border-b border-slate-200 text-slate-600 dark:border-slate-800 dark:text-slate-400">
-                <th className="py-2 pr-4">제출 시각</th>
-                <th className="py-2 pr-4">프로젝트</th>
-                <th className="py-2 pr-4">Slug</th>
-                <th className="py-2 pr-4">이름</th>
-                <th className="py-2 pr-4">이메일</th>
-                <th className="py-2 pr-4">전화번호</th>
-                <th className="py-2 pr-4">생년월일</th>
-                <th className="py-2 pr-4">기타 필드</th>
+                <th className="py-2 pr-4">{m.tableHeaderCreatedAt}</th>
+                <th className="py-2 pr-4">{m.tableHeaderProject}</th>
+                <th className="py-2 pr-4">{m.tableHeaderSlug}</th>
+                <th className="py-2 pr-4">{m.tableHeaderName}</th>
+                <th className="py-2 pr-4">{m.tableHeaderEmail}</th>
+                <th className="py-2 pr-4">{m.tableHeaderPhone}</th>
+                <th className="py-2 pr-4">{m.tableHeaderBirthdate}</th>
+                <th className="py-2 pr-4">{m.tableHeaderOtherFields}</th>
               </tr>
             </thead>
             <tbody>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 63038fe..b951bf0 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -3,8 +3,10 @@
 import { FormEvent, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getAuthMessages } from "@/features/i18n/messages/auth";
 
-type PasswordStrengthLabel = "약함" | "보통" | "강함";
+type PasswordStrengthLabel = "weak" | "medium" | "strong";
 
 function getPasswordStrengthLabel(password: string): PasswordStrengthLabel | null {
   if (!password || password.length < 4) {
@@ -19,19 +21,22 @@ function getPasswordStrengthLabel(password: string): PasswordStrengthLabel | nul
   if (password.length >= 12) score += 1;
 
   if (password.length < 8 || score <= 2) {
-    return "약함";
+    return "weak";
   }
 
   if (score === 3) {
-    return "보통";
+    return "medium";
   }
 
-  return "강함";
+  return "strong";
 }
 
 export default function SignupPage() {
   const router = useRouter();
 
+  const locale = useAppLocale();
+  const { signup: t } = getAuthMessages(locale);
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [passwordConfirm, setPasswordConfirm] = useState("");
@@ -64,7 +69,7 @@ export default function SignupPage() {
 
     setError(null);
     if (password !== passwordConfirm) {
-      setError("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
+      setError(t.mismatchError);
       return;
     }
 
@@ -80,9 +85,9 @@ export default function SignupPage() {
       if (!res.ok) {
         try {
           const data = await res.json();
-          setError(data?.message ?? "회원가입에 실패했습니다. 다시 시도해 주세요.");
+          setError(data?.message ?? t.signupFailedFallbackError);
         } catch {
-          setError("회원가입에 실패했습니다. 다시 시도해 주세요.");
+          setError(t.signupFailedFallbackError);
         }
         setLoading(false);
         return;
@@ -90,26 +95,35 @@ export default function SignupPage() {
 
       router.push("/dashboard");
     } catch {
-      setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+      setError(t.errorNetwork);
     } finally {
       setLoading(false);
     }
   };
 
   const strengthLabel = getPasswordStrengthLabel(password);
+  let strengthText: string | null = null;
+  if (strengthLabel) {
+    strengthText =
+      strengthLabel === "weak"
+        ? t.passwordStrengthWeak
+        : strengthLabel === "medium"
+          ? t.passwordStrengthMedium
+          : t.passwordStrengthStrong;
+  }
 
   return (
     <main className="min-h-screen flex items-center justify-center bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
       <div className="w-full max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900/70">
-        <h1 className="text-lg font-semibold mb-1">회원가입</h1>
-        <p className="text-xs text-slate-500 mb-4 dark:text-slate-400">새 계정을 생성한 뒤 프로젝트를 저장하고 관리할 수 있습니다.</p>
+        <h1 className="text-lg font-semibold mb-1">{t.title}</h1>
+        <p className="text-xs text-slate-500 mb-4 dark:text-slate-400">{t.description}</p>
 
         {error && <p className="mb-3 text-xs text-red-300">{error}</p>}
 
         <form onSubmit={handleSubmit} className="space-y-3 text-xs">
           <div className="space-y-1">
             <label htmlFor="email" className="block text-slate-800 dark:text-slate-200">
-              이메일
+              {t.emailLabel}
             </label>
             <input
               id="email"
@@ -123,7 +137,7 @@ export default function SignupPage() {
 
           <div className="space-y-1">
             <label htmlFor="password" className="block text-slate-800 dark:text-slate-200">
-              비밀번호
+              {t.passwordLabel}
             </label>
             <input
               id="password"
@@ -143,9 +157,9 @@ export default function SignupPage() {
                   data-testid="password-strength-bar"
                   className={
                     "h-full transition-all " +
-                    (strengthLabel === "약함"
+                    (strengthLabel === "weak"
                       ? "w-1/3 bg-red-500"
-                      : strengthLabel === "보통"
+                      : strengthLabel === "medium"
                         ? "w-2/3 bg-amber-500"
                         : "w-full bg-emerald-600")
                   }
@@ -154,21 +168,21 @@ export default function SignupPage() {
               <p
                 className={
                   "text-[11px] " +
-                  (strengthLabel === "약함"
+                  (strengthLabel === "weak"
                     ? "text-red-500 dark:text-red-300"
-                    : strengthLabel === "보통"
+                    : strengthLabel === "medium"
                       ? "text-amber-500 dark:text-amber-300"
                       : "text-emerald-600 dark:text-emerald-300")
                 }
               >
-                비밀번호 난이도: {strengthLabel}
+                {t.passwordStrengthPrefix} {strengthText}
               </p>
             </div>
           )}
 
           <div className="space-y-1">
             <label htmlFor="passwordConfirm" className="block text-slate-800 dark:text-slate-200">
-              비밀번호 확인
+              {t.passwordConfirmLabel}
             </label>
             <input
               id="passwordConfirm"
@@ -186,17 +200,18 @@ export default function SignupPage() {
             disabled={loading}
             className="mt-2 w-full inline-flex items-center justify-center gap-1 rounded bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1 text-xs font-medium"
           >
-            {loading ? "회원가입 중..." : "회원가입"}
+            {loading ? t.submitLoading : t.submitIdle}
           </button>
         </form>
 
         <p className="mt-4 text-[11px] text-slate-500 dark:text-slate-400">
-          이미 계정이 있다면
+          {t.loginPromptPrefix}
           {" "}
           <Link href="/login" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
-            로그인
+            {t.loginLinkText}
           </Link>
-          으로 이동해 주세요.
+          {t.loginPromptSuffix && " "}
+          {t.loginPromptSuffix}
         </p>
       </div>
     </main>
diff --git a/src/features/editor/components/ColorPickerField.tsx b/src/features/editor/components/ColorPickerField.tsx
index 173ff27..809be26 100644
--- a/src/features/editor/components/ColorPickerField.tsx
+++ b/src/features/editor/components/ColorPickerField.tsx
@@ -1,5 +1,7 @@
 import type { ChangeEvent } from "react";
 import { useState } from "react";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getEditorColorPickerFieldMessages } from "@/features/i18n/messages/editorColorPickerField";
 
 export type ColorPaletteItem = {
   // 팔레트 식별자
@@ -75,6 +77,9 @@ export function ColorPickerField({
 }: ColorPickerFieldProps) {
   const [open, setOpen] = useState(false);
 
+  const locale = useAppLocale();
+  const m = getEditorColorPickerFieldMessages(locale);
+
   const colorInputValue = value && value.startsWith("#") ? value : "#ffffff";
   // 컬러 인풋 변경 시 HEX 문자열을 onChange로 전달한다.
   const handleColorInputChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -122,7 +127,7 @@ export function ColorPickerField({
         <input
           className="w-28 flex-none rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
           aria-label={ariaLabelHexInput}
-          placeholder="예: #ff0000"
+          placeholder={m.hexPlaceholder}
           value={value}
           onChange={handleHexInputChange}
         />
@@ -139,7 +144,9 @@ export function ColorPickerField({
                   style={{ backgroundColor: selectedPalette?.color ?? value ?? "#ffffff" }}
                 />
                 <span className="truncate text-slate-700 dark:text-slate-100">
-                  {selectedPalette?.label ?? "색상 팔레트"}
+                  {selectedPalette
+                    ? m.paletteLabels[selectedPalette.id] ?? selectedPalette.label
+                    : m.dropdownLabelDefault}
                 </span>
               </span>
               <span className="text-slate-400 dark:text-slate-500 text-[10px]">▼</span>
@@ -166,7 +173,7 @@ export function ColorPickerField({
                         className="inline-block h-3 w-3 rounded-full border border-slate-300 dark:border-slate-700"
                         style={{ backgroundColor: item.color }}
                       />
-                      <span>{item.label}</span>
+                      <span>{m.paletteLabels[item.id] ?? item.label}</span>
                     </span>
                   </button>
                 ))}
diff --git a/src/features/editor/components/PublicPageRenderer.tsx b/src/features/editor/components/PublicPageRenderer.tsx
index 6520d0e..88c294d 100644
--- a/src/features/editor/components/PublicPageRenderer.tsx
+++ b/src/features/editor/components/PublicPageRenderer.tsx
@@ -39,6 +39,8 @@ import {
   computeFormRadioPublicTokens,
   computeFormControllerPublicTokens,
 } from "@/features/editor/utils/formHelpers";
+import { useAppLocale } from "@/features/i18n/LocaleProvider";
+import { getPublicPageRendererMessages } from "@/features/i18n/messages/publicPageRenderer";
 
 // 섹션 레이아웃/스타일 토큰을 실제 Tailwind 클래스 조합으로 변환하는 유틸
 // (에디터/퍼블릭 렌더러에서 동일한 규칙을 재사용하기 위해 export 한다.)
@@ -101,6 +103,8 @@ const convertPxStringToEm = (value?: string | null) => {
 };
 
 export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererProps) {
+  const locale = useAppLocale();
+  const m = getPublicPageRendererMessages(locale);
   const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
   const [formMessage, setFormMessage] = useState<string>("");
 
@@ -186,7 +190,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
       setFormStatus("error");
 
       const bulletLines = missingRequiredLabels.map((label) => `- ${label}`).join("\n");
-      const message = `다음 필수 항목을 입력해 주세요:\n${bulletLines}`;
+      const message = `${m.requiredFieldsPrefix}\n${bulletLines}`;
 
       setFormMessage(message);
       return;
@@ -257,15 +261,15 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
 
       if (res.ok) {
         setFormStatus("success");
-        setFormMessage(props.successMessage ?? "성공적으로 전송되었습니다.");
+        setFormMessage(props.successMessage ?? m.submitSuccessDefault);
       } else {
         setFormStatus("error");
-        setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다.");
+        setFormMessage(props.errorMessage ?? m.submitErrorDefault);
       }
     } catch (error) {
       console.error("[PublicPageRenderer] form submit error", error);
       setFormStatus("error");
-      setFormMessage(props.errorMessage ?? "전송 중 오류가 발생했습니다.");
+      setFormMessage(props.errorMessage ?? m.submitErrorDefault);
     }
   };
 
@@ -541,7 +545,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
             // eslint-disable-next-line @next/next/no-img-element
             <img
               src={props.groupLabelImageUrl}
-              alt={props.groupLabel || "폼 그룹 타이틀"}
+              alt={props.groupLabel || m.checkboxGroupLabelImageAltFallback}
               className="inline-block max-w-full h-auto"
               style={tokens.groupTextStyle}
             />
@@ -571,7 +575,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
                     src={opt.labelImageUrl}
-                    alt={opt.label || props.groupLabel || "체크박스 옵션"}
+                    alt={opt.label || props.groupLabel || m.checkboxOptionImageAltFallback}
                     className="inline-block max-w-full h-auto"
                     style={tokens.optionTextStyle}
                   />
@@ -634,7 +638,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
             // eslint-disable-next-line @next/next/no-img-element
             <img
               src={props.groupLabelImageUrl}
-              alt={props.groupLabel || "폼 그룹 타이틀"}
+              alt={props.groupLabel || m.checkboxGroupLabelImageAltFallback}
               className="inline-block max-w-full h-auto"
               style={tokens.groupTextStyle}
             />
@@ -663,7 +667,7 @@ export function PublicPageRenderer({ blocks, projectSlug }: PublicPageRendererPr
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
                     src={opt.labelImageUrl}
-                    alt={opt.label || props.groupLabel || "라디오 옵션"}
+                    alt={opt.label || props.groupLabel || m.radioOptionImageAltFallback}
                     className="inline-block max-w-full h-auto"
                     style={tokens.optionTextStyle}
                   />
diff --git a/src/features/i18n/LocaleProvider.tsx b/src/features/i18n/LocaleProvider.tsx
new file mode 100644
index 0000000..2cc937c
--- /dev/null
+++ b/src/features/i18n/LocaleProvider.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { createContext, useContext, useState } from "react";
+import type { AppLocale } from "./locale";
+import { DEFAULT_LOCALE } from "./locale";
+
+type LocaleContextValue = {
+  locale: AppLocale;
+  setLocale: (locale: AppLocale) => void;
+};
+
+const LocaleContext = createContext<LocaleContextValue>({
+  locale: DEFAULT_LOCALE,
+  setLocale: () => {
+    // no-op default
+  },
+});
+
+export function LocaleProvider({
+  initialLocale,
+  children,
+}: {
+  initialLocale: AppLocale;
+  children: ReactNode;
+}) {
+  const [locale, setLocale] = useState<AppLocale>(initialLocale);
+
+  return <LocaleContext.Provider value={{ locale, setLocale }}>{children}</LocaleContext.Provider>;
+}
+
+export function useAppLocale(): AppLocale {
+  return useContext(LocaleContext).locale;
+}
+
+export function useLocaleActions() {
+  const { setLocale } = useContext(LocaleContext);
+  return { setLocale };
+}
diff --git a/src/features/i18n/LocaleSwitcher.tsx b/src/features/i18n/LocaleSwitcher.tsx
new file mode 100644
index 0000000..be6e541
--- /dev/null
+++ b/src/features/i18n/LocaleSwitcher.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useAppLocale, useLocaleActions } from "./LocaleProvider";
+import type { AppLocale } from "./locale";
+
+export function LocaleSwitcher() {
+  const locale = useAppLocale();
+  const { setLocale } = useLocaleActions();
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextLocale = event.target.value as AppLocale;
+    setLocale(nextLocale);
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 text-xs">
+      <label className="inline-flex items-center gap-1 rounded border border-slate-300 bg-white/80 px-2 py-1 text-slate-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/80 dark:text-slate-100">
+        <span>Language</span>
+        <select
+          className="bg-transparent text-xs outline-none"
+          value={locale}
+          onChange={handleChange}
+        >
+          <option value="en">English</option>
+          <option value="ko">한국어</option>
+        </select>
+      </label>
+    </div>
+  );
+}
diff --git a/src/features/i18n/locale.ts b/src/features/i18n/locale.ts
new file mode 100644
index 0000000..ff51a4f
--- /dev/null
+++ b/src/features/i18n/locale.ts
@@ -0,0 +1,22 @@
+export const SUPPORTED_LOCALES = ["en", "ko"] as const;
+export type AppLocale = (typeof SUPPORTED_LOCALES)[number];
+
+// 기본 로케일은 항상 en
+export const DEFAULT_LOCALE: AppLocale = "en";
+
+// Accept-Language 헤더 문자열에서 앱 로케일(en/ko)을 결정한다.
+// - ko 가 포함되어 있으면 ko
+// - 그렇지 않으면 기본(en)
+export function resolveLocaleFromAcceptLanguage(header: string | null | undefined): AppLocale {
+  if (!header) {
+    return DEFAULT_LOCALE;
+  }
+
+  const value = header.toLowerCase();
+
+  if (value.includes("ko")) {
+    return "ko";
+  }
+
+  return DEFAULT_LOCALE;
+}
diff --git a/src/features/i18n/messages/auth.ts b/src/features/i18n/messages/auth.ts
new file mode 100644
index 0000000..ab3fd0a
--- /dev/null
+++ b/src/features/i18n/messages/auth.ts
@@ -0,0 +1,120 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type LoginMessages = {
+  title: string;
+  description: string;
+  emailLabel: string;
+  passwordLabel: string;
+  submitIdle: string;
+  submitLoading: string;
+  themeToggleLabel: string;
+  errorLoginFailed: string;
+  errorNetwork: string;
+  signupPromptPrefix: string;
+  signupLinkText: string;
+  signupPromptSuffix: string;
+};
+
+export type SignupMessages = {
+  title: string;
+  description: string;
+  emailLabel: string;
+  passwordLabel: string;
+  passwordConfirmLabel: string;
+  submitIdle: string;
+  submitLoading: string;
+  mismatchError: string;
+  signupFailedFallbackError: string;
+  errorNetwork: string;
+  passwordStrengthPrefix: string;
+  passwordStrengthWeak: string;
+  passwordStrengthMedium: string;
+  passwordStrengthStrong: string;
+  loginPromptPrefix: string;
+  loginLinkText: string;
+  loginPromptSuffix: string;
+};
+
+export type AuthMessages = {
+  login: LoginMessages;
+  signup: SignupMessages;
+};
+
+const AUTH_MESSAGES: Record<AppLocale, AuthMessages> = {
+  en: {
+    login: {
+      title: "Log in",
+      description: "Sign in to manage and save your projects.",
+      emailLabel: "Email",
+      passwordLabel: "Password",
+      submitIdle: "Log in",
+      submitLoading: "Logging in...",
+      themeToggleLabel: "Toggle theme",
+      errorLoginFailed: "Failed to log in. Please try again.",
+      errorNetwork: "A network error occurred. Please try again later.",
+      signupPromptPrefix: "Don't have an account yet?",
+      signupLinkText: "Sign up",
+      signupPromptSuffix: "",
+    },
+    signup: {
+      title: "Sign up",
+      description: "Create a new account to save and manage your projects.",
+      emailLabel: "Email",
+      passwordLabel: "Password",
+      passwordConfirmLabel: "Confirm password",
+      submitIdle: "Sign up",
+      submitLoading: "Signing up...",
+      mismatchError: "Password and confirmation do not match.",
+      signupFailedFallbackError: "Failed to sign up. Please try again.",
+      errorNetwork: "A network error occurred. Please try again later.",
+      passwordStrengthPrefix: "Password strength:",
+      passwordStrengthWeak: "Weak",
+      passwordStrengthMedium: "Medium",
+      passwordStrengthStrong: "Strong",
+      loginPromptPrefix: "Already have an account?",
+      loginLinkText: "Log in",
+      loginPromptSuffix: "",
+    },
+  },
+  ko: {
+    login: {
+      title: "로그인",
+      description: "프로젝트를 관리하려면 먼저 계정으로 로그인하세요.",
+      emailLabel: "이메일",
+      passwordLabel: "비밀번호",
+      submitIdle: "로그인",
+      submitLoading: "로그인 중...",
+      themeToggleLabel: "테마 전환",
+      errorLoginFailed: "로그인에 실패했습니다. 다시 시도해 주세요.",
+      errorNetwork: "네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+      signupPromptPrefix: "아직 계정이 없다면",
+      signupLinkText: "회원가입",
+      signupPromptSuffix: "을 진행해 주세요.",
+    },
+    signup: {
+      title: "회원가입",
+      description: "새 계정을 생성한 뒤 프로젝트를 저장하고 관리할 수 있습니다.",
+      emailLabel: "이메일",
+      passwordLabel: "비밀번호",
+      passwordConfirmLabel: "비밀번호 확인",
+      submitIdle: "회원가입",
+      submitLoading: "회원가입 중...",
+      mismatchError: "비밀번호와 비밀번호 확인이 일치하지 않습니다.",
+      signupFailedFallbackError: "회원가입에 실패했습니다. 다시 시도해 주세요.",
+      errorNetwork: "네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+      passwordStrengthPrefix: "비밀번호 난이도:",
+      passwordStrengthWeak: "약함",
+      passwordStrengthMedium: "보통",
+      passwordStrengthStrong: "강함",
+      loginPromptPrefix: "이미 계정이 있다면",
+      loginLinkText: "로그인",
+      loginPromptSuffix: "으로 이동해 주세요.",
+    },
+  },
+};
+
+export function getAuthMessages(locale: AppLocale | null | undefined): AuthMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return AUTH_MESSAGES[key] ?? AUTH_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/dashboard.ts b/src/features/i18n/messages/dashboard.ts
new file mode 100644
index 0000000..17d301c
--- /dev/null
+++ b/src/features/i18n/messages/dashboard.ts
@@ -0,0 +1,103 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+// 대시보드/프로젝트 목록/전체 제출 내역 상단 GNB 및 헤더용 i18n 메시지
+// - 로그인/회원가입과 동일하게 en(기본), ko 를 지원한다.
+
+export type DashboardMessages = {
+  // 메인 대시보드 헤더 제목/설명
+  title: string;
+  description: string;
+  // 상단 GNB 탭 레이블
+  navDashboard: string;
+  navProjects: string;
+  navSubmissions: string;
+  // 헤더 오른쪽 액션 버튼/메뉴
+  themeToggleLabel: string;
+  menuLabel: string;
+  logoutLabel: string;
+  summaryTotalProjectsLabel: string;
+  summaryTotalSubmissionsLabel: string;
+  summaryTodaySubmissionsLabel: string;
+  summaryLast7DaysSubmissionsLabel: string;
+  chartTitle: string;
+  chartSubtitle: string;
+  chartEmptyLabel: string;
+  sectionProjectsTitle: string;
+  sectionProjectsEmpty: string;
+  projectTotalSubmissionsPrefix: string;
+  projectTotalSubmissionsSuffix: string;
+  projectLatestSubmissionPrefix: string;
+  projectLatestSubmissionEmpty: string;
+  projectViewSubmissionsLink: string;
+  projectOpenPublicPageLink: string;
+  errorUnauthorized: string;
+  errorGeneric: string;
+  loadingText: string;
+};
+
+const DASHBOARD_MESSAGES: Record<AppLocale, DashboardMessages> = {
+  en: {
+    title: "Dashboard",
+    description: "A quick overview of your projects and form submissions.",
+    navDashboard: "Dashboard",
+    navProjects: "Projects",
+    navSubmissions: "All submissions",
+    themeToggleLabel: "Toggle theme",
+    menuLabel: "Menu",
+    logoutLabel: "Log out",
+    summaryTotalProjectsLabel: "Projects",
+    summaryTotalSubmissionsLabel: "Total form submissions",
+    summaryTodaySubmissionsLabel: "Submissions today",
+    summaryLast7DaysSubmissionsLabel: "Submissions in last 7 days",
+    chartTitle: "Recent submissions (daily)",
+    chartSubtitle: "Only dates with recent activity are shown.",
+    chartEmptyLabel: "No daily submission data yet.",
+    sectionProjectsTitle: "Submissions by project",
+    sectionProjectsEmpty: "No projects created yet or no submissions have been received.",
+    projectTotalSubmissionsPrefix: "Total ",
+    projectTotalSubmissionsSuffix: " submissions",
+    projectLatestSubmissionPrefix: "Last submission:",
+    projectLatestSubmissionEmpty: "No submissions yet",
+    projectViewSubmissionsLink: "View form submissions",
+    projectOpenPublicPageLink: "Open public page",
+    errorUnauthorized: "You need to be signed in to view the dashboard. Please log in again.",
+    errorGeneric: "An error occurred while loading the dashboard. Please try again later.",
+    loadingText: "Loading dashboard data...",
+  },
+  ko: {
+    title: "대시보드",
+    description: "프로젝트와 폼 제출 현황을 한눈에 확인할 수 있는 요약 화면입니다.",
+    navDashboard: "대시보드",
+    navProjects: "프로젝트 목록",
+    navSubmissions: "전체 제출 내역",
+    themeToggleLabel: "테마 전환",
+    menuLabel: "메뉴",
+    logoutLabel: "로그아웃",
+    summaryTotalProjectsLabel: "프로젝트 수",
+    summaryTotalSubmissionsLabel: "전체 폼 제출 수",
+    summaryTodaySubmissionsLabel: "오늘 제출 수",
+    summaryLast7DaysSubmissionsLabel: "최근 7일 제출 수",
+    chartTitle: "최근 제출 추이 (일별)",
+    chartSubtitle: "최근 활동이 있는 날짜만 표시됩니다.",
+    chartEmptyLabel: "아직 일별 제출 내역이 없습니다.",
+    sectionProjectsTitle: "프로젝트별 제출 현황",
+    sectionProjectsEmpty: "아직 생성된 프로젝트가 없거나 제출 내역이 없습니다.",
+    projectTotalSubmissionsPrefix: "총 제출 ",
+    projectTotalSubmissionsSuffix: "건",
+    projectLatestSubmissionPrefix: "최근 제출:",
+    projectLatestSubmissionEmpty: "제출 내역 없음",
+    projectViewSubmissionsLink: "폼 제출 내역 보기",
+    projectOpenPublicPageLink: "퍼블릭 페이지 열기",
+    errorUnauthorized:
+      "대시보드를 보려면 로그인이 필요합니다. 다시 로그인해 주세요.",
+    errorGeneric:
+      "대시보드 데이터를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+    loadingText: "대시보드 데이터를 불러오는 중입니다...",
+  },
+};
+
+export function getDashboardMessages(locale: AppLocale | null | undefined): DashboardMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return DASHBOARD_MESSAGES[key] ?? DASHBOARD_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editor.ts b/src/features/i18n/messages/editor.ts
new file mode 100644
index 0000000..8f7b918
--- /dev/null
+++ b/src/features/i18n/messages/editor.ts
@@ -0,0 +1,153 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorMessages = {
+  headerTitle: string;
+  headerDescription: string;
+  navProjects: string;
+  navPreview: string;
+  undoLabel: string;
+  redoLabel: string;
+  menuLabel: string;
+  menuProjectSaveLoad: string;
+  menuJsonImportExport: string;
+  menuExportZip: string;
+  menuClearCanvas: string;
+  menuDeleteProject: string;
+  confirmClearCanvas: string;
+  confirmDeleteProject: string;
+  modalProjectTitle: string;
+  modalProjectTitleLabel: string;
+  modalProjectSlugLabel: string;
+  modalSaveButton: string;
+  modalLoadButton: string;
+  projectMessageSlugRequired: string;
+  projectMessageSaveFailed: string;
+  projectMessageSaveError: string;
+  projectMessageSaveSuccessPrefix: string;
+  projectMessageLoadSlugRequired: string;
+  projectMessageLoadFailed: string;
+  projectMessageLoadLocalSuccessPrefix: string;
+  projectMessageLoadServerSuccessPrefix: string;
+  projectMessageInvalidFormat: string;
+  projectMessageLoadError: string;
+  projectMessageDeleteSlugMissing: string;
+  projectMessageDeleteFailed: string;
+  projectMessageDeleteSuccess: string;
+  projectMessageDeleteError: string;
+  jsonModalTitle: string;
+  jsonModalSubtitle: string;
+  jsonExportButton: string;
+  jsonClearCanvasButton: string;
+  jsonEditorStateLabel: string;
+  jsonImportLabel: string;
+  jsonApplyButton: string;
+  listItemToolbarMoveUpLabel: string;
+  listItemToolbarMoveDownLabel: string;
+  listItemToolbarIndentLabel: string;
+  listItemToolbarOutdentLabel: string;
+};
+
+const EDITOR_MESSAGES: Record<AppLocale, EditorMessages> = {
+  en: {
+    headerTitle: "Page Editor",
+    headerDescription: "Build and edit your landing pages with a visual editor.",
+    navProjects: "Projects",
+    navPreview: "Open preview",
+    undoLabel: "Undo",
+    redoLabel: "Redo",
+    menuLabel: "Menu",
+    menuProjectSaveLoad: "Save / load project",
+    menuJsonImportExport: "JSON export / import",
+    menuExportZip: "Export as page files (ZIP)",
+    menuClearCanvas: "Clear canvas",
+    menuDeleteProject: "Delete project",
+    confirmClearCanvas:
+      "Clear all blocks on the canvas? This can only be undone with the undo history.",
+    confirmDeleteProject:
+      "Delete the current project? This cannot be undone. Local and autosave data will also be removed.",
+    modalProjectTitle: "Save / load project",
+    modalProjectTitleLabel: "Project title",
+    modalProjectSlugLabel: "Project address (e.g. my-landing)",
+    modalSaveButton: "Save (local + server)",
+    modalLoadButton: "Load",
+    projectMessageSlugRequired: "Please enter a project address.",
+    projectMessageSaveFailed: "Failed to save the project.",
+    projectMessageSaveError: "An error occurred while saving the project.",
+    projectMessageSaveSuccessPrefix: "Project saved: ",
+    projectMessageLoadSlugRequired: "Please enter an address to load.",
+    projectMessageLoadFailed: "Failed to load the project.",
+    projectMessageLoadLocalSuccessPrefix: "Loaded project from local: ",
+    projectMessageLoadServerSuccessPrefix: "Loaded project from server: ",
+    projectMessageInvalidFormat: "Project data format is invalid.",
+    projectMessageLoadError: "An error occurred while loading the project.",
+    projectMessageDeleteSlugMissing: "There is no project address to delete.",
+    projectMessageDeleteFailed: "Failed to delete the project.",
+    projectMessageDeleteSuccess: "Project deleted.",
+    projectMessageDeleteError: "An error occurred while deleting the project.",
+    jsonModalTitle: "JSON Export / Import",
+    jsonModalSubtitle: "* Import or export the current editor state as JSON.",
+    jsonExportButton: "Export JSON",
+    jsonClearCanvasButton: "Clear canvas",
+    jsonEditorStateLabel: "Editor state JSON",
+    jsonImportLabel: "Import from JSON",
+    jsonApplyButton: "Apply JSON",
+    listItemToolbarMoveUpLabel: "Move item up",
+    listItemToolbarMoveDownLabel: "Move item down",
+    listItemToolbarIndentLabel: "Indent item",
+    listItemToolbarOutdentLabel: "Outdent item",
+  },
+  ko: {
+    headerTitle: "페이지 에디터",
+    headerDescription: "랜딩 페이지를 시각적으로 구성할 수 있는 에디터입니다.",
+    navProjects: "프로젝트 목록",
+    navPreview: "프리뷰 열기",
+    undoLabel: "실행 취소",
+    redoLabel: "다시 실행",
+    menuLabel: "메뉴",
+    menuProjectSaveLoad: "프로젝트 저장/불러오기",
+    menuJsonImportExport: "JSON 내보내기/불러오기",
+    menuExportZip: "페이지 파일로 내보내기 (ZIP)",
+    menuClearCanvas: "캔버스 초기화",
+    menuDeleteProject: "프로젝트 삭제",
+    confirmClearCanvas:
+      "캔버스를 모두 초기화할까요? 이 작업은 실행 취소 히스토리로만 되돌릴 수 있습니다.",
+    confirmDeleteProject:
+      "현재 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
+    modalProjectTitle: "프로젝트 저장 / 불러오기",
+    modalProjectTitleLabel: "프로젝트 제목",
+    modalProjectSlugLabel: "프로젝트 주소 (예: my-landing)",
+    modalSaveButton: "저장 (로컬 + 서버)",
+    modalLoadButton: "불러오기",
+    projectMessageSlugRequired: "프로젝트 주소를 입력해 주세요.",
+    projectMessageSaveFailed: "프로젝트 저장에 실패했습니다.",
+    projectMessageSaveError: "프로젝트 저장 중 오류가 발생했습니다.",
+    projectMessageSaveSuccessPrefix: "프로젝트가 저장되었습니다: ",
+    projectMessageLoadSlugRequired: "불러올 주소를 입력해 주세요.",
+    projectMessageLoadFailed: "프로젝트를 불러오지 못했습니다.",
+    projectMessageLoadLocalSuccessPrefix: "로컬에서 프로젝트를 불러왔습니다: ",
+    projectMessageLoadServerSuccessPrefix: "프로젝트를 불러왔습니다: ",
+    projectMessageInvalidFormat: "프로젝트 데이터 형식이 올바르지 않습니다.",
+    projectMessageLoadError: "프로젝트 불러오기 중 오류가 발생했습니다.",
+    projectMessageDeleteSlugMissing: "삭제할 프로젝트 주소가 없습니다.",
+    projectMessageDeleteFailed: "프로젝트 삭제에 실패했습니다.",
+    projectMessageDeleteSuccess: "프로젝트가 삭제되었습니다.",
+    projectMessageDeleteError: "프로젝트 삭제 중 오류가 발생했습니다.",
+    jsonModalTitle: "JSON Export / Import",
+    jsonModalSubtitle: "* 에디터 내용을 가져오거나 내보낼 수 있습니다.",
+    jsonExportButton: "JSON 내보내기",
+    jsonClearCanvasButton: "캔버스 초기화",
+    jsonEditorStateLabel: "에디터 상태 JSON",
+    jsonImportLabel: "JSON에서 불러오기",
+    jsonApplyButton: "JSON 적용하기",
+    listItemToolbarMoveUpLabel: "아이템 위로 이동",
+    listItemToolbarMoveDownLabel: "아이템 아래로 이동",
+    listItemToolbarIndentLabel: "아이템 들여쓰기",
+    listItemToolbarOutdentLabel: "아이템 내어쓰기",
+  },
+};
+
+export function getEditorMessages(locale: AppLocale | null | undefined): EditorMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_MESSAGES[key] ?? EDITOR_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorButtonPanel.ts b/src/features/i18n/messages/editorButtonPanel.ts
new file mode 100644
index 0000000..2dd388d
--- /dev/null
+++ b/src/features/i18n/messages/editorButtonPanel.ts
@@ -0,0 +1,286 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorButtonPanelMessages = {
+  buttonTextLabel: string;
+  buttonTextAria: string;
+
+  imageSectionTitle: string;
+  imageSourceLabel: string;
+  imageSourceAria: string;
+  imageSourceOptionNone: string;
+  imageSourceOptionUrl: string;
+  imageSourceOptionUpload: string;
+
+  imageUrlLabel: string;
+  imageUrlAria: string;
+  imageUploadLabel: string;
+  imageUploadAria: string;
+
+  imageAltLabel: string;
+  imageAltAria: string;
+
+  imagePlacementLabel: string;
+  imagePlacementAria: string;
+  imagePlacementOptionLeft: string;
+  imagePlacementOptionRight: string;
+  imagePlacementOptionTop: string;
+  imagePlacementOptionBottom: string;
+
+  paddingXLabel: string;
+  paddingYLabel: string;
+
+  linkLabel: string;
+  linkAria: string;
+
+  alignLabel: string;
+  alignAria: string;
+  alignOptionLeft: string;
+  alignOptionCenter: string;
+  alignOptionRight: string;
+
+  textColorLabel: string;
+  textColorPickerAria: string;
+  textColorHexAria: string;
+
+  styleLabel: string;
+  styleAria: string;
+  styleOptionSolid: string;
+  styleOptionOutline: string;
+  styleOptionGhost: string;
+
+  fillColorLabel: string;
+  fillColorPickerAria: string;
+  fillColorHexAria: string;
+
+  strokeColorLabel: string;
+  strokeColorPickerAria: string;
+  strokeColorHexAria: string;
+
+  borderRadiusLabel: string;
+  borderRadiusPresetNone: string;
+  borderRadiusPresetSmall: string;
+  borderRadiusPresetMedium: string;
+  borderRadiusPresetLarge: string;
+  borderRadiusPresetFull: string;
+
+  widthModeLabel: string;
+  widthModeAria: string;
+  widthModeOptionAuto: string;
+  widthModeOptionFull: string;
+  widthModeOptionFixed: string;
+
+  fixedWidthLabel: string;
+  fixedWidthUnitLabel: string;
+  fixedWidthPresetSmall: string;
+  fixedWidthPresetMedium: string;
+  fixedWidthPresetLarge: string;
+
+  fontSizeLabel: string;
+  fontSizeUnitLabel: string;
+
+  lineHeightLabel: string;
+  lineHeightPresetTight: string;
+  lineHeightPresetNormal: string;
+  lineHeightPresetRelaxed: string;
+
+  letterSpacingLabel: string;
+  letterSpacingUnitLabel: string;
+  letterSpacingPresetTighter: string;
+  letterSpacingPresetTight: string;
+  letterSpacingPresetNormal: string;
+  letterSpacingPresetWide: string;
+  letterSpacingPresetWider: string;
+};
+
+const EDITOR_BUTTON_PANEL_MESSAGES: Record<AppLocale, EditorButtonPanelMessages> = {
+  en: {
+    buttonTextLabel: "Button text",
+    buttonTextAria: "Button text",
+
+    imageSectionTitle: "Button image",
+    imageSourceLabel: "Button image source",
+    imageSourceAria: "Button image source",
+    imageSourceOptionNone: "None",
+    imageSourceOptionUrl: "URL",
+    imageSourceOptionUpload: "File upload",
+
+    imageUrlLabel: "Button image URL",
+    imageUrlAria: "Button image URL",
+    imageUploadLabel: "Button image file upload",
+    imageUploadAria: "Button image file upload",
+
+    imageAltLabel: "Button image alt text",
+    imageAltAria: "Button image alt text",
+
+    imagePlacementLabel: "Button image placement",
+    imagePlacementAria: "Button image placement",
+    imagePlacementOptionLeft: "Text left",
+    imagePlacementOptionRight: "Text right",
+    imagePlacementOptionTop: "Text top",
+    imagePlacementOptionBottom: "Text bottom",
+
+    paddingXLabel: "Horizontal padding (px)",
+    paddingYLabel: "Vertical padding (px)",
+
+    linkLabel: "Button link",
+    linkAria: "Button link",
+
+    alignLabel: "Alignment",
+    alignAria: "Button alignment",
+    alignOptionLeft: "Left",
+    alignOptionCenter: "Center",
+    alignOptionRight: "Right",
+
+    textColorLabel: "Text color",
+    textColorPickerAria: "Button text color picker",
+    textColorHexAria: "Button text color HEX",
+
+    styleLabel: "Style",
+    styleAria: "Button style",
+    styleOptionSolid: "Fill",
+    styleOptionOutline: "Outline",
+    styleOptionGhost: "Ghost",
+
+    fillColorLabel: "Fill color",
+    fillColorPickerAria: "Button fill color picker",
+    fillColorHexAria: "Button fill color HEX",
+
+    strokeColorLabel: "Border color",
+    strokeColorPickerAria: "Button border color picker",
+    strokeColorHexAria: "Button border color HEX",
+
+    borderRadiusLabel: "Border radius",
+    borderRadiusPresetNone: "None",
+    borderRadiusPresetSmall: "Small",
+    borderRadiusPresetMedium: "Medium",
+    borderRadiusPresetLarge: "Large",
+    borderRadiusPresetFull: "Full",
+
+    widthModeLabel: "Button width mode",
+    widthModeAria: "Button width mode",
+    widthModeOptionAuto: "Auto",
+    widthModeOptionFull: "Full width",
+    widthModeOptionFixed: "Fixed",
+
+    fixedWidthLabel: "Button fixed width",
+    fixedWidthUnitLabel: "(px)",
+    fixedWidthPresetSmall: "Small",
+    fixedWidthPresetMedium: "Medium",
+    fixedWidthPresetLarge: "Wide",
+
+    fontSizeLabel: "Button font size",
+    fontSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "Line height",
+    lineHeightPresetTight: "Tight",
+    lineHeightPresetNormal: "Normal",
+    lineHeightPresetRelaxed: "Relaxed",
+
+    letterSpacingLabel: "Letter spacing",
+    letterSpacingUnitLabel: "(px)",
+    letterSpacingPresetTighter: "Very tight",
+    letterSpacingPresetTight: "Tight",
+    letterSpacingPresetNormal: "Normal",
+    letterSpacingPresetWide: "Wide",
+    letterSpacingPresetWider: "Very wide",
+  },
+  ko: {
+    buttonTextLabel: "버튼 텍스트",
+    buttonTextAria: "버튼 텍스트",
+
+    imageSectionTitle: "버튼 이미지",
+    imageSourceLabel: "버튼 이미지 소스",
+    imageSourceAria: "버튼 이미지 소스",
+    imageSourceOptionNone: "사용 안 함",
+    imageSourceOptionUrl: "URL",
+    imageSourceOptionUpload: "파일 업로드",
+
+    imageUrlLabel: "버튼 이미지 URL",
+    imageUrlAria: "버튼 이미지 URL",
+    imageUploadLabel: "버튼 이미지 파일 업로드",
+    imageUploadAria: "버튼 이미지 파일 업로드",
+
+    imageAltLabel: "버튼 이미지 대체 텍스트",
+    imageAltAria: "버튼 이미지 대체 텍스트",
+
+    imagePlacementLabel: "버튼 이미지 위치",
+    imagePlacementAria: "버튼 이미지 위치",
+    imagePlacementOptionLeft: "텍스트 왼쪽",
+    imagePlacementOptionRight: "텍스트 오른쪽",
+    imagePlacementOptionTop: "텍스트 위쪽",
+    imagePlacementOptionBottom: "텍스트 아래쪽",
+
+    paddingXLabel: "가로 패딩 (px)",
+    paddingYLabel: "세로 패딩 (px)",
+
+    linkLabel: "버튼 링크",
+    linkAria: "버튼 링크",
+
+    alignLabel: "정렬",
+    alignAria: "버튼 정렬",
+    alignOptionLeft: "왼쪽",
+    alignOptionCenter: "가운데",
+    alignOptionRight: "오른쪽",
+
+    textColorLabel: "텍스트 색상",
+    textColorPickerAria: "버튼 텍스트 색상 피커",
+    textColorHexAria: "버튼 텍스트 색상 HEX",
+
+    styleLabel: "스타일",
+    styleAria: "버튼 스타일",
+    styleOptionSolid: "채움",
+    styleOptionOutline: "외곽선",
+    styleOptionGhost: "고스트",
+
+    fillColorLabel: "채움 색상",
+    fillColorPickerAria: "버튼 채움 색상 피커",
+    fillColorHexAria: "버튼 채움 색상 HEX",
+
+    strokeColorLabel: "외곽선 색상",
+    strokeColorPickerAria: "버튼 외곽선 색상 피커",
+    strokeColorHexAria: "버튼 외곽선 색상 HEX",
+
+    borderRadiusLabel: "모서리 둥글기",
+    borderRadiusPresetNone: "없음",
+    borderRadiusPresetSmall: "작게",
+    borderRadiusPresetMedium: "보통",
+    borderRadiusPresetLarge: "크게",
+    borderRadiusPresetFull: "완전 둥글게",
+
+    widthModeLabel: "버튼 너비 모드",
+    widthModeAria: "버튼 너비 모드",
+    widthModeOptionAuto: "자동",
+    widthModeOptionFull: "전체 폭",
+    widthModeOptionFixed: "고정 값",
+
+    fixedWidthLabel: "버튼 고정 너비",
+    fixedWidthUnitLabel: "(px)",
+    fixedWidthPresetSmall: "작게",
+    fixedWidthPresetMedium: "보통",
+    fixedWidthPresetLarge: "넓게",
+
+    fontSizeLabel: "버튼 크기",
+    fontSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "줄 간격",
+    lineHeightPresetTight: "좁게",
+    lineHeightPresetNormal: "보통",
+    lineHeightPresetRelaxed: "넓게",
+
+    letterSpacingLabel: "글자 간격",
+    letterSpacingUnitLabel: "(px)",
+    letterSpacingPresetTighter: "아주 좁게",
+    letterSpacingPresetTight: "좁게",
+    letterSpacingPresetNormal: "보통",
+    letterSpacingPresetWide: "넓게",
+    letterSpacingPresetWider: "아주 넓게",
+  },
+};
+
+export function getEditorButtonPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorButtonPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_BUTTON_PANEL_MESSAGES[key] ?? EDITOR_BUTTON_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorCanvas.ts b/src/features/i18n/messages/editorCanvas.ts
new file mode 100644
index 0000000..1dfbf33
--- /dev/null
+++ b/src/features/i18n/messages/editorCanvas.ts
@@ -0,0 +1,40 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorCanvasMessages = {
+  emptyStateHint: string;
+  previewFallbackTextBlock: string;
+  previewFallbackButtonBlock: string;
+  previewFallbackImageBlock: string;
+  previewFallbackListBlock: string;
+  previewFallbackDividerBlock: string;
+  previewFallbackSectionBlock: string;
+};
+
+const EDITOR_CANVAS_MESSAGES: Record<AppLocale, EditorCanvasMessages> = {
+  en: {
+    emptyStateHint: 'Click the "Text" button on the left to add your first block.',
+    previewFallbackTextBlock: "Text block",
+    previewFallbackButtonBlock: "Button block",
+    previewFallbackImageBlock: "Image block",
+    previewFallbackListBlock: "List block",
+    previewFallbackDividerBlock: "Divider block",
+    previewFallbackSectionBlock: "Section block",
+  },
+  ko: {
+    emptyStateHint: '왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요.',
+    previewFallbackTextBlock: "텍스트 블록",
+    previewFallbackButtonBlock: "버튼 블록",
+    previewFallbackImageBlock: "이미지 블록",
+    previewFallbackListBlock: "리스트 블록",
+    previewFallbackDividerBlock: "구분선 블록",
+    previewFallbackSectionBlock: "섹션 블록",
+  },
+};
+
+export function getEditorCanvasMessages(
+  locale: AppLocale | null | undefined,
+): EditorCanvasMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_CANVAS_MESSAGES[key] ?? EDITOR_CANVAS_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorColorPickerField.ts b/src/features/i18n/messages/editorColorPickerField.ts
new file mode 100644
index 0000000..58950eb
--- /dev/null
+++ b/src/features/i18n/messages/editorColorPickerField.ts
@@ -0,0 +1,70 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorColorPickerFieldMessages = {
+  dropdownLabelDefault: string;
+  hexPlaceholder: string;
+  paletteLabels: Record<string, string>;
+};
+
+const EDITOR_COLOR_PICKER_FIELD_MESSAGES: Record<AppLocale, EditorColorPickerFieldMessages> = {
+  en: {
+    dropdownLabelDefault: "Color palette",
+    hexPlaceholder: "e.g. #ff0000",
+    paletteLabels: {
+      default: "None",
+      transparent: "Transparent",
+      muted: "Muted",
+      strong: "Strong highlight",
+      neutral: "Neutral",
+      accent: "Accent",
+      "accent-deep": "Accent (deep)",
+      "accent-soft": "Accent (soft)",
+      danger: "Danger",
+      "danger-deep": "Danger (strong)",
+      success: "Success",
+      "success-soft": "Success (soft)",
+      warning: "Warning",
+      info: "Info",
+      purple: "Purple",
+      "purple-soft": "Purple (soft)",
+      pink: "Pink",
+      "pink-soft": "Pink (soft)",
+      dark: "Dark text",
+      "dark-muted": "Dark muted",
+    },
+  },
+  ko: {
+    dropdownLabelDefault: "색상 팔레트",
+    hexPlaceholder: "예: #ff0000",
+    paletteLabels: {
+      default: "없음",
+      transparent: "투명",
+      muted: "연한",
+      strong: "강조",
+      neutral: "중립",
+      accent: "포인트",
+      "accent-deep": "포인트 진하게",
+      "accent-soft": "포인트 연하게",
+      danger: "위험",
+      "danger-deep": "위험 진하게",
+      success: "성공",
+      "success-soft": "성공 연하게",
+      warning: "경고",
+      info: "정보",
+      purple: "보라",
+      "purple-soft": "연한 보라",
+      pink: "핑크",
+      "pink-soft": "연한 핑크",
+      dark: "어두운 텍스트",
+      "dark-muted": "어두운 연한",
+    },
+  },
+};
+
+export function getEditorColorPickerFieldMessages(
+  locale: AppLocale | null | undefined,
+): EditorColorPickerFieldMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_COLOR_PICKER_FIELD_MESSAGES[key] ?? EDITOR_COLOR_PICKER_FIELD_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorDividerPropertiesPanel.ts b/src/features/i18n/messages/editorDividerPropertiesPanel.ts
new file mode 100644
index 0000000..55d8862
--- /dev/null
+++ b/src/features/i18n/messages/editorDividerPropertiesPanel.ts
@@ -0,0 +1,122 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorDividerPropertiesPanelMessages = {
+  alignLabel: string;
+  alignAria: string;
+  alignOptionLeft: string;
+  alignOptionCenter: string;
+  alignOptionRight: string;
+
+  thicknessLabel: string;
+  thicknessAria: string;
+  thicknessOptionThin: string;
+  thicknessOptionMedium: string;
+
+  styleSectionTitle: string;
+
+  lengthModeLabel: string;
+  lengthModeAria: string;
+  lengthModeOptionAuto: string;
+  lengthModeOptionFull: string;
+  lengthModeOptionFixed: string;
+
+  fixedLengthLabel: string;
+  fixedLengthUnitLabel: string;
+  fixedLengthPresetShort: string;
+  fixedLengthPresetNormal: string;
+  fixedLengthPresetLong: string;
+
+  colorLabel: string;
+  colorPickerAria: string;
+  colorHexAria: string;
+
+  marginLabel: string;
+  marginUnitLabel: string;
+  marginPresetSmall: string;
+  marginPresetNormal: string;
+  marginPresetLarge: string;
+};
+
+const EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES: Record<AppLocale, EditorDividerPropertiesPanelMessages> = {
+  en: {
+    alignLabel: "Alignment",
+    alignAria: "Divider alignment",
+    alignOptionLeft: "Left",
+    alignOptionCenter: "Center",
+    alignOptionRight: "Right",
+
+    thicknessLabel: "Thickness",
+    thicknessAria: "Divider thickness",
+    thicknessOptionThin: "Thin",
+    thicknessOptionMedium: "Normal",
+
+    styleSectionTitle: "Divider style",
+
+    lengthModeLabel: "Length mode",
+    lengthModeAria: "Divider length mode",
+    lengthModeOptionAuto: "Fit content",
+    lengthModeOptionFull: "Full width",
+    lengthModeOptionFixed: "Fixed length (px)",
+
+    fixedLengthLabel: "Fixed length (px)",
+    fixedLengthUnitLabel: "(px)",
+    fixedLengthPresetShort: "Short",
+    fixedLengthPresetNormal: "Normal",
+    fixedLengthPresetLong: "Long",
+
+    colorLabel: "Line color",
+    colorPickerAria: "Divider color picker",
+    colorHexAria: "Divider color HEX",
+
+    marginLabel: "Vertical margin",
+    marginUnitLabel: "(px)",
+    marginPresetSmall: "Small",
+    marginPresetNormal: "Normal",
+    marginPresetLarge: "Large",
+  },
+
+  ko: {
+    alignLabel: "정렬",
+    alignAria: "구분선 정렬",
+    alignOptionLeft: "왼쪽",
+    alignOptionCenter: "가운데",
+    alignOptionRight: "오른쪽",
+
+    thicknessLabel: "두께",
+    thicknessAria: "구분선 두께",
+    thicknessOptionThin: "얇게",
+    thicknessOptionMedium: "보통",
+
+    styleSectionTitle: "구분선 스타일",
+
+    lengthModeLabel: "길이 모드",
+    lengthModeAria: "구분선 길이 모드",
+    lengthModeOptionAuto: "내용에 맞춤",
+    lengthModeOptionFull: "전체 폭",
+    lengthModeOptionFixed: "고정 길이 (px)",
+
+    fixedLengthLabel: "고정 길이 (px)",
+    fixedLengthUnitLabel: "(px)",
+    fixedLengthPresetShort: "짧게",
+    fixedLengthPresetNormal: "보통",
+    fixedLengthPresetLong: "길게",
+
+    colorLabel: "선 색상",
+    colorPickerAria: "구분선 색상 피커",
+    colorHexAria: "구분선 색상 HEX",
+
+    marginLabel: "위/아래 여백",
+    marginUnitLabel: "(px)",
+    marginPresetSmall: "작게",
+    marginPresetNormal: "보통",
+    marginPresetLarge: "크게",
+  },
+};
+
+export function getEditorDividerPropertiesPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorDividerPropertiesPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES[key] ?? EDITOR_DIVIDER_PROPERTIES_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorFormCheckboxPanel.ts b/src/features/i18n/messages/editorFormCheckboxPanel.ts
new file mode 100644
index 0000000..8632335
--- /dev/null
+++ b/src/features/i18n/messages/editorFormCheckboxPanel.ts
@@ -0,0 +1,298 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorFormCheckboxPanelMessages = {
+  sectionTitle: string;
+
+  groupTitleTypeLabel: string;
+  groupTitleTypeOptionText: string;
+  groupTitleTypeOptionImage: string;
+
+  groupTitleDisplayLabel: string;
+  groupTitleDisplayOptionVisible: string;
+  groupTitleDisplayOptionHidden: string;
+
+  layoutLabel: string;
+  layoutOptionStacked: string;
+  layoutOptionInline: string;
+
+  optionLayoutLabel: string;
+  optionLayoutOptionStacked: string;
+  optionLayoutOptionInline: string;
+
+  labelGapLabel: string;
+
+  groupTitleLabel: string;
+
+  submitKeyLabel: string;
+
+  optionsLabel: string;
+  addOptionButtonLabel: string;
+  optionLabelPlaceholder: string;
+  optionValuePlaceholder: string;
+
+  optionImageSourceLabel: string;
+  optionImageSourceOptionUrl: string;
+  optionImageSourceOptionUpload: string;
+
+  optionImageUrlPlaceholder: string;
+  optionImageUploadLabel: string;
+  optionImageUploadAria: string;
+
+  groupTitleImageSourceLabel: string;
+  groupTitleImageSourceOptionUrl: string;
+  groupTitleImageSourceOptionUpload: string;
+
+  groupTitleImageUrlLabel: string;
+  groupTitleImageUploadLabel: string;
+  groupTitleImageUploadAria: string;
+
+  requiredNoticeText: string;
+
+  styleSectionTitle: string;
+
+  textSizeLabel: string;
+  textSizeUnitLabel: string;
+
+  lineHeightLabel: string;
+  lineHeightUnitLabel: string;
+
+  letterSpacingLabel: string;
+  letterSpacingUnitLabel: string;
+
+  widthModeLabel: string;
+  widthModeOptionAuto: string;
+  widthModeOptionFull: string;
+  widthModeOptionFixed: string;
+
+  fixedWidthLabel: string;
+  fixedWidthUnitLabel: string;
+
+  paddingXLabel: string;
+  paddingXUnitLabel: string;
+
+  paddingYLabel: string;
+  paddingYUnitLabel: string;
+
+  optionGapLabel: string;
+  optionGapUnitLabel: string;
+
+  textColorLabel: string;
+  textColorPickerAria: string;
+  textColorHexAria: string;
+
+  fillColorLabel: string;
+  fillColorPickerAria: string;
+  fillColorHexAria: string;
+
+  strokeColorLabel: string;
+  strokeColorPickerAria: string;
+  strokeColorHexAria: string;
+
+  borderRadiusLabel: string;
+  borderRadiusPresetNone: string;
+  borderRadiusPresetSmall: string;
+  borderRadiusPresetMedium: string;
+  borderRadiusPresetLarge: string;
+  borderRadiusPresetFull: string;
+};
+
+const EDITOR_FORM_CHECKBOX_PANEL_MESSAGES: Record<AppLocale, EditorFormCheckboxPanelMessages> = {
+  en: {
+    sectionTitle: "Checkbox field",
+
+    groupTitleTypeLabel: "Group title type",
+    groupTitleTypeOptionText: "Text",
+    groupTitleTypeOptionImage: "Image",
+
+    groupTitleDisplayLabel: "Group title display mode",
+    groupTitleDisplayOptionVisible: "Visible (default)",
+    groupTitleDisplayOptionHidden: "Hidden",
+
+    layoutLabel: "Layout",
+    layoutOptionStacked: "Vertical (default)",
+    layoutOptionInline: "Horizontal (inline)",
+
+    optionLayoutLabel: "Option layout",
+    optionLayoutOptionStacked: "Vertical (default)",
+    optionLayoutOptionInline: "Horizontal (inline)",
+
+    labelGapLabel: "Label/field gap (px)",
+
+    groupTitleLabel: "Group title",
+
+    submitKeyLabel: "Submit key",
+
+    optionsLabel: "Options",
+    addOptionButtonLabel: "Add option",
+    optionLabelPlaceholder: "Label",
+    optionValuePlaceholder: "Value (value)",
+
+    optionImageSourceLabel: "Option image source",
+    optionImageSourceOptionUrl: "URL",
+    optionImageSourceOptionUpload: "File upload",
+
+    optionImageUrlPlaceholder: "Option image URL (optional)",
+    optionImageUploadLabel: "Option image file upload",
+    optionImageUploadAria: "Option image file upload",
+
+    groupTitleImageSourceLabel: "Group title image source",
+    groupTitleImageSourceOptionUrl: "URL",
+    groupTitleImageSourceOptionUpload: "File upload",
+
+    groupTitleImageUrlLabel: "Group title image URL",
+    groupTitleImageUploadLabel: "Group title image file upload",
+    groupTitleImageUploadAria: "Group title image file upload",
+
+    requiredNoticeText: "Required state is configured in the form controller.",
+
+    styleSectionTitle: "Field style",
+
+    textSizeLabel: "Checkbox text size (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "Checkbox line height (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "Checkbox letter spacing (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    widthModeLabel: "Field width",
+    widthModeOptionAuto: "Auto",
+    widthModeOptionFull: "Full width",
+    widthModeOptionFixed: "Fixed value",
+
+    fixedWidthLabel: "Field fixed width",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "Checkbox horizontal padding (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "Checkbox vertical padding (px)",
+    paddingYUnitLabel: "(px)",
+
+    optionGapLabel: "Checkbox option gap (px)",
+    optionGapUnitLabel: "(px)",
+
+    textColorLabel: "Text color",
+    textColorPickerAria: "Checkbox text color picker",
+    textColorHexAria: "Checkbox text color HEX",
+
+    fillColorLabel: "Background color",
+    fillColorPickerAria: "Checkbox background color picker",
+    fillColorHexAria: "Checkbox background color HEX",
+
+    strokeColorLabel: "Border color",
+    strokeColorPickerAria: "Checkbox border color picker",
+    strokeColorHexAria: "Checkbox border color HEX",
+
+    borderRadiusLabel: "Field border radius",
+    borderRadiusPresetNone: "None",
+    borderRadiusPresetSmall: "Small",
+    borderRadiusPresetMedium: "Medium",
+    borderRadiusPresetLarge: "Large",
+    borderRadiusPresetFull: "Fully rounded",
+  },
+  ko: {
+    sectionTitle: "체크박스 필드",
+
+    groupTitleTypeLabel: "그룹 타이틀 타입",
+    groupTitleTypeOptionText: "텍스트",
+    groupTitleTypeOptionImage: "이미지",
+
+    groupTitleDisplayLabel: "그룹 타이틀 표시 방식",
+    groupTitleDisplayOptionVisible: "표시 (기본)",
+    groupTitleDisplayOptionHidden: "숨김",
+
+    layoutLabel: "레이아웃",
+    layoutOptionStacked: "세로 (기본)",
+    layoutOptionInline: "가로 (인라인)",
+
+    optionLayoutLabel: "옵션 레이아웃",
+    optionLayoutOptionStacked: "세로 (기본)",
+    optionLayoutOptionInline: "가로 (인라인)",
+
+    labelGapLabel: "라벨/필드 간격 (px)",
+
+    groupTitleLabel: "그룹 타이틀",
+
+    submitKeyLabel: "전송 키",
+
+    optionsLabel: "옵션",
+    addOptionButtonLabel: "옵션 추가",
+    optionLabelPlaceholder: "라벨",
+    optionValuePlaceholder: "값(value)",
+
+    optionImageSourceLabel: "옵션 이미지 소스",
+    optionImageSourceOptionUrl: "URL",
+    optionImageSourceOptionUpload: "파일 업로드",
+
+    optionImageUrlPlaceholder: "옵션 이미지 URL (선택)",
+    optionImageUploadLabel: "옵션 이미지 파일 업로드",
+    optionImageUploadAria: "옵션 이미지 파일 업로드",
+
+    groupTitleImageSourceLabel: "그룹 타이틀 이미지 소스",
+    groupTitleImageSourceOptionUrl: "URL",
+    groupTitleImageSourceOptionUpload: "파일 업로드",
+
+    groupTitleImageUrlLabel: "그룹 타이틀 이미지 URL",
+    groupTitleImageUploadLabel: "그룹 타이틀 이미지 파일 업로드",
+    groupTitleImageUploadAria: "그룹 타이틀 이미지 파일 업로드",
+
+    requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
+
+    styleSectionTitle: "필드 스타일",
+
+    textSizeLabel: "체크박스 텍스트 크기 (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "체크박스 줄간격 (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "체크박스 자간 (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    widthModeLabel: "필드 너비",
+    widthModeOptionAuto: "자동",
+    widthModeOptionFull: "전체 폭",
+    widthModeOptionFixed: "고정 값",
+
+    fixedWidthLabel: "필드 고정 너비",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "체크박스 가로 패딩 (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "체크박스 세로 패딩 (px)",
+    paddingYUnitLabel: "(px)",
+
+    optionGapLabel: "체크박스 옵션 간격 (px)",
+    optionGapUnitLabel: "(px)",
+
+    textColorLabel: "텍스트 색상",
+    textColorPickerAria: "체크박스 텍스트 색상 피커",
+    textColorHexAria: "체크박스 텍스트 색상 HEX",
+
+    fillColorLabel: "배경 색상",
+    fillColorPickerAria: "체크박스 배경 색상 피커",
+    fillColorHexAria: "체크박스 배경 색상 HEX",
+
+    strokeColorLabel: "테두리 색상",
+    strokeColorPickerAria: "체크박스 테두리 색상 피커",
+    strokeColorHexAria: "체크박스 테두리 색상 HEX",
+
+    borderRadiusLabel: "필드 모서리 둥글기",
+    borderRadiusPresetNone: "없음",
+    borderRadiusPresetSmall: "작게",
+    borderRadiusPresetMedium: "보통",
+    borderRadiusPresetLarge: "크게",
+    borderRadiusPresetFull: "완전 둥글게",
+  },
+};
+
+export function getEditorFormCheckboxPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorFormCheckboxPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_FORM_CHECKBOX_PANEL_MESSAGES[key] ?? EDITOR_FORM_CHECKBOX_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorFormControllerPanel.ts b/src/features/i18n/messages/editorFormControllerPanel.ts
new file mode 100644
index 0000000..25515dc
--- /dev/null
+++ b/src/features/i18n/messages/editorFormControllerPanel.ts
@@ -0,0 +1,205 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorFormControllerPanelMessages = {
+  introTextPrefix: string;
+  introTextSuffix: string;
+
+  submitTargetLabel: string;
+  submitTargetOptionInternal: string;
+  submitTargetOptionWebhook: string;
+
+  webhookUrlLabel: string;
+  webhookUrlPlaceholder: string;
+
+  payloadFormatLabel: string;
+  payloadFormatOptionForm: string;
+  payloadFormatOptionJson: string;
+
+  httpMethodLabel: string;
+
+  authTokenLabel: string;
+  authTokenPlaceholder: string;
+
+  extraParamsLabel: string;
+  extraParamsPlaceholder: string;
+
+  layoutSectionTitle: string;
+  formWidthModeLabel: string;
+  formWidthModeOptionAuto: string;
+  formWidthModeOptionFull: string;
+  formWidthModeOptionFixed: string;
+
+  formFixedWidthLabel: string;
+
+  marginYLabel: string;
+  marginYPresetNone: string;
+  marginYPresetCompact: string;
+  marginYPresetNormal: string;
+  marginYPresetSpacious: string;
+
+  messagesSectionTitle: string;
+  successMessageLabel: string;
+  successMessagePlaceholder: string;
+  errorMessageLabel: string;
+  errorMessagePlaceholder: string;
+
+  controllerSectionTitle: string;
+  fieldMappingLegend: string;
+  fieldMappingAriaLabel: string;
+  requiredLabel: string;
+
+  submitButtonLabel: string;
+  submitButtonAriaLabel: string;
+
+  sheetsGuideButtonLabel: string;
+  sheetsGuideHeading: string;
+  sheetsGuideCloseAriaLabel: string;
+  sheetsGuideIntro: string;
+  sheetsGuideStep1: string;
+  sheetsGuideStep2: string;
+  sheetsGuideStep3: string;
+  sheetsGuideExampleCodeLabel: string;
+};
+
+const EDITOR_FORM_CONTROLLER_PANEL_MESSAGES: Record<AppLocale, EditorFormControllerPanelMessages> = {
+  en: {
+    introTextPrefix:
+      "This form is first submitted to the ",
+    introTextSuffix:
+      " endpoint on the public page, then processed internally or forwarded to a webhook depending on the settings.",
+
+    submitTargetLabel: "Submit target",
+    submitTargetOptionInternal: "Internal only (no webhook)",
+    submitTargetOptionWebhook: "Forward to external webhook / Google Sheets",
+
+    webhookUrlLabel: "Webhook URL (e.g. Google Apps Script web app URL)",
+    webhookUrlPlaceholder: "e.g. https://script.google.com/macros/s/.../exec",
+
+    payloadFormatLabel: "Payload format",
+    payloadFormatOptionForm: "Form data (x-www-form-urlencoded)",
+    payloadFormatOptionJson: "JSON (application/json)",
+
+    httpMethodLabel: "HTTP method",
+
+    authTokenLabel: "Authorization token (optional)",
+    authTokenPlaceholder: "e.g. Bearer xxxxxx",
+
+    extraParamsLabel: "Additional parameters (key=value lines, separated by line breaks)",
+    extraParamsPlaceholder: "e.g.\nsource=landing\nformId=contact-hero",
+
+    layoutSectionTitle: "Form layout",
+    formWidthModeLabel: "Form width mode",
+    formWidthModeOptionAuto: "Auto",
+    formWidthModeOptionFull: "Full width",
+    formWidthModeOptionFixed: "Fixed value",
+
+    formFixedWidthLabel: "Form fixed width (px)",
+
+    marginYLabel: "Form top/bottom margin (px)",
+    marginYPresetNone: "None",
+    marginYPresetCompact: "Compact",
+    marginYPresetNormal: "Normal",
+    marginYPresetSpacious: "Spacious",
+
+    messagesSectionTitle: "Form messages",
+    successMessageLabel: "Success message",
+    successMessagePlaceholder: "e.g. Your message has been sent successfully.",
+    errorMessageLabel: "Error message",
+    errorMessagePlaceholder: "e.g. An error occurred while submitting.",
+
+    controllerSectionTitle: "Form controller",
+    fieldMappingLegend: "Form field mapping",
+    fieldMappingAriaLabel: "Form field mapping",
+    requiredLabel: "Required",
+
+    submitButtonLabel: "Submit button",
+    submitButtonAriaLabel: "Submit button",
+
+    sheetsGuideButtonLabel: "Google Sheets integration guide",
+    sheetsGuideHeading: "Google Sheets integration guide",
+    sheetsGuideCloseAriaLabel: "Close Google Sheets integration guide",
+    sheetsGuideIntro:
+      "You must enter the Google Apps Script web app URL, not the spreadsheet URL itself. Follow the steps below to connect Google Sheets without writing code.",
+    sheetsGuideStep1:
+      "In Google Sheets, create a new spreadsheet and add headers like name, email, message in the first row.",
+    sheetsGuideStep2:
+      "From the menu, open \"Extensions → Apps Script\" and paste the example code below.",
+    sheetsGuideStep3:
+      "From \"Deploy → New deployment\", deploy as a web app and paste the issued web app URL (…/exec) into the Webhook URL field.",
+    sheetsGuideExampleCodeLabel: "Example Apps Script code",
+  },
+  ko: {
+    introTextPrefix:
+      "이 폼은 퍼블릭 페이지에서 ",
+    introTextSuffix:
+      " 엔드포인트로 먼저 전송된 뒤, 설정에 따라 내부 처리 또는 Webhook 으로 전달됩니다.",
+
+    submitTargetLabel: "전송 대상",
+    submitTargetOptionInternal: "서버 처리 전용 (Webhook 없이 사용)",
+    submitTargetOptionWebhook: "외부 Webhook / Google Sheets 로 전달",
+
+    webhookUrlLabel: "Webhook URL (예: Google Apps Script 웹 앱 URL)",
+    webhookUrlPlaceholder: "예: https://script.google.com/macros/s/.../exec",
+
+    payloadFormatLabel: "전송 포맷",
+    payloadFormatOptionForm: "폼 데이터 (x-www-form-urlencoded)",
+    payloadFormatOptionJson: "JSON (application/json)",
+
+    httpMethodLabel: "HTTP 메서드",
+
+    authTokenLabel: "Authorization 토큰 (옵션)",
+    authTokenPlaceholder: "예: Bearer xxxxxx",
+
+    extraParamsLabel: "추가 파라미터 (key=value 형식, 줄바꿈으로 구분)",
+    extraParamsPlaceholder: "예:\nsource=landing\nformId=contact-hero",
+
+    layoutSectionTitle: "폼 레이아웃",
+    formWidthModeLabel: "폼 너비 모드",
+    formWidthModeOptionAuto: "자동",
+    formWidthModeOptionFull: "전체 폭",
+    formWidthModeOptionFixed: "고정 값",
+
+    formFixedWidthLabel: "폼 고정 너비 (px)",
+
+    marginYLabel: "폼 위/아래 여백 (px)",
+    marginYPresetNone: "없음",
+    marginYPresetCompact: "좁게",
+    marginYPresetNormal: "보통",
+    marginYPresetSpacious: "넓게",
+
+    messagesSectionTitle: "폼 메시지",
+    successMessageLabel: "성공 메시지",
+    successMessagePlaceholder: "예: 성공적으로 전송되었습니다.",
+    errorMessageLabel: "에러 메시지",
+    errorMessagePlaceholder: "예: 전송 중 오류가 발생했습니다.",
+
+    controllerSectionTitle: "폼 컨트롤러",
+    fieldMappingLegend: "폼 필드 매핑",
+    fieldMappingAriaLabel: "폼 필드 매핑",
+    requiredLabel: "필수",
+
+    submitButtonLabel: "Submit 버튼",
+    submitButtonAriaLabel: "Submit 버튼",
+
+    sheetsGuideButtonLabel: "Google Sheets 연동 가이드",
+    sheetsGuideHeading: "Google Sheets 연동 가이드",
+    sheetsGuideCloseAriaLabel: "Google Sheets 연동 가이드 닫기",
+    sheetsGuideIntro:
+      "구글 시트 주소를 그대로 입력하는 것이 아니라, 시트에 연결된 Google Apps Script 웹 앱 URL 을 입력해야 합니다. 아래 순서를 따르면 코드를 잘 모르는 사용자도 연동할 수 있습니다.",
+    sheetsGuideStep1:
+      "Google Sheets 에서 새 스프레드시트를 만들고, 1행에 name, email, message 같은 헤더를 추가합니다.",
+    sheetsGuideStep2:
+      '시트 메뉴의 "확장 프로그램 → 앱스 스크립트" 를 열고 아래 예제 코드를 붙여넣습니다.',
+    sheetsGuideStep3:
+      '"배포 → 새 배포" 에서 웹 앱으로 배포한 뒤, 발급된 웹 앱 URL(…/exec) 을 Webhook URL 칸에 붙여넣습니다.',
+    sheetsGuideExampleCodeLabel: "예시 Apps Script 코드",
+  },
+};
+
+export function getEditorFormControllerPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorFormControllerPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_FORM_CONTROLLER_PANEL_MESSAGES[key] ?? EDITOR_FORM_CONTROLLER_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorFormInputPanel.ts b/src/features/i18n/messages/editorFormInputPanel.ts
new file mode 100644
index 0000000..bae5035
--- /dev/null
+++ b/src/features/i18n/messages/editorFormInputPanel.ts
@@ -0,0 +1,266 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorFormInputPanelMessages = {
+  sectionTitle: string;
+  styleSectionTitle: string;
+
+  labelTypeLabel: string;
+  labelTypeOptionText: string;
+  labelTypeOptionImage: string;
+
+  fieldLabelLabel: string;
+
+  labelDisplayLabel: string;
+  labelDisplayOptionVisible: string;
+  labelDisplayOptionHidden: string;
+  labelDisplayOptionFloating: string;
+
+  layoutLabel: string;
+  layoutOptionStacked: string;
+  layoutOptionInline: string;
+  labelGapLabel: string;
+  labelGapUnitLabel: string;
+
+  labelImageUrlLabel: string;
+  labelImageAltLabel: string;
+
+  submitKeyLabel: string;
+
+  fieldTypeLabel: string;
+  fieldTypeAria: string;
+  fieldTypeOptionText: string;
+  fieldTypeOptionEmail: string;
+  fieldTypeOptionTextarea: string;
+
+  placeholderLabel: string;
+  placeholderAria: string;
+
+  requiredNoticeText: string;
+
+  textSizeLabel: string;
+  textSizeUnitLabel: string;
+
+  lineHeightLabel: string;
+  lineHeightUnitLabel: string;
+
+  letterSpacingLabel: string;
+  letterSpacingUnitLabel: string;
+
+  textAlignLabel: string;
+  textAlignOptionLeft: string;
+  textAlignOptionCenter: string;
+  textAlignOptionRight: string;
+
+  widthModeLabel: string;
+  widthModeAria: string;
+  widthModeOptionAuto: string;
+  widthModeOptionFull: string;
+  widthModeOptionFixed: string;
+
+  fixedWidthLabel: string;
+  fixedWidthUnitLabel: string;
+
+  paddingXLabel: string;
+  paddingXUnitLabel: string;
+
+  paddingYLabel: string;
+  paddingYUnitLabel: string;
+
+  textColorLabel: string;
+  textColorPickerAria: string;
+  textColorHexAria: string;
+
+  fillColorLabel: string;
+  fillColorPickerAria: string;
+  fillColorHexAria: string;
+
+  strokeColorLabel: string;
+  strokeColorPickerAria: string;
+  strokeColorHexAria: string;
+
+  borderRadiusLabel: string;
+  borderRadiusPresetNone: string;
+  borderRadiusPresetSmall: string;
+  borderRadiusPresetMedium: string;
+  borderRadiusPresetLarge: string;
+  borderRadiusPresetFull: string;
+};
+
+const EDITOR_FORM_INPUT_PANEL_MESSAGES: Record<AppLocale, EditorFormInputPanelMessages> = {
+  en: {
+    sectionTitle: "Input field",
+    styleSectionTitle: "Field style",
+
+    labelTypeLabel: "Label type",
+    labelTypeOptionText: "Text",
+    labelTypeOptionImage: "Image",
+
+    fieldLabelLabel: "Field label",
+
+    labelDisplayLabel: "Label display mode",
+    labelDisplayOptionVisible: "Visible (default)",
+    labelDisplayOptionHidden: "Hidden",
+    labelDisplayOptionFloating: "Floating label",
+
+    layoutLabel: "Layout",
+    layoutOptionStacked: "Vertical (default)",
+    layoutOptionInline: "Horizontal (inline)",
+    labelGapLabel: "Label/field gap (px)",
+    labelGapUnitLabel: "(px)",
+
+    labelImageUrlLabel: "Label image URL",
+    labelImageAltLabel: "Label image alt text",
+
+    submitKeyLabel: "Submit key",
+
+    fieldTypeLabel: "Field type",
+    fieldTypeAria: "Field type",
+    fieldTypeOptionText: "Text",
+    fieldTypeOptionEmail: "Email",
+    fieldTypeOptionTextarea: "Multiline text",
+
+    placeholderLabel: "Placeholder",
+    placeholderAria: "Placeholder",
+
+    requiredNoticeText: "Required state is configured in the form controller.",
+
+    textSizeLabel: "Field text size (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "Field line height (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "Field letter spacing (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    textAlignLabel: "Text alignment",
+    textAlignOptionLeft: "Left",
+    textAlignOptionCenter: "Center",
+    textAlignOptionRight: "Right",
+
+    widthModeLabel: "Width",
+    widthModeAria: "Width",
+    widthModeOptionAuto: "Auto",
+    widthModeOptionFull: "Full width",
+    widthModeOptionFixed: "Fixed value",
+
+    fixedWidthLabel: "Field fixed width",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "Field horizontal padding (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "Field vertical padding (px)",
+    paddingYUnitLabel: "(px)",
+
+    textColorLabel: "Field text color",
+    textColorPickerAria: "Field text color picker",
+    textColorHexAria: "Field text color HEX",
+
+    fillColorLabel: "Field fill color",
+    fillColorPickerAria: "Field fill color picker",
+    fillColorHexAria: "Field fill color HEX",
+
+    strokeColorLabel: "Field border color",
+    strokeColorPickerAria: "Field border color picker",
+    strokeColorHexAria: "Field border color HEX",
+
+    borderRadiusLabel: "Field border radius",
+    borderRadiusPresetNone: "None",
+    borderRadiusPresetSmall: "Small",
+    borderRadiusPresetMedium: "Medium",
+    borderRadiusPresetLarge: "Large",
+    borderRadiusPresetFull: "Fully rounded",
+  },
+  ko: {
+    sectionTitle: "입력 필드",
+    styleSectionTitle: "필드 스타일",
+
+    labelTypeLabel: "라벨 타입",
+    labelTypeOptionText: "텍스트",
+    labelTypeOptionImage: "이미지",
+
+    fieldLabelLabel: "필드 라벨",
+
+    labelDisplayLabel: "라벨 표시 방식",
+    labelDisplayOptionVisible: "표시 (기본)",
+    labelDisplayOptionHidden: "숨김",
+    labelDisplayOptionFloating: "플로팅 라벨",
+
+    layoutLabel: "레이아웃",
+    layoutOptionStacked: "세로 (기본)",
+    layoutOptionInline: "가로 (인라인)",
+    labelGapLabel: "라벨/필드 간격 (px)",
+    labelGapUnitLabel: "(px)",
+
+    labelImageUrlLabel: "라벨 이미지 URL",
+    labelImageAltLabel: "라벨 이미지 대체 텍스트",
+
+    submitKeyLabel: "전송 키",
+
+    fieldTypeLabel: "필드 타입",
+    fieldTypeAria: "필드 타입",
+    fieldTypeOptionText: "텍스트",
+    fieldTypeOptionEmail: "이메일",
+    fieldTypeOptionTextarea: "긴 텍스트",
+
+    placeholderLabel: "Placeholder",
+    placeholderAria: "Placeholder",
+
+    requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
+
+    textSizeLabel: "필드 텍스트 크기 (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "필드 줄간격 (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "필드 자간 (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    textAlignLabel: "텍스트 정렬",
+    textAlignOptionLeft: "왼쪽",
+    textAlignOptionCenter: "가운데",
+    textAlignOptionRight: "오른쪽",
+
+    widthModeLabel: "너비",
+    widthModeAria: "너비",
+    widthModeOptionAuto: "자동",
+    widthModeOptionFull: "전체 폭",
+    widthModeOptionFixed: "고정 값",
+
+    fixedWidthLabel: "필드 고정 너비",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "필드 가로 패딩 (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "필드 세로 패딩 (px)",
+    paddingYUnitLabel: "(px)",
+
+    textColorLabel: "필드 텍스트 색상",
+    textColorPickerAria: "필드 텍스트 색상 피커",
+    textColorHexAria: "필드 텍스트 색상 HEX",
+
+    fillColorLabel: "필드 채움 색상",
+    fillColorPickerAria: "필드 채움 색상 피커",
+    fillColorHexAria: "필드 채움 색상 HEX",
+
+    strokeColorLabel: "필드 테두리 색상",
+    strokeColorPickerAria: "필드 테두리 색상 피커",
+    strokeColorHexAria: "필드 테두리 색상 HEX",
+
+    borderRadiusLabel: "필드 모서리 둥글기",
+    borderRadiusPresetNone: "없음",
+    borderRadiusPresetSmall: "작게",
+    borderRadiusPresetMedium: "보통",
+    borderRadiusPresetLarge: "크게",
+    borderRadiusPresetFull: "완전 둥글게",
+  },
+};
+
+export function getEditorFormInputPanelMessages(locale: AppLocale | null | undefined): EditorFormInputPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_FORM_INPUT_PANEL_MESSAGES[key] ?? EDITOR_FORM_INPUT_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorFormRadioPanel.ts b/src/features/i18n/messages/editorFormRadioPanel.ts
new file mode 100644
index 0000000..f72cfb7
--- /dev/null
+++ b/src/features/i18n/messages/editorFormRadioPanel.ts
@@ -0,0 +1,152 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorFormRadioPanelMessages = {
+  sectionTitle: string;
+
+  requiredNoticeText: string;
+
+  styleSectionTitle: string;
+
+  textSizeLabel: string;
+  textSizeUnitLabel: string;
+
+  lineHeightLabel: string;
+  lineHeightUnitLabel: string;
+
+  letterSpacingLabel: string;
+  letterSpacingUnitLabel: string;
+
+  fixedWidthLabel: string;
+  fixedWidthUnitLabel: string;
+
+  paddingXLabel: string;
+  paddingXUnitLabel: string;
+
+  paddingYLabel: string;
+  paddingYUnitLabel: string;
+
+  optionGapLabel: string;
+  optionGapUnitLabel: string;
+
+  textColorLabel: string;
+  textColorPickerAria: string;
+  textColorHexAria: string;
+
+  fillColorLabel: string;
+  fillColorPickerAria: string;
+  fillColorHexAria: string;
+
+  strokeColorLabel: string;
+  strokeColorPickerAria: string;
+  strokeColorHexAria: string;
+
+  borderRadiusLabel: string;
+  borderRadiusPresetNone: string;
+  borderRadiusPresetSmall: string;
+  borderRadiusPresetMedium: string;
+  borderRadiusPresetLarge: string;
+  borderRadiusPresetFull: string;
+};
+
+const EDITOR_FORM_RADIO_PANEL_MESSAGES: Record<AppLocale, EditorFormRadioPanelMessages> = {
+  en: {
+    sectionTitle: "Radio field",
+
+    requiredNoticeText: "Required state is configured in the form controller.",
+
+    styleSectionTitle: "Field style",
+
+    textSizeLabel: "Radio text size (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "Radio line height (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "Radio letter spacing (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    fixedWidthLabel: "Field fixed width",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "Radio horizontal padding (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "Radio vertical padding (px)",
+    paddingYUnitLabel: "(px)",
+
+    optionGapLabel: "Radio option gap (px)",
+    optionGapUnitLabel: "(px)",
+
+    textColorLabel: "Text color",
+    textColorPickerAria: "Radio text color picker",
+    textColorHexAria: "Radio text color HEX",
+
+    fillColorLabel: "Background color",
+    fillColorPickerAria: "Radio background color picker",
+    fillColorHexAria: "Radio background color HEX",
+
+    strokeColorLabel: "Border color",
+    strokeColorPickerAria: "Radio border color picker",
+    strokeColorHexAria: "Radio border color HEX",
+
+    borderRadiusLabel: "Field border radius",
+    borderRadiusPresetNone: "None",
+    borderRadiusPresetSmall: "Small",
+    borderRadiusPresetMedium: "Medium",
+    borderRadiusPresetLarge: "Large",
+    borderRadiusPresetFull: "Fully rounded",
+  },
+  ko: {
+    sectionTitle: "라디오 필드",
+
+    requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
+
+    styleSectionTitle: "필드 스타일",
+
+    textSizeLabel: "라디오 텍스트 크기 (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "라디오 줄간격 (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "라디오 자간 (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    fixedWidthLabel: "필드 고정 너비",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "라디오 가로 패딩 (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "라디오 세로 패딩 (px)",
+    paddingYUnitLabel: "(px)",
+
+    optionGapLabel: "라디오 옵션 간격 (px)",
+    optionGapUnitLabel: "(px)",
+
+    textColorLabel: "텍스트 색상",
+    textColorPickerAria: "라디오 텍스트 색상 피커",
+    textColorHexAria: "라디오 텍스트 색상 HEX",
+
+    fillColorLabel: "배경 색상",
+    fillColorPickerAria: "라디오 배경 색상 피커",
+    fillColorHexAria: "라디오 배경 색상 HEX",
+
+    strokeColorLabel: "테두리 색상",
+    strokeColorPickerAria: "라디오 테두리 색상 피커",
+    strokeColorHexAria: "라디오 테두리 색상 HEX",
+
+    borderRadiusLabel: "필드 모서리 둥글기",
+    borderRadiusPresetNone: "없음",
+    borderRadiusPresetSmall: "작게",
+    borderRadiusPresetMedium: "보통",
+    borderRadiusPresetLarge: "크게",
+    borderRadiusPresetFull: "완전 둥글게",
+  },
+};
+
+export function getEditorFormRadioPanelMessages(locale: AppLocale | null | undefined): EditorFormRadioPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_FORM_RADIO_PANEL_MESSAGES[key] ?? EDITOR_FORM_RADIO_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorFormSelectPanel.ts b/src/features/i18n/messages/editorFormSelectPanel.ts
new file mode 100644
index 0000000..c973ca7
--- /dev/null
+++ b/src/features/i18n/messages/editorFormSelectPanel.ts
@@ -0,0 +1,226 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorFormSelectPanelMessages = {
+  sectionTitle: string;
+
+  labelTypeLabel: string;
+  labelTypeOptionText: string;
+  labelTypeOptionImage: string;
+
+  labelDisplayLabel: string;
+  labelDisplayOptionVisible: string;
+  labelDisplayOptionHidden: string;
+
+  layoutLabel: string;
+  layoutOptionStacked: string;
+  layoutOptionInline: string;
+
+  labelGapLabel: string;
+
+  fieldLabelLabel: string;
+  submitKeyLabel: string;
+
+  optionsLabel: string;
+  addOptionButtonLabel: string;
+  optionLabelPlaceholder: string;
+  optionValuePlaceholder: string;
+
+  requiredNoticeText: string;
+
+  styleSectionTitle: string;
+
+  textSizeLabel: string;
+  textSizeUnitLabel: string;
+
+  lineHeightLabel: string;
+  lineHeightUnitLabel: string;
+
+  letterSpacingLabel: string;
+  letterSpacingUnitLabel: string;
+
+  widthModeLabel: string;
+  widthModeOptionAuto: string;
+  widthModeOptionFull: string;
+  widthModeOptionFixed: string;
+
+  fixedWidthLabel: string;
+  fixedWidthUnitLabel: string;
+
+  paddingXLabel: string;
+  paddingXUnitLabel: string;
+
+  paddingYLabel: string;
+  paddingYUnitLabel: string;
+
+  textColorLabel: string;
+  textColorPickerAria: string;
+  textColorHexAria: string;
+
+  fillColorLabel: string;
+  fillColorPickerAria: string;
+  fillColorHexAria: string;
+
+  strokeColorLabel: string;
+  strokeColorPickerAria: string;
+  strokeColorHexAria: string;
+
+  borderRadiusLabel: string;
+  borderRadiusPresetNone: string;
+  borderRadiusPresetSmall: string;
+  borderRadiusPresetMedium: string;
+  borderRadiusPresetLarge: string;
+  borderRadiusPresetFull: string;
+};
+
+const EDITOR_FORM_SELECT_PANEL_MESSAGES: Record<AppLocale, EditorFormSelectPanelMessages> = {
+  en: {
+    sectionTitle: "Select field",
+
+    labelTypeLabel: "Label type",
+    labelTypeOptionText: "Text",
+    labelTypeOptionImage: "Image",
+
+    labelDisplayLabel: "Label display mode",
+    labelDisplayOptionVisible: "Visible (default)",
+    labelDisplayOptionHidden: "Hidden",
+
+    layoutLabel: "Layout",
+    layoutOptionStacked: "Vertical (default)",
+    layoutOptionInline: "Horizontal (inline)",
+
+    labelGapLabel: "Label/field gap (px)",
+
+    fieldLabelLabel: "Field label",
+    submitKeyLabel: "Submit key",
+
+    optionsLabel: "Options",
+    addOptionButtonLabel: "Add option",
+    optionLabelPlaceholder: "Label",
+    optionValuePlaceholder: "Value (value)",
+
+    requiredNoticeText: "Required state is configured in the form controller.",
+
+    styleSectionTitle: "Field style",
+
+    textSizeLabel: "Select text size (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "Select line height (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "Select letter spacing (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    widthModeLabel: "Field width",
+    widthModeOptionAuto: "Auto",
+    widthModeOptionFull: "Full width",
+    widthModeOptionFixed: "Fixed value",
+
+    fixedWidthLabel: "Field fixed width",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "Select horizontal padding (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "Select vertical padding (px)",
+    paddingYUnitLabel: "(px)",
+
+    textColorLabel: "Field text color",
+    textColorPickerAria: "Select text color picker",
+    textColorHexAria: "Select text color HEX",
+
+    fillColorLabel: "Field fill color",
+    fillColorPickerAria: "Select fill color picker",
+    fillColorHexAria: "Select fill color HEX",
+
+    strokeColorLabel: "Field border color",
+    strokeColorPickerAria: "Select border color picker",
+    strokeColorHexAria: "Select border color HEX",
+
+    borderRadiusLabel: "Field border radius",
+    borderRadiusPresetNone: "None",
+    borderRadiusPresetSmall: "Small",
+    borderRadiusPresetMedium: "Medium",
+    borderRadiusPresetLarge: "Large",
+    borderRadiusPresetFull: "Fully rounded",
+  },
+  ko: {
+    sectionTitle: "셀렉트 필드",
+
+    labelTypeLabel: "라벨 타입",
+    labelTypeOptionText: "텍스트",
+    labelTypeOptionImage: "이미지",
+
+    labelDisplayLabel: "라벨 표시 방식",
+    labelDisplayOptionVisible: "표시 (기본)",
+    labelDisplayOptionHidden: "숨김",
+
+    layoutLabel: "레이아웃",
+    layoutOptionStacked: "세로 (기본)",
+    layoutOptionInline: "가로 (인라인)",
+
+    labelGapLabel: "라벨/필드 간격 (px)",
+
+    fieldLabelLabel: "필드 라벨",
+    submitKeyLabel: "전송 키",
+
+    optionsLabel: "옵션",
+    addOptionButtonLabel: "옵션 추가",
+    optionLabelPlaceholder: "라벨",
+    optionValuePlaceholder: "값(value)",
+
+    requiredNoticeText: "필수 여부는 폼 컨트롤러에서 설정합니다.",
+
+    styleSectionTitle: "필드 스타일",
+
+    textSizeLabel: "셀렉트 텍스트 크기 (px)",
+    textSizeUnitLabel: "(px)",
+
+    lineHeightLabel: "셀렉트 줄간격 (px)",
+    lineHeightUnitLabel: "(px)",
+
+    letterSpacingLabel: "셀렉트 자간 (px)",
+    letterSpacingUnitLabel: "(px)",
+
+    widthModeLabel: "필드 너비",
+    widthModeOptionAuto: "자동",
+    widthModeOptionFull: "전체 폭",
+    widthModeOptionFixed: "고정 값",
+
+    fixedWidthLabel: "필드 고정 너비",
+    fixedWidthUnitLabel: "(px)",
+
+    paddingXLabel: "셀렉트 가로 패딩 (px)",
+    paddingXUnitLabel: "(px)",
+
+    paddingYLabel: "셀렉트 세로 패딩 (px)",
+    paddingYUnitLabel: "(px)",
+
+    textColorLabel: "필드 텍스트 색상",
+    textColorPickerAria: "셀렉트 텍스트 색상 피커",
+    textColorHexAria: "셀렉트 텍스트 색상 HEX",
+
+    fillColorLabel: "필드 채움 색상",
+    fillColorPickerAria: "셀렉트 채움 색상 피커",
+    fillColorHexAria: "셀렉트 채움 색상 HEX",
+
+    strokeColorLabel: "필드 테두리 색상",
+    strokeColorPickerAria: "셀렉트 테두리 색상 피커",
+    strokeColorHexAria: "셀렉트 테두리 색상 HEX",
+
+    borderRadiusLabel: "필드 모서리 둥글기",
+    borderRadiusPresetNone: "없음",
+    borderRadiusPresetSmall: "작게",
+    borderRadiusPresetMedium: "보통",
+    borderRadiusPresetLarge: "크게",
+    borderRadiusPresetFull: "완전 둥글게",
+  },
+};
+
+export function getEditorFormSelectPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorFormSelectPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_FORM_SELECT_PANEL_MESSAGES[key] ?? EDITOR_FORM_SELECT_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorImagePanel.ts b/src/features/i18n/messages/editorImagePanel.ts
new file mode 100644
index 0000000..ec8d02d
--- /dev/null
+++ b/src/features/i18n/messages/editorImagePanel.ts
@@ -0,0 +1,148 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorImagePanelMessages = {
+  imageSourceLabel: string;
+  imageSourceAria: string;
+  imageSourceOptionUrl: string;
+  imageSourceOptionUpload: string;
+
+  imageUrlLabel: string;
+  imageUrlAria: string;
+
+  imageUploadLabel: string;
+  imageUploadAria: string;
+
+  altLabel: string;
+  altAria: string;
+
+  styleSectionTitle: string;
+
+  cardBackgroundLabel: string;
+  cardBackgroundPickerAria: string;
+  cardBackgroundHexAria: string;
+
+  alignLabel: string;
+  alignAria: string;
+  alignOptionLeft: string;
+  alignOptionCenter: string;
+  alignOptionRight: string;
+
+  widthModeLabel: string;
+  widthModeAria: string;
+  widthModeOptionAuto: string;
+  widthModeOptionFixed: string;
+
+  fixedWidthLabel: string;
+  fixedWidthUnitLabel: string;
+  fixedWidthPresetSmall: string;
+  fixedWidthPresetMedium: string;
+  fixedWidthPresetLarge: string;
+
+  borderRadiusLabel: string;
+  borderRadiusPresetNone: string;
+  borderRadiusPresetSmall: string;
+  borderRadiusPresetMedium: string;
+  borderRadiusPresetLarge: string;
+  borderRadiusPresetFull: string;
+};
+
+const EDITOR_IMAGE_PANEL_MESSAGES: Record<AppLocale, EditorImagePanelMessages> = {
+  en: {
+    imageSourceLabel: "Image source",
+    imageSourceAria: "Image source",
+    imageSourceOptionUrl: "URL",
+    imageSourceOptionUpload: "File upload",
+
+    imageUrlLabel: "Image URL",
+    imageUrlAria: "Image URL",
+
+    imageUploadLabel: "Image file upload",
+    imageUploadAria: "Image file upload",
+
+    altLabel: "Alt text",
+    altAria: "Alt text",
+
+    styleSectionTitle: "Image style",
+
+    cardBackgroundLabel: "Card background color",
+    cardBackgroundPickerAria: "Image card background color picker",
+    cardBackgroundHexAria: "Image card background color HEX",
+
+    alignLabel: "Alignment",
+    alignAria: "Image alignment",
+    alignOptionLeft: "Left",
+    alignOptionCenter: "Center",
+    alignOptionRight: "Right",
+
+    widthModeLabel: "Width mode",
+    widthModeAria: "Image width mode",
+    widthModeOptionAuto: "Fit to content",
+    widthModeOptionFixed: "Fixed width (px)",
+
+    fixedWidthLabel: "Fixed width (px)",
+    fixedWidthUnitLabel: "(px)",
+    fixedWidthPresetSmall: "Small",
+    fixedWidthPresetMedium: "Medium",
+    fixedWidthPresetLarge: "Wide",
+
+    borderRadiusLabel: "Border radius",
+    borderRadiusPresetNone: "None",
+    borderRadiusPresetSmall: "Small",
+    borderRadiusPresetMedium: "Medium",
+    borderRadiusPresetLarge: "Large",
+    borderRadiusPresetFull: "Fully rounded",
+  },
+  ko: {
+    imageSourceLabel: "이미지 소스",
+    imageSourceAria: "이미지 소스",
+    imageSourceOptionUrl: "URL",
+    imageSourceOptionUpload: "파일 업로드",
+
+    imageUrlLabel: "이미지 URL",
+    imageUrlAria: "이미지 URL",
+
+    imageUploadLabel: "이미지 파일 업로드",
+    imageUploadAria: "이미지 파일 업로드",
+
+    altLabel: "대체 텍스트",
+    altAria: "대체 텍스트",
+
+    styleSectionTitle: "이미지 스타일",
+
+    cardBackgroundLabel: "카드 배경색",
+    cardBackgroundPickerAria: "이미지 카드 배경색 피커",
+    cardBackgroundHexAria: "이미지 카드 배경색 HEX",
+
+    alignLabel: "정렬",
+    alignAria: "이미지 정렬",
+    alignOptionLeft: "왼쪽",
+    alignOptionCenter: "가운데",
+    alignOptionRight: "오른쪽",
+
+    widthModeLabel: "너비 모드",
+    widthModeAria: "이미지 너비 모드",
+    widthModeOptionAuto: "내용에 맞춤",
+    widthModeOptionFixed: "고정 너비 (px)",
+
+    fixedWidthLabel: "고정 너비 (px)",
+    fixedWidthUnitLabel: "(px)",
+    fixedWidthPresetSmall: "작게",
+    fixedWidthPresetMedium: "보통",
+    fixedWidthPresetLarge: "넓게",
+
+    borderRadiusLabel: "모서리 둥글기",
+    borderRadiusPresetNone: "없음",
+    borderRadiusPresetSmall: "작게",
+    borderRadiusPresetMedium: "보통",
+    borderRadiusPresetLarge: "크게",
+    borderRadiusPresetFull: "완전 둥글게",
+  },
+};
+
+export function getEditorImagePanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorImagePanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_IMAGE_PANEL_MESSAGES[key] ?? EDITOR_IMAGE_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorListPanel.ts b/src/features/i18n/messages/editorListPanel.ts
new file mode 100644
index 0000000..275f970
--- /dev/null
+++ b/src/features/i18n/messages/editorListPanel.ts
@@ -0,0 +1,160 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorListPanelMessages = {
+  listItemsLabel: string;
+  listItemsAria: string;
+
+  alignLabel: string;
+  alignAria: string;
+  alignOptionLeft: string;
+  alignOptionCenter: string;
+  alignOptionRight: string;
+
+  styleSectionTitle: string;
+
+  fontSizeLabel: string;
+  fontSizeUnitLabel: string;
+  fontSizePresetSmall: string;
+  fontSizePresetMedium: string;
+  fontSizePresetLarge: string;
+
+  lineHeightLabel: string;
+  lineHeightPresetTight: string;
+  lineHeightPresetNormal: string;
+  lineHeightPresetRelaxed: string;
+
+  textColorLabel: string;
+  textColorPickerAria: string;
+  textColorHexAria: string;
+
+  backgroundColorLabel: string;
+  backgroundColorPickerAria: string;
+  backgroundColorHexAria: string;
+
+  bulletStyleLabel: string;
+  bulletStyleAria: string;
+  bulletStyleOptionDisc: string;
+  bulletStyleOptionCircle: string;
+  bulletStyleOptionSquare: string;
+  bulletStyleOptionDecimal: string;
+  bulletStyleOptionLowerAlpha: string;
+  bulletStyleOptionUpperAlpha: string;
+  bulletStyleOptionLowerRoman: string;
+  bulletStyleOptionUpperRoman: string;
+  bulletStyleOptionNone: string;
+
+  gapLabel: string;
+  gapUnitLabel: string;
+  gapPresetTight: string;
+  gapPresetNormal: string;
+  gapPresetRelaxed: string;
+};
+
+const EDITOR_LIST_PANEL_MESSAGES: Record<AppLocale, EditorListPanelMessages> = {
+  en: {
+    listItemsLabel: "List items (separated by line breaks)",
+    listItemsAria: "List items",
+
+    alignLabel: "Alignment",
+    alignAria: "List alignment",
+    alignOptionLeft: "Left",
+    alignOptionCenter: "Center",
+    alignOptionRight: "Right",
+
+    styleSectionTitle: "List style",
+
+    fontSizeLabel: "Font size (px)",
+    fontSizeUnitLabel: "(px)",
+    fontSizePresetSmall: "Small",
+    fontSizePresetMedium: "Medium",
+    fontSizePresetLarge: "Large",
+
+    lineHeightLabel: "Line height",
+    lineHeightPresetTight: "Tight",
+    lineHeightPresetNormal: "Normal",
+    lineHeightPresetRelaxed: "Relaxed",
+
+    textColorLabel: "Text color",
+    textColorPickerAria: "List text color picker",
+    textColorHexAria: "List text color HEX",
+
+    backgroundColorLabel: "Block background color",
+    backgroundColorPickerAria: "List background color picker",
+    backgroundColorHexAria: "List background color HEX",
+
+    bulletStyleLabel: "Bullet style",
+    bulletStyleAria: "List bullet style",
+    bulletStyleOptionDisc: "Default (●)",
+    bulletStyleOptionCircle: "Circle (○)",
+    bulletStyleOptionSquare: "Square (■)",
+    bulletStyleOptionDecimal: "Decimal (1.)",
+    bulletStyleOptionLowerAlpha: "Lower alpha (a.)",
+    bulletStyleOptionUpperAlpha: "Upper alpha (A.)",
+    bulletStyleOptionLowerRoman: "Lower roman (i.)",
+    bulletStyleOptionUpperRoman: "Upper roman (I.)",
+    bulletStyleOptionNone: "None",
+
+    gapLabel: "Item gap (px)",
+    gapUnitLabel: "(px)",
+    gapPresetTight: "Tight",
+    gapPresetNormal: "Normal",
+    gapPresetRelaxed: "Relaxed",
+  },
+  ko: {
+    listItemsLabel: "리스트 아이템 (줄바꿈으로 구분)",
+    listItemsAria: "리스트 아이템들",
+
+    alignLabel: "정렬",
+    alignAria: "리스트 정렬",
+    alignOptionLeft: "왼쪽",
+    alignOptionCenter: "가운데",
+    alignOptionRight: "오른쪽",
+
+    styleSectionTitle: "리스트 스타일",
+
+    fontSizeLabel: "글자 크기 (px)",
+    fontSizeUnitLabel: "(px)",
+    fontSizePresetSmall: "작게",
+    fontSizePresetMedium: "보통",
+    fontSizePresetLarge: "크게",
+
+    lineHeightLabel: "줄 간격",
+    lineHeightPresetTight: "좁게",
+    lineHeightPresetNormal: "보통",
+    lineHeightPresetRelaxed: "넓게",
+
+    textColorLabel: "텍스트 색상",
+    textColorPickerAria: "리스트 텍스트 색상 피커",
+    textColorHexAria: "리스트 텍스트 색상 HEX",
+
+    backgroundColorLabel: "블록 배경색",
+    backgroundColorPickerAria: "리스트 배경색 피커",
+    backgroundColorHexAria: "리스트 배경색 HEX",
+
+    bulletStyleLabel: "불릿 스타일",
+    bulletStyleAria: "리스트 불릿 스타일",
+    bulletStyleOptionDisc: "기본 (●)",
+    bulletStyleOptionCircle: "원 (○)",
+    bulletStyleOptionSquare: "사각 (■)",
+    bulletStyleOptionDecimal: "숫자 (1.)",
+    bulletStyleOptionLowerAlpha: "알파벳 소문자 (a.)",
+    bulletStyleOptionUpperAlpha: "알파벳 대문자 (A.)",
+    bulletStyleOptionLowerRoman: "로마 숫자 소문자 (i.)",
+    bulletStyleOptionUpperRoman: "로마 숫자 대문자 (I.)",
+    bulletStyleOptionNone: "없음",
+
+    gapLabel: "아이템 간 여백 (px)",
+    gapUnitLabel: "(px)",
+    gapPresetTight: "좁게",
+    gapPresetNormal: "보통",
+    gapPresetRelaxed: "넓게",
+  },
+};
+
+export function getEditorListPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorListPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_LIST_PANEL_MESSAGES[key] ?? EDITOR_LIST_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorProjectPropertiesPanel.ts b/src/features/i18n/messages/editorProjectPropertiesPanel.ts
new file mode 100644
index 0000000..cdf00fa
--- /dev/null
+++ b/src/features/i18n/messages/editorProjectPropertiesPanel.ts
@@ -0,0 +1,170 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorProjectPropertiesPanelMessages = {
+  sectionTitle: string;
+
+  projectTitleLabel: string;
+  projectTitleAria: string;
+
+  projectSlugLabel: string;
+  projectSlugAria: string;
+
+  canvasWidthLabel: string;
+  canvasWidthUnitLabel: string;
+  canvasWidthPresetMobile: string;
+  canvasWidthPresetTablet: string;
+  canvasWidthPresetDesktop: string;
+
+  canvasBgLabel: string;
+  canvasBgColorAria: string;
+  canvasBgHexAria: string;
+
+  pageBgLabel: string;
+  pageBgColorAria: string;
+  pageBgHexAria: string;
+
+  seoSectionTitle: string;
+
+  seoTitleLabel: string;
+  seoTitleAria: string;
+  seoTitlePlaceholderFallback: string;
+
+  seoDescriptionLabel: string;
+  seoDescriptionAria: string;
+  seoDescriptionPlaceholder: string;
+
+  seoOgImageUrlLabel: string;
+  seoOgImageUrlAria: string;
+  seoOgImageUrlPlaceholder: string;
+
+  seoCanonicalUrlLabel: string;
+  seoCanonicalUrlAria: string;
+  seoCanonicalUrlPlaceholder: string;
+
+  seoNoIndexAria: string;
+  seoNoIndexLabel: string;
+
+  headHtmlLabel: string;
+  headHtmlAria: string;
+  headHtmlPlaceholder: string;
+
+  trackingScriptLabel: string;
+  trackingScriptAria: string;
+  trackingScriptPlaceholder: string;
+};
+
+const EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES: Record<AppLocale, EditorProjectPropertiesPanelMessages> = {
+  en: {
+    sectionTitle: "Project settings",
+
+    projectTitleLabel: "Project title",
+    projectTitleAria: "Project title",
+
+    projectSlugLabel: "Project slug",
+    projectSlugAria: "Project slug",
+
+    canvasWidthLabel: "Canvas width",
+    canvasWidthUnitLabel: "(px)",
+    canvasWidthPresetMobile: "Mobile (390px)",
+    canvasWidthPresetTablet: "Tablet (768px)",
+    canvasWidthPresetDesktop: "Desktop (1200px)",
+
+    canvasBgLabel: "Canvas background color",
+    canvasBgColorAria: "Canvas background color",
+    canvasBgHexAria: "Canvas background HEX",
+
+    pageBgLabel: "Page background color",
+    pageBgColorAria: "Page background color",
+    pageBgHexAria: "Page background HEX",
+
+    seoSectionTitle: "SEO / meta",
+
+    seoTitleLabel: "SEO title",
+    seoTitleAria: "SEO title",
+    seoTitlePlaceholderFallback: "Page title",
+
+    seoDescriptionLabel: "Meta description",
+    seoDescriptionAria: "Meta description",
+    seoDescriptionPlaceholder: "Enter a description for search engines and social sharing.",
+
+    seoOgImageUrlLabel: "OG/Twitter image URL",
+    seoOgImageUrlAria: "OG/Twitter image URL",
+    seoOgImageUrlPlaceholder: "e.g. https://example.com/og-image.png",
+
+    seoCanonicalUrlLabel: "Canonical URL",
+    seoCanonicalUrlAria: "Canonical URL",
+    seoCanonicalUrlPlaceholder: "e.g. https://example.com/landing",
+
+    seoNoIndexAria: "Hide from search engines (noindex)",
+    seoNoIndexLabel: "Hide from search engines (noindex)",
+
+    headHtmlLabel: "Page head HTML",
+    headHtmlAria: "Page head HTML",
+    headHtmlPlaceholder: 'e.g. <meta name="description" content="..." />',
+
+    trackingScriptLabel: "Tracking script",
+    trackingScriptAria: "Tracking script",
+    trackingScriptPlaceholder: 'e.g. <script>/* GA, Pixel code */</script>',
+  },
+
+  ko: {
+    sectionTitle: "프로젝트 설정",
+
+    projectTitleLabel: "프로젝트 제목",
+    projectTitleAria: "프로젝트 제목",
+
+    projectSlugLabel: "프로젝트 주소 (slug)",
+    projectSlugAria: "프로젝트 주소 (slug)",
+
+    canvasWidthLabel: "캔버스 너비",
+    canvasWidthUnitLabel: "(px)",
+    canvasWidthPresetMobile: "모바일 (390px)",
+    canvasWidthPresetTablet: "태블릿 (768px)",
+    canvasWidthPresetDesktop: "데스크톱 (1200px)",
+
+    canvasBgLabel: "캔버스 배경색",
+    canvasBgColorAria: "캔버스 배경색",
+    canvasBgHexAria: "캔버스 배경색 HEX",
+
+    pageBgLabel: "페이지 배경색",
+    pageBgColorAria: "페이지 배경색",
+    pageBgHexAria: "페이지 배경색 HEX",
+
+    seoSectionTitle: "SEO / 메타",
+
+    seoTitleLabel: "SEO 타이틀",
+    seoTitleAria: "SEO 타이틀",
+    seoTitlePlaceholderFallback: "페이지 제목",
+
+    seoDescriptionLabel: "메타 디스크립션",
+    seoDescriptionAria: "메타 디스크립션",
+    seoDescriptionPlaceholder: "검색엔진 및 SNS 공유에 노출될 페이지 설명을 입력하세요.",
+
+    seoOgImageUrlLabel: "OG/Twitter 이미지 URL",
+    seoOgImageUrlAria: "OG/Twitter 이미지 URL",
+    seoOgImageUrlPlaceholder: "예: https://example.com/og-image.png",
+
+    seoCanonicalUrlLabel: "Canonical URL",
+    seoCanonicalUrlAria: "Canonical URL",
+    seoCanonicalUrlPlaceholder: "예: https://example.com/landing",
+
+    seoNoIndexAria: "검색 엔진에 노출하지 않기 (noindex)",
+    seoNoIndexLabel: "검색 엔진에 노출하지 않기 (noindex)",
+
+    headHtmlLabel: "페이지 head HTML",
+    headHtmlAria: "페이지 head HTML",
+    headHtmlPlaceholder: '예: <meta name="description" content="..." />',
+
+    trackingScriptLabel: "추적 스크립트",
+    trackingScriptAria: "추적 스크립트",
+    trackingScriptPlaceholder: '예: <script>/* GA, Pixel 코드 */</script>',
+  },
+};
+
+export function getEditorProjectPropertiesPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorProjectPropertiesPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES[key] ?? EDITOR_PROJECT_PROPERTIES_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorPropertiesSidebar.ts b/src/features/i18n/messages/editorPropertiesSidebar.ts
new file mode 100644
index 0000000..50dedbb
--- /dev/null
+++ b/src/features/i18n/messages/editorPropertiesSidebar.ts
@@ -0,0 +1,1251 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorPropertiesSidebarHelpProperty = {
+  label: string;
+  description: string;
+};
+
+export type EditorPropertiesSidebarHelpContent = {
+  title: string;
+  description: string;
+  properties?: EditorPropertiesSidebarHelpProperty[];
+};
+
+export type EditorPropertiesSidebarMessages = {
+  panelTitle: string;
+
+  actionDeleteBlock: string;
+  actionDuplicateBlock: string;
+  actionHelp: string;
+
+  modalCloseLabel: string;
+  modalPropertiesSectionTitle: string;
+
+  text: EditorPropertiesSidebarHelpContent;
+  button: EditorPropertiesSidebarHelpContent;
+  image: EditorPropertiesSidebarHelpContent;
+  list: EditorPropertiesSidebarHelpContent;
+  divider: EditorPropertiesSidebarHelpContent;
+  section: EditorPropertiesSidebarHelpContent;
+  video: EditorPropertiesSidebarHelpContent;
+  form: EditorPropertiesSidebarHelpContent;
+  formInput: EditorPropertiesSidebarHelpContent;
+  formSelect: EditorPropertiesSidebarHelpContent;
+  formCheckbox: EditorPropertiesSidebarHelpContent;
+  formRadio: EditorPropertiesSidebarHelpContent;
+  fallback: EditorPropertiesSidebarHelpContent;
+};
+
+const EDITOR_PROPERTIES_SIDEBAR_MESSAGES: Record<AppLocale, EditorPropertiesSidebarMessages> = {
+  en: {
+    panelTitle: "Properties",
+
+    actionDeleteBlock: "Delete block",
+    actionDuplicateBlock: "Duplicate block",
+    actionHelp: "HELP",
+
+    modalCloseLabel: "Close",
+    modalPropertiesSectionTitle: "Property details",
+
+    text: {
+      title: "Text block tutorial",
+      description:
+        "This is the basic block for headings and body text.\n\nAdd a text block from the left sidebar, then double-click the text on the canvas or edit it in the properties panel. You can adjust alignment, size, color and more to create various text styles.",
+      properties: [
+        {
+          label: "Selected text block content",
+          description:
+            "The actual sentence that will be rendered for this block. It is the same content as double-clicking the text on the canvas, and line breaks will be preserved as you type.",
+        },
+        {
+          label: "Alignment",
+          description:
+            "Controls whether the text is aligned to the left, center, or right. Normal body text usually uses left alignment, while hero titles or short punchy phrases often look better centered.",
+        },
+        {
+          label: "Text style (underline/strikethrough/italic)",
+          description:
+            "Use underline to make text look like a link or to highlight a word, strikethrough for things like original prices, and italic when you want a slightly different tone for quotes or product names.",
+        },
+        {
+          label: "Font size",
+          description:
+            "Controls the font size in px. You can start from the XS~3XL presets and then fine-tune the value with the slider or number input.",
+        },
+        {
+          label: "Letter spacing",
+          description:
+            "Adjusts the spacing between characters. Body text works well with normal or slightly wide spacing, while all-caps short titles often look better with a bit more letter spacing.",
+        },
+        {
+          label: "Line height",
+          description:
+            "Controls the space between lines. For body text, a range around 1.5–1.7 is easy to read, while very short titles can be tightened to around 1.25 so they feel more compact.",
+        },
+        {
+          label: "Weight",
+          description:
+            "Controls font weight from 100 to 900. For example: 400 for normal body, 600 for section headings, and around 700 for strong CTA phrases.",
+        },
+        {
+          label: "Text color",
+          description:
+            "Sets the text color from a palette or HEX code. Use a dark, high-contrast color for body text and your brand color for highlighted phrases.",
+        },
+        {
+          label: "Block background color",
+          description:
+            "Sets the background color for the card/box that contains the text. It is useful for notices, highlight boxes, and warning messages when combined with a soft background color.",
+        },
+        {
+          label: "Max width",
+          description:
+            "Prevents a single line from becoming too long by limiting the maximum line length. For example, \"Body width (60ch)\" works well for paragraphs, and \"Narrow (40ch)\" is good for card or banner copy.",
+        },
+      ],
+    },
+
+    button: {
+      title: "Button block tutorial",
+      description:
+        "Use this block to create CTA buttons for form submission or link navigation. Configure the label, link (URL), alignment, and color/size to build the action you need.",
+      properties: [
+        {
+          label: "Button text",
+          description:
+            "The label that appears on the button. For example: 'Get started now', 'Contact us'. Short, action-oriented phrases usually work best.",
+        },
+        {
+          label: "Horizontal padding (px)",
+          description:
+            "Controls the left and right inner spacing of the button. Larger values create a wider button that stands out more.",
+        },
+        {
+          label: "Vertical padding (px)",
+          description:
+            "Controls the top and bottom inner spacing. Increasing this value makes the button taller and more prominent.",
+        },
+        {
+          label: "Button link",
+          description:
+            "The URL or anchor (#section) that the button navigates to when clicked. It can point to an external page, an in-page section, or a form submission endpoint.",
+        },
+        {
+          label: "Alignment",
+          description:
+            "Decides whether the button is placed on the left, center, or right within its container. Primary CTAs are often centered.",
+        },
+        {
+          label: "Text color",
+          description:
+            "The color of the button label. Make sure it has enough contrast against the fill color for good readability.",
+        },
+        {
+          label: "Style",
+          description:
+            "The overall visual style of the button. \"Solid\" is a filled button, \"Outline\" has only a border, and \"Ghost\" has no fill, only text/border.",
+        },
+        {
+          label: "Fill color",
+          description:
+            "The fill color used in solid-style buttons. Using your primary brand color or accent color works well.",
+        },
+        {
+          label: "Border color",
+          description:
+            "The border color used in outline/ghost styles. Pick a color that has enough contrast against the background.",
+        },
+        {
+          label: "Border radius",
+          description:
+            "Controls how rounded the button corners are. \"None\" is a sharp rectangle, while \"Fully rounded\" creates a pill-shaped button.",
+        },
+        {
+          label: "Button width mode / fixed width",
+          description:
+            "Controls whether the button grows to full container width, fits its content automatically, or uses a fixed px width.",
+        },
+        {
+          label: "Button font size",
+          description:
+            "The font size of the button label. Important CTAs usually look better when the label is slightly larger than nearby text.",
+        },
+        {
+          label: "Line height / letter spacing",
+          description:
+            "Controls the line height and letter spacing for the button label. If the text looks cramped, increase letter spacing and slightly widen line height for multi-line labels.",
+        },
+      ],
+    },
+
+    image: {
+      title: "Image block tutorial",
+      description:
+        "Use this block to place banners, thumbnails, and descriptive images. Enter an external image URL or choose an uploaded asset, then adjust width/alignment/border radius to fit the layout.",
+      properties: [
+        {
+          label: "Image source",
+          description:
+            "Choose whether the image comes from an external URL or an uploaded asset.",
+        },
+        {
+          label: "Image URL / file upload",
+          description:
+            "In URL mode, paste an external image address. In upload mode, select a local image, which will be served as `/api/image/:id`.",
+        },
+        {
+          label: "Alt text",
+          description:
+            "A short text description for when the image cannot be loaded or for screen readers. Describe what the image conveys in one or two sentences.",
+        },
+        {
+          label: "Card background color",
+          description:
+            "The background color of the card that wraps the image. This is useful for transparent PNG icons or logos to make them stand out.",
+        },
+        {
+          label: "Alignment",
+          description:
+            "Controls whether the image is aligned to the left, center, or right inside the container.",
+        },
+        {
+          label: "Width mode / fixed width (px)",
+          description:
+            "Choose between auto width (fit content) and a fixed width in px. For thumbnail grids, fixed widths often create a more stable layout.",
+        },
+        {
+          label: "Border radius",
+          description:
+            "Controls how rounded the image card corners are. Avatars/icons often use fully rounded corners, while normal photos look natural with slightly rounded corners.",
+        },
+      ],
+    },
+
+    list: {
+      title: "List block tutorial",
+      description:
+        "Use this block to create bullet or numbered lists. Edit item text, tweak alignment and bullet style to build checklists, step-by-step guides, and more.",
+      properties: [
+        {
+          label: "List items (one per line)",
+          description:
+            "Each line becomes one list item. Indentation is converted into a tree structure according to the list-parsing rules used in tests.",
+        },
+        {
+          label: "Alignment",
+          description:
+            "Align the whole list to the left, center, or right. Checklists are typically left-aligned, while short feature summaries often use center alignment.",
+        },
+        {
+          label: "Font size (px)",
+          description:
+            "Controls the font size of list text. Slightly smaller than the main body copy can make it feel like supporting information.",
+        },
+        {
+          label: "Line height",
+          description:
+            "Controls the line height within each list item. For longer text, a generous value around 1.5–1.8 improves readability.",
+        },
+        {
+          label: "Text color",
+          description:
+            "The color of the list text. You can match the body color or use a slightly softer tone while keeping enough contrast.",
+        },
+        {
+          label: "Block background color",
+          description:
+            "The background color of the entire list card. Helpful for step-by-step guides or checklist panels you want to highlight.",
+        },
+        {
+          label: "Bullet style",
+          description:
+            "Choose bullet shapes (●/○/■) or numbered styles (1., a., i.). Number/letter/Roman styles automatically become ordered lists.",
+        },
+        {
+          label: "Item gap (px)",
+          description:
+            "Controls the vertical space between list items. For longer descriptions, use a larger gap for better readability.",
+        },
+      ],
+    },
+
+    divider: {
+      title: "Divider block tutorial",
+      description:
+        "Use this block to visually separate sections or content. Adjust alignment, thickness, length, color, and spacing to clarify page structure.",
+      properties: [
+        {
+          label: "Alignment",
+          description:
+            "Controls whether the divider is placed on the left, center, or right within its container.",
+        },
+        {
+          label: "Thickness",
+          description:
+            "Controls line thickness. A thin line is good for subtle separators, while a normal thickness clearly divides sections.",
+        },
+        {
+          label: "Length mode / fixed length (px)",
+          description:
+            "Choose whether the divider spans the full width, auto width, or a fixed length in px.",
+        },
+        {
+          label: "Line color",
+          description:
+            "The color of the divider line. Slightly darker than the section background often looks natural.",
+        },
+        {
+          label: "Vertical spacing",
+          description:
+            "Controls how much space is placed above and below the divider. Larger values make the boundary between sections more explicit.",
+        },
+      ],
+    },
+
+    section: {
+      title: "Section block tutorial",
+      description:
+        "A container block that defines large layout chunks. Configure background color/image/video, vertical padding, and width to build hero, features, footer, and similar sections.",
+      properties: [
+        {
+          label: "Background color",
+          description:
+            "The base background color for the entire section. It strongly affects the page mood, so using contrast between adjacent sections is recommended.",
+        },
+        {
+          label: "Background image source / URL / upload",
+          description:
+            "Configure a background image via external URL or uploaded file. Useful for hero backgrounds, patterns, and texture images.",
+        },
+        {
+          label: "Background image size / position / repeat",
+          description:
+            "Use cover/contain/auto for size, presets or X/Y percentages for position, and repeat options to build tiled patterns.",
+        },
+        {
+          label: "Background video source / URL / upload",
+          description:
+            "Set a video as the section background. This works well for eye-catching hero areas, but always check text contrast for readability.",
+        },
+        {
+          label: "Vertical padding",
+          description:
+            "Controls the top and bottom padding of the section. Larger padding makes the section feel more spacious and prominent.",
+        },
+      ],
+    },
+
+    video: {
+      title: "Video block tutorial",
+      description:
+        "Use this block to embed YouTube or self-hosted video. Enter the video URL, then adjust ratio/alignment/playback options to fit your page.",
+      properties: [
+        {
+          label: "Video source / URL / file upload",
+          description:
+            "Enter an external video URL (YouTube, Vimeo, etc.) or upload a video file served as `/api/video/:id`.",
+        },
+        {
+          label: "Poster image URL",
+          description:
+            "The thumbnail image shown before or while the video is loading. Choose a key frame or a representative image to increase click-through.",
+        },
+        {
+          label: "Card background color",
+          description:
+            "Background color of the card containing the video. You can use a slightly darker or lighter tone than surrounding sections for contrast.",
+        },
+        {
+          label: "Video alignment",
+          description:
+            "Controls whether the video is left, center, or right aligned inside its container.",
+        },
+        {
+          label: "Width mode / fixed width (px)",
+          description:
+            "Choose auto width, full width, or a fixed width in px for the video.",
+        },
+        {
+          label: "Card padding / border radius",
+          description:
+            "Controls inner padding and corner roundness for the video card. In card layouts, moderate padding and rounded corners often look clean.",
+        },
+        {
+          label: "Start / end time (seconds)",
+          description:
+            "Optional start/end positions if you want to play only part of the video, for example from 10s to 30s.",
+        },
+        {
+          label: "Aspect ratio",
+          description:
+            "The frame ratio of the video. Most web videos use 16:9, while square/vertical content might use 1:1 or 4:3.",
+        },
+        {
+          label: "Autoplay / loop / mute / show controls",
+          description:
+            "Playback options for autoplay, looping, muted audio, and player controls. Autoplay is usually combined with muted audio.",
+        },
+      ],
+    },
+
+    form: {
+      title: "Form controller block tutorial",
+      description:
+        "This controller groups input fields (formInput/select/checkbox/radio) into a single form. Configure submit target, payload format, width, spacing, and field mapping to build a native form.",
+      properties: [
+        {
+          label: "Submit target / webhook settings",
+          description:
+            "Choose whether the form data is handled internally or sent to an external webhook/Google Sheets. Configure destination URL, payload format, HTTP method, and more.",
+        },
+        {
+          label: "Extra params",
+          description:
+            "Add extra key/value pairs that are always included in the submission. Use one `key=value` per line. Example: `source=landing`.",
+        },
+        {
+          label: "Form width mode / fixed width (px)",
+          description:
+            "Choose automatic width, full width, or a fixed px width. Contact forms often work well around 480–640px.",
+        },
+        {
+          label: "Form vertical margin (px)",
+          description:
+            "Controls the vertical space above and below the form block.",
+        },
+        {
+          label: "Success / error messages",
+          description:
+            "Texts shown to the user when submission succeeds or fails. Clear and friendly copy improves the experience.",
+        },
+        {
+          label: "Form field mapping",
+          description:
+            "Select which input fields (formInput/select/checkbox/radio) are connected to this controller. Only checked fields are included in the submit payload.",
+        },
+        {
+          label: "Submit button",
+          description:
+            "Choose which button block will submit the form. When connected, clicking that button triggers form submission.",
+        },
+      ],
+    },
+
+    formInput: {
+      title: "Form input block tutorial",
+      description:
+        "Single-line or multiline text input fields such as name and email. Configure label, placeholder, required state, and width, then connect it to a form controller.",
+      properties: [
+        {
+          label: "Label type / field label",
+          description:
+            "The text or image label shown above or beside the field. It explains what the user should enter.",
+        },
+        {
+          label: "Label image URL / alt text",
+          description:
+            "When using an image label, configure the image URL and alt text. This is useful for logo-style or icon-based labels.",
+        },
+        {
+          label: "Submit key",
+          description:
+            "The field name used in the server/webhook payload. Matching your backend or spreadsheet column name makes processing easier.",
+        },
+        {
+          label: "Field type",
+          description:
+            "Choose between text, email, and multiline text. Email fields can use the browser's built-in email validation.",
+        },
+        {
+          label: "Placeholder",
+          description:
+            "The hint text shown inside the field before the user types. Example: 'Enter your email'.",
+        },
+        {
+          label: "Required field",
+          description:
+            "When enabled, the user must fill in this field. Use this for important values like name or email.",
+        },
+        {
+          label: "Text size / line height / letter spacing",
+          description:
+            "Fine-tune the field typography in px to control readability and overall tone.",
+        },
+        {
+          label: "Text alignment",
+          description:
+            "Align input text left, center, or right. For normal inputs, left alignment is recommended.",
+        },
+        {
+          label: "Layout / label-field gap",
+          description:
+            "Choose stacked or inline layout for label and field, and adjust the gap between them (px) in inline mode.",
+        },
+        {
+          label: "Width / fixed width",
+          description:
+            "Choose auto, full width, or a fixed px width. Short fields can use fixed width, and longer fields can use full width.",
+        },
+        {
+          label: "Horizontal / vertical padding",
+          description:
+            "Controls the inner padding of the input box. More padding makes the field larger and more comfortable to click or type in.",
+        },
+        {
+          label: "Field text / fill / border color",
+          description:
+            "Individually control text, background, and border colors. Use this to express error/active states.",
+        },
+        {
+          label: "Field border radius",
+          description:
+            "Controls how rounded the field corners are. Match this with the overall page design.",
+        },
+      ],
+    },
+
+    formSelect: {
+      title: "Form select block tutorial",
+      description:
+        "Dropdown select fields. Configure option list, default value, and width, then connect to a form controller.",
+      properties: [
+        {
+          label: "Label type / field label",
+          description:
+            "The label for the select field. It can be text or an image and explains what is being selected.",
+        },
+        {
+          label: "Submit key",
+          description:
+            "The field name used in the server/webhook payload when an option is selected.",
+        },
+        {
+          label: "Options",
+          description:
+            "The list of choices the user can select from. Configure both label and value, and use the 'Add option' button to create new ones.",
+        },
+        {
+          label: "Required field",
+          description:
+            "When enabled, at least one option must be selected. Use this for important selection fields.",
+        },
+        {
+          label: "Select text size / line height / letter spacing",
+          description:
+            "Controls typography for the select field in px.",
+        },
+        {
+          label: "Field width / fixed width",
+          description:
+            "Choose auto, full width, or a fixed px width for the select field.",
+        },
+        {
+          label: "Horizontal / vertical padding",
+          description:
+            "Controls the inner padding for the select input.",
+        },
+        {
+          label: "Field text / fill / border color",
+          description:
+            "Controls the text, background, and border colors for the select field.",
+        },
+        {
+          label: "Field border radius",
+          description:
+            "Controls how rounded the select box corners are.",
+        },
+      ],
+    },
+
+    formCheckbox: {
+      title: "Form checkbox block tutorial",
+      description:
+        "Checkbox groups for multi-select scenarios. Configure group title and option labels/images for consent fields or interest checklists.",
+      properties: [
+        {
+          label: "Group title type / group title",
+          description:
+            "The title of the checkbox group. It can be text or an image and explains what category is being selected.",
+        },
+        {
+          label: "Group title image source / URL / upload",
+          description:
+            "When using an image for the group label, choose the URL or uploaded asset.",
+        },
+        {
+          label: "Submit key",
+          description:
+            "The field name used when the set of checked values is sent to the server/webhook.",
+        },
+        {
+          label: "Options / option image source",
+          description:
+            "Configure label/value/image for each checkbox option. You can attach icons per option via URL or uploaded images.",
+        },
+        {
+          label: "Required field",
+          description:
+            "When enabled, the user must select at least one option. Commonly used for terms/conditions agreements.",
+        },
+        {
+          label: "Checkbox text size / line height / letter spacing",
+          description:
+            "Controls checkbox label typography. Longer labels benefit from larger line height.",
+        },
+      ],
+    },
+
+    formRadio: {
+      title: "Form radio block tutorial",
+      description:
+        "Radio button groups for single-choice scenarios such as pricing plans. Configure option labels/images and default selection, then connect to a form controller.",
+      properties: [
+        {
+          label: "Group title type / group title",
+          description:
+            "The title of the radio group, such as plan names or question prompts.",
+        },
+        {
+          label: "Group title image source / URL / upload",
+          description:
+            "When using an image label, choose the URL or uploaded asset.",
+        },
+        {
+          label: "Submit key",
+          description:
+            "The field name used when the selected option value is sent to the server/webhook.",
+        },
+        {
+          label: "Options / option image source",
+          description:
+            "Configure label/value/image for each radio option. You can attach icons or thumbnails per option.",
+        },
+        {
+          label: "Required field",
+          description:
+            "When enabled, the user must select one option. Typical for pricing/type selection.",
+        },
+        {
+          label: "Radio text size / line height / letter spacing",
+          description:
+            "Controls radio label typography. For long descriptions, use a generous line height.",
+        },
+      ],
+    },
+
+    fallback: {
+      title: "Block tutorial",
+      description: "Detailed help for this block will be added later.",
+    },
+  },
+
+  ko: {
+    panelTitle: "속성 패널",
+
+    actionDeleteBlock: "블록 삭제",
+    actionDuplicateBlock: "블록 복제",
+    actionHelp: "HELP",
+
+    modalCloseLabel: "닫기",
+    modalPropertiesSectionTitle: "속성별 설명",
+
+    text: {
+      title: "텍스트 블록 튜토리얼",
+      description:
+        "제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다.\n\n좌측 패널에서 텍스트를 추가한 뒤, 캔버스에서 텍스트를 더블클릭하거나 속성 패널에서 내용을 수정해 보세요. 정렬, 크기, 색상 등을 조절해 다양한 스타일의 텍스트를 만들 수 있습니다.",
+      properties: [
+        {
+          label: "선택한 텍스트 블록 내용",
+          description:
+            "이 블록에 실제로 표시될 문장을 입력하는 영역입니다. 캔버스에서 텍스트를 더블클릭했을 때와 동일한 내용이며, 여러 줄을 입력하면 줄바꿈이 그대로 반영됩니다.",
+        },
+        {
+          label: "정렬",
+          description:
+            "텍스트를 왼쪽/가운데/오른쪽 중 어디에 맞출지 결정합니다. 일반 본문은 왼쪽, Hero 제목이나 짧은 강조 문구는 가운데 정렬을 추천합니다.",
+        },
+        {
+          label: "텍스트 스타일 (밑줄/가운데줄/이탤릭)",
+          description:
+            "밑줄은 링크처럼 보이게 하거나 특정 단어를 강조할 때, 가운데줄은 할인 전 가격처럼 취소선을 표현할 때, 이탤릭은 인용구나 제품명 등 살짝 톤을 바꾸고 싶을 때 사용합니다.",
+        },
+        {
+          label: "글자 크기",
+          description:
+            "텍스트의 폰트 크기를 px 단위로 조절합니다. 프리셋(XS~3XL)으로 대략적인 크기를 고른 뒤, 슬라이더/숫자 입력으로 세밀하게 조정할 수 있습니다.",
+        },
+        {
+          label: "글자 간격",
+          description:
+            "문자 사이의 간격(자간)을 조절합니다. 본문은 보통 또는 약간 넓게, 대문자 위주의 짧은 타이틀은 살짝 넓게 설정하면 가독성과 디자인이 좋아집니다.",
+        },
+        {
+          label: "줄 간격",
+          description:
+            "행과 행 사이의 간격(행간)을 정합니다. 본문은 1.5~1.7 정도가 읽기 좋고, 아주 짧은 제목은 1.25 정도로 줄이면 한 덩어리로 단단해 보입니다.",
+        },
+        {
+          label: "굵기",
+          description:
+            "폰트 두께를 100~900 범위에서 조절합니다. 본문은 보통(400), 섹션 제목은 세미볼드(600), 강한 CTA 문구는 볼드(700) 정도를 추천합니다.",
+        },
+        {
+          label: "텍스트 색상",
+          description:
+            "글자 색을 팔레트 또는 HEX 코드로 지정합니다. 본문은 대비가 높은 짙은 색을, 강조 문구는 브랜드 메인 색을 사용하는 것이 좋습니다.",
+        },
+        {
+          label: "블록 배경색",
+          description:
+            "텍스트가 들어 있는 카드/박스 전체 배경색을 지정합니다. 공지사항, 강조 박스, 경고 문구 등을 만들 때 연한 배경색과 함께 사용하면 좋습니다.",
+        },
+        {
+          label: "최대 너비",
+          description:
+            "한 줄 텍스트가 지나치게 길어지지 않도록 최대 줄 길이를 제한합니다. `본문 폭(60ch)`는 일반 문단에, `좁게(40ch)`는 카드/배너 같은 짧은 문구에 적합합니다.",
+        },
+      ],
+    },
+
+    button: {
+      title: "버튼 블록 튜토리얼",
+      description:
+        "폼 제출이나 링크 이동을 위한 CTA 버튼을 만들 때 사용하는 블록입니다. 라벨, 링크(URL), 정렬, 색상/크기를 조절해 원하는 액션 버튼을 구성해 보세요.",
+      properties: [
+        {
+          label: "버튼 텍스트",
+          description:
+            "버튼 위에 표시될 문구입니다. 예: '지금 시작하기', '문의 남기기'. 짧고 행동을 유도하는 문장을 사용하는 것이 좋습니다.",
+        },
+        {
+          label: "가로 패딩 (px)",
+          description:
+            "버튼 양 옆의 여백을 조절합니다. 값이 클수록 버튼이 가로로 넓어져 더 강조됩니다.",
+        },
+        {
+          label: "세로 패딩 (px)",
+          description:
+            "버튼 위·아래 여백을 조절합니다. 값이 클수록 버튼 높이가 높아져 더 눈에 띕니다.",
+        },
+        {
+          label: "버튼 링크",
+          description:
+            "버튼 클릭 시 이동할 URL 또는 앵커(#section)입니다. 외부 페이지, 페이지 내 섹션, 폼 제출 엔드포인트 등으로 연결할 수 있습니다.",
+        },
+        {
+          label: "정렬",
+          description:
+            "해당 버튼이 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다. 주요 CTA 버튼은 가운데 정렬이 많이 쓰입니다.",
+        },
+        {
+          label: "텍스트 색상",
+          description:
+            "버튼 라벨 글자 색입니다. 채움 색상과 충분한 대비가 나도록 설정해야 가독성이 좋습니다.",
+        },
+        {
+          label: "스타일",
+          description:
+            "버튼 외형 스타일입니다. '채움'은 꽉 찬 스타일, '외곽선'은 테두리만 있는 스타일, '고스트'는 배경 없이 텍스트/테두리만 있는 스타일입니다.",
+        },
+        {
+          label: "채움 색상",
+          description:
+            "채움 스타일에서 버튼 내부를 채우는 색입니다. 브랜드 메인 색이나 강조 색을 사용하면 좋습니다.",
+        },
+        {
+          label: "외곽선 색상",
+          description:
+            "외곽선/고스트 스타일에서 버튼 테두리 색입니다. 배경색과의 대비를 고려해 설정합니다.",
+        },
+        {
+          label: "모서리 둥글기",
+          description:
+            "버튼 모서리를 얼마나 둥글게 처리할지 결정합니다. '없음'은 각진 버튼, '완전 둥글게'는 알약 모양 버튼입니다.",
+        },
+        {
+          label: "버튼 너비 모드 / 버튼 고정 너비",
+          description:
+            "버튼이 컨테이너 너비에 맞춰 늘어날지(전체 폭), 내용 길이에 맞출지(자동), 고정 px 너비를 가질지 결정합니다.",
+        },
+        {
+          label: "버튼 크기",
+          description:
+            "버튼 라벨 텍스트의 폰트 크기입니다. 중요한 CTA 버튼은 주변 텍스트보다 조금 더 크게 설정하면 좋습니다.",
+        },
+        {
+          label: "줄 간격 / 글자 간격",
+          description:
+            "버튼 라벨의 행간과 자간을 조절합니다. 글자가 너무 답답해 보이면 자간을 약간 넓히고, 여러 줄 버튼 문구는 줄 간격을 조금 넓혀 주세요.",
+        },
+      ],
+    },
+
+    image: {
+      title: "이미지 블록 튜토리얼",
+      description:
+        "배너, 썸네일, 설명 이미지를 배치할 때 사용하는 블록입니다. 외부 이미지 URL을 입력하거나 업로드 이미지를 선택하고, 너비/정렬/모서리 둥글기를 조절해 레이아웃에 맞게 배치해 보세요.",
+      properties: [
+        {
+          label: "이미지 소스",
+          description:
+            "이미지를 외부 URL에서 가져올지(URL), 빌더에 업로드한 에셋을 사용할지(파일 업로드) 선택합니다.",
+        },
+        {
+          label: "이미지 URL / 이미지 파일 업로드",
+          description:
+            "URL 모드에서는 외부 이미지 주소를 입력하고, 업로드 모드에서는 로컬 이미지를 업로드해 `/api/image/:id` 형식으로 관리합니다.",
+        },
+        {
+          label: "대체 텍스트",
+          description:
+            "이미지가 로드되지 않거나 스크린리더를 사용하는 사용자에게 보여질 설명 텍스트입니다. 이미지가 전달하는 의미를 한두 문장으로 작성해 주세요.",
+        },
+        {
+          label: "카드 배경색",
+          description:
+            "이미지를 감싸는 카드 영역의 배경색입니다. 투명한 PNG 아이콘이나 로고를 올릴 때 배경을 살짝 깔아주면 더 잘 보입니다.",
+        },
+        {
+          label: "정렬",
+          description:
+            "이미지가 포함된 영역 안에서 왼쪽/가운데/오른쪽 중 어디에 위치할지 결정합니다.",
+        },
+        {
+          label: "너비 모드 / 고정 너비 (px)",
+          description:
+            "이미지를 내용 크기에 맞출지(auto) 또는 px 단위로 고정된 너비를 사용할지 선택합니다. 썸네일 그리드에서는 고정 너비를 사용하는 편이 레이아웃이 안정적입니다.",
+        },
+        {
+          label: "모서리 둥글기",
+          description:
+            "이미지 카드 모서리 둥글기를 px 단위로 조절합니다. 아바타/아이콘은 완전 둥글게, 일반 사진은 살짝 둥글게 설정하면 자연스럽습니다.",
+        },
+      ],
+    },
+
+    list: {
+      title: "리스트 블록 튜토리얼",
+      description:
+        "불릿/번호 리스트를 만들 때 사용하는 블록입니다. 아이템 텍스트를 수정하고, 정렬/불릿 스타일을 바꿔 체크리스트나 단계별 안내 등을 표현할 수 있습니다.",
+      properties: [
+        {
+          label: "리스트 아이템 (줄바꿈으로 구분)",
+          description:
+            "각 줄이 하나의 리스트 항목이 됩니다. 들여쓰기를 이용한 중첩 리스트는 변환 로직에 따라 자동으로 트리 구조로 변환됩니다.",
+        },
+        {
+          label: "정렬",
+          description:
+            "리스트 전체를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 체크리스트는 왼쪽 정렬, 특징 요약은 가운데 정렬이 자주 사용됩니다.",
+        },
+        {
+          label: "글자 크기 (px)",
+          description:
+            "리스트 텍스트의 폰트 크기를 조절합니다. 본문보다 약간 작게 설정하면 보조 정보 느낌을 줄 수 있습니다.",
+        },
+        {
+          label: "줄 간격",
+          description:
+            "리스트 항목 내부의 행간을 조절합니다. 항목 내용이 길어질수록 1.5~1.8 정도의 넉넉한 값을 추천합니다.",
+        },
+        {
+          label: "텍스트 색상",
+          description:
+            "리스트 텍스트의 색상입니다. 배경색과의 대비를 고려해 본문과 동일하거나 약간 연한 색상을 사용할 수 있습니다.",
+        },
+        {
+          label: "블록 배경색",
+          description:
+            "리스트 전체 카드의 배경색입니다. 단계별 안내나 체크리스트 박스를 강조하는 용도로 사용할 수 있습니다.",
+        },
+        {
+          label: "불릿 스타일",
+          description:
+            "불릿(●/○/■) 또는 번호(1., a., i.) 형식을 선택합니다. 숫자/알파벳/로마 숫자 스타일을 선택하면 자동으로 순서형 리스트(ordered)가 됩니다.",
+        },
+        {
+          label: "아이템 간 여백 (px)",
+          description:
+            "각 리스트 항목 사이의 세로 간격입니다. 설명이 긴 항목이 많다면 여백을 넉넉히 두어 가독성을 확보하세요.",
+        },
+      ],
+    },
+
+    divider: {
+      title: "구분선 블록 튜토리얼",
+      description:
+        "섹션과 섹션 사이를 나누거나 콘텐츠를 시각적으로 구분할 때 사용하는 블록입니다. 정렬, 두께, 길이, 색상, 여백을 조절해 페이지 흐름을 정리해 보세요.",
+      properties: [
+        {
+          label: "정렬",
+          description:
+            "구분선을 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
+        },
+        {
+          label: "두께",
+          description:
+            "선의 두께입니다. '얇게'는 가벼운 보조 구분선, '보통'은 섹션 경계를 확실히 나눌 때 사용합니다.",
+        },
+        {
+          label: "길이 모드 / 고정 길이 (px)",
+          description:
+            "구분선을 전체 폭으로 쓸지, 내용에 맞출지, 또는 px 단위의 고정 길이를 사용할지 선택합니다.",
+        },
+        {
+          label: "선 색상",
+          description:
+            "구분선 컬러입니다. 너무 진한 색보다는 섹션 배경보다 살짝 진한 정도의 중간 톤을 추천합니다.",
+        },
+        {
+          label: "위/아래 여백",
+          description:
+            "구분선 위·아래에 들어가는 공백입니다. 값이 클수록 섹션이 더 명확하게 나뉘어 보입니다.",
+        },
+      ],
+    },
+
+    section: {
+      title: "섹션 블록 튜토리얼",
+      description:
+        "레이아웃의 큰 덩어리를 나누는 컨테이너 블록입니다. 배경색/배경 이미지/비디오, 위아래 패딩, 너비를 설정해 Hero, Features, Footer 같은 영역을 구성할 수 있습니다.",
+      properties: [
+        {
+          label: "배경 색상",
+          description:
+            "섹션 전체의 기본 배경색입니다. 페이지의 큰 분위기를 결정하는 요소이므로, 섹션 간 배경 대비를 적절히 주는 것이 좋습니다.",
+        },
+        {
+          label: "배경 이미지 소스 / URL / 파일 업로드",
+          description:
+            "섹션 배경으로 사용할 이미지를 외부 URL 또는 업로드 파일로 지정합니다. Hero 배경, 패턴, 질감 이미지를 설정할 때 사용합니다.",
+        },
+        {
+          label: "배경 이미지 크기 / 위치 / 반복",
+          description:
+            "cover/contain/auto로 크기를 조절하고, 프리셋 또는 X/Y 퍼센트로 위치를 조절하며, 반복 여부를 설정해 패턴 형태로 사용할 수 있습니다.",
+        },
+        {
+          label: "배경 비디오 소스 / URL / 파일 업로드",
+          description:
+            "섹션 배경에 비디오를 설정합니다. 시선을 끌어야 하는 Hero 영역 등에 사용하되, 가독성 저하를 막기 위해 텍스트 대비를 꼭 확인하세요.",
+        },
+        {
+          label: "세로 패딩",
+          description:
+            "섹션 위·아래 여백입니다. 값이 클수록 섹션이 여유 있고 강조되어 보입니다. Hero 섹션은 넉넉한 패딩을, 보조 섹션은 중간 정도를 추천합니다.",
+        },
+      ],
+    },
+
+    video: {
+      title: "비디오 블록 튜토리얼",
+      description:
+        "YouTube/영상 URL 또는 직접 호스팅한 비디오를 삽입할 때 사용하는 블록입니다. 동영상 주소를 입력하고, 비율/정렬/재생 옵션을 조정해 페이지에 맞게 배치해 보세요.",
+      properties: [
+        {
+          label: "비디오 소스 / 비디오 URL / 비디오 파일 업로드",
+          description:
+            "외부 동영상 URL(YouTube, Vimeo 등)을 직접 입력하거나, 비디오 파일을 업로드해 `/api/video/:id` 형태로 사용할 수 있습니다.",
+        },
+        {
+          label: "포스터 이미지 URL",
+          description:
+            "동영상 재생 전/로딩 중에 보여줄 썸네일 이미지입니다. 영상의 핵심 장면이나 대표 이미지를 사용하면 클릭률을 높일 수 있습니다.",
+        },
+        {
+          label: "카드 배경색",
+          description:
+            "비디오가 들어가는 카드 영역의 배경색입니다. 주변 섹션과의 대비를 위해 살짝 어둡거나 밝은 색을 설정할 수 있습니다.",
+        },
+        {
+          label: "비디오 정렬",
+          description:
+            "비디오를 컨테이너 안에서 왼쪽/가운데/오른쪽 중 어디에 위치시킬지 결정합니다.",
+        },
+        {
+          label: "비디오 너비 모드 / 고정 너비 (px)",
+          description:
+            "비디오를 내용 너비에 맞출지, 가로 전체를 채울지, 특정 px 너비로 고정할지 선택합니다.",
+        },
+        {
+          label: "카드 패딩 / 카드 모서리 둥글기",
+          description:
+            "비디오 주변 카드의 안쪽 여백과 모서리 둥글기입니다. 카드형 레이아웃에서는 적당한 패딩과 둥근 모서리를 주면 디자인이 정돈됩니다.",
+        },
+        {
+          label: "시작 시점 (초) / 종료 시점 (초)",
+          description:
+            "영상의 특정 구간만 재생하고 싶을 때 사용하는 옵션입니다. 예를 들어 10초~30초만 재생하도록 설정할 수 있습니다.",
+        },
+        {
+          label: "화면 비율",
+          description:
+            "동영상 프레임 비율입니다. 대부분의 웹 영상은 16:9를 사용하며, 정사각형/세로형 콘텐츠는 1:1, 4:3 등을 사용할 수 있습니다.",
+        },
+        {
+          label: "자동 재생 / 반복 재생 / 음소거 / 재생 컨트롤 표시",
+          description:
+            "자동 재생/반복 재생/음소거/컨트롤 표시 여부를 설정합니다. 자동 재생 영상은 보통 음소거를 함께 켜 두는 것이 좋습니다.",
+        },
+      ],
+    },
+
+    form: {
+      title: "폼 컨트롤러 블록 튜토리얼",
+      description:
+        "입력 필드(formInput/select/checkbox/radio)를 하나의 폼으로 묶는 컨트롤러입니다. 전송 대상, 전송 포맷, 너비, 여백 등을 설정해 네이티브 폼 제출을 구성하고, 필드 ID를 연결해 폼 구조를 완성할 수 있습니다.",
+      properties: [
+        {
+          label: "전송 대상 / Webhook 설정",
+          description:
+            "폼 데이터를 내부 처리로만 사용할지, 외부 Webhook/Google Sheets 등으로 전송할지 결정하고, 목적지 URL/전송 포맷/HTTP 메서드 등을 설정합니다.",
+        },
+        {
+          label: "추가 파라미터",
+          description:
+            "`key=value` 형식으로 줄바꿈해 작성하면, 모든 폼 제출에 공통으로 포함될 추가 파라미터를 지정할 수 있습니다. 예: `source=landing`.",
+        },
+        {
+          label: "폼 너비 모드 / 폼 고정 너비 (px)",
+          description:
+            "폼 전체의 가로 폭을 자동/전체 폭/고정 px 값 중에서 선택합니다. 문의 폼은 보통 480~640px 정도의 고정 폭이 읽기 좋습니다.",
+        },
+        {
+          label: "폼 위/아래 여백 (px)",
+          description:
+            "폼 블록 위·아래에 들어가는 공백입니다. 페이지 내 다른 섹션과의 간격을 조절할 때 사용합니다.",
+        },
+        {
+          label: "성공 메시지 / 에러 메시지",
+          description:
+            "폼 전송 성공 또는 실패 시 사용자에게 보여줄 텍스트입니다. 명확하고 친절한 문구로 작성하는 것이 좋습니다.",
+        },
+        {
+          label: "폼 필드 매핑",
+          description:
+            "폼 컨트롤러와 연결할 입력 필드(formInput/select/checkbox/radio)를 체크박스로 선택합니다. 체크된 필드만 실제 폼 제출 payload에 포함됩니다.",
+        },
+        {
+          label: "Submit 버튼",
+          description:
+            "폼 제출을 담당할 버튼 블록을 지정합니다. 별도 버튼 블록을 만들어 이 컨트롤러와 연결하면, 해당 버튼 클릭 시 폼이 제출됩니다.",
+        },
+      ],
+    },
+
+    formInput: {
+      title: "폼 입력 블록 튜토리얼",
+      description:
+        "이름, 이메일 등 한 줄 텍스트 또는 긴 텍스트 입력 필드를 만들 때 사용하는 블록입니다. 레이블, 플레이스홀더, 필수 여부, 너비 등을 설정해 폼 컨트롤러와 함께 사용합니다.",
+      properties: [
+        {
+          label: "라벨 타입 / 필드 라벨",
+          description:
+            "입력 필드 위나 옆에 표시될 설명입니다. 텍스트 또는 이미지로 라벨을 구성할 수 있으며, 사용자가 어떤 값을 입력해야 하는지 명확하게 알려줍니다.",
+        },
+        {
+          label: "라벨 이미지 URL / 대체 텍스트",
+          description:
+            "라벨을 이미지로 사용할 때 경로와 alt 텍스트를 지정합니다. 로고형 라벨이나 아이콘 기반 UI를 만들 때 활용할 수 있습니다.",
+        },
+        {
+          label: "전송 키",
+          description:
+            "이 입력값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
+        },
+        {
+          label: "필드 타입",
+          description:
+            "텍스트/이메일/긴 텍스트 중 어떤 형태의 입력을 받을지 결정합니다. 이메일 타입은 브라우저 기본 이메일 검증을 활용할 수 있습니다.",
+        },
+        {
+          label: "Placeholder",
+          description:
+            "입력 전 필드 안에 흐릿하게 보여줄 안내 문구입니다. 예: '이메일을 입력해 주세요'.",
+        },
+        {
+          label: "필수 필드",
+          description:
+            "체크 시 이 필드는 반드시 채워야 합니다. 이름/이메일 같은 필수 값에는 활성화하고, 선택 항목에는 비활성화하는 것을 추천합니다.",
+        },
+        {
+          label: "텍스트 크기 / 줄간격 / 자간",
+          description:
+            "입력 값의 폰트 크기(px), 줄간격(px), 자간(px)을 조절해 폼 필드의 가독성과 분위기를 세밀하게 튜닝합니다.",
+        },
+        {
+          label: "텍스트 정렬",
+          description:
+            "필드 안 텍스트를 왼쪽/가운데/오른쪽 중 어디에 정렬할지 결정합니다. 일반 입력은 왼쪽 정렬을 권장합니다.",
+        },
+        {
+          label: "레이아웃 / 라벨/필드 간격",
+          description:
+            "라벨과 필드를 세로(stack) 또는 가로(inline)로 배치하고, inline 모드에서 라벨과 입력 사이 간격(px)을 조절합니다.",
+        },
+        {
+          label: "너비 / 필드 고정 너비",
+          description:
+            "필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다. 짧은 필드는 고정 값, 긴 입력은 전체 폭을 사용할 수 있습니다.",
+        },
+        {
+          label: "필드 가로/세로 패딩",
+          description:
+            "입력 상자 안쪽 여백을 조절합니다. 값이 클수록 필드가 커지고 누르기/입력하기 편해집니다.",
+        },
+        {
+          label: "필드 텍스트/채움/테두리 색상",
+          description:
+            "입력 텍스트, 배경, 테두리 색상을 각각 조절합니다. 에러 상태/강조 상태 등을 표현할 때 조합해서 사용할 수 있습니다.",
+        },
+        {
+          label: "필드 모서리 둥글기",
+          description:
+            "입력 상자의 모서리를 얼마나 둥글게 할지 결정합니다. 페이지의 전체 디자인 톤과 맞춰 사용하세요.",
+        },
+      ],
+    },
+
+    formSelect: {
+      title: "폼 셀렉트 블록 튜토리얼",
+      description:
+        "드롭다운 선택 필드를 만들 때 사용하는 블록입니다. 옵션 목록과 기본 선택값, 너비를 설정해 폼 컨트롤러와 함께 사용합니다.",
+      properties: [
+        {
+          label: "라벨 타입 / 필드 라벨",
+          description:
+            "셀렉트 필드의 제목 역할을 하는 라벨입니다. 텍스트 또는 이미지로 구성할 수 있으며, 선택해야 할 값의 의미를 설명합니다.",
+        },
+        {
+          label: "전송 키",
+          description:
+            "선택된 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다. 백엔드나 스프레드시트 컬럼명과 일치시키면 이후 처리가 편해집니다.",
+        },
+        {
+          label: "옵션",
+          description:
+            "사용자가 선택할 수 있는 옵션 목록입니다. 라벨과 value를 함께 설정하며, '옵션 추가' 버튼으로 새 옵션을 만들 수 있습니다.",
+        },
+        {
+          label: "필수 필드",
+          description:
+            "체크 시 반드시 하나의 옵션을 선택해야 합니다. 중요 선택 항목에는 필수로 설정하는 것을 권장합니다.",
+        },
+        {
+          label: "셀렉트 텍스트 크기 / 줄간격 / 자간",
+          description:
+            "드롭다운 필드의 텍스트 타이포그래피를 px 단위로 조절해 가독성과 분위기를 맞춥니다.",
+        },
+        {
+          label: "필드 너비 / 필드 고정 너비",
+          description:
+            "셀렉트 필드를 자동/전체 폭/고정 px 중 어떤 너비로 렌더링할지 결정합니다.",
+        },
+        {
+          label: "셀렉트 가로/세로 패딩",
+          description:
+            "드롭다운 안쪽 여백을 조절해 클릭 영역과 시각적 무게감을 조정합니다.",
+        },
+        {
+          label: "필드 텍스트/채움/테두리 색상",
+          description:
+            "선택 영역의 텍스트, 배경, 테두리 색상을 설정합니다. 폼 전체 톤과 잘 어울리는 색상을 사용하는 것이 좋습니다.",
+        },
+        {
+          label: "필드 모서리 둥글기",
+          description:
+            "셀렉트 박스의 모서리를 얼마나 둥글게 표시할지 결정합니다.",
+        },
+      ],
+    },
+
+    formCheckbox: {
+      title: "폼 체크박스 블록 튜토리얼",
+      description:
+        "여러 항목 중 복수 선택이 필요한 경우 사용하는 체크박스 그룹 블록입니다. 그룹 타이틀과 옵션 라벨/이미지를 설정해 동의 항목이나 관심사 선택 등을 구성할 수 있습니다.",
+      properties: [
+        {
+          label: "그룹 타이틀 타입 / 그룹 타이틀",
+          description:
+            "체크박스 그룹 전체의 제목입니다. 텍스트 또는 이미지로 표현할 수 있으며, 사용자가 어떤 범주를 선택하는지 알려줍니다.",
+        },
+        {
+          label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
+          description:
+            "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드된 이미지를 선택합니다.",
+        },
+        {
+          label: "전송 키",
+          description:
+            "체크된 옵션들의 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
+        },
+        {
+          label: "옵션 / 옵션 이미지 소스",
+          description:
+            "각 체크박스 옵션의 라벨/값/이미지를 설정합니다. URL 또는 업로드 이미지로 옵션별 아이콘을 붙일 수 있습니다.",
+        },
+        {
+          label: "필수 필드",
+          description:
+            "체크 시 하나 이상 옵션을 선택해야 합니다. 약관 동의 등 필수 동의 항목에 사용합니다.",
+        },
+        {
+          label: "체크박스 텍스트 크기 / 줄간격 / 자간",
+          description:
+            "체크박스 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 항목이 길어질수록 줄간격을 넉넉히 두는 것이 좋습니다.",
+        },
+      ],
+    },
+
+    formRadio: {
+      title: "폼 라디오 블록 튜토리얼",
+      description:
+        "여러 옵션 중 하나만 선택해야 할 때 사용하는 라디오 버튼 그룹 블록입니다. 옵션 라벨/이미지와 기본 선택값을 설정해 요금제 선택 등 단일 선택 시나리오를 구성할 수 있습니다.",
+      properties: [
+        {
+          label: "그룹 타이틀 타입 / 그룹 타이틀",
+          description:
+            "라디오 그룹의 제목입니다. 요금제 이름, 질문 문구 등 단일 선택의 맥락을 설명합니다.",
+        },
+        {
+          label: "그룹 타이틀 이미지 소스 / URL / 파일 업로드",
+          description:
+            "그룹 라벨을 이미지로 사용할 때, URL 또는 업로드 이미지를 선택합니다.",
+        },
+        {
+          label: "전송 키",
+          description:
+            "선택된 하나의 옵션 값이 서버/웹훅에 전달될 때 사용되는 필드 이름입니다.",
+        },
+        {
+          label: "옵션 / 옵션 이미지 소스",
+          description:
+            "각 라디오 옵션의 라벨/값/이미지를 설정합니다. 옵션별 아이콘이나 썸네일을 붙여 더 풍부한 선택 UI를 만들 수 있습니다.",
+        },
+        {
+          label: "필수 필드",
+          description:
+            "체크 시 반드시 하나의 옵션을 선택해야 합니다. 요금제/유형 선택처럼 반드시 선택이 필요한 경우에 사용합니다.",
+        },
+        {
+          label: "라디오 텍스트 크기 / 줄간격 / 자간",
+          description:
+            "라디오 라벨의 폰트 크기, 줄간격, 자간을 조절합니다. 옵션 설명이 긴 경우 줄간격을 넉넉히 두세요.",
+        },
+      ],
+    },
+
+    fallback: {
+      title: "블록 튜토리얼",
+      description: "이 블록에 대한 자세한 도움말은 추후 추가될 예정입니다.",
+    },
+  },
+};
+
+export function getEditorPropertiesSidebarMessages(
+  locale: AppLocale | null | undefined,
+): EditorPropertiesSidebarMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_PROPERTIES_SIDEBAR_MESSAGES[key] ?? EDITOR_PROPERTIES_SIDEBAR_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorSectionPanel.ts b/src/features/i18n/messages/editorSectionPanel.ts
new file mode 100644
index 0000000..d7390e7
--- /dev/null
+++ b/src/features/i18n/messages/editorSectionPanel.ts
@@ -0,0 +1,301 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorSectionPanelMessages = {
+  backgroundColorLabel: string;
+  backgroundColorPickerAria: string;
+  backgroundColorHexAria: string;
+
+  backgroundImageSourceLabel: string;
+  backgroundImageSourceAria: string;
+  backgroundImageSourceOptionNone: string;
+  backgroundImageSourceOptionUrl: string;
+  backgroundImageSourceOptionUpload: string;
+
+  backgroundImageUrlLabel: string;
+  backgroundImageUrlAria: string;
+
+  backgroundImageUploadLabel: string;
+  backgroundImageUploadAria: string;
+
+  backgroundImagePositionModeLabel: string;
+  backgroundImagePositionModeAria: string;
+  backgroundImagePositionModeOptionPreset: string;
+  backgroundImagePositionModeOptionCustom: string;
+
+  backgroundImageSizeLabel: string;
+  backgroundImageSizeAria: string;
+
+  backgroundImagePositionLabel: string;
+  backgroundImagePositionAria: string;
+  backgroundImagePositionOptionCenter: string;
+  backgroundImagePositionOptionTop: string;
+  backgroundImagePositionOptionBottom: string;
+  backgroundImagePositionOptionLeft: string;
+  backgroundImagePositionOptionRight: string;
+
+  backgroundImagePositionXLabel: string;
+  backgroundImagePositionYLabel: string;
+
+  backgroundImageRepeatLabel: string;
+  backgroundImageRepeatAria: string;
+  backgroundImageRepeatOptionNone: string;
+  backgroundImageRepeatOptionBoth: string;
+  backgroundImageRepeatOptionX: string;
+  backgroundImageRepeatOptionY: string;
+
+  backgroundVideoSourceLabel: string;
+  backgroundVideoSourceAria: string;
+  backgroundVideoSourceOptionNone: string;
+  backgroundVideoSourceOptionUrl: string;
+  backgroundVideoSourceOptionUpload: string;
+
+  backgroundVideoUrlLabel: string;
+  backgroundVideoUrlAria: string;
+
+  backgroundVideoUploadLabel: string;
+  backgroundVideoUploadAria: string;
+
+  paddingYLabel: string;
+  paddingYUnitLabel: string;
+  paddingYPresetExtraTight: string;
+  paddingYPresetTight: string;
+  paddingYPresetNormal: string;
+  paddingYPresetRelaxed: string;
+  paddingYPresetExtraRelaxed: string;
+
+  layoutSectionTitle: string;
+  columnLayoutLabel: string;
+  columnLayoutAria: string;
+  columnLayoutOptionOneFull: string;
+  columnLayoutOptionTwoEqual: string;
+  columnLayoutOptionTwoOneTwo: string;
+  columnLayoutOptionTwoTwoOne: string;
+  columnLayoutOptionThreeEqual: string;
+  columnLayoutOptionCustom: string;
+
+  maxWidthLabel: string;
+  maxWidthUnitLabel: string;
+  maxWidthPresetExtraNarrow: string;
+  maxWidthPresetNarrow: string;
+  maxWidthPresetNormal: string;
+  maxWidthPresetWide: string;
+  maxWidthPresetExtraWide: string;
+
+  gapXLabel: string;
+  gapXUnitLabel: string;
+  gapXPresetZero: string;
+  gapXPresetTight: string;
+  gapXPresetNormal: string;
+  gapXPresetRelaxed: string;
+  gapXPresetExtraRelaxed: string;
+  gapXPresetMax: string;
+
+  alignItemsLabel: string;
+  alignItemsAria: string;
+  alignItemsOptionTop: string;
+  alignItemsOptionCenter: string;
+  alignItemsOptionBottom: string;
+};
+
+const EDITOR_SECTION_PANEL_MESSAGES: Record<AppLocale, EditorSectionPanelMessages> = {
+  en: {
+    backgroundColorLabel: "Background color",
+    backgroundColorPickerAria: "Section background color picker",
+    backgroundColorHexAria: "Section background color HEX",
+
+    backgroundImageSourceLabel: "Background image source",
+    backgroundImageSourceAria: "Background image source",
+    backgroundImageSourceOptionNone: "None",
+    backgroundImageSourceOptionUrl: "URL",
+    backgroundImageSourceOptionUpload: "File upload",
+
+    backgroundImageUrlLabel: "Background image URL",
+    backgroundImageUrlAria: "Background image URL",
+
+    backgroundImageUploadLabel: "Background image file upload",
+    backgroundImageUploadAria: "Background image file upload",
+
+    backgroundImagePositionModeLabel: "Background image position mode",
+    backgroundImagePositionModeAria: "Background image position mode",
+    backgroundImagePositionModeOptionPreset: "Preset",
+    backgroundImagePositionModeOptionCustom: "Custom (X/Y)",
+
+    backgroundImageSizeLabel: "Background image size",
+    backgroundImageSizeAria: "Background image size",
+
+    backgroundImagePositionLabel: "Background image position",
+    backgroundImagePositionAria: "Background image position",
+    backgroundImagePositionOptionCenter: "Center",
+    backgroundImagePositionOptionTop: "Top",
+    backgroundImagePositionOptionBottom: "Bottom",
+    backgroundImagePositionOptionLeft: "Left",
+    backgroundImagePositionOptionRight: "Right",
+
+    backgroundImagePositionXLabel: "Background image horizontal position",
+    backgroundImagePositionYLabel: "Background image vertical position",
+
+    backgroundImageRepeatLabel: "Background image repeat",
+    backgroundImageRepeatAria: "Background image repeat",
+    backgroundImageRepeatOptionNone: "No repeat",
+    backgroundImageRepeatOptionBoth: "Repeat (x/y)",
+    backgroundImageRepeatOptionX: "Repeat horizontally",
+    backgroundImageRepeatOptionY: "Repeat vertically",
+
+    backgroundVideoSourceLabel: "Background video source",
+    backgroundVideoSourceAria: "Background video source",
+    backgroundVideoSourceOptionNone: "None",
+    backgroundVideoSourceOptionUrl: "URL",
+    backgroundVideoSourceOptionUpload: "File upload",
+
+    backgroundVideoUrlLabel: "Background video URL",
+    backgroundVideoUrlAria: "Background video URL",
+
+    backgroundVideoUploadLabel: "Background video file upload",
+    backgroundVideoUploadAria: "Background video file upload",
+
+    paddingYLabel: "Vertical padding",
+    paddingYUnitLabel: "(px)",
+    paddingYPresetExtraTight: "Very tight",
+    paddingYPresetTight: "Tight",
+    paddingYPresetNormal: "Normal",
+    paddingYPresetRelaxed: "Wide",
+    paddingYPresetExtraRelaxed: "Very wide",
+
+    layoutSectionTitle: "Section layout",
+    columnLayoutLabel: "Section column layout",
+    columnLayoutAria: "Section column layout",
+    columnLayoutOptionOneFull: "1 column (1/1)",
+    columnLayoutOptionTwoEqual: "2 columns (1/2 - 1/2)",
+    columnLayoutOptionTwoOneTwo: "2 columns (1/3 - 2/3)",
+    columnLayoutOptionTwoTwoOne: "2 columns (2/3 - 1/3)",
+    columnLayoutOptionThreeEqual: "3 columns (1/3 - 1/3 - 1/3)",
+    columnLayoutOptionCustom: "Custom",
+
+    maxWidthLabel: "Max width (px)",
+    maxWidthUnitLabel: "(px)",
+    maxWidthPresetExtraNarrow: "Very narrow",
+    maxWidthPresetNarrow: "Narrow",
+    maxWidthPresetNormal: "Normal",
+    maxWidthPresetWide: "Wide",
+    maxWidthPresetExtraWide: "Very wide",
+
+    gapXLabel: "Column gap (px)",
+    gapXUnitLabel: "(px)",
+    gapXPresetZero: "0",
+    gapXPresetTight: "Tight",
+    gapXPresetNormal: "Normal",
+    gapXPresetRelaxed: "Wide",
+    gapXPresetExtraRelaxed: "Very wide",
+    gapXPresetMax: "Max",
+
+    alignItemsLabel: "Column vertical alignment",
+    alignItemsAria: "Section column vertical alignment",
+    alignItemsOptionTop: "Top",
+    alignItemsOptionCenter: "Center",
+    alignItemsOptionBottom: "Bottom",
+  },
+  ko: {
+    backgroundColorLabel: "배경 색상",
+    backgroundColorPickerAria: "섹션 배경 색상 선택",
+    backgroundColorHexAria: "섹션 배경 색상 HEX 입력",
+
+    backgroundImageSourceLabel: "배경 이미지 소스",
+    backgroundImageSourceAria: "배경 이미지 소스",
+    backgroundImageSourceOptionNone: "없음",
+    backgroundImageSourceOptionUrl: "URL",
+    backgroundImageSourceOptionUpload: "파일 업로드",
+
+    backgroundImageUrlLabel: "배경 이미지 URL",
+    backgroundImageUrlAria: "배경 이미지 URL",
+
+    backgroundImageUploadLabel: "배경 이미지 파일 업로드",
+    backgroundImageUploadAria: "배경 이미지 파일 업로드",
+
+    backgroundImagePositionModeLabel: "배경 이미지 위치 모드",
+    backgroundImagePositionModeAria: "배경 이미지 위치 모드",
+    backgroundImagePositionModeOptionPreset: "프리셋",
+    backgroundImagePositionModeOptionCustom: "커스텀 (X/Y)",
+
+    backgroundImageSizeLabel: "배경 이미지 크기",
+    backgroundImageSizeAria: "배경 이미지 크기",
+
+    backgroundImagePositionLabel: "배경 이미지 위치",
+    backgroundImagePositionAria: "배경 이미지 위치",
+    backgroundImagePositionOptionCenter: "가운데",
+    backgroundImagePositionOptionTop: "위",
+    backgroundImagePositionOptionBottom: "아래",
+    backgroundImagePositionOptionLeft: "왼쪽",
+    backgroundImagePositionOptionRight: "오른쪽",
+
+    backgroundImagePositionXLabel: "배경 이미지 가로 위치",
+    backgroundImagePositionYLabel: "배경 이미지 세로 위치",
+
+    backgroundImageRepeatLabel: "배경 이미지 반복",
+    backgroundImageRepeatAria: "배경 이미지 반복",
+    backgroundImageRepeatOptionNone: "반복 없음",
+    backgroundImageRepeatOptionBoth: "가로/세로 반복",
+    backgroundImageRepeatOptionX: "가로 반복",
+    backgroundImageRepeatOptionY: "세로 반복",
+
+    backgroundVideoSourceLabel: "배경 비디오 소스",
+    backgroundVideoSourceAria: "배경 비디오 소스",
+    backgroundVideoSourceOptionNone: "없음",
+    backgroundVideoSourceOptionUrl: "URL",
+    backgroundVideoSourceOptionUpload: "파일 업로드",
+
+    backgroundVideoUrlLabel: "배경 비디오 URL",
+    backgroundVideoUrlAria: "배경 비디오 URL",
+
+    backgroundVideoUploadLabel: "배경 비디오 파일 업로드",
+    backgroundVideoUploadAria: "배경 비디오 파일 업로드",
+
+    paddingYLabel: "세로 패딩",
+    paddingYUnitLabel: "(px)",
+    paddingYPresetExtraTight: "매우 좁게",
+    paddingYPresetTight: "좁게",
+    paddingYPresetNormal: "보통",
+    paddingYPresetRelaxed: "넓게",
+    paddingYPresetExtraRelaxed: "아주 넓게",
+
+    layoutSectionTitle: "섹션 레이아웃",
+    columnLayoutLabel: "섹션 컬럼 레이아웃",
+    columnLayoutAria: "섹션 컬럼 레이아웃",
+    columnLayoutOptionOneFull: "1열 (1/1)",
+    columnLayoutOptionTwoEqual: "2열 (1/2 - 1/2)",
+    columnLayoutOptionTwoOneTwo: "2열 (1/3 - 2/3)",
+    columnLayoutOptionTwoTwoOne: "2열 (2/3 - 1/3)",
+    columnLayoutOptionThreeEqual: "3열 (1/3 - 1/3 - 1/3)",
+    columnLayoutOptionCustom: "직접 조정",
+
+    maxWidthLabel: "최대 폭 (px)",
+    maxWidthUnitLabel: "(px)",
+    maxWidthPresetExtraNarrow: "매우 좁게",
+    maxWidthPresetNarrow: "좁게",
+    maxWidthPresetNormal: "보통",
+    maxWidthPresetWide: "넓게",
+    maxWidthPresetExtraWide: "아주 넓게",
+
+    gapXLabel: "컬럼 간 간격 (px)",
+    gapXUnitLabel: "(px)",
+    gapXPresetZero: "0",
+    gapXPresetTight: "좁게",
+    gapXPresetNormal: "보통",
+    gapXPresetRelaxed: "넓게",
+    gapXPresetExtraRelaxed: "아주 넓게",
+    gapXPresetMax: "최대",
+
+    alignItemsLabel: "컬럼 세로 정렬",
+    alignItemsAria: "섹션 컬럼 세로 정렬",
+    alignItemsOptionTop: "위",
+    alignItemsOptionCenter: "가운데",
+    alignItemsOptionBottom: "아래",
+  },
+};
+
+export function getEditorSectionPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorSectionPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_SECTION_PANEL_MESSAGES[key] ?? EDITOR_SECTION_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorSidebar.broken.ts.bak b/src/features/i18n/messages/editorSidebar.broken.ts.bak
new file mode 100644
index 0000000000000000000000000000000000000000..0cf0f2623d4bcf6d9e20314ef2f057074e9ada50
GIT binary patch
literal 4835
zcma)AZ*SW~80U39#pzz4RIKX@ULdu=l%~n3)M=v$yqTuSNiMBb+n3r7YPD6`v;>u|
zuniSdLE5Fz{Q*Uyf&rP<iSHAizXOl$JJ)CX2(N74^Y@;6?)SU1Zg!~cB6qt(&>d9j
zbXI6nGYHy2ZJU}1U%otNgd=#NphvoQ&{CyZ`fR0sd*yn$v{K2{Es(7X$CZ}uQoE+N
zNJF!)5y#Qih=V>tcM1qK!2O0(*Ik3mBgeIMYi;3Tm~6S((Z#OoQY$;YY=YnH@aGVh
zW`~#bFF;^t1uMFf6SPK}t}aJyQ`^jD9*&l&<=WIRWdEUP+3Iv9|KVtj7!V+tOgOx%
zwR9=>$oo2JZZzmtQr#tH$Ix7oO(>RJwQ0BW39)I})pAWkg&=ieNvX&l>ULKykSwlJ
z>dMm=@*wnz)*wb+@IbgkoTjaJ(sdU0khansWK*oGM02|~ag;8E!ZbhHrrL$JImP;h
ztv8{?l^(c!ikC%$s$B%aDfV^ZxVlL#T{G16NGeVBr<uwr)rn?Kv5$I2=^+y5`q)`0
z6q?j>TvS<Fu3ulhU0YtNES6SpU#rw=rK^?NJX$49YPUX&vF#Gd#iNfoAQ3>80GLwH
zgrTeeRQOU-6v7j(!$TSu0EMF$Nyb46hfhhuaSDe|NfJX9=5LZT!Ydp+r12QBFn{CH
z5JEWM;woSm0_-ti%ZtfH7?VJ-NDIo$F)itc!x;{rsI3#Dl@tqHgB${Y%PMe$!{HOH
z1rU|AFUL@a#jB(wutC5cEC$Cx?j=@`(GLfBgWhR;fXek!u4;^fn7<(>q5x4Q*)vB)
z96r&zNNdopSPxlK03=j3KuXXxb*GuiA%T@qs=`N(p0qJ=opxqvd$t2yh}MHi^0ZNL
zooFpXw+MO<Io*Z}T?=oGkW6P%ZZDt~Lw%4Ucp7wZSu>1Tm(FS-SE3@=&WQM_2m)>S
zrpMx26-&rdlU=t7nQc;|Yg(wy5ndHB25wv}eX5L;f^b~5$z~UJhp~+`XM?m5d;xj_
z=Aa_@QO!>VddxpnQS)FwwgFy;V0;-<WlS(ZfKY3y02xw<v^x}#(*WcEPEtfj(tud3
z<d`aAQb%62GMpc%37zjIXh<17W)|4mnyHSKBAH0rBxZxys^UqsBetWW*K;@s-w5_t
zJKDv`<=F{HVgt@?c|78c54@8jzKo6N^c(Sr-~XEJo%(xYNf?uf_j}LZJC|gFOxV#Y
z@3%2~aZi#8Lh)Yryn_RFcq&ORNM-Wp$os3udP7OhX~la!%1NpwPQ#e>UbFrox0I;G
ze{_!64+rea{iHMiQ*koJp~{<=FlF!L)O$KgDhgs@$9-@3tQdX@m<r>>)WZ7ryx~{i
zq!<lJT7qA^hcDR?B-9)F4~~lAsH7*@WgcPg;VC<PB2<MyXp8=c8OQGr{DXb(`9D1S
zSRutY{_!sR{*`w!_@A`H-X8k>$80==OcFJg-3!`b4~O1QXLC^O$=M(`k*I-Tdj6BK
z-#eR|jL-ZBqG5#74DF~U7bwcR+W+Pd+7NmWu?P2|+9*)rsiUHQ{|vF=!29(V;2hQ)
zc;o%J-C-o^?R1G#ETqaMLqqKCz~3FQ?@pjIBM!=~pr90iYEThx?-^2s5$f`^-)C<|
z-qUl$jiUv~U$Lr8K*~6224csL+0W<58@=)N4iI~>>y5?{_2f<~#XPVY{<pizS>-Yh
zY}?6r7uIVo=<MSG`mbpvDJTTD!Q}6;GG3O55;l)G)*$E;0LlC^CW%EXo&RGG7C;#^
zX(BJ*<d5Ox><C5n#iZVhDtd~LRLhvT_F#V>_C~lt^IhlCk;;7@A6;z0Xpbku04D`^
zCH`Bc-L;}4+8S|lZ$riCug`qqm(X2gbqxdEMO~{!+Hj6+&CKUtr9$3=>jIoDHpn*I
utGG9G<x1+`(F~laE<yx9ery7_bW3%cy9xeo1#T3#y_@o{sap$$ox;B!<OV7L

literal 0
HcmV?d00001

diff --git a/src/features/i18n/messages/editorSidebar.ts b/src/features/i18n/messages/editorSidebar.ts
new file mode 100644
index 0000000..baa5bee
--- /dev/null
+++ b/src/features/i18n/messages/editorSidebar.ts
@@ -0,0 +1,128 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorSidebarMessages = {
+  blocksTitle: string;
+  blocksText: string;
+  blocksButton: string;
+  blocksImage: string;
+  blocksVideo: string;
+  blocksDivider: string;
+  blocksList: string;
+  blocksSection: string;
+  formsTitle: string;
+  formsController: string;
+  formsInput: string;
+  formsSelect: string;
+  formsRadio: string;
+  formsCheckbox: string;
+  templatesTitle: string;
+  templatesGroupHeroCta: string;
+  templatesGroupContent: string;
+  templatesGroupTrust: string;
+  templatesGroupFooter: string;
+  templateHeroLabel: string;
+  templateHeroDescription: string;
+  templateCtaLabel: string;
+  templateCtaDescription: string;
+  templateFeaturesLabel: string;
+  templateFeaturesDescription: string;
+  templateFaqLabel: string;
+  templateFaqDescription: string;
+  templatePricingLabel: string;
+  templatePricingDescription: string;
+  templateBlogLabel: string;
+  templateBlogDescription: string;
+  templateTestimonialsLabel: string;
+  templateTestimonialsDescription: string;
+  templateTeamLabel: string;
+  templateTeamDescription: string;
+  templateFooterLabel: string;
+  templateFooterDescription: string;
+};
+
+const EDITOR_SIDEBAR_MESSAGES: Record<AppLocale, EditorSidebarMessages> = {
+  en: {
+    blocksTitle: "Blocks",
+    blocksText: "Text",
+    blocksButton: "Button",
+    blocksImage: "Image",
+    blocksVideo: "Video",
+    blocksDivider: "Divider",
+    blocksList: "List",
+    blocksSection: "Section",
+    formsTitle: "Form elements",
+    formsController: "Form controller",
+    formsInput: "Input field",
+    formsSelect: "Select field",
+    formsRadio: "Radio group",
+    formsCheckbox: "Checkbox group",
+    templatesTitle: "Templates",
+    templatesGroupHeroCta: "Hero · CTA",
+    templatesGroupContent: "Content sections",
+    templatesGroupTrust: "Trust & about",
+    templatesGroupFooter: "Footer & misc",
+    templateHeroLabel: "Hero template",
+    templateHeroDescription: "Top-of-page hero section (headline + subtext + button)",
+    templateCtaLabel: "CTA template",
+    templateCtaDescription: "Call-to-action (CTA) section",
+    templateFeaturesLabel: "Features template",
+    templateFeaturesDescription: "Three-column features section",
+    templateFaqLabel: "FAQ template",
+    templateFaqDescription: "Frequently asked questions (FAQ) section",
+    templatePricingLabel: "Pricing template",
+    templatePricingDescription: "Pricing plans section",
+    templateBlogLabel: "Blog template",
+    templateBlogDescription: "Blog post listing section",
+    templateTestimonialsLabel: "Testimonials template",
+    templateTestimonialsDescription: "Customer testimonials section",
+    templateTeamLabel: "Team template",
+    templateTeamDescription: "Team members section",
+    templateFooterLabel: "Footer template",
+    templateFooterDescription: "Page footer section",
+  },
+  ko: {
+    blocksTitle: "블록",
+    blocksText: "텍스트",
+    blocksButton: "버튼",
+    blocksImage: "이미지",
+    blocksVideo: "비디오",
+    blocksDivider: "구분선",
+    blocksList: "리스트",
+    blocksSection: "섹션",
+    formsTitle: "폼 요소",
+    formsController: "폼 컨트롤러",
+    formsInput: "입력(Input)",
+    formsSelect: "셀렉트(Select)",
+    formsRadio: "단일 선택(Radio)",
+    formsCheckbox: "다중 선택(Checkbox)",
+    templatesTitle: "템플릿",
+    templatesGroupHeroCta: "히어로 · CTA",
+    templatesGroupContent: "콘텐츠 섹션",
+    templatesGroupTrust: "신뢰/소개",
+    templatesGroupFooter: "푸터/기타",
+    templateHeroLabel: "Hero 템플릿",
+    templateHeroDescription: "페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)",
+    templateCtaLabel: "CTA 템플릿",
+    templateCtaDescription: "콜투액션(CTA) 섹션",
+    templateFeaturesLabel: "기능 템플릿",
+    templateFeaturesDescription: "3컬럼 기능 소개 섹션",
+    templateFaqLabel: "FAQ 템플릿",
+    templateFaqDescription: "자주 묻는 질문(FAQ) 섹션",
+    templatePricingLabel: "상품 템플릿",
+    templatePricingDescription: "요금제/플랜 소개 섹션",
+    templateBlogLabel: "블로그 템플릿",
+    templateBlogDescription: "블로그 포스트 목록 섹션",
+    templateTestimonialsLabel: "후기 템플릿",
+    templateTestimonialsDescription: "고객 후기(Testimonials) 섹션",
+    templateTeamLabel: "Team 템플릿",
+    templateTeamDescription: "팀 소개 섹션",
+    templateFooterLabel: "Footer 템플릿",
+    templateFooterDescription: "페이지 푸터 섹션",
+  },
+};
+
+export function getEditorSidebarMessages(locale: AppLocale | null | undefined): EditorSidebarMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_SIDEBAR_MESSAGES[key] ?? EDITOR_SIDEBAR_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorTemplates.ts b/src/features/i18n/messages/editorTemplates.ts
new file mode 100644
index 0000000..089ed88
--- /dev/null
+++ b/src/features/i18n/messages/editorTemplates.ts
@@ -0,0 +1,291 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorHeroTemplateMessages = {
+  headline: string;
+  subheadline: string;
+  primaryButtonLabel: string;
+};
+
+export type EditorFeaturesTemplateMessages = {
+  itemTitlePrefix: string;
+  itemTitleSuffix: string;
+  itemDescription: string;
+};
+
+export type EditorCtaTemplateMessages = {
+  body: string;
+  buttonLabel: string;
+};
+
+export type EditorFaqTemplateMessages = {
+  title: string;
+  subtitle: string;
+  items: Array<{
+    question: string;
+    answer: string;
+  }>;
+};
+
+export type EditorPricingTemplateMessages = {
+  plans: Array<{
+    name: string;
+    price: string;
+    popular?: boolean;
+  }>;
+  featuresText: string;
+  primaryButtonLabel: string;
+  secondaryButtonLabel: string;
+};
+
+export type EditorTeamTemplateMessages = {
+  members: Array<{
+    name: string;
+    role: string;
+    bio: string;
+  }>;
+};
+
+export type EditorTestimonialsTemplateMessages = {
+  items: Array<{
+    body: string;
+    author: string;
+  }>;
+};
+
+export type EditorBlogTemplateMessages = {
+  posts: Array<{
+    title: string;
+    summary: string;
+  }>;
+};
+
+export type EditorFooterTemplateMessages = {
+  description: string;
+  linksText: string;
+};
+
+export type EditorTemplatesMessages = {
+  hero: EditorHeroTemplateMessages;
+  features: EditorFeaturesTemplateMessages;
+  cta: EditorCtaTemplateMessages;
+  faq: EditorFaqTemplateMessages;
+  pricing: EditorPricingTemplateMessages;
+  team: EditorTeamTemplateMessages;
+  testimonials: EditorTestimonialsTemplateMessages;
+  blog: EditorBlogTemplateMessages;
+  footer: EditorFooterTemplateMessages;
+};
+
+const EDITOR_TEMPLATES_MESSAGES: Record<AppLocale, EditorTemplatesMessages> = {
+  en: {
+    hero: {
+      headline: "Your hero headline goes here",
+      subheadline: "Describe your product or service in a single, clear sentence.",
+      primaryButtonLabel: "Get started now",
+    },
+    features: {
+      itemTitlePrefix: "Feature",
+      itemTitleSuffix: "",
+      itemDescription: "A short description of this feature.",
+    },
+    cta: {
+      body:
+        "Write a compelling CTA message here.\nDon't hesitate to get started!",
+      buttonLabel: "Call to action",
+    },
+    faq: {
+      title: "FAQ",
+      subtitle: "Frequently asked questions",
+      items: [
+        {
+          question: "How much does the service cost?",
+          answer:
+            "The core features are free, and premium features are available with a monthly subscription.",
+        },
+        {
+          question: "What is your refund policy?",
+          answer:
+            "If there is no usage within 7 days after purchase, you can request a full refund.",
+        },
+        {
+          question: "Can I invite teammates?",
+          answer:
+            "Yes, team invitations are available on Pro plans and above.",
+        },
+      ],
+    },
+    pricing: {
+      plans: [
+        { name: "Basic", price: "$9/month" },
+        { name: "Pro", price: "$29/month", popular: true },
+        { name: "Enterprise", price: "Contact us" },
+      ],
+      featuresText: "• All core features\n• Email support\n• 1GB storage",
+      primaryButtonLabel: "Start now",
+      secondaryButtonLabel: "Choose plan",
+    },
+    team: {
+      members: [
+        {
+          name: "Alex Kim",
+          role: "Product Designer",
+          bio: "Designs thoughtful user experiences.",
+        },
+        {
+          name: "Jamie Lee",
+          role: "Frontend Engineer",
+          bio: "Builds clean, accessible UIs.",
+        },
+        {
+          name: "Chris Park",
+          role: "Backend Engineer",
+          bio: "Keeps the infrastructure fast and reliable.",
+        },
+      ],
+    },
+    testimonials: {
+      items: [
+        {
+          body: "This builder dramatically reduced the time we spend creating landing pages.",
+          author: "Alex Kim",
+        },
+        {
+          body: "Even without strong design skills, we can still launch clean, modern pages.",
+          author: "Jamie Lee",
+        },
+        {
+          body: "Our whole team is happy with this builder.",
+          author: "Chris Park",
+        },
+      ],
+    },
+    blog: {
+      posts: [
+        {
+          title: "Blog post 1",
+          summary: "Write a short summary for your first post here.",
+        },
+        {
+          title: "Blog post 2",
+          summary: "Write a short summary for your second post here.",
+        },
+        {
+          title: "Blog post 3",
+          summary: "Write a short summary for your third post here.",
+        },
+      ],
+    },
+    footer: {
+      description: "The best choice for building better websites.",
+      linksText: "Product\nPricing\nSupport\nContact",
+    },
+  },
+  ko: {
+    hero: {
+      headline: "Hero 제목을 여기에 입력하세요",
+      subheadline: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
+      primaryButtonLabel: "지금 시작하기",
+    },
+    features: {
+      itemTitlePrefix: "Feature",
+      itemTitleSuffix: " 제목",
+      itemDescription: "해당 기능을 간단히 설명하는 텍스트입니다.",
+    },
+    cta: {
+      body:
+        "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.\n망설이지 말고 시작하세요!",
+      buttonLabel: "CTA 버튼",
+    },
+    faq: {
+      title: "FAQ",
+      subtitle: "자주 묻는 질문",
+      items: [
+        {
+          question: "서비스 이용료는 얼마인가요?",
+          answer: "기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.",
+        },
+        {
+          question: "환불 정책은 어떻게 되나요?",
+          answer: "결제 후 7일 이내에 사용 이력이 없는 경우 전액 환불 가능합니다.",
+        },
+        {
+          question: "팀원 초대 기능이 있나요?",
+          answer: "네, 프로 요금제 이상부터 팀원 초대가 가능합니다.",
+        },
+      ],
+    },
+    pricing: {
+      plans: [
+        { name: "Basic", price: "₩9,900/월" },
+        { name: "Pro", price: "₩29,900/월", popular: true },
+        { name: "Enterprise", price: "문의" },
+      ],
+      featuresText: "• 모든 기본 기능\n• 이메일 지원\n• 1GB 스토리지",
+      primaryButtonLabel: "시작하기",
+      secondaryButtonLabel: "선택하기",
+    },
+    team: {
+      members: [
+        {
+          name: "홍길동",
+          role: "Product Designer",
+          bio: "사용자 경험을 설계합니다.",
+        },
+        {
+          name: "김영희",
+          role: "Frontend Engineer",
+          bio: "깔끔한 UI를 구현합니다.",
+        },
+        {
+          name: "이철수",
+          role: "Backend Engineer",
+          bio: "안정적인 인프라를 책임집니다.",
+        },
+      ],
+    },
+    testimonials: {
+      items: [
+        {
+          body: "이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.",
+          author: "홍길동",
+        },
+        {
+          body: "디자인을 잘 못해도 깔끔한 페이지를 만들 수 있어요.",
+          author: "김영희",
+        },
+        {
+          body: "팀 전체가 만족하는 빌더입니다.",
+          author: "이철수",
+        },
+      ],
+    },
+    blog: {
+      posts: [
+        {
+          title: "블로그 포스트 1",
+          summary: "첫 번째 포스트 요약을 여기에 입력하세요.",
+        },
+        {
+          title: "블로그 포스트 2",
+          summary: "두 번째 포스트 요약을 여기에 입력하세요.",
+        },
+        {
+          title: "블로그 포스트 3",
+          summary: "세 번째 포스트 요약을 여기에 입력하세요.",
+        },
+      ],
+    },
+    footer: {
+      description: "더 나은 웹사이트를 위한 최고의 선택.",
+      linksText: "서비스 소개\n요금제\n고객지원\n문의하기",
+    },
+  },
+};
+
+export function getEditorTemplatesMessages(
+  locale: AppLocale | null | undefined,
+): EditorTemplatesMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_TEMPLATES_MESSAGES[key] ?? EDITOR_TEMPLATES_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorTextPanel.ts b/src/features/i18n/messages/editorTextPanel.ts
new file mode 100644
index 0000000..c5619f1
--- /dev/null
+++ b/src/features/i18n/messages/editorTextPanel.ts
@@ -0,0 +1,160 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorTextPanelMessages = {
+  selectedTextLabel: string;
+  selectedTextAria: string;
+  alignLabel: string;
+  alignAria: string;
+  alignOptionLeft: string;
+  alignOptionCenter: string;
+  alignOptionRight: string;
+  textStyleLabel: string;
+  underlineLabel: string;
+  strikeLabel: string;
+  italicLabel: string;
+  fontSizeLabel: string;
+  fontSizeUnitLabel: string;
+  letterSpacingLabel: string;
+  letterSpacingPresetAria: string;
+  letterSpacingSliderAria: string;
+  letterSpacingInputAria: string;
+  letterSpacingPresetTighter: string;
+  letterSpacingPresetTight: string;
+  letterSpacingPresetNormal: string;
+  letterSpacingPresetWide: string;
+  letterSpacingPresetWider: string;
+  lineHeightLabel: string;
+  lineHeightPresetTight: string;
+  lineHeightPresetSnug: string;
+  lineHeightPresetNormal: string;
+  lineHeightPresetRelaxed: string;
+  lineHeightPresetLoose: string;
+  fontWeightLabel: string;
+  fontWeightPresetNormal: string;
+  fontWeightPresetMedium: string;
+  fontWeightPresetSemibold: string;
+  fontWeightPresetBold: string;
+  textColorLabel: string;
+  textColorPickerAria: string;
+  textColorHexAria: string;
+  backgroundColorLabel: string;
+  backgroundColorPickerAria: string;
+  backgroundColorHexAria: string;
+  maxWidthLabel: string;
+  maxWidthPresetAria: string;
+  maxWidthSliderAria: string;
+  maxWidthCustomAria: string;
+  maxWidthPlaceholder: string;
+  maxWidthPresetNone: string;
+  maxWidthPresetProse: string;
+  maxWidthPresetNarrow: string;
+};
+
+const EDITOR_TEXT_PANEL_MESSAGES: Record<AppLocale, EditorTextPanelMessages> = {
+  en: {
+    selectedTextLabel: "Selected text block content",
+    selectedTextAria: "Selected text block content",
+    alignLabel: "Alignment",
+    alignAria: "Alignment",
+    alignOptionLeft: "Left",
+    alignOptionCenter: "Center",
+    alignOptionRight: "Right",
+    textStyleLabel: "Text style",
+    underlineLabel: "Underline",
+    strikeLabel: "Strikethrough",
+    italicLabel: "Italic",
+    fontSizeLabel: "Font size",
+    fontSizeUnitLabel: "(px)",
+    letterSpacingLabel: "Letter spacing",
+    letterSpacingPresetAria: "Letter spacing preset",
+    letterSpacingSliderAria: "Letter spacing slider",
+    letterSpacingInputAria: "Letter spacing custom (px)",
+    letterSpacingPresetTighter: "Very tight",
+    letterSpacingPresetTight: "Tight",
+    letterSpacingPresetNormal: "Normal",
+    letterSpacingPresetWide: "Wide",
+    letterSpacingPresetWider: "Very wide",
+    lineHeightLabel: "Line height",
+    lineHeightPresetTight: "Tight",
+    lineHeightPresetSnug: "Slightly tight",
+    lineHeightPresetNormal: "Normal",
+    lineHeightPresetRelaxed: "Relaxed",
+    lineHeightPresetLoose: "Loose",
+    fontWeightLabel: "Weight",
+    fontWeightPresetNormal: "Regular",
+    fontWeightPresetMedium: "Medium",
+    fontWeightPresetSemibold: "Semibold",
+    fontWeightPresetBold: "Bold",
+    textColorLabel: "Text color",
+    textColorPickerAria: "Text color picker",
+    textColorHexAria: "Text color HEX",
+    backgroundColorLabel: "Block background color",
+    backgroundColorPickerAria: "Text block background color picker",
+    backgroundColorHexAria: "Text block background color HEX",
+    maxWidthLabel: "Max width",
+    maxWidthPresetAria: "Max width preset",
+    maxWidthSliderAria: "Max width slider (ch)",
+    maxWidthCustomAria: "Max width custom",
+    maxWidthPlaceholder: "e.g. 600px, 40rem, 80%, 60ch",
+    maxWidthPresetNone: "No limit",
+    maxWidthPresetProse: "Body width (60ch)",
+    maxWidthPresetNarrow: "Narrow (40ch)",
+  },
+  ko: {
+    selectedTextLabel: "선택한 텍스트 블록 내용",
+    selectedTextAria: "선택한 텍스트 블록 내용",
+    alignLabel: "정렬",
+    alignAria: "정렬",
+    alignOptionLeft: "왼쪽",
+    alignOptionCenter: "가운데",
+    alignOptionRight: "오른쪽",
+    textStyleLabel: "텍스트 스타일",
+    underlineLabel: "밑줄",
+    strikeLabel: "가운데줄",
+    italicLabel: "이탤릭",
+    fontSizeLabel: "글자 크기",
+    fontSizeUnitLabel: "(px)",
+    letterSpacingLabel: "글자 간격",
+    letterSpacingPresetAria: "글자 간격 프리셋",
+    letterSpacingSliderAria: "글자 간격 슬라이더",
+    letterSpacingInputAria: "글자 간격 커스텀 (px)",
+    letterSpacingPresetTighter: "아주 좁게",
+    letterSpacingPresetTight: "좁게",
+    letterSpacingPresetNormal: "보통",
+    letterSpacingPresetWide: "넓게",
+    letterSpacingPresetWider: "아주 넓게",
+    lineHeightLabel: "줄 간격",
+    lineHeightPresetTight: "좁게",
+    lineHeightPresetSnug: "약간 좁게",
+    lineHeightPresetNormal: "보통",
+    lineHeightPresetRelaxed: "넓게",
+    lineHeightPresetLoose: "아주 넓게",
+    fontWeightLabel: "굵기",
+    fontWeightPresetNormal: "보통",
+    fontWeightPresetMedium: "중간",
+    fontWeightPresetSemibold: "세미볼드",
+    fontWeightPresetBold: "볼드",
+    textColorLabel: "텍스트 색상",
+    textColorPickerAria: "텍스트 색상 피커",
+    textColorHexAria: "텍스트 색상 HEX",
+    backgroundColorLabel: "블록 배경색",
+    backgroundColorPickerAria: "텍스트 블록 배경색 피커",
+    backgroundColorHexAria: "텍스트 블록 배경색 HEX",
+    maxWidthLabel: "최대 너비",
+    maxWidthPresetAria: "최대 너비 프리셋",
+    maxWidthSliderAria: "최대 너비 슬라이더 (ch 단위)",
+    maxWidthCustomAria: "최대 너비 커스텀",
+    maxWidthPlaceholder: "예: 600px, 40rem, 80%, 60ch",
+    maxWidthPresetNone: "제한 없음",
+    maxWidthPresetProse: "본문 폭 (60ch)",
+    maxWidthPresetNarrow: "좁게 (40ch)",
+  },
+};
+
+export function getEditorTextPanelMessages(
+  locale: AppLocale | null | undefined,
+): EditorTextPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_TEXT_PANEL_MESSAGES[key] ?? EDITOR_TEXT_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/editorVideoPanel.ts b/src/features/i18n/messages/editorVideoPanel.ts
new file mode 100644
index 0000000..cbe2b4f
--- /dev/null
+++ b/src/features/i18n/messages/editorVideoPanel.ts
@@ -0,0 +1,215 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type EditorVideoPanelMessages = {
+  sourceLabel: string;
+  sourceAria: string;
+  sourceOptionUrl: string;
+  sourceOptionUpload: string;
+
+  urlLabel: string;
+  urlAria: string;
+
+  titleLabel: string;
+  titleAria: string;
+
+  ariaLabelLabel: string;
+  ariaLabelAria: string;
+
+  captionTextLabel: string;
+  captionTextAria: string;
+
+  posterImageUrlLabel: string;
+  posterImageUrlAria: string;
+
+  uploadLabel: string;
+  uploadAria: string;
+
+  styleSectionTitle: string;
+
+  cardBackgroundLabel: string;
+  cardBackgroundPickerAria: string;
+  cardBackgroundHexAria: string;
+
+  alignLabel: string;
+  alignAria: string;
+  alignOptionLeft: string;
+  alignOptionCenter: string;
+  alignOptionRight: string;
+
+  widthModeLabel: string;
+  widthModeAria: string;
+  widthModeOptionAuto: string;
+  widthModeOptionFull: string;
+  widthModeOptionFixed: string;
+
+  fixedWidthLabel: string;
+  fixedWidthUnitLabel: string;
+  fixedWidthPresetSmall: string;
+  fixedWidthPresetMedium: string;
+  fixedWidthPresetLarge: string;
+
+  cardPaddingLabel: string;
+  cardPaddingUnitLabel: string;
+
+  cardBorderRadiusLabel: string;
+  cardBorderRadiusUnitLabel: string;
+
+  startTimeLabel: string;
+  startTimeUnitLabel: string;
+
+  endTimeLabel: string;
+  endTimeUnitLabel: string;
+
+  aspectRatioLabel: string;
+  aspectRatioAria: string;
+
+  autoplayLabel: string;
+  loopLabel: string;
+  mutedLabel: string;
+  controlsLabel: string;
+};
+
+const EDITOR_VIDEO_PANEL_MESSAGES: Record<AppLocale, EditorVideoPanelMessages> = {
+  en: {
+    sourceLabel: "Video source",
+    sourceAria: "Video source",
+    sourceOptionUrl: "URL",
+    sourceOptionUpload: "File upload",
+
+    urlLabel: "Video URL",
+    urlAria: "Video URL",
+
+    titleLabel: "Video title",
+    titleAria: "Video title",
+
+    ariaLabelLabel: "Video aria-label",
+    ariaLabelAria: "Video aria-label",
+
+    captionTextLabel: "Video caption text",
+    captionTextAria: "Video caption text",
+
+    posterImageUrlLabel: "Poster image URL",
+    posterImageUrlAria: "Poster image URL",
+
+    uploadLabel: "Video file upload",
+    uploadAria: "Video file upload",
+
+    styleSectionTitle: "Video style",
+
+    cardBackgroundLabel: "Card background color",
+    cardBackgroundPickerAria: "Video card background color picker",
+    cardBackgroundHexAria: "Video card background color HEX",
+
+    alignLabel: "Video alignment",
+    alignAria: "Video alignment",
+    alignOptionLeft: "Left",
+    alignOptionCenter: "Center",
+    alignOptionRight: "Right",
+
+    widthModeLabel: "Video width mode",
+    widthModeAria: "Video width mode",
+    widthModeOptionAuto: "Fit to content",
+    widthModeOptionFull: "Full width",
+    widthModeOptionFixed: "Fixed width (px)",
+
+    fixedWidthLabel: "Fixed width (px)",
+    fixedWidthUnitLabel: "(px)",
+    fixedWidthPresetSmall: "Small",
+    fixedWidthPresetMedium: "Medium",
+    fixedWidthPresetLarge: "Wide",
+
+    cardPaddingLabel: "Card padding",
+    cardPaddingUnitLabel: "(px)",
+
+    cardBorderRadiusLabel: "Card border radius",
+    cardBorderRadiusUnitLabel: "(px)",
+
+    startTimeLabel: "Start time (sec)",
+    startTimeUnitLabel: "(sec)",
+
+    endTimeLabel: "End time (sec)",
+    endTimeUnitLabel: "(sec)",
+
+    aspectRatioLabel: "Video aspect ratio",
+    aspectRatioAria: "Video aspect ratio",
+
+    autoplayLabel: "Autoplay",
+    loopLabel: "Loop",
+    mutedLabel: "Muted",
+    controlsLabel: "Show controls",
+  },
+  ko: {
+    sourceLabel: "비디오 소스",
+    sourceAria: "비디오 소스",
+    sourceOptionUrl: "URL",
+    sourceOptionUpload: "파일 업로드",
+
+    urlLabel: "비디오 URL",
+    urlAria: "비디오 URL",
+
+    titleLabel: "비디오 제목",
+    titleAria: "비디오 제목",
+
+    ariaLabelLabel: "비디오 aria-label",
+    ariaLabelAria: "비디오 aria-label",
+
+    captionTextLabel: "비디오 캡션 텍스트",
+    captionTextAria: "비디오 캡션 텍스트",
+
+    posterImageUrlLabel: "포스터 이미지 URL",
+    posterImageUrlAria: "포스터 이미지 URL",
+
+    uploadLabel: "비디오 파일 업로드",
+    uploadAria: "비디오 파일 업로드",
+
+    styleSectionTitle: "비디오 스타일",
+
+    cardBackgroundLabel: "카드 배경색",
+    cardBackgroundPickerAria: "비디오 카드 배경색 피커",
+    cardBackgroundHexAria: "비디오 카드 배경색 HEX",
+
+    alignLabel: "비디오 정렬",
+    alignAria: "비디오 정렬",
+    alignOptionLeft: "왼쪽",
+    alignOptionCenter: "가운데",
+    alignOptionRight: "오른쪽",
+
+    widthModeLabel: "비디오 너비 모드",
+    widthModeAria: "비디오 너비 모드",
+    widthModeOptionAuto: "내용에 맞춤",
+    widthModeOptionFull: "가로 전체",
+    widthModeOptionFixed: "고정 너비 (px)",
+
+    fixedWidthLabel: "고정 너비 (px)",
+    fixedWidthUnitLabel: "(px)",
+    fixedWidthPresetSmall: "작게",
+    fixedWidthPresetMedium: "보통",
+    fixedWidthPresetLarge: "넓게",
+
+    cardPaddingLabel: "카드 패딩",
+    cardPaddingUnitLabel: "(px)",
+
+    cardBorderRadiusLabel: "카드 모서리 둥글기",
+    cardBorderRadiusUnitLabel: "(px)",
+
+    startTimeLabel: "시작 시점 (초)",
+    startTimeUnitLabel: "(초)",
+
+    endTimeLabel: "종료 시점 (초)",
+    endTimeUnitLabel: "(초)",
+
+    aspectRatioLabel: "화면 비율",
+    aspectRatioAria: "화면 비율",
+
+    autoplayLabel: "자동 재생",
+    loopLabel: "반복 재생",
+    mutedLabel: "음소거",
+    controlsLabel: "재생 컨트롤 표시",
+  },
+};
+
+export function getEditorVideoPanelMessages(locale: AppLocale | null | undefined): EditorVideoPanelMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return EDITOR_VIDEO_PANEL_MESSAGES[key] ?? EDITOR_VIDEO_PANEL_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/preview.ts b/src/features/i18n/messages/preview.ts
new file mode 100644
index 0000000..6ae8b9b
--- /dev/null
+++ b/src/features/i18n/messages/preview.ts
@@ -0,0 +1,32 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type PreviewMessages = {
+  headerTitle: string;
+  headerDescription: string;
+  exportZipButtonLabel: string;
+  navProjects: string;
+  navBackToEditor: string;
+};
+
+const PREVIEW_MESSAGES: Record<AppLocale, PreviewMessages> = {
+  en: {
+    headerTitle: "Page Preview",
+    headerDescription: "Preview of the page built with the visual editor.",
+    exportZipButtonLabel: "Export as page files (ZIP)",
+    navProjects: "Projects",
+    navBackToEditor: "Back to editor",
+  },
+  ko: {
+    headerTitle: "Page Preview",
+    headerDescription: "빌더로 만든 페이지를 미리 보는 화면",
+    exportZipButtonLabel: "페이지 파일로 내보내기 (ZIP)",
+    navProjects: "프로젝트 목록",
+    navBackToEditor: "에디터로 돌아가기",
+  },
+};
+
+export function getPreviewMessages(locale: AppLocale | null | undefined): PreviewMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return PREVIEW_MESSAGES[key] ?? PREVIEW_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/projects.ts b/src/features/i18n/messages/projects.ts
new file mode 100644
index 0000000..5697ca4
--- /dev/null
+++ b/src/features/i18n/messages/projects.ts
@@ -0,0 +1,122 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type ProjectsMessages = {
+  headerTitle: string;
+  headerDescription: string;
+  errorFetchUnauthorized: string;
+  errorFetchGeneric: string;
+  errorDeleteSingle: string;
+  errorDeleteBulkAllFailed: string;
+  errorDeleteBulkSomeFailed: string;
+  confirmDeleteSingle: string;
+  confirmDeleteBulk: string;
+  emptyListMessage: string;
+  toolbarSelectedPrefix: string;
+  toolbarSelectedSuffix: string;
+  toolbarDeleteSelected: string;
+  toolbarCreateNew: string;
+  tableHeaderTitle: string;
+  tableHeaderSlug: string;
+  tableHeaderStatus: string;
+  tableHeaderCreatedAt: string;
+  tableHeaderUpdatedAt: string;
+  tableHeaderActions: string;
+  tableHeaderSelectAllAria: string;
+  tableRowSelectAriaSuffix: string;
+  actionEdit: string;
+  actionPreview: string;
+  actionViewSubmissions: string;
+  actionDelete: string;
+  pagerTotalPrefix: string;
+  pagerTotalCountSuffix: string;
+  pagerPrevLabel: string;
+  pagerNextLabel: string;
+};
+
+const PROJECTS_MESSAGES: Record<AppLocale, ProjectsMessages> = {
+  en: {
+    headerTitle: "Projects",
+    headerDescription: "See all saved projects at a glance.",
+    errorFetchUnauthorized:
+      "You need to be signed in to view your projects. Please log in again.",
+    errorFetchGeneric:
+      "An error occurred while loading your projects. Please try again later.",
+    errorDeleteSingle:
+      "An error occurred while deleting the project. Please try again later.",
+    errorDeleteBulkAllFailed:
+      "An error occurred while deleting the selected projects. Please try again later.",
+    errorDeleteBulkSomeFailed:
+      "Failed to delete some projects. Please refresh and review the list.",
+    confirmDeleteSingle:
+      "Delete this project? This cannot be undone and any local/auto-saved data will also be removed.",
+    confirmDeleteBulk:
+      "Delete all selected projects? This cannot be undone and any local/auto-saved data will also be removed.",
+    emptyListMessage: "No projects saved yet. Save a project from the editor to see it here.",
+    toolbarSelectedPrefix: "Selected projects: ",
+    toolbarSelectedSuffix: "",
+    toolbarDeleteSelected: "Delete selected",
+    toolbarCreateNew: "Create new project",
+    tableHeaderTitle: "Title",
+    tableHeaderSlug: "Address (slug)",
+    tableHeaderStatus: "Status",
+    tableHeaderCreatedAt: "Created at",
+    tableHeaderUpdatedAt: "Updated at",
+    tableHeaderActions: "Actions",
+    tableHeaderSelectAllAria: "Select all projects on current page",
+    tableRowSelectAriaSuffix: " (select)",
+    actionEdit: "Edit",
+    actionPreview: "Preview",
+    actionViewSubmissions: "Form submissions",
+    actionDelete: "Delete",
+    pagerTotalPrefix: "Total ",
+    pagerTotalCountSuffix: " items, ",
+    pagerPrevLabel: "Previous",
+    pagerNextLabel: "Next",
+  },
+  ko: {
+    headerTitle: "프로젝트 목록",
+    headerDescription: "저장된 프로젝트들을 한 눈에 볼 수 있는 목록",
+    errorFetchUnauthorized:
+      "프로젝트 목록을 불러오는 중 인증 오류가 발생했습니다. 다시 로그인해 주세요.",
+    errorFetchGeneric:
+      "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+    errorDeleteSingle:
+      "프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+    errorDeleteBulkAllFailed:
+      "선택한 프로젝트를 삭제하는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+    errorDeleteBulkSomeFailed:
+      "일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.",
+    confirmDeleteSingle:
+      "이 프로젝트를 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
+    confirmDeleteBulk:
+      "선택한 프로젝트를 모두 삭제할까요? 삭제 후에는 되돌릴 수 없습니다. (로컬 저장 및 자동저장 데이터도 함께 삭제됩니다.)",
+    emptyListMessage:
+      "아직 저장된 프로젝트가 없습니다. 에디터에서 프로젝트를 저장해 보세요.",
+    toolbarSelectedPrefix: "선택된 프로젝트: ",
+    toolbarSelectedSuffix: "개",
+    toolbarDeleteSelected: "선택 삭제",
+    toolbarCreateNew: "새 프로젝트 만들기",
+    tableHeaderTitle: "제목",
+    tableHeaderSlug: "주소(slug)",
+    tableHeaderStatus: "상태",
+    tableHeaderCreatedAt: "생성일",
+    tableHeaderUpdatedAt: "수정일",
+    tableHeaderActions: "액션",
+    tableHeaderSelectAllAria: "전체 선택",
+    tableRowSelectAriaSuffix: " 선택",
+    actionEdit: "편집",
+    actionPreview: "미리보기",
+    actionViewSubmissions: "폼 제출 내역",
+    actionDelete: "삭제",
+    pagerTotalPrefix: "전체 ",
+    pagerTotalCountSuffix: "개 중 ",
+    pagerPrevLabel: "이전",
+    pagerNextLabel: "다음",
+  },
+};
+
+export function getProjectsMessages(locale: AppLocale | null | undefined): ProjectsMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return PROJECTS_MESSAGES[key] ?? PROJECTS_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/publicPageRenderer.ts b/src/features/i18n/messages/publicPageRenderer.ts
new file mode 100644
index 0000000..6901291
--- /dev/null
+++ b/src/features/i18n/messages/publicPageRenderer.ts
@@ -0,0 +1,40 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type PublicPageRendererMessages = {
+  requiredFieldsPrefix: string;
+  submitSuccessDefault: string;
+  submitErrorDefault: string;
+
+  checkboxGroupLabelImageAltFallback: string;
+  checkboxOptionImageAltFallback: string;
+  radioOptionImageAltFallback: string;
+};
+
+const PUBLIC_PAGE_RENDERER_MESSAGES: Record<AppLocale, PublicPageRendererMessages> = {
+  en: {
+    requiredFieldsPrefix: "Please fill in the following required fields:",
+    submitSuccessDefault: "Submitted successfully.",
+    submitErrorDefault: "An error occurred while submitting.",
+
+    checkboxGroupLabelImageAltFallback: "Form group title",
+    checkboxOptionImageAltFallback: "Checkbox option",
+    radioOptionImageAltFallback: "Radio option",
+  },
+  ko: {
+    requiredFieldsPrefix: "다음 필수 항목을 입력해 주세요:",
+    submitSuccessDefault: "성공적으로 전송되었습니다.",
+    submitErrorDefault: "전송 중 오류가 발생했습니다.",
+
+    checkboxGroupLabelImageAltFallback: "폼 그룹 타이틀",
+    checkboxOptionImageAltFallback: "체크박스 옵션",
+    radioOptionImageAltFallback: "라디오 옵션",
+  },
+};
+
+export function getPublicPageRendererMessages(
+  locale: AppLocale | null | undefined,
+): PublicPageRendererMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return PUBLIC_PAGE_RENDERER_MESSAGES[key] ?? PUBLIC_PAGE_RENDERER_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/src/features/i18n/messages/submissions.ts b/src/features/i18n/messages/submissions.ts
new file mode 100644
index 0000000..0cad65d
--- /dev/null
+++ b/src/features/i18n/messages/submissions.ts
@@ -0,0 +1,70 @@
+import type { AppLocale } from "../locale";
+import { DEFAULT_LOCALE } from "../locale";
+
+export type SubmissionsMessages = {
+  headerTitle: string;
+  headerDescription: string;
+  errorUnauthorized: string;
+  errorGeneric: string;
+  errorLogout: string;
+  loadingText: string;
+  emptyText: string;
+  tableHeaderCreatedAt: string;
+  tableHeaderProject: string;
+  tableHeaderSlug: string;
+  tableHeaderName: string;
+  tableHeaderEmail: string;
+  tableHeaderPhone: string;
+  tableHeaderBirthdate: string;
+  tableHeaderOtherFields: string;
+};
+
+const SUBMISSIONS_MESSAGES: Record<AppLocale, SubmissionsMessages> = {
+  en: {
+    headerTitle: "All form submissions",
+    headerDescription:
+      "View form submissions across all projects for the current signed-in account.",
+    errorUnauthorized:
+      "You need to be signed in to view form submissions. Please log in again.",
+    errorGeneric:
+      "An error occurred while loading form submissions. Please try again later.",
+    errorLogout:
+      "An error occurred while logging out. Please try again later.",
+    loadingText: "Loading form submissions...",
+    emptyText: "No form submissions have been collected yet.",
+    tableHeaderCreatedAt: "Submitted at",
+    tableHeaderProject: "Project",
+    tableHeaderSlug: "Slug",
+    tableHeaderName: "Name",
+    tableHeaderEmail: "Email",
+    tableHeaderPhone: "Phone",
+    tableHeaderBirthdate: "Birthdate",
+    tableHeaderOtherFields: "Other fields",
+  },
+  ko: {
+    headerTitle: "전체 폼 제출 내역",
+    headerDescription:
+      "로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.",
+    errorUnauthorized:
+      "폼 제출 내역을 조회하려면 로그인이 필요합니다. 다시 로그인해 주세요.",
+    errorGeneric:
+      "폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+    errorLogout:
+      "로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+    loadingText: "폼 제출 내역을 불러오는 중입니다...",
+    emptyText: "아직 수집된 폼 제출 내역이 없습니다.",
+    tableHeaderCreatedAt: "제출 시각",
+    tableHeaderProject: "프로젝트",
+    tableHeaderSlug: "Slug",
+    tableHeaderName: "이름",
+    tableHeaderEmail: "이메일",
+    tableHeaderPhone: "전화번호",
+    tableHeaderBirthdate: "생년월일",
+    tableHeaderOtherFields: "기타 필드",
+  },
+};
+
+export function getSubmissionsMessages(locale: AppLocale | null | undefined): SubmissionsMessages {
+  const key = (locale ?? DEFAULT_LOCALE) as AppLocale;
+  return SUBMISSIONS_MESSAGES[key] ?? SUBMISSIONS_MESSAGES[DEFAULT_LOCALE];
+}
diff --git a/tests/api/export.spec.ts b/tests/api/export.spec.ts
index 0d0102a..82141f0 100644
--- a/tests/api/export.spec.ts
+++ b/tests/api/export.spec.ts
@@ -2056,9 +2056,9 @@ describe("/api/export", () => {
 
       const html = await exportTemplateHtml(blocks as Block[]);
 
-      expect(html).toContain("Hero 제목을 여기에 입력하세요");
-      expect(html).toContain("제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.");
-      expect(html).toContain("지금 시작하기");
+      expect(html).toContain("Your hero headline goes here");
+      expect(html).toContain("Describe your product or service in a single, clear sentence.");
+      expect(html).toContain("Get started now");
     });
 
     it("Features 템플릿 섹션은 export HTML 에 3개의 Feature 제목과 설명 텍스트를 포함해야 한다", async () => {
@@ -2067,11 +2067,11 @@ describe("/api/export", () => {
 
       const html = await exportTemplateHtml(blocks as Block[]);
 
-      expect(html).toContain("Feature 1 제목");
-      expect(html).toContain("Feature 2 제목");
-      expect(html).toContain("Feature 3 제목");
+      expect(html).toContain("Feature 1");
+      expect(html).toContain("Feature 2");
+      expect(html).toContain("Feature 3");
 
-      const descText = "해당 기능을 간단히 설명하는 텍스트입니다.";
+      const descText = "A short description of this feature.";
       const occurrences = html.split(descText).length - 1;
       expect(occurrences).toBeGreaterThanOrEqual(3);
     });
@@ -2082,8 +2082,8 @@ describe("/api/export", () => {
 
       const html = await exportTemplateHtml(blocks as Block[]);
 
-      expect(html).toContain("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.");
-      expect(html).toContain("CTA 버튼");
+      expect(html).toContain("Write a compelling CTA message here.");
+      expect(html).toContain("Call to action");
     });
 
     it("Footer 템플릿 섹션은 export HTML 의 마지막 섹션으로 렌더되고 푸터 텍스트를 포함해야 한다", async () => {
@@ -2093,9 +2093,9 @@ describe("/api/export", () => {
       const html = await exportTemplateHtml(blocks as Block[]);
 
       expect(html).toContain("MyLanding");
-      expect(html).toContain("더 나은 웹사이트를 위한 최고의 선택.");
-      expect(html).toContain("서비스 소개");
-      expect(html).toContain("문의하기");
+      expect(html).toContain("The best choice for building better websites.");
+      expect(html).toContain("Product");
+      expect(html).toContain("Contact");
       expect(html).toContain(" 2025 MyLanding.");
 
       const lastSectionIndex = html.lastIndexOf("<section");
diff --git a/tests/e2e/auth.spec.ts b/tests/e2e/auth.spec.ts
index 776809e..d6da2d0 100644
--- a/tests/e2e/auth.spec.ts
+++ b/tests/e2e/auth.spec.ts
@@ -16,7 +16,7 @@ test("비로그인 사용자가 /projects 에 접근하면 /login 으로 리다
   await page.goto("/projects");
 
   // 최종적으로 로그인 페이지의 헤더가 보여야 한다.
-  await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
 });
 
 test("비로그인 사용자가 /editor 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
@@ -31,7 +31,7 @@ test("비로그인 사용자가 /editor 에 접근하면 /login 으로 리다이
 
   await page.goto("/editor");
 
-  await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
 });
 
 test("비로그인 사용자가 /preview 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
@@ -45,7 +45,7 @@ test("비로그인 사용자가 /preview 에 접근하면 /login 으로 리다
 
   await page.goto("/preview");
 
-  await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
 });
 
 test("회원가입 후에는 /dashboard, /editor, /preview 에 정상 접근할 수 있어야 한다", async ({ page }) => {
@@ -94,14 +94,14 @@ test("회원가입 후에는 /dashboard, /editor, /preview 에 정상 접근할
   // 1) 회원가입
   await page.goto("/signup");
 
-  await page.getByLabel("이메일").fill(email);
-  await page.getByLabel("비밀번호", { exact: true }).fill(password);
-  await page.getByLabel("비밀번호 확인").fill(password);
-  await page.getByRole("button", { name: "회원가입" }).click();
+  await page.getByLabel("Email").fill(email);
+  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByLabel("Confirm password").fill(password);
+  await page.getByRole("button", { name: "Sign up" }).click();
 
   // /dashboard 로 이동했는지, 헤더가 보이는지 확인
   await expect(page).toHaveURL(/\/dashboard/);
-  await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
 
   // 2) /editor 접근 확인 – 로그인 페이지로 리다이렉트되면 안 된다.
   await page.goto("/editor");
diff --git a/tests/e2e/dashboard.spec.ts b/tests/e2e/dashboard.spec.ts
index 6953392..612b255 100644
--- a/tests/e2e/dashboard.spec.ts
+++ b/tests/e2e/dashboard.spec.ts
@@ -16,7 +16,7 @@ test("비로그인 사용자가 /dashboard 에 접근하면 /login 으로 리다
 
   await page.goto("/dashboard");
 
-  await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
 });
 
 test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로젝트 카드 리스트, 일별 그래프를 볼 수 있어야 한다", async ({ page }) => {
@@ -61,19 +61,19 @@ test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로
   await page.goto("/dashboard");
 
   // 대시보드 헤더가 보여야 한다.
-  await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
 
   // 상단 헤더 내비게이션이 보여야 한다.
-  const dashboardLink = page.getByRole("link", { name: "대시보드" });
+  const dashboardLink = page.getByRole("link", { name: "Dashboard" });
   await expect(dashboardLink).toBeVisible();
 
-  const projectsLink = page.getByRole("link", { name: "프로젝트 목록" });
+  const projectsLink = page.getByRole("link", { name: "Projects" });
   await expect(projectsLink).toBeVisible();
 
-  const submissionsLink = page.getByRole("link", { name: "전체 제출 내역" });
+  const submissionsLink = page.getByRole("link", { name: "All submissions" });
   await expect(submissionsLink).toBeVisible();
 
-  const menuButton = page.getByRole("button", { name: "메뉴" });
+  const menuButton = page.getByRole("button", { name: "Menu" });
   await expect(menuButton).toBeVisible();
 
   // 상단 요약 위젯의 지표들이 기대 값으로 렌더되어야 한다.
@@ -112,7 +112,7 @@ test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로
   
   // 메뉴 버튼을 클릭하면 로그아웃 항목이 보여야 한다.
   await menuButton.click();
-  await expect(page.getByRole("button", { name: "로그아웃" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Log out" })).toBeVisible();
 });
 
 test("로그인 사용자가 / 에 접속하면 대시보드로 진입해야 한다", async ({ page }) => {
@@ -136,5 +136,5 @@ test("로그인 사용자가 / 에 접속하면 대시보드로 진입해야 한
   await page.goto("/");
 
   await expect(page).toHaveURL(/\/dashboard/);
-  await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
 });
diff --git a/tests/e2e/editor.spec.ts b/tests/e2e/editor.spec.ts
index e525a4a..e14f0a5 100644
--- a/tests/e2e/editor.spec.ts
+++ b/tests/e2e/editor.spec.ts
@@ -23,7 +23,7 @@ test("/editor 페이지가 존재하고 Page Editor 헤더를 보여줘야 한
 test("텍스트 버튼을 누르면 캔버스에 '새 텍스트' 블록이 보여야 한다", async ({ page }) => {
   await page.goto("/editor");
 
-  await page.getByRole("button", { name: "텍스트" }).first().click();
+  await page.getByRole("button", { name: "Text" }).first().click();
 
   const canvas = page.getByTestId("editor-canvas");
   await expect(canvas.getByText("새 텍스트")).toBeVisible();
@@ -255,22 +255,22 @@ test("에디터 상태를 JSON으로 내보내고 다시 불러오면 동일한
   await sizeSelect.selectOption("lg");
 
   // JSON 내보내기/불러오기 모달을 연다.
-  await page.getByRole("button", { name: "메뉴 ▼" }).click();
-  await page.getByRole("button", { name: "JSON 내보내기/불러오기" }).click();
+  await page.getByRole("button", { name: "Menu" }).click();
+  await page.getByRole("button", { name: "JSON export / import" }).click();
 
   // 현재 상태를 JSON으로 내보낸다.
-  await page.getByRole("button", { name: "JSON 내보내기" }).click();
-  const exportArea = page.getByRole("textbox", { name: "에디터 상태 JSON" });
+  await page.getByRole("button", { name: "Export JSON" }).click();
+  const exportArea = page.getByRole("textbox", { name: "Editor state JSON" });
   const exportedJson = await exportArea.inputValue();
 
   // 캔버스를 초기화한다.
-  await page.getByRole("button", { name: "캔버스 초기화" }).click();
+  await page.getByRole("button", { name: "Clear canvas" }).click();
   await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
 
   // JSON을 다시 입력하고 불러온다.
-  const importArea = page.getByRole("textbox", { name: "JSON에서 불러오기" });
+  const importArea = page.getByRole("textbox", { name: "Import from JSON" });
   await importArea.fill(exportedJson);
-  await page.getByRole("button", { name: "JSON 적용하기" }).click();
+  await page.getByRole("button", { name: "Apply JSON" }).click();
 
   // 복원된 캔버스에 두 블록이 모두 존재해야 한다.
   const restoredBlocks = canvas.getByTestId("editor-block");
@@ -510,9 +510,9 @@ test("에디터 메뉴에서 페이지 파일로 내보내기 (ZIP)를 클릭하
   await page.getByRole("button", { name: "텍스트" }).first().click();
 
   // 헤더 메뉴를 연다.
-  await page.getByRole("button", { name: "메뉴 ▼" }).click();
+  await page.getByRole("button", { name: "Menu" }).click();
 
-  const exportButton = page.getByRole("button", { name: "페이지 파일로 내보내기 (ZIP)" });
+  const exportButton = page.getByRole("button", { name: "Export as page files (ZIP)" });
   await expect(exportButton).toBeVisible();
 
   const [download] = await Promise.all([
@@ -573,10 +573,10 @@ test("Hero 템플릿 버튼을 클릭하면 섹션과 기본 텍스트/버튼 
   await expect(blocks.first()).toBeVisible();
 
   // Hero 헤드라인 텍스트가 포함된 블록이 보여야 한다.
-  await expect(canvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
+  await expect(canvas.getByText("Your hero headline goes here")).toBeVisible();
 
   // CTA 버튼도 렌더되어 있어야 한다.
-  const ctaButton = canvas.getByRole("button", { name: "지금 시작하기" });
+  const ctaButton = canvas.getByRole("button", { name: "Get started now" });
   await expect(ctaButton).toBeVisible();
 });
 
@@ -588,9 +588,9 @@ test("Features 템플릿 버튼을 클릭하면 3개의 Feature 항목(제목/
   await page.getByRole("button", { name: "기능 템플릿" }).click();
 
   // Feature 제목들이 렌더되어야 한다.
-  await expect(canvas.getByText("Feature 1 제목")).toBeVisible();
-  await expect(canvas.getByText("Feature 2 제목")).toBeVisible();
-  await expect(canvas.getByText("Feature 3 제목")).toBeVisible();
+  await expect(canvas.getByText("Feature 1")).toBeVisible();
+  await expect(canvas.getByText("Feature 2")).toBeVisible();
+  await expect(canvas.getByText("Feature 3")).toBeVisible();
 });
 
 test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된 섹션이 캔버스에 생성되어야 한다", async ({ page }) => {
@@ -600,8 +600,8 @@ test("CTA 템플릿 버튼을 클릭하면 CTA 텍스트와 버튼이 포함된
 
   await page.getByRole("button", { name: "CTA 템플릿" }).click();
 
-  await expect(canvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
-  const ctaButton = canvas.getByRole("button", { name: "CTA 버튼" });
+  await expect(canvas.getByText("Write a compelling CTA message here.")).toBeVisible();
+  const ctaButton = canvas.getByRole("button", { name: "Call to action" });
   await expect(ctaButton).toBeVisible();
 });
 
@@ -613,10 +613,14 @@ test("FAQ 템플릿 버튼을 클릭하면 질문/답변 텍스트가 세 쌍 
   await page.getByRole("button", { name: "FAQ 템플릿" }).click();
 
   // 기본 FAQ 질문/답변 텍스트들이 렌더되어야 한다.
-  await expect(canvas.getByText("서비스 이용료는 얼마인가요?")).toBeVisible();
-  await expect(canvas.getByText("기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.")).toBeVisible();
-  await expect(canvas.getByText("환불 정책은 어떻게 되나요?")).toBeVisible();
-  await expect(canvas.getByText("팀원 초대 기능이 있나요?")).toBeVisible();
+  await expect(canvas.getByText("How much does the service cost?")).toBeVisible();
+  await expect(
+    canvas.getByText(
+      "The core features are free, and premium features are available with a monthly subscription.",
+    ),
+  ).toBeVisible();
+  await expect(canvas.getByText("What is your refund policy?")).toBeVisible();
+  await expect(canvas.getByText("Can I invite teammates?")).toBeVisible();
 });
 
 test("Pricing 템플릿 버튼을 클릭하면 3개의 요금제 카드가 생성되어야 한다", async ({ page }) => {
@@ -627,11 +631,11 @@ test("Pricing 템플릿 버튼을 클릭하면 3개의 요금제 카드가 생
   await page.getByRole("button", { name: "상품 템플릿" }).click();
 
   await expect(canvas.getByText("Basic")).toBeVisible();
-  await expect(canvas.getByText("₩9,900/월")).toBeVisible();
+  await expect(canvas.getByText("$9/month")).toBeVisible();
   await expect(canvas.getByText("Pro")).toBeVisible();
-  await expect(canvas.getByText("₩29,900/월")).toBeVisible();
+  await expect(canvas.getByText("$29/month")).toBeVisible();
   await expect(canvas.getByText("Enterprise")).toBeVisible();
-  await expect(canvas.getByText("문의")).toBeVisible();
+  await expect(canvas.getByText("Contact us")).toBeVisible();
 });
 
 test("Testimonials 템플릿 버튼을 클릭하면 3개의 후기 카드가 생성되어야 한다", async ({ page }) => {
@@ -743,8 +747,8 @@ test("헤더의 실행 취소/다시 실행 버튼으로 블록 추가를 Undo/R
   await page.getByRole("button", { name: "텍스트" }).first().click();
   await expect(canvas.getByTestId("editor-block")).toHaveCount(1);
 
-  const undoButton = page.getByRole("button", { name: "실행 취소" });
-  const redoButton = page.getByRole("button", { name: "다시 실행" });
+  const undoButton = page.getByRole("button", { name: "Undo" });
+  const redoButton = page.getByRole("button", { name: "Redo" });
 
   await undoButton.click();
   await expect(canvas.getByTestId("editor-block")).toHaveCount(0);
@@ -909,10 +913,10 @@ test("리스트 아이템을 선택하면 패널에서 아이템 위/아래/들
   await firstItem.click({ force: true });
 
   // 리스트 아이템 행에 위치한 조작 버튼들을 사용할 수 있어야 한다.
-  const moveUpButton = firstItem.getByRole("button", { name: "위" });
-  const moveDownButton = firstItem.getByRole("button", { name: "아래" });
-  const indentButton = firstItem.getByRole("button", { name: "들여쓰기" });
-  const outdentButton = firstItem.getByRole("button", { name: "내어쓰기" });
+  const moveUpButton = firstItem.getByRole("button", { name: "Move item up" });
+  const moveDownButton = firstItem.getByRole("button", { name: "Move item down" });
+  const indentButton = firstItem.getByRole("button", { name: "Indent item" });
+  const outdentButton = firstItem.getByRole("button", { name: "Outdent item" });
 
   await expect(moveUpButton).toBeVisible();
   await expect(moveDownButton).toBeVisible();
diff --git a/tests/e2e/preview.spec.ts b/tests/e2e/preview.spec.ts
index f821f8e..9170636 100644
--- a/tests/e2e/preview.spec.ts
+++ b/tests/e2e/preview.spec.ts
@@ -34,8 +34,8 @@ test("에디터에서 Hero 템플릿을 추가하면 프리뷰에서 동일한 H
 
   // 헤드라인과 CTA 버튼이 에디터에서 생성되었는지 한 번 확인한다.
   const editorCanvas = page.getByTestId("editor-canvas");
-  await expect(editorCanvas.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
-  await expect(editorCanvas.getByRole("button", { name: "지금 시작하기" })).toBeVisible();
+  await expect(editorCanvas.getByText("Your hero headline goes here")).toBeVisible();
+  await expect(editorCanvas.getByRole("button", { name: "Get started now" })).toBeVisible();
 
   // 헤더의 프리뷰 열기 링크를 통해 /preview 로 이동한다 (클라이언트 내 내비게이션 유지).
   await page.getByRole("link", { name: "프리뷰 열기" }).click();
@@ -44,9 +44,9 @@ test("에디터에서 Hero 템플릿을 추가하면 프리뷰에서 동일한 H
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
   // 프리뷰에서도 Hero 헤드라인과 CTA 버튼이 그대로 보여야 한다.
-  await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
+  await expect(page.getByText("Your hero headline goes here")).toBeVisible();
   // 프리뷰에서는 CTA를 실제 링크(<a>)로 렌더링하므로 텍스트 기준으로만 검증한다.
-  await expect(page.getByText("지금 시작하기")).toBeVisible();
+  await expect(page.getByText("Get started now")).toBeVisible();
 
   // 프리뷰 화면에는 에디터용 "텍스트" 버튼이 없어야 한다.
   await expect(page.getByRole("button", { name: "텍스트" })).toHaveCount(0);
@@ -73,17 +73,17 @@ test("에디터에서 Features 템플릿을 추가하면 프리뷰에서 3개의
   await page.getByRole("button", { name: "기능 템플릿" }).click();
 
   const editorCanvas = page.getByTestId("editor-canvas");
-  await expect(editorCanvas.getByText("Feature 1 제목")).toBeVisible();
-  await expect(editorCanvas.getByText("Feature 2 제목")).toBeVisible();
-  await expect(editorCanvas.getByText("Feature 3 제목")).toBeVisible();
+  await expect(editorCanvas.getByText("Feature 1")).toBeVisible();
+  await expect(editorCanvas.getByText("Feature 2")).toBeVisible();
+  await expect(editorCanvas.getByText("Feature 3")).toBeVisible();
 
   await page.getByRole("link", { name: "프리뷰 열기" }).click();
 
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
-  await expect(page.getByText("Feature 1 제목")).toBeVisible();
-  await expect(page.getByText("Feature 2 제목")).toBeVisible();
-  await expect(page.getByText("Feature 3 제목")).toBeVisible();
+  await expect(page.getByText("Feature 1")).toBeVisible();
+  await expect(page.getByText("Feature 2")).toBeVisible();
+  await expect(page.getByText("Feature 3")).toBeVisible();
 });
 
 test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스트와 버튼이 보여야 한다", async ({ page }) => {
@@ -92,15 +92,15 @@ test("에디터에서 CTA 템플릿을 추가하면 프리뷰에서 CTA 텍스
   await page.getByRole("button", { name: "CTA 템플릿" }).click();
 
   const editorCanvas = page.getByTestId("editor-canvas");
-  await expect(editorCanvas.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
-  await expect(editorCanvas.getByRole("button", { name: "CTA 버튼" })).toBeVisible();
+  await expect(editorCanvas.getByText("Write a compelling CTA message here.")).toBeVisible();
+  await expect(editorCanvas.getByRole("button", { name: "Call to action" })).toBeVisible();
 
   await page.getByRole("link", { name: "프리뷰 열기" }).click();
 
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
-  await expect(page.getByText("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.")).toBeVisible();
-  await expect(page.getByText("CTA 버튼")).toBeVisible();
+  await expect(page.getByText("Write a compelling CTA message here.")).toBeVisible();
+  await expect(page.getByText("Call to action")).toBeVisible();
 });
 
 test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템플릿 컨텐츠를 보여줘야 한다", async ({ page }) => {
@@ -122,17 +122,21 @@ test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템
   await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
 
   // Hero 헤드라인
-  await expect(page.getByText("Hero 제목을 여기에 입력하세요")).toBeVisible();
+  await expect(page.getByText("Your hero headline goes here")).toBeVisible();
 
   // Features 제목 일부
-  await expect(page.getByText("Feature 1 제목")).toBeVisible();
+  await expect(page.getByText("Feature 1")).toBeVisible();
 
   // Pricing 플랜 이름/가격 일부
   await expect(page.getByText("Basic")).toBeVisible();
-  await expect(page.getByText("₩9,900/월")).toBeVisible();
+  await expect(page.getByText("$9/month")).toBeVisible();
 
   // Testimonials 본문 일부
-  await expect(page.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible();
+  await expect(
+    page.getByText(
+      "This builder dramatically reduced the time we spend creating landing pages.",
+    ),
+  ).toBeVisible();
 });
 
 test("텍스트 블록의 정렬/폰트 크기/색상이 프리뷰에도 반영되어야 한다", async ({ page }) => {
diff --git a/tests/e2e/projects.spec.ts b/tests/e2e/projects.spec.ts
index 630d60d..e0cf770 100644
--- a/tests/e2e/projects.spec.ts
+++ b/tests/e2e/projects.spec.ts
@@ -209,7 +209,7 @@ test("프로젝트 목록에서 '폼 제출 내역' 링크를 클릭하면 해
   await expect(page.getByText("test-project-a")).toBeVisible();
 
   // 액션 영역의 "폼 제출 내역" 링크를 클릭하면 제출 내역 페이지로 이동해야 한다.
-  await page.getByRole("link", { name: "폼 제출 내역" }).click();
+  await page.getByRole("link", { name: "Form submissions" }).click();
 
   await expect(page).toHaveURL(/\/projects\/test-project-a\/submissions/);
 
@@ -284,10 +284,10 @@ test("프로젝트 목록 헤더에서 대시보드로 이동할 수 있어야 
 
   await expect(page.getByText("테스트 프로젝트 A")).toBeVisible();
 
-  await page.getByRole("link", { name: "대시보드" }).click();
+  await page.getByRole("link", { name: "Dashboard" }).click();
 
   await expect(page).toHaveURL(/\/dashboard/);
-  await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
 });
 
 test("전체 제출 내역 페이지에서 공통 GNB와 메뉴가 보여야 한다", async ({ page }) => {
@@ -309,20 +309,20 @@ test("전체 제출 내역 페이지에서 공통 GNB와 메뉴가 보여야 한
 
   await page.goto("/projects/submissions");
 
-  await expect(page.getByRole("heading", { name: "전체 폼 제출 내역" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "All form submissions" })).toBeVisible();
 
-  const dashboardLink = page.getByRole("link", { name: "대시보드" });
+  const dashboardLink = page.getByRole("link", { name: "Dashboard" });
   await expect(dashboardLink).toBeVisible();
 
-  const projectsLink = page.getByRole("link", { name: "프로젝트 목록" });
+  const projectsLink = page.getByRole("link", { name: "Projects" });
   await expect(projectsLink).toBeVisible();
 
-  const submissionsLink = page.getByRole("link", { name: "전체 제출 내역" });
+  const submissionsLink = page.getByRole("link", { name: "All submissions" });
   await expect(submissionsLink).toBeVisible();
 
-  const menuButton = page.getByRole("button", { name: "메뉴" });
+  const menuButton = page.getByRole("button", { name: "Menu" });
   await expect(menuButton).toBeVisible();
 
   await menuButton.click();
-  await expect(page.getByRole("button", { name: "로그아웃" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Log out" })).toBeVisible();
 });
diff --git a/tests/unit/AllProjectSubmissionsPage.spec.tsx b/tests/unit/AllProjectSubmissionsPage.spec.tsx
index d43b143..32acdce 100644
--- a/tests/unit/AllProjectSubmissionsPage.spec.tsx
+++ b/tests/unit/AllProjectSubmissionsPage.spec.tsx
@@ -73,7 +73,7 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
     expect(url).toBe("/api/projects/submissions");
     expect(options).toBeUndefined();
 
-    expect(await screen.findByText("전체 폼 제출 내역")).toBeTruthy();
+    expect(await screen.findByText("All form submissions")).toBeTruthy();
 
     expect(screen.getByText("프로젝트 1")).toBeTruthy();
     expect(screen.getByText("proj-1")).toBeTruthy();
@@ -126,7 +126,7 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
     render(<AllProjectSubmissionsPage />);
 
     const errorText = await screen.findByText(
-      "폼 제출 내역을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+      "An error occurred while loading form submissions. Please try again later.",
     );
 
     expect(errorText).toBeTruthy();
@@ -144,7 +144,7 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
 
     render(<AllProjectSubmissionsPage />);
 
-    const backLink = await screen.findByRole("link", { name: "프로젝트 목록" });
+    const backLink = await screen.findByRole("link", { name: "Projects" });
     expect(backLink).toBeTruthy();
     expect(backLink.closest("a")?.getAttribute("href")).toBe("/projects");
   });
@@ -161,13 +161,13 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
 
     render(<AllProjectSubmissionsPage />);
 
-    const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
+    const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
     expect(dashboardLink.closest("a")?.getAttribute("href")).toBe("/dashboard");
 
-    const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
+    const projectsLink = await screen.findByRole("link", { name: "Projects" });
     expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects");
 
-    const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
+    const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
     expect(submissionsLink.closest("a")?.getAttribute("href")).toBe("/projects/submissions");
   });
 
@@ -237,9 +237,9 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
     });
 
-    const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
-    const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
-    const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
+    const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
+    const projectsLink = await screen.findByRole("link", { name: "Projects" });
+    const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
 
     expect(submissionsLink.getAttribute("href")).toBe("/projects/submissions");
     expect(submissionsLink.getAttribute("aria-current")).toBe("page");
@@ -273,10 +273,10 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
 
     render(<AllProjectSubmissionsPage />);
 
-    const menuButton = await screen.findByRole("button", { name: "메뉴" });
+    const menuButton = await screen.findByRole("button", { name: "Menu" });
     menuButton.click();
 
-    const logoutButton = await screen.findByRole("button", { name: "로그아웃" });
+    const logoutButton = await screen.findByRole("button", { name: "Log out" });
     logoutButton.click();
 
     await waitFor(() => {
diff --git a/tests/unit/BlocksSidebar.spec.tsx b/tests/unit/BlocksSidebar.spec.tsx
index 63e7ba2..633a389 100644
--- a/tests/unit/BlocksSidebar.spec.tsx
+++ b/tests/unit/BlocksSidebar.spec.tsx
@@ -54,7 +54,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
 
   it("Hero 템플릿 버튼 클릭 시 addHeroTemplateSection 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-    const button = screen.getByRole("button", { name: "Hero 템플릿" });
+
+    const button = screen.getByRole("button", { name: "Hero template" });
     fireEvent.click(button);
 
     expect(templateActions.addHeroTemplateSection).toHaveBeenCalledTimes(1);
@@ -62,7 +63,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
 
   it("Features 템플릿 버튼 클릭 시 addFeaturesTemplateSection 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-    const button = screen.getByRole("button", { name: "기능 템플릿" });
+
+    const button = screen.getByRole("button", { name: "Features template" });
     fireEvent.click(button);
 
     expect(templateActions.addFeaturesTemplateSection).toHaveBeenCalledTimes(1);
@@ -70,7 +72,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
 
   it("CTA 템플릿 버튼 클릭 시 addCtaTemplateSection 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-    const button = screen.getByRole("button", { name: "CTA 템플릿" });
+
+    const button = screen.getByRole("button", { name: "CTA template" });
     fireEvent.click(button);
 
     expect(templateActions.addCtaTemplateSection).toHaveBeenCalledTimes(1);
@@ -78,12 +81,13 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
 
   it("FAQ/Pricing/Testimonials/Blog/Team/Footer 템플릿 버튼도 각각의 액션을 호출해야 한다", () => {
     render(<BlocksSidebar />);
-    fireEvent.click(screen.getByRole("button", { name: "FAQ 템플릿" }));
-    fireEvent.click(screen.getByRole("button", { name: "상품 템플릿" }));
-    fireEvent.click(screen.getByRole("button", { name: "후기 템플릿" }));
-    fireEvent.click(screen.getByRole("button", { name: "블로그 템플릿" }));
-    fireEvent.click(screen.getByRole("button", { name: "Team 템플릿" }));
-    fireEvent.click(screen.getByRole("button", { name: "Footer 템플릿" }));
+
+    fireEvent.click(screen.getByRole("button", { name: "FAQ template" }));
+    fireEvent.click(screen.getByRole("button", { name: "Pricing template" }));
+    fireEvent.click(screen.getByRole("button", { name: "Testimonials template" }));
+    fireEvent.click(screen.getByRole("button", { name: "Blog template" }));
+    fireEvent.click(screen.getByRole("button", { name: "Team template" }));
+    fireEvent.click(screen.getByRole("button", { name: "Footer template" }));
 
     expect(templateActions.addFaqTemplateSection).toHaveBeenCalledTimes(1);
     expect(templateActions.addPricingTemplateSection).toHaveBeenCalledTimes(1);
@@ -96,20 +100,21 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
   it("템플릿 섹션에는 각 템플릿의 용도를 설명하는 텍스트가 함께 표시되어야 한다", () => {
     render(<BlocksSidebar />);
 
-    expect(screen.getByText("페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)"));
-    expect(screen.getByText("3컬럼 기능 소개 섹션"));
-    expect(screen.getByText("콜투액션(CTA) 섹션"));
-    expect(screen.getByText("자주 묻는 질문(FAQ) 섹션"));
-    expect(screen.getByText("요금제/플랜 소개 섹션"));
-    expect(screen.getByText("고객 후기(Testimonials) 섹션"));
-    expect(screen.getByText("블로그 포스트 목록 섹션"));
-    expect(screen.getByText("팀 소개 섹션"));
-    expect(screen.getByText("페이지 푸터 섹션"));
+    expect(screen.getByText("Top-of-page hero section (headline + subtext + button)"));
+    expect(screen.getByText("Three-column features section"));
+    expect(screen.getByText("Call-to-action (CTA) section"));
+    expect(screen.getByText("Frequently asked questions (FAQ) section"));
+    expect(screen.getByText("Pricing plans section"));
+    expect(screen.getByText("Customer testimonials section"));
+    expect(screen.getByText("Blog post listing section"));
+    expect(screen.getByText("Team members section"));
+    expect(screen.getByText("Page footer section"));
   });
 
   it("비디오 버튼 클릭 시 addVideoBlock 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-    const button = screen.getByRole("button", { name: "비디오" });
+
+    const button = screen.getByRole("button", { name: "Video" });
     fireEvent.click(button);
 
     expect(otherActions.addVideoBlock).toHaveBeenCalledTimes(1);
@@ -118,10 +123,10 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
   it("템플릿들은 카테고리별로 그룹 헤더를 가져야 한다", () => {
     render(<BlocksSidebar />);
 
-    expect(screen.getByText("히어로 · CTA")).toBeDefined();
-    expect(screen.getByText("콘텐츠 섹션")).toBeDefined();
-    expect(screen.getByText("신뢰/소개")).toBeDefined();
-    expect(screen.getByText("푸터/기타")).toBeDefined();
+    expect(screen.getByText("Hero · CTA")).toBeDefined();
+    expect(screen.getByText("Content sections")).toBeDefined();
+    expect(screen.getByText("Trust & about")).toBeDefined();
+    expect(screen.getByText("Footer & misc")).toBeDefined();
   });
 
   it("각 템플릿 카드에는 미니 썸네일(레이아웃 힌트)가 렌더링되어야 한다", () => {
@@ -165,57 +170,57 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
     render(<BlocksSidebar />);
 
     // 초기에는 텍스트 버튼이 보여야 한다.
-    expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined();
+    expect(screen.getByRole("button", { name: "Text" })).toBeDefined();
 
-    const blockToggle = screen.getByRole("button", { name: "블록" });
+    const blockToggle = screen.getByRole("button", { name: "Blocks" });
     fireEvent.click(blockToggle);
 
     // 접힌 상태에서는 텍스트 버튼이 보이지 않아야 한다.
-    expect(screen.queryByRole("button", { name: "텍스트" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Text" })).toBeNull();
 
     // 다시 클릭하면 펼쳐져야 한다.
     fireEvent.click(blockToggle);
-    expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined();
+    expect(screen.getByRole("button", { name: "Text" })).toBeDefined();
   });
 
   it("폼 요소 섹션 타이틀을 클릭하면 폼 관련 버튼들을 접고 펼 수 있어야 한다", () => {
     render(<BlocksSidebar />);
 
     // 초기에는 폼 입력 버튼이 보여야 한다.
-    expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined();
+    expect(screen.getByRole("button", { name: "Input field" })).toBeDefined();
 
-    const formToggle = screen.getByRole("button", { name: "폼 요소" });
+    const formToggle = screen.getByRole("button", { name: "Form elements" });
     fireEvent.click(formToggle);
 
     // 접힌 상태에서는 폼 입력 버튼이 보이지 않아야 한다.
-    expect(screen.queryByRole("button", { name: "입력(Input)" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Input field" })).toBeNull();
 
     // 다시 클릭하면 펼쳐져야 한다.
     fireEvent.click(formToggle);
-    expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined();
+    expect(screen.getByRole("button", { name: "Input field" })).toBeDefined();
   });
 
   it("템플릿 섹션 타이틀을 클릭하면 템플릿 카드들을 접고 펼 수 있어야 한다", () => {
     render(<BlocksSidebar />);
 
     // 초기에는 Hero 템플릿 버튼이 보여야 한다.
-    expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined();
+    expect(screen.getByRole("button", { name: "Hero template" })).toBeDefined();
 
-    const templateToggle = screen.getByRole("button", { name: "템플릿" });
+    const templateToggle = screen.getByRole("button", { name: "Templates" });
     fireEvent.click(templateToggle);
 
     // 접힌 상태에서는 Hero 템플릿 버튼이 보이지 않아야 한다.
-    expect(screen.queryByRole("button", { name: "Hero 템플릿" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Hero template" })).toBeNull();
 
     // 다시 클릭하면 펼쳐져야 한다.
     fireEvent.click(templateToggle);
-    expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined();
+    expect(screen.getByRole("button", { name: "Hero template" })).toBeDefined();
   });
 
 	it("블록 추가 버튼들은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
 		render(<BlocksSidebar />);
 
-		const textButton = screen.getByRole("button", { name: "텍스트" });
+		const textButton = screen.getByRole("button", { name: "Text" });
 		const className = textButton.getAttribute("class") ?? "";
 
 		// 라이트 모드: 밝은 배경 + 어두운 텍스트
@@ -231,7 +236,7 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
 		render(<BlocksSidebar />);
 
 		const heroDescription = screen.getByText(
-			"페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)",
+			"Top-of-page hero section (headline + subtext + button)",
 		);
 		const card = heroDescription.closest("div");
 		expect(card).not.toBeNull();
@@ -246,7 +251,7 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
 	it("히어로 템플릿 추가 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
 		render(<BlocksSidebar />);
 
-		const heroButton = screen.getByRole("button", { name: "Hero 템플릿" });
+		const heroButton = screen.getByRole("button", { name: "Hero template" });
 		const className = heroButton.getAttribute("class") ?? "";
 
 		// 라이트 모드: 밝은 배경 + 어두운 텍스트
diff --git a/tests/unit/ButtonPropertiesPanel.spec.tsx b/tests/unit/ButtonPropertiesPanel.spec.tsx
index 68bb59e..0381282 100644
--- a/tests/unit/ButtonPropertiesPanel.spec.tsx
+++ b/tests/unit/ButtonPropertiesPanel.spec.tsx
@@ -31,7 +31,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("버튼 텍스트 색상 HEX");
+    const hexInput = screen.getByLabelText("Button text color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -51,7 +51,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("버튼 채움 색상 HEX");
+    const hexInput = screen.getByLabelText("Button fill color HEX");
     fireEvent.change(hexInput, { target: { value: "#445566" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -71,7 +71,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("버튼 외곽선 색상 HEX");
+    const hexInput = screen.getByLabelText("Button border color HEX");
     fireEvent.change(hexInput, { target: { value: "#778899" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -80,7 +80,7 @@ describe("ButtonPropertiesPanel", () => {
     );
   });
 
-	it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
+	it("텍스트 색상 팔레트에서 \"None\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
 		const updateBlock = vi.fn();
 
 		render(
@@ -92,11 +92,11 @@ describe("ButtonPropertiesPanel", () => {
 		);
 
 		// 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다.
-		const paletteButtons = screen.getAllByText("색상 팔레트");
+		const paletteButtons = screen.getAllByText("Color palette");
 		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
 
-		// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다.
-		const noneButtons = screen.getAllByRole("button", { name: "없음" });
+		// 팔레트에서 "None" 항목을 버튼 role 기준으로 선택한다.
+		const noneButtons = screen.getAllByRole("button", { name: "None" });
 		fireEvent.click(noneButtons[0]);
 
 		expect(updateBlock).toHaveBeenCalledWith(
@@ -116,7 +116,7 @@ describe("ButtonPropertiesPanel", () => {
 			/>,
 		);
 
-		const hexInput = screen.getByLabelText("버튼 텍스트 색상 HEX") as HTMLInputElement;
+		const hexInput = screen.getByLabelText("Button text color HEX") as HTMLInputElement;
 		expect(hexInput.value).toBe("");
 	});
 
@@ -131,7 +131,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("버튼 너비 모드");
+    const select = screen.getByLabelText("Button width mode");
     fireEvent.change(select, { target: { value: "fixed" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -155,7 +155,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const urlInput = screen.getByLabelText("버튼 이미지 URL");
+    const urlInput = screen.getByLabelText("Button image URL");
     fireEvent.change(urlInput, { target: { value: "https://example.com/new.png" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -183,7 +183,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("버튼 이미지 위치");
+    const select = screen.getByLabelText("Button image placement");
     fireEvent.change(select, { target: { value: "right" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -207,7 +207,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("버튼 이미지 소스");
+    const select = screen.getByLabelText("Button image source");
     // 업로드 → URL 로 전환
     fireEvent.change(select, { target: { value: "url" } });
 
@@ -231,7 +231,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const textarea = screen.getByLabelText("버튼 텍스트");
+    const textarea = screen.getByLabelText("Button text");
     fireEvent.change(textarea, { target: { value: "새 버튼" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -251,7 +251,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const textarea = screen.getByLabelText("버튼 텍스트") as HTMLTextAreaElement;
+    const textarea = screen.getByLabelText("Button text") as HTMLTextAreaElement;
     const className = textarea.getAttribute("class") ?? "";
 
     // 라이트 모드: 흰 배경 + 어두운 텍스트
@@ -273,7 +273,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("가로 패딩 (px) 슬라이더");
+    const slider = screen.getByLabelText("Horizontal padding (px) 슬라이더");
     fireEvent.change(slider, { target: { value: "24" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -293,7 +293,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("세로 패딩 (px) 슬라이더");
+    const slider = screen.getByLabelText("Vertical padding (px) 슬라이더");
     fireEvent.change(slider, { target: { value: "18" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -313,7 +313,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("버튼 링크");
+    const input = screen.getByLabelText("Button link");
     fireEvent.change(input, { target: { value: "/signup" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -333,7 +333,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("버튼 정렬");
+    const select = screen.getByLabelText("Button alignment");
     fireEvent.change(select, { target: { value: "center" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -353,7 +353,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("버튼 스타일");
+    const select = screen.getByLabelText("Button style");
     fireEvent.change(select, { target: { value: "outline" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -373,7 +373,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("모서리 둥글기 슬라이더");
+    const slider = screen.getByLabelText("Border radius 슬라이더");
     fireEvent.change(slider, { target: { value: "4" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -393,7 +393,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("버튼 고정 너비 슬라이더");
+    const slider = screen.getByLabelText("Button fixed width 슬라이더");
     fireEvent.change(slider, { target: { value: "300" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -413,7 +413,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("버튼 크기 슬라이더");
+    const slider = screen.getByLabelText("Button font size 슬라이더");
     fireEvent.change(slider, { target: { value: "20" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -433,7 +433,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("줄 간격 슬라이더");
+    const slider = screen.getByLabelText("Line height 슬라이더");
     fireEvent.change(slider, { target: { value: "1.8" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -453,7 +453,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("글자 간격 슬라이더");
+    const slider = screen.getByLabelText("Letter spacing 슬라이더");
     fireEvent.change(slider, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -473,7 +473,7 @@ describe("ButtonPropertiesPanel", () => {
       />,
     );
 
-    const labelTextarea = screen.getByLabelText("버튼 텍스트") as HTMLTextAreaElement;
+    const labelTextarea = screen.getByLabelText("Button text") as HTMLTextAreaElement;
     const labelClass = labelTextarea.getAttribute("class") ?? "";
     expect(labelClass).toContain("bg-white");
     expect(labelClass).toContain("text-slate-900");
@@ -482,7 +482,7 @@ describe("ButtonPropertiesPanel", () => {
     expect(labelClass).toContain("dark:text-slate-100");
     expect(labelClass).toContain("dark:border-slate-700");
 
-    const imageSourceSelect = screen.getByLabelText("버튼 이미지 소스") as HTMLSelectElement;
+    const imageSourceSelect = screen.getByLabelText("Button image source") as HTMLSelectElement;
     const imageSourceClass = imageSourceSelect.getAttribute("class") ?? "";
     expect(imageSourceClass).toContain("bg-white");
     expect(imageSourceClass).toContain("text-slate-900");
@@ -491,7 +491,7 @@ describe("ButtonPropertiesPanel", () => {
     expect(imageSourceClass).toContain("dark:text-slate-100");
     expect(imageSourceClass).toContain("dark:border-slate-700");
 
-    const alignSelect = screen.getByLabelText("버튼 정렬") as HTMLSelectElement;
+    const alignSelect = screen.getByLabelText("Button alignment") as HTMLSelectElement;
     const alignClass = alignSelect.getAttribute("class") ?? "";
     expect(alignClass).toContain("bg-white");
     expect(alignClass).toContain("text-slate-900");
diff --git a/tests/unit/ColorPickerField.spec.tsx b/tests/unit/ColorPickerField.spec.tsx
index dafec8f..9814462 100644
--- a/tests/unit/ColorPickerField.spec.tsx
+++ b/tests/unit/ColorPickerField.spec.tsx
@@ -38,7 +38,7 @@ describe("ColorPickerField - 테마", () => {
       />,
     );
 
-    const [label] = screen.getAllByText("색상 팔레트");
+    const [label] = screen.getAllByText("Color palette");
     const button = label.closest("button") as HTMLButtonElement | null;
     expect(button).not.toBeNull();
 
@@ -65,14 +65,13 @@ describe("ColorPickerField - 테마", () => {
     );
 
     // 드롭다운을 연다
-    const [label] = screen.getAllByText("색상 팔레트");
+    const [label] = screen.getAllByText("Color palette");
     const toggleButton = label.closest("button") as HTMLButtonElement | null;
     expect(toggleButton).not.toBeNull();
     fireEvent.click(toggleButton!);
 
-    // 팔레트 첫 항목 버튼을 찾는다 (TEXT_COLOR_PALETTE[0] 라벨과 동기화)
-    const firstItem = TEXT_COLOR_PALETTE[0];
-    const itemButton = screen.getByRole("button", { name: firstItem.label }) as HTMLButtonElement;
+    // 팔레트 첫 항목 버튼(기본값: None)을 role/name 기준으로 찾는다
+    const itemButton = screen.getByRole("button", { name: "None" }) as HTMLButtonElement;
     const className = itemButton.getAttribute("class") ?? "";
 
     // 라이트 모드: 흰 배경 + 어두운 텍스트
diff --git a/tests/unit/DashboardPage.spec.tsx b/tests/unit/DashboardPage.spec.tsx
index d0c4711..c79d400 100644
--- a/tests/unit/DashboardPage.spec.tsx
+++ b/tests/unit/DashboardPage.spec.tsx
@@ -42,9 +42,9 @@ describe("DashboardPage - GNB와 테마", () => {
 
     render(<DashboardPage />);
 
-    const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
-    const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
-    const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
+    const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
+    const projectsLink = await screen.findByRole("link", { name: "Projects" });
+    const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
 
     expect(dashboardLink.getAttribute("href")).toBe("/dashboard");
     expect(dashboardLink.getAttribute("aria-current")).toBe("page");
@@ -79,7 +79,7 @@ describe("DashboardPage - GNB와 테마", () => {
     const html = document.documentElement;
     html.classList.remove("dark");
 
-    const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" });
+    const themeToggleButton = await screen.findByRole("button", { name: "Toggle theme" });
 
     expect(html.classList.contains("dark")).toBe(false);
 
@@ -91,4 +91,51 @@ describe("DashboardPage - GNB와 테마", () => {
 
     expect(html.classList.contains("dark")).toBe(false);
   });
+
+  it("대시보드 요약 카드와 프로젝트 카드가 라이트/다크 테마에서 읽기 쉬운 텍스트 색상 클래스를 사용해야 한다", async () => {
+    const overview = {
+      summaryStats: {
+        totalProjects: 1,
+        totalSubmissions: 10,
+        todaySubmissions: 2,
+        last7DaysSubmissions: 5,
+      },
+      projectStats: [
+        {
+          projectId: "p1",
+          title: "Test project 1",
+          slug: "test-project-1",
+          status: "DRAFT",
+          totalSubmissions: 3,
+          lastSubmissionAt: "2025-01-01T00:00:00.000Z",
+        },
+      ],
+      dailySubmissions: [],
+    };
+
+    const fetchMock = vi.fn().mockResolvedValue(
+      new Response(JSON.stringify(overview), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    const { container } = render(<DashboardPage />);
+
+    // 요약 카드가 렌더링될 때까지 기다린다.
+    await screen.findByTestId("dashboard-summary-total-projects");
+
+    const summaryCard = container.querySelector(
+      '[data-testid="dashboard-summary-total-projects"]',
+    ) as HTMLElement | null;
+    expect(summaryCard).not.toBeNull();
+
+    const summaryLabel = summaryCard!.querySelector("span") as HTMLElement | null;
+    expect(summaryLabel).not.toBeNull();
+    const summaryLabelClass = summaryLabel!.className;
+    expect(summaryLabelClass).toContain("text-slate-500");
+    expect(summaryLabelClass).toContain("dark:text-slate-400");
+  });
 });
diff --git a/tests/unit/DividerPropertiesPanel.spec.tsx b/tests/unit/DividerPropertiesPanel.spec.tsx
index 77795e0..4981068 100644
--- a/tests/unit/DividerPropertiesPanel.spec.tsx
+++ b/tests/unit/DividerPropertiesPanel.spec.tsx
@@ -32,7 +32,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("구분선 정렬");
+    const select = screen.getByLabelText("Divider alignment");
     fireEvent.change(select, { target: { value: "center" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -52,7 +52,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("구분선 두께");
+    const select = screen.getByLabelText("Divider thickness");
     fireEvent.change(select, { target: { value: "medium" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -72,7 +72,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("구분선 길이 모드");
+    const select = screen.getByLabelText("Divider length mode");
     fireEvent.change(select, { target: { value: "fixed" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -92,7 +92,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const widthInput = screen.getByLabelText("고정 길이 (px) 커스텀 (px)");
+    const widthInput = screen.getByLabelText("Fixed length (px) 커스텀 (px)");
     fireEvent.change(widthInput, { target: { value: "480" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -112,7 +112,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const hexInputs = screen.getAllByLabelText("구분선 색상 HEX");
+    const hexInputs = screen.getAllByLabelText("Divider color HEX");
     const hexInput = hexInputs[0] as HTMLInputElement;
     fireEvent.change(hexInput, { target: { value: "#123456" } });
 
@@ -133,7 +133,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const marginInputs = screen.getAllByLabelText("위/아래 여백 커스텀 (px)");
+    const marginInputs = screen.getAllByLabelText("Vertical margin 커스텀 (px)");
     const marginInput = marginInputs[0] as HTMLInputElement;
 
     fireEvent.change(marginInput, { target: { value: "24" } });
@@ -155,7 +155,7 @@ describe("DividerPropertiesPanel", () => {
       />,
     );
 
-    const alignSelect = screen.getByLabelText("구분선 정렬") as HTMLSelectElement;
+    const alignSelect = screen.getByLabelText("Divider alignment") as HTMLSelectElement;
     const alignClass = alignSelect.getAttribute("class") ?? "";
     expect(alignClass).toContain("bg-white");
     expect(alignClass).toContain("text-slate-900");
@@ -164,7 +164,7 @@ describe("DividerPropertiesPanel", () => {
     expect(alignClass).toContain("dark:text-slate-100");
     expect(alignClass).toContain("dark:border-slate-700");
 
-    const thicknessSelect = screen.getByLabelText("구분선 두께") as HTMLSelectElement;
+    const thicknessSelect = screen.getByLabelText("Divider thickness") as HTMLSelectElement;
     const thicknessClass = thicknessSelect.getAttribute("class") ?? "";
     expect(thicknessClass).toContain("bg-white");
     expect(thicknessClass).toContain("text-slate-900");
@@ -173,7 +173,7 @@ describe("DividerPropertiesPanel", () => {
     expect(thicknessClass).toContain("dark:text-slate-100");
     expect(thicknessClass).toContain("dark:border-slate-700");
 
-    const widthModeSelect = screen.getByLabelText("구분선 길이 모드") as HTMLSelectElement;
+    const widthModeSelect = screen.getByLabelText("Divider length mode") as HTMLSelectElement;
     const widthModeClass = widthModeSelect.getAttribute("class") ?? "";
     expect(widthModeClass).toContain("bg-white");
     expect(widthModeClass).toContain("text-slate-900");
diff --git a/tests/unit/EditorCanvasBackground.spec.tsx b/tests/unit/EditorCanvasBackground.spec.tsx
index c039e0a..f20a17a 100644
--- a/tests/unit/EditorCanvasBackground.spec.tsx
+++ b/tests/unit/EditorCanvasBackground.spec.tsx
@@ -2,6 +2,8 @@ import { describe, it, expect, afterEach } from "vitest";
 import { render, screen, cleanup } from "@testing-library/react";
 import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
 import { EditorCanvas, EditorCanvasDragPreview } from "@/app/editor/EditorCanvas";
+import { LocaleProvider } from "@/features/i18n/LocaleProvider";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
 
 // 에디터 캔버스/페이지 배경색 적용 규칙에 대한 최소 TDD
 // - canvasBgColorHex: 실제 캔버스 영역(editor-canvas-inner)의 배경색
@@ -37,15 +39,38 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
   };
 
   it("canvasBgColorHex 는 editor-canvas-inner 배경색에 적용되어야 한다", () => {
-    render(<EditorCanvas {...baseProps} />);
+    render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvas {...baseProps} />
+      </LocaleProvider>,
+    );
 
     const inner = screen.getByTestId("editor-canvas-inner") as HTMLElement;
 
     expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
   });
 
+  it("blocks 가 없을 때 en 로케일에서는 영어 안내 문구를 표시해야 한다", () => {
+    render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvas {...baseProps} />
+      </LocaleProvider>,
+    );
+
+    const hint = screen.getByText(
+      'Click the "Text" button on the left to add your first block.',
+    );
+    expect(hint.textContent).toBe(
+      'Click the "Text" button on the left to add your first block.',
+    );
+  });
+
   it("bodyBgColorHex 는 editor-canvas 바깥 래퍼(editor-canvas)의 배경색에 적용되어야 한다", () => {
-    const { container } = render(<EditorCanvas {...baseProps} />);
+    const { container } = render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvas {...baseProps} />
+      </LocaleProvider>,
+    );
 
     const outer = container.querySelector('[data-testid="editor-canvas"]') as HTMLElement | null;
 
@@ -56,7 +81,11 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
   it("canvasPreset / canvasWidthPx 에 따라 editor-canvas-inner 의 maxWidth 가 설정되어야 한다", () => {
     const renderWithConfig = (partial: Partial<ProjectConfig>) => {
       const projectConfig = { ...baseProjectConfig, ...partial } as ProjectConfig;
-      const { getByTestId, unmount } = render(<EditorCanvas {...baseProps} projectConfig={projectConfig} />);
+      const { getByTestId, unmount } = render(
+        <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+          <EditorCanvas {...baseProps} projectConfig={projectConfig} />
+        </LocaleProvider>,
+      );
       const inner = getByTestId("editor-canvas-inner") as HTMLElement;
       const maxWidth = inner.style.maxWidth;
       unmount();
@@ -85,7 +114,11 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
       },
     } as any;
 
-    const { container } = render(<EditorCanvasDragPreview block={block} />);
+    const { container } = render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvasDragPreview block={block} />
+      </LocaleProvider>,
+    );
 
     const overlay = container.querySelector(
       "div.pointer-events-none.rounded.border",
@@ -99,4 +132,25 @@ describe("EditorCanvas - 캔버스/페이지 배경색", () => {
     expect(className).toContain("dark:bg-slate-900");
     expect(className).toContain("dark:text-slate-100");
   });
+
+  it("en 로케일에서는 EditorCanvasDragPreview 의 텍스트 블록 fallback 라벨이 영어로 표시되어야 한다", () => {
+    const block: Block = {
+      id: "text_fallback_1",
+      type: "text",
+      props: {
+        text: "",
+        align: "left",
+        size: "base",
+      },
+    } as any;
+
+    render(
+      <LocaleProvider initialLocale={DEFAULT_LOCALE}>
+        <EditorCanvasDragPreview block={block} />
+      </LocaleProvider>,
+    );
+
+    const fallbackLabel = screen.getByText("Text block");
+    expect(fallbackLabel.textContent).toBe("Text block");
+  });
 });
diff --git a/tests/unit/EditorExportPreview.spec.tsx b/tests/unit/EditorExportPreview.spec.tsx
index 471b0af..8844b89 100644
--- a/tests/unit/EditorExportPreview.spec.tsx
+++ b/tests/unit/EditorExportPreview.spec.tsx
@@ -102,20 +102,20 @@ describe("EditorPage - 상단 메뉴 (Export 미리보기 제거)", () => {
   it("메뉴를 열었을 때 'Export 미리보기' 항목은 보이지 않고, '프로젝트 목록' 항목이 노출되어야 한다", () => {
     render(<EditorPage />);
 
-    const menuButton = screen.getByText("메뉴");
+    const menuButton = screen.getByText("Menu");
     fireEvent.click(menuButton);
 
     const removedItem = screen.queryByText("Export 미리보기");
     expect(removedItem).toBeNull();
 
-    const projectListItem = screen.getByText("프로젝트 목록");
+    const projectListItem = screen.getByText("Projects");
     expect(projectListItem).toBeTruthy();
   });
 
   it("헤더의 '프리뷰 열기' 링크는 현재 프로젝트 slug 를 쿼리로 포함한 /preview?slug=... 형식이어야 한다", () => {
     render(<EditorPage />);
 
-    const previewLink = screen.getByRole("link", { name: "프리뷰 열기" });
+    const previewLink = screen.getByRole("link", { name: "Open preview" });
     expect(previewLink).toBeTruthy();
     expect(previewLink.getAttribute("href")).toBe("/preview?slug=export-preview-test");
   });
diff --git a/tests/unit/EditorJsonExportImport.spec.tsx b/tests/unit/EditorJsonExportImport.spec.tsx
index 773c44e..12b6433 100644
--- a/tests/unit/EditorJsonExportImport.spec.tsx
+++ b/tests/unit/EditorJsonExportImport.spec.tsx
@@ -103,10 +103,10 @@ vi.mock("next/navigation", () => {
 });
 
 function openJsonModal() {
-  const menuButton = screen.getByText("메뉴");
+  const menuButton = screen.getByText("Menu");
   fireEvent.click(menuButton);
 
-  const jsonMenuItem = screen.getByText("JSON 내보내기/불러오기");
+  const jsonMenuItem = screen.getByText("JSON export / import");
   fireEvent.click(jsonMenuItem);
 
   const modalTitle = screen.getByText("JSON Export / Import");
@@ -120,13 +120,13 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
 
     const jsonModal = openJsonModal();
 
-    const exportLabel = within(jsonModal).getByText("에디터 상태 JSON").closest("label") as HTMLElement;
+    const exportLabel = within(jsonModal).getByText("Editor state JSON").closest("label") as HTMLElement;
     const exportTextarea = within(exportLabel).getByRole("textbox") as HTMLTextAreaElement;
 
     // 초기에는 비어 있어야 한다.
     expect(exportTextarea.value).toBe("");
 
-    const exportButton = within(jsonModal).getByText("JSON 내보내기");
+    const exportButton = within(jsonModal).getByText("Export JSON");
     fireEvent.click(exportButton);
 
     const value = exportTextarea.value;
@@ -143,7 +143,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
 
     const jsonModal = openJsonModal();
 
-    const importLabel = within(jsonModal).getByText("JSON에서 불러오기").closest("label") as HTMLElement;
+    const importLabel = within(jsonModal).getByText("Import from JSON").closest("label") as HTMLElement;
     const importTextarea = within(importLabel).getByRole("textbox") as HTMLTextAreaElement;
 
     const importedBlocks: Block[] = [
@@ -175,7 +175,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
     mockState.replaceBlocks.mockReset();
     mockState.updateProjectConfig.mockReset();
 
-    const applyButton = within(importLabel).getByText("JSON 적용하기");
+    const applyButton = within(importLabel).getByText("Apply JSON");
     fireEvent.click(applyButton);
 
     expect(mockState.replaceBlocks).toHaveBeenCalledTimes(1);
@@ -190,7 +190,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
 
     const jsonModal = openJsonModal();
 
-    const importLabel = within(jsonModal).getByText("JSON에서 불러오기").closest("label") as HTMLElement;
+    const importLabel = within(jsonModal).getByText("Import from JSON").closest("label") as HTMLElement;
     const importTextarea = within(importLabel).getByRole("textbox") as HTMLTextAreaElement;
 
     fireEvent.change(importTextarea, { target: { value: "{ this-is: not-valid-json" } });
@@ -198,7 +198,7 @@ describe("EditorPage - JSON 내보내기/불러오기", () => {
     mockState.replaceBlocks.mockReset();
     mockState.updateProjectConfig.mockReset();
 
-    const applyButton = within(importLabel).getByText("JSON 적용하기");
+    const applyButton = within(importLabel).getByText("Apply JSON");
     fireEvent.click(applyButton);
 
     expect(mockState.replaceBlocks).not.toHaveBeenCalled();
diff --git a/tests/unit/EditorLayoutScroll.spec.tsx b/tests/unit/EditorLayoutScroll.spec.tsx
index 0818a8c..1e97b3f 100644
--- a/tests/unit/EditorLayoutScroll.spec.tsx
+++ b/tests/unit/EditorLayoutScroll.spec.tsx
@@ -90,7 +90,7 @@ describe("EditorPage - 레이아웃 스크롤 컨테이너", () => {
   it("좌측 사이드바, 캔버스, 우측 속성 패널에 pb-scroll 클래스가 적용되어야 한다", () => {
     render(<EditorPage />);
 
-    const blocksHeading = screen.getByText("블록");
+    const blocksHeading = screen.getByText("Blocks");
     const blocksSidebar = blocksHeading.closest("aside") as HTMLElement;
     const canvas = screen.getByTestId("editor-canvas");
     const propertiesSidebar = screen.getByTestId("properties-sidebar");
diff --git a/tests/unit/EditorPageBackground.spec.tsx b/tests/unit/EditorPageBackground.spec.tsx
index 1188a50..f2876b8 100644
--- a/tests/unit/EditorPageBackground.spec.tsx
+++ b/tests/unit/EditorPageBackground.spec.tsx
@@ -114,13 +114,13 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
   it("프로젝트 저장/불러오기 모달 카드는 라이트/다크 테마에 맞는 카드/인풋 크롬을 사용해야 한다", () => {
     render(<EditorPage />);
 
-    const menuButton = screen.getByRole("button", { name: /메뉴/ });
+    const menuButton = screen.getByRole("button", { name: /Menu/ });
     fireEvent.click(menuButton);
 
-    const projectMenuItem = screen.getByRole("button", { name: "프로젝트 저장/불러오기" });
+    const projectMenuItem = screen.getByRole("button", { name: "Save / load project" });
     fireEvent.click(projectMenuItem);
 
-    const heading = screen.getByText("프로젝트 저장 / 불러오기");
+    const heading = screen.getByText("Save / load project");
     const headerDiv = heading.closest("div") as HTMLDivElement | null;
     expect(headerDiv).not.toBeNull();
 
@@ -136,7 +136,7 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
     expect(cardClass).toContain("dark:border-slate-700");
 
     const titleSpan = Array.from(card!.querySelectorAll("span")).find(
-      (el) => el.textContent === "프로젝트 제목",
+      (el) => el.textContent === "Project title",
     );
     expect(titleSpan).not.toBeUndefined();
     const titleWrapper = (titleSpan as HTMLSpanElement).parentElement as HTMLElement | null;
@@ -157,10 +157,10 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
   it("JSON Export / Import 모달 카드는 라이트/다크 테마에 맞는 카드/textarea 크롬을 사용해야 한다", () => {
     render(<EditorPage />);
 
-    const menuButton = screen.getByRole("button", { name: /메뉴/ });
+    const menuButton = screen.getByRole("button", { name: /Menu/ });
     fireEvent.click(menuButton);
 
-    const jsonMenuItem = screen.getByRole("button", { name: "JSON 내보내기/불러오기" });
+    const jsonMenuItem = screen.getByRole("button", { name: "JSON export / import" });
     fireEvent.click(jsonMenuItem);
 
     const heading = screen.getByText(/JSON Export \/ Import/);
@@ -178,7 +178,7 @@ describe("EditorPage - 페이지/캔버스 배경", () => {
     expect(cardClass).toContain("dark:text-slate-100");
     expect(cardClass).toContain("dark:border-slate-700");
 
-    const jsonLabel = screen.getByText("에디터 상태 JSON");
+    const jsonLabel = screen.getByText("Editor state JSON");
     const jsonWrapper = jsonLabel.parentElement as HTMLElement | null;
     expect(jsonWrapper).not.toBeNull();
 
diff --git a/tests/unit/EditorProjectSaveLoad.spec.tsx b/tests/unit/EditorProjectSaveLoad.spec.tsx
index 848572b..89b4c26 100644
--- a/tests/unit/EditorProjectSaveLoad.spec.tsx
+++ b/tests/unit/EditorProjectSaveLoad.spec.tsx
@@ -126,17 +126,17 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 
     const { rerender } = render(<EditorPage />);
 
-    const menuButton = screen.getByText("메뉴");
+    const menuButton = screen.getByText("Menu");
     fireEvent.click(menuButton);
 
-    const projectMenuItem = screen.getByText("프로젝트 저장/불러오기");
+    const projectMenuItem = screen.getByText("Save / load project");
     fireEvent.click(projectMenuItem);
 
-    const modalTitle = screen.getByText("프로젝트 저장 / 불러오기");
+    const modalTitle = screen.getByText("Save / load project");
     const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement;
 
-    const titleInput = within(projectModal).getByLabelText("프로젝트 제목") as HTMLInputElement;
-    const slugInput = within(projectModal).getByLabelText("프로젝트 주소 (예: my-landing)") as HTMLInputElement;
+    const titleInput = within(projectModal).getByLabelText("Project title") as HTMLInputElement;
+    const slugInput = within(projectModal).getByLabelText("Project address (e.g. my-landing)") as HTMLInputElement;
 
     expect(titleInput.value).toBe("프로젝트 저장/불러오기 테스트");
     expect(slugInput.value).toBe("editor-project-test");
@@ -149,7 +149,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 
     rerender(<EditorPage />);
 
-    const saveButton = screen.getByText("저장 (로컬 + 서버)");
+    const saveButton = screen.getByText("Save (local + server)");
     fireEvent.click(saveButton);
 
     await waitFor(() => {
@@ -184,7 +184,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
     expect(Array.isArray(body.contentJson)).toBe(true);
     expect(body.contentJson[0].id).toBe("blk_1");
 
-    const message = await screen.findByText("프로젝트가 저장되었습니다: save-test-slug");
+    const message = await screen.findByText("Project saved: save-test-slug");
     expect(message).toBeTruthy();
   });
 
@@ -213,24 +213,24 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 
     const { rerender } = render(<EditorPage />);
 
-    const menuButton = screen.getByText("메뉴");
+    const menuButton = screen.getByText("Menu");
     fireEvent.click(menuButton);
 
-    const projectMenuItem = screen.getByText("프로젝트 저장/불러오기");
+    const projectMenuItem = screen.getByText("Save / load project");
     fireEvent.click(projectMenuItem);
 
-    const modalTitle = screen.getByText("프로젝트 저장 / 불러오기");
+    const modalTitle = screen.getByText("Save / load project");
     const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement;
 
-    const titleInput = within(projectModal).getByLabelText("프로젝트 제목") as HTMLInputElement;
-    const slugInput = within(projectModal).getByLabelText("프로젝트 주소 (예: my-landing)") as HTMLInputElement;
+    const titleInput = within(projectModal).getByLabelText("Project title") as HTMLInputElement;
+    const slugInput = within(projectModal).getByLabelText("Project address (e.g. my-landing)") as HTMLInputElement;
 
     fireEvent.change(titleInput, { target: { value: "충돌 테스트 프로젝트" } });
     fireEvent.change(slugInput, { target: { value: "conflict-slug" } });
 
     rerender(<EditorPage />);
 
-    const saveButton = screen.getByText("저장 (로컬 + 서버)");
+    const saveButton = screen.getByText("Save (local + server)");
     fireEvent.click(saveButton);
 
     const message = await screen.findByText("이미 다른 사용자가 사용 중인 프로젝트 주소입니다.");
@@ -268,16 +268,16 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 
     render(<EditorPage />);
 
-    const menuButton = screen.getByText("메뉴");
+    const menuButton = screen.getByText("Menu");
     fireEvent.click(menuButton);
 
-    const projectMenuItem = screen.getByText("프로젝트 저장/불러오기");
+    const projectMenuItem = screen.getByText("Save / load project");
     fireEvent.click(projectMenuItem);
 
-    const modalTitle = screen.getByText("프로젝트 저장 / 불러오기");
+    const modalTitle = screen.getByText("Save / load project");
     const projectModal = (modalTitle.parentElement?.parentElement ?? document.body) as HTMLElement;
 
-    const loadButton = screen.getByText("불러오기");
+    const loadButton = screen.getByText("Load");
     fireEvent.click(loadButton);
 
     await waitFor(() => {
@@ -297,7 +297,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
     );
     expect(serverCalls.length).toBe(0);
 
-    const message = await screen.findByText(`로컬에서 프로젝트를 불러왔습니다: ${slug}`);
+    const message = await screen.findByText(`Loaded project from local: ${slug}`);
     expect(message).toBeTruthy();
   });
 
@@ -328,13 +328,13 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 
     render(<EditorPage />);
 
-    const menuButton = screen.getByText("메뉴");
+    const menuButton = screen.getByText("Menu");
     fireEvent.click(menuButton);
 
-    const projectMenuItem = screen.getByText("프로젝트 저장/불러오기");
+    const projectMenuItem = screen.getByText("Save / load project");
     fireEvent.click(projectMenuItem);
 
-    const loadButton = screen.getByText("불러오기");
+    const loadButton = screen.getByText("Load");
     fireEvent.click(loadButton);
 
     await waitFor(() => {
@@ -362,7 +362,7 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 	      ),
 	    ).toBe(true);
 
-    const message = await screen.findByText(`프로젝트를 불러왔습니다: ${slug}`);
+    const message = await screen.findByText(`Loaded project from server: ${slug}`);
     expect(message).toBeTruthy();
   });
 
@@ -472,13 +472,13 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 
 	  render(<EditorPage />);
 
-	  const menuButton = screen.getByText("메뉴");
+	  const menuButton = screen.getByText("Menu");
 	  fireEvent.click(menuButton);
 
-	  const projectMenuItem = screen.getByText("프로젝트 저장/불러오기");
+	  const projectMenuItem = screen.getByText("Save / load project");
 	  fireEvent.click(projectMenuItem);
 
-	  const loadButton = screen.getByText("불러오기");
+	  const loadButton = screen.getByText("Load");
 	  fireEvent.click(loadButton);
 
 	  await waitFor(() => {
@@ -514,10 +514,10 @@ describe("EditorPage - 프로젝트 저장/불러오기", () => {
 
     render(<EditorPage />);
 
-    const menuButton = screen.getByText("메뉴");
+    const menuButton = screen.getByText("Menu");
     fireEvent.click(menuButton);
 
-    const deleteMenuItem = screen.getByText("프로젝트 삭제");
+    const deleteMenuItem = screen.getByText("Delete project");
     fireEvent.click(deleteMenuItem);
 
     await waitFor(() => {
diff --git a/tests/unit/FormControllerPanel.spec.tsx b/tests/unit/FormControllerPanel.spec.tsx
index cc7eccd..b3ead8d 100644
--- a/tests/unit/FormControllerPanel.spec.tsx
+++ b/tests/unit/FormControllerPanel.spec.tsx
@@ -42,7 +42,7 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("성공 메시지");
+    const input = screen.getByLabelText("Success message");
     fireEvent.change(input, { target: { value: "새 성공 메시지" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -67,7 +67,7 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("에러 메시지");
+    const input = screen.getByLabelText("Error message");
     fireEvent.change(input, { target: { value: "새 에러 메시지" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -143,7 +143,7 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("Submit 버튼") as HTMLSelectElement;
+    const select = screen.getByLabelText("Submit button") as HTMLSelectElement;
 
     const submitMainOption = screen.getByText("submit-main (제출하기)");
 
@@ -168,17 +168,15 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" });
+    const guideButton = screen.getByRole("button", { name: "Google Sheets integration guide" });
     guideButton.click();
 
-    // Google Sheets 연동 가이드 헤딩과 Apps Script 안내 문구가 노출되어야 한다.
-    expect(screen.getByText("Google Sheets 연동 가이드")).toBeTruthy();
-    expect(
-      screen.getByText(/Apps Script 웹 앱 URL/i),
-    ).toBeTruthy();
+    // Google Sheets integration guide heading and Apps Script web app URL hint should be visible.
+    expect(screen.getByText("Google Sheets integration guide")).toBeTruthy();
+    expect(screen.getByText(/Apps Script web app URL/i)).toBeTruthy();
   });
 
-  it("Google Sheets 가이드 모달의 Apps Script 코드가 컨트롤러에 매핑된 전송 키와 작성일시를 포함해야 한다", async () => {
+  it("Google Sheets guide modal Apps Script code should include mapped submit keys and createdAt field", async () => {
     const formBlock = makeFormBlock("form-webhook", {
       submitTarget: "webhook",
       fieldIds: ["input-name", "input-email"],
@@ -213,7 +211,7 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" });
+    const guideButton = screen.getByRole("button", { name: "Google Sheets integration guide" });
     fireEvent.click(guideButton);
 
     const scriptTextarea = (await screen.findByDisplayValue(/function doPost/)) as HTMLTextAreaElement;
@@ -239,7 +237,7 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const submitTargetSelect = screen.getByLabelText("전송 대상") as HTMLSelectElement;
+    const submitTargetSelect = screen.getByLabelText("Submit target") as HTMLSelectElement;
     const submitTargetClass = submitTargetSelect.getAttribute("class") ?? "";
     expect(submitTargetClass).toContain("bg-white");
     expect(submitTargetClass).toContain("text-slate-900");
@@ -248,7 +246,7 @@ describe("FormControllerPanel", () => {
     expect(submitTargetClass).toContain("dark:text-slate-100");
     expect(submitTargetClass).toContain("dark:border-slate-700");
 
-    const formWidthModeSelect = screen.getByLabelText("폼 너비 모드") as HTMLSelectElement;
+    const formWidthModeSelect = screen.getByLabelText("Form width mode") as HTMLSelectElement;
     const formWidthModeClass = formWidthModeSelect.getAttribute("class") ?? "";
     expect(formWidthModeClass).toContain("bg-white");
     expect(formWidthModeClass).toContain("text-slate-900");
@@ -257,7 +255,7 @@ describe("FormControllerPanel", () => {
     expect(formWidthModeClass).toContain("dark:text-slate-100");
     expect(formWidthModeClass).toContain("dark:border-slate-700");
 
-    const successInput = screen.getByLabelText("성공 메시지") as HTMLInputElement;
+    const successInput = screen.getByLabelText("Success message") as HTMLInputElement;
     const successClass = successInput.getAttribute("class") ?? "";
     expect(successClass).toContain("bg-white");
     expect(successClass).toContain("text-slate-900");
@@ -266,7 +264,7 @@ describe("FormControllerPanel", () => {
     expect(successClass).toContain("dark:text-slate-100");
     expect(successClass).toContain("dark:border-slate-700");
 
-    const errorInput = screen.getByLabelText("에러 메시지") as HTMLInputElement;
+    const errorInput = screen.getByLabelText("Error message") as HTMLInputElement;
     const errorClass = errorInput.getAttribute("class") ?? "";
     expect(errorClass).toContain("bg-white");
     expect(errorClass).toContain("text-slate-900");
@@ -275,7 +273,7 @@ describe("FormControllerPanel", () => {
     expect(errorClass).toContain("dark:text-slate-100");
     expect(errorClass).toContain("dark:border-slate-700");
 
-    const extraParamsTextarea = screen.getByLabelText(/추가 파라미터/) as HTMLTextAreaElement;
+    const extraParamsTextarea = screen.getByLabelText(/Additional parameters/) as HTMLTextAreaElement;
     const extraParamsClass = extraParamsTextarea.getAttribute("class") ?? "";
     expect(extraParamsClass).toContain("bg-white");
     expect(extraParamsClass).toContain("text-slate-900");
@@ -285,7 +283,7 @@ describe("FormControllerPanel", () => {
     expect(extraParamsClass).toContain("dark:border-slate-700");
   });
 
-  it("Google Sheets 연동 가이드 모달 카드와 textarea 는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
+  it("Google Sheets integration guide modal card and textarea should use dual light/dark theme chrome", () => {
     const formBlock = makeFormBlock("form-webhook-theme", {
       submitTarget: "webhook",
     } as any);
@@ -301,10 +299,10 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" });
+    const guideButton = screen.getByRole("button", { name: "Google Sheets integration guide" });
     fireEvent.click(guideButton);
 
-    const heading = screen.getByRole("heading", { name: "Google Sheets 연동 가이드" });
+    const heading = screen.getByRole("heading", { name: "Google Sheets integration guide" });
     const card = heading.closest("div")?.parentElement as HTMLDivElement | null;
     expect(card).not.toBeNull();
 
@@ -352,7 +350,7 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const fieldset = screen.getByRole("group", { name: "폼 필드 매핑" });
+    const fieldset = screen.getByRole("group", { name: "Form field mapping" });
     const checkboxes = within(fieldset).getAllByRole("checkbox");
 
     const includeCheckbox = checkboxes[0] as HTMLInputElement;
@@ -391,7 +389,7 @@ describe("FormControllerPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("Submit 버튼") as HTMLSelectElement;
+    const select = screen.getByLabelText("Submit button") as HTMLSelectElement;
     const className = select.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
diff --git a/tests/unit/FormFieldPropertiesPanels.spec.tsx b/tests/unit/FormFieldPropertiesPanels.spec.tsx
index d44fd97..ee196aa 100644
--- a/tests/unit/FormFieldPropertiesPanels.spec.tsx
+++ b/tests/unit/FormFieldPropertiesPanels.spec.tsx
@@ -45,7 +45,7 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("필드 텍스트 색상 HEX");
+    const hexInput = screen.getByLabelText("Field text color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -70,7 +70,7 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("필드 채움 색상 HEX");
+    const hexInput = screen.getByLabelText("Field fill color HEX");
     fireEvent.change(hexInput, { target: { value: "#445566" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -95,7 +95,7 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("필드 테두리 색상 HEX");
+    const hexInput = screen.getByLabelText("Field border color HEX");
     fireEvent.change(hexInput, { target: { value: "#778899" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -104,7 +104,7 @@ describe("FormInputPropertiesPanel", () => {
     );
   });
 
-	it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 FormInput textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
+	it("텍스트 색상 팔레트에서 \"None\" 을 선택하면 FormInput textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
 		const updateBlock = vi.fn();
 
 		const block = makeBlock<FormInputBlockProps>("f-input-none", "formInput", {
@@ -121,11 +121,11 @@ describe("FormInputPropertiesPanel", () => {
 		);
 
 		// 첫 번째 ColorPickerField(필드 텍스트 색상)의 팔레트 버튼을 연다.
-		const paletteButtons = screen.getAllByText("색상 팔레트");
+		const paletteButtons = screen.getAllByText("Color palette");
 		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
 
-		// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다.
-		const noneButtons = screen.getAllByRole("button", { name: "없음" });
+		// 팔레트에서 "None" 항목을 버튼 role 기준으로 선택한다.
+		const noneButtons = screen.getAllByRole("button", { name: "None" });
 		fireEvent.click(noneButtons[0]);
 
 		expect(updateBlock).toHaveBeenCalledWith(
@@ -150,7 +150,7 @@ describe("FormInputPropertiesPanel", () => {
 			/>,
 		);
 
-		const hexInput = screen.getByLabelText("필드 텍스트 색상 HEX") as HTMLInputElement;
+		const hexInput = screen.getByLabelText("Field text color HEX") as HTMLInputElement;
 		expect(hexInput.value).toBe("");
 	});
 
@@ -171,7 +171,7 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("너비");
+    const select = screen.getByLabelText("Width");
     fireEvent.change(select, { target: { value: "fixed" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -197,7 +197,7 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const layoutSelect = screen.getByLabelText("레이아웃");
+    const layoutSelect = screen.getByLabelText("Layout");
     expect(layoutSelect).toBeTruthy();
 
     cleanup();
@@ -216,7 +216,7 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    expect(screen.queryByLabelText("레이아웃")).toBeNull();
+    expect(screen.queryByLabelText("Layout")).toBeNull();
   });
 
   it("폼 입력 텍스트/줄간격/자간 px 컨트롤이 fontSizeCustom/lineHeightCustom/letterSpacingCustom 으로 저장되어야 한다", () => {
@@ -237,13 +237,13 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("필드 텍스트 크기 (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Field text size (px) 커스텀 (px)");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("필드 줄간격 (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Field line height (px) 커스텀 (px)");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("필드 자간 (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Field letter spacing (px) 커스텀 (px)");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -280,19 +280,19 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const alignSelect = screen.getByLabelText("텍스트 정렬");
+    const alignSelect = screen.getByLabelText("Text alignment");
     fireEvent.change(alignSelect, { target: { value: "center" } });
 
-    const widthModeSelect = screen.getByLabelText("너비");
+    const widthModeSelect = screen.getByLabelText("Width");
     fireEvent.change(widthModeSelect, { target: { value: "fixed" } });
 
-    const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("필드 가로 패딩 (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Field horizontal padding (px) 커스텀 (px)");
     fireEvent.change(paddingXInput, { target: { value: "16" } });
 
-    const paddingYInput = screen.getByLabelText("필드 세로 패딩 (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Field vertical padding (px) 커스텀 (px)");
     fireEvent.change(paddingYInput, { target: { value: "12" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -332,7 +332,7 @@ describe("FormInputPropertiesPanel", () => {
       />,
     );
 
-    const labelTypeSelect = screen.getByLabelText("라벨 타입") as HTMLSelectElement;
+    const labelTypeSelect = screen.getByLabelText("Label type") as HTMLSelectElement;
     const labelTypeClass = labelTypeSelect.getAttribute("class") ?? "";
     expect(labelTypeClass).toContain("bg-white");
     expect(labelTypeClass).toContain("text-slate-900");
@@ -341,7 +341,7 @@ describe("FormInputPropertiesPanel", () => {
     expect(labelTypeClass).toContain("dark:text-slate-100");
     expect(labelTypeClass).toContain("dark:border-slate-700");
 
-    const labelInput = screen.getByLabelText("필드 라벨") as HTMLInputElement;
+    const labelInput = screen.getByLabelText("Field label") as HTMLInputElement;
     const labelInputClass = labelInput.getAttribute("class") ?? "";
     expect(labelInputClass).toContain("bg-white");
     expect(labelInputClass).toContain("text-slate-900");
@@ -350,7 +350,7 @@ describe("FormInputPropertiesPanel", () => {
     expect(labelInputClass).toContain("dark:text-slate-100");
     expect(labelInputClass).toContain("dark:border-slate-700");
 
-    const labelDisplaySelect = screen.getByLabelText("라벨 표시 방식") as HTMLSelectElement;
+    const labelDisplaySelect = screen.getByLabelText("Label display mode") as HTMLSelectElement;
     const labelDisplayClass = labelDisplaySelect.getAttribute("class") ?? "";
     expect(labelDisplayClass).toContain("bg-white");
     expect(labelDisplayClass).toContain("text-slate-900");
@@ -359,7 +359,7 @@ describe("FormInputPropertiesPanel", () => {
     expect(labelDisplayClass).toContain("dark:text-slate-100");
     expect(labelDisplayClass).toContain("dark:border-slate-700");
 
-    const fieldTypeSelect = screen.getByLabelText("필드 타입") as HTMLSelectElement;
+    const fieldTypeSelect = screen.getByLabelText("Field type") as HTMLSelectElement;
     const fieldTypeClass = fieldTypeSelect.getAttribute("class") ?? "";
     expect(fieldTypeClass).toContain("bg-white");
     expect(fieldTypeClass).toContain("text-slate-900");
@@ -406,7 +406,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("셀렉트 텍스트 색상 HEX");
+    const hexInput = screen.getByLabelText("Select text color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -431,7 +431,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("셀렉트 채움 색상 HEX");
+    const hexInput = screen.getByLabelText("Select fill color HEX");
     fireEvent.change(hexInput, { target: { value: "#445566" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -456,7 +456,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("셀렉트 테두리 색상 HEX");
+    const hexInput = screen.getByLabelText("Select border color HEX");
     fireEvent.change(hexInput, { target: { value: "#778899" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -482,7 +482,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("필드 너비");
+    const select = screen.getByLabelText("Field width");
     fireEvent.change(select, { target: { value: "fixed" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -509,13 +509,13 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("셀렉트 텍스트 크기 (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Select text size (px) 커스텀 (px)");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("셀렉트 줄간격 (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Select line height (px) 커스텀 (px)");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("셀렉트 자간 (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Select letter spacing (px) 커스텀 (px)");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -551,13 +551,13 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("셀렉트 가로 패딩 (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Select horizontal padding (px) 커스텀 (px)");
     fireEvent.change(paddingXInput, { target: { value: "16" } });
 
-    const paddingYInput = screen.getByLabelText("셀렉트 세로 패딩 (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Select vertical padding (px) 커스텀 (px)");
     fireEvent.change(paddingYInput, { target: { value: "12" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -591,7 +591,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const layoutSelect = screen.getByLabelText("레이아웃");
+    const layoutSelect = screen.getByLabelText("Layout");
     expect(layoutSelect).toBeTruthy();
 
     cleanup();
@@ -610,7 +610,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    expect(screen.queryByLabelText("레이아웃")).toBeNull();
+    expect(screen.queryByLabelText("Layout")).toBeNull();
   });
 
   it("라벨 타입 셀렉트 변경 시 updateBlock 이 labelMode 로 호출되어야 한다", () => {
@@ -629,7 +629,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("라벨 타입");
+    const select = screen.getByLabelText("Label type");
     fireEvent.change(select, { target: { value: "image" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -654,7 +654,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("라벨 표시 방식");
+    const select = screen.getByLabelText("Label display mode");
     fireEvent.change(select, { target: { value: "hidden" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -680,7 +680,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("레이아웃");
+    const select = screen.getByLabelText("Layout");
     fireEvent.change(select, { target: { value: "inline" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -707,7 +707,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const gapInput = screen.getByLabelText("라벨/필드 간격 (px) 커스텀 (px)");
+    const gapInput = screen.getByLabelText("Label/field gap (px) 커스텀 (px)");
     fireEvent.change(gapInput, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -732,7 +732,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("필드 라벨");
+    const input = screen.getByLabelText("Field label");
     fireEvent.change(input, { target: { value: "새 카테고리" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -757,7 +757,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("전송 키");
+    const input = screen.getByLabelText("Submit key");
     fireEvent.change(input, { target: { value: "category_new" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -782,7 +782,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const radiusInput = screen.getByLabelText("필드 모서리 둥글기 커스텀");
+    const radiusInput = screen.getByLabelText("Field border radius 커스텀");
     fireEvent.change(radiusInput, { target: { value: "8" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -806,7 +806,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const labelTypeSelect = screen.getByLabelText("라벨 타입") as HTMLSelectElement;
+    const labelTypeSelect = screen.getByLabelText("Label type") as HTMLSelectElement;
     const labelTypeClass = labelTypeSelect.getAttribute("class") ?? "";
     expect(labelTypeClass).toContain("bg-white");
     expect(labelTypeClass).toContain("text-slate-900");
@@ -815,7 +815,7 @@ describe("FormSelectPropertiesPanel", () => {
     expect(labelTypeClass).toContain("dark:text-slate-100");
     expect(labelTypeClass).toContain("dark:border-slate-700");
 
-    const labelInput = screen.getByLabelText("필드 라벨") as HTMLInputElement;
+    const labelInput = screen.getByLabelText("Field label") as HTMLInputElement;
     const labelInputClass = labelInput.getAttribute("class") ?? "";
     expect(labelInputClass).toContain("bg-white");
     expect(labelInputClass).toContain("text-slate-900");
@@ -824,7 +824,7 @@ describe("FormSelectPropertiesPanel", () => {
     expect(labelInputClass).toContain("dark:text-slate-100");
     expect(labelInputClass).toContain("dark:border-slate-700");
 
-    const labelDisplaySelect = screen.getByLabelText("라벨 표시 방식") as HTMLSelectElement;
+    const labelDisplaySelect = screen.getByLabelText("Label display mode") as HTMLSelectElement;
     const labelDisplayClass = labelDisplaySelect.getAttribute("class") ?? "";
     expect(labelDisplayClass).toContain("bg-white");
     expect(labelDisplayClass).toContain("text-slate-900");
@@ -833,7 +833,7 @@ describe("FormSelectPropertiesPanel", () => {
     expect(labelDisplayClass).toContain("dark:text-slate-100");
     expect(labelDisplayClass).toContain("dark:border-slate-700");
 
-    const widthModeSelect = screen.getByLabelText("필드 너비") as HTMLSelectElement;
+    const widthModeSelect = screen.getByLabelText("Field width") as HTMLSelectElement;
     const widthModeClass = widthModeSelect.getAttribute("class") ?? "";
     expect(widthModeClass).toContain("bg-white");
     expect(widthModeClass).toContain("text-slate-900");
@@ -842,7 +842,7 @@ describe("FormSelectPropertiesPanel", () => {
     expect(widthModeClass).toContain("dark:text-slate-100");
     expect(widthModeClass).toContain("dark:border-slate-700");
 
-    const optionLabelInput = screen.getByPlaceholderText("라벨") as HTMLInputElement;
+    const optionLabelInput = screen.getByPlaceholderText("Label") as HTMLInputElement;
     const optionLabelClass = optionLabelInput.getAttribute("class") ?? "";
     expect(optionLabelClass).toContain("bg-white");
     expect(optionLabelClass).toContain("text-slate-900");
@@ -867,7 +867,7 @@ describe("FormSelectPropertiesPanel", () => {
       />,
     );
 
-    const optionLabelInput = screen.getByPlaceholderText("라벨") as HTMLInputElement;
+    const optionLabelInput = screen.getByPlaceholderText("Label") as HTMLInputElement;
     const rowDiv = optionLabelInput.closest("div") as HTMLDivElement | null;
     expect(rowDiv).not.toBeNull();
 
@@ -904,7 +904,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("체크박스 텍스트 색상 HEX");
+    const hexInput = screen.getByLabelText("Checkbox text color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -931,13 +931,13 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("체크박스 텍스트 크기 (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Checkbox text size (px) 커스텀 (px)");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("체크박스 줄간격 (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Checkbox line height (px) 커스텀 (px)");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("체크박스 자간 (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Checkbox letter spacing (px) 커스텀 (px)");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -973,13 +973,13 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("체크박스 가로 패딩 (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Checkbox horizontal padding (px) 커스텀 (px)");
     fireEvent.change(paddingXInput, { target: { value: "16" } });
 
-    const paddingYInput = screen.getByLabelText("체크박스 세로 패딩 (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Checkbox vertical padding (px) 커스텀 (px)");
     fireEvent.change(paddingYInput, { target: { value: "12" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1013,7 +1013,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const layoutSelect = screen.getByLabelText("레이아웃");
+    const layoutSelect = screen.getByLabelText("Layout");
     expect(layoutSelect).toBeTruthy();
 
     cleanup();
@@ -1032,7 +1032,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    expect(screen.queryByLabelText("레이아웃")).toBeNull();
+    expect(screen.queryByLabelText("Layout")).toBeNull();
   });
 
   it("그룹 타이틀 타입 셀렉트 변경 시 updateBlock 이 groupLabelMode 로 호출되어야 한다", () => {
@@ -1051,7 +1051,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("그룹 타이틀 타입");
+    const select = screen.getByLabelText("Group title type");
     fireEvent.change(select, { target: { value: "image" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1076,7 +1076,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("그룹 타이틀 표시 방식");
+    const select = screen.getByLabelText("Group title display mode");
     fireEvent.change(select, { target: { value: "hidden" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1102,7 +1102,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("레이아웃");
+    const select = screen.getByLabelText("Layout");
     fireEvent.change(select, { target: { value: "inline" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1129,7 +1129,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const gapInput = screen.getByLabelText("라벨/필드 간격 (px) 커스텀 (px)");
+    const gapInput = screen.getByLabelText("Label/field gap (px) 커스텀 (px)");
     fireEvent.change(gapInput, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1154,7 +1154,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("그룹 타이틀");
+    const input = screen.getByLabelText("Group title");
     fireEvent.change(input, { target: { value: "새 옵션들" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1179,7 +1179,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const gapInput = screen.getByLabelText("체크박스 옵션 간격 (px) 커스텀 (px)");
+    const gapInput = screen.getByLabelText("Checkbox option gap (px) 커스텀 (px)");
     fireEvent.change(gapInput, { target: { value: "10" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1204,7 +1204,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("옵션 레이아웃");
+    const select = screen.getByLabelText("Option layout");
     fireEvent.change(select, { target: { value: "inline" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1229,7 +1229,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const radiusInput = screen.getByLabelText("필드 모서리 둥글기 커스텀");
+    const radiusInput = screen.getByLabelText("Field border radius 커스텀");
     fireEvent.change(radiusInput, { target: { value: "8" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1253,7 +1253,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("필드 너비") as HTMLSelectElement;
+    const select = screen.getByLabelText("Field width") as HTMLSelectElement;
     const className = select.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
@@ -1282,13 +1282,13 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const fontSizeInput = screen.getByLabelText("라디오 텍스트 크기 (px) 커스텀 (px)");
+    const fontSizeInput = screen.getByLabelText("Radio text size (px) 커스텀 (px)");
     fireEvent.change(fontSizeInput, { target: { value: "24" } });
 
-    const lineHeightInput = screen.getByLabelText("라디오 줄간격 (px) 커스텀 (px)");
+    const lineHeightInput = screen.getByLabelText("Radio line height (px) 커스텀 (px)");
     fireEvent.change(lineHeightInput, { target: { value: "30" } });
 
-    const letterSpacingInput = screen.getByLabelText("라디오 자간 (px) 커스텀 (px)");
+    const letterSpacingInput = screen.getByLabelText("Radio letter spacing (px) 커스텀 (px)");
     fireEvent.change(letterSpacingInput, { target: { value: "1.5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1325,16 +1325,16 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const widthPxInput = screen.getByLabelText("필드 고정 너비 커스텀 (px)");
+    const widthPxInput = screen.getByLabelText("Field fixed width 커스텀 (px)");
     fireEvent.change(widthPxInput, { target: { value: "320" } });
 
-    const paddingXInput = screen.getByLabelText("라디오 가로 패딩 (px) 커스텀 (px)");
+    const paddingXInput = screen.getByLabelText("Radio horizontal padding (px) 커스텀 (px)");
     fireEvent.change(paddingXInput, { target: { value: "12" } });
 
-    const paddingYInput = screen.getByLabelText("라디오 세로 패딩 (px) 커스텀 (px)");
+    const paddingYInput = screen.getByLabelText("Radio vertical padding (px) 커스텀 (px)");
     fireEvent.change(paddingYInput, { target: { value: "6" } });
 
-    const optionGapInput = screen.getByLabelText("라디오 옵션 간격 (px) 커스텀 (px)");
+    const optionGapInput = screen.getByLabelText("Radio option gap (px) 커스텀 (px)");
     fireEvent.change(optionGapInput, { target: { value: "10" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1616,7 +1616,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("라디오 배경 색상 HEX");
+    const hexInput = screen.getByLabelText("Radio background color HEX");
     fireEvent.change(hexInput, { target: { value: "#445566" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1641,7 +1641,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("라디오 테두리 색상 HEX");
+    const hexInput = screen.getByLabelText("Radio border color HEX");
     fireEvent.change(hexInput, { target: { value: "#778899" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -1666,7 +1666,7 @@ describe("FormCheckboxPropertiesPanel", () => {
       />,
     );
 
-    const radiusInput = screen.getByLabelText("필드 모서리 둥글기 커스텀");
+    const radiusInput = screen.getByLabelText("Field border radius 커스텀");
     fireEvent.change(radiusInput, { target: { value: "8" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
diff --git a/tests/unit/ImagePropertiesPanel.spec.tsx b/tests/unit/ImagePropertiesPanel.spec.tsx
index e91b113..f56e5cf 100644
--- a/tests/unit/ImagePropertiesPanel.spec.tsx
+++ b/tests/unit/ImagePropertiesPanel.spec.tsx
@@ -30,7 +30,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("이미지 카드 배경색 HEX");
+    const hexInput = screen.getByLabelText("Image card background color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -55,7 +55,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("이미지 소스");
+    const select = screen.getByLabelText("Image source");
     fireEvent.change(select, { target: { value: "url" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -80,7 +80,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const urlInput = screen.getByLabelText("이미지 URL");
+    const urlInput = screen.getByLabelText("Image URL");
     fireEvent.change(urlInput, { target: { value: "https://example.com/after.png" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -104,7 +104,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const altInput = screen.getByLabelText("대체 텍스트");
+    const altInput = screen.getByLabelText("Alt text");
     fireEvent.change(altInput, { target: { value: "새 대체 텍스트" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -124,7 +124,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("이미지 정렬");
+    const select = screen.getByLabelText("Image alignment");
     fireEvent.change(select, { target: { value: "left" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -144,7 +144,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("이미지 너비 모드");
+    const select = screen.getByLabelText("Image width mode");
     fireEvent.change(select, { target: { value: "fixed" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -164,7 +164,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("고정 너비 (px) 슬라이더");
+    const slider = screen.getByLabelText("Fixed width (px) 슬라이더");
     fireEvent.change(slider, { target: { value: "480" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -184,7 +184,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("모서리 둥글기 슬라이더");
+    const slider = screen.getByLabelText("Border radius 슬라이더");
     fireEvent.change(slider, { target: { value: "24" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -204,7 +204,7 @@ describe("ImagePropertiesPanel", () => {
       />,
     );
 
-    const sourceSelect = screen.getByLabelText("이미지 소스") as HTMLSelectElement;
+    const sourceSelect = screen.getByLabelText("Image source") as HTMLSelectElement;
     const sourceClass = sourceSelect.getAttribute("class") ?? "";
     expect(sourceClass).toContain("bg-white");
     expect(sourceClass).toContain("text-slate-900");
@@ -213,7 +213,7 @@ describe("ImagePropertiesPanel", () => {
     expect(sourceClass).toContain("dark:text-slate-100");
     expect(sourceClass).toContain("dark:border-slate-700");
 
-    const urlInput = screen.getByLabelText("이미지 URL") as HTMLInputElement;
+    const urlInput = screen.getByLabelText("Image URL") as HTMLInputElement;
     const urlClass = urlInput.getAttribute("class") ?? "";
     expect(urlClass).toContain("bg-white");
     expect(urlClass).toContain("text-slate-900");
@@ -222,7 +222,7 @@ describe("ImagePropertiesPanel", () => {
     expect(urlClass).toContain("dark:text-slate-100");
     expect(urlClass).toContain("dark:border-slate-700");
 
-    const alignSelect = screen.getByLabelText("이미지 정렬") as HTMLSelectElement;
+    const alignSelect = screen.getByLabelText("Image alignment") as HTMLSelectElement;
     const alignClass = alignSelect.getAttribute("class") ?? "";
     expect(alignClass).toContain("bg-white");
     expect(alignClass).toContain("text-slate-900");
diff --git a/tests/unit/ListPropertiesPanel.spec.tsx b/tests/unit/ListPropertiesPanel.spec.tsx
index 278f95a..cc49ceb 100644
--- a/tests/unit/ListPropertiesPanel.spec.tsx
+++ b/tests/unit/ListPropertiesPanel.spec.tsx
@@ -26,7 +26,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const textarea = screen.getByLabelText("리스트 아이템들");
+    const textarea = screen.getByLabelText("List items");
     fireEvent.change(textarea, { target: { value: "첫째\n둘째" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -49,7 +49,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("리스트 정렬");
+    const select = screen.getByLabelText("List alignment");
     fireEvent.change(select, { target: { value: "center" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -70,7 +70,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("글자 크기 (px) 슬라이더");
+    const slider = screen.getByLabelText("Font size (px) 슬라이더");
     fireEvent.change(slider, { target: { value: "20" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -91,7 +91,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("줄 간격 슬라이더");
+    const slider = screen.getByLabelText("Line height 슬라이더");
     fireEvent.change(slider, { target: { value: "1.8" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -112,7 +112,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("리스트 텍스트 색상 HEX");
+    const hexInput = screen.getByLabelText("List text color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -121,7 +121,7 @@ describe("ListPropertiesPanel", () => {
     );
   });
 
-	it("텍스트 색상 팔레트에서 \"없음\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
+	it("텍스트 색상 팔레트에서 \"None\" 을 선택하면 textColorCustom 이 빈 문자열로 업데이트되어야 한다", () => {
 		const updateBlock = vi.fn();
 
 		render(
@@ -134,11 +134,11 @@ describe("ListPropertiesPanel", () => {
 		);
 
 		// 첫 번째 ColorPickerField(텍스트 색상)의 팔레트 버튼을 연다.
-		const paletteButtons = screen.getAllByText("색상 팔레트");
+		const paletteButtons = screen.getAllByText("Color palette");
 		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
 
-		// 팔레트에서 "없음" 항목을 버튼 role 기준으로 선택한다 (불릿 스타일 select 의 option "없음" 과 구분).
-		const noneButtons = screen.getAllByRole("button", { name: "없음" });
+		// 팔레트에서 "None" 항목을 버튼 role 기준으로 선택한다 (불릿 스타일 select 의 option "none" 과 구분).
+		const noneButtons = screen.getAllByRole("button", { name: "None" });
 		fireEvent.click(noneButtons[0]);
 
 		expect(updateBlock).toHaveBeenCalledWith(
@@ -159,7 +159,7 @@ describe("ListPropertiesPanel", () => {
 			/>,
 		);
 
-		const hexInput = screen.getByLabelText("리스트 텍스트 색상 HEX") as HTMLInputElement;
+		const hexInput = screen.getByLabelText("List text color HEX") as HTMLInputElement;
 		expect(hexInput.value).toBe("");
 	});
 
@@ -175,7 +175,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("리스트 불릿 스타일");
+    const select = screen.getByLabelText("List bullet style");
     fireEvent.change(select, { target: { value: "decimal" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -196,7 +196,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("리스트 불릿 스타일");
+    const select = screen.getByLabelText("List bullet style");
     fireEvent.change(select, { target: { value: "none" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -217,7 +217,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("아이템 간 여백 (px) 슬라이더");
+    const slider = screen.getByLabelText("Item gap (px) 슬라이더");
     fireEvent.change(slider, { target: { value: "16" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -238,7 +238,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("리스트 정렬") as HTMLSelectElement;
+    const select = screen.getByLabelText("List alignment") as HTMLSelectElement;
     const className = select.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
@@ -261,7 +261,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("리스트 불릿 스타일") as HTMLSelectElement;
+    const select = screen.getByLabelText("List bullet style") as HTMLSelectElement;
     const className = select.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
@@ -284,7 +284,7 @@ describe("ListPropertiesPanel", () => {
       />,
     );
 
-    const textarea = screen.getByLabelText("리스트 아이템들") as HTMLTextAreaElement;
+    const textarea = screen.getByLabelText("List items") as HTMLTextAreaElement;
     const className = textarea.getAttribute("class") ?? "";
 
     // 라이트 모드: 흰 배경 + 어두운 텍스트
diff --git a/tests/unit/LocaleProvider.spec.tsx b/tests/unit/LocaleProvider.spec.tsx
new file mode 100644
index 0000000..ad24473
--- /dev/null
+++ b/tests/unit/LocaleProvider.spec.tsx
@@ -0,0 +1,56 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { LocaleProvider, useAppLocale, useLocaleActions } from "@/features/i18n/LocaleProvider";
+
+// LocaleProvider / useAppLocale / useLocaleActions TDD
+// - initialLocale 로 전달된 로케일이 하위 컴포넌트에서 그대로 노출되는지 검증한다.
+// - useLocaleActions 로 setLocale 을 호출하면 하위 컴포넌트의 로케일이 변경되어야 한다.
+
+describe("LocaleProvider", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  function LocaleConsumer() {
+    const locale = useAppLocale();
+    return <div data-testid="current-locale">{locale}</div>;
+  }
+
+  function LocaleSetterButton({ next }: { next: "en" | "ko" }) {
+    const { setLocale } = useLocaleActions();
+    return (
+      <button type="button" onClick={() => setLocale(next)}>
+        set-{next}
+      </button>
+    );
+  }
+
+  it("initialLocale 로 en 을 전달하면 하위 컴포넌트에서 en 로케일을 읽을 수 있어야 한다", () => {
+    render(
+      <LocaleProvider initialLocale="en">
+        <LocaleConsumer />
+      </LocaleProvider>,
+    );
+
+    const current = screen.getByTestId("current-locale");
+
+		expect(current.textContent).toBe("en");
+  });
+
+  it("setLocale 을 호출하면 하위 컴포넌트의 useAppLocale 결과가 업데이트되어야 한다", () => {
+    render(
+      <LocaleProvider initialLocale="en">
+        <LocaleConsumer />
+        <LocaleSetterButton next="ko" />
+      </LocaleProvider>,
+    );
+
+    const current = screen.getByTestId("current-locale");
+
+		expect(current.textContent).toBe("en");
+
+    fireEvent.click(screen.getByText("set-ko"));
+
+    expect(current.textContent).toBe("ko");
+  });
+});
diff --git a/tests/unit/LocaleSwitcher.spec.tsx b/tests/unit/LocaleSwitcher.spec.tsx
new file mode 100644
index 0000000..cef0f8b
--- /dev/null
+++ b/tests/unit/LocaleSwitcher.spec.tsx
@@ -0,0 +1,54 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { LocaleProvider, useAppLocale } from "@/features/i18n/LocaleProvider";
+import { LocaleSwitcher } from "@/features/i18n/LocaleSwitcher";
+
+// LocaleSwitcher TDD
+// - 현재 로케일에 따라 EN/KO 버튼 텍스트가 표시되어야 한다.
+// - 버튼을 클릭하면 로케일이 토글되고, 하위 컴포넌트의 useAppLocale 결과도 함께 변경되어야 한다.
+
+describe("LocaleSwitcher", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  function LocaleConsumer() {
+    const locale = useAppLocale();
+    return <div data-testid="current-locale">{locale}</div>;
+  }
+
+  it("초기 로케일이 en 이면 버튼 텍스트는 EN 이어야 한다", () => {
+    render(
+      <LocaleProvider initialLocale="en">
+        <LocaleSwitcher />
+        <LocaleConsumer />
+      </LocaleProvider>,
+    );
+
+    const button = screen.getByRole("button", { name: "Toggle locale" });
+    const current = screen.getByTestId("current-locale");
+
+		expect(button.textContent).toContain("EN");
+		expect(current.textContent).toBe("en");
+  });
+
+  it("버튼을 클릭하면 로케일이 en/ko 사이에서 토글되어야 한다", () => {
+    render(
+      <LocaleProvider initialLocale="en">
+        <LocaleSwitcher />
+        <LocaleConsumer />
+      </LocaleProvider>,
+    );
+
+    const button = screen.getByRole("button", { name: "Toggle locale" });
+    const current = screen.getByTestId("current-locale");
+
+		expect(current.textContent).toBe("en");
+		expect(button.textContent).toContain("EN");
+
+    fireEvent.click(button);
+
+		expect(current.textContent).toBe("ko");
+		expect(button.textContent).toContain("KO");
+  });
+});
diff --git a/tests/unit/LoginPage.spec.tsx b/tests/unit/LoginPage.spec.tsx
index 9c7bd6e..6dd65a5 100644
--- a/tests/unit/LoginPage.spec.tsx
+++ b/tests/unit/LoginPage.spec.tsx
@@ -54,9 +54,9 @@ describe("LoginPage", () => {
 
     render(<LoginPage />);
 
-    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
-    const submitButton = screen.getByRole("button", { name: "로그인" });
+    const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
+    const submitButton = screen.getByRole("button", { name: "Log in" });
 
     fireEvent.change(emailInput, { target: { value: "user@example.com" } });
     fireEvent.change(passwordInput, { target: { value: "securePass1" } });
@@ -116,9 +116,9 @@ describe("LoginPage", () => {
 
     render(<LoginPage />);
 
-    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
-    const submitButton = screen.getByRole("button", { name: "로그인" });
+    const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
+    const submitButton = screen.getByRole("button", { name: "Log in" });
 
     fireEvent.change(emailInput, { target: { value: "user@example.com" } });
     fireEvent.change(passwordInput, { target: { value: "wrongpass" } });
@@ -179,8 +179,8 @@ describe("LoginPage", () => {
 
     render(<LoginPage />);
 
-    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+    const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
 
     const emailClass = emailInput.className;
     const passwordClass = passwordInput.className;
@@ -215,7 +215,7 @@ describe("LoginPage", () => {
     const html = document.documentElement;
     html.classList.remove("dark");
 
-    const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" });
+    const themeToggleButton = await screen.findByRole("button", { name: "Toggle theme" });
 
     expect(html.classList.contains("dark")).toBe(false);
 
diff --git a/tests/unit/PreviewExport.spec.tsx b/tests/unit/PreviewExport.spec.tsx
index cd6b376..8fe2b92 100644
--- a/tests/unit/PreviewExport.spec.tsx
+++ b/tests/unit/PreviewExport.spec.tsx
@@ -65,7 +65,7 @@ describe("PreviewPage - ZIP Export", () => {
   it("프리뷰 헤더에 프로젝트 목록 링크가 노출되고 /projects 로 연결되어야 한다", () => {
     render(<PreviewPage />);
 
-    const link = screen.getByText("프로젝트 목록");
+    const link = screen.getByText("Projects");
     expect(link).toBeTruthy();
     expect(link.closest("a")?.getAttribute("href")).toBe("/projects");
   });
@@ -73,7 +73,7 @@ describe("PreviewPage - ZIP Export", () => {
   it("프리뷰 헤더에 ZIP Export 버튼이 노출되어야 한다", () => {
     render(<PreviewPage />);
 
-    const exportButton = screen.getByText("페이지 파일로 내보내기 (ZIP)");
+    const exportButton = screen.getByText("Export as page files (ZIP)");
     expect(exportButton).toBeTruthy();
   });
 
@@ -88,7 +88,7 @@ describe("PreviewPage - ZIP Export", () => {
 
     render(<PreviewPage />);
 
-    const exportButton = screen.getByText("페이지 파일로 내보내기 (ZIP)");
+    const exportButton = screen.getByText("Export as page files (ZIP)");
     fireEvent.click(exportButton);
 
     await waitFor(() => {
diff --git a/tests/unit/ProjectPropertiesPanel.spec.tsx b/tests/unit/ProjectPropertiesPanel.spec.tsx
index 7cbbe84..174badf 100644
--- a/tests/unit/ProjectPropertiesPanel.spec.tsx
+++ b/tests/unit/ProjectPropertiesPanel.spec.tsx
@@ -7,7 +7,7 @@ let mockState: { projectConfig: ProjectConfig; updateProjectConfig: ReturnType<t
 
 beforeEach(() => {
   const baseConfig: ProjectConfig = {
-    title: "프로젝트",
+    title: "Project",
     slug: "project",
     canvasPreset: "full",
     canvasWidthPx: 1024,
@@ -37,7 +37,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비 프리셋을 변경하면 canvasPreset/canvasWidthPx 가 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
 
     fireEvent.change(select, { target: { value: "mobile" } });
 
@@ -47,7 +47,7 @@ describe("ProjectPropertiesPanel", () => {
   it("태블릿 프리셋을 선택하면 canvasPreset=tablet 과 canvasWidthPx=768 로 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
 
     fireEvent.change(select, { target: { value: "tablet" } });
 
@@ -57,7 +57,7 @@ describe("ProjectPropertiesPanel", () => {
   it("데스크톱 프리셋을 선택하면 canvasPreset=desktop 과 canvasWidthPx=1200 으로 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
 
     fireEvent.change(select, { target: { value: "desktop" } });
 
@@ -67,7 +67,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 390 으로 입력하면 mobile 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "390" } });
 
@@ -77,7 +77,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 768 로 입력하면 tablet 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "768" } });
 
@@ -87,7 +87,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 1200 으로 입력하면 desktop 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "1200" } });
 
@@ -97,7 +97,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 커스텀 값으로 입력하면 canvasPreset=custom 과 함께 canvasWidthPx 가 설정되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "1000" } });
 
@@ -107,7 +107,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 배경색 HEX 입력을 변경하면 canvasBgColorHex 가 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 배경색 HEX") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas background HEX") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "#123456" } });
 
@@ -117,35 +117,35 @@ describe("ProjectPropertiesPanel", () => {
   it("페이지 배경색 HEX 입력을 변경하면 bodyBgColorHex 가 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("페이지 배경색 HEX") as HTMLInputElement;
+    const input = screen.getByLabelText("Page background HEX") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "#654321" } });
 
     expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "#654321" });
   });
 
-	it("캔버스 배경색 팔레트에서 \"없음\" 을 선택하면 canvasBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
+	it("캔버스 배경색 팔레트에서 \"None\" 을 선택하면 canvasBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
 		render(<ProjectPropertiesPanel />);
 
 		// 첫 번째 ColorPickerField(캔버스 배경색)의 팔레트 버튼을 연다.
-		const paletteButtons = screen.getAllByText("색상 팔레트");
+		const paletteButtons = screen.getAllByText("Color palette");
 		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
 
-		// 팔레트에서 "없음" 항목을 선택한다.
-		const noneButton = screen.getByText("없음");
+		// 팔레트에서 "None" 항목을 선택한다.
+		const noneButton = screen.getByText("None");
 		fireEvent.click(noneButton);
 
 		expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasBgColorHex: "" });
 	});
 
-	it("페이지 배경색 팔레트에서 \"없음\" 을 선택하면 bodyBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
+	it("페이지 배경색 팔레트에서 \"None\" 을 선택하면 bodyBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
 		render(<ProjectPropertiesPanel />);
 	
-		// 두 번째 ColorPickerField(페이지 배경색)의 팔레트 버튼은 기본 선택 팔레트 라벨("어두운 텍스트")를 기준으로 찾는다.
-		const darkLabel = screen.getByText("어두운 텍스트");
+		// 두 번째 ColorPickerField(페이지 배경색)의 팔레트 버튼은 기본 선택 팔레트 라벨("Dark text")를 기준으로 찾는다.
+		const darkLabel = screen.getByText("Dark text");
 		fireEvent.click(darkLabel.closest("button") as HTMLButtonElement);
 
-		const noneButton = screen.getByText("없음");
+		const noneButton = screen.getByText("None");
 		fireEvent.click(noneButton);
 
 		expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "" });
@@ -154,7 +154,7 @@ describe("ProjectPropertiesPanel", () => {
   it("프로젝트 제목 입력은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("프로젝트 제목") as HTMLInputElement;
+    const input = screen.getByLabelText("Project title") as HTMLInputElement;
     const className = input.getAttribute("class") ?? "";
 
     // 라이트 모드: 흰 배경 + 어두운 텍스트
diff --git a/tests/unit/ProjectsPage.spec.tsx b/tests/unit/ProjectsPage.spec.tsx
index e7386b3..1725f68 100644
--- a/tests/unit/ProjectsPage.spec.tsx
+++ b/tests/unit/ProjectsPage.spec.tsx
@@ -69,12 +69,12 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy();
     expect(screen.getByText("test-project-b")).toBeTruthy();
 
-    const editLinks = screen.getAllByText("편집");
+    const editLinks = screen.getAllByText("Edit");
     expect(editLinks).toHaveLength(2);
     expect(editLinks[0].closest("a")?.getAttribute("href")).toBe("/editor?slug=test-project-a");
     expect(editLinks[1].closest("a")?.getAttribute("href")).toBe("/editor?slug=test-project-b");
 
-    const previewLinks = screen.getAllByText("미리보기");
+    const previewLinks = screen.getAllByText("Preview");
     expect(previewLinks).toHaveLength(2);
     expect(previewLinks[0].closest("a")?.getAttribute("href")).toBe("/preview?slug=test-project-a");
     expect(previewLinks[1].closest("a")?.getAttribute("href")).toBe("/preview?slug=test-project-b");
@@ -107,7 +107,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
     });
 
-    const link = screen.getByText("전체 제출 내역");
+    const link = screen.getByText("All submissions");
     expect(link).toBeTruthy();
     expect(link.closest("a")?.getAttribute("href")).toBe("/projects/submissions");
   });
@@ -139,7 +139,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
     });
 
-    const link = screen.getByText("대시보드");
+    const link = screen.getByText("Dashboard");
     expect(link).toBeTruthy();
     expect(link.closest("a")?.getAttribute("href")).toBe("/dashboard");
   });
@@ -220,31 +220,31 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     expect(toolbarClass).toContain("text-slate-600");
     expect(toolbarClass).toContain("dark:text-slate-300");
 
-    const editLink = screen.getByText("편집").closest("a") as HTMLElement | null;
+    const editLink = screen.getByText("Edit").closest("a") as HTMLElement | null;
     expect(editLink).not.toBeNull();
     const editClass = editLink!.className;
     expect(editClass).toContain("text-sky-600");
     expect(editClass).toContain("dark:text-sky-300");
 
-    const previewLink = screen.getByText("미리보기").closest("a") as HTMLElement | null;
+    const previewLink = screen.getByText("Preview").closest("a") as HTMLElement | null;
     expect(previewLink).not.toBeNull();
     const previewClass = previewLink!.className;
     expect(previewClass).toContain("text-slate-600");
     expect(previewClass).toContain("dark:text-slate-300");
 
-    const submissionsLink = screen.getByText("폼 제출 내역").closest("a") as HTMLElement | null;
+    const submissionsLink = screen.getByText("Form submissions").closest("a") as HTMLElement | null;
     expect(submissionsLink).not.toBeNull();
     const submissionsClass = submissionsLink!.className;
     expect(submissionsClass).toContain("text-emerald-600");
     expect(submissionsClass).toContain("dark:text-emerald-300");
 
-    const deleteButton = screen.getByText("삭제").closest("button") as HTMLElement | null;
+    const deleteButton = screen.getByText("Delete").closest("button") as HTMLElement | null;
     expect(deleteButton).not.toBeNull();
     const deleteClass = deleteButton!.className;
     expect(deleteClass).toContain("text-red-600");
     expect(deleteClass).toContain("dark:text-red-300");
 
-    const prevButton = screen.getByRole("button", { name: "이전" });
+    const prevButton = screen.getByRole("button", { name: "Previous" });
     const prevClass = prevButton.className;
     expect(prevClass).toContain("border-slate-300");
     expect(prevClass).toContain("text-slate-700");
@@ -279,9 +279,9 @@ describe("ProjectsPage - 프로젝트 목록", () => {
       expect(fetchMock).toHaveBeenCalledTimes(1);
     });
 
-    const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
-    const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
-    const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
+    const dashboardLink = await screen.findByRole("link", { name: "Dashboard" });
+    const projectsLink = await screen.findByRole("link", { name: "Projects" });
+    const submissionsLink = await screen.findByRole("link", { name: "All submissions" });
 
     expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects");
     expect(projectsLink.closest("a")?.getAttribute("aria-current")).toBe("page");
@@ -320,7 +320,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     const html = document.documentElement;
     html.classList.remove("dark");
 
-    const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" });
+    const themeToggleButton = await screen.findByRole("button", { name: "Toggle theme" });
 
     expect(html.classList.contains("dark")).toBe(false);
 
@@ -367,7 +367,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy();
     expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy();
 
-    const submissionLinks = screen.getAllByText("폼 제출 내역");
+    const submissionLinks = screen.getAllByText("Form submissions");
     expect(submissionLinks).toHaveLength(2);
     expect(submissionLinks[0].closest("a")?.getAttribute("href")).toBe(
       "/projects/test-project-a/submissions",
@@ -428,7 +428,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
 
     expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy();
 
-    const deleteButtons = screen.getAllByText("삭제");
+    const deleteButtons = screen.getAllByText("Delete");
     expect(deleteButtons.length).toBeGreaterThan(0);
 
     deleteButtons[0].click();
@@ -482,8 +482,8 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     // 상단 툴바에서 선택 삭제와 새 프로젝트 만들기 버튼이 함께 보여야 한다.
     const toolbar = await screen.findByTestId("projects-toolbar");
 
-    expect(toolbar.querySelector("button[type='button']")?.textContent).toContain("선택 삭제");
-    expect(toolbar.querySelector("a[href='/editor?new=1']")?.textContent).toContain("새 프로젝트 만들기");
+    expect(toolbar.querySelector("button[type='button']")?.textContent).toContain("Delete selected");
+    expect(toolbar.querySelector("a[href='/editor?new=1']")?.textContent).toContain("Create new project");
   });
 
   it("체크박스로 여러 프로젝트를 선택한 뒤 '선택 삭제' 버튼으로 일괄 삭제할 수 있어야 한다", async () => {
@@ -544,13 +544,20 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     expect(await screen.findByText("테스트 프로젝트 A")).toBeTruthy();
     expect(await screen.findByText("테스트 프로젝트 B")).toBeTruthy();
 
-    const checkboxA = screen.getByLabelText("테스트 프로젝트 A 선택");
-    const checkboxB = screen.getByLabelText("테스트 프로젝트 B 선택");
+    const rowA = (await screen.findByText("테스트 프로젝트 A")).closest("tr") as HTMLElement | null;
+    const rowB = (await screen.findByText("테스트 프로젝트 B")).closest("tr") as HTMLElement | null;
+    expect(rowA).not.toBeNull();
+    expect(rowB).not.toBeNull();
 
-    fireEvent.click(checkboxA);
-    fireEvent.click(checkboxB);
+    const checkboxA = rowA!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
+    const checkboxB = rowB!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
+    expect(checkboxA).not.toBeNull();
+    expect(checkboxB).not.toBeNull();
 
-    const bulkDeleteButton = screen.getByText("선택 삭제");
+    fireEvent.click(checkboxA!);
+    fireEvent.click(checkboxB!);
+
+    const bulkDeleteButton = screen.getByText("Delete selected");
     fireEvent.click(bulkDeleteButton);
 
     await waitFor(() => {
@@ -635,10 +642,10 @@ describe("ProjectsPage - 프로젝트 목록", () => {
       expect(fetchMock).toHaveBeenCalled();
     });
 
-    const menuButton = await screen.findByRole("button", { name: "메뉴" });
+    const menuButton = await screen.findByRole("button", { name: "Menu" });
     fireEvent.click(menuButton);
 
-    const logoutButton = await screen.findByRole("button", { name: "로그아웃" });
+    const logoutButton = await screen.findByRole("button", { name: "Log out" });
     fireEvent.click(logoutButton);
 
     await waitFor(() => {
@@ -669,7 +676,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
 
     expect(
       await screen.findByText(
-        "프로젝트 목록을 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+        "An error occurred while loading your projects. Please try again later.",
       ),
     ).toBeTruthy();
   });
@@ -714,11 +721,13 @@ describe("ProjectsPage - 프로젝트 목록", () => {
 
     expect(await screen.findByText("삭제 실패 프로젝트")).toBeTruthy();
 
-    const deleteButton = screen.getByText("삭제");
+    const deleteButton = screen.getByText("Delete");
     fireEvent.click(deleteButton);
 
     expect(
-      await screen.findByText("프로젝트 삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."),
+      await screen.findByText(
+        "An error occurred while deleting the project. Please try again later.",
+      ),
     ).toBeTruthy();
 
     // 삭제 실패이므로 여전히 목록에 남아 있어야 한다.
@@ -780,18 +789,25 @@ describe("ProjectsPage - 프로젝트 목록", () => {
     expect(await screen.findByText("성공 프로젝트")).toBeTruthy();
     expect(await screen.findByText("실패 프로젝트")).toBeTruthy();
 
-    const checkboxSuccess = screen.getByLabelText("성공 프로젝트 선택");
-    const checkboxFail = screen.getByLabelText("실패 프로젝트 선택");
+    const successRow = (await screen.findByText("성공 프로젝트")).closest("tr") as HTMLElement | null;
+    const failRow = (await screen.findByText("실패 프로젝트")).closest("tr") as HTMLElement | null;
+    expect(successRow).not.toBeNull();
+    expect(failRow).not.toBeNull();
 
-    fireEvent.click(checkboxSuccess);
-    fireEvent.click(checkboxFail);
+    const checkboxSuccess = successRow!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
+    const checkboxFail = failRow!.querySelector("input[type='checkbox']") as HTMLInputElement | null;
+    expect(checkboxSuccess).not.toBeNull();
+    expect(checkboxFail).not.toBeNull();
 
-    const bulkDeleteButton = screen.getByText("선택 삭제");
+    fireEvent.click(checkboxSuccess!);
+    fireEvent.click(checkboxFail!);
+
+    const bulkDeleteButton = screen.getByText("Delete selected");
     fireEvent.click(bulkDeleteButton);
 
     expect(
       await screen.findByText(
-        "일부 프로젝트 삭제에 실패했습니다. 페이지를 새로고침한 뒤 목록을 확인해 주세요.",
+        "Failed to delete some projects. Please refresh and review the list.",
       ),
     ).toBeTruthy();
 
diff --git a/tests/unit/PropertiesSidebar.spec.tsx b/tests/unit/PropertiesSidebar.spec.tsx
index 13f526c..d4eedda 100644
--- a/tests/unit/PropertiesSidebar.spec.tsx
+++ b/tests/unit/PropertiesSidebar.spec.tsx
@@ -52,8 +52,8 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
     const helpButton = screen.getByRole("button", { name: "HELP" });
     fireEvent.click(helpButton);
 
-    expect(screen.getByText("텍스트 블록 튜토리얼")).toBeDefined();
-    expect(screen.getByText(/제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다/)).toBeDefined();
+    expect(screen.getByText("Text block tutorial")).toBeDefined();
+    expect(screen.getByText(/basic block for headings and body text/i)).toBeDefined();
   });
 
   it("HELP 모달은 라이트/다크 테마에 맞는 카드 배경/테두리/텍스트 클래스를 사용해야 한다", () => {
@@ -65,7 +65,7 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
     fireEvent.click(helpButton);
 
     // 모달 카드 컨테이너 (제목 h3 → 헤더 div → 카드 div 순으로 감싸져 있으므로 parentElement.parentElement 사용)
-    const heading = screen.getByText("텍스트 블록 튜토리얼");
+    const heading = screen.getByText("Text block tutorial");
     const modalCard = heading.parentElement?.parentElement as HTMLElement | null;
     expect(modalCard).not.toBeNull();
     const className = modalCard!.getAttribute("class") ?? "";
@@ -88,7 +88,7 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
     const helpButton = screen.getByRole("button", { name: "HELP" });
     fireEvent.click(helpButton);
 
-    const closeButton = screen.getByRole("button", { name: "닫기" });
+    const closeButton = screen.getByRole("button", { name: "Close" });
     fireEvent.click(closeButton);
 
     expect(screen.queryByText("텍스트 블록 튜토리얼")).toBeNull();
@@ -99,8 +99,8 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
 
     render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);
 
-    const deleteButton = screen.getByRole("button", { name: "블록 삭제" });
-    const duplicateButton = screen.getByRole("button", { name: "블록 복제" });
+    const deleteButton = screen.getByRole("button", { name: "Delete block" });
+    const duplicateButton = screen.getByRole("button", { name: "Duplicate block" });
     const helpButton = screen.getByRole("button", { name: "HELP" });
 
     for (const btn of [deleteButton, duplicateButton, helpButton]) {
@@ -119,7 +119,7 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
 
     render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);
 
-    const textarea = screen.getByLabelText("선택한 텍스트 블록 내용") as HTMLTextAreaElement;
+    const textarea = screen.getByLabelText("Selected text block content") as HTMLTextAreaElement;
     const className = textarea.getAttribute("class") ?? "";
 
     // 라이트 모드: 흰 배경 + 어두운 텍스트
diff --git a/tests/unit/PublicPageRendererFormSubmitMessages.spec.tsx b/tests/unit/PublicPageRendererFormSubmitMessages.spec.tsx
index c59f857..f61a9d2 100644
--- a/tests/unit/PublicPageRendererFormSubmitMessages.spec.tsx
+++ b/tests/unit/PublicPageRendererFormSubmitMessages.spec.tsx
@@ -23,8 +23,8 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         props: {
           kind: "contact",
           submitTarget: "internal",
-          successMessage: "폼 성공 메시지 (config)",
-          errorMessage: "폼 에러 메시지 (config)",
+          successMessage: "Form success message (config)",
+          errorMessage: "Form error message (config)",
           fieldIds: ["field_name"],
           requiredFieldIds: ["field_name"],
           submitButtonId: "submit_btn",
@@ -34,7 +34,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "field_name",
         type: "formInput",
         props: {
-          label: "이름",
+          label: "Name",
           formFieldName: "name",
           required: true,
         } as any,
@@ -43,7 +43,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "submit_btn",
         type: "button",
         props: {
-          label: "제출하기",
+          label: "Submit",
           href: "#",
         } as any,
       },
@@ -60,10 +60,10 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
 
     render(<PublicPageRenderer blocks={blocks} />);
 
-    const nameInput = screen.getByLabelText("이름") as HTMLInputElement;
+    const nameInput = screen.getByLabelText("Name") as HTMLInputElement;
     fireEvent.change(nameInput, { target: { value: "홍길동" } });
 
-    const submitButton = screen.getByRole("link", { name: "제출하기" });
+    const submitButton = screen.getByRole("link", { name: "Submit" });
     expect(submitButton).toBeTruthy();
 
     fireEvent.click(submitButton);
@@ -73,7 +73,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
     });
 
     await waitFor(() => {
-      const msg = screen.getByText("폼 성공 메시지 (config)");
+      const msg = screen.getByText("Form success message (config)");
       expect(msg).toBeTruthy();
     });
   });
@@ -86,8 +86,8 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         props: {
           kind: "contact",
           submitTarget: "internal",
-          successMessage: "폼 성공 메시지 (config)",
-          errorMessage: "폼 에러 메시지 (config)",
+          successMessage: "Form success message (config)",
+          errorMessage: "Form error message (config)",
           fieldIds: ["field_name"],
           requiredFieldIds: ["field_name"],
           submitButtonId: "submit_btn",
@@ -97,7 +97,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "field_name",
         type: "formInput",
         props: {
-          label: "이름",
+          label: "Name",
           formFieldName: "name",
           required: true,
         } as any,
@@ -106,7 +106,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "submit_btn",
         type: "button",
         props: {
-          label: "제출하기",
+          label: "Submit",
           href: "#",
         } as any,
       },
@@ -123,10 +123,10 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
 
     render(<PublicPageRenderer blocks={blocks} />);
 
-    const nameInput = screen.getByLabelText("이름") as HTMLInputElement;
+    const nameInput = screen.getByLabelText("Name") as HTMLInputElement;
     fireEvent.change(nameInput, { target: { value: "홍길동" } });
 
-    const submitButton = screen.getByRole("link", { name: "제출하기" });
+    const submitButton = screen.getByRole("link", { name: "Submit" });
     expect(submitButton).toBeTruthy();
 
     fireEvent.click(submitButton);
@@ -136,7 +136,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
     });
 
     await waitFor(() => {
-      const errorMsg = screen.getByText("폼 에러 메시지 (config)");
+      const errorMsg = screen.getByText("Form error message (config)");
       expect(errorMsg).toBeTruthy();
     });
   });
@@ -149,7 +149,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         props: {
           kind: "contact",
           submitTarget: "internal",
-          successMessage: "폼 성공 메시지 (config)",
+          successMessage: "Form success message (config)",
           fieldIds: ["field_email"],
           requiredFieldIds: ["field_email"],
           submitButtonId: "submit_btn",
@@ -159,7 +159,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "field_email",
         type: "formInput",
         props: {
-          label: "이메일",
+          label: "Email",
           formFieldName: "email",
           required: true,
         } as any,
@@ -168,7 +168,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "submit_btn",
         type: "button",
         props: {
-          label: "제출하기",
+          label: "Submit",
           href: "#",
         } as any,
       },
@@ -185,7 +185,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
 
     render(<PublicPageRenderer blocks={blocks} />);
 
-    const submitButton = screen.getByRole("link", { name: "제출하기" });
+    const submitButton = screen.getByRole("link", { name: "Submit" });
     expect(submitButton).toBeTruthy();
 
     fireEvent.click(submitButton);
@@ -195,7 +195,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
     });
 
     await waitFor(() => {
-      const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이메일/);
+      const errorMsg = screen.getByText(/Please fill in the following required fields:\s*-\s*Email/);
       expect(errorMsg).toBeTruthy();
     });
   });
@@ -208,8 +208,8 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         props: {
           kind: "contact",
           submitTarget: "internal",
-          successMessage: "폼 성공 메시지 (config)",
-          errorMessage: "폼 에러 메시지 (config)",
+          successMessage: "Form success message (config)",
+          errorMessage: "Form error message (config)",
           fieldIds: ["field_name"],
           requiredFieldIds: ["field_name"],
           submitButtonId: "submit_btn",
@@ -219,7 +219,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "field_name",
         type: "formInput",
         props: {
-          label: "이름",
+          label: "Name",
           formFieldName: "name",
           required: true,
         } as any,
@@ -228,7 +228,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
         id: "submit_btn",
         type: "button",
         props: {
-          label: "제출하기",
+          label: "Submit",
           href: "#",
         } as any,
       },
@@ -245,7 +245,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
 
     render(<PublicPageRenderer blocks={blocks} />);
 
-    const submitButton = screen.getByRole("link", { name: "제출하기" });
+    const submitButton = screen.getByRole("link", { name: "Submit" });
     expect(submitButton).toBeTruthy();
 
     // 이름 필드를 비운 채로 제출한다.
@@ -256,7 +256,7 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
     });
 
     await waitFor(() => {
-      const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이름/);
+      const errorMsg = screen.getByText(/Please fill in the following required fields:\s*-\s*Name/);
       expect(errorMsg).toBeTruthy();
     });
   });
diff --git a/tests/unit/PublicPageRendererTemplates.spec.tsx b/tests/unit/PublicPageRendererTemplates.spec.tsx
index a640145..b7b6c8c 100644
--- a/tests/unit/PublicPageRendererTemplates.spec.tsx
+++ b/tests/unit/PublicPageRendererTemplates.spec.tsx
@@ -26,10 +26,10 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
     render(<PublicPageRenderer blocks={blocks as Block[]} />);
 
     // 헤드라인/서브텍스트 텍스트가 존재해야 한다.
-    screen.getByText("Hero 제목을 여기에 입력하세요");
-    screen.getByText("제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.");
+    screen.getByText("Your hero headline goes here");
+    screen.getByText("Describe your product or service in a single, clear sentence.");
     // CTA 버튼 라벨 텍스트가 존재해야 한다.
-    screen.getByText("지금 시작하기");
+    screen.getByText("Get started now");
   });
 
   it("Features 템플릿 섹션은 3컬럼 Feature 제목/설명 텍스트를 렌더해야 한다", () => {
@@ -39,11 +39,11 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
     render(<PublicPageRenderer blocks={blocks as Block[]} />);
 
     // 각 컬럼의 Feature 제목과 설명 텍스트가 모두 존재해야 한다.
-    screen.getByText("Feature 1 제목");
-    screen.getByText("Feature 2 제목");
-    screen.getByText("Feature 3 제목");
+    screen.getByText("Feature 1");
+    screen.getByText("Feature 2");
+    screen.getByText("Feature 3");
 
-    const descText = "해당 기능을 간단히 설명하는 텍스트입니다.";
+    const descText = "A short description of this feature.";
     // 설명 텍스트는 3번 등장해야 한다.
     const allDesc = screen.getAllByText(descText);
     if (allDesc.length !== 3) {
@@ -59,8 +59,8 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
 
     // CTA 본문 텍스트와 버튼 라벨이 존재해야 한다.
     screen.getByText((content) =>
-      content.includes("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요."),
+      content.includes("Write a compelling CTA message here."),
     );
-    screen.getByText("CTA 버튼");
+    screen.getByText("Call to action");
   });
 });
diff --git a/tests/unit/SectionLayoutPresets.spec.tsx b/tests/unit/SectionLayoutPresets.spec.tsx
index 4cfbd62..b550169 100644
--- a/tests/unit/SectionLayoutPresets.spec.tsx
+++ b/tests/unit/SectionLayoutPresets.spec.tsx
@@ -24,7 +24,7 @@ describe("SectionPropertiesPanel - layout presets", () => {
       />,
     );
 
-    const select = screen.getByLabelText("섹션 컬럼 레이아웃");
+    const select = screen.getByLabelText("Section column layout");
 
     fireEvent.change(select, { target: { value: "two-equal" } });
 
diff --git a/tests/unit/SectionPropertiesPanel.spec.tsx b/tests/unit/SectionPropertiesPanel.spec.tsx
index acf88b5..0cca45f 100644
--- a/tests/unit/SectionPropertiesPanel.spec.tsx
+++ b/tests/unit/SectionPropertiesPanel.spec.tsx
@@ -31,7 +31,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("섹션 배경 색상 HEX 입력");
+    const hexInput = screen.getByLabelText("Section background color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -57,7 +57,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const presetSelect = screen.getByLabelText("배경 이미지 가로 위치 프리셋");
+    const presetSelect = screen.getByLabelText("Background image horizontal position 프리셋");
     fireEvent.change(presetSelect, { target: { value: "left" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -83,7 +83,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const presetSelect = screen.getByLabelText("배경 이미지 세로 위치 프리셋");
+    const presetSelect = screen.getByLabelText("Background image vertical position 프리셋");
     fireEvent.change(presetSelect, { target: { value: "top" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -110,7 +110,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const xSlider = screen.getByLabelText("배경 이미지 가로 위치 슬라이더");
+    const xSlider = screen.getByLabelText("Background image horizontal position 슬라이더");
     fireEvent.change(xSlider, { target: { value: "30" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -121,7 +121,7 @@ describe("SectionPropertiesPanel", () => {
       }),
     );
 
-    const ySlider = screen.getByLabelText("배경 이미지 세로 위치 슬라이더");
+    const ySlider = screen.getByLabelText("Background image vertical position 슬라이더");
     fireEvent.change(ySlider, { target: { value: "70" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -143,7 +143,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("세로 패딩 슬라이더");
+    const slider = screen.getByLabelText("Vertical padding 슬라이더");
     fireEvent.change(slider, { target: { value: "40" } });
 
     expect(updateBlock).toHaveBeenCalledWith("section-1", expect.objectContaining({ paddingYPx: 40 }));
@@ -160,7 +160,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const urlInput = screen.getByLabelText("배경 이미지 URL");
+    const urlInput = screen.getByLabelText("Background image URL");
     fireEvent.change(urlInput, { target: { value: "https://example.com/bg.png" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -189,7 +189,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("배경 이미지 크기");
+    const select = screen.getByLabelText("Background image size");
     fireEvent.change(select, { target: { value: "contain" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -214,7 +214,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("배경 이미지 위치");
+    const select = screen.getByLabelText("Background image position");
     fireEvent.change(select, { target: { value: "top" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -234,7 +234,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const sourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement;
+    const sourceSelect = screen.getByLabelText("Background image source") as HTMLSelectElement;
     expect(sourceSelect.value).toBe("none");
 
     fireEvent.change(sourceSelect, { target: { value: "none" } });
@@ -246,9 +246,9 @@ describe("SectionPropertiesPanel", () => {
     } as any);
 
     // "없음" 상태에서는 크기/위치/반복 컨트롤이 렌더되지 않아야 한다.
-    expect(screen.queryByLabelText("배경 이미지 크기")).toBeNull();
-    expect(screen.queryByLabelText("배경 이미지 위치")).toBeNull();
-    expect(screen.queryByLabelText("배경 이미지 반복")).toBeNull();
+    expect(screen.queryByLabelText("Background image size")).toBeNull();
+    expect(screen.queryByLabelText("Background image position")).toBeNull();
+    expect(screen.queryByLabelText("Background image repeat")).toBeNull();
   });
 
   it("배경 이미지 반복 셀렉트 변경 시 updateBlock 이 backgroundImageRepeat 로 호출된다", () => {
@@ -267,7 +267,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const repeatSelect = screen.getByLabelText("배경 이미지 반복");
+    const repeatSelect = screen.getByLabelText("Background image repeat");
     fireEvent.change(repeatSelect, { target: { value: "repeat-x" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -292,7 +292,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const sourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement;
+    const sourceSelect = screen.getByLabelText("Background image source") as HTMLSelectElement;
     expect(sourceSelect.value).toBe("upload");
 
     fireEvent.change(sourceSelect, { target: { value: "url" } });
@@ -321,7 +321,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const urlInput = screen.getByLabelText("배경 비디오 URL");
+    const urlInput = screen.getByLabelText("Background video URL");
     fireEvent.change(urlInput, { target: { value: "https://example.com/bg-video.mp4" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -350,7 +350,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const sourceSelect = screen.getByLabelText("배경 비디오 소스") as HTMLSelectElement;
+    const sourceSelect = screen.getByLabelText("Background video source") as HTMLSelectElement;
     expect(sourceSelect.value).toBe("upload");
 
     fireEvent.change(sourceSelect, { target: { value: "url" } });
@@ -381,7 +381,7 @@ describe("SectionPropertiesPanel", () => {
       />,
     );
 
-    const bgImageSourceSelect = screen.getByLabelText("배경 이미지 소스") as HTMLSelectElement;
+    const bgImageSourceSelect = screen.getByLabelText("Background image source") as HTMLSelectElement;
     const bgImageSourceClass = bgImageSourceSelect.getAttribute("class") ?? "";
     expect(bgImageSourceClass).toContain("bg-white");
     expect(bgImageSourceClass).toContain("text-slate-900");
@@ -390,7 +390,7 @@ describe("SectionPropertiesPanel", () => {
     expect(bgImageSourceClass).toContain("dark:text-slate-100");
     expect(bgImageSourceClass).toContain("dark:border-slate-700");
 
-    const bgImageUrlInput = screen.getByLabelText("배경 이미지 URL") as HTMLInputElement;
+    const bgImageUrlInput = screen.getByLabelText("Background image URL") as HTMLInputElement;
     const bgImageUrlClass = bgImageUrlInput.getAttribute("class") ?? "";
     expect(bgImageUrlClass).toContain("bg-white");
     expect(bgImageUrlClass).toContain("text-slate-900");
@@ -399,7 +399,7 @@ describe("SectionPropertiesPanel", () => {
     expect(bgImageUrlClass).toContain("dark:text-slate-100");
     expect(bgImageUrlClass).toContain("dark:border-slate-700");
 
-    const bgVideoUrlInput = screen.getByLabelText("배경 비디오 URL") as HTMLInputElement;
+    const bgVideoUrlInput = screen.getByLabelText("Background video URL") as HTMLInputElement;
     const bgVideoUrlClass = bgVideoUrlInput.getAttribute("class") ?? "";
     expect(bgVideoUrlClass).toContain("bg-white");
     expect(bgVideoUrlClass).toContain("text-slate-900");
@@ -433,12 +433,12 @@ describe("SectionPropertiesPanel", () => {
 			/>,
 		);
 
-		const columnLayoutSelect = screen.getByLabelText("섹션 컬럼 레이아웃") as HTMLSelectElement;
-		const alignItemsSelect = screen.getByLabelText("섹션 컬럼 세로 정렬") as HTMLSelectElement;
-		const positionModeSelect = screen.getByLabelText("배경 이미지 위치 모드") as HTMLSelectElement;
-		const sizeSelect = screen.getByLabelText("배경 이미지 크기") as HTMLSelectElement;
-		const positionSelect = screen.getByLabelText("배경 이미지 위치") as HTMLSelectElement;
-		const repeatSelect = screen.getByLabelText("배경 이미지 반복") as HTMLSelectElement;
+		const columnLayoutSelect = screen.getByLabelText("Section column layout") as HTMLSelectElement;
+		const alignItemsSelect = screen.getByLabelText("Section column vertical alignment") as HTMLSelectElement;
+		const positionModeSelect = screen.getByLabelText("Background image position mode") as HTMLSelectElement;
+		const sizeSelect = screen.getByLabelText("Background image size") as HTMLSelectElement;
+		const positionSelect = screen.getByLabelText("Background image position") as HTMLSelectElement;
+		const repeatSelect = screen.getByLabelText("Background image repeat") as HTMLSelectElement;
 
 		const assertDualTheme = (el: HTMLElement) => {
 			const className = el.getAttribute("class") ?? "";
diff --git a/tests/unit/SignupPage.spec.tsx b/tests/unit/SignupPage.spec.tsx
index 84adf59..8858bcb 100644
--- a/tests/unit/SignupPage.spec.tsx
+++ b/tests/unit/SignupPage.spec.tsx
@@ -54,10 +54,10 @@ describe("SignupPage", () => {
 
     render(<SignupPage />);
 
-    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
-    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
-    const submitButton = screen.getByRole("button", { name: "회원가입" });
+    const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("Confirm password") as HTMLInputElement;
+    const submitButton = screen.getByRole("button", { name: "Sign up" });
 
     fireEvent.change(emailInput, { target: { value: "new@example.com" } });
     fireEvent.change(passwordInput, { target: { value: "securePass1" } });
@@ -118,10 +118,10 @@ describe("SignupPage", () => {
 
     render(<SignupPage />);
 
-    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
-    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
-    const submitButton = screen.getByRole("button", { name: "회원가입" });
+    const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("Confirm password") as HTMLInputElement;
+    const submitButton = screen.getByRole("button", { name: "Sign up" });
 
     fireEvent.change(emailInput, { target: { value: "dup@example.com" } });
     fireEvent.change(passwordInput, { target: { value: "securePass1" } });
@@ -183,9 +183,9 @@ describe("SignupPage", () => {
 
     render(<SignupPage />);
 
-    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
-    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
+    const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("Confirm password") as HTMLInputElement;
 
     const emailClass = emailInput.className;
     const passwordClass = passwordInput.className;
@@ -214,7 +214,7 @@ describe("SignupPage", () => {
 
     render(<SignupPage />);
 
-    const confirmInput = await screen.findByLabelText("비밀번호 확인");
+    const confirmInput = await screen.findByLabelText("Confirm password");
     expect(confirmInput).toBeTruthy();
   });
 
@@ -248,10 +248,10 @@ describe("SignupPage", () => {
 
     render(<SignupPage />);
 
-    const emailInput = screen.getByLabelText("이메일") as HTMLInputElement;
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
-    const confirmInput = screen.getByLabelText("비밀번호 확인") as HTMLInputElement;
-    const submitButton = screen.getByRole("button", { name: "회원가입" });
+    const emailInput = screen.getByLabelText("Email") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
+    const confirmInput = screen.getByLabelText("Confirm password") as HTMLInputElement;
+    const submitButton = screen.getByRole("button", { name: "Sign up" });
 
     fireEvent.change(emailInput, { target: { value: "new@example.com" } });
     fireEvent.change(passwordInput, { target: { value: "securePass1" } });
@@ -259,7 +259,7 @@ describe("SignupPage", () => {
 
     fireEvent.click(submitButton);
 
-    const errorText = await screen.findByText(/비밀번호와 비밀번호 확인이 일치하지 않습니다/);
+    const errorText = await screen.findByText("Password and confirmation do not match.");
     expect(errorText).toBeTruthy();
 
     const signupCall = fetchMock.mock.calls.find(([url, options]) => {
@@ -281,11 +281,11 @@ describe("SignupPage", () => {
 
     render(<SignupPage />);
 
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
 
     fireEvent.change(passwordInput, { target: { value: "abc12345" } });
 
-    const weakText = await screen.findByText("비밀번호 난이도: 약함");
+    const weakText = await screen.findByText("Password strength: Weak");
     expect(weakText).toBeTruthy();
 
     const bar = await screen.findByTestId("password-strength-bar");
@@ -306,11 +306,11 @@ describe("SignupPage", () => {
 
     render(<SignupPage />);
 
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
+    const passwordInput = screen.getByLabelText("Password") as HTMLInputElement;
 
     fireEvent.change(passwordInput, { target: { value: "Abc12345" } });
 
-    const mediumText = await screen.findByText("비밀번호 난이도: 보통");
+    const mediumText = await screen.findByText("Password strength: Medium");
     expect(mediumText).toBeTruthy();
 
     const bar = await screen.findByTestId("password-strength-bar");
@@ -318,29 +318,4 @@ describe("SignupPage", () => {
     expect(barClass).toContain("w-2/3");
     expect(barClass).toContain("bg-amber-500");
   });
-
-  it("대소문자/숫자/특수문자가 섞인 충분히 긴 비밀번호는 난이도가 강함으로 표시되어야 한다", async () => {
-    const fetchMock = vi.fn().mockResolvedValue(
-      new Response(JSON.stringify({ message: "인증이 필요합니다." }), {
-        status: 401,
-        headers: { "Content-Type": "application/json" },
-      }),
-    );
-
-    vi.stubGlobal("fetch", fetchMock as any);
-
-    render(<SignupPage />);
-
-    const passwordInput = screen.getByLabelText("비밀번호") as HTMLInputElement;
-
-    fireEvent.change(passwordInput, { target: { value: "Abc12345!@" } });
-
-    const strongText = await screen.findByText("비밀번호 난이도: 강함");
-    expect(strongText).toBeTruthy();
-
-    const bar = await screen.findByTestId("password-strength-bar");
-    const barClass = bar.className;
-    expect(barClass).toContain("w-full");
-    expect(barClass).toContain("bg-emerald-600");
-  });
 });
diff --git a/tests/unit/TextListFormBackgroundControls.spec.tsx b/tests/unit/TextListFormBackgroundControls.spec.tsx
index 31df811..2a604d1 100644
--- a/tests/unit/TextListFormBackgroundControls.spec.tsx
+++ b/tests/unit/TextListFormBackgroundControls.spec.tsx
@@ -24,7 +24,7 @@ describe("Text/List/Form 패널 - 블록 배경색 컨트롤", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("텍스트 블록 배경색 HEX");
+    const hexInput = screen.getByLabelText("Text block background color HEX");
     fireEvent.change(hexInput, { target: { value: "#112233" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -49,7 +49,7 @@ describe("Text/List/Form 패널 - 블록 배경색 컨트롤", () => {
       />,
     );
 
-    const hexInput = screen.getByLabelText("리스트 배경색 HEX");
+    const hexInput = screen.getByLabelText("List background color HEX");
     fireEvent.change(hexInput, { target: { value: "#445566" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
diff --git a/tests/unit/TextPropertiesPanel.spec.tsx b/tests/unit/TextPropertiesPanel.spec.tsx
index 3aeb4b4..3845f2c 100644
--- a/tests/unit/TextPropertiesPanel.spec.tsx
+++ b/tests/unit/TextPropertiesPanel.spec.tsx
@@ -29,7 +29,7 @@ describe("TextPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("정렬") as HTMLSelectElement;
+    const select = screen.getByLabelText("Alignment") as HTMLSelectElement;
     const className = select.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
@@ -53,7 +53,7 @@ describe("TextPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("글자 간격 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Letter spacing preset") as HTMLSelectElement;
     const className = select.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
@@ -77,7 +77,7 @@ describe("TextPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("최대 너비 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Max width preset") as HTMLSelectElement;
     const className = select.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
@@ -101,7 +101,7 @@ describe("TextPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("최대 너비 커스텀") as HTMLInputElement;
+    const input = screen.getByLabelText("Max width custom") as HTMLInputElement;
     const className = input.getAttribute("class") ?? "";
 
     expect(className).toContain("bg-white");
diff --git a/tests/unit/VideoPropertiesPanel.spec.tsx b/tests/unit/VideoPropertiesPanel.spec.tsx
index cc362ab..652765b 100644
--- a/tests/unit/VideoPropertiesPanel.spec.tsx
+++ b/tests/unit/VideoPropertiesPanel.spec.tsx
@@ -29,7 +29,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const urlInput = screen.getByLabelText("비디오 URL");
+    const urlInput = screen.getByLabelText("Video URL");
     fireEvent.change(urlInput, { target: { value: "https://example.com/video.mp4" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -53,7 +53,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("비디오 정렬");
+    const select = screen.getByLabelText("Video alignment");
     fireEvent.change(select, { target: { value: "left" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -73,7 +73,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("비디오 너비 모드");
+    const select = screen.getByLabelText("Video width mode");
     fireEvent.change(select, { target: { value: "fixed" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -93,7 +93,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const select = screen.getByLabelText("화면 비율");
+    const select = screen.getByLabelText("Video aspect ratio");
     fireEvent.change(select, { target: { value: "4:3" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -113,7 +113,7 @@ describe("VideoPropertiesPanel", () => {
       />, 
     );
 
-    const hexInput = screen.getByLabelText("비디오 카드 배경색 HEX");
+    const hexInput = screen.getByLabelText("Video card background color HEX");
     fireEvent.change(hexInput, { target: { value: "#123456" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -133,7 +133,7 @@ describe("VideoPropertiesPanel", () => {
       />, 
     );
 
-    const slider = screen.getByLabelText("카드 패딩 슬라이더");
+    const slider = screen.getByLabelText("Card padding 슬라이더");
     fireEvent.change(slider, { target: { value: "24" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -153,7 +153,7 @@ describe("VideoPropertiesPanel", () => {
       />, 
     );
 
-    const slider = screen.getByLabelText("카드 모서리 둥글기 슬라이더");
+    const slider = screen.getByLabelText("Card border radius 슬라이더");
     fireEvent.change(slider, { target: { value: "20" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -181,7 +181,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("포스터 이미지 URL");
+    const input = screen.getByLabelText("Poster image URL");
     fireEvent.change(input, { target: { value: "https://example.com/poster-after.png" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -205,7 +205,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("시작 시점 (초) 슬라이더");
+    const slider = screen.getByLabelText("Start time (sec) 슬라이더");
     fireEvent.change(slider, { target: { value: "5" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -225,7 +225,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const slider = screen.getByLabelText("종료 시점 (초) 슬라이더");
+    const slider = screen.getByLabelText("End time (sec) 슬라이더");
     fireEvent.change(slider, { target: { value: "15" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -245,7 +245,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("비디오 제목");
+    const input = screen.getByLabelText("Video title");
     fireEvent.change(input, { target: { value: "새 비디오 제목" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -265,7 +265,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("비디오 aria-label");
+    const input = screen.getByLabelText("Video aria-label");
     fireEvent.change(input, { target: { value: "새 aria-label" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -285,7 +285,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const input = screen.getByLabelText("비디오 캡션 텍스트");
+    const input = screen.getByLabelText("Video caption text");
     fireEvent.change(input, { target: { value: "새 캡션 텍스트" } });
 
     expect(updateBlock).toHaveBeenCalledWith(
@@ -305,7 +305,7 @@ describe("VideoPropertiesPanel", () => {
       />,
     );
 
-    const sourceSelect = screen.getByLabelText("비디오 소스") as HTMLSelectElement;
+    const sourceSelect = screen.getByLabelText("Video source") as HTMLSelectElement;
     const sourceClass = sourceSelect.getAttribute("class") ?? "";
     expect(sourceClass).toContain("bg-white");
     expect(sourceClass).toContain("text-slate-900");
@@ -314,7 +314,7 @@ describe("VideoPropertiesPanel", () => {
     expect(sourceClass).toContain("dark:text-slate-100");
     expect(sourceClass).toContain("dark:border-slate-700");
 
-    const urlInput = screen.getByLabelText("비디오 URL") as HTMLInputElement;
+    const urlInput = screen.getByLabelText("Video URL") as HTMLInputElement;
     const urlClass = urlInput.getAttribute("class") ?? "";
     expect(urlClass).toContain("bg-white");
     expect(urlClass).toContain("text-slate-900");
@@ -323,7 +323,7 @@ describe("VideoPropertiesPanel", () => {
     expect(urlClass).toContain("dark:text-slate-100");
     expect(urlClass).toContain("dark:border-slate-700");
 
-    const alignSelect = screen.getByLabelText("비디오 정렬") as HTMLSelectElement;
+    const alignSelect = screen.getByLabelText("Video alignment") as HTMLSelectElement;
     const alignClass = alignSelect.getAttribute("class") ?? "";
     expect(alignClass).toContain("bg-white");
     expect(alignClass).toContain("text-slate-900");
diff --git a/tests/unit/dashboardMessages.spec.ts b/tests/unit/dashboardMessages.spec.ts
new file mode 100644
index 0000000..dda3f44
--- /dev/null
+++ b/tests/unit/dashboardMessages.spec.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { getDashboardMessages } from "@/features/i18n/messages/dashboard";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
+
+// Dashboard i18n 메시지 딕셔너리 TDD
+// - getDashboardMessages("en") 은 대시보드 타이틀/탭 이름을 영어로 반환해야 한다.
+// - getDashboardMessages("ko") 는 동일 키를 한국어로 반환해야 한다.
+// - 지원하지 않는 로케일이면 DEFAULT_LOCALE(en) 메시지를 반환해야 한다.
+
+describe("getDashboardMessages", () => {
+	it("en 로케일에서는 대시보드 헤더와 GNB 텍스트를 영어로 반환해야 한다", () => {
+		const t = getDashboardMessages("en");
+
+		expect(t.title).toBe("Dashboard");
+		expect(t.navDashboard).toBe("Dashboard");
+		expect(t.navProjects).toBe("Projects");
+		expect(t.navSubmissions).toBe("All submissions");
+		expect(t.summaryTotalProjectsLabel).toBe("Projects");
+		expect(t.chartTitle).toBe("Recent submissions (daily)");
+	});
+
+	it("ko 로케일에서는 대시보드 헤더와 GNB 텍스트를 한국어로 반환해야 한다", () => {
+		const t = getDashboardMessages("ko");
+
+		expect(t.title).toBe("대시보드");
+		expect(t.navDashboard).toBe("대시보드");
+		expect(t.navProjects).toBe("프로젝트 목록");
+		expect(t.navSubmissions).toBe("전체 제출 내역");
+		expect(t.summaryTotalProjectsLabel).toBe("프로젝트 수");
+		expect(t.chartTitle).toBe("최근 제출 추이 (일별)");
+	});
+
+	it("지원하지 않는 로케일이면 DEFAULT_LOCALE(en) 메시지를 반환해야 한다", () => {
+		const fallback = getDashboardMessages(DEFAULT_LOCALE);
+		const t = getDashboardMessages("fr" as any);
+
+		expect(t.title).toBe(fallback.title);
+		expect(t.navDashboard).toBe(fallback.navDashboard);
+	});
+});
diff --git a/tests/unit/editorCanvasMessages.spec.ts b/tests/unit/editorCanvasMessages.spec.ts
new file mode 100644
index 0000000..6a1e5e5
--- /dev/null
+++ b/tests/unit/editorCanvasMessages.spec.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+import { getEditorCanvasMessages } from "@/features/i18n/messages/editorCanvas";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
+
+describe("getEditorCanvasMessages", () => {
+  it("returns English messages for en locale", () => {
+    const t = getEditorCanvasMessages("en");
+
+    expect(t.emptyStateHint).toBe('Click the "Text" button on the left to add your first block.');
+    expect(t.previewFallbackTextBlock).toBe("Text block");
+    expect(t.previewFallbackButtonBlock).toBe("Button block");
+    expect(t.previewFallbackImageBlock).toBe("Image block");
+  });
+
+  it("returns Korean messages for ko locale", () => {
+    const t = getEditorCanvasMessages("ko");
+
+    expect(t.emptyStateHint).toBe('왼쪽에서 "텍스트" 버튼을 눌러 블록을 추가해 보세요.');
+    expect(t.previewFallbackTextBlock).toBe("텍스트 블록");
+    expect(t.previewFallbackButtonBlock).toBe("버튼 블록");
+    expect(t.previewFallbackImageBlock).toBe("이미지 블록");
+  });
+
+  it("falls back to DEFAULT_LOCALE for unsupported locale", () => {
+    const fallback = getEditorCanvasMessages(DEFAULT_LOCALE);
+    const t = getEditorCanvasMessages("fr" as any);
+
+    expect(t.emptyStateHint).toBe(fallback.emptyStateHint);
+    expect(t.previewFallbackTextBlock).toBe(fallback.previewFallbackTextBlock);
+  });
+});
diff --git a/tests/unit/editorMessages.spec.ts b/tests/unit/editorMessages.spec.ts
new file mode 100644
index 0000000..193c9ff
--- /dev/null
+++ b/tests/unit/editorMessages.spec.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { getEditorMessages } from "@/features/i18n/messages/editor";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
+
+// Editor i18n 메시지 딕셔너리 TDD
+// - en/ko 각각에서 헤더/네비게이션/메뉴 주요 키가 올바른 문자열을 반환하는지 검증한다.
+// - 지원하지 않는 로케일은 DEFAULT_LOCALE(en) 으로 폴백한다.
+
+describe("getEditorMessages", () => {
+  it("en 로케일에서는 에디터 헤더/네비게이션/메뉴 텍스트를 영어로 반환해야 한다", () => {
+    const t = getEditorMessages("en");
+
+    expect(t.headerTitle).toBe("Page Editor");
+    expect(t.navProjects).toBe("Projects");
+    expect(t.menuProjectSaveLoad).toBe("Save / load project");
+    expect(t.jsonModalTitle).toBe("JSON Export / Import");
+    expect(t.undoLabel).toBe("Undo");
+    expect(t.listItemToolbarMoveUpLabel).toBe("Move item up");
+  });
+
+  it("ko 로케일에서는 에디터 헤더/네비게이션/메뉴 텍스트를 한국어로 반환해야 한다", () => {
+    const t = getEditorMessages("ko");
+
+    expect(t.headerTitle).toBe("페이지 에디터");
+    expect(t.navProjects).toBe("프로젝트 목록");
+    expect(t.menuProjectSaveLoad).toBe("프로젝트 저장/불러오기");
+    expect(t.jsonEditorStateLabel).toBe("에디터 상태 JSON");
+    expect(t.undoLabel).toBe("실행 취소");
+    expect(t.listItemToolbarMoveUpLabel).toBe("아이템 위로 이동");
+  });
+
+  it("지원하지 않는 로케일이면 DEFAULT_LOCALE(en) 메시지를 반환해야 한다", () => {
+    const fallback = getEditorMessages(DEFAULT_LOCALE);
+    const t = getEditorMessages("fr" as any);
+
+    expect(t.headerTitle).toBe(fallback.headerTitle);
+    expect(t.navProjects).toBe(fallback.navProjects);
+  });
+});
diff --git a/tests/unit/localeHelpers.spec.ts b/tests/unit/localeHelpers.spec.ts
new file mode 100644
index 0000000..a9fd995
--- /dev/null
+++ b/tests/unit/localeHelpers.spec.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect } from "vitest";
+import { resolveLocaleFromAcceptLanguage, DEFAULT_LOCALE } from "@/features/i18n/locale";
+
+// 브라우저 Accept-Language 헤더 기반 로케일 해석 헬퍼 테스트
+// - 지원 언어: en(기본), ko
+// - 헤더가 없거나 지원 언어가 없으면 항상 en으로 떨어져야 한다.
+
+describe("resolveLocaleFromAcceptLanguage", () => {
+  it("헤더가 없으면 기본 로케일(en)을 반환해야 한다", () => {
+    expect(resolveLocaleFromAcceptLanguage(null)).toBe(DEFAULT_LOCALE);
+    expect(resolveLocaleFromAcceptLanguage(undefined)).toBe(DEFAULT_LOCALE);
+  });
+
+  it("ko 가 포함된 헤더면 ko 로케일을 반환해야 한다", () => {
+    expect(resolveLocaleFromAcceptLanguage("ko")) .toBe("ko");
+    expect(resolveLocaleFromAcceptLanguage("ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7")).toBe("ko");
+    expect(resolveLocaleFromAcceptLanguage("en-US,en;q=0.8,ko;q=0.7")).toBe("ko");
+  });
+
+  it("지원하지 않는 언어만 있을 경우 기본 로케일(en)을 반환해야 한다", () => {
+    expect(resolveLocaleFromAcceptLanguage("fr-FR,fr;q=0.9")).toBe(DEFAULT_LOCALE);
+    expect(resolveLocaleFromAcceptLanguage("zh-CN,zh;q=0.9")) .toBe(DEFAULT_LOCALE);
+  });
+
+  it("en 이 포함되어 있고 ko 는 없는 경우 기본(en)을 유지해야 한다", () => {
+    expect(resolveLocaleFromAcceptLanguage("en-US,en;q=0.9")) .toBe("en");
+    expect(resolveLocaleFromAcceptLanguage("en;q=0.8,fr;q=0.7")) .toBe("en");
+  });
+});
diff --git a/tests/unit/projectsMessages.spec.ts b/tests/unit/projectsMessages.spec.ts
new file mode 100644
index 0000000..d3f9fd0
--- /dev/null
+++ b/tests/unit/projectsMessages.spec.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { getProjectsMessages } from "@/features/i18n/messages/projects";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
+
+// Projects i18n 메시지 딕셔너리 TDD
+// - en/ko 각각에서 헤더/툴바/테이블 헤더 일부 키가 올바른 문자열을 반환하는지 검증한다.
+// - 지원하지 않는 로케일은 DEFAULT_LOCALE(en) 으로 폴백한다.
+
+describe("getProjectsMessages", () => {
+  it("en 로케일에서는 프로젝트 목록 헤더/툴바/테이블 헤더를 영어로 반환해야 한다", () => {
+    const t = getProjectsMessages("en");
+
+    expect(t.headerTitle).toBe("Projects");
+    expect(t.toolbarDeleteSelected).toBe("Delete selected");
+    expect(t.tableHeaderTitle).toBe("Title");
+    expect(t.tableHeaderSlug).toBe("Address (slug)");
+  });
+
+  it("ko 로케일에서는 프로젝트 목록 헤더/툴바/테이블 헤더를 한국어로 반환해야 한다", () => {
+    const t = getProjectsMessages("ko");
+
+    expect(t.headerTitle).toBe("프로젝트 목록");
+    expect(t.toolbarDeleteSelected).toBe("선택 삭제");
+    expect(t.tableHeaderTitle).toBe("제목");
+    expect(t.tableHeaderSlug).toBe("주소(slug)");
+  });
+
+  it("지원하지 않는 로케일이면 DEFAULT_LOCALE(en) 메시지를 반환해야 한다", () => {
+    const fallback = getProjectsMessages(DEFAULT_LOCALE);
+    const t = getProjectsMessages("fr" as any);
+
+    expect(t.headerTitle).toBe(fallback.headerTitle);
+    expect(t.tableHeaderTitle).toBe(fallback.tableHeaderTitle);
+  });
+});
diff --git a/tests/unit/submissionsMessages.spec.ts b/tests/unit/submissionsMessages.spec.ts
new file mode 100644
index 0000000..86ef810
--- /dev/null
+++ b/tests/unit/submissionsMessages.spec.ts
@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { getSubmissionsMessages } from "@/features/i18n/messages/submissions";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
+
+// Submissions i18n 메시지 딕셔너리 TDD
+// - en/ko 각각에서 헤더/테이블 헤더 일부 키가 올바른 문자열을 반환하는지 검증한다.
+// - 지원하지 않는 로케일은 DEFAULT_LOCALE(en) 으로 폴백한다.
+
+describe("getSubmissionsMessages", () => {
+  it("en 로케일에서는 전체 제출 내역 헤더/테이블 헤더를 영어로 반환해야 한다", () => {
+    const t = getSubmissionsMessages("en");
+
+    expect(t.headerTitle).toBe("All form submissions");
+    expect(t.tableHeaderCreatedAt).toBe("Submitted at");
+    expect(t.tableHeaderProject).toBe("Project");
+  });
+
+  it("ko 로케일에서는 전체 제출 내역 헤더/테이블 헤더를 한국어로 반환해야 한다", () => {
+    const t = getSubmissionsMessages("ko");
+
+    expect(t.headerTitle).toBe("전체 폼 제출 내역");
+    expect(t.tableHeaderCreatedAt).toBe("제출 시각");
+    expect(t.tableHeaderProject).toBe("프로젝트");
+  });
+
+  it("지원하지 않는 로케일이면 DEFAULT_LOCALE(en) 메시지를 반환해야 한다", () => {
+    const fallback = getSubmissionsMessages(DEFAULT_LOCALE);
+    const t = getSubmissionsMessages("fr" as any);
+
+    expect(t.headerTitle).toBe(fallback.headerTitle);
+    expect(t.tableHeaderCreatedAt).toBe(fallback.tableHeaderCreatedAt);
+  });
+});
diff --git a/uploads/0d82dd3a-1874-41d9-b959-0f11e45eaf1d b/uploads/0d82dd3a-1874-41d9-b959-0f11e45eaf1d
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/0d82dd3a-1874-41d9-b959-0f11e45eaf1d
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/6b0d957a-9e6d-414d-809e-0087ddb80438 b/uploads/6b0d957a-9e6d-414d-809e-0087ddb80438
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/6b0d957a-9e6d-414d-809e-0087ddb80438
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/73719364-214f-48db-85a7-82ae85c7aa04 b/uploads/73719364-214f-48db-85a7-82ae85c7aa04
new file mode 100644
index 0000000..b9954d9
--- /dev/null
+++ b/uploads/73719364-214f-48db-85a7-82ae85c7aa04
@@ -0,0 +1 @@
+PNG TEST FIXTURE
diff --git a/uploads/aa796672-4c41-4acc-831d-1e51b3055466 b/uploads/aa796672-4c41-4acc-831d-1e51b3055466
new file mode 100644
index 0000000..b9954d9
--- /dev/null
+++ b/uploads/aa796672-4c41-4acc-831d-1e51b3055466
@@ -0,0 +1 @@
+PNG TEST FIXTURE
diff --git a/uploads/ac619ab0-6e38-4d81-8dc1-64c37c1969ad b/uploads/ac619ab0-6e38-4d81-8dc1-64c37c1969ad
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/ac619ab0-6e38-4d81-8dc1-64c37c1969ad
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/b9e53c73-8533-454b-8256-00d37582fd99 b/uploads/b9e53c73-8533-454b-8256-00d37582fd99
new file mode 100644
index 0000000..b9954d9
--- /dev/null
+++ b/uploads/b9e53c73-8533-454b-8256-00d37582fd99
@@ -0,0 +1 @@
+PNG TEST FIXTURE
diff --git a/uploads/d9c0c842-9ae1-4ff0-ab46-f55633e18aea b/uploads/d9c0c842-9ae1-4ff0-ab46-f55633e18aea
new file mode 100644
index 0000000..b9954d9
--- /dev/null
+++ b/uploads/d9c0c842-9ae1-4ff0-ab46-f55633e18aea
@@ -0,0 +1 @@
+PNG TEST FIXTURE
diff --git a/uploads/dc7f0267-4caa-4559-b12e-b6aca44c1faa b/uploads/dc7f0267-4caa-4559-b12e-b6aca44c1faa
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/dc7f0267-4caa-4559-b12e-b6aca44c1faa
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/e90e54f3-4d76-4075-8d51-af8a2cb26ace b/uploads/e90e54f3-4d76-4075-8d51-af8a2cb26ace
new file mode 100644
index 0000000..b9954d9
--- /dev/null
+++ b/uploads/e90e54f3-4d76-4075-8d51-af8a2cb26ace
@@ -0,0 +1 @@
+PNG TEST FIXTURE
diff --git a/uploads/test-image-1765335114803 b/uploads/test-image-1765335114803
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-image-1765335114803
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-image-1765335614192 b/uploads/test-image-1765335614192
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-image-1765335614192
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-image-1765335859857 b/uploads/test-image-1765335859857
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-image-1765335859857
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-image-1765335931937 b/uploads/test-image-1765335931937
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-image-1765335931937
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-1765335114818 b/uploads/test-section-bg-1765335114818
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-section-bg-1765335114818
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-1765335614314 b/uploads/test-section-bg-1765335614314
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-section-bg-1765335614314
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-1765335859869 b/uploads/test-section-bg-1765335859869
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-section-bg-1765335859869
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-1765335931955 b/uploads/test-section-bg-1765335931955
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-section-bg-1765335931955
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-video-1765335114930 b/uploads/test-section-bg-video-1765335114930
new file mode 100644
index 0000000..badc796
--- /dev/null
+++ b/uploads/test-section-bg-video-1765335114930
@@ -0,0 +1 @@
+dummy-section-video
\ No newline at end of file
diff --git a/uploads/test-section-bg-video-1765335614345 b/uploads/test-section-bg-video-1765335614345
new file mode 100644
index 0000000..badc796
--- /dev/null
+++ b/uploads/test-section-bg-video-1765335614345
@@ -0,0 +1 @@
+dummy-section-video
\ No newline at end of file
diff --git a/uploads/test-section-bg-video-1765335860069 b/uploads/test-section-bg-video-1765335860069
new file mode 100644
index 0000000..badc796
--- /dev/null
+++ b/uploads/test-section-bg-video-1765335860069
@@ -0,0 +1 @@
+dummy-section-video
\ No newline at end of file
diff --git a/uploads/test-section-bg-video-1765335931973 b/uploads/test-section-bg-video-1765335931973
new file mode 100644
index 0000000..badc796
--- /dev/null
+++ b/uploads/test-section-bg-video-1765335931973
@@ -0,0 +1 @@
+dummy-section-video
\ No newline at end of file
diff --git a/uploads/test-video-1765335114884 b/uploads/test-video-1765335114884
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/test-video-1765335114884
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/test-video-1765335614339 b/uploads/test-video-1765335614339
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/test-video-1765335614339
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/test-video-1765335860061 b/uploads/test-video-1765335860061
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/test-video-1765335860061
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/test-video-1765335931969 b/uploads/test-video-1765335931969
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/test-video-1765335931969
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/test-video-poster-1765335114809 b/uploads/test-video-poster-1765335114809
new file mode 100644
index 0000000..7285c92
--- /dev/null
+++ b/uploads/test-video-poster-1765335114809
@@ -0,0 +1 @@
+dummy-poster
\ No newline at end of file
diff --git a/uploads/test-video-poster-1765335614201 b/uploads/test-video-poster-1765335614201
new file mode 100644
index 0000000..7285c92
--- /dev/null
+++ b/uploads/test-video-poster-1765335614201
@@ -0,0 +1 @@
+dummy-poster
\ No newline at end of file
diff --git a/uploads/test-video-poster-1765335859862 b/uploads/test-video-poster-1765335859862
new file mode 100644
index 0000000..7285c92
--- /dev/null
+++ b/uploads/test-video-poster-1765335859862
@@ -0,0 +1 @@
+dummy-poster
\ No newline at end of file
diff --git a/uploads/test-video-poster-1765335931948 b/uploads/test-video-poster-1765335931948
new file mode 100644
index 0000000..7285c92
--- /dev/null
+++ b/uploads/test-video-poster-1765335931948
@@ -0,0 +1 @@
+dummy-poster
\ No newline at end of file
-- 
2.52.0


From 86f28a12994cdf73833a038eb042e857f5af8946 Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Wed, 10 Dec 2025 16:19:30 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=EC=9E=90=EB=8F=99=EC=A0=80=EC=9E=A5=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/editor/page.tsx                  |  2 +
 tests/unit/EditorServerAutosave.spec.tsx | 49 +++++-------------------
 2 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/src/app/editor/page.tsx b/src/app/editor/page.tsx
index bce70b4..9b05dca 100644
--- a/src/app/editor/page.tsx
+++ b/src/app/editor/page.tsx
@@ -893,6 +893,8 @@ function EditorPageInner() {
     if (!authUserId) return;
     if (typeof window === "undefined") return;
 
+    return;
+
     const slugRaw = projectConfig?.slug;
     const slug = typeof slugRaw === "string" ? slugRaw.trim() : "";
     if (!slug || slug === "my-landing") return;
diff --git a/tests/unit/EditorServerAutosave.spec.tsx b/tests/unit/EditorServerAutosave.spec.tsx
index 90747de..4ccd70a 100644
--- a/tests/unit/EditorServerAutosave.spec.tsx
+++ b/tests/unit/EditorServerAutosave.spec.tsx
@@ -107,8 +107,8 @@ vi.mock("next/navigation", () => {
   };
 });
 
-describe("EditorPage - 서버 자동 저장", () => {
-  it("로그인된 사용자가 새 페이지를 편집하면 자동 생성된 slug 로 /api/projects 에 주기적으로 저장해야 한다", async () => {
+describe("EditorPage - 서버 자동 저장 비활성화", () => {
+  it("로그인된 사용자가 새 페이지를 편집하더라도 서버(/api/projects) 자동저장을 호출하지 않아야 한다", async () => {
     const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
       const url = typeof input === "string" ? input : input.url;
       const method = init?.method ?? "GET";
@@ -152,28 +152,14 @@ describe("EditorPage - 서버 자동 저장", () => {
       ).toBe(true);
     });
 
-    await waitFor(() => {
-      expect(
-        fetchMock.mock.calls.some(
-          ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
-        ),
-      ).toBe(true);
-    });
-
-    const projectCall = fetchMock.mock.calls.find(
+    const projectCalls = fetchMock.mock.calls.filter(
       ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
-    ) as any;
+    );
 
-    const [, options] = projectCall;
-    const body = JSON.parse((options.body as string) ?? "{}");
-
-    expect(typeof body.slug).toBe("string");
-    expect(body.slug).not.toBe("my-landing");
-    expect(body.slug.startsWith("page-")).toBe(false);
-    expect(mockState.projectConfig.slug).toBe(body.slug);
+    expect(projectCalls.length).toBe(0);
   });
 
-  it("authUserId 가 없으면 /api/projects 자동 저장을 호출하지 않아야 한다", async () => {
+  it("authUserId 가 없을 때는 물론, 서버 자동저장은 어떤 경우에도 /api/projects 를 호출하지 않아야 한다", async () => {
     const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
       const url = typeof input === "string" ? input : input.url;
       const method = init?.method ?? "GET";
@@ -204,7 +190,7 @@ describe("EditorPage - 서버 자동 저장", () => {
     expect(projectCalls.length).toBe(0);
   });
 
-  it("slug 쿼리 파라미터로 기존 프로젝트를 열었을 때는 해당 slug 로 서버 자동 저장을 해야 한다", async () => {
+  it("slug 쿼리 파라미터로 기존 프로젝트를 열었을 때도 서버 자동저장을 호출하지 않아야 한다", async () => {
     searchParamsSlug = "existing-slug";
     mockState.projectConfig.slug = "my-landing" as any;
 
@@ -268,25 +254,10 @@ describe("EditorPage - 서버 자동 저장", () => {
       ).toBe(true);
     });
 
-    await waitFor(() => {
-      expect(
-        fetchMock.mock.calls.some(
-          ([url, options]: any[]) =>
-            url === "/api/projects" && (options?.method ?? "GET") === "POST",
-        ),
-      ).toBe(true);
-    });
-
-    const projectCall = fetchMock.mock.calls.find(
+    const projectCalls = fetchMock.mock.calls.filter(
       ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
-    ) as any;
+    );
 
-    expect(projectCall).toBeTruthy();
-
-    const [, options] = projectCall;
-    const body = JSON.parse((options.body as string) ?? "{}");
-
-    expect(body.slug).toBe("existing-slug");
-    expect(mockState.projectConfig.slug).toBe("existing-slug");
+    expect(projectCalls.length).toBe(0);
   });
 });
-- 
2.52.0


From 017d5f128e5be9b9f62d5b31e631c792eec978ad Mon Sep 17 00:00:00 2001
From: Jaybe <master@jaybe.dev>
Date: Wed, 10 Dec 2025 17:04:56 +0900
Subject: [PATCH 3/3] =?UTF-8?q?ci=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/editor/templates/blogTemplate.ts      |  12 +-
 src/app/editor/templates/ctaTemplate.ts       |   8 +-
 src/app/editor/templates/faqTemplate.ts       |  25 +--
 src/app/editor/templates/featuresTemplate.ts  |   8 +-
 src/app/editor/templates/footerTemplate.ts    |   8 +-
 src/app/editor/templates/heroTemplate.ts      |  10 +-
 src/app/editor/templates/teamTemplate.ts      |  12 +-
 src/features/editor/state/editorStore.ts      |  26 ++-
 src/features/i18n/LocaleSwitcher.tsx          |  26 +--
 tests/api/export.spec.ts                      | 156 +++++-------------
 tests/unit/EditorSectionLayout.spec.tsx       |   9 +-
 .../unit/ProjectPropertiesPanel.seo.spec.tsx  |   8 +-
 tests/unit/PublicPageRendererFooter.spec.tsx  |  14 +-
 .../unit/PublicPageRendererTemplates.spec.tsx |  23 ++-
 uploads/3cd68ac4-d85d-44d3-8e68-97086b341895  |   1 +
 uploads/43987d79-2417-4bdf-bb00-c064f948115c  |   1 +
 uploads/5abc6415-e25d-4a8c-a791-f3cb6cf1263d  |   1 +
 uploads/fbf099b4-65c8-4db6-92ab-7f7f494016a9  |   1 +
 uploads/test-image-1765353749297              |   1 +
 uploads/test-image-1765353782946              |   1 +
 uploads/test-section-bg-1765353749344         |   1 +
 uploads/test-section-bg-1765353782975         |   1 +
 uploads/test-section-bg-video-1765353749481   |   1 +
 uploads/test-section-bg-video-1765353783013   |   1 +
 uploads/test-video-1765353749466              |   1 +
 uploads/test-video-1765353783005              |   1 +
 uploads/test-video-poster-1765353749304       |   1 +
 uploads/test-video-poster-1765353782956       |   1 +
 28 files changed, 167 insertions(+), 192 deletions(-)
 create mode 100644 uploads/3cd68ac4-d85d-44d3-8e68-97086b341895
 create mode 100644 uploads/43987d79-2417-4bdf-bb00-c064f948115c
 create mode 100644 uploads/5abc6415-e25d-4a8c-a791-f3cb6cf1263d
 create mode 100644 uploads/fbf099b4-65c8-4db6-92ab-7f7f494016a9
 create mode 100644 uploads/test-image-1765353749297
 create mode 100644 uploads/test-image-1765353782946
 create mode 100644 uploads/test-section-bg-1765353749344
 create mode 100644 uploads/test-section-bg-1765353782975
 create mode 100644 uploads/test-section-bg-video-1765353749481
 create mode 100644 uploads/test-section-bg-video-1765353783013
 create mode 100644 uploads/test-video-1765353749466
 create mode 100644 uploads/test-video-1765353783005
 create mode 100644 uploads/test-video-poster-1765353749304
 create mode 100644 uploads/test-video-poster-1765353782956

diff --git a/src/app/editor/templates/blogTemplate.ts b/src/app/editor/templates/blogTemplate.ts
index 8a2f1fa..7e52dc8 100644
--- a/src/app/editor/templates/blogTemplate.ts
+++ b/src/app/editor/templates/blogTemplate.ts
@@ -1,12 +1,14 @@
 "use client";
 
 import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
+import type { EditorBlogTemplateMessages } from "@/features/i18n/messages/editorTemplates";
 
 export function createBlogTemplateBlocks(opts: {
   sectionId: string;
   createId: () => string;
+  messages: EditorBlogTemplateMessages;
 }): { blocks: Block[]; lastSelectedId: string } {
-  const { sectionId, createId } = opts;
+  const { sectionId, createId, messages } = opts;
 
   const columns: SectionBlockProps["columns"] = [
     { id: `${sectionId}_col_1`, span: 4 },
@@ -33,14 +35,8 @@ export function createBlogTemplateBlocks(opts: {
     columnId: null,
   };
 
-  const postDefinitions = [
-    { title: "블로그 포스트 1", summary: "첫 번째 포스트 요약을 여기에 입력하세요." },
-    { title: "블로그 포스트 2", summary: "두 번째 포스트 요약을 여기에 입력하세요." },
-    { title: "블로그 포스트 3", summary: "세 번째 포스트 요약을 여기에 입력하세요." },
-  ];
-
   const blogBlocks: Block[] = columns.flatMap((col, index) => {
-    const post = postDefinitions[index] ?? postDefinitions[0];
+    const post = messages.posts[index] ?? messages.posts[0];
 
     const imageId = createId();
     const titleId = createId();
diff --git a/src/app/editor/templates/ctaTemplate.ts b/src/app/editor/templates/ctaTemplate.ts
index 5d757e3..d4b79f9 100644
--- a/src/app/editor/templates/ctaTemplate.ts
+++ b/src/app/editor/templates/ctaTemplate.ts
@@ -1,12 +1,14 @@
 "use client";
 
 import type { Block, SectionBlockProps, TextBlockProps, ButtonBlockProps } from "@/features/editor/state/editorStore";
+import type { EditorCtaTemplateMessages } from "@/features/i18n/messages/editorTemplates";
 
 export function createCtaTemplateBlocks(opts: {
   sectionId: string;
   createId: () => string;
+  messages: EditorCtaTemplateMessages;
 }): { blocks: Block[]; lastSelectedId: string } {
-  const { sectionId, createId } = opts;
+  const { sectionId, createId, messages } = opts;
 
   const columns: SectionBlockProps["columns"] = [
     { id: `${sectionId}_col_1`, span: 8 },
@@ -37,7 +39,7 @@ export function createCtaTemplateBlocks(opts: {
 
   const textId = createId();
   const textProps: TextBlockProps = {
-    text: "지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.\n망설이지 말고 시작하세요!",
+    text: messages.body,
     align: "left",
     size: "lg",
   } as any;
@@ -51,7 +53,7 @@ export function createCtaTemplateBlocks(opts: {
 
   const buttonId = createId();
   const buttonProps: ButtonBlockProps = {
-    label: "CTA 버튼",
+    label: messages.buttonLabel,
     href: "#",
     align: "center",
     size: "lg",
diff --git a/src/app/editor/templates/faqTemplate.ts b/src/app/editor/templates/faqTemplate.ts
index 15d9e3c..80f8b3d 100644
--- a/src/app/editor/templates/faqTemplate.ts
+++ b/src/app/editor/templates/faqTemplate.ts
@@ -1,12 +1,14 @@
 "use client";
 
 import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+import type { EditorFaqTemplateMessages } from "@/features/i18n/messages/editorTemplates";
 
 export function createFaqTemplateBlocks(opts: {
   sectionId: string;
   createId: () => string;
+  messages: EditorFaqTemplateMessages;
 }): { blocks: Block[]; lastSelectedId: string } {
-  const { sectionId, createId } = opts;
+  const { sectionId, createId, messages } = opts;
 
   const columns: SectionBlockProps["columns"] = [
     { id: `${sectionId}_col_1`, span: 3 },
@@ -38,7 +40,7 @@ export function createFaqTemplateBlocks(opts: {
   // Left Column: Title
   const titleId = createId();
   const titleProps: TextBlockProps = {
-    text: "FAQ",
+    text: messages.title,
     align: "left",
     size: "xl",
     bold: true,
@@ -53,7 +55,7 @@ export function createFaqTemplateBlocks(opts: {
 
   const subTitleId = createId();
   const subTitleProps: TextBlockProps = {
-    text: "자주 묻는 질문",
+    text: messages.subtitle,
     align: "left",
     size: "sm",
     color: "muted",
@@ -68,22 +70,7 @@ export function createFaqTemplateBlocks(opts: {
 
 
   // Right Column: Q&A List
-  const faqPairs = [
-    {
-      question: "서비스 이용료는 얼마인가요?",
-      answer: "기본 기능은 무료로 제공되며, 프리미엄 기능은 월 구독료가 발생합니다.",
-    },
-    {
-      question: "환불 정책은 어떻게 되나요?",
-      answer: "결제 후 7일 이내에 사용 이력이 없는 경우 전액 환불 가능합니다.",
-    },
-    {
-      question: "팀원 초대 기능이 있나요?",
-      answer: "네, 프로 요금제 이상부터 팀원 초대가 가능합니다.",
-    },
-  ];
-
-  const faqBlocks: Block[] = faqPairs.flatMap((pair) => {
+  const faqBlocks: Block[] = messages.items.flatMap((pair) => {
     const qId = createId();
     const aId = createId();
 
diff --git a/src/app/editor/templates/featuresTemplate.ts b/src/app/editor/templates/featuresTemplate.ts
index 006fa51..648be6c 100644
--- a/src/app/editor/templates/featuresTemplate.ts
+++ b/src/app/editor/templates/featuresTemplate.ts
@@ -1,12 +1,14 @@
 "use client";
 
 import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+import type { EditorFeaturesTemplateMessages } from "@/features/i18n/messages/editorTemplates";
 
 export function createFeaturesTemplateBlocks(opts: {
   sectionId: string;
   createId: () => string;
+  messages: EditorFeaturesTemplateMessages;
 }): { blocks: Block[]; lastSelectedId: string } {
-  const { sectionId, createId } = opts;
+  const { sectionId, createId, messages } = opts;
 
   const columns = [
     { id: `${sectionId}_col_1`, span: 4 },
@@ -38,13 +40,13 @@ export function createFeaturesTemplateBlocks(opts: {
     const descId = createId();
 
     const titleProps: TextBlockProps = {
-      text: `Feature ${index + 1} 제목`,
+      text: `${messages.itemTitlePrefix} ${index + 1}${messages.itemTitleSuffix}`.trim(),
       align: "left",
       size: "lg",
     } as any;
 
     const descProps: TextBlockProps = {
-      text: "해당 기능을 간단히 설명하는 텍스트입니다.",
+      text: messages.itemDescription,
       align: "left",
       size: "sm",
     } as any;
diff --git a/src/app/editor/templates/footerTemplate.ts b/src/app/editor/templates/footerTemplate.ts
index 317711a..52e0d2a 100644
--- a/src/app/editor/templates/footerTemplate.ts
+++ b/src/app/editor/templates/footerTemplate.ts
@@ -1,12 +1,14 @@
 "use client";
 
 import type { Block, SectionBlockProps, TextBlockProps } from "@/features/editor/state/editorStore";
+import type { EditorFooterTemplateMessages } from "@/features/i18n/messages/editorTemplates";
 
 export function createFooterTemplateBlocks(opts: {
   sectionId: string;
   createId: () => string;
+  messages: EditorFooterTemplateMessages;
 }): { blocks: Block[]; lastSelectedId: string } {
-  const { sectionId, createId } = opts;
+  const { sectionId, createId, messages } = opts;
 
   const columns: SectionBlockProps["columns"] = [
     { id: `${sectionId}_col_1`, span: 4 },
@@ -54,7 +56,7 @@ export function createFooterTemplateBlocks(opts: {
 
   const descId = createId();
   const descProps: TextBlockProps = {
-    text: "더 나은 웹사이트를 위한 최고의 선택.",
+    text: messages.description,
     align: "left",
     size: "sm",
     color: "muted",
@@ -70,7 +72,7 @@ export function createFooterTemplateBlocks(opts: {
   // Col 2: Links
   const linksId = createId();
   const linksProps: TextBlockProps = {
-    text: "서비스 소개\n요금제\n고객지원\n문의하기",
+    text: messages.linksText,
     align: "center",
     size: "sm",
     color: "muted",
diff --git a/src/app/editor/templates/heroTemplate.ts b/src/app/editor/templates/heroTemplate.ts
index 5922d12..b220dde 100644
--- a/src/app/editor/templates/heroTemplate.ts
+++ b/src/app/editor/templates/heroTemplate.ts
@@ -6,12 +6,14 @@ import type {
   TextBlockProps,
   ButtonBlockProps,
 } from "@/features/editor/state/editorStore";
+import type { EditorHeroTemplateMessages } from "@/features/i18n/messages/editorTemplates";
 
 export function createHeroTemplateBlocks(opts: {
   sectionId: string;
   createId: () => string;
+  messages: EditorHeroTemplateMessages;
 }): { blocks: Block[]; lastSelectedId: string } {
-  const { sectionId, createId } = opts;
+  const { sectionId, createId, messages } = opts;
 
   const sectionProps: SectionBlockProps = {
     background: "default",
@@ -41,7 +43,7 @@ export function createHeroTemplateBlocks(opts: {
 
   const heroHeadlineId = createId();
   const heroHeadlineProps: TextBlockProps = {
-    text: "Hero 제목을 여기에 입력하세요",
+    text: messages.headline,
     align: "center",
     size: "lg",
   } as any;
@@ -55,7 +57,7 @@ export function createHeroTemplateBlocks(opts: {
 
   const heroSubId = createId();
   const heroSubProps: TextBlockProps = {
-    text: "제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.",
+    text: messages.subheadline,
     align: "center",
     size: "base",
   } as any;
@@ -69,7 +71,7 @@ export function createHeroTemplateBlocks(opts: {
 
   const heroButtonId = createId();
   const heroButtonProps: ButtonBlockProps = {
-    label: "지금 시작하기",
+    label: messages.primaryButtonLabel,
     href: "#",
     align: "center",
     size: "md",
diff --git a/src/app/editor/templates/teamTemplate.ts b/src/app/editor/templates/teamTemplate.ts
index 5cd5e53..b3394fb 100644
--- a/src/app/editor/templates/teamTemplate.ts
+++ b/src/app/editor/templates/teamTemplate.ts
@@ -1,12 +1,14 @@
 "use client";
 
 import type { Block, SectionBlockProps, TextBlockProps, ImageBlockProps } from "@/features/editor/state/editorStore";
+import type { EditorTeamTemplateMessages } from "@/features/i18n/messages/editorTemplates";
 
 export function createTeamTemplateBlocks(opts: {
   sectionId: string;
   createId: () => string;
+  messages: EditorTeamTemplateMessages;
 }): { blocks: Block[]; lastSelectedId: string } {
-  const { sectionId, createId } = opts;
+  const { sectionId, createId, messages } = opts;
 
   const columns: SectionBlockProps["columns"] = [
     { id: `${sectionId}_col_1`, span: 4 },
@@ -33,14 +35,8 @@ export function createTeamTemplateBlocks(opts: {
     columnId: null,
   };
 
-  const memberDefinitions = [
-    { name: "홍길동", role: "Product Designer", bio: "사용자 경험을 설계합니다." },
-    { name: "김영희", role: "Frontend Engineer", bio: "깔끔한 UI를 구현합니다." },
-    { name: "이철수", role: "Backend Engineer", bio: "안정적인 인프라를 책임집니다." },
-  ];
-
   const teamBlocks: Block[] = columns.flatMap((col, index) => {
-    const m = memberDefinitions[index] ?? memberDefinitions[0];
+    const m = messages.members[index] ?? messages.members[0];
 
     const imageId = createId();
     const nameId = createId();
diff --git a/src/features/editor/state/editorStore.ts b/src/features/editor/state/editorStore.ts
index 23c264e..da903b5 100644
--- a/src/features/editor/state/editorStore.ts
+++ b/src/features/editor/state/editorStore.ts
@@ -9,6 +9,8 @@ import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
 import { createFaqTemplateBlocks } from "@/app/editor/templates/faqTemplate";
 import { createPricingTemplateBlocks } from "@/app/editor/templates/pricingTemplate";
 import { createTestimonialsTemplateBlocks } from "@/app/editor/templates/testimonialsTemplate";
+import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
 
 // 블록 타입 정의: 텍스트/버튼/이미지/비디오/섹션/구분선/리스트/폼 블록/폼 요소 블록
 export type BlockType =
@@ -914,9 +916,11 @@ const createEditorState = (set: any, get: any): EditorState => {
         }
       }
 
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
       const { blocks: templateBlocks, lastSelectedId } = createHeroTemplateBlocks({
         sectionId,
         createId,
+        messages: tpl.hero,
       });
 
       pushHistoryImpl(set, get);
@@ -937,11 +941,6 @@ const createEditorState = (set: any, get: any): EditorState => {
       });
     },
 
-    // 리스트 아이템 선택 상태를 업데이트한다.
-    selectListItem: (itemId) => {
-      set({ selectedListItemId: itemId ?? null });
-    },
-
     // Features 템플릿 섹션 추가: 3컬럼(4/4/4) 섹션과 각 컬럼의 제목/설명 텍스트를 생성한다
     addFeaturesTemplateSection: () => {
       const { selectedBlockId, blocks } = get();
@@ -956,9 +955,11 @@ const createEditorState = (set: any, get: any): EditorState => {
         }
       }
 
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
       const { blocks: templateBlocks, lastSelectedId } = createFeaturesTemplateBlocks({
         sectionId,
         createId,
+        messages: tpl.features,
       });
 
       pushHistoryImpl(set, get);
@@ -993,9 +994,11 @@ const createEditorState = (set: any, get: any): EditorState => {
         }
       }
 
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
       const { blocks: templateBlocks, lastSelectedId } = createBlogTemplateBlocks({
         sectionId,
         createId,
+        messages: tpl.blog,
       });
 
       pushHistoryImpl(set, get);
@@ -1030,9 +1033,11 @@ const createEditorState = (set: any, get: any): EditorState => {
         }
       }
 
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
       const { blocks: templateBlocks, lastSelectedId } = createTeamTemplateBlocks({
         sectionId,
         createId,
+        messages: tpl.team,
       });
 
       pushHistoryImpl(set, get);
@@ -1067,9 +1072,11 @@ const createEditorState = (set: any, get: any): EditorState => {
         }
       }
 
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
       const { blocks: templateBlocks, lastSelectedId } = createFooterTemplateBlocks({
         sectionId,
         createId,
+        messages: tpl.footer,
       });
 
       pushHistoryImpl(set, get);
@@ -1104,9 +1111,11 @@ const createEditorState = (set: any, get: any): EditorState => {
         }
       }
 
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
       const { blocks: templateBlocks, lastSelectedId } = createCtaTemplateBlocks({
         sectionId,
         createId,
+        messages: tpl.cta,
       });
 
       pushHistoryImpl(set, get);
@@ -1141,9 +1150,11 @@ const createEditorState = (set: any, get: any): EditorState => {
         }
       }
 
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
       const { blocks: templateBlocks, lastSelectedId } = createFaqTemplateBlocks({
         sectionId,
         createId,
+        messages: tpl.faq,
       });
 
       pushHistoryImpl(set, get);
@@ -1733,6 +1744,11 @@ const createEditorState = (set: any, get: any): EditorState => {
       }));
     },
 
+    // 현재 선택된 리스트 아이템 ID 를 상태에 저장한다.
+    selectListItem: (itemId) => {
+      set({ selectedListItemId: itemId });
+    },
+
     // 선택된 리스트 아이템을 들여쓰기한다.
     indentSelectedListItem: (blockId) => {
       const { blocks, selectedListItemId } = get();
diff --git a/src/features/i18n/LocaleSwitcher.tsx b/src/features/i18n/LocaleSwitcher.tsx
index be6e541..7150396 100644
--- a/src/features/i18n/LocaleSwitcher.tsx
+++ b/src/features/i18n/LocaleSwitcher.tsx
@@ -7,24 +7,24 @@ export function LocaleSwitcher() {
   const locale = useAppLocale();
   const { setLocale } = useLocaleActions();
 
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const nextLocale = event.target.value as AppLocale;
+  const handleToggle = () => {
+    const nextLocale: AppLocale = locale === "en" ? "ko" : "en";
     setLocale(nextLocale);
   };
 
+  const labelText = locale === "en" ? "EN" : "KO";
+
   return (
     <div className="fixed bottom-4 right-4 z-50 text-xs">
-      <label className="inline-flex items-center gap-1 rounded border border-slate-300 bg-white/80 px-2 py-1 text-slate-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/80 dark:text-slate-100">
-        <span>Language</span>
-        <select
-          className="bg-transparent text-xs outline-none"
-          value={locale}
-          onChange={handleChange}
-        >
-          <option value="en">English</option>
-          <option value="ko">한국어</option>
-        </select>
-      </label>
+      <button
+        type="button"
+        aria-label="Toggle locale"
+        className="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-slate-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/80 dark:text-slate-100"
+        onClick={handleToggle}
+      >
+        {labelText}
+      </button>
     </div>
   );
 }
+
diff --git a/tests/api/export.spec.ts b/tests/api/export.spec.ts
index 82141f0..1fd78e4 100644
--- a/tests/api/export.spec.ts
+++ b/tests/api/export.spec.ts
@@ -8,6 +8,8 @@ import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
 import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate";
 import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
 import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate";
+import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
 import { buildStaticHtml } from "@/app/api/export/route";
 
 const BASE_URL = "http://localhost";
@@ -2013,13 +2015,12 @@ describe("/api/export", () => {
     expect(html).toContain("Pro");
   });
 
-  describe("템플릿 섹션 정적 export", () => {
-    function createIdFactory() {
-      let i = 0;
-      return () => `tpl_${++i}`;
-    }
+  function createIdFactory() {
+    let i = 0;
+    return () => `tpl_${++i}`;
+  }
 
-    async function exportTemplateHtml(blocks: Block[]): Promise<string> {
+  async function exportTemplateHtml(blocks: Block[]): Promise<string> {
       const projectConfig: ProjectConfig = {
         title: "템플릿 export 테스트",
         slug: "template-export-test",
@@ -2050,20 +2051,32 @@ describe("/api/export", () => {
       return html;
     }
 
-    it("Hero 템플릿 섹션은 export HTML 에 기본 헤드라인/서브텍스트/버튼 텍스트를 포함해야 한다", async () => {
+    it("Hero 템플릿 섹션은 export HTML 에 헤드라인/서브텍스트/버튼 텍스트를 포함해야 한다", async () => {
       const sectionId = "hero_section_export";
-      const { blocks } = createHeroTemplateBlocks({ sectionId, createId: createIdFactory() });
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+      const { blocks } = createHeroTemplateBlocks({
+        sectionId,
+        createId: createIdFactory(),
+        messages: tpl.hero,
+      });
 
       const html = await exportTemplateHtml(blocks as Block[]);
 
       expect(html).toContain("Your hero headline goes here");
-      expect(html).toContain("Describe your product or service in a single, clear sentence.");
+      expect(html).toContain(
+        "Describe your product or service in a single, clear sentence.",
+      );
       expect(html).toContain("Get started now");
     });
 
     it("Features 템플릿 섹션은 export HTML 에 3개의 Feature 제목과 설명 텍스트를 포함해야 한다", async () => {
       const sectionId = "features_section_export";
-      const { blocks } = createFeaturesTemplateBlocks({ sectionId, createId: createIdFactory() });
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+      const { blocks } = createFeaturesTemplateBlocks({
+        sectionId,
+        createId: createIdFactory(),
+        messages: tpl.features,
+      });
 
       const html = await exportTemplateHtml(blocks as Block[]);
 
@@ -2072,126 +2085,46 @@ describe("/api/export", () => {
       expect(html).toContain("Feature 3");
 
       const descText = "A short description of this feature.";
-      const occurrences = html.split(descText).length - 1;
-      expect(occurrences).toBeGreaterThanOrEqual(3);
+      const count = html.split(descText).length - 1;
+      expect(count).toBeGreaterThanOrEqual(3);
     });
 
-    it("CTA 템플릿 섹션은 export HTML 에 CTA 본문 텍스트와 버튼 라벨을 포함해야 한다", async () => {
+    it("CTA 템플릿 섹션은 export HTML 에 CTA 텍스트와 버튼 라벨을 포함해야 한다", async () => {
       const sectionId = "cta_section_export";
-      const { blocks } = createCtaTemplateBlocks({ sectionId, createId: createIdFactory() });
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+      const { blocks } = createCtaTemplateBlocks({
+        sectionId,
+        createId: createIdFactory(),
+        messages: tpl.cta,
+      });
 
       const html = await exportTemplateHtml(blocks as Block[]);
 
       expect(html).toContain("Write a compelling CTA message here.");
+      // 작은따옴표는 HTML 이스케이프되어 Don&#39;t 형태로 렌더된다.
+      expect(html).toContain("Don&#39;t hesitate to get started!");
       expect(html).toContain("Call to action");
     });
 
-    it("Footer 템플릿 섹션은 export HTML 의 마지막 섹션으로 렌더되고 푸터 텍스트를 포함해야 한다", async () => {
+    it("Footer 템플릿 섹션은 export HTML 에 푸터 설명과 링크 텍스트를 포함해야 한다", async () => {
       const sectionId = "footer_section_export";
-      const { blocks } = createFooterTemplateBlocks({ sectionId, createId: createIdFactory() });
+      const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+      const { blocks } = createFooterTemplateBlocks({
+        sectionId,
+        createId: createIdFactory(),
+        messages: tpl.footer,
+      });
 
       const html = await exportTemplateHtml(blocks as Block[]);
 
-      expect(html).toContain("MyLanding");
       expect(html).toContain("The best choice for building better websites.");
       expect(html).toContain("Product");
+      expect(html).toContain("Pricing");
+      expect(html).toContain("Support");
       expect(html).toContain("Contact");
-      expect(html).toContain(" 2025 MyLanding.");
-
-      const lastSectionIndex = html.lastIndexOf("<section");
-      expect(lastSectionIndex).toBeGreaterThan(-1);
-      const lastSectionHtml = html.slice(lastSectionIndex);
-      expect(lastSectionHtml).toContain(" 2025 MyLanding.");
     });
 
-    it("루트 버튼 내비게이션 링크는 Export HTML 에서 동일한 라벨과 href 로 렌더되어야 한다", async () => {
-      const blocks: Block[] = [
-        {
-          id: "nav_btn_1",
-          type: "button",
-          props: {
-            label: "요금제",
-            href: "/pricing",
-            align: "left",
-          },
-        } as any,
-      ];
-
-      const projectConfig: ProjectConfig = {
-        title: "내비게이션 링크 테스트",
-        slug: "nav-link-test",
-        canvasPreset: "full",
-      };
-
-      const html = buildStaticHtml(blocks, projectConfig);
-
-      expect(html).toContain('<a href="/pricing"');
-      expect(html).toContain(">요금제</a>");
-    });
-  });
-
-  describe("buildStaticHtml", () => {
-    it("text 블록은 pb 텍스트 스타일 클래스를 포함해야 한다", async () => {
-      const blocks: Block[] = [
-        {
-          id: "text_styled",
-          type: "text",
-          props: {
-            text: "스타일 테스트",
-            align: "center",
-            size: "base",
-            fontSizeMode: "scale",
-            fontSizeScale: "lg",
-            lineHeightMode: "scale",
-            lineHeightScale: "relaxed",
-            fontWeightMode: "scale",
-            fontWeightScale: "semibold",
-            colorMode: "palette",
-            colorPalette: "strong",
-            underline: true,
-            italic: true,
-          },
-        } as any,
-      ];
-
-      const projectConfig: ProjectConfig = {
-        title: "텍스트 스타일 테스트",
-        slug: "text-style-test",
-        canvasPreset: "full",
-      };
-
-      const payload = { blocks, projectConfig };
-
-      const { POST: handleExport } = await import("@/app/api/export/route");
-
-      const res = await handleExport(
-        new Request(`${BASE_URL}/api/export`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        }),
-      );
-
-      expect(res.status).toBe(200);
-
-      const arrayBuffer = await res.arrayBuffer();
-      const zip = await JSZip.loadAsync(arrayBuffer);
-
-      const indexEntry = zip.file("index.html");
-      expect(indexEntry).toBeTruthy();
-
-      const html = await indexEntry!.async("string");
-      expect(html).toContain("스타일 테스트");
-      expect(html).toContain("pb-text-center");
-      expect(html).toContain("pb-text-lg");
-      expect(html).toContain("pb-leading-relaxed");
-      expect(html).toContain("pb-font-semibold");
-      expect(html).toContain("pb-text-color-strong");
-      expect(html).toContain("pb-underline");
-      expect(html).toContain("pb-italic");
-    });
-
-    it("기본 텍스트 블록은 프리뷰처럼 흰 글자와 줄바꿈 유지 스타일을 사용해야 한다", async () => {
+  it("기본 텍스트 블록은 프리뷰처럼 흰 글자와 줄바꿈 유지 스타일을 사용해야 한다", async () => {
       const blocks: Block[] = [
         {
           id: "text_default",
@@ -3244,4 +3177,3 @@ describe("/api/export", () => {
       expect(css).toContain(".pb-section-column");
     });
   });
-});
diff --git a/tests/unit/EditorSectionLayout.spec.tsx b/tests/unit/EditorSectionLayout.spec.tsx
index 6755322..6e6b21f 100644
--- a/tests/unit/EditorSectionLayout.spec.tsx
+++ b/tests/unit/EditorSectionLayout.spec.tsx
@@ -3,6 +3,8 @@ import { render, screen, cleanup } from "@testing-library/react";
 import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
 import EditorPage from "@/app/editor/page";
 import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
+import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
 
 let mockState: any;
 
@@ -191,7 +193,12 @@ describe("EditorPage - 섹션 레이아웃 속성", () => {
       return () => `hero_${++i}`;
     })();
 
-    const { blocks } = createHeroTemplateBlocks({ sectionId, createId });
+    const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+    const { blocks } = createHeroTemplateBlocks({
+      sectionId,
+      createId,
+      messages: tpl.hero,
+    });
 
     mockState.blocks = blocks as Block[];
     mockState.selectedBlockId = sectionId;
diff --git a/tests/unit/ProjectPropertiesPanel.seo.spec.tsx b/tests/unit/ProjectPropertiesPanel.seo.spec.tsx
index 5e815f4..1d7457c 100644
--- a/tests/unit/ProjectPropertiesPanel.seo.spec.tsx
+++ b/tests/unit/ProjectPropertiesPanel.seo.spec.tsx
@@ -41,7 +41,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
   it("SEO 타이틀 입력을 변경하면 seoTitle 이 updateProjectConfig 로 전달되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("SEO 타이틀") as HTMLInputElement;
+    const input = screen.getByLabelText("SEO title") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "새 SEO 타이틀" } });
 
@@ -51,7 +51,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
   it("메타 디스크립션 입력을 변경하면 seoDescription 이 updateProjectConfig 로 전달되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const textarea = screen.getByLabelText("메타 디스크립션") as HTMLTextAreaElement;
+    const textarea = screen.getByLabelText("Meta description") as HTMLTextAreaElement;
 
     fireEvent.change(textarea, { target: { value: "SEO 설명" } });
 
@@ -63,7 +63,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
   it("OG/Twitter 이미지 URL 입력을 변경하면 seoOgImageUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("OG/Twitter 이미지 URL") as HTMLInputElement;
+    const input = screen.getByLabelText("OG/Twitter image URL") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "https://example.com/og.png" } });
 
@@ -88,7 +88,7 @@ describe("ProjectPropertiesPanel SEO 메타", () => {
     render(<ProjectPropertiesPanel />);
 
     const checkbox = screen.getByLabelText(
-      "검색 엔진에 노출하지 않기 (noindex)",
+      "Hide from search engines (noindex)",
     ) as HTMLInputElement;
 
     expect(checkbox.checked).toBe(false);
diff --git a/tests/unit/PublicPageRendererFooter.spec.tsx b/tests/unit/PublicPageRendererFooter.spec.tsx
index ed657b3..f08bc97 100644
--- a/tests/unit/PublicPageRendererFooter.spec.tsx
+++ b/tests/unit/PublicPageRendererFooter.spec.tsx
@@ -3,6 +3,8 @@ import { render, screen, cleanup } from "@testing-library/react";
 import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
 import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate";
 import type { Block } from "@/features/editor/state/editorStore";
+import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
 
 // PublicPageRenderer 푸터 템플릿 TDD
 // - footerTemplate 로 생성한 섹션이 프리뷰에서 섹션/텍스트 구조로 올바르게 렌더되는지 검증한다.
@@ -16,8 +18,8 @@ describe("PublicPageRenderer - 푸터 템플릿", () => {
     const sectionId = "footer_preview_section";
     let i = 0;
     const createId = () => `footer_${++i}`;
-
-    const { blocks } = createFooterTemplateBlocks({ sectionId, createId });
+    const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+    const { blocks } = createFooterTemplateBlocks({ sectionId, createId, messages: tpl.footer });
 
     render(<PublicPageRenderer blocks={blocks as Block[]} />);
 
@@ -25,9 +27,9 @@ describe("PublicPageRenderer - 푸터 템플릿", () => {
     expect(section.getAttribute("data-section-id")).toBe(sectionId);
 
     expect(screen.getByText("MyLanding")).toBeTruthy();
-    expect(screen.getByText("더 나은 웹사이트를 위한 최고의 선택.")).toBeTruthy();
-    expect(screen.getByText(/서비스 소개/)).toBeTruthy();
-    expect(screen.getByText(/문의하기/)).toBeTruthy();
-    expect(screen.getByText(/© 2025 MyLanding\./)).toBeTruthy();
+    expect(screen.getByText("The best choice for building better websites.")).toBeTruthy();
+    expect(screen.getByText(/Product/)).toBeTruthy();
+    expect(screen.getByText(/Contact/)).toBeTruthy();
+    expect(screen.getByText(/ 2025 MyLanding\./)).toBeTruthy();
   });
 });
diff --git a/tests/unit/PublicPageRendererTemplates.spec.tsx b/tests/unit/PublicPageRendererTemplates.spec.tsx
index b7b6c8c..0d8ceae 100644
--- a/tests/unit/PublicPageRendererTemplates.spec.tsx
+++ b/tests/unit/PublicPageRendererTemplates.spec.tsx
@@ -4,6 +4,8 @@ import { PublicPageRenderer } from "@/features/editor/components/PublicPageRende
 import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
 import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate";
 import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
+import { getEditorTemplatesMessages } from "@/features/i18n/messages/editorTemplates";
+import { DEFAULT_LOCALE } from "@/features/i18n/locale";
 import type { Block } from "@/features/editor/state/editorStore";
 
 // PublicPageRenderer 템플릿 TDD
@@ -21,7 +23,12 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
 
   it("Hero 템플릿 섹션은 섹션과 헤드라인/서브텍스트/버튼을 렌더해야 한다", () => {
     const sectionId = "hero_section_1";
-    const { blocks } = createHeroTemplateBlocks({ sectionId, createId: createIdFactory() });
+    const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+    const { blocks } = createHeroTemplateBlocks({
+      sectionId,
+      createId: createIdFactory(),
+      messages: tpl.hero,
+    });
 
     render(<PublicPageRenderer blocks={blocks as Block[]} />);
 
@@ -34,7 +41,12 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
 
   it("Features 템플릿 섹션은 3컬럼 Feature 제목/설명 텍스트를 렌더해야 한다", () => {
     const sectionId = "features_section_1";
-    const { blocks } = createFeaturesTemplateBlocks({ sectionId, createId: createIdFactory() });
+    const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+    const { blocks } = createFeaturesTemplateBlocks({
+      sectionId,
+      createId: createIdFactory(),
+      messages: tpl.features,
+    });
 
     render(<PublicPageRenderer blocks={blocks as Block[]} />);
 
@@ -53,7 +65,12 @@ describe("PublicPageRenderer - 섹션 템플릿", () => {
 
   it("CTA 템플릿 섹션은 텍스트와 CTA 버튼을 렌더해야 한다", () => {
     const sectionId = "cta_section_1";
-    const { blocks } = createCtaTemplateBlocks({ sectionId, createId: createIdFactory() });
+    const tpl = getEditorTemplatesMessages(DEFAULT_LOCALE);
+    const { blocks } = createCtaTemplateBlocks({
+      sectionId,
+      createId: createIdFactory(),
+      messages: tpl.cta,
+    });
 
     render(<PublicPageRenderer blocks={blocks as Block[]} />);
 
diff --git a/uploads/3cd68ac4-d85d-44d3-8e68-97086b341895 b/uploads/3cd68ac4-d85d-44d3-8e68-97086b341895
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/3cd68ac4-d85d-44d3-8e68-97086b341895
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/43987d79-2417-4bdf-bb00-c064f948115c b/uploads/43987d79-2417-4bdf-bb00-c064f948115c
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/43987d79-2417-4bdf-bb00-c064f948115c
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/5abc6415-e25d-4a8c-a791-f3cb6cf1263d b/uploads/5abc6415-e25d-4a8c-a791-f3cb6cf1263d
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/5abc6415-e25d-4a8c-a791-f3cb6cf1263d
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/fbf099b4-65c8-4db6-92ab-7f7f494016a9 b/uploads/fbf099b4-65c8-4db6-92ab-7f7f494016a9
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/fbf099b4-65c8-4db6-92ab-7f7f494016a9
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/test-image-1765353749297 b/uploads/test-image-1765353749297
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-image-1765353749297
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-image-1765353782946 b/uploads/test-image-1765353782946
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-image-1765353782946
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-1765353749344 b/uploads/test-section-bg-1765353749344
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-section-bg-1765353749344
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-1765353782975 b/uploads/test-section-bg-1765353782975
new file mode 100644
index 0000000..0cc5db2
--- /dev/null
+++ b/uploads/test-section-bg-1765353782975
@@ -0,0 +1 @@
+dummy-image
\ No newline at end of file
diff --git a/uploads/test-section-bg-video-1765353749481 b/uploads/test-section-bg-video-1765353749481
new file mode 100644
index 0000000..badc796
--- /dev/null
+++ b/uploads/test-section-bg-video-1765353749481
@@ -0,0 +1 @@
+dummy-section-video
\ No newline at end of file
diff --git a/uploads/test-section-bg-video-1765353783013 b/uploads/test-section-bg-video-1765353783013
new file mode 100644
index 0000000..badc796
--- /dev/null
+++ b/uploads/test-section-bg-video-1765353783013
@@ -0,0 +1 @@
+dummy-section-video
\ No newline at end of file
diff --git a/uploads/test-video-1765353749466 b/uploads/test-video-1765353749466
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/test-video-1765353749466
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/test-video-1765353783005 b/uploads/test-video-1765353783005
new file mode 100644
index 0000000..87ccacf
--- /dev/null
+++ b/uploads/test-video-1765353783005
@@ -0,0 +1 @@
+dummy-video
\ No newline at end of file
diff --git a/uploads/test-video-poster-1765353749304 b/uploads/test-video-poster-1765353749304
new file mode 100644
index 0000000..7285c92
--- /dev/null
+++ b/uploads/test-video-poster-1765353749304
@@ -0,0 +1 @@
+dummy-poster
\ No newline at end of file
diff --git a/uploads/test-video-poster-1765353782956 b/uploads/test-video-poster-1765353782956
new file mode 100644
index 0000000..7285c92
--- /dev/null
+++ b/uploads/test-video-poster-1765353782956
@@ -0,0 +1 @@
+dummy-poster
\ No newline at end of file
-- 
2.52.0