[Adobe TV]
[Terry White] [세계적인 디자인 에반젤리스트] 새로운 시차 스크롤링[Parallax Scrolling]은
방문자가 여러분의 사이트에 방문하여 스크롤할 때
페이지 이미지를 보기 위해서 마우스 몇 번만 클릭하면
구성 요소들이 서로 다른 방향과 속도로 움직이는 멋진 효과를 체험하도록 해주는 기능입니다.
자! Adobe Muse에서 이것을 실행하는 방법을 살펴보겠습니다.
여기 브라우저에 웹 페이지가 보이는군요.
이 페이지는 Muse를 이용해 만든 것입니다.
페이지 처음에 크고 멋진
풀 스크린 슬라이드 쇼가 보이네요.
이제 Muse의 상단에 바를 스크롤하여
컨텐츠를 넘겨 봅시다.
컨텐츠를 보기 위해 페이지 아래로 스크롤하다 보면,
시차 스크롤링[Parallax Scrolling] 화면 왼쪽에
나뭇잎이 떨어지는 모습이 나타납니다.
다시 위로 스크롤하면, 나뭇잎이 사라지고,
아래로 스크롤하면, 나뭇잎은 또 다시 떨어집니다.
계속 아래로 스크롤 하다보면, 화면 오른쪽에는
또 다른 나뭇잎이 보입니다.
그리고 다른 방향에서 떨어지고 있는
나뭇잎이 보이네요.
이 나뭇잎들 하나 하나에는 각각
Adobe Muse의 시차 스크롤링[Parallax Scrolling]이 설정되어 있습니다.
자! 그럼 Muse 사이트의 처음으로 가서
우리가 만든 이 Muse의 설정 방법을 알아보도록 합시다.
처음에 보았던 멋진 스크린 화면이 다시 보입니다.
아래로 스크롤해서 내려가다 보면, 옆에 컨텐츠 기능들이 보이고,
계속 스크롤 하면 좀 전에 본
첫 번째 나뭇잎이 보입니다.
지금 이 화면에서는, 스크롤을 계속 하더라도 나뭇잎이 움직이지 않습니다.
미리보기 하거나 브라우저에 게시하기 전까지는
움직이지 않습니다.
하지만 나뭇잎이 떨어지는 효과를 내고 싶다면,
새로 설정해야 합니다.
물론 이 개체에는 이미 효과가 설정되어 있고,
시차 스크롤링[Parallax Scrolling]이 설정된
이 나뭇잎을 클릭하면
설정된 프레임을 볼 수 있을 뿐만 아니라,
상단에 가이드가 나와 있습니다.
이 가이드는
시차 스크롤링[Parallax Scrolling] 시작 지점이나 끝 부분,
또는 좌우상하 상관없이 1 방향으로 스크롤하거나
페이지를 스크롤 오프할 지점 등의 키프레임을 설정할 수 있습니다.
아래로 스크롤 하여 이 나뭇잎을 간단히 삭제해 봅시다.
자, 삭제되었습니다.
화면의 왼쪽을 보면, 가만히 여러분이 사용해주길
기다리고 있는 다른 나뭇잎이 있군요.
이것을 페이지로 끌어 옵니다.
그런 다음, 다시 설정 하는 방법에 대해 알려 드리겠습니다.
자, 이제 나뭇잎을 가져왔으니
이 시차 스크롤링[Parallax Scrolling]의 설정 창을 찾아 시다.
그건 바로 effect 메뉴에 있습니다.
effect 메뉴를 클릭 하면 이전에 설정해 놓은
그림자, 입체 그리고 빛과 같은 효과가 보이고,
여기, 새롭게 추가된
시차 스크롤링[Parallax Scrolling] 메뉴창이 보입니다.
지금 이 개체의 scroll motion은 꺼져 있네요.
이 말은 즉, 제가 브라우저에서 스크롤해도 움직이지 않는다는 말이지요.
scroll motion을 켜 봅시다.
여길 보면 전에 사용한 나뭇잎과
다른 위치에 있던 나뭇잎의 동작이 설정되어 있고,
또 제가 원하는 설정을 할 수 있습니다.
맨 처음의 이 부분은 key position,
즉 스크롤을 설정 하려는 위치를 말합니다.
저는 사실 이렇게 직접 끌어와서
"Eco Adventure Log" 글자나
"Log" 글자의 오른쪽에 놓아두고 싶지만,
그러면 픽셀 위치가 정확한지 알 수 없기 때문에,
이 창에서 시차 스크롤링[Parallax Scrolling] 설정을 하는 것이
더 편할 것 같군요.
아직은 key position에 대해서는 신경쓰지 않을 겁니다.
이 창에서 모션을 설정 하겠습니다. motion before key로 가봅니다.
이것은 “Log”라는 글자가 나오기 전까지의 모션이고,
motion after key는 이 부분이 지나간 후의 모션입니다.
여러분은 상하좌우 설정을 할 수 있고
잠금을 해제하면
before key(모션 전)과 after key(모션 후)의 키 값을
다르게 설정을 할 수 있습니다.
저는 아래 방향으로 스크롤을 설정하고 싶습니다.
옆에 이건 속도를 입력하는 칸이구요,
다음은 오른 쪽 방향으로 스크롤 설정한 부분인데,
저는 사실 처음은 오른 쪽 방향에 스크롤 설정을 하고 싶지 않습니다.
그래서 0으로 적겠습니다.
그 다음 after key입니다.  여기도 아래 방향으로 설정하고
속도는 2로
그 다음 오른 쪽 방향 스크롤의 속도를 1로 해서,
스크롤 설정을 하지 않은 것처럼 아주 약간만 움직이게 될 것입니다.
이제 남은 것은, 여기 key position을 설정하는 것입니다.
자, 이 곳을 클릭 해서,
우리가 설정하려는 위치
"Log”글자 중앙에 직접 key position을
이동시킬 수 있습니다.
이제 미리보기를 하려면, Muse에 내장되어 있는
웹킷[WebKit] 엔진을 이용하거나,
여기서 바로 HTML을 만들거나 원하는 브라우저에서
바로 미리보기 할 수 있습니다.
“브라우저에서 미리보기”를 원한다면,
페이지가 다시 나타납니다.
이 화면은 구글 크롬에서의 미리보기입니다.
제가 아래로 스크롤 하면 컨텐츠가 위로 스크롤되고 있는 것을 볼 수 있습니다.
우리가 설정했던 첫 번째 나뭇잎이 보이고
두번째 나뭇잎도 보이네요.
그 다음 “Log” 글자가 보이는 스크린 중앙에
새 나뭇잎이 떨어지고 있습니다.
계속 내려가다 보면,
이 나뭇잎은 오른쪽에서 점점 스크롤 되지 않습니다.
여러분은 오른쪽의 나뭇잎이 점점 사라져 가는 듯한 효과를 느낄 수 있습니다.
Adobe Muse를 이용하면, 쉽게 시차 스크롤링[Parallax Scrolling]을 만들어 낼 수 있습니다.
Adobe Muse는 최신 웹 트렌드와 표준을 받아들여
늘 업데이트하고 있습니다.
새로운 시차 스크롤링[Parallax Scrolling]은
방문자들이 사이트에서 Adobe Muse의 코드 작성 없이 사용 할 수 있게 해 주는
정교한 기술입니다.
여러분의 Adobe Creative Cloud 멤버십 일부로 Adobe Muse를 이용할 수 있습니다.
