채널톡 아이콘
BEST

GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!

Thumbnail

초급자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

  • 에이전시 취업을 위한 포트폴리오 제작 노하우

  • GSAP의 scrollTrigger Animation

  • scroll 방향 감지 네비게이션

  • 시간순에 따라 SVG Animation제작

  • html/css를 활용한 레이아웃제작 기법

  • 스크롤에 반응하는 Scrolla Animation제작

  • 다양한 디바이스를 대응한 반응형 웹 퍼블리싱 제작

  • JavaScript library plug-in을 통한 화려한 인터렉션 구현

  • 개인포트폴리오제작에 필요한 인터렉트브제작 구현 꿀팁

눈에 확 띄고, 면접관들의 마음을 사로잡을 수 있는
포트폴리오를 제작하고 싶은 사람이라면 주목! 🙋‍♂️

2025년 에이전시 취업을 위한 합격전략 업데이트!!
2024년 하반기(9월,10월)
큰규모 에이전시 합격 포트폴리오 사례 집중분석!





2023년,
에이전시에 합격한 포트폴리오 사례 살펴보기!

✨ 이런 시각적인 포트폴리오, 여러분도 직접 만들어보고 싶지 않나요?


이런 분들에게 추천해요

GSAP의 scroll Trigger를
사용해서 화려한 사이트
제작하고 싶으신 분

에이전시에 합격이
가능한 포트폴리오
만들고 싶으신 분

2023년 최신 트렌드에
맞는 화려한 인터렉션
구현하고 싶으신 분

GSAP Scroll Trigger
Animation의
기초부터
응용까지 배우고 싶은 분

웹 포트폴리오를
제작하려는 모든 분들에게 🌱

이 강의는 이론으로만 전하는 성공 취업 가이드가 아닌, 2023년 에이전시 및 대규모 인하우스에 합격한 학생들의 실제 포트폴리오 사례를 보면서 포폴 제작에 필요한 요소를 배우고 성공취업을 위한 포폴을 구상할 수 있어요!

GSAP의 ScrollTrigger를 활용한 스크롤 애니메이션 제작방법뿐 아니라, 사용자의 눈길을 끌 수 있고 마우스에 반응하는 인터랙티브 웹을 제작할 수 있어요. HTML과 CSS를 활용한 레이아웃 제작에 대한 이해도 또한 높일 수 있어요. 트렌디한 포트폴리오 제작 꿀팁도 지속적으로 업데이트해드려요!


학습 내용 📚

🫡 이 강의는요!

  • 2023년 에이전시에 합격한 학생들의 포트폴리오 사례를 살펴보면서 면접관을 감동시키는 포트폴리오 제작 방법을 알아봐요.
  • 포트폴리오 기획에 있어 필수적으로 필요한 부분을 알아봐요.
  • 2023년 해외의 어워드 수상 및 국내의 큰 규모의 에이전시에서 웹사이트 제작에 핫하게 활용되는 GSAP의 ScrollTrigger의 기초와 실무를 배워봐요.
  • Header 영역 Scroll Direction Event를 배울 수 있습니다.
  • 네비게이션바가 스크롤 방향을 감지하여, 내릴 시 사라지고 올릴 시 나타나는 이벤트를 만들어요.
  • SVG를 활용한 Animation 제작
  • Splitting.js를 활용한 MouseHover효과 Animation 제작
  • Translate 3d 속성을 활용한 Text Animation 제작
  • SimplyScroll을 활용하여 배경으로 흐르는 배너를 제작할 수 있습니다.
  • GSAP ScrollTrigger를 활용한 화려한 인터렉티브웹을 구현할 수 있습니다.
  • Responsive Web(max-width: 1650px) 제작할 수 있습니다.
  • Responsive Web(max-width: 1300px) 제작할 수 있습니다.
  • Responsive Web(max-width: 800px) 제작할 수 있습니다.
  • Responsive Web(max-width: 500px)제작할 수 있습니다.
  • 1차_업데이트 영상입니다.
  •  scrollTrigger에 반응하여 나타나는 이미지와 텍스트애니메이션입니다.
  • 2차_업데이트 영상입니다.
  • X축으로 스크롤되는 갤러리를 제작해 보았습니다.
  •  2차_업데이트영상 반응형웹
  • X축으로 스크롤되는 갤러리 영역 반응형웹입니다.
  • 3차_업데이트 영상입니다.
  • Y축으로 스크롤되는 갤러리를 제작해 봅니다.
  • 4차_업데이트 영상입니다.
  • 마우스포인터에 따라다니는 이미지를 제작해 봅니다.
  • 5차_업데이트 영상입니다.
  • Y축으로 섹션고정되어 하위섹션 스크롤되는 인터렉션입니다.
  • 6차_업데이트 영상입니다.
  • X축으로 좌우로 흔들리며 스크롤되는 갤러리를 제작해 봅니다.
  • 7차_업데이트 영상입니다.
  • 스크롤할때 인사하는 캐릭터를 제작해 봅니다.
  • 마우스에 따라 채워지는 텍스트애니를 제작해 봅니다.
  • Clip_path로 물결치는 텍스트애니를 제작해 봅니다.

  • 8차_1.업데이트 영상입니다.
  • 스크롤을 내릴 때 가로로 무한반복적으로 스크롤되는 애니메이션 제작방법입니다
  • Z축으로 틀어져서 떠있는 이미지를 스크롤시 제자리로 와서 펴지도록 제작 한 애니메이션입니다

  • 8차_2.업데이트 영상입니다.
  • 스크롤시 텍스트에 칼라가 채워지는 애니메이션입니다.

 

  • 9차_1.업데이트 영상입니다.
  • 스크롤시 샤방샤방하게 진행되는 GSAP ScrollTrigger Animation입니다
  • 9차_2.업데이트 영상입니다.
  • Position: Sticky를 활용한 Z축으로 틀어지는 Animation

예상 Q&A

Q. 이 강의를 수강하면 어떤 것을 배울 수 있나요?

UI/UX프로세스를 이해할 수 있으며, 이에 맞는 자신에 포트폴리오를 기획하여 제작하실 수 있으며 현재 실무자라면 보다 트렌디하고 인터렉티브한 반응형 웹을 구현하실 수 있습니다.

Q. 추가적으로 업데이트 되는 내용에는 어떤 게 있나요?

1. 실무에서 알아야 할 UI/UX프로세스와 이를 바탕으로 포트폴리오를 기획하고 설계하는 방법

2. UI/UX디자이너, 웹퍼블리셔, 프론트엔드 개발자로 취업하기 위한 포폴제작에 적용할 수 있는 레퍼런스

3. 트렌디하며 인터렉티브한 웹 제작에 필요한 응용예제들 업데이트됩니다.
4. 보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
   피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크등을 공유해드립니다.

오픈채팅방명 : 잘난웹디
코드 : jyoung

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 에이전시에 합격할 수 있는 고퀄리티 포트폴리오를 제작하고 싶으신 분

  • 에이전시에 합격한 포트폴리오 사례가 궁금하신 분

  • 트렌디하고 화려한 포트폴리오를 제작하고 싶으신 분

  • Gsap의 ScrollTrigger를 배우고 싶으신 분

  • 인터렉션이 화려한 웹사이트를 제작하고 싶으신 분

  • 어려운 자바스크립트보다 html/css/jQuery를 통해 화려한 인터렉션을 구현하고 싶으신 분

선수 지식,
필요할까요?

  • html/css기초, 레이아웃제작 기초, javaScript기초

안녕하세요
J.영입니다.

6,226

수강생

233

수강평

211

답변

4.9

강의 평점

14

강의

 안녕하세요? J.young 임자영입니다.

20여년간의 웹디자인 & 앱개발회사를 운영하며, 대학과 전문학교 및 직업훈련기관에서 UI.UX디자인,웹디자인, 웹퍼블리셔, 프론트엔드개발 강의를 하고 있습니다.

디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로, 전문가(UI.UX디자이너/ 퍼블리셔/코딩하는 디자이너) 양성을 위해!!
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오 제작! 강의로 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.

그런 만큼... 많은 제자들이 실무자로써의 그 역량을 발휘하고 있습니다.

-UI/UX디자이너, 퍼블리셔, 프론트엔드개발자가 되고 싶어도 어디서 부터
어떻게 시작할지 막막하신 분들..
- 이직을 위한 정규 코스 학원을 다니고 싶어도 직장 생활로 인해 엄두도 못 내시는 분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 HTML/CSS기초는 배웠지만 -
도통...웹 퍼블리싱 개발 구현이란 남의 이야기이신 분들....

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

* 오픈채팅방운영

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.

오픈채팅방명 : 잘난웹디
코드 : jyoung

 

실무경력

- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장


- 현) UIUX & 웹포트폴리오 강의 진행 중(실무 진출 90프로 이상)

 

감사합니다^^ 


운영중인유튜브

잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ

더보기

커리큘럼

전체

75개 ∙ (11시간 52분)

해당 강의에서 제공:

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

수강평

전체

29개

5.0

29개의 수강평

  • 아장

    수강평 4

    평균 평점 5.0

    5

    6% 수강 후 작성

    J.young 선생님의 강의를 몇가지 들어본 수강생입니다. gsap 스크롤트리거는 인터렉션을 좋아하는 디자이너에게는 안배울 수 없는 라이브러리중 하나라고 생각합니다. 하지만 디자이너들에게는 자바스크립트가 다소 난이도가 있는데, 선생님께서 최대한 쉽게 설명해주셨습니다. 인프런에서 gsap 강의를 하시는 분이 몇분 계시지만 저는 이 강의가 가장 마음에 들었던 이유는 디자이너에게 친숙하다는 점입니다. 특히 트렌디한 시안을 토대로 배우다보니 학습 욕구가 더욱 뿜뿜 상승했습니다 ㅎㅎ 👉코딩에 관심이 있는 디자이너분들에게는 무조건 추천드립니다. 👉포트폴리오를 이번에 새로 만드시는 분들에게는 꼭 한번 들어보시면 도움될거라 생각하구요. 👉단순 관심이 있어서 듣는 분들에게는 실무에 응용이 무조건 될거라 생각합니다. 좋은 강의 만들어주셔서 정말 감사합니다.💕 무엇보다도 질문드리면 최대한 빠르게 관심기울어주셔서 감사합니다.

    • J.영
      지식공유자

      아장님~ 진심어린 수강평 넘 감사드립니다. 저도 디자이너 출신이라...우선은 디자인적으로 맘에 들어야 강의도 하고 싶은 욕심이 나는건 어쩔 수 없는 현상인듯요~~ 디자인이 예쁘면...만들어보고 싶은 욕구와 의욕이 마구 생기지요.. 진심어린 수강평 정말 다시한번 감사드립니다^^ 즐건 주말 보내세요^^ J.young드림

  • 알리오올리오

    수강평 12

    평균 평점 4.9

    5

    52% 수강 후 작성

    너무 유익해요 정말 최고입니다. 추가로 제공되는 가로 스크롤 적용해서 포트폴리오도 완성했습니다!

    • J.영
      지식공유자

      가보자고님~ 포트폴리오 완성하셨군요~~수고 많으셨습니다^^ 잘난웹디 카톡오픈채팅방에 들어오시면 포트폴리오 1대1 피드백 드릴께요~~ 즐건 명절 연휴 되세요~ J.young드림

  • 김현수

    수강평 1

    평균 평점 5.0

    5

    61% 수강 후 작성

    선생님의 강의는 최고에요! 실무에서 적용하는 다양한 인터랙션들을 알기쉽게 설명해주십니다! 다양한 플러그인까지 사용방법을 알려주셔서 개인포트폴리오 제작에 정말 큰 도움이 됩니다!

    • J.영
      지식공유자

      현수님~~ 높은 수강평 감사드려요~~~ 포트폴리오 제작하시는데 제 강의가 큰 도움이 되길 기대합니다^^ . 원하는 바 목표를 꼭 이루시길 응원드리고~~~항상 화이팅하시구요^^ J.young드림

  • hyunjoo

    수강평 4

    평균 평점 5.0

    5

    100% 수강 후 작성

    • J.영
      지식공유자

      현주님 따뜻한 수강평 감사드립니다. 포트폴리오 만드시는데 도움이 되셨는지 궁금합니다. 감사합니다~~~^^ J.young드림

  • Sun Kim

    수강평 3

    평균 평점 5.0

    5

    21% 수강 후 작성

    GSAP의 ScrollTrigger 기능을 활용한 이 포트폴리오 제작 강의는 정말 탁월했습니다. 강의는 매우 체계적이고 이해하기 쉬웠으며, ScrollTrigger의 다양한 기능과 활용 방법을 심도 있게 다뤘습니다. 특히, 실제 프로젝트를 기반으로 한 실습은 이론과 실제의 연결을 잘 보여주었습니다. 강사님은 기술적인 내용을 쉽게 설명해주셨고, 질문에 대한 답변도 매우 친절하고 명확했습니다. 이 강의를 통해 포트폴리오 제작에 필요한 독창적이고 강력한 인터랙티브 효과를 적용하는 방법을 배울 수 있었습니다. 웹 개발자나 디자이너로서의 역량을 한 단계 더 높이고 싶은 분들에게 강력히 추천합니다!

    • J.영
      지식공유자

      Sun Kim님 높은 수강평 감사드립니다. 강의가 이해하기 쉬웠다니 제가 더 감사드려요~ 개별적으로 메일주시면 감사하겠습니다. jjjh523@nate.com입니다. 감사합니다. J.young드림

J.영님의 다른 강의

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

비슷한 강의

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

₩66,000