[기획자의 Figma] 피그마에서 모자이크 처리하기

 

포트폴리오 쓸 때 또는 블로그에 글 쓸 때, 설계서들 가끔 캡쳐해서 넣는 경우가 있다. 그때 중요 정보들을 가려야 하는데 그때마다 포토샵 켜기도 귀찮고, 회사 컴퓨터에는 포토샵도 없다. 😢 블로그 에디터 같은거 켜서 할 수도 있는데 그러면 로그인 > 블로그 > 글쓰기 등등등 과정이 너무 복잡하다.

 

 

피그마에서 모자이크 처리를 편하게 할 수 있으면 좋지 않을까?

우선 이게 포토샵처럼 정확한 모자이크 처리 효과를 주는 것은 아니다. 다만, 내용을 가리고자 한다면 유용하게 써먹을 수 있다. 만약 정말 모자이크 처리를 하고자 한다면 모자이크 효과를 줄 수 있는 플러그인들을 찾아보자(검색 키워드는 pixel)

 

 

 

1. 모자이크 할 개체(프레임 혹은 이미지)를 이미지로 복사 후 붙여넣기한다.

복사 단축키는 Ctrl + Shift + C 

붙여넣는 건 Ctrl + V

그러면 이미지 형태로 레이어가 생긴건 확인할 수 있다.

 

 

 

 

 

2. 복사한 이미지를 모자이크 씌울 영역만큼 잘라낸다.(crop)

원본 레이어를 명확히 구분하기 위해서 붉은색을 씌웠을 뿐!

 

 

3. 우측 사이드바에서 Effects 섹션에서 +를 선택한다.

 

 

4. Effects에서 'Drop shadow'를 선택하여 'Layer Blur'로 변경한다.

 

 

 

5.  Layer blur 아이콘을 선택하여 Blur 정도를 수정한다. 

보통 내가 적용하는 숫자는 10인데, 지워지는 정도에 따라서 숫자를 키우는 편이다.

 

6. 완성

 

 

 

---

사실 Layer blur의 원리는 잘 모르나, 너무 blur 강도를 높이면 크롭 가장자리가 보이기도 하니 주의가 필요하다. 크롭된 사각형의 각도를 조절할 수 있지만, 사각형 외의 모양 변형이 안되어서 예시 이미지처럼 사각형이 아닌 이미지라면 예쁘게 모자이크 할 수 없어 아쉽다.

 

 

그래도 원래 용도인 설계서 모자이크 같은 평면적인 내용 가리기엔 최적이라 스타일 등록해서 쓰고 있다.