From 48f86566d04c79b23e8ced79eb20274054dff86f Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Fri, 22 May 2026 16:49:40 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=83=81=EB=8B=A8?=
 =?UTF-8?q?=EC=97=90=20app-workspace=20=EC=98=81=EC=97=AD=EC=9D=84=20?=
 =?UTF-8?q?=EB=A7=8C=EB=93=A4=EA=B3=A0,=20=EB=B2=84=ED=8A=BC=EB=93=A4?=
 =?UTF-8?q?=EC=9D=84=20=EC=83=88=EB=A1=9C=EC=9A=B4=20=EC=98=81=EC=97=AD?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/index.html | 94 +++++++++++++++++++++--------------------
 src/renderer/style.css  | 51 +++++++++++++---------
 2 files changed, 80 insertions(+), 65 deletions(-)

diff --git a/src/renderer/index.html b/src/renderer/index.html
index c9701a7..47a7a97 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -12,59 +12,63 @@
   <h1>Photo Renamer</h1>
 </header>
 
-<div class="app-layout">
-
-  <aside>
-    <nav class="sidebar-nav">
+<section class="app-workspace" aria-label="사진 이름 변경 작업 영역">
+  <nav class="workspace-nav" aria-label="작업 도구">
+    <div class="workspace-actions">
       <button class="btn btn-warning" id="btn-open">폴더 열기 (⌘O)</button>
       <button class="btn btn-success" id="btn-rename" disabled>이름 변경 실행 (⌘S)</button>
-    </nav>
-    <section class="file-explorer">
-      <!-- 추후 구현 -->
-    </section>
-  </aside>
-
-  <div id="sidebar-resizer" aria-hidden="true"></div>
-
-  <main>
-    <nav class="content-nav">
-      <div class="sort-group">
-        <button class="sort-btn" id="btn-sort-name">이름순</button>
-        <button class="sort-btn" id="btn-sort-date">날짜순</button>
-      </div>
-      <div class="separator"></div>
+    </div>
+    <div class="workspace-controls">
       <button class="btn btn-info" id="btn-preview-toggle">미리보기</button>
       <div class="separator"></div>
       <button class="btn btn-ghost" id="btn-undo" disabled>↩ 되돌리기</button>
       <button class="btn btn-ghost" id="btn-redo" disabled>↪ 다시하기</button>
-    </nav>
-
-    <form id="format-bar">
-      <label for="input-prefix">파일명 포맷</label>
-      <input type="text" id="input-prefix" value="photo_" placeholder="접두사" />
-      <input type="number" id="input-digits" value="4" min="1" max="6" />
-      <span class="format-sep">자리 순번</span>
-      <input type="text" id="input-postfix" value="_" maxlength="3" size="3" placeholder="접미사" />
-      <span class="format-arrow">→</span>
-      <span id="preview-name">photo_0001_.jpg</span>
-      <span id="sel-count"></span>
-      <span id="file-count">0개 파일</span>
-    </form>
-
-    <section id="grid-container">
-      <div id="empty-state">
-        <div class="icon">🗂️</div>
-        <p>폴더를 열어 이미지를 불러오세요<br>
-        <span class="empty-state-hint">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
+      <div class="separator"></div>
+      <div class="sort-group" aria-label="정렬">
+        <button class="sort-btn" id="btn-sort-name">이름순</button>
+        <button class="sort-btn" id="btn-sort-date">날짜순</button>
       </div>
-      <div id="grid" style="display:none;"></div>
-      <div id="grid-scrollbar" aria-hidden="true">
-        <div id="grid-scrollbar-thumb"></div>
-      </div>
-    </section>
-  </main>
+    </div>
+  </nav>
 
-</div>
+  <div class="app-layout">
+
+    <aside>
+      <section class="file-explorer" aria-label="폴더 탐색기">
+        <!-- 추후 구현 -->
+      </section>
+    </aside>
+
+    <div id="sidebar-resizer" aria-hidden="true"></div>
+
+    <main>
+      <form id="format-bar">
+        <label for="input-prefix">파일명 포맷</label>
+        <input type="text" id="input-prefix" value="photo_" placeholder="접두사" />
+        <input type="number" id="input-digits" value="4" min="1" max="6" />
+        <span class="format-sep">자리 순번</span>
+        <input type="text" id="input-postfix" value="_" maxlength="3" size="3" placeholder="접미사" />
+        <span class="format-arrow">→</span>
+        <span id="preview-name">photo_0001_.jpg</span>
+        <span id="sel-count"></span>
+        <span id="file-count">0개 파일</span>
+      </form>
+
+      <section id="grid-container">
+        <div id="empty-state">
+          <div class="icon">🗂️</div>
+          <p>폴더를 열어 이미지를 불러오세요<br>
+          <span class="empty-state-hint">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
+        </div>
+        <div id="grid" style="display:none;"></div>
+        <div id="grid-scrollbar" aria-hidden="true">
+          <div id="grid-scrollbar-thumb"></div>
+        </div>
+      </section>
+    </main>
+
+  </div>
+</section>
 
 <footer>
   <div class="status-dot" id="status-dot"></div>
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 34f8045..e2e07ad 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -74,11 +74,42 @@ header h1 {
   margin-left: auto;
 }
 
+/* ── 작업 영역 ── */
+.app-workspace {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.workspace-nav {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.workspace-actions,
+.workspace-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.workspace-actions {
+  flex-shrink: 0;
+}
+.workspace-controls {
+  margin-left: auto;
+}
+
 /* ── 앱 레이아웃 ── */
 .app-layout {
   display: flex;
   flex-direction: row;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -121,18 +152,6 @@ body.resizing-sidebar {
   cursor: col-resize;
   user-select: none;
 }
-.sidebar-nav {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.sidebar-nav .btn {
-  flex: 1;
-  justify-content: center;
-}
 .file-explorer {
   flex: 1;
   overflow: auto;
@@ -146,14 +165,6 @@ main {
   overflow: hidden;
 }
 
-/* ── 콘텐츠 툴바 ── */
-.content-nav {
-  display: flex; align-items: center; gap: 8px;
-  padding: 10px 16px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
 .btn {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 7px 14px; border-radius: 8px; border: none;