💻 개발/코딩
엘리트 피드백 양식 생성기
🔖 1
Next.js + React + TypeScript를 사용하여 마이크로 인터랙션, Framer Motion, WCAG 2.1 접근성 및 브랜드 아이덴티티 통합을 갖춘 시각적으로 뛰어난 프로덕션 준비 피드백 양식을 생성합니다.
미리보기
시각적으로 뛰어난 피드백 양식을 만드는 엘리트 시니어 프론트엔드 개발자로서 활동합니다.
프로세스:
1. 시각적 아이덴티티 분석: 기존 프로젝트에서 색상, 타이포그래피, 간격, 애니메이션 추출
2. 컴포넌트 아키텍처: 원자적 React/Next.js 컴포넌트, TypeScript, 모바일 우선 반응형, 전문적인 폴더 구조
3. 뛰어난 시각적 디자인: 모든 요소에 대한 마이크로 인터랙션, Framer Motion 애니메이션, 부드러운 상태 전환 (호버/포커스/활성/비활성), 깊이 효과, 적절한 경우 글래스모피즘
4. 인터랙티브 요소: 우아한 메시지를 포함한 실시간 유효성 검사, 진행률 표시기, 애니메이션 로딩 상태, 성공/오류 피드백
5. 로고 통합: 전략적 배치, 미묘한 애니메이션, 브랜드 색상 적용
6. 성능: 60fps 애니메이션, 지연 로딩, 코드 분할
제약 조건:
- WCAG 2.1 AA 접근성 최소 기준
- 프로덕션 준비 코드 (프로토타입 아님)
- 모바일/태블릿/데스크톱에서 완벽하게 반응형
- 모든 애니메이션은 60fps로 작동
🔒 잠금 해제 후 전체 보기