"Oh!" 감탄사가 나오는 역동적인 인터랙티브 웹사이트를 만들어요.

포함된 강의수: 6개

마지막 업데이트: 2022.04.22

크리에이티브 넘치는 인터랙티브 웹 페이지!
1분코딩과 함께 제대로 불태워요 🔥

이 로드맵과 함께라면,
당신도 이런 페이지 개발 가능! 💻

역동적인 인터랙티브 웹 페이지 개발, 먼 이야기가 아닙니다.
1분코딩과 함께 천천히 하나하나 배워볼까요?

 







이 모든 내용을
로드맵으로 한 번에 알려드려요 🔎

 

1️⃣ 인터랙티브 웹 개발 시작하기

1 CSS 변환과 애니메이션, CSS Flex, 3D
2 인터랙비트 웹 개발을 위한 자바스크립트
3 객체의 정의와 활용
4 스크롤 다루기
5 Transition / Animation 이벤트
6 전진! 3D 스크롤 실습

 

 

2️⃣ CSS Flex / Grid 익히기

1 Flex 핵심 정리
2 Flex UI 만들기
3 Flex로 반응형 페이지 만들기
4 Grid 핵심 정리
5 Grid로 반응형 페이지 만들기
6 Grid 활용 예제 실습

 

 

3️⃣ SVG (Scalable Vector Graphics) 마스터

1 SVG의 개념과 기본 사용법
2 CSS와 자바스크립트 적용하기
3 그리기, 텍스트, 각종 효과
4 Stroke, SMIL 애니메이션
5 아이콘 폰트 만들기
6 인터랙티브 SVG : 몬스터 애니메이션 만들기

 

 

4️⃣ 3D 리플릿 제작

1 프로젝트 소개
2 소스코드
3 템플릿 문자열
4 루프 처리하기
5 자바스크립트 이벤트 위임
6 3D 리플릿 만들기

 

 

5️⃣ 애플 웹사이트 구현하기

1 스크롤을 이용한 인터랙션 구현
2 고해상도 비디오 인터랙션
3 동적 위치를 고려한 스크롤 인터랙션 구현
4 더 부드럽게 동작하는 고화질 비디오
5 Transition / Animation 이벤트
6 SVG 애니메이션을 이용한 로딩 만들기

 

 

6️⃣ three.js로 시작하는 3D 인터랙티브 웹

1 기본 요소 익히기
2 transform / geometry
3 material / light / raycaster
4 물리엔진 다루기
5 예제! 스크롤 기반의 3D 랜딩페이지
6 예제! 징검다리 게임

 

안녕하세요. 1분코딩입니다! 😎

제 입으로 이런 말 하기 쑥스럽지만...수강평 790개 ⭐평균 5점 만점 강사랍니다😅

안녕하세요, 페이스북과 유튜브 1분코딩을 운영하고 있는 유준모입니다.
평소에 유튜브 등에서 주로 시각 구현에 관련된 인터랙티브 웹 강의들을 하다보니, 자연스럽게 코딩에 관심이 많은 디자이너분과 디자인에 관심이 많은 개발자분들이 자주 방문합니다.

최근 Awwwards나 FWA같은 해외 웹 어워드의 수상작들을 보면, 한결같이 '이런 건 도대체 어떻게 만드는 거지?'라는 생각이 들 정도로 신기하고 놀랍습니다. 자바스크립트 문법을 잘 안다고, 또는 최근 잘 나가는 프론트엔드 라이브러리를 공부한다고 그런 화려하고 임팩트있는 웹사이트를 만들어낼 수 있는 것은 아니거든요.

웹 인터랙션은 할 줄 아는 사람은 많지만 잘 하는 사람은 정말 드문 분야입니다. 실무에서는 생산성이 중요하므로 좋은 라이브러리를 찾아 잘 쓰는 것도 중요하지만, 원천 기술과 구현 원리에 대한 이해가 중요한 분야 중 하나입니다.

눈에 보이는 동작은 같아도, 바닥부터 직접 만드는 방법을 훈련한 개발자는 숙련도부터 다릅니다.
바닥부터 직접 구현하는 방법을 알려드릴게요! 고급 인터랙티브 엔지니어로 성장하실 수 있도록 도와 드리겠습니다. 강의에서 뵙겠습니다 :)

댓글 불러오는 중

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스