From 18a09a9075aa13ea49dfb50e59822a2ca0e39646 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Mon, 10 Aug 2026 20:56:00 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20UI=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=ED=96=A5?= =?UTF-8?q?=EC=83=81=20(=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=84=B0=EC=B9=98?= =?UTF-8?q?=20=ED=83=80=EA=B2=9F=20=ED=81=AC=EA=B8=B0=20=EC=B5=9C=EC=A0=81?= =?UTF-8?q?=ED=99=94=20=EB=B0=8F=20=EB=AC=B8=EC=84=9C=20=ED=95=9C=EA=B5=AD?= =?UTF-8?q?=EC=96=B4=ED=99=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모바일 기기에서의 터치 접근성(Touch Target Size) 기준을 충족하기 위해, 디렉토리와 파일 링크(`a` 태그) 및 빈 디렉토리(`.empty-dir`)의 패딩을 `0.5rem`에서 `0.75rem 0.5rem`으로 증가시켜 클릭 가능 영역을 확장했습니다. - `.jules/palette.md`의 기존 영문 학습 일지를 프로젝트 규칙에 맞게 모두 한국어로 번역하고, 새로운 터치 타겟 관련 학습 내용을 추가했습니다. - CSS 속성 변경에 따른 100% 테스트 커버리지를 유지하기 위해 관련 테스트 파일을 업데이트했습니다. --- .jules/palette.md | 28 +++++++++++-------- src/main/kotlin/html4tree/main.kt | 4 +-- .../GeneratedIndexReadabilityTest.kt | 2 +- src/test/kotlin/html4tree/MainTest.kt | 1 + 4 files changed, 20 insertions(+), 15 deletions(-) diff --git a/.jules/palette.md b/.jules/palette.md index 7b223901..10d05d42 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -26,29 +26,33 @@ **학습:** 하드코딩된 인라인 색상(예: `color: #666`)은 CSS 미디어 쿼리를 우회하며 `!important` 없이는 쉽게 재정의할 수 없기 때문에 다크 모드에서 적응하지 못하고, 어두운 배경에서 텍스트 가독성 문제를 일으킵니다. **조치:** 어두운 텍스트에 하드코딩된 16진수 값 대신 `opacity: 0.7`을 사용하여 테마 색상을 동적으로 상속받고 모든 색상 구성표에서 가독성을 보장하십시오. -## 2024-07-12 - Prevent icon misalignment on long file names -**Learning:** Very long file names in a fluid layout without explicit flexbox wrapping can cause text to wrap below preceding inline icons, breaking the visual hierarchy and alignment. -**Action:** Always wrap file/directory listings in a flex container with `align-items: flex-start` and isolate icons with `flex-shrink: 0` alongside text content wrapped in a `` (or a global `overflow-wrap` on the container) to ensure text wraps cleanly next to fixed-width icons on mobile devices. +## 2024-07-12 - 긴 파일 이름에서의 아이콘 오정렬 방지 +**학습:** 명시적인 flexbox 줄바꿈 설정이 없는 유동적인 레이아웃에서 파일 이름이 너무 길 경우, 텍스트가 앞에 있는 인라인 아이콘 아래로 넘어가 시각적 계층 구조와 정렬이 깨질 수 있습니다. +**조치:** 파일/디렉토리 목록을 항상 `align-items: flex-start` 속성을 가진 flex 컨테이너로 감싸고, 아이콘을 `flex-shrink: 0`으로 격리하십시오. 또한 모바일 환경에서 텍스트가 고정 너비의 아이콘 옆에서 깔끔하게 줄바꿈되도록 텍스트 컨텐츠를 ``로 감싸거나 컨테이너 전체에 `overflow-wrap`을 적용하십시오. ## 2024-08-01 - 파일 아이콘 메타포 **학습:** 일반 파일을 나타낼 때 방향 지시 아이콘(우측 삼각형 등)을 사용하면 폴더나 확장 가능한 요소로 오해할 수 있어 시각적인 모호함을 초래합니다. 문서나 페이지 형태의 아이콘이 파일이라는 것을 직관적으로 알 수 있게 해줍니다. **조치:** 일반 파일 옆에 표시되는 장식용 아이콘을 우측 삼각형 등에서 페이지 아이콘(예: `📄`)으로 교체하여 시각적 메타포를 일관성 있게 유지하십시오. ## 2024-05-24 - [a 태그에 부드러운 트랜지션 추가 및 사용자의 모션 설정 존중] -**Learning:** CSS 트랜지션(`transition: all`)을 추가하면 의도치 않은 애니메이션과 성능 문제를 일으킬 수 있습니다. 또한, 애니메이션은 전정 운동 장애가 있는 사용자에게 문제를 유발할 수 있습니다. -**Action:** CSS 트랜지션을 추가할 때 `transition: all` 대신 속성(`background-color`, `outline-color` 등)을 명시적으로 지정하십시오. 접근성을 위해 항상 `@media (prefers-reduced-motion: reduce)` 오버라이드를 포함하여 `transition: none`으로 설정하십시오. +**학습:** CSS 트랜지션(`transition: all`)을 추가하면 의도치 않은 애니메이션과 성능 문제를 일으킬 수 있습니다. 또한, 애니메이션은 전정 운동 장애가 있는 사용자에게 문제를 유발할 수 있습니다. +**조치:** CSS 트랜지션을 추가할 때 `transition: all` 대신 속성(`background-color`, `outline-color` 등)을 명시적으로 지정하십시오. 접근성을 위해 항상 `@media (prefers-reduced-motion: reduce)` 오버라이드를 포함하여 `transition: none`으로 설정하십시오. ## 2024-07-10 - 다크 모드 지원 및 지역화 일관성 확보 -**Learning:** `html4tree` CLI로 생성되는 정적 HTML에서 사용자는 네이티브 다크 모드를 기대하며(접근성, 가독성 문제), `