Search Input

‌
‌

Coloso Menu

      • ‌

      개발과 디자인의 경계를 허무는 Cursor AI 인터랙티브 웹 제작

      디자이너 DDD
      ‌
      ‌
      ‌
      ‌
      인터랙티브웹CursorAI웹개발UIUX
      ‌
      ‌

      클래스 상세 정보

      • ‌
      • 입문~중급
      • 총 47회
      • 한국어
      • -
      • 강의자료 포함
      ‌
      ‌
      ‌

      디자이너 DDD Details

      커리큘럼
      커리큘럼

      커리큘럼을 보여드려요

      • SECTION 01
        강의 소개
        curriculum-programming-ddd-01.webp

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

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

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

      • SECTION 02
        웹 프로그래밍 기초 & 강의 세팅
        curriculum-programming-ddd-02.webp

        • 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 프로젝트 세팅

      • SECTION 03
        AI와 친해지기
        curriculum-programming-ddd-03.webp

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

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

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

      • SECTION 04
        기초 예제 실습하기
        curriculum-programming-ddd-04.webp

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

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

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

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

      • SECTION 05
        인터랙티브 패턴 01 : 인터랙티브 타이포그래피
        curriculum-programming-ddd-05.webp

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

        • 18. 효과적인 스토리텔링을 위한 타이포그래피 효과- 그라데이션 매핑 - 마그네틱 레터 - 숫자 카운팅 효과

        • 19. 감성적 분위기를 만드는 왜곡 효과- 동적 웨이트 폰트 - Scale 효과

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

      • SECTION 06
        인터랙티브 패턴 02 : 다양한 UI 적용 모션
        curriculum-programming-ddd-06.webp

        • 21. 자연스러운 시각 동선과 내비게이션을 위한 모션- 페이드 인/아웃 컨테이너 - 순서에 따른 페이드 인/아웃 효과 - 동적인 GNB 만들기

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

        • 23. 한 번에 여러 정보를 다룰 시 효과적인 모션- 다이나믹한 정렬 그리드 UI - 동적으로 그려지는 레이아웃

        • 24. 모션 관련 라이브러리

      • SECTION 07
        인터랙티브 패턴 03 : 스크롤 인터랙션 마스터
        curriculum-programming-ddd-07.webp

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

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

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

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

      • SECTION 08
        인터랙티브 패턴 04 : 화면 전환
        curriculum-programming-ddd-08.webp

        • 29. 리듬감 있는 스토리텔링을 위한 화면 전환- BG Transition - Cover Wipe Transition - Zoom into Page

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

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

      • SECTION 09
        인터랙티브 패턴 05 : 색/그라데이션 전환
        curriculum-programming-ddd-09.webp

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

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

      • SECTION 10
        인터랙티브 패턴 06 : 시각적 타격감을 위한 효과
        curriculum-programming-ddd-10.webp

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

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

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

      • SECTION 11
        인터랙티브 패턴 07 : 커스텀 마우스 커서 효과
        curriculum-programming-ddd-11.webp

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

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

      • SECTION 12
        [실전] 가상의 디자인 에이전시 Ordinary Design
        curriculum-programming-ddd-12.webp

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

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

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

      • SECTION 13
        예제 완성 & 페이지 배포하기
        curriculum-programming-ddd-13.webp

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

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

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

      • SECTION 14
        완강 이후까지 꾸준히, 학습 로드맵
        curriculum-programming-ddd-14.webp

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

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

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

      추천 클래스
      • 
      • 
      • 
      • 
      • 
      • 
      
      
       

      

      • Coloso KR
      • Coloso JP
      • Coloso Global
      • 
      • 
      • 
      • 
      • 
      • 
      • 
      • 
      • 

      유의사항

      *강의 영상 공개일은 예고 없이 변경될 수 있습니다. *상세페이지 내 일부 이미지는 수강생의 이해를 돕기 위한 참고 이미지입니다. * 본 상품은 동영상 형태의 강의를 수강 하는 상품입니다.(ASSET상품 제외) * 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다. * 사전 예약 강의의 경우, 강의 영상은 공개 일정에 따라 순차적으로 제작되어 오픈되며, 1차 영상 공개일이 수강시작일이 됩니다. * 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다. 총 학습기간: – 정상 수강기간(유료 수강기간) 최초 10일, 무료 수강 기간은 11일부터 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다. – 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일) – 콜로소의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
      회사의 환불정책은 다음과 같습니다.
      • 가. 결제 후 파일 공개 전(강의 영상 공개 전)환불을 요청하시면 전액 환불이 가능합니다.
      • 나. 결제일로부터 7일 이내 및 3개 미만의 파일을 이용하신 경우 환불을 요청하시면 전액 환불이 가능합니다.
      • 다. 결제일로부터 7일 이내 3개 이상의 파일을 이용하신 경우 환불을 요청하시면 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다.
      • 라. 결제일로부터 7일 초과 10일 이내 및 3개 미만의 파일을 이용하신 경우 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다.
      • 마. 결제일로부터 7일 초과 10일 이내 및 3개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다.
      • 바. 결제일로부터 10일 초과 시 환불 가능 금액이 없습니다.
      • 사. 환불 금액 확인 후 실제 환불이 이루어지기 전 추가적으로 강의 영상 파일 또는 강의 자료 파일을 이용한 상황이 확인되면 환불 가능 금액은 달라질 수 있습니다.
      • 아. 평생 시청 수강권의 경우 수강 일수에 제한이 없으나, 기간 선택 수강권은 구매 시점에 선택하신 기간에 해당하는 일 수만큼 수강이 가능하며, 일시 정지 및 기간 연장이 불가합니다.
      • 자. 기간 선택 수강권은 평생 시청 수강권으로 전환이 불가합니다.
      • 차. 1:1 코칭권의 경우 결제일로부터 10일까지 전액 환불이 가능하며, 결제일로부터 10일 초과시, 사용 여부에 관계없이 환불 가능 금액이 없습니다.
      결제 기준일
      이용 파일 개수
      환불률
      결제 후 파일 공개 전
      없음
      100%
      결제일로부터 7일 이내
      3개 미만
      100%
      결제일로부터 7일 이내
      3개 이상
      50%
      결제일로부터 7일 초과 10일 이내
      3개 미만
      50%
      결제일로부터 7일 초과 10일 이내
      3개 이상
      0%
      결제일로부터 10일 초과
      무관
      0%
      - 본 제품을 재판매, 재배포, 도용, 양도하는 등의 행위는 불가능 합니다. - 본 제품에서 추출된 이미지, 단순 보정 이미지는 양도,배포, 판매가 불가능합니다. - 본 제품은 결제 완료 직후 [나의 강의장] > [수강하기] > [강의자료]로 확인 가능합니다. - 본 제품은 결제 후 7일 이내 및 파일을 이용하지 않으신 경우 환불을 신청하시면 전액 환불이 가능합니다. - 본 제품은 무형 상품의 특성상 결제 후 7일 이내 및 1개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다. - 본 제품은 결제일로부터 7일 초과시 파일 사용 여부에 관계 없이 환불 가능 금액이 없습니다.
      [유의사항] - 기간 선택 옵션은 구매 시점부터 선택하신 옵션에 해당하는 기간만큼 수강이 가능하며, 일시정지 및 기간 연장이 불가합니다. - 기간제 클래스의 수강기간이 끝난 뒤 평생시청 클래스로의 전환은 불가합니다. - 기간제 클래스의 수강기간이 끝난 뒤 평생시청 클래스로 수강을 원할 시 판매중인 평생시청 클래스를 구매하셔야 합니다. [환불안내] - 결제 후 파일 공개 전(강의 영상 공개 전)환불을 요청하시면 전액 환불이 가능합니다. - 결제일로부터 7일 이내 및 3개 미만의 파일을 이용하신 경우 환불을 요청하시면 전액 환불이 가능합니다. - 결제일로부터 7일 이내 3개 이상의 파일을 이용하신 경우 환불을 요청하시면 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다. - 결제일로부터 7일 초과 10일 이내 및 3개 미만의 파일을 이용하신 경우 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다. - 결제일로부터 7일 초과 10일 이내 및 3개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다. - 결제일로부터 10일 초과 시 환불 가능 금액이 없습니다. - 환불 금액 확인 후 실제 환불이 이루어지기 전 추가적으로 강의 영상 파일 또는 강의 자료 파일을 이용한 상황이 확인되면 환불 가능 금액은 달라질 수 있습니다. - 평생 시청 수강권의 경우 수강 일수에 제한이 없으나, 기간 선택 수강권은 구매 시점에 선택하신 기간에 해당하는 일 수만큼 수강이 가능하며, 일시 정지 및 기간 연장이 불가합니다. - 기간 선택 수강권은 평생 시청 수강권으로 전환이 불가합니다. - 1:1 코칭권의 경우 결제일로부터 10일까지 전액 환불이 가능하며, 결제일로부터 10일 초과시, 사용 여부에 관계없이 환불 가능 금액이 없습니다. - 특별강좌는 이벤트성 강좌, 비정규 강좌, 특별기획 강좌 등으로서 이는 별도의 수강 취소, 변경 및 환불정책이 적용될 수 있습니다. - 보다 자세한 환불규정은 [여기]에서 확인 부탁드립니다. (2024-04-01 이용약관 개정) [영상 재생 가능 기기 대수 제한] - 하나의 계정당 영상 재생 가능한 기기 수를 3대로 제한하며, 핸드폰 변경 등과 같은 사유로 등록된 사용 기기를 변경하고 싶으실 경우 help@coloso.co.kr로 문의주시면 연 1회에 한하여 기기 변경 도와드리도록 하겠습니다. (등록하실 첫 3대의 기기는 로그인 후 영상 재생과 동시에 자동 등록됩니다.) [기타 사항] - 콜로소는 환불 시 금융거래수수료, 제세공과금 등을 공제할 수 있습니다. - 콜로소는 고객이 이용약관, 관련 법령 등을 위반한 경우 이용약관 및 관련 법령에 따라 환불을 거부할 수 있습니다. - 회원이 다음과 같은 행위 등으로 ‘사이트’의 업무를 방해하는 경우 ‘회사’는 회원자격을 제한 및 정지시킬 수 있습니다. ① ‘사이트’를 통해 ‘상품 등’을 구매한 후 정당한 이유 없이 상습 또는 반복적으로 취소∙반품하여 ‘회사’의 업무를 방해하는 경우 ② ‘사이트’를 통해 구입한 ‘상품 등’에 특별한 하자가 없는데도 불구하고 일부 사용 후 상습적인 취소∙전부 또는 일부 반품 등으로 ‘회사’의 업무를 방해하는 경우 [기타 문의] - 기타 프로모션에 대한 문의는 고객센터로 문의주시면 답변해 드립니다.
      - 이용방법 : 본인의 포트폴리오 결과물 및 질문 최대 3개를 보내주시면 21일(영업일 기준) 이내로 피드백을 제공합니다. - 이용기한 : 결제일로부터 90일 이내 (이후 사용 여부에 관계 없이 이용권 소멸) *얼리버드(사전판매)로 구매하셨을 경우, 강의 영상 최초공개일이 수강시작일로 간주됩니다. - 제출방식 : feedback@coloso.co.kr 로 [이름 / 콜로소 ID / 휴대폰번호]를 적고, [포트폴리오 파일]을 첨부해 보내주세요. - 유의사항 : 코칭권 별 최대 질문 수, 제출 방식이 상이 할 수 있으니 자세한 내역은 코칭권 안내 섹션을 확인해주세요.
      [사용기기 대수 제한] 하나의 계정당 수강 가능한 기기+브라우저 수량을 3개로 제한하며, 핸드폰 변경 등과 같은 사유로 등록된 사용 기기+브라우저를 변경하고 싶으실 경우 help@coloso.co.kr로 문의주시면 연 1회에 한하여 기존 등록된 내역 삭제 드리도록 하겠습니다. (등록하실 첫 3개의 기기+브라우저는 강의장 접속과 동시에 자동 등록됩니다.) [동시 접속 제한] 동일한 아이디로 2대 이상의 디바이스에서 서비스를 동시에 이용하거나 서비스 이용 중 복제프로그램을 실행하는 경우 또는 녹화를 하는 경우 영상 재생이 자동으로 정지됩니다. [기타 사항] - 콜로소는 환불 시 금융거래수수료, 제세공과금 등을 공제할 수 있습니다. - 콜로소는 고객이 이용약관, 관련 법령 등을 위반한 경우 이용약관 및 관련 법령에 따라 환불을 거부할 수 있습니다. - 회원이 다음과 같은 행위 등으로 ‘사이트’의 업무를 방해하는 경우 ‘회사’는 회원자격을 제한 및 정지시킬 수 있습니다. ① ‘사이트’를 통해 ‘상품 등’을 구매한 후 정당한 이유 없이 상습 또는 반복적으로 취소∙반품하여 ‘회사’의 업무를 방해하는 경우 ② ‘사이트’를 통해 구입한 ‘상품 등’에 특별한 하자가 없는데도 불구하고 일부 사용 후 상습적인 취소∙전부 또는 일부 반품 등으로 ‘회사’의 업무를 방해하는 경우