2013년 10월 25일
by aduris
0 comments

Parallax Scrolling

1. Parallax Scrolling이란?

 

1940년대부터 전통적인 애니메이션이나 게임에서 사용됐던 기법으로 화면을 구성하는 배경이미지들과

기타 이미지들간의 움직임이나 동작 시간을 다르게 주어 스크롤이 될 수 있도록 하는 디자인 표현 기법입니다.

Parallax(시차 : 관측 위치에 따른 물체의 위치나 방향의 차이)의 뜻에서도 볼 수 있듯이 물체의 위치와 방향의 차이로

사용자에게 평면적인 웹사이트가 아니라 마치 살아 숨쉬는 듯한 느낌의 웹사이트를 제공할 수 있습니다.

 

 

2. 등장배경 

 

원래는 애니메이션이나 게임에서 사용하던 기법으로 예전에 PC나 게임기에서 하던 마리오와 같은 게임을 예로 들 수 있습니다.

 

마리오 게임을 보면 배경과 배경 외 다른 오브젝트들(마리오, 장애물, 아이템상자 등)로 구성되어 있습니다.
마리오가 앞으로 진행 시 배경과 다른 오브젝트들의 동작 방향과 동작 시간의 차이를 두고 있습니다.
이 때문에 사용자는 연속성을 제공하여 캐릭터를 동작시키면 게임을 진행할 수 있습니다.
웹의 발전과 시각적으로 뛰어난 웹을 요구하는 사용자들이 증가함에 따라 웹사이트에서도 이러한 기법을 사용하려고 노력했습니다.
그러나 몇 년 전까지만 해도 HTML과 CSS만으로 한계에 봉착하였습니다.
그리하여 Adobe사의 Flash를 통해 Parallax Scrolling 기법을 사용하곤 하였습니다.
최근에는 다양한 모바일 기기의 발전과 여러 보안상의 문제점들로 인하여 ActiveX나 Flash와 같은 플러그인을 배제하려는 노력하고 있으며,
이와 함께 HTML5와 CSS3, Javascript, Javascript library 등의 발전하여 Flash를 대체하여 구현이 가능하게 되었습니다.
위와 같은 상황으로 기업이나 서비스 제공자가 제약적인 환경에서 벗어나 사용자나 소비자에게 좀
더 다이나믹하고 시각적으로 뛰어난 효과들, 다양한 디바이스에서의 지원, 여러가지 마케팅 효과 등을 얻기 위해
본격적으로 Parallax Scrolling 기법을 사용하게 되었습니다.
3. 사용유형
Parallax Scrolling 기법을 보면 사용자가 웹페이지에서 마우스의 스크롤 또는 키보드의 방향키를 통해 화면을 제어하도록 하고 있습니다.
이런 기능을 통해 기업이나 서비스 제공자가 사용자의 시선을 유도하거나 호기심 유발 등과 같은 효과를 줄 수 있습니다.
그렇기 때문에 다음과 같은 유형에 많이 사용하고 있습니다.
  • 제품설명
  • 기업 광고
  • 스토리텔링
  • 스토리를 가진 브랜드 광고
  • 회사소개

 

4. 장/단점

Parallax Scrolling을 사용함으로 장/단점은 다음과 같습니다.

 

- 장점

  • 페이지 컨텐츠를 소비하지 않음 -> 한 페이지로 구성 가능.
  • 컨텐츠에 따라 사용자의 시선을 서비스 제공자가 원하는 방향으로 이끌수 있음.
  • 단순히 마우스 스크롤 뿐만이 아니라 키보드의 방향키 등을 통해 다양하고 새로운 사용자 경험을 이끌어 낼 수 있음.
  • 디스플레이 크기에 영향받지 않고 효과적으로 컨텐츠를 전달할 수 있음

- 단점

  • 컨텐츠가 가로 또는 세로로 너무 길 때, 사용자가 지루함이나 불편함을 느낄 수 있음.
  • 하나의 페이지로 구성 시 많은 리소스가 필요하기 때문에 초기 로딩속도가 느릴 수 있음.
  • 컨텐츠의 양이 많을 경우 화면 구성이 복잡해질 수 있음.
  • 모바일 등의 기기에서 처리 문제가 남아 있음.

5. 국내외 사례

- 국내

- 해외

6. 마치며…
Parallax Scrolling에 대해서 조사하면서 느낀 점은 아직까지는 국내보다는 
해외에서 화려하면서 편리한 사용자 경험을 이끌어 내기 위한 노력을 많이 있다는 것을 느꼈습니다. 
Parallax Scrolling과 같은 기법을 사용할 수 있는 유형이 거의 정해져 있지만 
우리나라에서도 이런 기법이나 새로운 사용자 경험을 이끌어 낼 수 있는 노력이 필요할 것 같습니다. 
또한 Parallax Scrolling 기법을 사용 시 초기로딩 속도 문제나 화면 전환시 끊김과 같은 성능 문제를 야기할 수 있습니다. 
이런 성능 문제에 대해서는 Minify와 Gzip, Javascript Loader 나 화면 전화 시 Ajax를 통한 Append 등 
여러 성능 개선 노력등을 통해 충분히 개선이 가능할 것이라고 판단합니다. 
해당 기법만이 아닌 사용자에게 좀 더 편리하면서 시각적으로 뛰어난 디자인 기법에 대한 
노력이 필요할 것 같습니다. 

Parallax Scrolling에 대한 이론만 다루었습니다.

추후에 기회가 된다면 다양한 예제를 통해 다시 한번 다루도록 해보겠습니다.

감사합니다.

 

※ 참고 자료

[1] http://en.wikipedia.org/wiki/Parallax_scrolling

[2] http://designbyforest.tistory.com/entry/%ED%8C%A8%EB%9F%B4%EB%A0%89%EC%8A%A4-%EC%8A%A4%ED%81%AC%EB%A1%A4Parallax-Scrolling

[3] http://sir.co.kr/bbs/board.php?bo_table=pl_talk&wr_id=4187

[4] http://www.kirasung.co.kr/tc/entry/%EC%B5%9C%EC%8B%A0-%EC%9B%B9-%ED%8A%B8%EB%9E%9C%EB%93%9C-_-%ED%8C%A8%EB%9F%B4%EB%9E%99%EC%8A%A4-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%A7%81-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-Parallax-scrolling-Website

[5] http://skullacy.com/635

2013년 10월 11일
by 박성원
0 comments

웹접근성에 대하여 잘 설명해 놓은 동영상

2013년 8월 19일
by admin
0 comments

제19회오픈세미나_Do it!

19회픈세미나_ Do it!

발표자 | 이재구

날짜 | 2013. 8. 19 월요일 오후4시00분

장소 | 1층 회의실

주제 | Do it!

“Mobile Game Marketing”

2013년 8월 12일
by alexis
0 comments

Universal Unbranding, Logo Parodies by Maentis

“Universal Unbranding,” is a series of satirical versions of famous logos by French art collective Maentis…

Universal-Unbranding-1
Universal-Unbranding-2
Universal-Unbranding-3
Universal-Unbranding-4
Universal-Unbranding-5
Universal-Unbranding-6
Universal-Unbranding-7

2013년 7월 29일
by gdkim
0 comments

행복을 원한다면 남과 비교하지 마라

단지 행복해지려고만 한다면 쉽게 행복해질 수 있다.

그러나 우리는 다른 사람들보다 더 행복하게 되기를 바란다.

남들보다 행복하게 되는 것은 항상 어려운 일이다.

왜냐면 우리는 다른 사람들이

실제보다 더 행복하다고 믿기 때문이다.

-몽테스키외

2013년 7월 25일
by admin
0 comments

reddot design award winner 2013 is eda!

2013년 7월 19일
by gdkim
0 comments

내공은 하나를 실패할 때 마다 하나씩 쌓인다.

무엇이든 ‘당장 시작하라’ 하면 가장 많이 듣게 되는 말이
‘아직 내공이 부족해 조금 더 실력을 쌓은 후에 도전하겠다’는 말이다.
그러나 내공이 쌓일 때까지 기다리는 사람은
결코 내공을 쌓을 수 없다.
내공은 하나를 실패할 때 마다 하나씩 쌓인다.
-카피라이터 정철, ‘머리를 9하라’에서

 

‘아직 내공이 부족해서’라는 말은
신중함이나 겸손함이 아닌
실패에 대한 두려움의 발로라 할 수 있습니다.
발타사르 그라시안은 ‘탁월한 능력은
새로운 과제를 만날 때마다 스스로 개발된다’고 했습니다.
기다리는 시간이 아닌
과감한 도전에 따른 실패가 내공을 강하게 합니다.

조영탁, “행복한 경영”

 

Risk의 본질적 뜻은

도전이라 말합니다.

따라서 ‘take a risk’는 ‘위험을 감수하라’ 보다는

‘도전하라’, ‘모험하라’로 해석해야 한다고 주장합니다.

가장 위험한 도전은 도전하지 않는 도전입니다.

(The biggest risk is not taking one.)

-이미도, ‘똑똑한 식스팩’

 

“4살 아들이 스마트폰 게임을 하다 Fail이 뜨자 좋아하더라.

그래서 fail이 무슨 뜻인지 묻자 “실패”라고 대답하더라.

그래서 실패가 무어냐고 묻자 아들이 “다시 하라는 거야”라고 했다고.”

- 이영아/국민대 게임교육원

http://story.pxd.co.kr/

 

2013년 7월 18일
by admin
0 comments

제18회오픈세미나_How to place

18회픈세미나_ How to place

발표자 | 이원민

날짜 | 2013. 7. 12 금요일 오후5시030분

장소 | 1층 회의실

주제 | How to place

“디지털 콘텐츠 시장 바라보기”

2013년 7월 15일
by gdkim
0 comments

Adjusting the Sails

“The pessimist complains about the wind;
the optimist expects it to change;
the realist adjusts the sails.”
- William W. Ward

2013년 7월 12일
by gdkim
0 comments

높이 오르려면 높이 생각해야 한다

만일 당신이 패배할 것이라 생각하면, 당신은 그럴 것이다.
만일 당신이 도전하지 못하리라 생각한다면,
당신은 못할 것이다.
만일 당신이 스스로 뛰어나다고 생각한다면,
당신은 그런 것이다.
세상을 살면서 우리는
성공이란 한 사람의 의지에서 비롯된다는 사실을 알게 된다.
그것은 모두 마음의 자세에 달려 있다.
-월터 D. 윈틀

Proudly powered by WordPress | Theme: Yoko by Elmastudio

Top