패러렉스(parallax.js) 사용해보기 #1

한 때 유행했던 UI 기법 중에 Parallax 라는 기법이 있다. 패러렉스라는 이 기법은 두개 이상의 레이어를 만들어 두고 이 레이어의 움직임에 차이를 둬서 2D의 화면에서 입체감을 느끼도록하는 시각적 착시 기법이다. 

음 대표적으로 이해할만한 예가 1993년 빛돌이 에니메이션의 입체영상을 보여주기 위한 기법으로 멀리있는 배경을 천천히 움직이고 가까이 있는 배경을 빠르게 움직이는 현상을 생각하면 되겠다...(이렇게 아재인증을..)

 

 

22초에 나오는 영상을 보면 가까이 있는 객체와 뒤에 있는 객체가 서로 다른 속도로 움직이면서 공간감을 느끼게하는 착시현상을 parallax라고 이해하면 되겠다.

 

원리를 대충 이해했다면 이제 이것을 손쉽게 구현할 수 있게 도와주는 parallax.js를 사용하는 방법에 대해서 배워보도록 하자.

 

https://matthew.wagerfield.com/parallax/ 요 사이트에 가면 parallax.js를 다운로드 받을 수 있다.

 

사이트 아래쪽의 "i" 버튼을 클릭하자

다운로드 버튼을 클릭하면 소스를 다운로드 받을 수 있다.

다운로드 받은 parallax.js 프로젝트 압축을 풀고 명령 프롬프트에 들어가서 "npm install" 명령을 입력한다.

아차, npm 명령을 사용하려면 node.js를 다운로드 받아야한다. 이와 관련해서는 https://blog.thereis.xyz/89 에 가면 배울 수 있으니 걱정 노노요.

$ npm install

이렇게 하면 아래와 같이 필요한 패키지들을 자동으로 다운로드 해준다.

이 다음에 "npx gulp" 라고 입력해주자.

$ npx gulp

gulp가 실행되면서 자동으로 브라우저에 패러렉스 샘플 페이지가 있는 페이지가 자동으로 열릴거다.

 

일단 오늘은 여기까지.

각 샘플들 들어가서 패러렉스가 뭔지 한번 경험해 보도록 하자. 아참, gulp를 실행하면서 자동으로 패러렉스가 dist라는 폴더를 만들면서 parallax.min.js 파일이 생성되었을 텐데 이거 다음 편에서 사용할 거니까 지우지 말자.

 

그럼 안녕!