클래스 소개

사용자의 상호작용으로 움직이는 애니메이션과 디자인을 구현하는 것, 꼭 개발자가 필요한 작업일까요? 아닙니다! 디자이너 분들도 이 클래스에서 저와 함께 코딩을 배운다면 충분히 해내실 수 있습니다.

저는 네이버에서 인터랙티브 디자이너로 7년 넘게 일하며 주로 코딩으로 UI 애니메이션 및 프로토타입 제작 작업했습니다. 물론 저 역시 코딩을 처음 시작할 때에는 많은 어려움이 있었습니다. 이 클래스에서는 디자이너로서 코딩을 익히면서 겪었던 시행착오와 이런 과정을 통해 쌓아온 시니어 인터랙티브 디자이너의 코딩 노하우를 알려드릴게요.

우리 디자이너들은 비주얼 결과물을 보면서 작업하는 것이 일반적이잖아요? 코딩을 통해 완성되는 결과물을 확인하실 수 있도록 많은 예제들을 준비했습니다.

코딩을 전혀 모르는 디자이너 분들도 제 수업을 차근차근 따라온다면, 미려한 움직임이 있는 애니메이션을 뚝딱 완성하실 수 있을 거예요!

수강 효과

• 코딩을 전혀 모르는 초보자분들도 인터랙션 예제를 만들 수 있습니다.
• 자바스크립트 코딩을 활용하여 인터랙션과 애니메이션을 만들어 나가는 방법을 알 수 있습니다.
• 인터랙티브 디자인을 구현할 때 발생하는 이슈의 유형을 알아보고 어떤 방식으로 문제를 해결해나가는지를 알 수 있습니다.

추천 대상

• 코딩으로 구현하는 인터랙션과 애니메이션으로 스킬업 하고 싶은 디자이너
• 구현하는 디자이너(인터랙티브 디자이너)의 커리어를 시작하고 싶으신 분
• 직접 설계한 디자인과 움직임을 적용하고 싶으신 디자이너
• 인터랙티브 디자인이라는 나만의 경쟁력을 찾고 싶은 디자이너

수강 전 참고 사항

• 이 클래스는 Visual Studio 영문 버전 코드 에디터로 진행됩니다.
• Mac OS와 Window OS 둘다 사용할 수 있습니다.

이 클래스가 특별한 두 가지 이유

❶ 12년차 인터랙티브 디자이너가 알려주는

자바스크립트 문법과 코딩

코딩을 통해 인터랙션과 애니메이션을 만들고 있지만 저 또한 '디자이너'입니다. 저도 코딩을 처음 배울 때 어려워서 매우 힘들었던 경험이 있습니다. 그렇기 때문에 코딩을 이제 막 시작하시는 많은 디자이너 분들께 도움이 되고 싶습니다.

이 클래스는 코딩을 전혀 모르는 분들도 인터랙티브 디자인을 시작하실 수 있도록 Java Script 기초 문법부터 알려드리고 있습니다. 또한 다양한 예제를 따라하며 인터랙션을 설계하는 법을 배우실 수 있으며 그 과정에서 마주하는 문제를 해결해나가는 방법, 그리고 애니메이션을 디테일을 높이는 방법까지도 빠짐없이 알려드립니다.

▲ 챕터 6 슬라이딩 팝업 애니메이션 실습 예제

▲ 챕터 7 Draw Circle 인터랙션 실습 예제

❷ 코드를 치면 즉각적으로 확인할 수 있는

재미있는 인터랙션 예제

우리는 개발을 전문적으로 하는 개발자가 아닙니다. 그렇기 때문에 처음부터 어려운 개발 언어와 개발 구조에 대해서 알 필요가 없습니다. 디자이너들은 비주얼 아웃풋에 익숙한 사람들이기에 그러한 예제들 위주로 클래스를 구성했습니다.

코드를 치면 바로 브라우저에서 시각적으로 확인할 수 있는 예제들로 재미있는 인터랙션을 구현해 보며 코딩을 배워나가 보세요! 사용자의 마우스 움직임, 클릭 등 행동 방식에 따라 다르게 나타나는 인터랙티브 애니메이션, 이제 여러분의 손으로 직접 만들 수 있습니다.

▲ 챕터 8 Drag Rect 인터랙션 실습 예제

▲ 챕터 9 Throw Ball 인터랙션 실습 예제