[음악] 안녕하세요. 쌤입니다. 오쌤의 니가

스터디 피그마 UI3 강좌입니다. 그 여덟 번째 시간으로 피그마

패스파인더를 해보도록 할게요. 목차

먼저 보시도록 하겠습니다. 첫 번째, 도형 합치기. 두 번째, 도형 빼기. 세

번째, 도형 교집합. 네 번째, 도형 재회

어때요? 심플하죠? 하지만 공부는

누가, 네가… 피그마 강의는 누가

오쌤. 동영상을 본 후에도 꼭 복습을

해 주세요. 패스파인더는 도형을 합치고,

빼고, 교집합과 재회를 처리하는 것을

말합니다. 두 개 이상의 면이 만났을 때 처리되는 기능이에요.

UI 2때는 타이틀 영역에서 도형들을 잡게 되면 요런 영역들로

바뀌게 되는데요. 요런 아이콘들로

바뀌었을 때요, 네 번째 있는 아이콘을 누르게 되면 패스파인더가

나왔었습니다. 근데 UI 3는 좀 많이 바뀌었죠. 디자인 패널에 가 보시면 두

개 이상을 선택했을 때 이런 아이콘이 뜨게 됩니다. 그래서 여기서 패스파인더

처리가 가능한데요. 혹시 안 보인다면 더보기 설정(점 세 개 버튼)을

누르시면 여기에도 있습니다. 그럼 실습을 통해서 도형 합치는 것을

해보도록 할게요. 그럼 첫 번째 화면에서 '새 디자인 파일'을 누르셔서 세 파일을 만들어 주세요. 그리고 원래

Untitled이라고 써 있는 부분을 더블

클릭해서 '8 패스파인더'와 같이

제목을 지어주시면 됩니다. 그러고 나서 이번에는 페이지를 여러 개로

만들지 않고, 그냥 프레임으로 처리할게요. 300x300짜리

프레임 네 개를 만들어 주시고요. 이름은 '합칠 것', '뺄 것', '교집합',

 '제외' 이렇게 할 건데, 이걸 영어로 써

놓은 거죠.  레이어에서 이름 한번

확인해 보시고 이름을 바꿔 주시면 됩니다. 그러면 도형 합치는

것을 해 볼 건데요. 이런 꽃 모양을

한번 만들어 보도록 할게요. 보이시죠? 이런 꽃 모양을 만들 건데,

도형은 없잖아요. 그래서 타원을 통해서 여러 개를 합치는 걸 해보도록

하겠습니다. 엘립스 툴을 통해서 원형

도형을 만들 거예요. Alt 키를 눌러서 중심에서 퍼지게 이렇게 처리를 한

다음에요. 사이즈는 여러분들이 임의적으로 하셔도 되는데, 그냥 45에

220짜리로 하도록 하겠습니다. 그럼 가운데에

맞출게요. 면색을 오렌지 컬러로 하겠습니다. 역시 색상은 아무거나

하셔도 사실 상관이 없고요. 스트로크 줄게요. 합쳐질 때 합쳐지는 게 정확히

보이려면 스트로크가 있는 게 좋아서, 이것을 3픽셀로 해서 이렇게

스트로크를 한번 보도록 하겠습니다. 이것을 해당 자리에서

복제할게요. Ctrl+D를 누르고요. 그러고 나셔서 30도로

바꾸겠습니다. 그다음에 다시 Ctrl+D를 눌러 볼게요. 이게 분명히 지난

시간까지만 해도 이 회전까지 같이 돼서 너무 넓게 처리가 됐는데, 제자리

복제가 되죠. 자꾸 Figma는 업데이트

되니까요. 제 영상을 보더라도 똑같이

안 되는 경우가 있긴 할 겁니다. 제자리에서도 된다는 걸 확인해 보시면

될 것 같고요. 그럼 60도 하고, 또 Ctrl+D. 이제 잘 되네요. 자, 90도

하고, 그다음에 또 Ctrl+D. 그다음에 120도네요. 요런 것까지도 계속

업데이트를 하는 것 같아요. Ctrl+D 하셔 가지고 150도로 이렇게 처리를

하면 마지막까지 이렇게 처리가 됩니다. 제가 일부러 스트로크를 줬는데, 선이

없었다면 그냥 합쳐져 있는 것 같이

보이겠지만, 실제로 합쳐져 있는 것은 아니죠. 이 선을 통해서 지금 보면

이렇게 다 잘려 있는 게 확인이 되실 겁니다. 이때 여러 도형을 다 한 번에

잡으시고 합칠 거죠. 그래서 패스파인더의

아이콘을 눌러 주시면 되는데, 그냥

얘만 눌러도 되기는 해요. 다른 기능을 할 거면은요, 화살표를 눌러서 해야

되는데, 합치기만 할 거면 이 아이콘을

바로 누르셔도 됩니다. 그래도 또 헷갈리실 수 있으니까, 그냥 화살표

눌러서 하셔도 되고요. 만약에 다른 기능들을 많이 해서 패스파인더

아이콘이 나오지 않는다고 한다면, 점점점 누르시면 기능이 다 나와요.

보이시죠? 유니언(Union)으로 선택해서 해 보도록

하겠습니다. 그럼 이렇게 하나로 처리되는 거 보이시죠? 이때, 지금 보시면 또

화살표가 있어요. 은근히 그룹처럼

됐거든요. 완전히 합쳐진 게 아니라

하나씩 돼서, 혹시 모양이 조금 잘못됐다고 판단했을 때, 요게 더 수정

가능하게 처리가 됩니다. 보이시죠? 합쳐진 상태에서도 수정이 가능해요.

근데 완전하게 합치고 싶다, 요렇게

화살표가 나오게 하고 싶지 않다라고 한다면, 역시 요거, 지금 이게 이제

도형이 하나여 가지고 지금 패스파인더

아이콘이 안 나오는데요. 안 나올 때는요, 점점점 눌러 주시면 돼요. 이때

패널 셀렉션을 누르게 되면, 네, 이제 아예

없어져요. 보이시죠? 이제 완전한 하나의

도형의 벡터로 처리가 되는 겁니다. 이번에는 도형을 빼는 것을

해보도록 하겠습니다. 자, 일단 두 개 이상의 도형을 사용한다고 했는데, 세

개 이상의 도형을 사용해도 어떻게 되는지 먼저 보시도록 하겠습니다. 원을

만들어서 빨간색으로 할게요. 비교를 위해서 레드. 그렇게 세 개를

겹치게 만들어 놓을 거거든요. 이쪽을 녹색으로 처리를 하고, 그다음에

파란색으로 해 볼게요. 그러면 맨 밑에 있는 건

빨간색이죠. 그러면 두 개 이상의 도형을 할 때 어떻게 빼는지 보도록

하겠습니다. 패스파인더 아이콘에서 화살표를 눌러서 서브트랙트 셀렉션을

눌러줍니다. 빨간색만 남는 거 보이시죠?

두 개 이상을 했을 때, 맨 밑에 깔려

있는 레이어, 깊이상 맨 밑에 것만

남게 됩니다. Ctrl+Z 눌러 볼게요. 지금 보이시죠? 엘립스(원)이 이게

빨간색이죠. 이렇게 다 잡았을 때 서브트랙트 누르게

되면, 맨 마지막에 있는 것만 남게 되는 겁니다. 그래서 맨 밑에 깔린

도형만 남고 다 빼준다. 그게 바로 서브트랙트 셀렉션입니다. 그러면 우리는

응용을 해서 요런 달 모양을 한번 만들어 보도록 하겠습니다. 보이시죠?

요건 어렵지 않게 만드실 수 있을 거예요. 그래서 일단은 역시 엘립스

원형 도형으로 Alt+Shift 눌러서 좀

도형을 크게 만들게요. 220 정도로 맞춰 보도록

하겠습니다. 그러고 나셔서 가운데다가 이렇게 놓고요. 그런 상태에서

노란색으로 처리를 하셔야 되겠죠. 위에 이제 도형을 Alt 눌러서

하나 더 복제를 하고 조금 더 작게, 세일러문에서 볼 수 있을 것만

같은 런 초승달을 만들 수 있겠죠. 이때

요거를 빼줘야 되는데 색깔이 똑같으니까 잘 보이실 수도 있어서

그냥 회색으로 바꿔 보도록 하겠습니다. 그래서요, 두 개를 잡아서요, 패스파인더

아이콘에 서브트랙트 셀렉션. 안 보인다면요, 점점점 눌러도 나온다

그랬죠. 그래서 확인을 해 보시면 서브트랙트 셀렉션을 누르시면 요렇게

나와요. 근데 마찬가지로 이제 요렇게

도형이 남아 있잖아요. 근데 이 모양이

[피그마UI3강좌] #8. 피그마 패스파인더

오쌤의 니가스터디

피그마 패스파인더 강좌 소개 및 목차

피그마 UI3 강좌 여덟 번째 시간, 패스파인더 기능 설명

목차: 도형 합치기, 도형 빼기, 도형 교집합, 도형 제외

패스파인더 기능의 기본 개념 설명

UI3에서 패스파인더 기능 사용 방법 설명 (디자인 패널 또는 더보기 설정)

새 디자인 파일 생성 및 파일 이름 변경

300x300 프레임 네 개 생성 및 이름 지정 ('합칠 것', '뺄 것', '교집합', '제외')

타원 도형을 이용한 꽃 모양 만들기 과정

여러 도형 선택 후 패스파인더 아이콘(유니언) 클릭하여 합치기

합쳐진 도형 수정 가능성 및 완전 합치기 방법 설명

세 개 이상의 도형을 사용한 빼기 연산 결과 설명

패스파인더의 서브트랙트 셀렉션 기능 사용 방법

달 모양 만들기 실습 및 서브트랙트 셀렉션 활용

수정 불가능하게 합치는 Flatten Selection 기능 설명

겹치는 원형 도형을 이용한 쌀 모양 만들기

패스파인더의 Intersect 기능 사용 및 결과 확인

모양 변경 후 Flatten Selection 기능을 사용하여 최종 결과물 완성

익스클루드 기능 설명 (교집합의 반대)

다섯 개의 원을 이용한 관형 모양 만들기 및 익스클루드 기능 활용

홀수 개 겹침 시 남고, 짝수 개 겹침 시 제외되는 원리 설명

Exclude Selection 기능을 이용한 최종 결과물 완성 및 Flatten Selection 기능 설명

비스킷 모양과 안드로이드 아이콘 만들기 예고

[피그마UI3강좌] #8. 피그마 패스파인더

[피그마UI3강좌] #8. 피그마 패스파인더

스크립트