[ 피그마 ] 초간단! 이미지 누끼 따기

[ 피그마 ] 초간단! 이미지 누끼 따기

 

피그마 작업중 이미지 의 누끼를 따는 작업이 필요하게 되었습니다.

 

빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다. 

 

해당 내용은 펜을 이용한 벡터 마스크(Vector Mask) 활용 방법 과 클리핑 마스크(Clipping Mask) 활용 , 그리고 
플러그인을 활용한 자동 배경 제거 를 포함 하고 있습니다!

 

# 1. 벡터 마스크(Vector Mask) 활용

 

벡터 마스크는 벡터 셰이프(Vector Shape) 를 이용해 이미지의 특정 부분을 가리거나 표시하는 방식입니다.
즉, 벡터 도형이 마스크 역할을 하여 이미지의 보이는 영역을 조정하는 기능입니다.

 

① 피그마에서 이미지를 불러오기

오늘 사용할 이미지 를 불러옵니다. 화이트 데이를 맞아 핑크핑크한 하트풍선 이미지를 준비했습니다.

 

하단 패널에서 Image/Video 선택 ( 단축키 Ctrl + Shift + K ) 

하단패널

 

이미지를 불러옵니다.

하트풍선이미지

 

 

② Pen Tool(P)을 이용해 추출할 영역을 벡터로 그리기

하단패널에서 펜을 선택합니다 ( 또는 단축키 P 를 누르면 됩니다. )

하단패널-펜

 

 

이미지의 외곽선을 따라 클릭하여 벡터 패스를 생성합니다.

 

• Shift 키를 누르면 직선을 유지할 수 있습니다.
• 곡선을 만들고 싶다면, 클릭 후 드래그하여 곡선을 조정하세요.

 

③ 오브젝트를 선택한 상태에서 Mask(마스크) 적용  

이미지와 벡터 패스를 동시에 선택합니다.

 

마우스 우클릭 → Use as Mask 또는 Ctrl + Alt + M (Cmd + Option + M for Mac)을 선택합니다.

 

벡터패스에 맞게 이미지

 

이미지가 벡터 패스에 맞게 잘리는 것을 확인할 수 있습니다.

 

완성된 모습

 

 

 

 

# 2.클리핑 마스크(Clipping Mask) 활용

클리핑 마스크는 프레임(Shape/Frame) 을 마스크처럼 사용하여 이미지를 특정 영역 내에서만 표시하는 방식입니다.

 

 

① 누끼를 따고 싶은 부분을 포함하는 Frame 생성

하단패널에서 프레임 선택 하기 ( 또는 F )

프레임 패널

 

 

프레임을 만들어줍니다.

 

 

 

② 이미지를 프레임 안에 넣기

오른쪽 패널에 보시면 Fill 부분 을 선택

 

이미지 불러오기

③ Scale Mode를 조정하여 위치 맞추기

 

옵션설명

Fill	프레임을 꽉 채우도록 이미지 크기 조정 (일부 잘릴 수 있음)
Fit	이미지 전체가 보이도록 크기 조정 (공백이 생길 수 있음)
Crop	프레임 내부에서 이미지 위치와 크기를 조정
Tile	이미지 반복 배치

 

완성된 모습

 

좀 더 디테일한 조정이 필요하신 분은 클리핑 마스크를 활용하여 하는 방법인  >> 이 게시글 <<  을  참고해주세요.

 

 

이미지안에 도형넣기

 

 

 

# 3.플러그인 ( Remove BG ) 을 활용

 

Remove BG 와 같은 피그마 플러그인을 사용하면 마우스 클릭 한번에 누끼를 딸 수 있습니다.

 

①  플러그인 설치

 

하단패널에서 Plugins & widgets 에서 Remove BG 를 검색합니다.

 

두번째 에 나온 Remove BG 를 클릭 후 설치합니다

 

Run 을 클릭합니다.

 

 

여기서 Run 을 누르면 API Key 가 없다고 실행이 안됩니다. 

Set API Key 에서 API Key 를 등록해야 합니다.

 

② 플러그인 세팅

https://www.remove.bg/ 로 이동해 회원가입을 합니다.

 

회원정보

 

회원가입후 우측 상단에 내 프로필 클릭후 My Account 를 클릭합니다.

 

My Accounts

 

My Account 를 누르면 My Dashboard 화면이 뜨는데, 여기서 API Keys 를 클릭합니다.

 

그후, New API Key 를 클릭합니다.

 

 

API Key 생성 화면입니다. Label 은 API KEY 이름 이므로 편하신대로 지정하시면 됩니다.

 

입력후 Create API Key 를 클릭합니다.

 

 

API 키 가 보여지면 Copy 를 클릭합니다.

 

다시, 피그마로 돌아와 Set API Key 화면에서 

 

 붙여넣고 Save 를 클릭합니다.

 

 

 이제 마지막 단계입니다.

 

누끼 따기 원하는 이미지를 클릭후,

 

상단 피그마 아이콘 클릭 → Plugins → Remove BG → Run 클릭  하면 완성입니다.

 

 

또는 하단패널에서

 Run 을 누르시면 됩니다.

 

 완성된 모습

 

 

여기까지 따라오신 분들 고생많으셨습니다!!

 

마지막으로 최종 결과 비교 이미지를 보여드리고 마무리하겠습니다.

 

결과 비교

 

 

 

 

 

 

 

✅ 도움될만한 포스팅

---

 

[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

 

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기

 

 

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

 

 

[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기

[ AI 툴 ] Figma 대체 툴 Creatie 알아보기

 

[개발 같이해요/DESIGN] - [피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)