From 62ffb0182744b16a832fb755bf7754183b877d62 Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Fri, 15 May 2026 12:58:37 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95=20-=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20+=20=EB=A9=94=EC=9D=B8=20?=
 =?UTF-8?q?=EC=BD=98=ED=85=90=EC=B8=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/index.html | 71 ++++++++++++++++++++++++-----------------
 src/renderer/style.css  | 52 ++++++++++++++++++++++++++++--
 2 files changed, 92 insertions(+), 31 deletions(-)

diff --git a/src/renderer/index.html b/src/renderer/index.html
index eb217e5..233e721 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -12,37 +12,50 @@
   <h1>Photo Renamer</h1>
 </div>
 
-<div id="toolbar">
-  <button class="btn btn-warning" id="btn-open"><span>📁</span>폴더 열기 (O)</button>
-  <button class="btn btn-success" id="btn-rename" disabled><span>✅</span>이름 변경 실행 (S)</button>
-  <div class="separator" style="margin-left:auto;"></div>
-  <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 active" id="btn-preview-toggle">🔍 미리보기</button>
-</div>
+<div id="app-body">
 
-<div id="format-bar">
-  <label>파일명 포맷</label>
-  <input type="text" id="input-prefix" value="photo" placeholder="접두사" />
-  <span class="format-sep">_</span>
-  <input type="number" id="input-digits" value="4" min="1" max="6" />
-  <span class="format-sep">자리 순번</span>
-  <span style="color:var(--muted);font-size:12px;">→</span>
-  <span id="preview-name">photo_001.jpg</span>
-  <span id="sel-count"></span>
-  <span id="file-count">0개 파일</span>
-</div>
-
-<div id="grid-container">
-  <div id="empty-state">
-    <div class="icon">🗂️</div>
-    <p>폴더를 열어 이미지를 불러오세요<br>
-    <span style="font-size:12px;opacity:.6;">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
+  <div id="sidebar">
+    <div id="sidebar-toolbar">
+      <button class="btn btn-warning" id="btn-open">폴더 열기 (O)</button>
+      <button class="btn btn-success" id="btn-rename" disabled>이름 변경 실행 (S)</button>
+    </div>
+    <div id="file-explorer">
+      <!-- 추후 구현 -->
+    </div>
   </div>
-  <div id="grid" style="display:none;"></div>
+
+  <div id="main-content">
+    <div id="content-toolbar">
+      <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 active" id="btn-preview-toggle">미리보기</button>
+    </div>
+
+    <div id="format-bar">
+      <label>파일명 포맷</label>
+      <input type="text" id="input-prefix" value="photo" placeholder="접두사" />
+      <span class="format-sep">_</span>
+      <input type="number" id="input-digits" value="4" min="1" max="6" />
+      <span class="format-sep">자리 순번</span>
+      <span style="color:var(--muted);font-size:12px;">→</span>
+      <span id="preview-name">photo_001.jpg</span>
+      <span id="sel-count"></span>
+      <span id="file-count">0개 파일</span>
+    </div>
+
+    <div id="grid-container">
+      <div id="empty-state">
+        <div class="icon">🗂️</div>
+        <p>폴더를 열어 이미지를 불러오세요<br>
+        <span style="font-size:12px;opacity:.6;">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
+      </div>
+      <div id="grid" style="display:none;"></div>
+    </div>
+  </div>
+
 </div>
 
 <div id="statusbar">
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 86c9ee1..d00d1bb 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -64,8 +64,56 @@ body.fullscreen #titlebar {
   max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
-/* ── 툴바 ── */
-#toolbar {
+/* ── 앱 바디 (사이드바 + 메인) ── */
+#app-body {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── 사이드바 ── */
+#sidebar {
+  width: 300px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  overflow: hidden;
+}
+#sidebar-toolbar {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+#sidebar-toolbar .btn {
+  flex: 1;
+  justify-content: center;
+}
+#file-explorer {
+  flex: 1;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+#file-explorer::-webkit-scrollbar { width: 6px; height: 6px; }
+#file-explorer::-webkit-scrollbar-track { background: transparent; }
+#file-explorer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+/* ── 메인 콘텐츠 ── */
+#main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── 콘텐츠 툴바 ── */
+#content-toolbar {
   display: flex; align-items: center; gap: 8px;
   padding: 10px 16px;
   background: var(--surface);