UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

"2026년도 UIUX디자이너 |코딩하는 디자이너 에이전시 합격 포트폴리오 공개" 면접관의 눈길을 사로잡는 UIUX 웹 포트폴리오를 제작하는 실전 강의입니다. 단순한 포트폴리오 제작이 아닌, 인터랙션을 활용해 차별화된 결과물로 UIUX 디자이너로 취업 경쟁력을 높일 수 있도록 설계된 커리큘럼입니다.

(5.0) 수강평 41개

수강생 367명

난이도 초급

수강기한 무제한

uiux
uiux
프론트엔드
프론트엔드
취업준비
취업준비
실습 중심
실습 중심
uiux
uiux
프론트엔드
프론트엔드
취업준비
취업준비
실습 중심
실습 중심
버킷플레이스
여기어때컴퍼니
카카오엔터테인먼트
네이버
라인

라인

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

버킷플레이스
여기어때컴퍼니
카카오엔터테인먼트
네이버
라인

라인

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

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

5.0

5.0

냠냠

27% 수강 후 작성

우선! 이런 분들께 추천 드리고 싶습니다. ✨ 뭐가 문제인 지 모르겠는데 본인의 포트폴리오가 구리다고 느낌 ✨ 디자인 감각 없으신 분 ✨ 움직이는 요소를 넣고 싶은 분 ✨ 그냥 다 모르겠는 분 국비 교육 중 정말 이상한 수업을 받았던 사람입니다. 코드가 왜 돌아가는 지도 모르겠고, 플러그인을 어케 사용하는 지도 모르겠는데 포폴을 만들라하고.. 그렇게 만들어낸 포트폴리오는 정말 지금 다시 돌아보면 너무나도 못생겼어요. 촌스럽고.. ✨그런데... 정말 지영쌤 강의를 만난 건 너무 너무 감사한 일이었어요. 동적인 요소를 넣고 싶은데 혼자서는 어떻게 사용하는 지도.. 원리도 모르겠었거든요. 떠듬떠듬 하나씩 알아도 사용을 제대로 못하니 빛을 못 보고.... 특히 ✨스크롤트리거✨ 에 관심이 있으신 분이라면 정말 강추!!! 드려요. 말씀이 조금 빠르다고 느낄 때도 있었지만, 오히려 사담 가득하고 느린 것보다 전 좋았어요. (대한민국사람이라면 좋아함) 지영쌤 강의 올려주신 것 덕분에 요새는 공부를 다시 처음부터 시작한다는 생각으로 듣고 있어요. 다른 클론코딩 강의도 들어보려고 합니다. 처음에는 아.. 내가 따라할 수 있을까? 라는 생각이 들었는데.. 이렇게 도움 주셔서 지영쌤이 알려주신 노하우 바탕으로 저만의 색을 넣어서 포트폴리오 완성 했어요. 실무에서 사용 많이하는 요소들을 배울 수 있어서 기뻤어요. 그리고 강의도 계속 추가해주시고... 새로운 트렌드에 맞는 강의를 만들어주시는게 그냥 교육을 위한 진부한 강의가 아니라서 더 재밌게 들었던 것 같아요. 어딜가도 이렇게 센스있고 예쁜 디자인 감각으로 배울 수 없는듯요?! 아무튼 정말 추천합니다! 지영쌤 너무 감사해요. 덕분에 하나하나 다시 배우고 있습니다! 덕분에 길이 보여요....

5.0

조병민

100% 수강 후 작성

웹 퍼블리셔로 취업을 준비하면서 항상 고민했던 게 바로 ‘어떻게 하면 남들과 차별화된 포트폴리오를 만들 수 있을까?’였어요. 요즘 트렌드인 인터랙션 효과를 꼭 넣고 싶었는데, 독학으로는 도저히 감도 안 잡히고... 유튜브 뒤져봐도 뭔가 하나씩 빠진 느낌이라 한참 헤매고 있었습니다. 그러다가 J.young 선생님의 이 강의를 듣게 됐는데, 진짜 인생 강의라고 말하고 싶어요! ScrollTrigger를 활용한 애니메이션을 단순히 따라만 하게 하는 게 아니라, 실제 포트폴리오에서 어떻게 응용해야 하는지 ‘감’을 잡을 수 있게 도와주셨어요. 예제도 정말 트렌디해서 강의 따라 만들면서도 ‘와 이거 내 포폴에 바로 써야지!’ 하는 생각이 절로 들더라구요. 특히 강사님이 초보자 눈높이에 맞춰 하나하나 설명해주시니까, 저 같은 코알못(?)도 부담 없이 끝까지 완강할 수 있었습니다. 중간중간 막힐 때는 커뮤니티에서 질문 올리면 답변도 친절하게 주셔서 너무 감사했어요. 덕분에 저만의 포트폴리오에 멋진 인터랙션을 하나하나 적용해가면서, ‘아 나도 이런 거 할 수 있구나!’ 하는 자신감까지 얻었네요. 지금은 완전 밋밋하던 제 포트폴리오가 생동감 넘치고, 보는 사람들의 시선을 확 끌어당길 수 있는 웹사이트로 바뀌었어요. 이런 강의, 진짜 나만 알고 싶을 정도로 최고입니다! 강사님, 좋은 강의 정말 감사드리고요, 다음 강의도 기대할게요 😊💖

5.0

넴모

66% 수강 후 작성

너무 좋은강의 감사합니다. 저는 웹 퍼블리셔를 준비하고 있었습니다. 이력서를 넣기위해 포트폴리오를 만들었지만 제가아는 css지식으로 애니메이션 효과를 줘도 사이트가 밋밋하더라구요. 근데 남이 만든 포트폴리오는 되게 화려한것같고 저런 튀어나오는 애니메이션을 도대체 어떻게 만든건가.. 저사람은 js고수인가 싶었는데.. 알고보니 전부 gsap를 사용해서 만든거더라구요! gsap를 알게된 후 강의를 찾다 J.young 선생님을 알게되었는데 진짜 제 인생의 행운같습니다! 여러 예제를 통해 gsap ScrollTrigger 사용법을 익히게 되었고, 밋밋했던 제 포트폴리오에 생기가 불어난것 같습니다! 결론적으로 포트폴리오에 gsap를 활용하여 시각적으로 심심하지 않은 포트폴리오를 만들수 있었고, 그 결과 여러곳에서 면접제의가 들어왔습니다. 현재는 입사 확정이 된 상태로 혼자 공부하고있습니다 :D 다시한번 좋은 강의 너무 감사드립니다~~! 다른 강의도 기대하고있을게요!

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

  • 면접관의 눈길을 사로잡는 인터랙티브 UIUX 웹 포트폴리오를 직접 완성할 수 있습니다.

  • 에이전시 합격 포트폴리오 기준을 이해하고 자신의 작업에 적용할 수 있습니다.

  • UIUX디자이너 합격 포트폴리오 사례를 통해 취업 기준과 방향성을 명확히 잡을 수 있습니다.

  • 취업에 바로 활용 가능한 UIUX 웹 포트폴리오를 완성할 수 있습니다.

  • 실무에서 활용되는 인터랙션 구현 방식과 패턴을 이해하고 적용할 수 있습니다.

  • GSAP ScrollTrigger를 활용해 차별화된 인터랙션을 구현할 수 있습니다.



📢 현재 강사가 운영하는
UIUX 웹기획·디자인·프론트엔드 부트캠프 수료생들의
팀 프로젝트 및 퍼스널 브랜딩 기반  에이전시 합격 포트폴리오 사례를 공개합니다.

UIUX 디자이너 취업을 위한 웹 포트폴리오를 제작하는 실전 강의입니다.
UIUX디자이너!! 단순히 UIUX 기획서 하나로 취업이 가능할까요?
현실은 그렇지 않습니다.

비전공, 무경력 취준생에게 실무 현장의 기준은 생각보다 훨씬 높고,
단순한 UIUX기획서와 프로토타입만으로는 면접 기회조차 얻기 어려운 것이 현실입니다.

면접관이 포트폴리오를 보는 시간은 단 3초에서 7초 사이!!
이 짧은 순간 안에 시선을 사로잡지 못하면 기회는 주어지지 않습니다.

UIUX 디자이너로 합격하기 위해서는 UI 디자인, UX 프로세스 이해, 그리고 인터랙티브 웹 구현 능력까지 함께 보여줄 수 있어야 합니다.

그렇다면 왜? UIUX 디자이너에게 코딩 구현 능력이 필요할까요?
실무에서는 신입에게 완성된 역량보다 ‘성장 가능성’을 보고 채용합니다. 그리고 그 가능성은 포트폴리오에서 결정됩니다.

그래서 이 강의에서는
단순한 포트폴리오 제작을 넘어 UIUX 디자이너이자, 웹을 구현할 수 있는 디자이너로서 실제 합격 사례 기반의 포트폴리오 전략인터랙션 구현 방법을 함께 학습하고  차별화된 결과물을 완성하여 취업 경쟁력을 높일 수 있도록 설계했습니다.
또한 이 설계 방향성을 놓고 꾸준한! 업데이트를 진행합니다!

📢 HRD 수료생 생생후기










📢 부트캠프 수료생 합격 톡






📢 대규모 에이전시 합격퍼스널 브랜딩 포트폴리오 사례

 

 

 

 

 

 

 

 

 

 



 

 

 

 

 

📢 이런 분들에게 추천해요

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

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

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

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

 

 


학습 내용 📚

🫡 이 강의는요!

  • 2026년 에이전시 합격 포트폴리오 사례를 통해 면접관을 사로잡는 포트폴리오 제작        방법을 학습합니다.
  • 단순한 기획을 넘어, 취업에 바로 활용 가능한 포트폴리오 구조와 기준을 이해하고
        차별화된 결과물을 완성할 수 있습니다.
  • 또한, 해외 어워드 수상 사이트와 대형 에이전시에서 실제로 활용되는
        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

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • UIUX 디자이너 취업을 준비하며 차별화된 포트폴리오를 만들고 싶은 분

  • 면접관의 눈길을 사로잡는 인터랙티브 UIUX 웹 포트폴리오를 직접 완성할 수 있습니다.

  • 디자인은 괜찮지만 인터랙션 구현이 부족해 완성도가 아쉽다고 느끼는 분

  • UIUX 디자이너 취업을 준비하면서 경쟁력 있는 포트폴리오를 만들지 못해 답답한 분

  • UIUX 취업 포트폴리오는 만들었지만, 차별화가 부족해 면접에서 계속 탈락하는 분

선수 지식,
필요할까요?

  • html/css기초

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

4,946

수강생

254

수강평

236

답변

4.9

강의 평점

12

강의

"UIUX웹기획 .디자인. 프론트엔드 부트캠프 강사 J. 영입니다.

저는 지난 20년간 웹 및 앱 개발 회사를 운영하며, 현장의 치열함을 몸소 겪어왔습니다. 그 경험을 바탕으로 현재는 대학과 전문 교육 기관에서 UI/UX 디자인부터 프론트엔드 개발까지, 후배 전문가들을 양성하는 데 매진하며, 현재까지 500명이상 실무 진출 시키고 있습니다.

저의 강의 철학은 명확합니다.

  1. 기초부터 실무까지 막힘없는 연결

  2. 현업이 원하는 핵심 기술의 압축

  3. 취업 성공을 부르는 실무형 포트폴리오 완성

어디서부터 시작할지 막막하신 분, 이직을 꿈꾸지만 시간이 부족한 직장인, 그리고 코딩이 남의 이야기처럼 느껴지는 초보자분들까지. 제가 걸어온 20년의 길을 여러분의 지름길로 만들어 드리겠습니다. 당당히 실무자로 서는 그날까지, 여러분의 든든한 사수가 되어 최선을 다해 돕겠습니다.

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

실무경력

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


- 현)
- UIUX웹기획/ 디자인/프론트엔드 부트캠프 강사 (이젠DX아카데미 -강남점)
- 디자인.개발 포트폴리오 전문 강의 및 팀그룹강의

 
* 운영중인 유튜브 (코딩하는 디자이너)

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
강의 질문과 포트폴리오 관련 피드백 드립니다.

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

 

더보기

커리큘럼

전체

76개 ∙ (9시간 24분)

해당 강의에서 제공:

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

수강평

전체

41개

5.0

41개의 수강평

  • 조병민님의 프로필 이미지
    조병민

    수강평 1

    평균 평점 5.0

    5

    100% 수강 후 작성

    웹 퍼블리셔로 취업을 준비하면서 항상 고민했던 게 바로 ‘어떻게 하면 남들과 차별화된 포트폴리오를 만들 수 있을까?’였어요. 요즘 트렌드인 인터랙션 효과를 꼭 넣고 싶었는데, 독학으로는 도저히 감도 안 잡히고... 유튜브 뒤져봐도 뭔가 하나씩 빠진 느낌이라 한참 헤매고 있었습니다. 그러다가 J.young 선생님의 이 강의를 듣게 됐는데, 진짜 인생 강의라고 말하고 싶어요! ScrollTrigger를 활용한 애니메이션을 단순히 따라만 하게 하는 게 아니라, 실제 포트폴리오에서 어떻게 응용해야 하는지 ‘감’을 잡을 수 있게 도와주셨어요. 예제도 정말 트렌디해서 강의 따라 만들면서도 ‘와 이거 내 포폴에 바로 써야지!’ 하는 생각이 절로 들더라구요. 특히 강사님이 초보자 눈높이에 맞춰 하나하나 설명해주시니까, 저 같은 코알못(?)도 부담 없이 끝까지 완강할 수 있었습니다. 중간중간 막힐 때는 커뮤니티에서 질문 올리면 답변도 친절하게 주셔서 너무 감사했어요. 덕분에 저만의 포트폴리오에 멋진 인터랙션을 하나하나 적용해가면서, ‘아 나도 이런 거 할 수 있구나!’ 하는 자신감까지 얻었네요. 지금은 완전 밋밋하던 제 포트폴리오가 생동감 넘치고, 보는 사람들의 시선을 확 끌어당길 수 있는 웹사이트로 바뀌었어요. 이런 강의, 진짜 나만 알고 싶을 정도로 최고입니다! 강사님, 좋은 강의 정말 감사드리고요, 다음 강의도 기대할게요 😊💖

    • 아장님의 프로필 이미지
      아장

      수강평 4

      평균 평점 5.0

      5

      6% 수강 후 작성

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

      • J.영
        지식공유자

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

    • 강예빈님의 프로필 이미지
      강예빈

      수강평 1

      평균 평점 5.0

      5

      14% 수강 후 작성

      선생님 혹시 현재 유튜브에 있는 선생님 강의와 인프런에 올려져있는 이 gsap 강의의 차이점이 무엇일까요?

      • J.영
        지식공유자

        안녕하세요? 강예빈님 유튜브강의와 겹치는 부분이 30프로 있지만.. 실제적으로 전체 포트폴리오를 완성할 수 있는내용은 본 강의에만 있습니다. 본 강의는 따라만해도 포트폴리오를 완성할 수 있습니다. 감사합니다^^ 제이영드림

    • 알리오올리오님의 프로필 이미지
      알리오올리오

      수강평 16

      평균 평점 4.9

      5

      52% 수강 후 작성

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

      • J.영
        지식공유자

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

    • 김현수님의 프로필 이미지
      김현수

      수강평 1

      평균 평점 5.0

      5

      61% 수강 후 작성

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

      • J.영
        지식공유자

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

    J.영님의 다른 강의

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

    비슷한 강의

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