ContextualWisdomLab · seonghobae · Jul 9, 2026 · Jul 11, 2026
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -1,3 +1,6 @@
 ## 2024-05-24 - [Add smooth transitions for a tags but respect user motion preferences]
 **Learning:** Adding CSS transitions (`transition: all`) can create unintended animations and performance issues. Also, animations can cause problems for users with vestibular motion disorders.
-**Action:** When adding CSS transitions, explicitly specify properties (e.g., `background-color`, `outline-color`) instead of `transition: all`. Always include a `@media (prefers-reduced-motion: reduce)` override to set `transition: none` for accessibility.
+**Action:** When adding CSS transitions, explicitly specify properties (e.g., `background-color`, `outline-color`) instead of `transition: all`. Always include a `@media (prefers-reduced-motion: reduce)` override to set `transition: none` for accessibility.
+## 2026-07-09 - [다크 모드 지원 및 접근성 향상, CSP 준수를 위한 인라인 스타일 제거]
+**Learning:** `Content-Security-Policy`가 `style-src 'unsafe-inline'`를 허용하더라도, 유지보수성과 보안을 높이기 위해 인라인 스타일 대신 CSS 클래스를 활용하는 것이 낫다. 특히, 정적 HTML 생성 과정에서 하드코딩된 영문 접근성 속성(`aria-label="Directory listing"`)이 한국어 환경에서 스크린 리더 사용자에게 어색할 수 있으므로 이를 언어에 맞게 번역하는 것이 중요하다. 또한 정적 파일 트리 렌더링에 다크 모드(`@media (prefers-color-scheme: dark)`)를 지원하면 눈부심을 줄이고 전반적인 UX 만족도를 크게 향상시킬 수 있다.
+**Action:** 앞으로 HTML 구조를 동적으로 생성할 때, 인라인 스타일을 배제하고 CSS 클래스 기반의 디자인을 채택하여 CSP와의 충돌 가능성을 줄인다. 추가로 `aria-label` 같은 접근성 속성은 템플릿 언어에 알맞게 번역되었는지 확인하며, 스타일 시트를 삽입할 때 다크 모드 미디어 쿼리를 기본으로 추가하는 것을 잊지 않는다.
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
@@ -176,6 +176,10 @@ fun process_dir(curr_dir: File){
 
     val css = """
               <style>
+              body {
+                background-color: #ffffff;
+                color: #24292e;
+              }
               ul {
                 list-style-type: none;
                 padding-left: 0;
@@ -193,11 +197,36 @@ fun process_dir(curr_dir: File){
                 outline: 2px solid #0366d6;
                 outline-offset: -2px;
               }
+              .item-link {
+                display: block;
+                width: 100%;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #555555;
+                font-style: italic;
+              }
               @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-state {
+                  color: #8b949e;
+                }
+              }
               </style>
               """
 
@@ -214,9 +243,9 @@ fun process_dir(curr_dir: File){
      <body>
        <main>
          <h1>${curr_dir.getName().escapeHtml()}</h1>
-         <nav aria-label="Directory listing">
+         <nav aria-label="디렉토리 목록">
          <ul>
-            <li><a style="display:block; width:100%" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
 """ 
 
     val index_middle = fun():String{ 
@@ -231,13 +260,13 @@ fun process_dir(curr_dir: File){
               val encodedHref = if (isLinkedDirectory) { "./${fileName.urlEncodePath()}/" } else { "./${fileName.urlEncodePath()}" }
               val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml()
               val icon = if (isLinkedDirectory) { "&#128193;" } else { "&rtrif;" }
-              l.append("""          <li><a style="display:block; width:100%" href="${encodedHref}" aria-label="${ariaLabel}"><span aria-hidden="true">${icon}</span> ${fileName.escapeHtml()}</a></li>""")
+              l.append("""          <li><a class="item-link" href="${encodedHref}" aria-label="${ariaLabel}"><span aria-hidden="true">${icon}</span> ${fileName.escapeHtml()}</a></li>""")
               l.append('\n')
            }
         }
 
         if(l.isEmpty()){
-            l.append("""          <li><div style="padding: 0.5rem; color: #666; font-style: italic;">이 디렉토리는 비어 있습니다.</div></li>""")
+            l.append("""          <li><div class="empty-state">이 디렉토리는 비어 있습니다.</div></li>""")
             l.append('\n')
         }
 

diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt
@@ -148,7 +148,7 @@ class MainTest {
         assertTrue(indexFile.exists())
         val htmlContent = indexFile.readText()
         assertTrue(htmlContent.contains("<html lang=\"ko\">"))
-        assertTrue(htmlContent.contains("<nav aria-label=\"Directory listing\">"))
+        assertTrue(htmlContent.contains("<nav aria-label=\"디렉토리 목록\">"))
         assertTrue(htmlContent.contains("<main>"))
         assertTrue(htmlContent.contains("</main>"))
         assertTrue(htmlContent.contains("aria-label=\"상위 디렉토리로 이동\""))
@@ -159,6 +159,8 @@ class MainTest {
         assertTrue(htmlContent.contains("subdir/"))
         assertTrue(htmlContent.contains("&#128193;"))
         assertFalse(htmlContent.contains("test.ignore"))
+        assertTrue(htmlContent.contains("class=\"item-link\""))
+        assertTrue(htmlContent.contains("prefers-color-scheme: dark"))
         assertTrue(htmlContent.contains("Content-Security-Policy"))
         assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
     }