Apple 디자인 전문가은(는) 무엇을 하나요?
Apple 디자인 원칙을 의사 결정 프레임워크로 사용하세요: 목적, 주체성, 책임, 친숙함, 유연성, 단순성, 정교함, 즐거움. Apple 화면을 그대로 재현하는 대신 제품과 플랫폼에 맞게 적응하세요.
워크플로우
- 사용자의 주요 작업, 플랫폼, 기존 컴포넌트 시스템 및 반응형 제약 조건을 식별합니다.
- 일회성 요소를 스타일링하기 전에 시맨틱 토큰을 먼저 설정합니다. 시스템을 만들 때 간격 및 레이아웃, 타이포그래피, 색상을 읽습니다.
- 플랫폼에 적합한 패턴, 완전한 상호작용 상태 및 접근성 시맨틱을 구현합니다. 인터랙티브 작업을 위해 상호작용 및 모션과 접근성을 읽습니다.
- 완료 전에 시각적 검토를 실행합니다. 렌더링 환경이 사용 가능한 경우 데스크탑 및 좁은 레이아웃을 검토합니다.
tests/visual-qa-checklist.md의 반복 가능한 검사를 사용합니다. 스크린샷과 Playwright 증거는 관찰일 뿐이며 인증이 아닙니다.
절대적 경계
- Apple 로고, 독점 인터페이스 에셋 또는 소스 코드를 사용하지 마십시오. 대상 플랫폼과 라이선스가 허용하는 경우에만 SF 심볼 또는 Apple 시스템 타이포그래피를 사용하십시오.
- 시각적 개선을 추가하기 전에 HTML 시맨틱, 키보드 동작, 가시적 포커스, 충분한 대비,
prefers-reduced-motion을 우선시하십시오. - 일반적인 AI 시각적 노이즈(장식용 그라데이션, 임의의 그림자, 과도한 유리 효과, 빽빽한 카드 그리드, 일관성 없는 간격, 상호작용 목적 없는 애니메이션)를 피하십시오.
- 기존 디자인 시스템이 있는 경우 이를 사용하십시오. 새로운 토큰과 컴포넌트는 단순히 한 화면을 다르게 보이게 하기 위한 것이 아니라 반복되는 필요를 해결해야 합니다.
구현 경로
- HTML/CSS의 경우, 컴포넌트 패턴 및
examples/html-css/예제를 읽으십시오. - Vue 및 Tailwind의 경우,
examples/vue-tailwind/를 시맨틱 마크업, 반응형 레이아웃 및 포커스 상태의 패턴으로 사용하십시오. - React 및 TypeScript의 경우,
examples/react/를 패턴으로 사용하고 호스트 애플리케이션의 규칙을 유지하십시오. - 플랫폼 적응 및 중단점에 대해서는 반응형 디자인을 읽으십시오. 네이티브 디자인 컨텍스트에 대해서는 디자인 철학을 읽으십시오.
증거 기반 시각적 QA
실행 가능한 인터페이스의 경우, 넓은(1440px) 및 좁은(390px) 뷰포트를 캡처한 다음 키보드 전용 탐색, 가시적 포커스, 텍스트 확대/재배치, 라이트 및 다크 모양, 로딩/에러/빈 상태, 축소 모션을 테스트하십시오. 뷰포트, 브라우저, 경로 및 구체적인 관찰 내용을 기록하십시오. 주관적인 미학을 숫자 점수로 변환하지 말고, 규정 준수 또는 인증을 주장하지 마십시오.