스킬 자체의 표현으로
UI 컴포넌트를 만들거나 프런트엔드 코드를 리뷰하는 모든 사람을 위해 작성된, 인터페이스를 정돈된 느낌으로 만드는 디자인 엔지니어링 원칙: 호버 상태, 그림자, 테두리, 타이포그래피, 아이콘, 마이크로 인터랙션, 진입/종료 애니메이션.
엄격한 기본값이 포함된 열아홉 개의 번호가 매겨진 핵심 원칙을 담고 있습니다 — 동심원 테두리 반경, 광학적 정렬, 가짜 elevation 테두리 대신 레이어드 box-shadow, 중단 가능한 CSS 트랜지션, 약 100ms의 stagger, 안티앨리어싱된 텍스트, 표 형식 숫자, 순수한 검정 또는 흰색 이미지 아웃라인, 누를 때 scale(0.96), 44×44px 히트 영역, 텍스트와 맞춘 아이콘 선 굵기. 빠른 모드와 전체 모드 두 가지 리뷰 모드는 원칙별로 그룹화된 Severity/Location/Before/After/Why 표를 생성하며, 각각 5개 또는 15개의 발견 사항으로 제한되고 Block, Needs changes, Approve 중 하나로 끝납니다.
산출물
- 무엇을 검사했는지 먼저 명시하고, 검사하지 않은 부분이 다뤄진 것처럼 암시하지 않는 리뷰 보고서.
- Severity, Location, Before, After, Why 표 안에서 원칙별로 그룹화된, 일부가 아니라 이루어졌거나 제안된 모든 변경 사항을 나열하는 발견 사항.
- 빠른 모드에서는 1~3개, 전체 모드에서는 2~5개의 실제 후보를 담은 Considered but Rejected 표로, 각각 채택되지 않은 이유가 함께 제시됩니다.
- 실행된 정확한 명령이나 상호작용과 그 관찰된 결과를 나열한 후 판정을 내리는 검증 섹션.
작동 방식
- 01프로젝트 고유의 스타일링 시스템으로 수정 사항 표현하기
수정을 제안하거나 작성하기 전에 프로젝트가 이미 스타일을 지정하는 방식을 파악하고, 그 체계에 맞게 변경 사항을 표현합니다 — Tailwind 프로젝트라면 Tailwind로, CSS 프로젝트라면 순수 CSS로, 이미 자리 잡은 CSS-in-JS 방식이 있다면 그 방식으로 표현합니다.
- 02인터페이스 속도 늦추기
검토할 때는 브라우저의 Animations 패널에서 모션을 10% 속도로 재생합니다. 10% 속도에서 어색하게 보이는 부분이 실제 속도에서는 은근히 잘못된 부분이기 때문입니다.
- 03기본값은 전체 모드
리뷰 모드가 지정되지 않으면 항상 전체 모드가 사용되며, 빠른 모드는 명시적으로 요청해야 합니다.
- 04결과를 고정된 표 형식으로 작성
Severity, Location, Before, After, Why 열이 있는 마크다운 표에서 원칙별로 결과를 그룹화합니다. location에는 path/to/file:line을 명시합니다.
- 05다섯 개 범주를 모두 반영
범위 표에는 Quick Reference의 다섯 개 범주가 모두 포함되어야 하며, 검토하지 않은 영역을 검토한 것처럼 암시해서는 안 됩니다.
- 06검증과 판정으로 마무리
HIGH 결과가 남아 있으면 Block, MEDIUM 또는 LOW 결과만 남아 있으면 Needs changes, 조치할 사항이 전혀 없을 때만 Approve로 판정합니다.