optimize

개요

optimize 스킬이란?

optimize 스킬은 개발자와 팀이 웹 애플리케이션의 UI 성능 문제를 체계적으로 진단하고 해결할 수 있도록 설계되었습니다. 로딩 속도, 렌더링 효율, 애니메이션 부드러움, 이미지 최적화, 번들 크기 최소화 등 다양한 성능 요소를 다룹니다. 사용자가 느린 로딩, 끊김 있는 인터랙션, 부자연스러운 애니메이션을 경험하거나 사이트 전반의 속도를 개선하고자 할 때, optimize 스킬은 문제를 식별하고 해결하는 구조화된 접근법을 제공합니다.

누가 optimize를 사용해야 하나요?

• 웹 성능에 집중하는 프론트엔드 개발자 및 엔지니어
• Core Web Vitals와 사용자 경험 개선을 목표로 하는 팀
• 느리고 반응이 느린 무거운 웹 애플리케이션 문제를 해결하려는 모든 사람

optimize가 해결하는 문제들

• 느린 초기 페이지 로드 및 높은 상호작용 가능 시간
• 큰 JavaScript, CSS, 이미지 번들
• 부실한 애니메이션 또는 렌더링 성능
• 비효율적인 이미지 전달 및 로딩
• 전반적인 UI 느려짐 또는 끊김

사용 방법

설치 단계

1. 에이전트 환경에 스킬 추가:

   npx skills add https://github.com/pbakaus/impeccable --skill optimize
   

2. 핵심 문서 검토:

   • 워크플로우와 최적화 전략 개요는 SKILL.md에서 시작하세요.
   • 더 깊은 이해를 위해 README.md, AGENTS.md, metadata.json 및 rules/, resources/, scripts/ 같은 지원 폴더도 확인하세요.

최적화 시작하기

• 현재 성능 평가:
  • Core Web Vitals 측정 (LCP, FID/INP, CLS)
  • 로드 시간, 번들 크기, 런타임 성능, 네트워크 요청 분석
• 병목 현상 파악:
  • 느린 부분 확인 (예: 초기 로드, 인터랙션, 애니메이션)
  • 원인 분석 (예: 큰 이미지, 무거운 JavaScript, 레이아웃 쓰래싱)
  • 영향도 및 영향을 받는 사용자 그룹 평가
• 최적화 전략 적용:
  • 이미지 최적화 (최신 포맷, 적절한 크기, 지연 로딩, 압축, CDN 전달)
  • 번들 크기 축소 (코드 분할, 트리 쉐이킹, 최소화)
  • 렌더링 및 애니메이션 성능 개선 (레이아웃 쓰래싱 방지, 효율적인 CSS/JS 사용)
  • 변경 전후 지속적인 측정으로 실제 개선 확인

스킬 맞춤화

optimize 스킬은 프레임워크와 모범 사례를 제공합니다. 최상의 결과를 위해 사용 중인 기술 스택, 저장소, 프로젝트 제약에 맞게 권장 사항을 조정하세요.

FAQ

optimize가 다루는 성능 문제 유형은 무엇인가요?

optimize는 느린 로딩, 큰 번들, 비효율적인 이미지, 끊김 있는 렌더링, 애니메이션 문제 등 UI 성능 문제를 대상으로 합니다.

내 프로젝트에 optimize가 적합한지 어떻게 알 수 있나요?

사용자나 본인이 느린 로딩, 부자연스러운 애니메이션, 성능 병목 현상을 경험한다면 optimize가 적합합니다. 특히 Core Web Vitals나 전반적인 사용자 경험 개선을 목표로 하는 웹 앱에 유용합니다.

자세한 최적화 단계는 어디서 확인할 수 있나요?

주요 워크플로우와 전략은 SKILL.md에 정리되어 있습니다. 추가 정보는 저장소 내 지원 파일과 폴더를 참고하세요.

어떤 프론트엔드 프레임워크와도 사용할 수 있나요?

네, 이 스킬은 대부분의 최신 웹 프레임워크와 스택에 적용할 수 있는 일반적인 성능 원칙과 실행 가능한 단계를 제공합니다.

optimize를 최대한 활용하려면 어떻게 해야 하나요?

변경 전후 성능을 항상 측정하세요. 가장 영향력 있는 병목부터 우선적으로 개선하고, 사용자 환경과 요구에 맞게 최적화를 조정하세요.

전체 파일 트리와 자세한 내용은 스킬 디렉토리의 Files 탭에서 확인할 수 있습니다.