Figma에서 Clipping Mask 사용법 정리 – 마스크 개념과 실전 적용

 

Figma

 

 

Figma는 웹 기반의 UI/UX 디자인 툴로, 디자이너와 협업자 모두에게 직관적인 인터페이스를 제공합니다.
그중에서도 Clipping Mask(클리핑 마스크)는 이미지나 요소를 특정 도형 안에 가두거나 잘라서 표현하고자 할 때 매우 유용하게 사용되는 기능입니다.

이번 포스팅에서는 Clipping Mask의 개념과 만드는 방법, 그리고 실전 활용 예제를 차례대로 정리해보았습니다.

---

Clipping Mask란 무엇인가요?

Clipping Mask는 지정된 도형의 영역 안에 콘텐츠를 가두는 기능입니다.
Photoshop의 레이어 마스크와 유사한 개념으로, 사용자가 선택한 도형 안에서만 콘텐츠가 표시되도록 도와줍니다.

예를 들어 원형 도형을 기준으로 사진을 원형으로 잘라서 보여주고 싶을 때, Clipping Mask를 적용하면 간단하게 처리할 수 있습니다.

---

Clipping Mask 만드는 방법

1. 마스크용 도형을 만듭니다.

먼저 마스크로 사용할 도형을 하나 만듭니다.
원, 사각형, 다각형 등 원하는 형태로 그릴 수 있으며, 이 도형이 마스크의 기준이 됩니다.

2. 자를 콘텐츠를 도형 아래에 배치합니다.

마스크 안에 들어갈 이미지나 텍스트를 해당 도형 아래쪽 레이어에 배치합니다.
Figma에서는 상하 레이어 순서가 매우 중요하므로, 마스크 도형이 반드시 위에 있어야 정상 작동합니다.

3. 두 개의 객체를 함께 선택하고 마스크를 생성합니다.

도형과 콘텐츠를 함께 선택한 상태에서 아래 단축키를 사용하거나 메뉴를 클릭하여 마스크를 생성할 수 있습니다.

• Windows: Ctrl + Alt + M
• Mac: Cmd + Option + M
• 메뉴: Object > Use as Mask

Clipping Mask가 적용되면 도형의 형태에 따라 콘텐츠가 잘려서 표시됩니다.

---

Clipping Mask의 레이어 구조 이해하기

Clipping Mask가 생성되면 해당 도형에는 [Mask]라는 마크가 붙습니다.
이 도형은 클립 기준이 되며, 그 아래에 위치한 콘텐츠는 이 마스크 영역 내에서만 보이게 됩니다.

마스크가 적용된 이후에도 내부 요소는 자유롭게 편집하거나 이동할 수 있습니다.
마스크 자체도 위치와 크기를 조정할 수 있어, 다이나믹한 UI 구성에 매우 유리합니다.

---

실전 예제: 원형 프로필 이미지 만들기

1. 원형 도형을 생성합니다.
2. 사용할 인물 이미지를 불러와 원형 도형 아래에 위치시킵니다.
3. 두 개를 함께 선택한 뒤 단축키를 눌러 Clipping Mask를 적용합니다.
4. 원형 안에 자연스럽게 잘린 형태의 프로필 이미지를 완성할 수 있습니다.

---

Clipping Mask 해제 방법

적용한 Clipping Mask를 해제하고 싶을 경우 아래 방법 중 하나를 선택합니다.

• Object > Remove Mask 클릭
• 단축키: Windows는 Ctrl + Shift + M, Mac은 Cmd + Shift + M

해제를 진행하면 객체들은 원래대로 분리되며, 개별 편집이 가능합니다.

---

실무 팁

• 마스크 안의 이미지를 개별적으로 조정하고자 할 경우, Alt(또는 Option) 키를 누른 채 콘텐츠만 선택하여 이동할 수 있습니다.
• 마스크 기준이 되는 도형은 언제든지 크기를 조정할 수 있으며, 그에 따라 가려지는 콘텐츠의 범위도 자동으로 조절됩니다.
• 텍스트, 프레임, 벡터 도형 등 다양한 요소를 마스크로 사용할 수 있습니다.

---

마무리

Clipping Mask는 복잡한 이미지 자르기 작업을 매우 직관적이고 간단하게 처리할 수 있는 기능입니다.
기본 개념만 이해하고 나면, 다양한 디자인 레이아웃에 활용할 수 있어 실무에서도 자주 사용됩니다.

이 포스팅이 Clipping Mask 개념을 처음 접하는 분들께 실질적인 도움이 되었기를 바랍니다.