화면 상단에 app-workspace 영역을 만들고, 버튼들을 새로운 영역으로 이동

src/renderer/index.html

@@ -12,14 +12,29 @@
   <h1>Photo Renamer</h1>
 </header>
 
+<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>
+    </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>
+      <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>
+  </nav>
+
   <div class="app-layout">
 
     <aside>
-    <nav class="sidebar-nav">
+      <section class="file-explorer" aria-label="폴더 탐색기">
-      <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>
@@ -27,18 +42,6 @@
     <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>
-      <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="접두사" />
@@ -65,6 +68,7 @@
     </main>
 
   </div>
+</section>
 
 <footer>
   <div class="status-dot" id="status-dot"></div>

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;