모양이 적용된 마스크를 만드는 방법에 대해 알아봅니다.
XD의 마스크

마스크를 사용하여 이미지 또는 오브젝트의 일부를 자르고 디자인의 특정 요소에 중점을 둔 결과를 만들어 낼 수 있습니다. 

마스킹을 활용하는 사례 중 일부는 아래와 같이 프로필 아바타를 만들거나 다크 모드 경험을 시뮬레이트하는 것입니다.

원 안의 프로필 사진
모바일 애플리케이션에서의 프로필 아바타
다크 모드 경험을 시뮬레이트하기 위해 애니메이션이 적용된 마스크
다크 모드 경험을 시뮬레이트하기 위해 애니메이션이 적용된 마스크

마스크 효과를 만들거나, 편집하거나, 제거하는 방법을 살펴보시겠습니까? 다음 단계를 따르십시오.

  1. 마스크로 사용하려는 모양을 그린 다음 유지하려는 이미지의 부분에 배치합니다. 이미지와 모양을 선택합니다. 

  2. 오브젝트 > 모양으로 마스크를 선택(MacOS)하거나 선택한 콘텐츠를 마우스 오른쪽 버튼으로 클릭하고 모양으로 마스크를 선택(Windows)합니다. 모양의 바깥쪽인 이미지 또는 드로잉의 부분에 마스크가 적용됩니다.

    1
  3. 마스크 모양 내에서 콘텐츠를 편집하려면 마스크가 적용된 콘텐츠를 더블 클릭합니다. 마스크가 적용된 영역은 프로젝트에서 삭제되지 않습니다. 마스크를 다시 조정하여 이미지의 다른 부분을 강조할 수 있습니다.

  4. 마스크를 비활성화하거나 제거하려면 해당 오브젝트를 선택하고 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Ctrl 키를 누른 상태로 클릭(Mac)하고 컨텍스트 메뉴에서 마스크 그룹 해제를 선택합니다.

제한 사항

  • 벡터 오브젝트를 다른 벡터 오브젝트로 마스킹하면 해당 스택의 상단에 위치한 오브젝트가 마스크로 작용합니다. 
  • 모양, 구성 요소, 그룹 또는 심볼에 있는 텍스트는 마스킹할 수 없습니다.
  • XD는 알파 마스크 또는 불투명 마스크를 지원하지 않습니다. 여기에서 흥미로운 토론 내용을 살펴보시고 원하는 경우 UserVoice에서 이 기능을 추천해 주시기 바랍니다.

예제 및 샘플 파일

프로필 사진 대신 원과 같은 플레이스홀더 그래픽으로 디자인 작업을 시작할 때 해당 모양에 에셋을 드롭하여 마스크를 만들 수 있다는 사실을 알고 계십니까? 

에셋을 모양으로 드래그하거나 기존 모양을 마스크로 사용하는 방법을 알아보려면 아래 튜토리얼을 살펴보시거나 샘플 파일을 다운로드하여 직접 시도해 보시기 바랍니다.

시청 시간: 1분


숫자 카운터 애니메이션은 흥미롭고 눈길을 끄는 방식으로 숫자를 표시하는 데 사용됩니다. 마스킹을 사용하여 스코어보드를 만드는 방법을 살펴보시겠습니까? 아래 비디오를 시청하고 샘플 파일을 다운로드하여 직접 시도해 보시기 바랍니다.

시청 시간: 1분 2초

마스킹을 사용하여 애니메이션 숫자 카운터 만들기

또한 XD 지원 커뮤니티를 통해 더 많은 예제와 튜토리얼을 구할 수 있습니다.

튜토리얼

마스크를 사용하여 이미지를 맞춤형 모양에 배치하고 표시하지 않으려는 이미지 부분을 자릅니다. XD에서 이미지 및 마스킹 작업을 수행하는 방법에 대한 튜토리얼을 살펴보십시오.

시청 시간: 1분