애플 웹사이트 인터랙션 클론!
애플 웹사이트 인터랙션 클론!
수강정보
(52개의 수강평)
1004명의 수강생
5개월 할부시
월 15,400원77,000원
지식공유자 : 1분코딩
59회 수업 · 총 11시간 20분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상

이 강의는

애플 웹사이트에 자주 등장하는 고급 인터랙션 효과들을 처음부터 직접 개발하는 방법을 배울 수 있습니다.

이런 걸 배워요

  • 애플 웹사이트에 자주 사용되는 고급 인터랙션 기법
  • 고해상도 비디오 인터랙션
  • 스크롤을 이용한 키프레임과 요소 컨트롤
  • 고해상도 이미지 처리를 위한 캔버스 활용법

애플 제품 소개페이지처럼 멋진,
웹 화면 인터랙션 효과를 내 손으로 개발해보고 싶다면!

1분 코딩

요즘 애플에서 신제품이 출시되면 제품 구경하는 맛도 있지만,
이번 제품 소개 페이지는 또 얼마나 멋질까- 기대하는 재미, 웹 하시는 분들은 다들 즐기고 계시죠? 
이런 페이지들이요.
https://www.apple.com/kr/airpods-pro/
https://www.apple.com/kr/macbook-pro-16/

일분이

보면서
‘이런 건 어떻게 만들까’
‘나도 내 프로젝트에 이런 거 적용해보고 싶다’
이런 생각 하시는 분들을 위한 수업이에요.

Apple 제품 페이지
핵심 원리를 직접 구현 🏰

애플의 제품 소개 페이지들은 제품마다 디자인과 효과는 조금씩 차이가 있지만,
자세히 보면 인터랙션의 핵심 원리는 비슷하다는 사실을 알아챌 수 있어요.
스크롤을 세밀하게 이용해서 여러 가지 디자인 요소와 비디오 등을 컨트롤하는 건데요,
바로 이런 애플 제품 페이지에 두루 적용되는 핵심 인터랙션의 원리를 이해하고
직접 만들어 보는 수업이에요.
적용된 효과를 부분 예제 식으로 만들어 보는 것에 그치지 않고, 유기적으로 연결된 완성된 페이지를 만들어 봅니다.

직접 구현해본 경험으로
새로운 것을 창조해 보세요 🧰

남들이 만들어 놓은 것들을 가져다 쓰지 않고
핵심 원리들을 분석하고 직접 하나하나 구현하는 방식으로 진행하기 때문에,
꼭 애플 같은 형태가 아닌, 전혀 다른 형태나 아이디어를 구현할 때도 도움이 많이 될거라고 생각합니다.
열심히 완강하고 나면, 난이도가 있는 시각 구현에 관련된 개발에 더 자신감을 가지실 수 있을 거예요.

한땀 한땀 원리부터 제대로 💡

• 한 땀 한 땀, 원리를 생각하며 표준 웹 기술만을 이용해 바닥부터 만들어 갑니다.
• 늘어지지 않는 타이트한 컷편집으로도 장장 10시간 이상, 놓치지 않고 실습할 수 있도록 자세하게 구성했습니다.
• 표준 기술만 사용하기 때문에 세월이 지나도 변하지 않는 탄탄한 기본기를 익힐 수 있어요.
• 웹페이지 골격 만들기
• 스크롤 인터랙션 구현 원리와 구현 실습
• 고해상도 비디오 인터랙션 과 스크롤 액션과 연동
• 위치와 크기 계산을 이용한 스크롤 인터랙션 구현 실습
• 더 부드럽게 고화질 비디오 제어하기
• SVG 애니메이션

🙌 알려드려요

• CSS와 자바스크립트 기본을 알고 계셔야 학습을 원활히 진행하실 수 있습니다.
• 자바스크립트와 CSS 기초 정리가 필요하다면 제 유튜브 채널의 기초 정리 영상으로 먼저 공부를 하시면 좋습니다. https://www.youtube.com/playlist?list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX
• 인터랙티브 웹 개발에 대한 기본 지식을 탄탄히 공부할 수 있는 아래 강의를 먼저 수강하고나서 이 수업을 보시는 것도 추천드립니다.
https://www.inflearn.com/course/interactive_web
• ECMA 2015(ES6) 버전의 스크립트를 사용합니다.
• 완성된 소스코드를 제공합니다.

보너스 콘텐츠 추가 안내

2020년 9월 새로 발표한 아이패드 에어 소개 페이지의 새로운 인터랙션 효과를 만드는 코드와 강의 영상이 추가되었습니다.

도움 되는 분들

  • 애플 웹사이트의 화려하고 멋진 인터랙션 구현 방법이 궁금한 분
  • 크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분
  • 특별한 포트폴리오 웹사이트를 만들고 싶은 분
  • 개자이너, 디발자에 대한 로망을 갖고 계신 분들
  • 평소 1분코딩의 강의가 좋았던 분들

선수 지식

  • CSS, 자바스크립트 기본 지식

공개 일자

2020년 5월 14일 (마지막 업데이트 일자 : 2020년 9월 17일)

지식공유자 소개

서울에서 웹 디자이너이자 웹 개발자로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.
무료 강의는 유튜브에, 유료 강의는 인프런에 업로드하고 있습니다.

5.0
52개의 수강평
default_profile.png
5달 전
어. 뭐지.. 재밌네...
1분코딩

1분코딩 5달 전
재밌다.. 제가 넘 좋아하는 말씀 해주셨네요! ㅋㅋ 첫 수강평에, 좋은 평가도 감사합니다 헙님^^

default_profile.png
minam An 3달 전
졔가 누누이 말씀을 드리지마는 이 애풀 웹샤이트 강이는 한국 인트렉슌강이중에서 간결하면서도 멋즤다 저는 이릏게 팽까합니다. 비록 안쓰본 애니메이숀이라든지 켄바스라든지 이른 어려운 슈업을 이릏케 긘 호읍, 다싀말해 율시간 늠는강이를 따라 흔다는게 이게 쉽찌가안크등요. 제가 혀녁 푸로구래머이지마는 DOM을 제대로 알지못해 씨에슈에슈를 를 맥이는데 솽당한 어려움이있다.그른데 1분코딩은 조은 시나료를통해 강이쿈츄롤을 하니까 시가니 은제갔는지 몰라요. 보싀는 팬분들도 강이를통해 즈응말로 한단계 읍그레이드를 할수있다. 이르케 말씀을 드릴슈가 이쓰요.
1분코딩

1분코딩 3달 전
ㅋㅋㅋㅋㅋㅋㅋ minam님은 닉네임답게 팽까도 참으로 믓찌게 쓰신다...이르케 말씀을 드릴쑤가 이쓰요. 번역기로도 절대 돌릴 수 없지만 무슨 말씀인지 다 알아듣겠는 마법 ㅋㅋㅋㅋㅋ 감사합니다 허선생님 아니 안선생님 ㅋㅋㅋㅋㅋ

교육과정

모두 펼치기 59 강의 11시간 20분
섹션 0. 프로젝트 소개 및 소스코드 다운로드
2 강의 06 : 28
섹션 1. 웹페이지 골격 만들기
5 강의 68 : 08
메뉴 스타일링 1
13 : 36
메뉴 스타일링 2
09 : 02
페이지 내용 HTML 작성
13 : 17
페이지 내용 CSS 작성 1
14 : 56
페이지 내용 CSS 작성 2
17 : 17
섹션 2. 스크롤을 이용한 인터랙션 구현
14 강의 192 : 33
인터랙션 구현 컨셉
10 : 50
위치가 고정된 요소의 처리
11 : 59
스크롤 높이 세팅
17 : 08
스크롤 처리 기본 개념 잡기
09 : 09
현재 활성시킬 씬 결정하기
22 : 46
현재 활성 씬 반영하기
15 : 26
스크롤 애니메이션 구현 1
12 : 09
스크롤 애니메이션 구현 2
13 : 03
스크롤 애니메이션 구현 3
16 : 46
스크롤 애니메이션 구현 4
07 : 29
특정 타이밍 스크롤 애니메이션 기능 추가
16 : 50
특정 타이밍 스크롤 애니메이션 적용하기
20 : 09
자잘한 수정사항들 처리
12 : 15
main.js 적용 내용
06 : 34
섹션 3. 고해상도 비디오 인터랙션
8 강의 78 : 12
스크롤로 비디오 제어하기
12 : 16
고화질 비디오 부드럽게 처리하기 1
10 : 41
고화질 비디오 부드럽게 처리하기 2
06 : 32
비디오 인터랙션 적용 1
12 : 23
비디오 인터랙션 적용 2
04 : 02
캔버스를 창 사이즈에 맞추기
12 : 12
첫번째 스크롤 섹션 마무리
08 : 10
두번째 스크롤 비디오 처리
11 : 56
섹션 4. 동적 위치와 크기 계산을 이용한 스크롤 인터랙션 구현
14 강의 177 : 01
마지막 섹션 인터랙션 분석
05 : 59
블렌딩 캔버스 크기 계산
15 : 57
좌우 흰색 영역 계산 원리
08 : 36
좌우 흰색 영역 위치 및 크기 잡기
16 : 12
캔버스 드로우 애니메이션 1
25 : 01
캔버스 드로우 애니메이션 2
16 : 22
다른 씬의 캔버스 처리하기
08 : 59
스크롤에 따른 캔버스 포지션 변경
15 : 54
이미지 블렌딩 1
14 : 48
이미지 블렌딩 2
09 : 18
이미지 블렌딩 후 캔버스 스케일 조정하기
09 : 19
스크롤에 따른 포지션 변경 시 정확한 위치 설정하기
12 : 05
마지막 문단 애니메이션
12 : 43
스크롤에 반응하는 메뉴
05 : 48
섹션 5. 더 부드럽게 동작하는 고화질 비디오
4 강의 46 : 51
(참고) requestAnimationFrame
부드러운 감속의 원리
23 : 34
부드러운 감속 비디오에 적용하기
15 : 55
브라우저 리사이즈 대응
07 : 22
섹션 6. SVG 애니메이션을 이용한 로딩 만들기
3 강의 28 : 47
SVG 로딩 애니메이션 1
11 : 17
SVG 로딩 애니메이션 2
11 : 58
로딩 효과 적용하기
05 : 32
섹션 7. 마무리 작업
7 강의 69 : 14
초기화 시점 수정
04 : 21
CSS 애니메이션 퍼포먼스 향상시키기
08 : 52
폰 버그 수정 예시
09 : 32
버그 수정 1
11 : 33
버그 수정 2
15 : 53
버그 수정 3
08 : 23
하단 콘텐츠 추가하기
10 : 40
섹션 8. 수고하셨습니다
1 강의 03 : 25
최종 작업물 살펴보기, 그리고 전하는 이야기
03 : 25
섹션 9. 보너스 콘텐츠
1 강의 09 : 56
2020 아이패드 에어 페이지 효과 (스트로크 긋기 효과 등)
09 : 56
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스