From acbc1517148b663b9d72ce74321cb9c9dd94936c Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 9 Jul 2026 20:58:24 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20HTML=20=ED=85=9C?= =?UTF-8?q?=ED=94=8C=EB=A6=BF=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=ED=96=A5?= =?UTF-8?q?=EC=83=81,=20=EB=8B=A4=ED=81=AC=20=EB=AA=A8=EB=93=9C=20?= =?UTF-8?q?=EC=A7=80=EC=9B=90=20=EB=B0=8F=20CSP=20=EC=A4=80=EC=88=98=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 하드코딩된 'Directory listing' 접근성 라벨을 한국어 '디렉토리 목록'으로 번역하여 스크린 리더 경험 개선 - 인라인 스타일 속성을 제거하고 CSS 클래스(`.item-link`, `.empty-state`)로 분리하여 유지보수성 및 Content-Security-Policy(CSP) 준수 향상 - `@media (prefers-color-scheme: dark)` 미디어 쿼리를 추가하여 운영체제/브라우저 설정에 맞춘 다크 모드 지원 구현 - 수정 사항을 반영하여 100% 테스트 커버리지 유지 (Jacoco 검증 완료) --- .Jules/palette.md | 5 +++- src/main/kotlin/html4tree/main.kt | 37 ++++++++++++++++++++++++--- src/test/kotlin/html4tree/MainTest.kt | 4 ++- 3 files changed, 40 insertions(+), 6 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index c3dc3c5..2e602dc 100644 --- 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. \ No newline at end of file +**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 index ebab59d..3ff23c0 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -166,6 +166,10 @@ fun process_dir(curr_dir: File){ val css = """ """ @@ -204,9 +233,9 @@ fun process_dir(curr_dir: File){

${curr_dir.getName().escapeHtml()}

-