강의

멘토링

로드맵

개발 · 프로그래밍

/

프론트엔드

JavaScript로 배우는 fullPage + anime + SVG Animation 포트폴리오

Vanilla Javascript + fullPage.js + SVG Animation 인터랙티브 웹 포트폴리오! 취업과 이직을 위한 필수 코스!

(4.2) 수강평 5개

수강생 95명

난이도 초급

수강기한 무제한

  • LIZ.B
토스랩
엔씨소프트
하이퍼커넥트
CookApps
현대무벡스

현대무벡스

임직원들도 이 강의를 듣고 있어요!

토스랩
엔씨소프트
하이퍼커넥트
CookApps
현대무벡스

현대무벡스

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

4.2

5.0

gangsugi

100% 수강 후 작성

svg 라는걸 주로 직접 코딩해서 만들어서 하다가 이렇게 anime 라는걸 이용할수 있다는걸 알았네요...알찬 강의내용에 아주 잘 들었습니다. 차분하게 천천히 잘 설명해주셔서 귀에 쏙쏙 잘 들어오고 좋은 강의였습니다. 완전강추!!!

5.0

TaeHyun Lim

100% 수강 후 작성

anime.js를 공부하려고 하려고 하다 이 강의를 보고 하게되었네요. 좋은 강의 감사합니다~

5.0

lwshan

100% 수강 후 작성

재밌어요!

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

  • fullPage.js 사용법

  • fullPage 스크롤 애니메이션

  • anime.js 기초 사용법

  • anime.js를 이용한 자바스크립트 애니메이션

  • 바닐라 자바스크립트 슬라이더 로직

  • SVG를 활용한 인터랙티브 웹

  • Flex Layout

순수 자바스크립트로 만들어보는
인터랙티브 웹 포트폴리오!

VanillaJS + fullPage + Anime!

프로그래밍 문법을 통해
어떻게 문법을 작성하는지 배우셨다면,
이제는 어떻게 코드를 다루는지도
알아야 합니다 🙂

fullPage.js가 무엇인가요?

개발자 Álvaro Trigo가 제작한 플러그인으로, 마우스 스냅을 이용해 작동하는 자바스크립트 라이브러리입니다.
마우스 스냅으로 작동하는 전체화면 페이지를 빠르고 손쉽게 만드는 역할을 합니다.

fullPage.js 공식 사이트 (바로가기)

득템이득!
anime.js로 하는
SVG 애니메이션.

anime.js는 간단하면서도 강력한 API가 포함된 경량 자바스크립트 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 및 자바스크립트 개체와 함께 작동합니다. 

anime.js 공식 사이트 (바로가기)

이 강의는!

fullPage.js로 전체화면을 만들고,
anime.js로 SVG 애니메이션을 구현하는
실습 중심의 강의입니다.


어떤 스킬을 학습하나요?

fullPage.js & anime.js 기초

fullPage 기본 세팅부터 Navigation Anchor(네비게이션 세팅), Active Class 활용법, 콜백 함수(Callback) 사용 및 활용법, 바닐라 자바스크립트로 만드는 Slider Logic을 익힙니다.

또, 화려하고 멋진 애니메이션 효과를 만들기 위해 anime 기초 사용법 및 anime.js를 활용한 Timeline Animation, SVG Animation 등 인터랙티브 애니메이션에 필요한 스킬을 학습합니다. 

눈에 띄는 인터랙티브 애니메이션

다섯 개의 실습 예제를 직접 확인해보세요!

라인 애니메이션, 그래프 효과, 배경과 연동되는 슬라이더 활용, SVG 패스 태그를 활용한 움직이는 배경 페이지, 클릭에 따라 애니메이션이 진행되는 페이지 등 다양한 방식으로 응용할 수 있는 인터랙티브 애니메이션 웹 포트폴리오 템플릿을 내 손으로 만들 수 있게 됩니다.


웹 퍼블리셔/디자이너
신입 포트폴리오를 준비한다면!

기본 원리 학습

실제 취업을 위한 포트폴리오로 사용할 수 있는 인터랙티브 템플릿을 구현하기 위한 원리를 알 수 있습니다.

골격을 세워요

바닐라 자바스크립트를 이용한 템플릿에 내 UI 디자인을 넣어 직접 포트폴리오를 만들고 응용해보세요.

인터랙티브 포트폴리오

웹 퍼블리셔/디자이너 취업을 준비하며 SVG Anime Animation을 통한 인터랙티브 포트폴리오가 필요한 분께 추천합니다.


예상 질문 Q&A

Q. 코딩을 어느 정도 해야 이 강의를 들을 수 있나요?

HTML, CSS, JavaScript 기초가 갖춰진 분들께서 학습하시는 것을 추천합니다. (선수 지식 참조)

Q. 강의에 사용되는 스크립트는 jQuery를 이용하나요?

Vanilla JavaScript를 이용한 강의입니다.

Q. 이 수업을 들으면 포트폴리오를 만들 수 있나요?

네, 만들 수 있습니다.

오프라인 수업에서 코딩을 전혀 모르던 학생들이 국비 교육 과정을 수료한 뒤 신입 웹 퍼블리셔나 UI/UX 디자이너로 취업하곤 합니다. 이때 기본적으로 사용하는 템플릿이 fullPage.js이며, 강의에서는 anime.js를 이용한 SVG, Stagger Animation을 추가로 활용했습니다.

기본적인 사용법 및 활용법에 맞춰져 있는 강의이니만큼, 학습한 내용에 본인의 콘텐츠로 만든 UI 디자인을 더한다면 충분히 실제 포트폴리오로 활용할 수 있을 것입니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 퍼블리셔, 디자이너 취업을 위한 웹 포트폴리오를 만들어야 하는 분!

  • 포트폴리오를 만들 자신이 없고, 도움이 필요하신 분!

  • 어떻게 만들었는지 궁금한 웹 사이트의 원리를 익혀보실 분!

선수 지식,
필요할까요?

  • HTML 기초

  • CSS 기초

  • JavaScript 기초

안녕하세요
입니다.

373

수강생

16

수강평

92

답변

4.9

강의 평점

3

강의

프론트엔드부터 백엔드까지 실무 중심의 수업을 진행하고 있으며, 오랜 강의 경험을 바탕으로, 실무 중심의 웹 개발을 가르치는 강사입니다.

커리큘럼

전체

44개 ∙ (7시간 13분)

해당 강의에서 제공:

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

수강평

전체

5개

4.2

5개의 수강평

  • gangsugi님의 프로필 이미지
    gangsugi

    수강평 23

    평균 평점 5.0

    5

    100% 수강 후 작성

    svg 라는걸 주로 직접 코딩해서 만들어서 하다가 이렇게 anime 라는걸 이용할수 있다는걸 알았네요...알찬 강의내용에 아주 잘 들었습니다. 차분하게 천천히 잘 설명해주셔서 귀에 쏙쏙 잘 들어오고 좋은 강의였습니다. 완전강추!!!

    • LIZ.B
      지식공유자

      감사합니다! 도움이 되셨다니 힘이 납니다~~^^ 다음 강의 잘 준비해 보겠습니다!

  • lwshan님의 프로필 이미지
    lwshan

    수강평 2

    평균 평점 5.0

    5

    100% 수강 후 작성

    재밌어요!

    • LIZ.B
      지식공유자

      재밌게 수강하셨다니 저도 너무 기쁘고 보람있네요 감사합니다~~^^

  • LEETY님의 프로필 이미지
    LEETY

    수강평 3

    평균 평점 5.0

    5

    9% 수강 후 작성

    javascript 기초지식이 없는 저에게는 많은 도움이 되는 강의였습니다.

    • LIZ.B
      지식공유자

      수업에 대해 많이 고민해보는 요즘이네요. 더 고민하고 발전할수 있도록 노력하겠습니다. 감사합니다.

  • TaeHyun Lim님의 프로필 이미지
    TaeHyun Lim

    수강평 19

    평균 평점 5.0

    5

    100% 수강 후 작성

    anime.js를 공부하려고 하려고 하다 이 강의를 보고 하게되었네요. 좋은 강의 감사합니다~

    • LIZ.B
      지식공유자

      네 감사합니다. 부디 하시는 일에 많은 도움이 되셨길 바라겠습니다. 좋은 수강평도 감사드립니다. ^^

  • sssisis님의 프로필 이미지
    sssisis

    수강평 9

    평균 평점 3.9

    1

    100% 수강 후 작성

    바닐라js에 풀페이지 SVG 등의 키워드에 낚였다. 실무자가 듣기에는 너무 너무 쉬운 레벨, https://animejs.com/, https://alvarotrigo.com/fullPage/ 여기서 보시는게 좋을것 같아요.

    • LIZ.B
      지식공유자

      실무자에 맞춘 수업은 아니었습니다. 강의 상세설명에도 나와있듯이, 신입 포트폴리오 만드는 초급자용 코스입니다. 도움이 되지 못해서 죄송합니다만, 님과는 다르게 공식 사이트를 보고도 어려움을 느끼는 초급자들도 있습니다. 낚였다는 표현은 강의를 몇개월동안 고민해서 만들었는데, 허망한 마음마저 드네요. 좀더 실무자에게 도움될만한 내용으로 고민해보겠습니다.

LIZ.B님의 다른 강의

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

비슷한 강의

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