프로젝트

초격차 패키지 Online.

21개 프로젝트로 완성하는
인터랙티브 웹 개발
With Three.js & Canvas

  • 01. 실무 활용도 높은 21개 프로젝트

    실무에서 자주 사용하는 기능을 담은 21개 프로젝트로 상상을 현실로 구현하세요

  • 02. 인터랙티브 웹 필수 스택을 한 강의로

    기초부터 2D Canvas, 3D Three.js까지 2D부터 3D까지 한 번에 끝내세요

  • 03. 시간당 1천 원 대 갓성비

    화려한 포트폴리오, 유저의 호감을 얻는 웹 개발을 시간당 1천 원대에 평생 소장
    (*런칭가 기준)

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기


카카오에서 만든 인터랙티브 웹 체험해보기 →

카카오, 토스, 원티드 등 앞서가는 기업들은
왜 인터랙티브 웹에 주목할까요?

반응 없는 정적인 웹보다 사용자의 마우스(클릭/이동/스크롤)에 반응하여 유저의 호감을 얻는다.

어려운 글 대신 메시지에 맞는 효과로 유저에게 홈페이지의 복잡한 정보를 효과적으로 전달할 수 있다.

재밌는 효과로 여러번 방문하고 싶은 웹 사이트를 만들고, 높은 체류시간을 끌어낼 수 있다.

유저 경험을 개선하고, 화려한 효과로 시선까지 사로잡는

다른 데선 찾아 볼 수 없는 독보적인 강의를 확인하세요!

프로젝트 미리보기

학습 프로젝트를 미리 살펴보세요!

학습 후 바뀔 나의 '화려한 포트폴리오' & '유저의 눈을 사로잡는 웹 페이지'를 상상하세요.
인터랙티브 웹과 함께라면 상상을 현실로 구현할 수 있습니다.

* 해당 페이지에 삽입된 모든 gif 이미지는 이해를 돕기 위한 예시 이미지로,
강의에서 구현하는 이미지와 차이가 있을 수 있습니다

초격차 01

온라인 강의 최초!

2D와 3D를 모두 담은 21가지 프로젝트로 학습합니다.

라이브러리 없는 인터랙티브 웹 개발 기초부터 2D와 3D 대표 라이브러리를 활용한 심화 단계까지.
파트별 학습 내용 및 기술 스택을 확인하고 나의 주력 분야를 만들어보세요!

2D 구현

  • HTML, CSS, JS의 기본 개념 만으로
    프로덕트 레벨의 인터랙티브 웹을 만듭니다.
    ① 움직이는 404 페이지
    전화위복! SVG 애니메이션을 활용해 긍정적인 사용자 경험을 제공하는 에러 페이지
    ② 까까오뱅크 인재영입 페이지 클론 코딩
    스크롤에 따라 반응하는 인터랙티브 웹 페이지 완성1 학습하기
    ( 스크롤에 맞춰 나타나고 사라지는 이미지/텍스트/비디오 )
    ③ 에어비앤비 클론 코딩
    본격적 인터랙티브 웹 학습 전, 대중적인 사이트를 제작하여 웹 기초 지식 살펴보기
    ④ FireWatch 클론 코딩
    시간차를 두고 등장하는 배경 레이어로 역동적 배경 제작하기 : Parallax scrolling
    ⑤ Next Level Fairs 클론 코딩
    스크롤에 따라 반응하는 인터랙티브 웹 페이지 완성2 학습하기
    ( 마우스 클릭 시간/이동 방향에 맞춰 반응하는 버튼과 이미지 )
  • 원리에 충실한 Canvas 로 2D를 구현하며
    Matter.js로 웹에서 중력을 표현합니다.
    ⑥ 마우스로 문지르면 숨겨진 그림이 나오는 배경
    Canvas를 활용해 전체 배경을 마우스 인터렉션이 가능한 인트로 화면으로 구성하기
    ⑦ 카운트다운하며 움직이는 배경
    3,2,1,! 카운트 다운 후 원형 파티클이 터지며 때를 알리는 효과
    ⑧ 움직이는 이미지를 활용한 미니게임
    마우스 클릭에 따라 이동하는 캐릭터로 게임 제작하기
    (스프라이트 이미지 애니메이션 학습 및 Collision Detection 충돌감지 학습)
    ⑨ 불꽃놀이 효과
    화려한 폭죽처럼 터지는 웹 효과로 움직이는 배경 제작하기
    (파티클, 속도, 중력, 마찰을 이용한 불꽃놀이 효과 구현)
    ⑩ 콘페티 효과 _ 불꽃놀이 효과 심화
    공연장에서 흩날리는 꽃가루 종이같은 효과 구현하기
    ⑪ 흔들리는 밧줄 효과
    마우스에 따라 밧줄이 탄력있게 흔들리는 효과 구현하기
    (탄성충돌, 벡터, Matter.js 라이브러리 일부 기능 직접 코드 작성 후 효과 구현)

3D 구현

  • Three.js 기술 이론 학습으로 3D를 구현하고
    프로젝트를 통해 더욱 구체화합니다.
    ⑫ 3D 큐브
    정육면체 3D 큐브를 만들어보면서 Three.js의 기본 구성 요소 이해하기
    ⑬ 3D 카드
    카드 플레이트 디자인을 3D로 추가하고 카메라 컨트롤을 더해 자유자재로 돌려볼 수 있는 인터랙션 구현하기
    ⑭ 오브젝트와 스크롤 연동하기
    Three.js를 Gsap과 함께 활용해 페이지 스크롤에 따라 반응하는 3D 오브젝트 구현하기
    ⑮ 3D 파티클 애니메이션
    BufferGeometry와 PointsMaterial, 그리고 Points를 활용해 파티클 효과 구현하기
    ⑯ 3D 공간 만들기
    Three.js를 통해 3차원 공간을 만드는 원리 익혀보기
    ⑰ 3D 캐릭터 컨트롤러 만들기
    웹에 3D 캐릭터 모델을 불러오고 다양한 컨트롤 입혀보기
  • Three.js 심화 및 Shader, 물리엔진 학습으로
    인터랙티브 웹 고급 개발자로 거듭납니다.
    ⑱ 3D 지구 : Starlight Earth (Basic)
    떨어지는 별 효과로 화려한 지구본 오브젝트 구현하기 1
    (간단한 Shader와 파티클, 카메라 개념을 활용하여 마우스로 조종할 수 있는 3D 지구 효과 구현)
    ⑲ 3D 지구 : Starlight Earth (Advanced)
    떨어지는 별로 화려한 지구본 오브젝트 구현하기 2
    (심화된 Shader와 Post Processing 등으로 다양한 인터랙티브 요소를 추가)
    ⑳ Fancy Gallery
    스크롤과 마우스 이벤트에 따라 인터랙티브 한 이미지 효과가 들어간 사진 갤러리 구현하기
    ㉑ My Own Playworld 게임
    3D 캐릭터와 캐릭터가 움직이는 맵을 제작하여 특정 장소 이동시 이벤트가 발생하는 게임을 제작해보기

초격차 02

디자이너보다 더 화려한 웹을 만드는
60가지 이상의 기능

실무에서 가장 많이 사용되는 기능들을 모두 모았습니다.
파트별 학습하는 60가지 이상을 내 손으로 직접 써보며 배우고, 실무에 바로 활용하세요!

파트 1 학습 인터랙티브 기능 요소

1. 스크롤에 따라 Active된 텍스트가 바뀌는 영역 (26주적금, 저금통 영역 등)
2. 스크롤에 따라 화면에 기울어지며 나타나는 이미지 (돈 주머니를 든 캐릭터 영역)
3. 스크롤에 따라 재생되는 비디오
*실제 사이트는 canvas를 활용하였으나 난이도를 고려하여 video 태그로 구현합니다.
4. 스크롤에 따라 바뀌는 position 속성 등 (Beyond Bank 영역)
5. 커서의 움직임에 맞춰 움직이는 요소, 배경
6. 누른 시간을 인식하여 일정 시간 이상 눌렀을 때 액션하는 버튼
7. 커서와 같은 방향으로 움직이는 요소
8. 다른 방향으로 움직이는 배경
9. 스크롤을 내리면 애니메이션과 함께 나타나는 이미지
10. 요소별로 스크롤 속도를 다르게 하여 나타나는 보다 역동적인 화면
11. 스크롤에 따라 이미지 사이에서 나타나는 텍스트
12. 미디어 쿼리를 통해 모바일 기기에서는 다른 스타일 적용 (반응형)
13. 마우스 hover 시 변하는 스타일
14. 배경 영역 생성
15. hovering 언더 바 생성
16. 마우스 클릭 시 변하는 스타일
17. 메뉴 버튼 활성화
18. 작아지는 아이콘 (이미지 내 하트 아이콘)
19. 크기가 커지며 나타나고 작아지며 사라지는 애니메이션
20. 크기가 변화하는 애니메이션
21. 요소가 자연스러운 속도로 이동하는 애니메이션

파트 2 학습 인터랙티브 기능 요소

22. Canvas를 통한 움직이는 배경 제작
23. Canvas 파티클
24. x축, y축 환경의 2D 이해
25. 2D에서 구현하는 속도
26. 2D에서 구현하는 중력
27. 2D에서 구현하는 마찰력
28. GSAP 활용
29 마우스로 문지르면 뒷그림이 드러나는 웹 배경 효과 구현
30. 중력이 있는 듯 떨어지고 구르는 오브젝트 구현
31. 입자 이동을 구현하는 학습
32. 3-2-1 숫자를 세고 원을 그리며 퍼지는 파티클 구현 학습
33. 화려하게 흩뿌려지는 색종이 효과
34. 입자가 터지고 떨어지는 효과
35. 마우스 클릭에 따라 오브젝트가 이동하는 기능으로 만드는 게임 구현
36. 커서 이동으로 밧줄을 건드리면 흔들리며 반응하는 밧줄 움직임 구현

파트 3 학습 인터랙티브 기능 요소

37. GUI 컨트롤(카메라 컨트롤)
38. 조명 추가하기
39. 애니메이션 추가하기
40. 3D 오브젝트 학습을 위한 3D 큐브 생성하기
41. 다양한 유저 디바이스 크기에 따라 조절되는 반응형 3D 모델 만들기
42. 마우스 클릭/드래그시 3D 오브젝트의 회전 및 줌인&아웃 구현하기
43. 3D 오브젝트에 패럴렉스 스크롤링 적용하기(파트1에서 배운 내용의 3D버전)
44. 패럴랙스 스크롤 이후 특정 스크롤 지점에서 애니메이션 발생하기
45. 3D 환경에서 안개 효과 만들기
46. 3D 파티클로 2D 파티클보다 좀 더 화려한 효과 구현하기
47. 움직이는 3D 캐릭터 모델 구현하기
48. Gsap을 사용해 스크롤 이벤트 연동하기
49. 안개 효과

파트 4 학습 인터랙티브 기능 요소

50. 3D 지구의 기본 메시
51. 별 파티클 구현
52. 카메라의 Orbit Controls 학습
53 . Post Processing
54. 마우스 스크롤, 이동에 따라 회전하고 확대되는 3D 지구
55. 별과 운석이 떨어지고 그림자가 보이는 3D 지구
56. 마우스 이동에 따라 특정 위치에서 이벤트가 발생하는 효과 구현
57. 3D 캐릭터가 활동하는 맵
58. 스크롤에 따라 전진하는 이미지
59. 클릭&드래그로 이미지를 둘러보는 효과
60. 알파맵 효과
61. 도트 패턴 효과
62. 글로우 효과
63. 잔상 효과

★
여기서 끝나면 초격차가 아니죠
결과물에 고급스러움을 더하는 심화 학습 준비 완료!

[물리엔진 Deep Dive]
가상공간인 웹에서도 중력이 있는 듯한 느낌을 주는 물리엔진을 2D&3D 모두 학습!
2D든 3D든 상관없이 어디에서나! 현실감을 구현해볼 수 있게 됩니다.

  • 2D 물리엔진 : Matter.js
    Matter.js를 이용한 박스 떨어뜨리기 (2D의 물리 알고리즘) 구현
    위 내용을 포함한 웹 사이트 구현
  • 3D 물리엔진 : Cannon-es.js
    3D 캐릭터가 활동하는 맵에서 물리엔진이 적용된
    간단한 게임 구현

초격차 03

Three.js 완전 정복
IT 대기업 출신 강사님이 콕콕 찝어주는
3D 인터랙티브 웹 구현에 필요한 모든 것

현실감 있고 섬세한 3D 구현을 위해 꼭 필요한 스킬을 모두 알려드립니다

1단계: Three.js 기초

2단계: Three.js 심화

강의 미리보기: Part 4 | Three.js 심화

렌더링 효과를 추가하는 '포스트 프로세싱' 강의를 확인하세요!


빛이 반짝이고, 물결이 요동치는 모습, 영화 필름 느낌으로
평범한 이미지를 세련되게 바꾸는 과정을 확인하고, 멋있게 변할 나의 프로젝트를 상상하세요

디테일 더하기

현실감 넘치는 3D 프로젝트 구현

구현하는 대상의 디테일과 현실감을 높이는 요소들을 모두 알려드립니다.
웹에서 그림자, 빛, 텍스쳐를 구현하고, 중력까지 더하는 과정을 확인하세요.

물리엔진

중력, 관성, 마찰력 등과 같은 물리적 현상을 구현해 현실감을 더합니다.

빛

오브젝트의 색과 그림자를
볼 수 있게 합니다

그림자

Three.js 자체 기능을 활용해
그림자를 구현하여 입체감을 더합니다.

텍스처

3D에 현실감을 더하는
질감을 구현합니다.

원리 이해

장면 구현이 쉬워지는 카메라(OrbitControls)학습

3D 오브젝트가 위치한 Scene을 비추는 카메라 학습으로 3D 환경 및 구현 방식 이해가 쉬워집니다.

초격차 04

타사 대비 최소 3배 저렴!
가성비도 초.격.차

비교 불가 커리큘럼 & 비교 불가 갓성비!
인터랙티브 웹 개발은 이 강의 하나로 충분해요

시간당 1천 원대로
이 모든 내용을 평생 소장 & 무한 수강!
*강의 런칭가 기준

초격차 05

믿고 들으셔도 됩니다.
인터랙티브 웹 실력자로 구성된 강사진

N사와 토스 출신 강사님부터 코드펜 pick 강사님까지!
이 분야 최고의 연사들이 본 강의를 진행합니다.

* 위 이미지는 강사님 포트폴리오의 일부입니다.

초격차 06

알아두면 무한 활용 가능한
탄탄한 기본 개념 100가지 이상

기초-2D-3D 마다 필요한 인터랙션 웹을 만드는 전 과정마다 꼭 필요한 개념들을 모두 담았습니다.
필수 개념 학습으로 응용까지 연결하여 원하는 인터랙티브 웹을 구성할 수 있게 됩니다.

이 모든 개념들을 실습 기반으로 학습합니다.
학습한 개념을 조합하여 완성도 높은 인터랙티브 웹을 개발해보세요!

초격차 07

디자인 툴 Blender 강의 부록 제공

인터랙티브 웹을 한층 더 높은 퀄리티로 구현하실 수 있도록
Three.js와 연계된 Blender 강의를 제공해 드립니다.

Blender 툴을 이용해 3D 모델을 기초부터 제작하고 웹사이트에서 활용할 수 있도록 three.js로 로드하는 방법을 알려드립니다.
모델링부터 실무에서 가장 많이 사용되는 3D 웹사이트 구성 방법까지 실습 위주로 소개합니다.

총 3단계로 Blender와 Three.js를 연계해 3D 모델을 제작할 수 있습니다.

  • STEP 1 ‣

    3D 오브제 제작
    및 three.js에서 활용하기

  • STEP 2 ‣

    메타버스 등에서 자주 사용되는
    Blender 핵심 아이소메트릭 제작 방법 학습

  • STEP 3 ‣

    아이소메트릭의 감성을 더하는
    텍스처링 및 UV 효과 입히기로 모델링 완성

* 아이소메트릭은 x,y,z축이 120도를 이루는 3개의 축이 기본이 된 그림을 의미합니다.
입체적 표현 기법으로 인포그래픽 및 포스터에 활용성이 높습니다.

+ 무료 제공 강의 +

인터랙티브 웹 개발,
‘개발이 낯선 나도 할 수 있을까’ 걱정되시나요?

여러분이 멋진 인터랙티브 웹 개발자로 거듭날 수 있도록!
패스트캠퍼스가 응원하는 마음을 담아 32시간 상당의 강의 혜택을 드립니다.
강의 [프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.] 중 학습에 필요한 내용을 제공해드립니다.

초격차 08

필요할 때 꺼내 보는 강의자료 모두 드림!
노션 링크 하나로 강의자료를 평생 소장하고 편안하게 활용하세요.

[강의자료 + 복붙 가능한 강의 코드 + 포트폴리오 자료 관리법]을 모두 챙겨가세요!
노션 링크 하나로 구현할 기능을 찾아 필요할 때마다 꺼내 보고 활용하세요.

커리큘럼.

아래의 모든 강의를 초격차 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

Part 1. HTML,CSS,JS

Part 2. Canvas

Part 3. Three.js 기초

Part 4. Three.js 심화

Special. Blender

혜택 강의 1. HTML, CSS 기초 강의 from <시그니처 패키지 : 프론트엔드 로드맵 마스터>

혜택 강의 2. JavaScript 기초 강의 from <시그니처 패키지 : 프론트엔드 로드맵 마스터>

혜택 강의 3. React 기초 강의 from <시그니처 패키지 : 프론트엔드 로드맵 마스터>

  • 상세 커리큘럼.

    자세한 커리큘럼 및 내용은 여기서 확인하세요!

    자세히 보기 »

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기
이 강의도 추천해요.

수강료.

국내 8개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • NH농협카드

※ BC카드의 경우, 비씨(페이북)을 선택하여 결제시에만 12개월 무이자 할부가 가능합니다.
(BC계열 – 우리/제일/기업/대구/경남/부산/광주/수협/전북/제주/신협)