Polish (다듬기)
개요
토큰, 구조, 안티-슬롭 이후에 마이크로-크래프트를 적용하여 렌더링된 표면에서 UI가 올바르게 느껴지도록 합니다. 여기에 제시된 수치 레시피는 별도의 표준이나 프로젝트 토큰이 있지 않는 한 경험칙(heuristics)입니다.
사용 시기
/ui빌드 마무리 단계 (anti-slop-design이후)/polish/ "세부 조정" / "뭔가 어색함"- 호버, 누름, 진입/진출, 아이콘 교체와 같은 미세 상호작용
건너뛰어야 할 때
- 구조적 그리드/간격/계층 구조 →
design-foundations - 렌더링 방향 비교 / 모든 상태 강조 →
prototype - 중첩된 둥근 모서리 / 입체감 언어 →
design-surfaces - 타이포그래피 역할, 줄바꿈, 생략 →
design-typography - 준수 여부 (대비, 이름, 키보드) →
accessibility - 모션 시스템 / 명명된 패밀리 →
motion - 카피 전용 / "AI 작성 텍스트" / 빈 상태 문구 →
content-design - "코드 정리" / 생성된 구현체 →
anti-slop-code - 렌더링된 UI 변경이 없는 백엔드 전용 수정
반드시 지켜야 할 사항 (MUST)
| 규칙 | 세부 사항 |
|---|---|
| 렌더링된 증거 | 줄바꿈, 정렬, 누름, 둥근 모서리는 소스 코드만이 아닌 렌더링된 UI를 기준으로 판단하세요 |
| 토큰 우선 | --radius, 간격, 타이포그래피 토큰을 사용하고, 토큰이 존재하는데 임시 값을 새로 만들지 마세요 |
| 레시피 분류 | 0.96, 지연 ms 및 유사한 숫자를 경험칙으로 표시하세요 |
| 가장 저렴한 유효 수정 | 장식 제거 → 네이티브 CSS → 프로젝트 토큰 재사용 → 그런 다음 추상화 추가 |
| 모바일 크래프트 | <768px에서 전체 너비 기본 CTA; 고정 크롬에 safe-area; 엄지손가락이 닿는 영역에 작업 배치 |
transition: all 금지 | 속성을 명시적으로 지정하고, Tailwind의 기본 transition 사용을 피하세요 |
| 컨트롤 지오메트리 증명 | 보류 중/로딩 상태와 적용 가능한 LTR/RTL을 포함한 전체 컨트롤 매트릭스를 렌더링한 후 광학 정렬을 승인하세요 |
크래프트 (시작점)
| 항목 | 시작점 | 분류 | 인계 |
|---|---|---|---|
| 중첩된 모서리 | 곡선이 중심을 공유할 때 외부 ≈ 내부 + inset | 경험칙 | design-surfaces |
| 컨트롤 내 아이콘 | 기하학적 중심보다 광학적 미세 조정 | 권장사항 | — |
| 섹션 깊이 | 프로젝트 테두리/입체감 언어 | 프로젝트 기본값 | design-surfaces |
| 호버/토글 | 중단 가능한 CSS 전환 | 권장사항 | 안무가 필요하면 motion |
| 누름 | 누름 피드백이 필요할 경우 scale(0.96) | 경험칙 | — |
| 동적 숫자 | tabular-nums | 권장사항 | design-typography |
| 짧은 제목 | text-wrap: balance | 권장사항 | design-typography |
| 터치 영역 | 44×44 터치 / ≥40 조밀한 데스크탑 | 권장사항 | WCAG 2.5.8(24px)을 위해 accessibility |
예외: 알약/원형, 조밀한 툴바(누름 스케일 비활성화), 동작 감소, 비-동심 브랜드 언어, 윤곽선이 필요 없는 이미지.
컨트롤 지오메트리
- 텍스트 전용, 앞쪽 아이콘, 뒤쪽 아이콘, 아이콘 전용, 보류 중/로딩 상태를 포함한 렌더링된 광학 변형 매트릭스
기하학적 중앙 정렬(inline-flex / items-center / justify-center)은 필요 조건이지만 증명은 아닙니다. 보편적인 픽셀 오프셋은 없습니다: 먼저 렌더링된 매트릭스를 비교한 다음, 고정된 아이콘 슬롯이나 글리프 내부에 가장 작은 보정을 적용하세요.
아이콘-레이블 콘텐츠 그룹과 인지된 시각적 질량이 변형 및 상태 간에 균형을 이루고 중앙에 위치하는지 판단하세요. 레이블의 기준선/캡-높이 관계를 아이콘과 별도로 평가하세요. 레이블 자체가 아이콘+텍스트 변형에서 컨트롤의 중심을 차지할 필요는 없습니다. 아이콘 시각적 무게, 토큰 간격, 대칭 토큰 패딩, 포커스, 터치 영역, 비활성화, 보류 중/로딩 상태를 함께 확인하고, 의도하지 않은 콘텐츠 그룹이나 컨트롤 너비 이동이 없는지 확인하세요. 제품이 지원하는 경우 LTR과 RTL을 모두 포함하세요.
안정적인 보류 중 지오메트리가 기본값입니다. 명시적인 측정-모핑 예외(references/component-patterns.md 참조)의 경우, 두 종단점과 대상 재생을 검사하고, 인접 동작이 안정적으로 유지되는지 확인한 후 증거와 함께 예외를 보고하세요. 의도적인 모핑이 우발적인 스피너 이동이나 접근성 이름 누락을 정당화하지 않습니다.
워크플로우
- 범위 설정 — 표면 이름을 지정하고, 구조적 또는 토큰 시스템 작업은 건너뜁니다.
- 스캔 — 1x/2x, 라이트/다크, 호버/누름/포커스, 모바일 너비로 렌더링합니다.
- 컨트롤 매트릭스 — 텍스트 전용, 앞쪽/뒤쪽 아이콘, 아이콘 전용, 보류 중/로딩, 적용 가능한 LTR/RTL을 렌더링된 크기에서 비교합니다.
- 수정 — 가장 저렴한 유효 변경; 값을 토큰에 매핑하고, 광학 보정을 아이콘 슬롯 내부에 유지합니다.
- 보고 — 원칙별로 그룹화된 Before/After 표; 검사되지 않은 상태는
확인되지 않음으로 표시합니다.
경계
- 결정할 수 있음: 광학 미세 조정, 명명된 전환, tabular-nums, 줄바꿈 도우미, 프로젝트에 없는 경우 누름 피드백.
- 해서는 안 됨:
0.96, 바운스0, 또는 동심 반경을 보편 법칙으로 취급함; 깨진 레이아웃 위에 polish를 적용함; 브랜드 폰트를 대체함.
체크리스트
- 중첩된 둥근 모서리가 광학적으로 확인됨 (또는
design-surfaces로 인계됨) - 아이콘이 어색해 보이는 곳에서 광학적으로 중앙 정렬됨
- 전체 렌더링된 컨트롤 매트릭스 확인됨: 텍스트 전용, 앞쪽/뒤쪽 아이콘, 아이콘 전용, 보류 중/로딩, 해당 시 LTR/RTL
- 아이콘-레이블 그룹/인지된 시각적 질량이 중앙에 위치함; 레이블 기준선/캡-높이 관계, 아이콘 시각적 무게, 토큰 간격/패딩 확인됨
- 포커스, 터치 영역, 비활성화, 로딩 상태에서 레이블이나 너비 이동 없이 지오메트리 유지
-
transition: all없음; 호버/누름 중단 가능 - 동적 숫자가 지터링될 수 있는 곳에
tabular-nums사용 - 제목
text-balance; 유용한 곳에 짧은 카피text-pretty - 터치 영역이 겹치지 않으면서 44/40 가이드라인 충족
- 모바일 크래프트: <768px에서 전체 너비 기본 CTA, safe-area, 엄지 영역
- 경험칙에 레이블 지정; 테스트되지 않은 상태는
확인되지 않음으로 표시
심층 정보
전체 예제: references/polish.md.
관련 항목: design-surfaces, design-foundations, design-typography, motion, accessibility, references/evidence-policy.md.