애플 웹사이트 인터랙션 클론! 대시보드

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

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

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

애플의 제품 소개페이지들은 제품마다 디자인과 효과는 조금씩 차이가 있지만, 인터랙션의 핵심 원리는 비슷합니다. 스크롤을 세밀하게 이용해서 여러 가지 디자인 요소들을 컨트롤하는데, 바로 이런 애플 제품 페이지에 두루 적용되는 핵심 인터랙션의 원리를 이해하고 직접 만들어 보는 수업이에요. 적용된 효과를 활용해 유기적으로 연결된 완성된 페이지를 만들어 봅니다.

Macbook Pro 소개페이지 (클릭)

Airpods Pro 소개페이지 (클릭)

요즘 애플에서 신제품이 출시되면 제품 구경하는 맛도 있지만, 이번 제품 소개 페이지는 얼마나 멋질까 기대하는 재미가 있잖아요. 특히 웹하시는 분들은 다들 즐기고 계시죠?

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

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

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

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

미리 알려드려요 📌

보너스 콘텐츠 추가 안내

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

연관 로드맵 🚎