[UI/UX] 패럴렉스 스크롤로 본 웹 화면에 대한 고찰 정보
[UI/UX] 패럴렉스 스크롤로 본 웹 화면에 대한 고찰본문
90년대 초반 단순한 하이퍼 링크로 구성된 웹사이트에서부터 화면을 구성하는 것에 대한 고민은 항상 있어왔다. 당시엔 그것을 중요하게 생각하지는 않았지만 말이다. 웹 기술은 항상 진화했고 진화하면서 사용자가 웹에서 행동하는 방식을 바꾸어 왔다.
JavaScript 프레임워크중 하나인 jQuery가 널리 쓰이기 시작하면서 이를 활용한 jQuery 플러그인들이 웹 디자인의 큰 부분을 차지하기 시작했다. 단순한 그래픽 혹은 css style에 jQuery가 개입하면서 웹 페이지가 사용자의 행동에 제각기 반응하는 이전에 없던 사용자 경험을 만들어 내기 시작한 것이다.
패럴렉스 플러그인은 여러개의 레이어를 겹쳐두고 사용자의 마우스 포인터 위치에 따라, 혹은 스크롤이 내려가거나 올라감에 따라 여러개의 겹쳐둔 레이어가 제작기 다른 속도로 움직이며 입체적인 효과를 준다. 특히 세로로 길쭉한 한 페이지 디자인에 적합하다. 패럴렉스 스크롤은 여러가지 jQuery 플러그인과 섞여 시너지를 발휘한다. 오브젝트의 크기를 모니터의 크기에 맞게 표현하여 모든 모니터에서 동일한 경험을 안겨주게 된다.
패럴렉스 스크롤은 단순히 위에서 아래로, 혹은 왼쪽에서 오른쪽으로 마우스의 휠을 돌리며 페이지의 컨텐츠를 소비하는 대신 네비게이션을 클릭하거나 스크롤바를 마우스로 클릭하고 천천히 내리는 형태의 사용자 경험을 만들어 냈다. 휠을 돌려 페이지를 내리면 좋은 사용자 경험을 얻기가 쉽지 않다. 휠을 돌리면 화면을 구성하는 오브젝트들이 의도에 맞지 않게 뚝뚝 끊겨 표현되는 경우가 많기 때문이다.
여러 해상도를 가진 여러명의 사용자에게 같은 사용자 경험을 안겨주기 위해서 단순하게 1024px 혹은 960px등의 가로 공간을 고정하는 방법을 사용하던 웹 화면이 여러가지 플러그인을 사용하면서 사용자가 작은 모니터를 사용하던 큰 모니터를 사용하던, 길쭉한 모니터를 사용하던 넓적한 모니터를 사용하던 꽉 찬 화면을 제공함으로써 컨텐츠를 효과적으로 전달할 수 있게 되었다. 웹사이트를 구성하는 방법은 여러가지 기술에 의해 다양성이 생겼다. 좋은 사용자 경험을 내기 위해, 컨텐츠를 효과적으로 전달하기 위해 웹 화면을 잘 구성하면 사이트에 대한 신뢰가 생길것이며 어떤 방식으로든 사용자와 사이트 모두에게 긍정적인 영향을 미칠 것이다.
http://stephband.info/jparallax/demos/index.html
밤을 새고 작성해서 문장이 매끄려우려나 모르겠네요.
패럴렉스 스크롤 페이지는 컨텐츠 유동이 적을 때 특히 유용합니다.
밤을 새고 작성해서 문장이 매끄려우려나 모르겠네요.
패럴렉스 스크롤 페이지는 컨텐츠 유동이 적을 때 특히 유용합니다.
추천
0 비추천
0
0 비추천
0
댓글 13개
첫번째 사이트 나 두번째 사이트나 단순한 vertical scrolling + parallaxing 일뿐인데, 이것이 UX 에 있어 어떤 혁신을 가져오는지 납득하기 어렵습니다.
스크롤링을 세로로 하던, 가로로 하던, diagonally 하던, 아예 곡선으로 path 를 그려 사방 팔방으로 돌리던, 그런 효과들이 단순히 처음 한번 보기에 신기해 보이는 eye candy 에 불과할 뿐이지, 방문자로 부터 원하는 behavior 를 유도하지 못한다고 저는 생각합니다.
스크롤링을 세로로 하던, 가로로 하던, diagonally 하던, 아예 곡선으로 path 를 그려 사방 팔방으로 돌리던, 그런 효과들이 단순히 처음 한번 보기에 신기해 보이는 eye candy 에 불과할 뿐이지, 방문자로 부터 원하는 behavior 를 유도하지 못한다고 저는 생각합니다.
UX의 혁신이라기 보다는 웹 화면을 제어하는 방법에 있어서 새로운 방법이기에 주목할 만 하다고 생각합니다. 화면을 구성하는 방법이 어떻게 진화할지 궁금합니다.
제 생각을 온전히 전하기엔 글솜씨가 부족한가봅니다 ㅜㅜ
제 생각을 온전히 전하기엔 글솜씨가 부족한가봅니다 ㅜㅜ
좋은글 예시 링크 감사합니다.
쇼핑몰의 경우 네이게이션을 통하여 소분류까지 접근하여 아이템을 선택하는 경우보다
메인페이지에 '추천 상품'의 아이템이 구매율이 높다는것은 누구나 알고있는 사실입니다.
클릭질 몇번과 스크롤질 몇번.. 과연 유저는 어떤 방식을 선호할까요?
그렇습니다.
정보의 접근성에 있어 메인페이지에서 핵심 컨텐츠를 모두 보여 줄 수 있다면 더 없이 좋은 UX는 없습니다.
예전에는 플래쉬가 있었습니다.
플래쉬 애니메이션으로 그들을 소개하는 코멘터리 혹은 이미지, 동영상들을 제어할 수 있었고,
그것을 이용한 메인페이지가 많이 있었습니다.
그와 같은 맥락이라 생각합니다.
모바일에서의 구동은 둘째치더라도 제이쿼리는 비교적 가볍습니다.
다수의 홈페이지에서 구글에서 공개하는 제이쿼리 소스를 링크 한다는 가정하에는 더 가볍습니다.
그리고 또 다른 이유로는 해당 소스를 다룰정도의 프로그래머라면 아마도 이미지를 하나만 로드하여
background-position 을 이용해 잘라서 쓰는것으로 알고있습니다.
그 이전에는 기대감이 생길법한 로딩 표시만 살짝 띄워주면 되니, 그 어떤것보다도 효과적입니다.
동영상은 용량이 크고, 플래쉬는 지는 해라는 점을 염두에 뒀을 때
패러렉스 스크롤(?)이 핵심 컨텐츠를 동적으로 가장 잘 표현해 낼 수 있는 UX 가 아닌가 싶습니다.
마지막으로 cshop2 님께서 말씀해주신 eye candy 부분에서 신기해보인다라는 작용도 필요하지 않나..
라고 생각합니다 ㅠㅠ
메인페이지에 '추천 상품'의 아이템이 구매율이 높다는것은 누구나 알고있는 사실입니다.
클릭질 몇번과 스크롤질 몇번.. 과연 유저는 어떤 방식을 선호할까요?
그렇습니다.
정보의 접근성에 있어 메인페이지에서 핵심 컨텐츠를 모두 보여 줄 수 있다면 더 없이 좋은 UX는 없습니다.
예전에는 플래쉬가 있었습니다.
플래쉬 애니메이션으로 그들을 소개하는 코멘터리 혹은 이미지, 동영상들을 제어할 수 있었고,
그것을 이용한 메인페이지가 많이 있었습니다.
그와 같은 맥락이라 생각합니다.
모바일에서의 구동은 둘째치더라도 제이쿼리는 비교적 가볍습니다.
다수의 홈페이지에서 구글에서 공개하는 제이쿼리 소스를 링크 한다는 가정하에는 더 가볍습니다.
그리고 또 다른 이유로는 해당 소스를 다룰정도의 프로그래머라면 아마도 이미지를 하나만 로드하여
background-position 을 이용해 잘라서 쓰는것으로 알고있습니다.
그 이전에는 기대감이 생길법한 로딩 표시만 살짝 띄워주면 되니, 그 어떤것보다도 효과적입니다.
동영상은 용량이 크고, 플래쉬는 지는 해라는 점을 염두에 뒀을 때
패러렉스 스크롤(?)이 핵심 컨텐츠를 동적으로 가장 잘 표현해 낼 수 있는 UX 가 아닌가 싶습니다.
마지막으로 cshop2 님께서 말씀해주신 eye candy 부분에서 신기해보인다라는 작용도 필요하지 않나..
라고 생각합니다 ㅠㅠ
네..에... 엥? jQuery 가.. 가볍... 다.. 구 .. 요????
흠냐..
http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/
css animation 으로 처리할 수 있는걸 (드랍다운 메뉴라던지, 로그인이라던지, 다른 여러가지 UI 들) 자스 로 처리하면 (특히 모바일 플랫폼에서) 완전 욕 바가지로 쳐먹는데....
보시다시피 자스가 css 보다 훨씬 더 느리고 무겁습니다... -..-;; ㅠㅠㅠㅠ
http://demo.marcofolio.net/css3_jquery_animations/#thirdacc
왜 무거운 자스 보다 가벼운 css 를 써야 하는가에 대해..
아래 조사는 벌써 4년전 조사인데,
A study released by Akamai in September 2009 came to similar conclusions:
47% expect a web page to load in two seconds or less.
40% will abandon a web page if it takes more than three seconds to load.
52% of online shoppers claim that quick page loads are important for their loyalty to a site.
14% will start shopping at a different site if page loads are slow, 23% will stop shopping or even walk away from their computer.
64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time.
사이트가 2초이내로 안뜨면 다시 그 사이트 안 찾아옵니다. (4년전에 그랬단 얘깁니다.) 다른데 가서 쇼핑한답니다.
http://munchweb.com/effect-of-website-speed
요즘은 어떤가요? 저는 개인적으로 어느 사이트건 0.3초 이내에 안뜨면 짜증납니다.
Yslow 에서 로딩점수 90점도 안나오면 욕부터 나옵니다.
저 위 예제 사이트들, 전부다 느려터진 사이트 들 입니다.
한국은 전부다 광선망 깔려 있으니 이런 부분에 대해 민감하지 못할수도 있겠네요. 하지만 미국은 아직 DSL 쓰는 사용자가 optical 사용자 보다 훨씬 더 많습니다.
다음이, 네이버가, 구글이, prarallaxing 효과를 넣을 줄 몰라서 안 넣는게 아닙니다.
구글은 로딩속도에 의해서 사이트 랭킹에까지 차별을 둡니다.
혼자서 에니메이션 효과 떡칠해놓고, 야 이거 참 재미있고, 잘 만들었다, 이러고 있는 디자이너는, ... 음... 위 팀장한테 조인트 까이고 또 까이고, 시간이 흐르면 결국 정신을 차리긴 합니다.
ㅋㅋㅋㅋㅋㅋㅋㅋ
흠냐..
http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/
css animation 으로 처리할 수 있는걸 (드랍다운 메뉴라던지, 로그인이라던지, 다른 여러가지 UI 들) 자스 로 처리하면 (특히 모바일 플랫폼에서) 완전 욕 바가지로 쳐먹는데....
보시다시피 자스가 css 보다 훨씬 더 느리고 무겁습니다... -..-;; ㅠㅠㅠㅠ
http://demo.marcofolio.net/css3_jquery_animations/#thirdacc
왜 무거운 자스 보다 가벼운 css 를 써야 하는가에 대해..
아래 조사는 벌써 4년전 조사인데,
A study released by Akamai in September 2009 came to similar conclusions:
47% expect a web page to load in two seconds or less.
40% will abandon a web page if it takes more than three seconds to load.
52% of online shoppers claim that quick page loads are important for their loyalty to a site.
14% will start shopping at a different site if page loads are slow, 23% will stop shopping or even walk away from their computer.
64% of shoppers who are dissatisfied with their site visit will go somewhere else to shop next time.
사이트가 2초이내로 안뜨면 다시 그 사이트 안 찾아옵니다. (4년전에 그랬단 얘깁니다.) 다른데 가서 쇼핑한답니다.
http://munchweb.com/effect-of-website-speed
요즘은 어떤가요? 저는 개인적으로 어느 사이트건 0.3초 이내에 안뜨면 짜증납니다.
Yslow 에서 로딩점수 90점도 안나오면 욕부터 나옵니다.
저 위 예제 사이트들, 전부다 느려터진 사이트 들 입니다.
한국은 전부다 광선망 깔려 있으니 이런 부분에 대해 민감하지 못할수도 있겠네요. 하지만 미국은 아직 DSL 쓰는 사용자가 optical 사용자 보다 훨씬 더 많습니다.
다음이, 네이버가, 구글이, prarallaxing 효과를 넣을 줄 몰라서 안 넣는게 아닙니다.
구글은 로딩속도에 의해서 사이트 랭킹에까지 차별을 둡니다.
혼자서 에니메이션 효과 떡칠해놓고, 야 이거 참 재미있고, 잘 만들었다, 이러고 있는 디자이너는, ... 음... 위 팀장한테 조인트 까이고 또 까이고, 시간이 흐르면 결국 정신을 차리긴 합니다.
ㅋㅋㅋㅋㅋㅋㅋㅋ
똑같은 기능을 한다 가정할 때 플래쉬에 비해서 입니다^^ㅋㅋ (모바일포함)
그리고 위 글처럼 만약 모두가 구글을 링크해서 사용한다면 더 가볍단 것 이구요
순수 CSS를 즐기기에 트랜지션에 관련된 태그?들은 저도 즐겨사용하긴하지만 IE9 찔끔과 IE10 찔끔에 상처를 많이 받고 있습니다.
사이트가 느리다면 빠르게 할 수 있는 다른방법을 찾아보면 됩니다.
jpg와 gif의 로딩방식이 다르듯, 상단에서부터 순차적으로 로드되면 되지 않읗까요?^^
미국의 인터넷 회선에 관하여 의견주셨는데요..
아시다시피 해당 기술은 국내는 아직 많이 시도되지 않았고 오히려 해외에서 활발한 UX 입니다.
사람은 텍스트보다 그림에 더 매력을 느끼고 이해하려 들며,
최근에는 '그림으로 얘기하라'류의 텍스트를 그림으로 풀어내는 방식의 책도 많이 나오고 있는 실정입니다.
아까 자유게시판에서 보니 웹사이트가 게시판나열의 위주에서 컨텐츠 위주로 변화되고 있다고 하였는데,
이러한 사실을 받아들이신다면 해당 UX가 그저 불편만을 이야기 할 문제는 아니라 생각합니다.
다시 보고 싶은 웹 사이트(컨텐츠)가 될 수 있습니다.
로딩이 좀 느리고 시간이 걸린데도,
만약 해당 UX 를 통해 컨텐츠를 조금 더 시각적인 효과로 받아들일 수 있다면..
다음과 네이버 구글에게 parallaxing 효과가 어떤 컨텐츠에 필요한가요?
위 포털서비스에는 해당사항이 없는 이야기입니다.
오히려 이것은 패션, 엔터테인먼트, 생산성, 등 단 한가지의 타겟이 있는 컨텐츠만 부각시킬 수 있으며,
cshop2 님 말씀대로 남발하고 만들면 혼자서 에니메이션 효과 떡칠해놓고, 야 이거 참 재미있고, 잘 만들었다, 이러고 있는 디자이너는, ... 음... 위 팀장한테 조인트 까이고 또 까이고, 시간이 흐르면 결국 정신을 차리긴 합니다.
그리고 위 글처럼 만약 모두가 구글을 링크해서 사용한다면 더 가볍단 것 이구요
순수 CSS를 즐기기에 트랜지션에 관련된 태그?들은 저도 즐겨사용하긴하지만 IE9 찔끔과 IE10 찔끔에 상처를 많이 받고 있습니다.
사이트가 느리다면 빠르게 할 수 있는 다른방법을 찾아보면 됩니다.
jpg와 gif의 로딩방식이 다르듯, 상단에서부터 순차적으로 로드되면 되지 않읗까요?^^
미국의 인터넷 회선에 관하여 의견주셨는데요..
아시다시피 해당 기술은 국내는 아직 많이 시도되지 않았고 오히려 해외에서 활발한 UX 입니다.
사람은 텍스트보다 그림에 더 매력을 느끼고 이해하려 들며,
최근에는 '그림으로 얘기하라'류의 텍스트를 그림으로 풀어내는 방식의 책도 많이 나오고 있는 실정입니다.
아까 자유게시판에서 보니 웹사이트가 게시판나열의 위주에서 컨텐츠 위주로 변화되고 있다고 하였는데,
이러한 사실을 받아들이신다면 해당 UX가 그저 불편만을 이야기 할 문제는 아니라 생각합니다.
다시 보고 싶은 웹 사이트(컨텐츠)가 될 수 있습니다.
로딩이 좀 느리고 시간이 걸린데도,
만약 해당 UX 를 통해 컨텐츠를 조금 더 시각적인 효과로 받아들일 수 있다면..
다음과 네이버 구글에게 parallaxing 효과가 어떤 컨텐츠에 필요한가요?
위 포털서비스에는 해당사항이 없는 이야기입니다.
오히려 이것은 패션, 엔터테인먼트, 생산성, 등 단 한가지의 타겟이 있는 컨텐츠만 부각시킬 수 있으며,
cshop2 님 말씀대로 남발하고 만들면 혼자서 에니메이션 효과 떡칠해놓고, 야 이거 참 재미있고, 잘 만들었다, 이러고 있는 디자이너는, ... 음... 위 팀장한테 조인트 까이고 또 까이고, 시간이 흐르면 결국 정신을 차리긴 합니다.
자스를 빨리 로딩하기 위해서는 자스 로더가 있죠. 몇가지 많이/널리 쓰이는 제품들도 github 에서 줒어다 쓰실 수 있고... 직접 로더를 많들어 쓰셔도 되고...
그거하고, css 로 처리해도 되는걸 jQuery 로 하는 것 하고는 별개 문제죠.
물론 한국의 경우는 IE9 이하 점유율이 워낙 높아서 css3 를 사용할 수 있는 환경이 아직 아니라는 것을 인지하고 있습니다. (will it ever? O.O?)
그리고 그냥 저의 개인적 비선호도 일지도 모르겠네요. parallaxing 효과 같은 경우, 저 위에 예제들은 최소 4~5년전에 작성된 것들이고 (parallaxing 치고도 전혀 신선하지 않은 효과들 입니다.)
더구나 jQuery 로 저런 효과를 보여준거는 4~5년 밖에 안되었을지 모르지만, 저 효과들, 플래시 초창기때 지겹게 나왔던 것들이거든요. 10여년 전에... -..-;;
제네들 좀 그만봤으면 좋겠다는, 그런 피로감 때문인지도 모르겠습니다.
*미국에서는 저 parallaxing 을 한 2년 전쯤, 무슨 Dell 이메일 광고 부터 나이키 선전 까지 안쓰는 사람들이 없었었거든요. 매일같이 보게 되니까, 막 안쓰는 사람이 하나도 없고... 토나올 것 같았습니다. -..-;;
아마 그래서 제가 parallaxing 에 대해 매우 부정적인 것 같습니다.
그거하고, css 로 처리해도 되는걸 jQuery 로 하는 것 하고는 별개 문제죠.
물론 한국의 경우는 IE9 이하 점유율이 워낙 높아서 css3 를 사용할 수 있는 환경이 아직 아니라는 것을 인지하고 있습니다. (will it ever? O.O?)
그리고 그냥 저의 개인적 비선호도 일지도 모르겠네요. parallaxing 효과 같은 경우, 저 위에 예제들은 최소 4~5년전에 작성된 것들이고 (parallaxing 치고도 전혀 신선하지 않은 효과들 입니다.)
더구나 jQuery 로 저런 효과를 보여준거는 4~5년 밖에 안되었을지 모르지만, 저 효과들, 플래시 초창기때 지겹게 나왔던 것들이거든요. 10여년 전에... -..-;;
제네들 좀 그만봤으면 좋겠다는, 그런 피로감 때문인지도 모르겠습니다.
*미국에서는 저 parallaxing 을 한 2년 전쯤, 무슨 Dell 이메일 광고 부터 나이키 선전 까지 안쓰는 사람들이 없었었거든요. 매일같이 보게 되니까, 막 안쓰는 사람이 하나도 없고... 토나올 것 같았습니다. -..-;;
아마 그래서 제가 parallaxing 에 대해 매우 부정적인 것 같습니다.
넵 순차적인 로드는 js로더를 이야기 한 것이 맞습니다.
저 또한 제이쿼리 사용보다는 CSS 사용을 좋아합니다.
하지만 언질하신부분처럼 국내는 IE 사용자가 대다수이기 때문에 트랜지션에 관한 부분이 사실상 아직까지는 대중화될 수 없다는 이야기 였습니다.
그렇지요 어찌보면 플래쉬 과도기의 시대(2advanced를 필두로)처럼 필요이상으로 가열되는것이 아닌가 우려하시는 부분이 느껴지기도 합니다.
위의 링크들은 다 열어보지 않아서 잘 모르겠습니다.
하지만 과유불급 이라는 말을 떠올린다면 더 좋은 UX가 나올 수 있지 않겠습니까?^^;
저 또한 제이쿼리 사용보다는 CSS 사용을 좋아합니다.
하지만 언질하신부분처럼 국내는 IE 사용자가 대다수이기 때문에 트랜지션에 관한 부분이 사실상 아직까지는 대중화될 수 없다는 이야기 였습니다.
그렇지요 어찌보면 플래쉬 과도기의 시대(2advanced를 필두로)처럼 필요이상으로 가열되는것이 아닌가 우려하시는 부분이 느껴지기도 합니다.
위의 링크들은 다 열어보지 않아서 잘 모르겠습니다.
하지만 과유불급 이라는 말을 떠올린다면 더 좋은 UX가 나올 수 있지 않겠습니까?^^;
cschop2님은 ux의 가치를 작게 생각하시는것 같습니다. 패럴렉스 스크롤은 ux로써의 가치로 접근햇을때 신기한것에서 그치는게 아닙니다. 저는 사이트의 주목도가 올라가고 물건을 판매할 경우 똑같은 제품이라도 패럴렉스 스크롤이 적용된경우와 단순한 페이지로 구성될 경우를 비교했을 때 패럴렉스 스크롤이 적용된곳ㅢ 매출이 더 높을것이라고 생각합니다.(일반 페이지보다 더 나은 사용자 경험을 제공했기 때문에)
좋은 이슈 제공해주신 우산11님 감사합니다..^^
네, 아마도 저의 관점의 UX 는 우산님의 관점과 다른 것 같습니다.
UX 란 감성이지 기술이 아니다 "User Experience is the way a person feels" 라는 관점에서 저에게는, 그러니까 저 개인적으로는 parallaxing 은 너무나 지겹게 보아온 거라서요...
하지만, 각 지역/국가간 사용자의 감성은 다르니까요...
아무튼 좋은 주제 감사합니다.
UX 란 감성이지 기술이 아니다 "User Experience is the way a person feels" 라는 관점에서 저에게는, 그러니까 저 개인적으로는 parallaxing 은 너무나 지겹게 보아온 거라서요...
하지만, 각 지역/국가간 사용자의 감성은 다르니까요...
아무튼 좋은 주제 감사합니다.
패럴렉스 스크롤보다 단 시간 내 큰 임팩트를 줄 수 있는 UX 가 몇개나 될런지...
정말 제대로 구현된 곳은 제품 패키징을 풀어보는 경험까지 가상으로 제공해 줄 정도인데 말이죠.
자주 접했는데 명칭은 오늘 처음 정확하게 알았네요. 감사합니다.
정말 제대로 구현된 곳은 제품 패키징을 풀어보는 경험까지 가상으로 제공해 줄 정도인데 말이죠.
자주 접했는데 명칭은 오늘 처음 정확하게 알았네요. 감사합니다.
좋은글이네요. 우리은행에서 본거같습니다 ㅋㅋ
