디저슬라이더

Web 및 APP에서 자주 사용되는 이미지 슬라이드를 쉽고 빠르게 제작 할 수 있는 제작 툴

다음

매뉴얼

디저슬라이더매뉴얼
게시글 검색
[디저슬라이더] 슬라이드 만들기 : 2) 슬라이드 마법사 - ③ 컨텐츠 딜레이 시간 및 효과 설정하기
데브디저트 조회수:840
2016-05-30 17:19:50

컨텐츠 추가가 완료되셨나요? 슬라이드 마법사에서는 각 장면마다 컨텐츠들의 나타나고 사라지는 시간을 제어 할 수 있습니다~

이 기능을 잘 활용하면 멋지고 화려한 장면 연출도 가능한 아주 좋은 기능입니다^^

이제 이 기능을 활용하는 방법에 대해 알려드리겠습니다~

만약 컨텐츠를 추가하는 방법에 대해 모르시겠다면 이전 단계의 게시글을 참고해 컨텐츠를 추가해 주세요^^

☞ 컨텐츠 추가하는 방법

 


 

1. 컨텐츠 레이어

본격적으로 설명에 들어가기 전에 컨텐츠 레이어에 대해 설명을 드리고자 합니다^^

컨텐츠 목록 라인에 있는 컨텐츠의 한 줄씩을 레이어라고 부릅니다. 이전 단계까지 잘 따라와주셨다면 현재 컨텐츠 목록 라인에 컨텐츠 레이어가 많이 쌓여있을 것 입니다^^

컨텐츠의 타입을 쉽게 알 수 있도록 레이어 앞에 아이콘으로 표시를 해놓았습니다. 이미지 컨텐츠와 텍스트 컨텐츠의 아이콘이 다른 모양으로 되어 있는 것을 확인 하실 수 있을 거에요~

컨텐츠 레이어들 위에 마우스를 올려보면 레이어의 배경 색상이 연한 회색으로 바뀌고, 그 중 어떤 레이어를 클릭하게 되면 선택된 레이어의 배경 색상은 진한 네이비 색상으로 변하게 됩니다. 이 부분을 잘 인지하고 계신다면 슬라이드를 제작하실 때 레이어가 많이 쌓여있더라도 헷갈릴 일이 없겠죠?^^

 

제가 말씀드린 부분에 대해 한 눈에 알기 쉽도록 이미지를 준비했습니다. 아래의 이미지를 참고해 주세요~!

 

 

 

2. 딜레이 시간 및 효과 설정

먼저 이전 단계에서 제일 처음 추가했던 상품 이미지의 효과 설정을 해보도록 하겠습니다.

컨텐츠 효과 선택 부분을 클릭했을 때 장면(배경 이미지)의 효과들과는 종류가 조금 다를거에요~

해당 컨텐츠가 화면상에 나타날 때 일어나는 효과에 대해 설정하는 것 입니다.

* 컨텐츠 효과별 추가설명은 여기로~

 

그리고 효과 설정하는 부분 밑에 시간 선택하는 부분도 장면(배경 이미지)와 조금 다릅니다.

장면의 시간 설정은 다음 장면으로 넘어가기까지의 시간 즉, 장면의 총 시간이라고 생각 하시면 됩니다. 그렇기 때문에 전체적인 총 시간 설정만 가능하고 타이머 바 조정은 불가능합니다.

반면 컨텐츠는 해당 컨텐츠의 나타나고 사라지는 것을 설정 할 수 있기 때문에 타이머 바를 밀고 당겨서 조정을 하게 됩니다. 컨텐츠의 타이머 바 하단을 보시면 좌측 끝에는 0, 우측 끝에는 7.0 이라고 적혀있을 거에요. 이 7.0이 앞서 장면 설정 단계에서 설정했던 장면의 노출시간 7초인 것 입니다. 즉, 컨텐츠는 0초부터 장면이 넘어가기 전까지의 시간 사이에서만 나타나고 사라질 수 있다는 소리겠죠^^

레이어를 살펴보시면 "background" 레이어의 시간 설정과 일반 컨텐츠의 시간 설정 부분이 다른 것이 확인될텐데 바로 이 점 때문에 다르게 설정되는 것 입니다^^

 

 

 

저는 상품 이미지가 나타날 때 서서히 나타나도록 "서서히 나타남"으로 변경하고, 그 아래에 있는 타이머 바도 함께 변경해 저장하겠습니다~

장면(배경 이미지)의 노출시간을 설정 할 때와 달리 컨텐츠의 노출시간을 설정 할 때는 타이머 바를 움직여서 설정해야 합니다. 기본 설정값은 0초부터 3초까지 노출되도록 설정되어있죠?

노출시간은 0.1초 단위로 설정 할 수 있는데 저는 0.1초부터 시작해서 장면의 노출 시간인 7초까지 계속 노출되도록 설정해 보겠습니다.

타이머 바 우측의 숫자들이 현재 컨텐츠의 노출 시간을 나타내고 있습니다. 타이머 바를 직접 움직이면서 노출시간을 변경해 보세요^^

시간을 조정하신 후에 반드시 저장버튼을 눌러주는 것도 잊지마시구요~!

 

그럼 다른 레이어의 설정도 한번 바꿔볼까요?

 

 

 

다른 컨텐츠들의 효과와 시간을 바꿔보았습니다. 컨텐츠들의 노출 시간을 보시면 컨텐츠가 화면에 나타나는 시간이 조금씩 다른 것이 보이시나요?? 위의 이미지를 보시면 나타나는 시간별로 같은 색상끼리 묶어서 표시를 해놨습니다^^ 저 색상별로 화면상에 순차적으로 나타나도록 설정했구요. 저 설정대로라면 [초록색 > 빨간색 > 파란색 > 노란색 > 보라색] 순으로 화면에 나타나겠죠~?^^

컨텐츠들이 첨부터 한번에 쫙 보이는 것보단 부분적으로 자연스럽게 나타나도록 연출하고 싶어서 이렇게 설정해 보았습니다! 여러분은 어떻게 설정해 보셨나요^^?

저는 상품 이미지가 먼저 서서히 나타나고, 메인 문구는 상품 이미지 다음으로 왼쪽에서 나타나게 하고, 서브문구는 위에서 나타나게, 특가 세일 배너는 눈에 잘 띄도록 반짝반짝 효과를 줬어요. 바로가기 버튼은 제일 마지막으로 아래에서 나타나도록 설정했습니다~

무작정 여러 효과를 줘서 정신없는 것보단 이런 식으로 컨텐츠들의 전체적인 스토리를 기획해서 제작하면 더 보기 좋고 한 눈에 잘 들어오는 슬라이드가 되지 않을까 하는 생각이 드네요^^

 

 

3. 레이어 순서 변경

레이어가 많을 경우에 타이머 바를 조정하다보면 헷갈리는 경우가 생기게 됩니다. 그럴 때 나타나는 시간이 비슷한 레이어들끼리 모아놓으면 노출 시간 관리에 조금 더 도움이 되지 않을까 싶습니다~^^ 그래서 지금부터 레이어 순서를 변경하는 방법에 대해 알려드리겠습니다!

레이어들의 순서를 변경하는 방법은 레이어 위에 마우스를 올려 클릭한 상태에서 위 또는 아래로 드래그 해보시면 순서가 변경됩니다.
이때 팁을 하나 알려드리자면 레이어를 위로 올리고 싶을 때는 옮길 레이어의 상단 끝 부분을 클릭해서 위로 드래그하면 쉽게 순서가 변경됩니다~ 그리고 레이어를 아래로 내리고 싶을 때는 레이어의 하단 끝 부분을 클릭해서 아래로 드래그하면 쉽게 변경이 됩니다^^

아래 이미지를 참고해서 순서를 한번 변경해 보세요~

 

 

4. 미리보기

장면을 저장하고 [미리보기] 버튼을 눌러 지금까지 작업했던 슬라이드 확인해 보세요.

 

 

 

슬라이드가 잘 재생되고 있나요? 만약 컨텐츠들이 나타날 때 어색한 부분이 있다면, 시간이나 효과들을 조금씩  조절해 보세요^^

그리고 지난 설명 중에 "바로가기" 버튼에 링크값을 입력했었는데 이 "바로가기" 버튼 위에 마우스를 올리면 마우스 커서가 바뀌는 것을 볼 수 있습니다~ 이 버튼을 클릭하면 상품 페이지로 이동이 되겠죠~?

미리보기 화면에서는 모든 링크가 새 창으로 연결이 되니 "현재 창"으로 설정했던 링크가 새 창으로 떠도 당황하시지 마시고 페이지가 정상적으로 이동이 되는지만 체크해 주시면 됩니다^^

 

여기까지 하시면 첫 번째 슬라이드 장면의 제작이 완료되었습니다!

어떠세요? 제작하는 과정이 잘 이해가 되셨는지요~ 복습하는 의미로 두 번째 슬라이드 장면도 한번 만들어볼까요?

저는 두번째 장면의 노출시간을 "5"로 해서 컨텐츠도 좀 간단하게 해봤습니다~ 아래의 이미지를 참고해 주세요.

 

 

두 번째 장면까지 만드셨으면 미리보기 화면을 확인해 보세요~

장면이 넘어가는 효과까지 다 확인이 되기 때문에 방향 네비게이션 등을 이용해 장면 이동 테스트도 하실 수 있습니다.

 

그럼 지금까지 만들어 본 예제 슬라이드의 완성된 모습을 보여드리겠습니다^^ 아래의 링크를 눌러주세요!

★ 완성된 예제 슬라이드 보기 ★

 

 

완성된 슬라이드를 확인해 보셨나요? 이제 슬라이드 만들기 제작 과정이 끝났습니다~

모든 기능과 옵션을 하나하나 설명하느라 글은 길지만, 따라해보면 굉장히 쉽고 간단하기 때문에 어느정도 익숙해지면 멋진 슬라이드를 제작하실 수 있을거에요^^

이제 슬라이드를 만들었으니 이 슬라이드를 페이지에 출력하는 방법에 대해 알아보도록 하겠습니다~

아래의 링크를 클릭해 주세요!

 

☞ 완성된 슬라이드를 페이지에 넣어보자!

댓글[0]

열기 닫기