ContextualWisdomLab · seonghobae · Jul 14, 2026 · Jul 14, 2026 · Jul 14, 2026 · Jul 14, 2026
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-24 - [빈 상태(Empty State) UX 및 접근성 개선]
+**Learning:** 빈 디렉토리 안내와 같이 파일 목록과 구조적으로 동일한 요소에 대해서도, 장식용 이모지 및 `aria-hidden="true"`를 사용하여 일관된 시각적 피드백(아이콘)을 제공하는 것이 사용자 인지 향상에 크게 기여합니다. 또한 flex 레이아웃을 통해 아이콘과 텍스트를 정렬하면, 다른 목록 항목과의 시각적 일관성을 유지할 수 있음을 확인했습니다.
+**Action:** 향후 다른 빈 상태나 목록 요소들을 추가할 때도, 스크린 리더를 배려한 장식용 아이콘 배치와 flexbox를 활용한 정렬 패턴을 적극적으로 적용해야 합니다.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
@@ -307,6 +307,10 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
                 padding: 0.5rem;
                 opacity: 0.7;
                 font-style: italic;
+                display: flex;
+                align-items: flex-start;
+                gap: 0.5rem;
+                box-sizing: border-box;
               }
               """
 
@@ -370,7 +374,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,8 @@ class MainTest {
         val htmlContent = indexFile.readText()
         assertTrue(htmlContent.contains("<html lang=\"ko\">"))
         assertTrue(htmlContent.contains("이 디렉토리는 비어 있습니다."))
+        assertTrue(htmlContent.contains("&#128194;"))
+        assertTrue(htmlContent.contains("aria-hidden=\"true\""))
         assertTrue(htmlContent.contains("role=\"list\""))
     }
 
@@ -335,6 +337,8 @@ class MainTest {
         assertTrue(htmlContent.contains("a.dir-link"))
         assertTrue(htmlContent.contains("class=\"dir-link\""))
         assertTrue(htmlContent.contains(".empty-dir"))
+        assertTrue(htmlContent.contains("display: flex;"))
+        assertTrue(htmlContent.contains("align-items: flex-start;"))
         assertTrue(htmlContent.contains("prefers-color-scheme: dark"))
         assertTrue(htmlContent.contains("font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;"))
         assertTrue(htmlContent.contains("line-height: 1.5;"))