수강 후 이런걸 얻을 수 있어요

  • 웹제작 기초

  • 웹제작 전문가

  • 포트폴리오 방향

  • AI 전문가

이제 웹페이지를 직접 만들어보세요

웹페이지를 만들기 위해서는 단순히 HTML 태그와 CSS 문법을 외우는 것만으로는 부족합니다.

화면을 어떻게 구성할 것인지 생각하고,
디자인을 HTML과 CSS로 구현하고,
필요한 애니메이션과 인터랙션을 적용하고,
PC와 모바일 환경에 맞게 반응형으로 완성해야 합니다.

그리고 이제는 AI를 활용하는 능력 역시 웹 개발의 중요한 경쟁력이 되었습니다.

이 강의에서는 웹 제작의 기본기를 익히는 동시에 AI를 적극적으로 활용하여 더 빠르게 만들고, 더 쉽게 수정하고, 더 좋은 결과물을 만드는 방법까지 함께 학습합니다.


HTML부터 시작해서 실제 웹페이지까지

웹의 기본이 되는 HTML을 이해하는 것부터 시작합니다.

단순히 태그의 사용법만 배우는 것이 아니라 실제 웹페이지가 어떤 구조로 만들어지는지 살펴보고 직접 구성합니다.

HTML의 구조를 이해하면 디자인을 보면서도

"이 화면은 어떤 구조로 만들어야 할까?"

를 스스로 판단할 수 있게 됩니다.


CSS로 디자인을 실제 화면으로 구현합니다

HTML로 만들어진 구조에 CSS를 적용하면서 본격적으로 웹 UI를 제작합니다.

텍스트와 색상, 여백 같은 기본적인 스타일링부터 Flex, Grid, Position 등을 활용한 레이아웃 구성까지 단계적으로 학습합니다.

디자인 시안을 보고 그대로 따라 만드는 것을 넘어
화면을 분석하고 필요한 CSS를 직접 구성하는 능력을 키웁니다.


움직이는 웹 UI를 만들어봅니다

웹페이지는 정적인 화면만으로 끝나지 않습니다.

SVG와 CSS 애니메이션, 스크롤 인터랙션 등을 활용하여 사용자의 행동에 반응하는 다양한 UI를 만들어봅니다.

  • SVG 그래픽

  • SVG Stroke

  • CSS Animation

  • Transition

  • Scroll Interaction

  • 다양한 UI Motion

단순한 웹페이지에서 한 단계 더 나아가 생동감 있는 웹 UI를 구현합니다.


하나의 화면이 모든 기기에서 제대로 보이도록

PC에서 잘 보이는 웹페이지를 모바일에서도 그대로 보여줄 수는 없습니다.

반응형 웹의 기본 원리를 이해하고 화면 크기에 따라 레이아웃과 UI가 자연스럽게 변화하도록 구현합니다.

Desktop → Tablet → Mobile

각 환경에 맞는 화면을 직접 만들어보면서 실전 반응형 웹 제작 방법을 익힙니다.


AI를 활용하면 웹 개발이 달라집니다

이 강의에서는 AI를 단순히 코드를 대신 작성해주는 도구로 사용하지 않습니다.

웹페이지를 만들면서 AI를 활용해

아이디어를 구체화하고 → 코드를 작성하고 → 결과를 확인하고 → 문제를 수정하고 → 완성도를 높이는

실제 개발 과정을 경험합니다.

AI를 활용하여 HTML/CSS 코드를 작성하고,
복잡한 코드를 분석하고,
오류가 발생했을 때 원인을 찾아보고,
기존 UI를 개선하고,
반응형 코드를 수정하는 방법을 학습합니다.

중요한 것은 AI가 만들어준 코드를 그대로 사용하는 것이 아니라 AI가 만든 결과물을 이해하고 원하는 방향으로 수정할 수 있는 능력입니다.


결국 중요한 것은 '완성된 결과물'

문법을 하나씩 공부하는 것만으로 끝내지 않습니다.

배운 내용을 실제 웹페이지 제작에 적용하면서

HTML 구조 설계

CSS UI 구현

SVG & Animation

Interactive UI

Responsive Web

AI 활용

실전 웹페이지 완성

까지 전체 제작 과정을 경험합니다.


이런 결과물을 만들 수 있습니다

강의를 수강하면서 단순한 예제 화면이 아니라 실제 웹 제작에 활용할 수 있는 다양한 UI를 직접 구현합니다.

  • 웹사이트 기본 레이아웃

  • 다양한 UI 컴포넌트

  • 반응형 웹페이지

  • SVG 그래픽

  • 애니메이션 UI

  • 스크롤 인터랙션

  • 모바일 대응 웹페이지

  • AI를 활용한 웹 UI 제작


HTML/CSS의 기본기와 AI 활용 능력을 함께

AI가 코드를 만들어주는 시대일수록
코드를 이해하고 원하는 결과를 만들어낼 수 있는 기본기가 중요합니다.

이 강의에서는 HTML과 CSS의 기본기를 제대로 익히면서 SVG, 애니메이션, 반응형 웹까지 확장하고,

마지막으로 AI를 활용하여 더 빠르고 효율적으로 웹페이지를 제작하는 방법까지 연결합니다.

웹을 처음 시작하는 분부터
기존의 웹 제작 방식에서 한 단계 더 나아가고 싶은 분까지,

직접 만들고, AI와 함께 개선하며, 하나의 웹페이지를 완성하는 과정을 경험해보세요.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 업무에 AI 활용 하고싶은사람

  • UX의 방향성

안녕하세요
두노피입니다.

1,446

수강생

21

수강평

24

답변

4.7

강의 평점

11

강의

웹디자인기능사 실기

전국 평균 합격률 60%에

우리반은 90% 합격중이지용~용용~

커리큘럼

전체

62개 ∙ (21시간 3분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

두노피님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!