AI WEB DESIGN · FIGMA AI + HTML5 · 100 DAYS

디자인 기획부터
AI 웹페이지 구현까지.

Figma의 오토 레이아웃·컴포넌트·반응형 UI 디자인과 Figma Sites·Make 활용법을 익히고, HTML5·CSS·Flex·Grid·미디어 쿼리 및 ChatGPT 코딩 실습으로 실제 웹페이지를 구현하는 AI 웹디자인 실무 패키지입니다.

100일 학습 패키지 Figma AI HTML5 · CSS 반응형 웹 ChatGPT 코딩

DESIGN + DEVELOPMENT WORKFLOW

Figma → HTML5 → AI

UI 설계와 디자인 자동화부터 실제 반응형 웹 구현까지

100일 학습 패키지

7개 강좌 단원

47차시 전체 커리큘럼

Figma + HTML5 디자인·개발 통합

WHY THIS PACKAGE

화면을 디자인하는 것에서
직접 구현하는 역량까지.

Figma AI 디자인 도구와 HTML·CSS 기반 제작 기술을 하나의 학습 흐름으로 연결합니다.

Figma 기반 UI 디자인

스타일·벡터·오토 레이아웃·컴포넌트·베리언츠를 활용한 웹·모바일 화면 구성

반응형 웹 구현

HTML 구조, CSS 박스모델, Flex·Grid 및 미디어 쿼리로 디바이스에 대응하는 웹 제작

AI 활용 제작 효율화

Figma Sites·Make와 ChatGPT 코딩·디버깅을 활용한 디자인·개발 워크플로우

CORE LEARNING

패키지 주요 학습내용

디자인 시스템 기초부터 AI 코딩까지 단계적으로 익힙니다.

01 · FIGMA

디자인 기초·시스템

그래픽 스타일·벡터·오토 레이아웃·컴포넌트·베리언츠

02 · FIGMA AI

반응형 UI·AI 도구

모바일 레이아웃, html.to.design, Figma Sites·Make

03 · HTML & CSS

웹페이지 개발

HTML5 태그·폼·테이블, CSS 스타일링·Flex·Grid

04 · RESPONSIVE & AI

모바일 웹·AI 코딩

미디어 쿼리, 반응형 UI, ChatGPT 활용 코딩·디버깅

LEARNING PATH

4단계 AI 웹디자인 학습 로드맵

기획부터 디자인·구현·AI 활용까지 하나의 제작 과정으로 연결합니다.

STEP 01

Figma 디자인 입문

그래픽 스타일·오토 레이아웃·컴포넌트 이해

STEP 02

반응형 UI·Figma AI

모바일 컴포넌트·Figma Sites·Make 활용

STEP 03

HTML5·CSS 구현

웹 문서·레이아웃·반응형 스타일 제작

STEP 04

ChatGPT 코딩 실습

웹 코드 생성·수정과 디버깅 활용

FULL CURRICULUM

전체 학습 커리큘럼

강좌를 클릭하면 차시별 학습내용과 강의시간을 볼 수 있습니다.

Figma AI | 입문·디자인 자동화

3개 강좌 · 26차시

01 Figma AI 입문 · Part.1 그래픽 스타일과 벡터 · 오토 레이아웃 8차시

01 Figma 시작하기 00:29:14

02 Figma의 그래픽 스타일과 벡터1 00:32:34

03 Figma의 그래픽 스타일과 벡터2 00:28:36

04 Figma의 그래픽 스타일과 벡터3 00:29:50

05 스타일 만들고 편집1 00:27:01

06 스타일 만들고 편집2 00:25:48

07 합리적인 배치를 위한 오토 레이아웃1 00:31:10

08 합리적인 배치를 위한 오토 레이아웃2 00:28:20

02 Figma AI 입문 · Part.2 컴포넌트 · 베리언츠 · 반응형 레이아웃 8차시

01 컴포넌트와 베리언츠1 00:31:51

02 컴포넌트와 베리언츠2 00:26:51

03 오토 레이아웃과 컴포넌트 기초 예제1 00:29:44

04 오토 레이아웃과 컴포넌트 기초 예제2 00:35:50

05 반응형 레이아웃1 00:34:18

06 반응형 레이아웃2 00:35:55

07 반응형 레이아웃3 00:34:57

08 반응형 컴포넌트 제작 00:29:58

03 Figma AI 입문 · Part.3 모바일 UI · Figma Sites · Figma Make · AI 10차시

01 모바일 레이아웃1 00:30:27

02 모바일 레이아웃2 00:33:05

03 모바일 레이아웃3 00:38:23

04 모바일 컴포넌트 제작 00:26:15

05 html.to.design 플러그인 00:16:45

06 Figma Site로 간단한 웹페이지 구현 00:37:04

07 Figma Make, 프롬프트 투 코드 구현1 00:31:13

08 Figma Make, 프롬프트 투 코드 구현2 00:35:04

09 Figma AI 신기능1 00:20:30

10 Figma AI 신기능2 00:22:19

HTML5 with AI | 웹 개발 입문

4개 강좌 · 21차시

01 HTML5 with AI · Part.1 HTML5 개요 및 문서 구조 5차시

01 HTML 구조와 기본 태그 00:28:45

02 이미지, 링크, 리스트 활용법1 00:14:08

03 이미지, 링크, 리스트 활용법2 00:11:39

04 폼 요소로 사용자 입력 받기 00:22:29

05 리스트와 테이블로 정보 정리 00:26:28

02 HTML5 with AI · Part.2 CSS 기초 · Flex · Grid 8차시

01 CSS 적용법과 기본 색상 00:32:39

02 글꼴 꾸미기 00:23:28

03 박스모델과 여백 이해하기1 00:25:50

04 박스모델과 여백 이해하기2 00:28:06

05 요소의 배치 이해하기 00:30:55

06 Flex 레이아웃의 시작1 00:31:51

07 Flex 레이아웃의 시작2 00:30:41

08 Grid 레이아웃의 시작 00:19:48

03 HTML5 with AI · Part.3 모바일 웹 · 미디어 쿼리 · 반응형 5차시

01 반응형의 개념과 미디어 쿼리 00:23:39

02 반응형 모바일 메뉴 00:23:01

03 반응형 텍스트 00:21:03

04 모바일 제품 스타일 00:22:50

05 모바일 컬처 룩 스타일 00:26:11

04 HTML5 with AI · Part.4 ChatGPT를 활용한 웹 코딩 3차시

01 ChatGPT 소개 00:15:45

02 ChatGPT를 활용한 코딩 00:16:24

03 CHAT GPT 디버깅을 통한 웹 스타일 00:28:07

WHO IT'S FOR

이런 분들께 추천합니다

01 Figma로 웹·모바일 UI 디자인을 기초부터 배우려는 분

02 디자인 시안을 HTML·CSS 웹페이지로 직접 구현하고 싶은 분

03 반응형 레이아웃과 컴포넌트 설계를 실습하려는 학습자

04 Figma AI와 ChatGPT를 활용해 웹 제작 효율을 높이고 싶은 분

FAQ

자주 묻는 질문

디자인이나 코딩을 처음 배워도 수강할 수 있나요?

네. Figma 시작하기와 HTML 문서 구조·기본 태그부터 차근차근 다루는 입문 과정입니다.

Figma로 디자인만 배우는 과정인가요?

아닙니다. Figma의 UI 디자인과 AI 기능뿐 아니라 HTML5·CSS·반응형 웹 구현 및 ChatGPT 코딩 활용까지 포함합니다.

반응형 모바일 웹 제작도 배우나요?

네. Figma 반응형 레이아웃과 모바일 컴포넌트를 실습하고, HTML5 과정에서 미디어 쿼리와 모바일 메뉴·텍스트·스타일을 학습합니다.

AI 도구는 어떤 기능을 활용하나요?

Figma Sites·Figma Make·html.to.design 등을 활용한 디자인 워크플로우와 ChatGPT를 활용한 웹 코딩 및 디버깅을 다룹니다.

디자인한 화면을 직접 구현하는 힘,
AI 웹디자인 실무에서 시작하세요.

Figma AI부터 HTML5·CSS와 ChatGPT 코딩까지, 하나의 패키지로 학습합니다.

강의 검색

최근 검색어

추천 검색어

UI/UX · 웹디자인

[100일] AI 웹디자인 실무 패키지 (Figma AI + HTML5)

디자인 기획부터
AI 웹페이지 구현까지.