마스크

시작하기 전에

이 기능을 사용할 수 있는 사람

모든 팀 또는 요금제의 누구나

Figma Design 파일에 대한 편집 액세스 권한이 있는 사용자라면 누구나 마스크 사용 가능

마스크를 사용하여 개체의 특정 영역을 표시하고 나머지는 숨길 수 있습니다.

작은 입구가 있는 프레임 안에 사진을 넣는 것과 같습니다. 입구를 통해 사진의 일부가 드러나고 나머지는 크기에 맞춰 자를 필요 없이 감춰집니다.

이 과정에서 마스킹된 레이어의 어떤 부분도 수정되거나 삭제되지 않으므로 마스크는 비파괴적 조치입니다. 이것은 크기에 맞추기 위해 잘라낼 필요 없이 숨겨진 영역을 보존할 수 있도록 합니다.

마스크 작동 원리

모든 레이어는 벡터 도형, 텍스트 레이어, 투명 채널이 있는 이미지, 그룹 등과 함께 마스크로 사용할 수 있습니다.

레이어를 마스크로 사용할 때 마스크 개체가 생성되며, 이는 마스크와 마스킹되고 있는 모든 레이어를 포함합니다. 레이어 섹션의 왼쪽 탐색 패널에서 마스크 개체를 식별할 수 있습니다. 마스크 아이콘은 마스크와 마스킹되고 있는 레이어에 따라 위로 향하는 화살표로 마스크를 식별합니다.

마스크는 z축에서 마스킹된 레이어 아래에 위치합니다. 마스크는 다음에 다다를 때까지 그 위의 모든 형제 요소에 영향을 줍니다.

• 다른 마스크나 마스크 개체
• 마스크의 부모 프레임 또는 그룹
• 콘텐츠가 숨겨진 프레임이나 컴포넌트

부모, 형제, 자식 관계에 대해 자세히 알아보세요.

아래 예시에서 보라색 타원이 마스크 역할을 합니다. 마스크가 z축에서 사람의 이미지 아래에 놓이면 성공적으로 이미지를 마스킹합니다. 마스크가 이미지 위에 있는 경우 마스킹되지 않습니다.

마스크 유형

알파

Figma의 모든 마스크는 알파 채널을 지원합니다. 알파 채널은 색상, 이미지 또는 개체의 투명도 또는 불투명도를 나타냅니다.

알파 마스크로 작업할 때, 마스크는 마스크의 불투명도를 기준으로 적용됩니다. 불투명도가 높을수록 더 많이 드러납니다. 불투명도가 0%이면 아무것도 드러나지 않습니다.

이는 마스크에서 흐림과 불투명도를 활용할 수 있음을 의미합니다.

• 투명도(알파 채널)가 있는 기존 PNG, GIF, WebP 파일 가져오기
• 레이어 흐림 효과를 사용하여 깃털 효과 재현하기
• 깊이를 더하기 위해 드롭 및 안쪽 그림자 적용하기
• 다양한 불투명도로 채우기, 외곽선 및 그레이디언트 추가하기

아래 예시에서는 외곽선 스트로크가 있는 타원을 마스크로 사용했습니다. 타원의 채우기 불투명도는 100%이고, 외곽선의 불투명도는 30%입니다. 마스크의 불투명도가 더 높기 때문에(100%), 이미지의 중심에서 더 많이 드러납니다.

벡터

벡터 마스크 또는 도형 윤곽선을 마스크로 사용하는 경우, 마스크의 채우기나 외곽선의 불투명도 값이 0% 이상일 때 반투명성을 무시합니다. 마스크가 0% 이상의 불투명도를 가진 영역을 포함하고 있으면 그 윤곽선이 마스크로 사용되고 전체 마스크는 100% 불투명도를 갖습니다.

아래의 예시에서는 완전히 투명한 배경을 가진 하트 이미지가 마스크로 사용되고 있습니다. 왼쪽 아래의 개체는 알파 마스크를 사용하고 있어 하트의 윤곽선을 볼 수 있습니다. 오른쪽 아래의 개체는 벡터 마스크를 사용하며, 전체 이미지의 윤곽선을 마스크로 사용합니다.

휘도

휘도를 사용하여 마스크를 결정할 수 있습니다. 마스크의 밝은 부분이 더 많이 드러나며, 즉 마스크된 레이어의 불투명도가 높습니다.

영역이 어두울수록 덜 드러납니다. 마스크를 검은색으로 채우거나 #000000이면 아무것도 드러나지 않으며, 마스킹된 레이어는 불투명도 0%로 렌더링됩니다.

마스크 만들기 및 편집

마스크 만들기

1. 사용하고자 하는 개체를 선택하고 z축에서 마스크될 모든 개체 뒤에 배치합니다.
2. 마스크 개체의 일부가 될 모든 레이어를 선택하빈다.
3. 오른쪽 사이드바에서 더 많은 옵션 > 마스크로 사용을 선택하거나 아래를 누릅니다.
   
   • Mac: ⌃ Control ⌘ Command M
   • Windows: Ctrl Alt M

   참고: 레이어가 하나만 선택되어 있는 경우, 오른쪽 사이드바에서 마스크로 사용을 직접 선택하세요.

4. Figma는 선택된 모든 레이어로 마스크 그룹을 만듭니다.
5. 기본적으로 마스크 유형이 알파로 설정됩니다. 변경하려면 마스크로 사용 중인 레이어를 선택하고 오른쪽 사이드바의 마스크 섹션에서 드롭다운을 엽니다. 캔버스에서 미리보기를 위해 옵션에 마우스 커서를 올립니다. 마스크 유형에 대해 자세히 알아보세요.

기존 마스크 개체에 레이어를 추가하려면, 레이어 패널에서 마스크 개체로 클릭하고 드래그합니다.

레이어 재정렬에 대해 자세히 알아보세요.

크기 조정 및 이동

마스크와 마스킹된 레이어는 서로 독립적으로 이동하고 크기가 조정됩니다. 마스크를 이동하거나 크기 조정할 때, 마스킹된 레이어는 영향을 받지 않으며 그 반대도 마찬가지라는 것을 의미합니다.

이는 서로 형제 관계에 있기 때문에, 마스크는 프레임, 그룹 또는 컴포넌트가 가질 수 있는 부모 행동이 없기 때문입니다.

부모, 형제, 자식 관계에 대해 자세히 알아보세요.

마스크 제거

개체를 마스크로 사용하는 것을 중지하려면 다음 방법 중 하나를 사용하여 비활성화합니다.

• 마스크를 선택하고 오른쪽 사이드바에서 아이콘을 클릭합니다.
• 마스크를 마우스 오른쪽 버튼으로 클릭하고 마스크 제거를 선택합니다.
• 마스크를 선택하고 키보드 바로가기를 사용합니다.
  • Mac: ⌃ Control ⌘ Command M
  • Windows: Ctrl Alt M

마스크로 숨겨진 부분이 다시 나타납니다.

마스크 윤곽선 드러내기

기본적으로 Figma는 마스크의 경계를 보여주지 않습니다. 복잡한 마스크를 작업하거나 의도치 않은 빈 공간이 있는지 확인할 때 마스크 윤곽선을 사용하세요.

마스크 윤곽선 전환을 위해:

1. Figma 메뉴를 엽니다.
2. 보기 > 마스크 윤곽선으로 이동합니다.

설정이 켜지면, 파일의 마스크는 녹색으로 윤곽선이 표시됩니다.