[AX 시대의 프론트엔드] AI Figma(피그마) 디자인 & 반응형 웹 구현
강의소개
강의정보
| 학습개요 |
Figma 디자인 분석부터 반응형 웹 구현까지, 현업 실무 흐름 그대로 완성! Figma 디자인이 완성된 실무 환경에서 출발해 반응형 웹사이트 배포까지. 실무 프로세스 전체를 익히는 과정으로 디자인 시스템 기반의 유지보수 가능한 개발 방식을 습득할 수 있습니다. |
|---|---|
| 학습목표 |
- Figma 디자인을 분석하여 코딩 친화적인 구조로 해석하고 HTML/CSS/JS(자바스크립트)로 구현할 수 있다. - 공통 컴포넌트와 디자인 시스템을 기반으로 재사용 가능한 구조의 웹페이지를 설계하고 개발할 수 있다. - 미디어 쿼리와 컨테이너 쿼리를 활용하여 실무 수준의 반응형 웹사이트를 완성할 수 있다. |
| 학습대상 |
|
강사이력
- ㈜이스트소프트, 오르미 프론트엔드 개발(React, HTML/CSS/ja
- 그린컴퓨터아트학원(종로점), [KDT] 기업연계 프로젝트형 프론트엔드 sw 개발자 양성
- 더조은컴퓨터아트학원, 프론트엔드 개발 강의
- 코딩은 처음이라 with 웹 퍼블리싱(2022) 저자
- 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서(2021) 저자 |
강의목차
-
강의정보 번호 강의명 1강실무 포트폴리오 완성 로드맵 : 결과물 미리보기2강AI 시대 개발 트렌드3강Figma 디자인 해부 : 코딩을 위한 구조 읽기 (레이어 & 그룹)4강웹사이트 제작을 위한 개발 환경5강실무형 프로젝트 세팅 : 유지보수 가능한 구조 설계6강디자인 시스템 구축 : 컬러와 타이포그래피 통일하기7강재사용 가능한 UI 만들기 : 컴포넌트 설계의 핵심8강일관된 화면 구조 만들기 : 레이아웃 설계9강첫인상을 결정 짓는 Header & Navigation 구현10강시선을 사로잡는 Hero 섹션 구현11강About (내 소개) 섹션 구현 -
강의정보 번호 강의명 12강Works (작품 목록) 섹션 구현13강Skills / Goals 섹션 구현14강Testimonial (후기) 섹션 구현15강Contact (문의 폼) 구현16강페이지 마무리 : Footer 구현과 구조 정리17강사용자 인터랙션 구현 : 입력 처리와 UI 동작 제어18강UI 애니메이션 구현 : 시각적 효과와 동적 표현19강반응형 설계 : 기본 구조와 적용 원리20강반응형 구현 : 다양한 환경 대응 전략21강최종 검수 및 웹 호스팅 배포
