ContextualWisdomLab · seonghobae · Aug 1, 2026
diff --git a/.jules/palette.md b/.jules/palette.md
@@ -48,3 +48,7 @@
 ## 2024-08-01 - 네이티브 브라우저 UI의 다크 모드 지원 강제
 **학습:** CSS 미디어 쿼리(`@media (prefers-color-scheme: dark)`)를 통해 다크 모드를 지원하더라도, 브라우저의 네이티브 UI 요소(스크롤바, 기본 폼 컨트롤, 기본 백그라운드 등)는 테마 변경을 인식하지 못해 어두운 테마 환경에서 밝은 스크롤바가 표시되는 등 시각적 불일치를 초래합니다.
 **조치:** 항상 HTML 문서의 `<head>` 영역에 `<meta name="color-scheme" content="light dark">` 메타 태그를 명시적으로 추가하여 브라우저 수준에서 사용자의 시스템 테마(다크 모드 등)를 완전히 상속받아 일관성 있는 네이티브 UI를 렌더링하도록 보장하십시오.
+
+## 2024-08-01 - 빈 상태 시각적 일관성 향상
+**학습:** 디렉토리가 비어있을 때, 아이콘이 누락되고 텍스트 정렬이 다른 항목들과 다르면 사용자 경험에 일관성이 부족해지고 가독성이 떨어집니다. 빈 상태에서도 아이콘(예: 열린 폴더 아이콘 &#128194;)을 제공하고 정렬을 맞춰주면 디렉토리 구조의 일관성을 유지할 수 있습니다.
+**조치:** 빈 디렉토리 메시지를 표시할 때, 열린 폴더 아이콘(`<span class="icon" aria-hidden="true">&#128194;</span>`)을 추가하고 CSS를 `display: flex;`로 업데이트하여 일반 파일/디렉토리 목록과 시각적 레이아웃을 일치시켰습니다.
diff --git a/empty_dir_test/empty_dir/index.html b/empty_dir_test/empty_dir/index.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="color-scheme" content="light dark">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'sha256-qYcPustBsnv0nJel5PrCFOjEpYEOYY1iC9T5sDHfzGE='; base-uri 'none'; form-action 'none';">
+        <!-- 보안 향상: 리퍼러를 통한 디렉토리 경로 노출 방지 -->
+        <meta name="referrer" content="no-referrer">
+        <title>empty_dir</title>
+
+              <style>
+
+              body {
+                font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+                line-height: 1.5;
+                padding: 1rem;
+                color: #1f2328;
+              }
+              main {
+                max-width: 800px;
+                margin: 0 auto;
+              }
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a.dir-link {
+                display: flex;
+                align-items: flex-start;
+                gap: 0.5rem;
+                width: 100%;
+                overflow-wrap: anywhere;
+                box-sizing: border-box;
+              }
+              .icon {
+                flex-shrink: 0;
+                width: 1.25rem;
+                text-align: center;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0969da;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0969da;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+              }
+              .empty-dir {
+                display: flex;
+                align-items: flex-start;
+                gap: 0.5rem;
+                padding: 0.5rem;
+                opacity: 0.7;
+                font-style: italic;
+              }
+                            </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>empty_dir</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul role="list">
+            <li><a class="dir-link" href="./.." aria-label="상위 디렉토리로 이동" title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span>..</span></a></li>
+          <li><div class="empty-dir"><span class="icon" aria-hidden="true">&#128194;</span> <span>이 디렉토리는 비어 있습니다.</span></div></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/empty_dir_test/index.html b/empty_dir_test/index.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="color-scheme" content="light dark">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'sha256-qYcPustBsnv0nJel5PrCFOjEpYEOYY1iC9T5sDHfzGE='; base-uri 'none'; form-action 'none';">
+        <!-- 보안 향상: 리퍼러를 통한 디렉토리 경로 노출 방지 -->
+        <meta name="referrer" content="no-referrer">
+        <title>empty_dir_test</title>
+
+              <style>
+
+              body {
+                font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+                line-height: 1.5;
+                padding: 1rem;
+                color: #1f2328;
+              }
+              main {
+                max-width: 800px;
+                margin: 0 auto;
+              }
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a.dir-link {
+                display: flex;
+                align-items: flex-start;
+                gap: 0.5rem;
+                width: 100%;
+                overflow-wrap: anywhere;
+                box-sizing: border-box;
+              }
+              .icon {
+                flex-shrink: 0;
+                width: 1.25rem;
+                text-align: center;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0969da;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0969da;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+              }
+              .empty-dir {
+                display: flex;
+                align-items: flex-start;
+                gap: 0.5rem;
+                padding: 0.5rem;
+                opacity: 0.7;
+                font-style: italic;
+              }
+                            </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>empty_dir_test</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul role="list">
+            <li><a class="dir-link" href="./.." aria-label="상위 디렉토리로 이동" title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span>..</span></a></li>
+          <li><a class="dir-link" href="./empty_dir/" aria-label="empty_dir 디렉토리" title="empty_dir 디렉토리"><span class="icon" aria-hidden="true">&#128193;</span> <span>empty_dir</span></a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
@@ -304,6 +304,9 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
                 }
               }
               .empty-dir {
+                display: flex;
+                align-items: flex-start;
+                gap: 0.5rem;
                 padding: 0.5rem;
                 opacity: 0.7;
                 font-style: italic;
@@ -370,7 +373,7 @@ ${cssContent}              </style>
         }
 
         if(l.isEmpty()){
-            l.append("""          <li><div class="empty-dir">이 디렉토리는 비어 있습니다.</div></li>""")
+            l.append("""          <li><div class="empty-dir"><span class="icon" aria-hidden="true">&#128194;</span> <span>이 디렉토리는 비어 있습니다.</span></div></li>""")
             l.append('\n')
         }
 

diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt
@@ -94,6 +94,7 @@ class MainTest {
         val htmlContent = indexFile.readText()
         assertTrue(htmlContent.contains("<html lang=\"ko\">"))
         assertTrue(htmlContent.contains("이 디렉토리는 비어 있습니다."))
+        assertTrue(htmlContent.contains("&#128194;"))
         assertTrue(htmlContent.contains("role=\"list\""))
     }