피그마(Figma) 투명한 레이어에 그림자 효과 추가하기

피그마에서 그림자 효과를 추가하는 방법은 간단하다. 그림자를 넣고 싶은 레이어를 선택 후 오른쪽 디자인 패널에서 아래와 같이 추가하면 된다.

 

설정 버튼을 누르면 해당 효과와 관련된 수치를 조절할 수 있다.

 

 

문제는 그림자를 추가한 레이어의 불투명도(Opacity)가 100% 로가 아닌 경우로 적용해 본 사람이라면 알겠지만 아마 본인이 예상한 것과는 다르게 적용될 것이다. 바로 아래 예시에서 볼 수 있듯이 투명한 레이어에 그림자 효과를 추가하면 두 번째 이미지처럼 레이어 뒤로 그림자 효과가 비춰보여 투명한 레이어가 오히려 탁해 보이는 현상이 생기는 것이다. (왜 피그마는 그림자 효과가 이렇게 적용되게 만들었을까요...) 

 

내가 원하는 건 세번째라규 피그마야

 

 

물론 위에서 봤듯이 레이어의 투명도를 살리면서 그림자 효과를 추가하는 것이 불가능하진 않다. 다만, 방법이 매우 비효율적이라 그림자 하나 추가하는데 이렇게까지 해야하나 싶지만... 현재로선 이 방법이 최선인 거 같다. 

 

#1 그림자 효과를 추가하고 싶은 레이어를 선택

 

#2 선택한 레이어 복사 및 배경 레이어 추가 생성

선택한 레이어를 아래과 같이 복사해서 두 개 더 생성하고 그림자가 보일 수 있을 만큼의 배경 레이어도 추가로 생성한다. (이번 예시에선 설명을 돕기 위해 전체 영역과 동일한 크기의 배경 레이어를 생성하였다.)

 

 

#3 추가 생성한 레이어들 그룹(Command + G) 만들기

 

#4 배경 레이어와 사각형 레이어의 겹쳐진 부분으로 빼기

1. 배경 레이어와 사각형 레이어 선택한다.

2. 상단 [Boolean groups]에서 [Subtract selection] 선택한다.

 

 

#5 상위 그룹에 마스크(Command + Control + M) 적용

1. 생성된 상위 그룹 레이어를 선택한다.

2. 마스크를 적용한다.

 

 

#6 적용된 그림자 효과 확인

1. 제일 처음 생성한 레이어를 선택한다.

2. 그림자 효과를 끄면(삭제해도 무방) 아래와 같이 레이어의 투명도를 해치지 않고 그림자 효과가 적용된 것을 확인할 수 있다.

 

완성 ✨

 

 

피그마 커뮤니티에 동일한 방법을 사용한 예제도 있으니 위 설명이 이해가 가지 않는다면 아래 내용이 도움이 될 것 같다.

https://www.figma.com/community/file/954342355676908924/Shadow-for-a-transparent-layer%3F-Sure!

Figma - Shadow for a transparent layer? Sure! | This technique utilizes substract to create an inverse mask which serves as a cu