http://alvarotrigo.com/fullPage
유행한 지는 꽤 됐지만, 현재도 많이 쓰이고 있고 아직도 세련미를 잃지 않은 전체 페이지가 스크롤로 구성된 사이트를 만들 수 있는 JQuery 플러그인.
서비스 및 상품을 세련미 있게 소개하는 구조로써 적합하므로 그런 용도의 페이지에서 많이 사용되고 있다.
대표적으로 이런 구성으로 제작된 사이트 대표적인 곳을 소개해본다.
Google Photo (https://photos.google.com/)
가장 눈에 띄었던 사이트이다.
피카사에서 구글포토로 바뀌면서 사용했던 구글포토 소개 랜딩페이지. 동영상과 구성요소의 애니메이션 효과를 적절하게 사용하여 구글포토 기능을 직관적으로 홍보하고 있다.
샤오미 Mi 4 (http://www.mi.com/en/mi4)
대륙의 실수 시리즈의 주인공, 한국 소비자들에게 중국산=쓰레기라는 공식을 깨트린 대표기업 샤오미의 Mi 4 소개 사이트다.
샤오미 제품 중 Mi 4뿐만 아니라 많은 제품이 Fullpage 구조의 페이지로 구성되어 있다. (이 형태 또는 apple의 형태와 유사하거나 둘 중 하나)
소개한 사이트 말고도 더 많은 곳이 있겠지만, 어찌 됐든 이런 세련미가 철철 넘치고 서비스 및 제품을 홍보하는데 최적화된 사이트를 Fullpage.js 플러그인으로 아주 손쉽게 제작할 수 있다는 것이 포인트!
디자이너인 필자가 혼자 제작을 해보니 페이지가 이동할 때 발생하는 애니메이션은 무리였다.
하지만 전체 스크롤 페이지 구조에서 간단한 것들은 충분히 커스텀하여 세련미 있게 만들 수 있게 되어 있었다.
Examples 중 Other 부분은 개발자의 도움이 필요하겠지만, 나머지 Navigation과 design 부분은 예제와 설명을 보면 디자이너 입장에서도 충분히 맘껏 바꿔서 만들 수 있을 듯.
포스팅할 때는 https://www.tumblr.com/ 텀블러도 스크롤페이지 구성이었는데 언제부터인지 조금 바뀌었다.
이와 유사한 페이지를 구성할 수 있는 pagePilling 플러그인은 다음에 소개하도록 하겠다.
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.