💻 개발/코딩

엘리트 피드백 양식 생성기

🔖 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로 작동
🔒 잠금 해제 후 전체 보기

AI에서 열기

공유하기