🎨 Palette: 시스템 폰트 및 레이아웃 개선으로 디렉토리 목록 가독성 향상

.jules/palette.md

@@ -13,3 +13,6 @@
 ## 2024-06-25 - Directory Listing Navigation Landmark
 **Learning:** Generated directory listings act as navigation regions, and screen readers benefit when the listing is announced separately from the page's main content.
 **Action:** Wrap generated directory listing `<ul>` elements in `<nav aria-label="Directory listing">` while keeping the surrounding semantic `<main>` structure.
+## 2024-06-03 - [Directory Listing Readability]
+**Learning:** Raw HTML directory listings are difficult to read and scan on wide screens because they span the entire width. Adding a max-width container and using system fonts significantly improves readability and user scanning.
+**Action:** Always define base typography and constrain line lengths for list-heavy interfaces to ensure they are visually pleasing and readable across screen sizes.

src/main/kotlin/html4tree/main.kt

@@ -176,6 +176,16 @@ fun process_dir(curr_dir: File){
 
     val css = """
               <style>
+              body {
+                font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+                padding: 1rem;
+                line-height: 1.5;
+                color: #1f2328;
+              }
+              main {
+                max-width: 800px;
+                margin: 0 auto;
+              }
               ul {
                 list-style-type: none;
                 padding-left: 0;

src/test/kotlin/html4tree/MainTest.kt

@@ -161,6 +161,12 @@ class MainTest {
         assertFalse(htmlContent.contains("test.ignore"))
         assertTrue(htmlContent.contains("Content-Security-Policy"))
         assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
+
+        // CSS properties validation for UX improvement
+        assertTrue(htmlContent.contains("font-family: system-ui"))
+        assertTrue(htmlContent.contains("max-width: 800px"))
+        assertTrue(htmlContent.contains("body {"))
+        assertTrue(htmlContent.contains("main {"))
     }
 
     @Test