코스 개요

프론트엔드를 위한 생성 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를 사용하여 컴포넌트와 상호작용 구축하기
  • 프로토타입 다듬기, 테스트하기, 그리고 발표하기

요약 및 다음 단계

요건

  • HTML, CSS, JavaScript에 대한 기본적인 이해
  • 프론트엔드 프레임워크 또는 디자인 시스템에 대한 경험이 있음
  • AI를 활용하여 UI/UX 워크플로우를 가속화하는 데 관심이 있음

대상자

  • 프론트엔드 개발자
  • UX 엔지니어
  • 웹 디자이너와 크리에이티브 테크놀로지스트
 14 시간

참가자 수


참가자당 가격

회원 평가 (1)

예정된 코스

관련 카테고리