AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.
눈 효과 예시
입자 효과 구성요소를 사용하는 방법:
-
구성요소 패널에 이어 그래픽 및 효과 폴더를 엽니다.
-
'입자 효과'
구성요소를 더블클릭하거나 스테이지로 드래그합니다.
-
스테이지에서 구성요소를 더블클릭하거나 '설정...'
버튼(속성 패널에 있음)을 클릭합니다. 입자 효과 대화상자가 열립니다.
-
레이어로 포함할 이미지를 라이브러리 패널에서 레이어 패널로 드래그합니다. 다른 이미지를 추가하려면 패널 하단에서 이미지 추가
버튼을 클릭합니다.
-
하단의 '사전 설정' 패널에서 원하는 효과를 선택한 다음 스테이지로 드래그하거나 위에 표시되는 추가
버튼을 클릭합니다.레이어 재정렬
레이어 순서는 중첩 시의 스택 방식을 결정합니다. 레이어 스택 순서를 변경하는 방법은 다음과 같습니다.
- 스테이지의 구성요소를 더블클릭하거나 '설정...'
- '레이어' 패널에서 레이어를 새 위치로 드래그합니다.
레이어 위치 변경
효과의 이미지나 입자 발생 영역을 이동할 수 있습니다. 단, 효과가 구성요소의 경계 내에 머물러야 합니다. 레이어를 이동하는 방법은 다음과 같습니다.
- 스테이지의 구성요소를 더블클릭하거나 '설정...'
- 이동할 레이어를 선택합니다. 이미지 또는 효과의 입자 발생 영역 주변에 경계 상자가 표시됩니다. 여러 레이어를 선택하여 동시에 이동할 수도 있습니다.
- 다음 방법 중 하나를 사용합니다.
- 스테이지에서:
- 레이어를 새 위치로 드래그합니다.
- 화살표 키를 사용하여 레이어를 한 번에 1픽셀씩 이동합니다. Shift 키를 누른 상태에서 화살표 키를 누르면 레이어를 화살표 방향으로 10픽셀씩 이동할 수 있습니다.
- 속성 패널에서:
- 이미지의 경우 상단 및 왼쪽 위치 속성을 수정합니다.
- 효과의 경우 고급 속성을 펼쳐 X 방출 및 Y 방출 값을 수정합니다. 크기 변경 없이 입자 발생 영역을 이동하려면 고정된 상태 유지
옵션을 설정합니다.
- 스테이지에서:
레이어 크기 변경
효과의 이미지나 입자 발생 영역의 크기를 변경할 수 있습니다. 단, 효과가 구성요소보다 넓거나 높으면 안 됩니다. 효과의 경우 입자 발생 영역의 크기를 변경할 수 있습니다. 레이어 크기를 변경하는 방법은 다음과 같습니다.
- 스테이지의 구성요소를 더블클릭하거나 '설정...'
- 크기를 조절하려는 레이어를 선택합니다. 이미지 또는 효과의 입자 발생 영역 주변에 경계 상자가 표시됩니다. 여러 개의 레이어를 선택할 수도 있습니다.
- 다음 방법 중 하나를 사용합니다.
- 스테이지에서: 경계 상자 측면과 모서리에서 제어 핸들을 드래그합니다.
- 속성 패널에서:
- 이미지의 경우 너비 및 높이 속성을 수정합니다.
- 효과의 경우 고급 속성을 펼쳐 X 방출 및 Y 방출 값을 수정합니다. 고정된 상태 유지
옵션이 사용 중지되어 있는지 확인합니다.
레이어 삭제
구성요소에서 레이어를 삭제하는 방법은 다음과 같습니다.
- 스테이지의 구성요소를 더블클릭하거나 '설정...'
- 레이어 패널에서 삭제할 레이어를 선택합니다.
- Delete 키를 누르거나 패널 하단에서 레이어 삭제
버튼을 클릭합니다.
레이어 숨김 및 표시
다른 레이어 작업이 용이하도록 레이어를 숨길 수 있습니다. 숨긴 레이어는 미리보기 또는 게시된 파일에 표시되지 않습니다. 레이어를 숨기거나 표시하는 방법은 다음과 같습니다.
- 스테이지의 구성요소를 더블클릭하거나 '설정...'
- 숨기거나 표시할 레이어의 모든 레이어 숨기기
아이콘 밑에 있는 상자를 클릭합니다.
속성
전체 구성요소의 속성과 함께 구성요소 내에 포함된 각 효과의 속성도 구성할 수 있습니다.
입자 효과 구성요소 속성
속성 |
설명 |
|---|---|
| 이름 | 입자 효과 구성요소의 이름을 설정합니다. |
| 자동재생 |
선택하면 구성요소 로드 시 애니메이션이 자동으로 재생됩니다. 참고: 개별 효과에도 자동재생 속성이 있습니다. |
| 애니메이션 제한 설정 | 선택한 경우 지정된 시간(초)이 지나면 애니메이션 재생이 중단됩니다. |
각 효과의 속성
입자 효과 대화상자에서 각 효과와 관련된 속성에 액세스할 수 있습니다. 스테이지에서 입자 효과 구성요소를 더블클릭하거나 속성 패널에서 '설정...' 을 클릭하여 대화상자를 연 다음, 속성을 확인할 효과를 선택합니다.
사전 설정
각 사전 설정에는 기본 속성 모음이 있으며, 사전 설정 드롭다운을 마우스 오른쪽 버튼으로 클릭하고 재설정을 선택하여 속성 모음을 복원할 수 있습니다. 다른 사전 설정을 선택하면 새로운 사전 설정에 대해 아래 속성이 기본값으로 재설정됩니다.
Google Web Designer에는 여러 사전 설정이 기본으로 제공됩니다. 또한 나만의 사전 설정을 저장한 다음 다른 컴퓨터에서 사용할 수 있도록 내보내고 가져올 수 있습니다(맞춤 사전 설정 참조).
속성 |
설명 |
|---|---|
| ID | 이벤트에서 효과를 참조하기 위한 효과 ID입니다. |
| 숫자 | 이 효과의 애니메이션이 정지되거나 연속 재생되지 않을 때 생성되는 입자의 총 개수입니다. |
| 크기 | 초기의 입자 크기 범위입니다. 최소 및 최대 픽셀 수를 지정하세요. |
| 스프라이트 | 입자 모양입니다. |
| 색상 | 시작 및 종료 색상입니다. |
| 불투명도 | 최소 및 최대 시작 불투명도입니다. 0은 투명, 1은 불투명입니다(반투명의 경우 소수 값 사용). |
| 속도 | 최소 및 최대 시작 속도입니다. |
| 방향 |
입자 이동 방향의 최소 및 최대 각도입니다. 원에서도 컨트롤을 사용하여 각도 범위를 설정할 수 있습니다. |
| 고급 | |
| X 방출 |
입자가 생성되는 최소 및 최대 X 좌표입니다. 픽셀이나 백분율로 지정됩니다. 고정된 상태 유지 |
| Y 방출 |
입자가 생성되는 최소 및 최대 Y 좌표입니다. 픽셀이나 백분율로 지정됩니다. 고정된 상태 유지 |
| 크기 비율 | 픽셀로 지정되는 크기 변경 비율입니다(소수 값 유효). 음수 값의 경우 입자가 축소합니다. |
| 무작위 색상 | 선택하면 초기 입자 색상이 시작 색상과 종료 색상 사이에서 무작위로 설정됩니다. |
| 색상 비율 | 색상이 시작 색상에서 종료 색상으로 변경되는 비율입니다. 이 속성은 무작위 색상을 선택하면 사용 중지됩니다. |
| 불투명도 비율 | 불투명도 변경 비율입니다. 음수 값을 지정하면 입자가 투명 상태로 변합니다. |
| 자동재생 | 선택하면 구성요소가 재생되기 시작할 때 효과의 애니메이션도 재생됩니다. 아니면 이벤트로 애니메이션을 실행하는 방법도 있습니다. |
| 반복 | 선택하면 이 효과의 애니메이션이 계속해서 재생됩니다. 선택하지 않으면 지정된 총 입자 수가 생성된 후에 애니메이션이 종료됩니다. |
| 방출 간격 | 새 입자가 생성되는 시간 간격입니다. |
| 앞으로 건너뛰기 | 입자가 지정된 비율로 생성되는 시점에 애니메이션이 재생됩니다. |
| 가속 | 입자 이동의 수평 및 수직 가속입니다. |
| 난류 | |
| 빈도 | 입자 이동에 영향을 미치는 난류의 빈도입니다. 값이 높을수록 각 입자 경로에 불규칙성이 발생하는 빈도가 증가합니다. |
| 강도 | 난류의 강도입니다. 0으로 설정하면 난류가 없습니다. |
| 강도 변화 속도 | 난류 강도가 변화하는 속도입니다. |
| 흔적 | 입자가 이동 경로를 따라 남긴 흔적의 길이입니다. 1로 설정하면 흔적이 남지 않습니다. |
특히 흔적을 길게 설정할 경우 난류로 인해 광고나 웹페이지 성능이 저하될 수 있습니다.
맞춤 사전 설정
속성 모음을 맞춤 사전 설정으로 저장하여 다시 사용할 수 있습니다.
새 맞춤 사전 설정 저장
- 기존 사전 설정의 속성을 조정합니다.
- 하단의 사전 설정 패널에서 사전 설정으로 저장
버튼을 클릭합니다. 스테이지에서 효과를 마우스 오른쪽 버튼으로 클릭하거나 속성 패널에서 사전 설정 드롭다운을 마우스 오른쪽 버튼으로 클릭합니다.
- 새로운 사전 설정의 고유한 이름을 입력한 다음 Enter 키를 누르거나 '확인'을 클릭합니다.
이제 속성 패널의 드롭다운 목록과 맞춤 사전 설정 아이콘으로 표시된 사전 설정 패널에서 사전 설정을 사용할 수 있습니다.
맞춤 사전 설정 이름 변경
- 사전 설정 패널에서 사전 설정을 마우스 오른쪽 버튼으로 클릭하고 이름 바꾸기...를 선택합니다.
- 새 이름을 입력한 다음 Enter 키를 누르거나 '확인'을 클릭합니다.
맞춤 사전 설정 삭제
- 사전 설정 패널에서 사전 설정을 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택합니다.
- '확인'을 클릭하여 삭제를 확인합니다.
맞춤 사전 설정 내보내기
다른 Google Web Designer 사용자와 공유하기 위해 사전 설정을 내보낼 수 있습니다.
- 사전 설정 패널에서 사전 설정을 마우스 오른쪽 버튼으로 클릭하고 내보내기...를 선택합니다.
- 내보내기 파일의 대상 폴더를 선택합니다.
내보낸 .zip 파일의 이름은 해당 사전 설정의 이름과 동일합니다.
맞춤 사전 설정 가져오기
맞춤 사전 설정의 내보내기 파일이 있으면 Google Web Designer의 인스턴스로 가져올 수 있습니다.
- 사전 설정을 가져올 컴퓨터에 내보낸 .zip 파일을 복사합니다.
- 컴퓨터에서 Google Web Designer의 입자 효과 대화상자를 엽니다.
- 사전 설정 패널의 사전 설정 가져오기
버튼을 클릭합니다.
- 내보낸 맞춤 사전 설정의 .zip 파일을 선택합니다.
가져온 사전 설정은 속성 패널의 드롭다운 목록과 사전 설정 패널에 표시됩니다.
이벤트 및 동작
입자 효과 구성요소에 의해 전송된 이벤트다음과 같은 입자 효과 구성요소를 기반으로 다른 동작을 실행할 수 있습니다.
| 이벤트 | 설명 |
|---|---|
| 시간 제한에 도달 | 애니메이션 재생이 지정된 시간 제한에 도달하면 전송됩니다. |
다른 이벤트에 대한 반응으로 다음과 같은 입자 효과 구성요소 동작이 실행될 수 있습니다.
- 재생
- 일시중지
- 정지
이벤트 대화상자에서 이러한 동작 중 하나를 선택할 때 입자 효과 구성요소 또는 특정 효과를 '수신자'로 설정하세요.
이벤트 구성 방법 알아보기
미리보기
입자 효과 대화상자에서 작업하는 동안 '디자인' 탭에는 구성요소가 어떻게 보이는지 보여주는 정적 스냅샷이 표시됩니다.
현재 설정에서 애니메이션을 보려면 '미리보기' 탭으로 전환하세요. 미리보기가 재생되는 동안 속성을 수정하면 변경사항이 즉시 적용됩니다.
대화상자 하단에서 저장을 클릭한 후 미리보기 버튼을 클릭하여 원하는 브라우저에서 문서 미리보기를 할 수도 있습니다.