디저슬라이더

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

다음

매뉴얼

디저슬라이더매뉴얼
게시글 검색
[디저슬라이더] 슬라이드 만들기 : 2) 슬라이드 마법사 - ① 장면 추가 및 옵션 설정
데브디저트 조회수:3727
2016-05-30 17:19:30

새 프로젝트 생성이 완료되셨나요? 그렇다면 이제 슬라이드 마법사를 실행해보도록 하겠습니다~

만약 새 프로젝트 생성을 하지 않으셨다면 이 게시글을 참고해 프로젝트를 생성해 주세요.   ☞ 프로젝트 생성하기

 


 

1. 슬라이드 마법사 실행

이제 슬라이드 제작을 위한 슬라이드 마법사를 실행 할 차례입니다~

목록에 있는 [디자인 수정] 버튼을 클릭하시면 슬라이드 마법사 창이 나타납니다.

 

 

※ 여기서 잠깐! 프로젝트 목록 페이지에서의 [프로젝트 정보] 버튼에 대해 알려드리겠습니다~

이 버튼을 클릭하면 프로젝트 정보를 확인 할 수 있는 페이지로 이동이 됩니다. 이 페이지에서는 프로젝트명, 사이즈, 슬라이드를 페이지에 삽입 할 수 있는 소스를 확인하실 수 있으며, 프로젝트를 삭제하고 싶을 때에도 이 페이지로 이동해 주시면 됩니다^^


 

그럼 다시 슬라이드 마법사 설명으로 돌아가겠습니다~

슬라이드 마법사 페이지에서의 각 영역별 안내는 아래의 이미지를 확인해 주세요~

 

 

 

2. 슬라이드의 기본옵션 설정

슬라이드 마법사 왼쪽 상단에 위치하고 있는 “슬라이드 기본옵션관리“에서 방향 네비게이션 / 페이지 네비게이션 / 타이머바 / z-index 값을 설정 할 수 있습니다.
처음 슬라이드 생성시 아래와 같이 기본설정 값이 선택되어 있지만 개인의 취향에 따라 슬라이드 이미지의 디자인에 따라 다양하게 설정 할 수 있답니다^^

 

  

각 항목별로 어떤 위치에 있는 옵션 설정인지 알고 싶으시면 항목 타이틀 옆에 있는 물음표 아이콘을 눌러주시면 설명이 나타납니다^^
아래의 이미지를 참고해 주세요.
 

 

< 옵션 항목 설명 >

- 방향 네비게이션 : 슬라이드 장면을 이전/다음으로 이동 할 수 있는 버튼입니다.

- 페이지 네이게이션 : 원하는 슬라이드 장면으로 자유롭게 이동 할 수 있는 버튼입니다.

- 타이머바 : 각 슬라이드 장면의 노출 시간동안 하단에 타이머 바가 로딩됩니다. 현재 보여지는 슬라이드 장면이 다음 장면으로 넘어가기까지의 남은 시간을 알 수 있습니다.

-  z-index설정 : 다른 슬라이드 또는 다른 컨텐츠와 겹쳐 해당 슬라이드가 가려져 보이지 않는 경우 z-index 수치가 더 높은 컨텐츠가 상단에 노출됩니다.
 

* 기본옵션 항목별 추가설명은 여기에서 확인해 주세요!

 

저는 방향네비게이션, 페이지 네비게이션은 기본옵션 그대로 두고 타이머바만 사용으로 변경해 보도록 하겠습니다.
설정 변경이 완료 되셨다면  [옵션 저장] 버튼을 눌러 현재의 설정을 저장해 주세요~

 

 

3. 장면(배경 이미지) 추가

지금은 슬라이드에 작업된 장면이 하나도 없기 때문에 아래와 같이 장면목록 라인에는 “슬라이드 장면을 추가해 주세요.” 라는 문구가 나타나 있으며, 장면 편집창에는 “슬라이드 장면을 선택해 주세요.”라고 문구가 나타나 있을 것 입니다.

장면목록 라인과 장면 편집창을 활성화 시키기 위해 슬라이드 마법사 오른쪽 상단에 위치하고 있는 “장면추가+” 버튼을 눌러 장면(배경 이미지)을 추가해 보도록 하겠습니다. 버튼 클릭~!

 

 

위와 같이 장면추가 팝업이 뜨면 장면의 배경 이미지로 등록할 이미지를 마우스로 끌어서 넣거나 파일을 선택해 업로드를 하면 장면 추가가 완료 됩니다. 배경 이미지는 반드시 처음 프로젝트 생성시 입력했던 슬라이드 사이즈와 동일한 사이즈의 이미지를 등록해 주셔야 합니다.
 

한번에 여러장의 장면을 간편하게 업로드 할 수 있는데 장면 당 하나의 배경이미지가 배치되기 때문에 여러장의 배경 이미지를 업로드하게 되면 여러장의 장면이 추가되게 됩니다.
 

이때, 이미지 파일의 확장자는 jpg, gif, bmp, png만 업로드 가능하니 선택한 파일이 업로드가 되지 않는다면 확장자를 한번 확인해 보세요~^^
 

* 처음 프로젝트 생성 시 입력했던 슬라이드 사이즈(1000px*400px)가 아닌 다른 사이즈의 이미지를 업로드 할 경우에는 생성 시 입력했던 슬라이드 사이즈에 맞게 꽉 차게끔 이미지가 확대 또는 축소된 상태로 장면이 추가된다는 점~ 참고하세요^^ 너무 사이즈가 다르다면 이미지가 찌그러질 수 있겠죠?

 

 

저는 장면 2개를 추가하기 위해 배경 이미지 2개를 선택해서 업로드해 보겠습니다.

 

  

업로드 할 이미지가 아랫부분에 나타났죠? 만약 잘못 선택했다면 [삭제] 버튼을 이용해 지우고 다시 선택하시면 됩니다^^

장면 추가가 성공적으로 완료되면 아래의 이미지처럼 화면이 나타납니다.

 

  

장면을 추가하면 위와 같이 장면목록라인에서 추가된 장면을 확인할 수 있어요. 두 개의 장면이 추가되었죠?

두장의 장면을 각각 클릭해서 확인해보면 화면 왼쪽에 컨텐츠 추가버튼과 컨텐츠 목록라인이 활성화되고 장면 편집창에 아까 업로드한 배경 이미지가 장면의 배경으로 쏙~ 들어가 있을거에요~

 

 

만약 장면의 순서가 잘못 추가되어 있어도 걱정마세요. 이동을 원하는 장면을 클릭한 상태로 드래그해서 원하는 위치로 옮기면 돼요. 한번 직접 해보세요! 엄청 간단하답니다^^

저는 두번째에 있는 회색배경을 먼저 작업하기 위해 두번째 장면의 순서를 첫번째 장면과 바꿔보겠습니다.

 

 

 

쉽게 바뀌죠?

장면복사, 장면삭제도 엄~청 간단합니다. 위와 같이 장면 위에 마우스를  올리면 장면 썸네일 하단에 두 개의 아이콘이 보이시나요? 왼쪽 아이콘이 [장면복사], 오른쪽 아이콘이 [장면삭제] 버튼입니다. 삭제된 장면은 되돌릴수 없으니 삭제는 언제나 신중하게^^

 

<장면 복사>

 

장면복사를 하게 되면 복사한 장면의 바로 뒤로 복사된 새 장면이 나타납니다.
복사된 새 장면도 마찬가지로 드래그해서 쉽게 이동할 수 있으니 원하는 순서대로 나열해 주면 되요~ 간단하죠?^^

 

이제 작업 할 첫 번째 장면을 선택해 주세요~

 

 

4. 장면의 노출시간, 효과 옵션 설정

컨텐츠 목록에 보면 "background"라고 적힌 컨텐츠가 보이시나요?
바로 이 "background"라고 되어 있는 컨텐츠가 장면 추가 할 때 첨부했던 배경 이미지 입니다^^

바로 위 3번 설명에서 업로드 했던 장면(배경 이미지)이 해당 장면의 배경 이미지로 적용되어 나타나기 때문에 장면이 추가됨과 동시에 배경 컨텐츠가 생겨나는 것 입니다.

이 "background" 컨텐츠는 삭제 할 수 없고 이미지 교체만 가능하니 참고해 주세요~

 

※ 장면(배경 이미지)의 노출 시간 : 현재 장면에서 다음 장면으로 넘어가기까지의 화면에 노출되는 시간

※ 장면의 효과 : 현재 장면에서 다음 장면으로 넘어갈 때 나타나는 효과

 

 

< 배경 이미지 컨텐츠 설명 >

 

위의 이미지를 보시면 장면효과 설정 부분에 아직 아무런 효과를 지정하지 않았으니 “효과없음”이라고 나타나 있고, 장면의 배경 이미지이기 때문에 앞서 말씀드렸다시피 삭제를 할 수 없다는 아이콘 표시가 되어 있습니다. (휴지통 모양의 삭제 버튼 위에 빨간색 선)

대신, 장면을 생성한 뒤 슬라이드를 제작 중일 때나 혹은 슬라이드를 완성한 뒤에도 삭제버튼 왼쪽에 있는 톱니바퀴모양의 수정버튼을 눌러 장면(배경 이미지)의 이미지를 수정 할 수 있습니다^^

 

< 장면 효과 >

  

 

장면(배경 이미지)의 효과는 다음 장면으로 넘어갈 때, 현재의 장면이 사라지는 효과를 말합니다. 
위와 같이 다양한 효과들이 많이 있습니다~
하나하나 설정해 보고 마음에 드는 효과를 선택하시면 되고 만약 마음에 드는 효과가 없다면.... “효과없음” 을 선택하셔도 됩니다^^;

 

저는 블럭모자이크 효과를 선택해 보겠습니다~

 

 

장면효과 선택이 끝났으니 이제 장면의 노출 시간을 설정해 보도록 하겠습니다.

 

< 장면 노출 시간 설정 >

장면효과 설정하는 부분 밑에 시계모양 아이콘과 막대기가 보이죠? 이 부분이 장면 노출 시간을 설정하는 타이머 바입니다. (이 타이머 바는 "background"가 아닌 일반 컨텐츠에서만 타이머 설정이 가능하니 참고해 주세요^^)

장면의 노출시간을 나타내는 부분인데 현재는 이 장면이  5초동안 노출되도록 기본 설정값이 되어있습니다.

화살표를 위/아래로 눌러 노출시간을 변경하거나 직접 입력창에 입력하여 변경 할 수 있습니다.

장면의 노출 시간은 각 장면마다 다르게 설정 할 수 있습니다~ 

참고로 저는 장면뿐만 아니라 나중에 추가 될 각각의 컨텐츠의 노출(딜레이) 시간 간격을 조절 할 예정입니다^^

저는 7초로 변경해서 만들어 보겠습니다. 아래의 이미지를 참고해 주세요.

 

 

 

 

여기서 잠깐 짚고 넘어가야 할 사항이 있습니다!

효과를 변경하고 나니 저장버튼이 빨간색으로 변했죠?

컨텐츠가 추가되거나 설정값이 하나라도 변경되면 자동으로 파란색이었던 [저장하기] 버튼이 빨간색으로 변합니다. 열심히 추가하고 변경한 설정값이 있는데 까먹고 저장하지 않고 다른 장면으로 넘어가게 되거나 하면 실컷 작업해놨던 내용물이 사라지게 되겠죠? 그렇게되면 너무나 허무하고 속상하잖아요?ㅠㅠ 그래서 이런 상황을 방지하고자 "변경된 내용이 있으니 반드시 저장을 해주세요~" 라고 알려주는 장치입니다^^

하나 수정할 때 마다 저장버튼을 누르면 많이 번거로우실 거에요. 하지만 수시로 눌러서 저장해 주면 열심히 작업 해놓은 내용을 잃는 것을 예방 할 수 있으니 수시로 저장하는 습관을 가지도록 합시다~^^

 

※ 작업 중 조심하셔야 하는 행동들이 있습니다~

- 슬라이드를 만들다 저장버튼을 누르지 않고 창을 닫는 경우
- 작업 중이던 슬라이드 마법사를 저장하지 않은 채 새로운 프로젝트의 슬라이드 마법사를 실행시킬 경우
  (슬라이드 마법사는 하나 이상 실행되지 않기 때문에 작업했던 내용을 모두 잃을 수 있으니 조심해야 해요!)

 

※ [저장하기] 버튼은 각 장면당 저장하는 기능이지 다른 장면까지 다 포함해서 일괄 저장시켜주는 기능은 아니니 반드시 장면마다 개별 저장해 주셔야 합니다!


변경한 효과를 저장한 후 왼쪽 하단에 있는 [미리보기] 버튼을 눌러 변경한 효과를 확인해 주세요.
 

* 장면 효과별 추가설명은 여기로~

 

5. 미리보기 화면 확인

설정한 효과가 잘 적용되었는지 한번 확인해봐야겠죠~?

왼쪽 컨텐츠 목록 라인 하단에 있는 미리보기 버튼을 눌러주세요^^

 

 

그럼 이렇게 미리보기 창이 나타나고 슬라이드가 재생됩니다^^

 

 

재생되는 슬라이드를 확인해보시면 좀 전에 설정했던대로 다음 장면으로 넘어갈 때 블럭모자이크 효과가 적용되었고, 4번 설명에서 설정했던 기본옵션값(방향 네비게이션 / 페이지 네비게이션 / 타이머바)이 적용된 것까지 확인했어요~

아래 장면수/ 장면이동버튼은 장면을 이전/다음으로 빠르게 이동 또는 여러장의 장면일 경우 원하는 장면으로 쉽게 이동할 수 있도록 도와줍니다^^

 

 

여기까지하면 장면(배경 이미지)에 대한 설정이 끝났습니다. 이제 각 장면에 다양한 컨텐츠들을 넣을 차례에요~

컨텐츠 추가에 대한 설명은 다음 글을 통해 확인해 주세요~^^!

 

☞ 슬라이드 장면에 컨텐츠 추가하기

댓글[0]

열기 닫기