🎨 Figma에서 마스크(Mask) 기능 활용법
마스크(Mask) 기능은 특정 이미지나 개체를 원하는 모양으로 잘라내거나 제한된 영역만 보이게 하는 기능임. 포토샵의 클리핑 마스크처럼 동작한다고 보면 됨.
✅ 1. 기본적인 마스크 적용 방법
📌 기본 마스크 만들기
- 마스크할 이미지 또는 개체 준비
- 먼저 마스크를 적용할 이미지(또는 벡터 개체)를 추가함.
- 마스크 형태가 될 개체 준비
- 마스크할 도형(Shape) 또는 벡터 개체를 추가함.
- 예를 들어 원을 만들면 이미지가 원 형태로 잘려 보이게 됨.
- 두 개체를 선택한 후 "Mask" 적용
- 마스크할 개체(이미지) + 마스크 형태(도형)를 함께 선택함.
- Ctrl + Shift + M (Mac: ⌘ + Shift + M) 또는 우클릭 → "Use as Mask" 선택.
- 마스크 그룹이 생성됨
- Layers 패널에서 마스크가 적용된 그룹이 만들어지고, 도형이 마스크 역할을 하게 됨.
✅ 2. 마스크된 이미지 조정하기
📌 마스크 안의 이미지 이동하기
- 마스크 그룹을 선택한 후, 내부에 있는 이미지를 개별적으로 선택함.
- Ctrl (Mac: ⌘)을 누른 채 이미지를 드래그하여 위치 조정함.
- 크기 조절도 가능하므로 원하는 영역이 정확하게 보이도록 조절할 수 있음.
✅ 3. 마스크를 벡터 쉐이프와 함께 사용하기
📌 펜 툴을 이용한 자유로운 마스킹
- P를 눌러 **Pen Tool(펜 툴)**을 활성화함.
- 원하는 형태로 벡터 쉐이프를 만듦.
- 예를 들어, 복잡한 곡선 모양으로도 마스크 가능함.
- 마스크할 이미지와 벡터 쉐이프를 함께 선택 후 Ctrl + Shift + M (Mac: ⌘ + Shift + M)을 눌러 마스크 적용.
💡 Tip: 벡터를 마스크로 사용하면 곡선, 비정형 모양의 마스크를 만들 수 있음.
✅ 4. 마스크 해제 및 수정
📌 마스크 해제
- 마스크된 그룹을 선택한 후, Ctrl + Shift + G (Mac: ⌘ + Shift + G)를 눌러 그룹 해제할 수 있음.
- 또는 Layers 패널에서 마스크 개체를 삭제하면 원래 상태로 돌아감.
✅ 5. 마스크와 클리핑 콘텐츠 차이
| Mask (마스크) | 특정 모양을 기준으로 내부 콘텐츠를 가리는 역할을 함 |
| Clip Content (클리핑 콘텐츠) | 프레임(Frame) 내부의 요소를 프레임 크기 내에서만 보이게 제한함 |
- Frame을 사용할 경우 Clip Content 옵션을 체크하면 마스크 없이도 프레임 영역만 보이도록 제한할 수 있음.
- 하지만 복잡한 형태로 자르려면 마스크 기능이 더 유용함.
🌐 크롬에서 개발자 도구(검사)를 활용한 이미지 다운로드 방법
크롬에서 **우클릭 → 검사(개발자 도구)**를 활용하여 페이지의 이미지 소스를 찾고 다운로드하는 방법을 단계별로 정리함.
✅ 1. 기본적인 우클릭 다운로드
- 크롬에서 원하는 페이지를 엶.
- 다운로드할 이미지를 **우클릭 → "이미지를 다른 이름으로 저장"**을 선택.
- 원하는 위치에 저장.
⚠️ 일부 웹사이트에서는 우클릭을 막아두거나, 이미지를 백그라운드에서 로드하는 경우가 있음.
이럴 때는 개발자 도구(DevTools)를 활용해야 함.
✅ 2. 개발자 도구(검사)에서 직접 다운로드
📌 1️⃣ 이미지 URL 찾기
- 크롬에서 원하는 웹페이지를 열고 F12 또는 Ctrl + Shift + I (Mac: ⌘ + Option + I)를 눌러 개발자 도구(DevTools) 실행.
- Elements (요소) 탭으로 이동한 뒤, Ctrl + Shift + C (Mac: ⌘ + Shift + C)를 눌러 화면에서 이미지 부분을 클릭하면, 해당 요소가 자동 선택됨.
- <img> 태그를 확인하고 src 속성 값을 찾음.
- 예시:
- src="..."에 있는 이미지 URL을 복사한 후, 새 탭에서 열어 다운로드.
📌 2️⃣ 네트워크 패널에서 이미지 파일 직접 찾기
💡 이 방법은 이미지가 동적으로 로드될 때 유용함.
- 개발자 도구(DevTools)에서 "Network" (네트워크) 탭으로 이동.
- **페이지를 새로고침 (F5 또는 Ctrl + R)**하면 페이지에 로드된 모든 파일 목록이 나타남.
- 필터를 **"Img"**로 변경하면, 웹사이트에서 로드된 이미지 파일들만 확인 가능.
- 원하는 이미지의 URL을 우클릭 → "Open in new tab" (새 탭에서 열기).
- 새 탭에서 **우클릭 → "이미지를 다른 이름으로 저장"**하여 다운로드.
✅ 3. 전체 페이지 이미지 한 번에 다운로드
📌 1️⃣ 개발자 도구 콘솔에서 자동 추출
웹사이트의 모든 이미지 URL을 한 번에 찾으려면 콘솔에서 아래 코드를 실행하면 됨.
- 개발자 도구(DevTools)에서 "Console" (콘솔) 탭 선택.
- 아래 코드를 입력하고 실행 (Enter):
-
javascript복사편집const images = document.querySelectorAll('img'); images.forEach(img => console.log(img.src));
- 출력된 이미지 URL을 복사해서 다운로드하면 됨.
✅ 4. 마우스 우클릭 없이 다운로드 (이미지 보호 사이트)
일부 사이트에서는 우클릭이 막혀 있을 수도 있음.
이럴 경우 다음 방법을 활용할 수 있음.
📌 1️⃣ 개발자 도구를 활용하여 다운로드
- F12 (Mac: ⌘ + Option + I)를 눌러 개발자 도구 실행 후, 위에서 설명한 Elements 탭 또는 Network 탭을 활용하면 됨.
📌 2️⃣ 브라우저 확장 프로그램 활용
개발자 도구 사용이 어렵다면, 확장 프로그램을 설치하여 쉽게 다운로드할 수도 있음.
추천 확장 프로그램:
- Image Downloader (https://chromewebstore.google.com/detail/image-downloader-save-pic/daeljdgmllhgmbdkpgnaojldjkdgkbjg?utm_source=ext_app_menu)
- Fatkun Batch Download Image
- Download All Images
설치 후, 웹페이지에서 실행하면 한 번에 모든 이미지 다운로드가 가능함.
🚀 결론
- 간단한 경우 👉 우클릭 → 이미지 저장
- 이미지 URL 확인 👉 개발자 도구 Elements 탭에서 <img> src 확인
- 동적 이미지 👉 개발자 도구 Network 탭에서 필터 "Img" 사용
- 전체 이미지 URL 수집 👉 Console에서 JavaScript 코드 실행
- 보호된 사이트 👉 브라우저 확장 프로그램 사용