premium-frontend-ui은(는) 무엇을 하나요?
GitHub Copilot이 고급 모션, 타이포그래피 및 아키텍처 기법으로 몰입감 있고 고성능의 웹 경험을 제작할 수 있도록 안내하는 종합 가이드입니다.
개요
이 스킬은 GitHub Copilot이 프런트엔드 개발 시 미적 감각과 성능을 동시에 만족시키는 코드를 생성하도록 돕습니다. Copilot이 제안하는 모든 UI 관련 코드는 다음 원칙을 따라야 합니다.
- 모션 디자인: 사용자 경험을 향상시키기 위해 CSS 애니메이션, 전환, keyframes를 적극 활용합니다. 애니메이션은 60fps를 유지하며, 불필요한 리플로우를 피합니다.
- 타이포그래피: 시스템 폰트 스택을 우선 사용하며, 웹 폰트는 필요한 경우에만 중요 CSS로 로드합니다. 타이포그래피 스케일은 일관된 리듬을 유지합니다.
- 컴포넌트 아키텍처: 작고 재사용 가능한 컴포넌트로 분할하며, 각 컴포넌트는 단일 책임 원칙을 따릅니다. 상태는 가능한 한 가까운 곳에서 관리하고, props는 명시적으로 정의합니다.
주요 기능
| 기능 | 설명 |
|---|---|
| 동적 애니메이션 | 인터랙션에 반응하는 부드러운 애니메이션 생성 |
| 타이포그래피 시스템 | 일관된 폰트 크기, 간격, 두께 관리 |
| 성능 최적화 | 코드 스플리팅, 이미지 최적화, 지연 로딩 패턴 |
| 접근성 | ARIA 속성, 키보드 네비게이션, 색상 대비 보장 |
사용 예시
다음은 Copilot이 이 스킬을 활성화한 상태에서 생성할 수 있는 코드 예시입니다.
import { motion } from 'framer-motion';
const FadeIn = ({ children }) => (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
{children}
</motion.div>
);
export default FadeIn;
환경 변수
이 스킬은 특별한 환경 변수를 요구하지 않습니다.