콜로소

01. 강의 소개 : AI 시대의 디자인 & 개발 방법론- 디자인과 개발은 병행이 가능할까? - AI가 UI 디자인, 개발 프로세스에 미친 영향 - 인터랙티브 웹 학습의 기대 효과 - 인터랙티브 웹은 왜 실전 적용이 어려울까? - 디자인과 프로그래밍의 ‘언어’적 특성 - 강의 활용법

02. 필수 개념 이해하기- 웹 프로그래밍 (HTML, CSS, JavaScript) 기초 - React.js를 사용하는 이유 - Material Design 기반 MUI를 사용하는 이유

03. 인터랙티브 웹의 3가지 목적- 효과적인 브랜딩 스토리텔링 - CTA 전환을 위한 전략적 디자인 - 사용성을 위한 마이크로 인터랙션

04. 간과하기 쉬운 웹 디자인 & 개발의 진실- 절대적 vs 상대적 공간 개념 - 절대적 vs 상대적 시간 개념 - 인터렉티브 웹 : 공간과 시간의 조합

05. 웹 프로그래밍의 기초 살펴보기- 프로그래밍은 '사전 찾기'와 비슷하다 - 설계도 역할의 HTML - 스타일을 담당하는 CSS - 동적인 움직임을 담당하는 JS - 이들이 함께 작동하는 원리

06. 반드시 알아야 할 문서- 기본 웹 프로그래밍 학습을 위한 문서들

07. 프레임워크(React.js)를 사용하는 이유- 프레임워크 이전의 웹 UX - Figma와 React.js의 관계 - 컴포넌트의 기본 속성 - 디자인 패턴 - 개발 패턴 - 프롬프트(AI)와의 호환성 - React.js 학습 방법

08. MUI를 사용하는 이유- 디자인 시스템 소개 - MUI의 범용성 - 불필요한 학습 커브 최소화하기 - 어휘력 중심 사고 방식 - 프롬프트 최적화

09. 로컬 개발 환경 세팅하기- 로컬 개발 환경의 개념 소개 - Node.js 세팅 - Cursor 설치 - GitHub 가입 및 수업 자료 받기 - React.js 프로젝트 세팅

10. Cursor AI의 특징 소개- Cursor의 핵심 특징 - 커서는 무엇을 학습(참고)하는가? - 프로젝트 룰 세팅 - Agent와 Ask의 차이 - 동료이자 멘토로 활용하자

11. 프롬프트 활용에 필요한 사고방식 : 더블 다이아몬드 모델- 디자인 사고방식: 발산형 vs 수렴형 사고 - 프로그래밍의 언어적 속성 - 올바른 상황별 프롬프트 사용법

12. 프롬프트의 종류와 접근 방식- AI의 이전의 개발 방식 - 바이브 코딩 논란 - 좋은 프롬프트란 무엇인가?

13. 몸풀기 예제 : 인터렉티브 디자인의 종류 살펴보기- 인터랙션의 종류: 호버, 클릭, 드래그, 스크롤 등 - 시각 요소의 종류: 위치, 크기, 모양, 색 - CSS 트랜지션 요소 이해하기 - 인터랙션 X 시각 요소 : 가능한 조합 탐색하기

14. AI와 대화하기 : 프롬프트 연습- 위 예제를 프롬프트로 만들어보기

15. 인터렉티브 요소의 컴포넌트화- 인터랙티브 아이데이션 - 속성 정리 및 구조화 - 컴포넌트 리스팅 - 프롬프트와 함께 제작하기

16. 반응형 웹 환경 이해하기- 반응형 웹 환경이 중요한 이유 - Media Query에 의한 반응형 - Script로 동적인 반응형 구현하기 - 인터렉티브 컴퍼넌트 반응형 적용하기

17. Heror 섹션에 사용하기 좋은 타이포그래피 효과- 타이핑 효과 - 텍스트 트랜지션 - 페이드 인/아웃 효과

18. 효과적인 스토리텔링을 위한 타이포그래피 효과- 그라데이션 매핑 - 스크롤 스태거 텍스트 - 숫자 카운팅 효과

19. 감성적 분위기를 만드는 왜곡 효과- 동적 웨이트 폰트 - 마그네틱 레터

20. 타이포그래피 효과 관련 라이브러리- 바로 사용할 수 있는 외부 라이브러리들

21. 자연스러운 시각 동선과 내비게이션을 위한 모션- 페이드 인/아웃 컨테이너 - 방향을 감지하는 컨테이너

22. CTA 유도를 위한 마이크로 인터랙션- 다양한 Card UI HOVER 효과 - 그라데이션 버튼 - Sticky Container

23. 한 번에 여러 정보를 다룰 시 효과적인 모션- 다이나믹한 정렬 그리드 UI - 순서에 따른 페이드 인 아웃 효과

24. 모션 관련 라이브러리

25. 스토리텔링을 위한 스크롤 테크닉- 몰입감을 높이는 부드러운 스크롤 - 세부 스토리를 위한 수평 스크롤 - Full Page 스크롤

26. 스크롤을 활용한 인터랙션 구현법- 뷰포트 컨테이너로 트랜지션 시작하기 - 스크롤 방향 감지에 의한 트렌지션

27. 입체감을 위한 패럴럭스 스크롤- 패럴럭스를 사용하는 이유 및 기대 효과 - 패럴럭스 스크롤 구현하기

28. 스크롤 관련 라이브러리

29. 리듬감 있는 스토리텔링을 위한 화면 전환- Sticky Transition - Sticky Stacking Section

30. 몰입감을 높이는 오브젝트 : 배경 전환- Pinned Scroll Transition - Scroll Section With Wipe

31. 연속성을 보여주는 트랜지션- Shared Object Transition - Grid Gallery

32. 그라데이션의 종류 & 필터와의 조합- 그라데이션의 목적별 분류 - 기본 그라데이션의 종류 - 응용 그라데이션의 종류

33. 배경에 사용 가능한 그라데이션 모션- Time Loop 그라데이션 - Scroll Triggerd 그라데이션

34. SVG와 Canvas의 차이- Dom과 Canvas의 렌더링 방식 및 크기, 위치 개념의 차이

35. SVG 영끌 활용법- Path Animation - Geometric Logo Extent - Particle Animation

36. Three.js를 활용한 3D 효과- 3D Object Background - Wave & Particle 효과

37. 커서 움직임 모양 바꾸기- 부드러운 커서 움직임 만들기 - CSS로 수정하는 방법 - 커서에 커스텀 컴포넌트 적용하기

38. Tooltip과 커서 합치기- On Mouse Over 이벤트를 활용해 커스텀 커서에 정보 제공하기

39. 가상의 에이전시 홈페이지 기획- 실전 예제를 위한 가상의 에이전시 'Ordinary Design' 배경 설명

40. 스토리텔링에 맞는 각 섹션 아이데이션- 미리 설정한 브랜드 메세지를 각 섹션에 맞게 구성하기

41. 각 섹션 및 컴포넌트 구현- 위 패턴들을 이용해 예제 페이지 완성하기

42. Vercel 개념의 이해- 웹 빌드 및 배포 서비스 Vercel 소개

43. 로컬 Github 세팅 & 프로젝트 배포- 개발 버전 관리 서비스 Github 소개 및 세팅

44. Vercel - Github 연동 및 배포하기- Vercel과 Github 연동하기

45. 5년 후 AI 활용 시나리오 예상- 개발 IDE와 디자인 툴의 발전 방향 - MCP의 등장의 의미 - 디자인과 개발을 위한 프롬프트는 얼마나 다를까?

46. 디자인 & 프로그래밍의 언어적 특성이 중요한 이유- AI 시대의 디자인과 개발에서 명확한 언어 구사가 중요한 이유

47. 크리에이티브 리더십- 주도적인 디자이너/개발자가 되기 위한 요구 사항