웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
패럴렉스 스크롤로 본 웹 화면에 대한 고찰
Posted by kimdirector | 2014.09.11 | Hit : 4108
패럴렉스 스크롤 jQuery css JavaScript 웹디자인 웹사이트
목록보기이전보기
90년대 초반 단순한 하이퍼 링크로 구성된 웹사이트에서부터 화면을 구성하는 것에 대한 고민은 항상 있어왔다. 당시엔 그것을 중요하게 생각하지는 않았지만 말이다. 웹 기술은 항상 진화했고 진화하면서 사용자가 웹에서 행동하는 방식을 바꾸어 왔다.
 
JavaScript 프레임워크중 하나인 jQuery가 널리 쓰이기 시작하면서 이를 활용한 jQuery 플러그인들이 웹 디자인의 큰 부분을 차지하기 시작했다. 단순한 그래픽 혹은 css style에 jQuery가 개입하면서 웹 페이지가 사용자의 행동에 제각기 반응하는 이전에 없던 사용자 경험을 만들어 내기 시작한 것이다.
 
패럴렉스 플러그인은 여러개의 레이어를 겹쳐두고 사용자의 마우스 포인터 위치에 따라, 혹은 스크롤이 내려가거나 올라감에 따라 여러개의 겹쳐둔 레이어가 제작기 다른 속도로 움직이며 입체적인 효과를 준다. 특히 세로로 길쭉한 한 페이지 디자인에 적합하다. 패럴렉스 스크롤은 여러가지 jQuery 플러그인과 섞여 시너지를 발휘한다. 오브젝트의 크기를 모니터의 크기에 맞게 표현하여 모든 모니터에서 동일한 경험을 안겨주게 된다.
 
패럴렉스 스크롤은 단순히 위에서 아래로, 혹은 왼쪽에서 오른쪽으로 마우스의 휠을 돌리며 페이지의 컨텐츠를 소비하는 대신 네비게이션을 클릭하거나 스크롤바를 마우스로 클릭하고 천천히 내리는 형태의 사용자 경험을 만들어 냈다. 휠을 돌려 페이지를 내리면 좋은 사용자 경험을 얻기가 쉽지 않다. 휠을 돌리면 화면을 구성하는 오브젝트들이 의도에 맞지 않게 뚝뚝 끊겨 표현되는 경우가 많기 때문이다.
 
여러 해상도를 가진 여러명의 사용자에게 같은 사용자 경험을 안겨주기 위해서 단순하게 1024px 혹은 960px등의 가로 공간을 고정하는 방법을 사용하던 웹 화면이 여러가지 플러그인을 사용하면서 사용자가 작은 모니터를 사용하던 큰 모니터를 사용하던, 길쭉한 모니터를 사용하던 넓적한 모니터를 사용하던 꽉 찬 화면을 제공함으로써 컨텐츠를 효과적으로 전달할 수 있게 되었다. 웹사이트를 구성하는 방법은 여러가지 기술에 의해 다양성이 생겼다. 좋은 사용자 경험을 내기 위해, 컨텐츠를 효과적으로 전달하기 위해 웹 화면을 잘 구성하면 사이트에 대한 신뢰가 생길것이며 어떤 방식으로든 사용자와 사이트 모두에게 긍정적인 영향을 미칠 것이다.

 
패럴렉스 효과 제대로 내기
 
Medium의 디자이너, Dave Gamache가 제안하는 패럴렉스 제대로 쓰는 법. 간단한 것만 소개하였으니, 본문을 꼭 확인하시길.
 
해야 할 것 :
 
- 브라우저가 애니메이션 하기 좋은 효과들을 써라. translate3d, scale, rotation, opacity를 제외하면 60프레임 이상이 나오지 않을 가능성이 높다.
 - JS로 애니메이션을 주기 전에, window.requestAnimationFrame을 먼저 사용해라. 이렇게 하면 브라우저가 새로 그리기 전에 애니메이션을 줄 수 있다.
- 반올림을 제대로 해라. 54.2356345234578px 같은 값은 불필요하다. 소숫점 둘째 자리로도 충분히 효과를 볼 수 있다.
- 뷰포트 안에 있는 요소들만 애니메이트해라. 화면 바깥에 있는 녀석들을 움직여봐야 무슨 소용인가?
- fixed, absolute position인 요소들만 애니메이트해라. 필자 본인도 이유는 잘 모르지만 그렇게 하면 퍼포먼스가 확 올라가는 걸 경험했다고.
- 오브젝트 안에 모든 애니메이션을 정의해라. 뭐 이런다고 해서 퍼포먼스가 올라가는 건 아니지만 이렇게 하면 모든 게 한결 쉬워진다.
 
 
하지 말아야 할 것 :
 
- background-size:cover는 피해라. 특히 애니메이트 하려는 경우에는.
- 스크롤 이벤트에 바로 bind하지 마라. 포지션 업데이트 할 때에는 인터벌을 조금 둬라, 안그러면 미친듯이 포지션 변경 신호가 가서 퍼포먼스에 악영향을 준다. 매 10ms 정도마다 업데이트 해도 충분하다.
- 엄청나게 큰 이미지를 애니메이트 하거나, 크기를 확 줄이지 마라.
- (가급적) 한번에 너무 많은 걸 돌리지 마라. 실제로 뭔가 문제가 발생한 적은 없었지만, 가능성이 높다고 생각한다. parent와 child에 한꺼번에 애니메이션을 줄 때 버벅이는 경우가 있었다.
 
 
Parallax는(페럴랙스) 거리와 각도에 따라 사물이 다르게 보이는 차이를 말합니다. 말로는 이해가 잘 안되신다구요? 아래 예제를(소스: wikipedia) 보시면 이해가 조금 더 잘 되실 것같네요. “사물과 시선의 각도” 그리고 “사물과 시선의 거리“에 따라 사물의 모습이 다르게 보이는 것을 보여주는 예입니다.




 
이러한 시각적인 효과를 웹사이트에 적용하면 웹사이트를 스크롤할 때마다 시시각각으로 변하는 화면을 볼 수 있기 때문에 사용자들은 입체감을 느낄 수 있습니다.
 
간단한 예로 백그라운드 이미지는(background image) 멀리 있다고 가정하고 천천히 움직이도록 하고 백그라운드 위에 있는 포그라운드 이미지는(foreground image) 시선과 가깝다고 가정하여 백그라운드 보다는빠르게 움직인다면 마우스로 화면을 스크롤을 할 때마다 두가지 레이어가 다른 속도로 움직이기 때문에 입체감을 느낄 수 있는 것입니다.

 
튜토리얼,소스
 


패럴렉스 스크롤링으로 제작된 웹사이트를 보시려면 아래 제목을 클릭하세요.

Posted by kimdirector | 2014.09.11 | Hit : 4108
Origin http://sir.co.kr/bbs/board.php?bo_table=pl_talk&wr_id=4187
Tags 패럴렉스 스크롤 jQuery css JavaScript 웹디자인 웹사이트
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=99

COMMENT
Commented by kimdirector
2014.09.11 11:20:20 X
본 내용은 그누보드 개발자 개발자 커뮤니티에 등록된 내용입니다. [페렐렉스 효과 제대로내기] 부터의 내용은 스크랩을 해 둔 사이트의 내용을 추가해서 작성된 내용입니다. URL를 알고 계신 분이 있으시면 알려주시기 바랍니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
이메일 디자인 디자이너 UX 로고 모바일 디자인 성공 마크업 하이브리드 메일폼 화면설계 App 가독성 아이폰 쿠폰 디자인 캐스캐이딩 Example 관리 리더쉽 개발 UI 컨퍼런스 홈페이지 스튜디오 아이콘 폰트 사물인터넷 비결 생산성 준비생 데이비드리포트 홈페이지 프로그래밍 HTML5 플랫디자인 IT 웹 사이트 웹디자이너 웹디자인