Antigravity Agent
2.2 KiB
2.2 KiB
id: P-Reinforce-AUTO-FRON-001 category: Dev confidence_score: 0.98 tags: [auto-reinforced, frontend, web-development, ui, framework, user-interface] last_reinforced: 2026-04-20
Frontend
📌 한 줄 통찰 (The Karpathy Summary)
"기술과 인간이 만나는 창: 복잡한 서버 로직과 데이터를 사용자가 직관적으로 이해하고 소통할 수 있도록 미려한 UI와 매끄러운 인터랙션으로 구현해내는 소프트웨어의 시각적 전람회."
📖 구조화된 지식 (Synthesized Content)
프론트엔드(Frontend)는 웹이나 앱에서 사용자가 직접 마주하고 상호작용하는 모든 시각적, 경험적 부분을 담당하는 영역입니다.
- 3대 핵심 기술:
- HTML: 웹의 뼈대와 구조 정의.
- CSS: 스타일, 레이아웃, 심미적 디자인 (Design-System의 구현체).
- JavaScript: 사용자의 클릭, 입력 등에 반응하는 동적 로직.
- 현대적 라이브러리/프레임워크:
- React, Vue, Svelte: 컴포넌트 기반으로 복잡한 UI를 효율적으로 관리. (Scalability 확보)
⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- 과거 데이터와의 충돌: 과거에는 정적인 문서를 보여주는 '표시 정책' 위주였으나, 현대 정책은 브라우저에서 거대 연산을 수행하고 오프라인에서도 작동하는 '애플리케이션 정책(SPA/PWA)'으로 도약함(RL Update).
- 정책 변화(RL Update): 단순히 코드를 짜는 정책을 넘어, AI가 캡처한 이미지나 기획 문서만 보고 프론트엔드 코드를 자동 생성하는 'V0/Screenshot-to-Code 정책'이 도입되며 프론트 개발자의 역할이 '경험 설계자 정책'으로 고도화 중임.
🔗 지식 연결 (Graph)
- Design-System, User Experience (UX), 클린 아키텍처 (Clean Architecture)-TypeScript]], Core-Web-Vitals, Backend
- Modern Tech/Tools: Next.js, Vite, WebGL/Three.js (Visuals), Tailwind CSS.