
웹디자인 기능사 실기 (디자인편)
두노피
웹디자인 기능사 (디자인) 하는 수업입니다. 몇번 해보면 어렵지 않게 따라할 수 있을거에요 단, 포토샵을 할 줄 알아야 합니다.
초급
Photoshop
웹제작 기초
웹제작 전문가
포트폴리오 방향
AI 전문가
웹페이지를 만들기 위해서는 단순히 HTML 태그와 CSS 문법을 외우는 것만으로는 부족합니다.
화면을 어떻게 구성할 것인지 생각하고,
디자인을 HTML과 CSS로 구현하고,
필요한 애니메이션과 인터랙션을 적용하고,
PC와 모바일 환경에 맞게 반응형으로 완성해야 합니다.
그리고 이제는 AI를 활용하는 능력 역시 웹 개발의 중요한 경쟁력이 되었습니다.
이 강의에서는 웹 제작의 기본기를 익히는 동시에 AI를 적극적으로 활용하여 더 빠르게 만들고, 더 쉽게 수정하고, 더 좋은 결과물을 만드는 방법까지 함께 학습합니다.
웹의 기본이 되는 HTML을 이해하는 것부터 시작합니다.
단순히 태그의 사용법만 배우는 것이 아니라 실제 웹페이지가 어떤 구조로 만들어지는지 살펴보고 직접 구성합니다.
HTML의 구조를 이해하면 디자인을 보면서도
"이 화면은 어떤 구조로 만들어야 할까?"
를 스스로 판단할 수 있게 됩니다.
HTML로 만들어진 구조에 CSS를 적용하면서 본격적으로 웹 UI를 제작합니다.
텍스트와 색상, 여백 같은 기본적인 스타일링부터 Flex, Grid, Position 등을 활용한 레이아웃 구성까지 단계적으로 학습합니다.
디자인 시안을 보고 그대로 따라 만드는 것을 넘어
화면을 분석하고 필요한 CSS를 직접 구성하는 능력을 키웁니다.
웹페이지는 정적인 화면만으로 끝나지 않습니다.
SVG와 CSS 애니메이션, 스크롤 인터랙션 등을 활용하여 사용자의 행동에 반응하는 다양한 UI를 만들어봅니다.
SVG 그래픽
SVG Stroke
CSS Animation
Transition
Scroll Interaction
다양한 UI Motion
단순한 웹페이지에서 한 단계 더 나아가 생동감 있는 웹 UI를 구현합니다.
PC에서 잘 보이는 웹페이지를 모바일에서도 그대로 보여줄 수는 없습니다.
반응형 웹의 기본 원리를 이해하고 화면 크기에 따라 레이아웃과 UI가 자연스럽게 변화하도록 구현합니다.
Desktop → Tablet → Mobile
각 환경에 맞는 화면을 직접 만들어보면서 실전 반응형 웹 제작 방법을 익힙니다.
이 강의에서는 AI를 단순히 코드를 대신 작성해주는 도구로 사용하지 않습니다.
웹페이지를 만들면서 AI를 활용해
아이디어를 구체화하고 → 코드를 작성하고 → 결과를 확인하고 → 문제를 수정하고 → 완성도를 높이는
실제 개발 과정을 경험합니다.
AI를 활용하여 HTML/CSS 코드를 작성하고,
복잡한 코드를 분석하고,
오류가 발생했을 때 원인을 찾아보고,
기존 UI를 개선하고,
반응형 코드를 수정하는 방법을 학습합니다.
중요한 것은 AI가 만들어준 코드를 그대로 사용하는 것이 아니라 AI가 만든 결과물을 이해하고 원하는 방향으로 수정할 수 있는 능력입니다.
문법을 하나씩 공부하는 것만으로 끝내지 않습니다.
배운 내용을 실제 웹페이지 제작에 적용하면서
HTML 구조 설계
↓
CSS UI 구현
↓
SVG & Animation
↓
Interactive UI
↓
Responsive Web
↓
AI 활용
↓
실전 웹페이지 완성
까지 전체 제작 과정을 경험합니다.
강의를 수강하면서 단순한 예제 화면이 아니라 실제 웹 제작에 활용할 수 있는 다양한 UI를 직접 구현합니다.
웹사이트 기본 레이아웃
다양한 UI 컴포넌트
반응형 웹페이지
SVG 그래픽
애니메이션 UI
스크롤 인터랙션
모바일 대응 웹페이지
AI를 활용한 웹 UI 제작
AI가 코드를 만들어주는 시대일수록
코드를 이해하고 원하는 결과를 만들어낼 수 있는 기본기가 중요합니다.
이 강의에서는 HTML과 CSS의 기본기를 제대로 익히면서 SVG, 애니메이션, 반응형 웹까지 확장하고,
마지막으로 AI를 활용하여 더 빠르고 효율적으로 웹페이지를 제작하는 방법까지 연결합니다.
웹을 처음 시작하는 분부터
기존의 웹 제작 방식에서 한 단계 더 나아가고 싶은 분까지,
직접 만들고, AI와 함께 개선하며, 하나의 웹페이지를 완성하는 과정을 경험해보세요.
학습 대상은
누구일까요?
업무에 AI 활용 하고싶은사람
UX의 방향성
전체
62개 ∙ (21시간 3분)
해당 강의에서 제공:
9. 깃허브 설명
07:20
10. 깃허브 저장소 만들기
04:34
11. 깃허브 파일올리기
11:01
12. 깃허브 + 클로드 사용하기
08:05
13. SVG 애니메이션 소개
00:21
14. SVG 밑그림들
11:13
15. 배경제작
15:18
16. HTML 밑그림
14:14
17. SVG 애니메이션 원리
08:49
18. 배그리기
28:02
19. 크기맞추기
22:16
20. 움직임완성
22:16
21. 일러스트 그림 파일
05:19
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!