마스크 정보

마스크는 형태나 투명도에 따라 호스트 요소의 일부를 숨깁니다. 호스트 요소는 이미지, div, 텍스트 컨테이너, 구성요소가 될 수 있습니다.

각 요소에는 하나의 마스크만 포함할 수 있지만 div의 호스트 요소를 래핑하고 마스크를 컨테이너 div에 적용하여 마스크를 레이어할 수 있습니다. 호스트 요소 내에서 다른 요소를 중첩하고 하위 요소에 마스크를 추가할 수도 있습니다.

페이지 주제:

마스크 유형
마스크 선택
마스크 수정
마스크 애니메이션
반응형 레이아웃의 마스크

마스크 유형

이미지 마스크
그래디언트 마스크
클립 경로 마스크

브라우저 호환성

Microsoft Edge 버전 40 이하에서는 직사각형 클립 경로 마스크만 지원합니다. 다른 마스크 유형과 형태는 무시됩니다.

이미지 마스크

이미지 마스크는 이미지의 투명 영역을 사용하여 호스트 요소를 숨깁니다.

이미지 마스크를 추가하려면 다음 단계를 따르세요.

마스킹할 요소를 마우스 오른쪽 버튼으로 클릭합니다.
팝업 메뉴에서 이미지 마스크 추가...를 선택합니다.
마스크로 사용할 이미지를 가져오거나 선택합니다.

선택 도구 또는 속성 패널을 사용하여 마스크의 크기와 위치를 조정할 수 있습니다.

참고: 이미지 마스크에서는 비율 기반 위치 지정을 사용할 수 없습니다.

그래디언트 마스크

그래디언트 마스크는 투명도 수준의 그래디언트에 따라 호스트 요소를 숨깁니다.

Google Web Designer에서는 마스크에 사용되는 두 가지 유형의 그래디언트를 모두 지원합니다.

선형 그래디언트
방사형 그래디언트

그래디언트 마스크를 추가하는 방법은 다음과 같습니다.

마스킹할 요소를 마우스 오른쪽 버튼으로 클릭합니다.
팝업 메뉴에서 그래디언트 마스크 추가를 선택합니다.
속성 패널에서 그래디언트 견본을 클릭하여 그래디언트 유형, 색상, 불투명도 및 각도(선형 그래디언트에만 해당)를 맞춤설정합니다.

기본적으로 그래디언트 마스크는 호스트 요소와 크기가 동일하지만, 선택 도구 또는 속성 패널을 사용하여 마스크의 위치와 크기 속성을 조정할 수 있습니다.

참고: 그래디언트 마스크에서는 비율 기반 위치 지정을 사용할 수 없습니다.

클립 경로 마스크

클립 경로 마스크는 기하학 도형을 사용하여 호스트 요소의 어떤 부분을 표시할 것인지를 정의합니다.

팝업 메뉴가 표시될 때까지 툴바에서 클립 경로 마스크 도구를 길게 클릭하여 마스크 모양 유형을 선택할 수 있습니다.

직사각형 마스크(기본값)
타원형 마스크
다각형 마스크

브라우저 호환성

Internet Explorer 및 Microsoft Edge에서는 위치와 크기가 픽셀로 지정된 직사각형 모양의 클립 경로 마스크만 지원합니다. 모서리가 둥근 직사각형 마스크를 비롯한 비율 기반 마스크 및 기타 마스크 모양은 무시됩니다.
Firefox 및 Safari에서는 모서리 반경 값이 마스크 크기보다 큰 경우 모서리가 둥근 직사각형 마스크를 올바르게 렌더링하지 않을 수 있습니다.
Safari에서는 직사각형 도구를 사용하여 그린 모양의 클립 경로 마스크를 지원하지 않습니다. 이 문제를 해결하려면 div 요소를 직사각형 모양 대신 사용하고 div 요소에 마스크를 배치하세요.
Chrome 및 Opera에서는 호스트 요소에 3D 전환 하위 요소가 포함되어 있으면 클립 경로 마스크가 올바르게 렌더링되지 않습니다.
비율 기반 반경을 사용하여 설정한 모서리가 둥근 직사각형 마스크는 여러 브라우저에서 약간씩 다르게 렌더링될 수 있습니다.

클립 경로 마스크를 추가하려면 다음 단계를 따르세요.

마스킹하려는 요소를 선택합니다.
원하는 형태의 마스크 도구를 선택합니다.
마스크 모양에 추가 옵션을 설정합니다.
- 직사각형 마스크만: 모서리가 둥근 경우 상단의 도구 옵션 막대에서 모서리 반경을 설정합니다. 네 개의 모서리 모두에 동일한 반경을 사용하려면 '동일하게 유지' 버튼을 사용합니다.
- 다각형 마스크만: 상단의 도구 옵션 막대에서 원하는 모양을 선택합니다. 직접 모양을 그리려면 '자유 형식' 옵션을 사용합니다. 일반 다각형 옵션을 선택하는 경우에는 원하는 다각형의 면 개수를 입력합니다.
호스트 요소 위에 마스크를 그립니다.
- Shift 키를 길게 누른 상태에서 그리면 마스크가 제한되어 동일한 너비 및 높이를 지니게 됩니다. Shift 키는 자유 형식 마스크나 미리 설정된 특정 모양(삼각형, 마름모, 오각형, 육각형 및 별 모양 등 면의 길이가 항상 동일하게 그려짐)에는 영향을 미치지 않습니다.
- 처음의 그리기 위치를 마스크의 중심점으로 사용하려면 Alt 키를 길게 누릅니다.

참고: 다각형 마스크를 그린 후에는 각 꼭짓점을 드래그하여 마스크 모양을 변경할 수는 있지만, 면 개수를 변경할 수는 없습니다.

다각형 마스크 모양

	자유 형식(직접 모양 그리기)
	일반 다각형(면 개수를 설정, 면이 동일한 길이로 그려짐)
	삼각형
	직사각형
	프레임
	마름모
	오각형
	육각형
	오른쪽 펼침 기호
	왼쪽 펼침 기호
	십자
	별 모양
	오른쪽 화살표
	왼쪽 화살표

마스크 선택

스테이지에서: 호스트 요소를 선택한 다음 마스크를 클릭합니다. 마스크는 녹색 윤곽선으로 표시됩니다.
고급 모드 타임라인에서: 호스트 요소 레이어 아래의 마스크 레이어를 선택합니다. 마스크 레이어는 레이어 이름 앞에 있는 기호로 표시됩니다.

고급 모드 타임라인에서 마스크 레이어를 숨기거나 잠그면 호스트 요소의 작업을 더 쉽게 할 수 있습니다.

여러 마스크 선택

고급 모드 타임라인에서 Ctrl 키를 누른 상태로 클릭하면 여러 개의 마스크 레이어를 선택하여 한 번에 삭제할 수 있습니다. 한 번에 두 개 이상의 마스크를 수정할 수는 없습니다.

마스크의 호스트 요소가 선택에 포함된 경우 요소와 마스크가 혼합되어 있는 항목만 삭제할 수 있습니다.

마스크 수정

스테이지에서 직접, 또는 속성 패널을 사용하여 마스크를 수정할 수 있습니다. 마스크의 CSS 속성은 CSS 패널에서 사용할 수 없습니다.

마스크는 다음과 같은 방법으로 수정할 수 있습니다.

마스크 잘라내기, 복사 및 붙여넣기
마스크 이동
마스크 크기 조절
마스크 회전
이미지 마스크의 소스 변경
그래디언트 마스크의 그래디언트 변경
직사각형 마스크의 모서리 곡률 변경
다각형 마스크의 모양 변경

마스크 잘라내기, 복사 및 붙여넣기

다음 방법을 사용하여 마스크를 잘라내거나 복사하여 다른 요소(다른 문서에도 가능)에 붙여넣을 수도 있습니다.

스테이지 또는 고급 모드 타임라인에서 작업하는 경우:
- 마스크를 마우스 오른쪽 버튼으로 클릭하고 잘라내기 또는 복사를 선택합니다.
- 마스킹할 요소를 마우스 오른쪽 버튼으로 클릭하고 붙여넣기 또는 마스크 바꾸기를 선택합니다.
고급 모드 타임라인에서:
- 마스크 레이어를 요소 레이어로 드래그하여 마스크를 다른 호스트 요소로 전환합니다(마스크를 바꿀 때는 불가능).
- Alt 키를 누른 상태에서 마스크 레이어를 드래그하여 마스크를 다른 요소에 복사합니다(마스크를 바꿀 때는 불가능).
단축키:
- 잘라내기 - Ctrl+X 키(Windows) 또는 ⌘+X 키(Mac)
- 복사 - Ctrl+C 키(Windows) 또는 ⌘+C 키(Mac)
- 붙여넣기 - Ctrl+V 키(Windows) 또는 ⌘+V 키(Mac)
메뉴 명령:
- 수정 > 잘라내기
- 수정 > 복사
- 수정 > 붙여넣기 또는 마스크 바꾸기

모든 마스크 애니메이션도 붙여 넣을 수 있습니다.

마스크를 복사하여 붙여 넣을 때의 제한사항

잘라내거나 복사할 마스크와 마스크를 붙여넣을 요소는 하나씩만 선택할 수 있습니다.
이미 마스크가 있는 요소에 마스크를 붙여넣으면 기존 마스크가 바뀝니다.
미디어 규칙에서는 마스크를 잘라내거나 복사하거나 붙여넣을 수 없습니다.

마스크 이동

이동하려는 마스크를 선택하고 다음 방법 중 하나를 사용합니다.

속성 패널에서 상단 및 왼쪽 위치 속성을 수정합니다. 이 값은 호스트 요소의 왼쪽 상단을 기준으로 합니다.
화살표 키를 사용하여 마스크를 한 번에 1픽셀씩 이동합니다. Shift 키를 누른 상태에서 화살표 키를 눌러 마스크를 10픽셀씩 이동할 수 있습니다.
선택 도구 를 사용하여 마우스로 마스크를 드래그합니다. Shift 키를 누른 상태에서 드래그하면 마스크가 하나의 축만을 기준으로 이동합니다.

마스크는 호스트 요소의 경계 외부에 배치될 수도 있습니다.

참고: 이미지 마스크 및 그래디언트 마스크에서는 비율 기반 위치 지정을 사용할 수 없습니다.

마스크 크기 조절

크기를 조절할 마스크를 선택하고 다음을 수행합니다.

속성 패널에서 너비 및 높이 속성을 수정합니다.
상단의 도구 옵션 막대에서 변환 컨트롤 옵션을 사용 설정한 상태에서 선택 도구 를 사용합니다.
- 가로세로 비율을 유지하려면 Shift 키를 누른 상태에서 드래그합니다.
- 중심점을 변경하지 않고 마스크의 크기를 조절하려면 Alt(Windows) 키 또는 option(Mac) 키를 누른 상태에서 드래그합니다.

마스크 회전

마스크는 직접 회전할 수 없지만 마스크를 추가하기 전에 다음 단계를 실행하면 같은 효과를 얻을 수 있습니다.

마스킹할 요소를 래핑합니다.
컨테이너 div에 마스크를 추가합니다.
컨테이너 div를 회전합니다. 마스크도 회전하게 됩니다.
원본 요소를 반대 방향으로 회전합니다.

이미지 마스크의 소스 변경

다음 단계에 따라 이미지 마스크에 사용된 이미지를 교체할 수 있습니다.

마스크를 선택합니다.
속성 패널에서 소스 필드의 이미지 마스크 설정 버튼을 클릭합니다.
라이브러리에서 이미지를 선택하거나 애셋 가져오기 버튼을 클릭하여 다른 이미지를 사용합니다.
확인을 클릭합니다.

그래디언트 마스크의 그래디언트(경사) 변경

그래디언트 마스크에 사용되는 그래디언트를 맞춤설정할 수 있습니다.

마스크를 선택합니다.
속성 패널에서 그래디언트 견본을 클릭합니다.
그래디언트를 수정합니다.
- 그래디언트 유형: 선형 그래디언트 또는 방사형 그래디언트 버튼을 선택합니다.
- 전환 거리: 그래디언트 막대 상단을 따라 투명도 마커를 드래그하여 전환 거리를 변경합니다.
- 투명도: 투명도 마커는 그래디언트를 따라 특정 지점의 불투명도 수준을 설정합니다. 100%는 호스트 요소가 완전히 표시되는 것을, 0%는 호스트 요소가 완전히 숨겨지는 것을 나타냅니다. 오른쪽에 있는 비율 필드에서 투명도 마커를 클릭하여 불투명도 수준을 수정합니다.
- 추가 투명도 마커: 투명도 마커를 추가하려면 그래디언트 막대를 클릭합니다. 투명도 마커를 제거하려면 아래쪽으로 드래그합니다.
- 각도: 선형 그래디언트의 경우 각도를 조정할 수 있습니다.
- 기본값: '기본 그래디언트' 버튼을 클릭하여 그래디언트를 기본 설정으로 재설정합니다(90도에서 0%~100%의 선형 그래디언트).

직사각형 마스크의 모서리 곡률 변경

직사각형 마스크의 모서리를 직각으로 또는 둥글게 변경하고 둥근 모서리의 곡률 반경을 조정할 수 있습니다.

마스크를 선택합니다.
'속성' 패널에서 모서리 반경을 픽셀 또는 비율로 조정합니다. 반경을 0으로 설정하면 모서리가 직각이 됩니다.
'동일하게 유지' 버튼이 활성화된 경우 같은 값이 네 개의 모서리 모두에 적용됩니다. 각 모서리를 따로 구성하려면 버튼을 비활성화합니다.

다각형 마스크의 모양 변경

스테이지에서 다각형 마스크의 모양을 조정할 수 있습니다.

마스크를 선택합니다.
툴바에서 다각형 마스크 도구를 선택합니다. 핸들은 각 꼭짓점에 표시됩니다.
각 꼭짓점을 원하는 위치로 드래그합니다.
- 하나의 축(가로 또는 세로)만 따라서 꼭짓점을 움직이려면 Shift 키를 누른 상태에서 드래그합니다.

참고: 기존 다각형 마스크의 면 개수는 변경할 수 없습니다.

마스크 애니메이션

마스크의 크기와 위치에 애니메이션을 적용할 수 있습니다. 공개 범위를 사용하여 마스크가 표시되거나 사라지는 시점을 제어할 수도 있습니다. 마스크 애니메이션은 호스트 요소의 애니메이션과 무관합니다.

직사각형 마스크의 경우 둥근 모서리에 애니메이션을 적용할 수 있습니다. 다각형 클립 경로 마스크의 경우 키프레임에서 꼭짓점의 위치를 변경하여 마스크의 모양(면의 개수 아님)에 애니메이션을 적용할 수도 있습니다.

마스크는 여러 프레임에서 수정할 수 없습니다. 한 번에 하나의 키프레임을 선택하여 마스크 애니메이션을 수정하세요.

참고: 이미지 마스크에 느린 속도로 애니메이션을 적용하면 키프레임 간의 소수 픽셀 값은 반올림되므로 지터링 효과가 나타날 수 있습니다.

브라우저 호환성

문서에 전환 갤러리, 이미지 효과 또는 입자 효과 구성요소 등을 위한 <canvas> 요소가 포함되어 있으면 클립 경로 마스크 애니메이션이 Safari에서 재생되지 않습니다.

반응형 레이아웃의 마스크

미디어 규칙을 사용하면 특정 표시 영역 크기 범위에 맞게 마스크 속성과 애니메이션을 재정의할 수 있습니다. 이미지 마스크의 경우 소스를 재정의하여 다른 이미지를 사용할 수도 있습니다. 그래디언트 마스크의 경우 그래디언트를 변경할 수 있습니다.

참고: 위치 또는 크기 속성에 대한 재정의를 제거하면 두 위치 속성(상단 및 왼쪽) 또는 두 크기 속성(너비 및 높이)이 자동으로 재설정됩니다. 클립 경로 마스크의 경우 모든 위치 및 크기 속성이 재설정됩니다.

도움이 되었나요?

어떻게 하면 개선할 수 있을까요?