인터페이스 다듬기
이 스킬은 사용자가 기존 인터페이스를 더 완성된 느낌으로 만들고 싶을 때, 또는 작은 시각적 세부 사항이 중요한 컴포넌트를 구현할 때 사용합니다. 제품의 시각적 정체성, 정보 구조 또는 상호작용 모델을 변경하지 않고 명확성, 일관성, 피드백을 개선합니다. 요청이 없는 한 이러한 요소를 변경하지 마세요.
로컬 비주얼 언어 파악
편집 전에 프레임워크, 스타일링 접근 방식, 컴포넌트 라이브러리, 디자인 토큰 및 주변 컴포넌트 관례를 식별하세요. 기존 시스템을 따르고 공유 컴포넌트와 값을 재사용하세요. 여러 로컬 패치보다는 공유 소스에서 한 번 수정하는 것을 선호합니다. 다듬기 세부 사항을 위해 의존성이나 스타일링 시스템을 추가하지 마세요.
시각적 일관성은 증거이지만, 개인적인 취향이 결함은 아닙니다. 평평한 표면이나 절제된 모션과 같이 의도적인 프로젝트 관례가 일관되게 적용된 경우 이를 유지하세요.
올바른 모드 선택
구현. 관찰된 문제를 해결하거나 명시적으로 요청된 처리를 완료하는 변경만 수행합니다. 동작은 접근 가능하게 유지하고 구현은 프로젝트에 관용적인 방식으로 유지합니다.
검토. 구현도 요청되지 않는 한 읽기 전용으로 유지합니다. 검사 범위를 명시하고, 관련 상태를 평가하며, 렌더링된 인터페이스나 소스 증거로 뒷받침되는 발견 사항만 보고합니다. 관찰되지 않은 시각적 동작을 사실로 제시하지 마세요.
두 모드 모두에 대해 references/polish-checklist.md를 참조하여 결정 가이드, 상태 범위 및 보고 형식을 확인하세요. 구현의 경우 프로젝트의 실제 스택(CSS, Tailwind, React Motion, GSAP 또는 Three.js)에 대해서만 references/implementation-recipes.md를 읽으세요. 색상, 포커스, 모션, 컨트롤 또는 대상 크기 작업에 대해서는 references/wcag-accessibility.md를 읽으세요. 전경색과 배경색을 16진수 값으로 확인할 수 있는 경우 scripts/check_contrast.py를 실행하세요.
고가치 개선 사항 적용
- 텍스트: 콘텐츠 길이와 뷰포트에 따라 줄 바꿈을 선택합니다. 변경되는 너비가 주변 콘텐츠를 방해할 때 실시간 숫자 값을 안정화합니다.
- 표면: 중첩된 둥근 모서리, 깊이, 이미지 가장자리 및 아이콘 배치를 시각적 관계로 취급합니다. 렌더링된 컨텍스트에서 잘못 보일 때 수정합니다.
- 피드백: 기본, 호버, 포커스, 누름, 선택, 로딩 및 비활성화 상태를 쉽게 구분할 수 있도록 만듭니다. 모션이 변경의 유일한 신호가 되지 않도록 합니다.
- 모션: 사용자 주도 상태 변경에는 가역적인 전환을 사용합니다. 단계적 모션은 계층 구조나 방향을 설명하는 드문 순간을 위해 예약합니다.
prefers-reduced-motion을 존중합니다. - 입력 컨텍스트: 터치 장치가 고정 호버 처리를 상속받지 않도록 합니다. 컨트롤을 다듬는 동안에도 가시적인 포커스 동작, 키보드 조작 및 실용적인 대상 크기를 유지합니다.
사용자에게 이점이 없는 장식적인 변경은 피하세요. 광범위한 전환, 영구적인 성능 힌트 또는 일상적인 작업을 느리게 하거나 파악하기 어렵게 만드는 모션을 사용하지 마세요.