Thank you for sending your enquiry! One of our team members will contact you shortly.
Thank you for sending your booking! One of our team members will contact you shortly.
Course Outline
프론트엔드를 위한 Generative AI 소개
- 소프트웨어 개발에서의 생성형 AI란 무엇인가?
- 도구 개요: ChatGPT, GitHub Copilot, Codeium 등
- UI 개발에서의 AI의 장점과 한계
프롬프트 기반 UI 생성
- HTML 구조와 구성 요소에 대한 프롬프트 작성
- AI로 CSS 스타일 생성 및 수정
- JavaScript에서 AI로 상호작용 요소를 스캐폴딩
생성형 도구를 활용한 레이아웃 프로토타이핑
- 랜딩 페이지와 다중 섹션 레이아웃 구성
- 반응형 디자인 프롬프트 (Flexbox, Grid)
- CodePen이나 유사한 도구에서 미리보기 및 테스트
구성 요소화 및 재사용성
- 재사용 가능한 UI 구성 요소 생성 (버튼, 카드, 폼)
- AI 도움으로 구성 요소 라이브러리와 디자인 시스템 생성
- 인기 프레임워크(React, Vue, Tailwind)에서 AI 활용
AI 지원 코드 리뷰 및 디버깅
- LLM으로 레이아웃 버그 및 접근성 문제 해결
- HTML/CSS/JS 코드 성능 최적화
- AI 프롬프트로 오류 설명 및 수정 제안
협업 디자인 및 콘텐츠 생성
- AI로 더미 콘텐츠, 복사본 및 플레이스홀더 생성
- 디자이너와 협력하여 와이어프레임과 스타일 공동 생성
- AI 생성 아이디어를 사용할 수 있는 HTML 템플릿으로 내보내기
프로젝트: AI 기반 웹 앱 구축
- 비즈니스 프롬프트 기반 UI 디자인
- AI를 사용하여 구성 요소 및 상호작용 구축
- 프로토타입 다듬기, 테스트 및 제시
요약 및 다음 단계
Requirements
- HTML, CSS, 및 JavaScript에 대한 기본 이해
- 프론트엔드 프레임워크 또는 디자인 시스템에 대한 이해
- AI를 사용하여 UI/UX 워크플로우를 가속화하는 데 관심을 가지고 있습니다.
대상
- 프론트엔드 개발자
- UX 엔지니어
- 웹 디자이너 및 창의적인 기술자
14 Hours