안녕하세요 하버스쿨의 루움입니다

안녕하세요. 저는 하버스쿨의 루움이라고 합니다. 2년여간 하버스쿨에서 디자이너 분들께 Framer X를 알려드린 노하우를 담아 이번 클래스101에서 가장 쉽고 재미있게 Framer X와 JavaScript를 배워보실 수 있도록 도와드리려고 합니다.

포트폴리오 웹사이트

디자이너라면 다들 하나쯤은 갖고 계시죠?

_{(출처 Andrew Baygulov / Daniel Spatzek / peng ke / Daniel - 시계방향 순)}

아직 없으시다고요? 그렇다면 이 강의가 도움이 될 거예요.

클릭하면 이렇게 휙휙 움직이게 해주세요. 이렇게 말로만 얘기하는데 지치셨다고요?

이제 직접 만들어보면서 인터렉션과 프로토 타이핑의 기초를 배워 보세요.



어떤 것들을 배우는지 한 번,

가볍게 살펴보도록 할까요?

클래스 목표 1

포트폴리오를 반응형 웹사이트로 가장 쉽게

Framer X는 그리신 작업물이 바로 웹사이트가 되는 마법 같은 기능이 기본으로 들어 있습니다. 여기에 다른 사람들이 만들어 놓은 수천 개의 Assets 들을 Package Store에서 모두 무료로 다운로드해 사용할 수 있지요.

3D 모델, 반응형, 텍스트 인터렉션, 동영상 삽입, Grid System 등 원하는 기능이나 Asset 들을 편하게 다운로드한 후 레고 블록처럼 조립하고 그 위에 슥슥 그리면 짠하고 웹사이트가 완성됩니다. 저와 함께 Framer X를 이용하여 웹사이트를 그려봐요.

클래스 목표 2

인터렉션을 직접 코드로

웹사이트는 일반적인 종이 매체들과 다릅니다. 사람들이 들어와서 머물며 페이지를 넘기거나, 클릭을 할 수도 있고 스크롤을 할 수도 있고 알지 못하는 이상한 행동들을 하다가 나가는 곳이지요. 이에 웹사이트에 들어온 사용자들을 위해 우리는 Framer X를 이용해 좀 더 특별한 '인터렉션'이라는 경험을 만들어 줍니다.



_{인터렉션 요소를 작업합니다 - imageZoom}

_{인터렉션 요소를 작업합니다 - menu}

_{인터렉션 요소를 작업합니다 - page}

_{인터렉션 요소를 작업합니다 - scroll}

클래스 목표 3

나도 이제 코딩할 줄 아는 디자이너!

Framer X는 표준 JavaScript를 기본 문법으로 사용하기 때문에 다룰 수 있는 영역이 무한합니다. 그만큼 디자이너 분들이 처음 배우실 때, 제대로 방향을 잡지 못하시면 엄청난 혼란 속으로 빠질 수 있죠. 이에 처음 코드를 배우시는 분들도 쉽게 코드를 작성하실 수 있게끔 제가 개발한 특별한 전용 코드 에디터를 제공 드립니다.

코드와 이 에디터로 조금 친해지시고 나면 전보다 코드에 대한 자신감이 생기실 거예요!

클래스 목표 4

세상 모두가 접속할 수 있도록!

Framer X로 완성한 나만의 포트폴리오 웹사이트에 도메인을 붙여 세상 모두가 접속할 수 있도록 해봅시다. 도메인을 구입하는 것부터 웹사이트를 배포하고 구입한 도메인을 연결하는 것까지! 저와 함께 해요.

하버스쿨에서 Framer X를 수강하셨던 분들의 후기들

이 클래스를 수강하고 나시면

1. 반응형 웹사이트를 Framer X 로 그려서 만드는 방법을 배웁니다.
2. 인터렉션 지식을 활용해 위 웹사이트를 인터렉티브하게 만들 수 있습니다.
3. 죽어있는 그래픽이 아닌, 실제 앱/웹과 같은 프로토타이핑 디자인을 만들 수 있습니다.