📋 프롬프트 전문

[섹션/요소]에 스크롤 시 나타나는 매끄러운 애니메이션 효과를 부여하고 싶습니다. Vanilla CSS의 transition/animation 혹은 Framer Motion을 사용한 역동적인 코드를 작성해 주세요. 성능을 위해 GPU 가속을 활용하는 키워드도 포함해 주세요.

🏷️ 태그

#UI#CSS#애니메이션

💡 활용 팁

✅사용하는 프로그래밍 언어와 프레임워크 버전을 명시하면 더 정확한 코드를 받을 수 있습니다.
✅실제 코드를 함께 붙여넣으면 맥락에 맞는 리뷰와 개선을 받습니다.
✅에러 메시지가 있다면 함께 첨부하여 디버깅 정확도를 높이세요.
✅프로젝트 구조나 의존성 정보를 추가하면 전체적인 아키텍처 맥락에서 조언을 받을 수 있습니다.

🔗 관련 프롬프트

SQL 쿼리 최적화 전문가

복잡하고 느린 SQL 쿼리를 분석하여 인덱스 활용 및 구조적 개선 방안을 제시합니다.

자동 단위 테스트(Unit Test) 생성기

함수나 클래스의 코드를 분석하여 예외 케이스를 포함한 Jest/Pytest 테스트 코드를 생성합니다.

레거시 코드 현대화(Refactoring) 전문가

오래되고 복잡한 코드를 최신 모범 사례와 디자인 패턴을 적용하여 깔끔하게 정리합니다.

AI 코딩 어시스턴트 200% 활용법

AI는 코드 리뷰, 디버깅, 리팩토링, 테스트 코드 작성 등 개발 워크플로우 전반에서 강력한 도우미가 됩니다. 효과적인 코딩 프롬프트의 핵심은 프로그래밍 언어, 프레임워크 버전, 프로젝트의 기술 스택을 명시하는 것입니다. 예를 들어 단순히 "이 코드를 리뷰해줘"보다는 "TypeScript 5.0과 React 18 환경에서 이 커스텀 훅의 메모리 누수 가능성과 성능 최적화 포인트를 분석해줘"처럼 구체적으로 요청하면 실용적인 피드백을 받을 수 있습니다. SOLID 원칙이나 특정 디자인 패턴 적용을 요청하는 것도 효과적입니다.

이 프롬프트는 코딩 카테고리에 속하며, All 모델에서 최적화된 중급 수준의 프롬프트입니다. 프롬프트 엔지니어링의 핵심 원칙인 역할 부여(Role), 맥락 설정(Context), 제약 조건(Constraints)을 체계적으로 적용하여 설계되었습니다.

더 많은 프롬프트를 탐색해 보세요

PromptGenie 라이브러리에서 90개 이상의 검증된 프롬프트를 확인할 수 있습니다.

라이브러리 둘러보기

CSS 애니메이션 및 프레임워크 전문가