콘텐츠 마케팅스쿨 스터디노트 - 12일차 피그마 3

오늘은 지난번에 이어서 피그마의 이펙트 기능, 이미지 형태 안에 이미지를 넣는 방법 등을 배웠다.

이펙트 기능

이펙트 기능을 사용하기 위해서는 이미지를 가지고 와야 함

이펙트 기능을 적용하기 위해서는 우측에 있는 이펙트 메뉴를 클릭하고 디폴트 값으로 드랍 섀도 선택

드랍셰도는 그림자가 얼마큼 멀리 퍼져나갈 것인지

실질적으로 그림자를 사용할 때는 검정색을 거의 사용하지 않음

 

이펙트 적용

이미지가 투명하게 반영되고 싶으면 선택한 오브젝트에서 가장 넓은 면적을 가지고 있는 색상을 그림자로 넣어두면 좋음

 

백그라운드 블러

백그라운드 블러는 형태 뒤에 무엇인가가 있을 때 경계 구분으로 사용하는 효과임
가장자리 부분이 굉장히 흐릿하게 바뀌는 효과가 남
레이어 블러는 레이어 자체가 블러가 일어나는 거고 백그라운드 블러는 레이어 자체에는 문제가 없고 그 뒤에 있는 배경이 흐릿해지는 효과

 

엘리베이션 값 추가

머티리얼 디자인 가이드를 열어서 탭 메뉴를 보면 엘리베이션이라는 것이 하나만 들어가 있는 게 아님
엘리베이션 값을 하나 더 추가를 하게 되면 드랍 제도를 하나 더 만들 수 있음
엘리베이션 값은 하나의 값을 가지고 있는 게 아니라 0에서 24의 값을 가지고 있음
엘리베이션 10 엘리베이션 24, 엘리베이션 8 이런 식으로 이름을 다 만들어주면 좋음

 

카피 페이스

속성이 다른 두 개의 오브젝트를 한꺼번에 선택을 하고 붙여넣기를 하면 인식을 못 해서 적용이 안 되는 경우가 있음
낱개로 하나씩 카피 페이스를 해주게 되면 같은 속성이 붙여넣기가 됨
이펙트 스타일을 그대로 가져다 쓰거나 이펙트 스타일을 그대로 가져다 쓰거나 할 수도 있음

 

이미지를 가지고 오는 방법

드래그 시 시프트 키를 눌러야 비율 그대로 이미지를 가지고 올 수 있음
이미지를 여러 개 한꺼번에 가지고 올 수도 있음
이미지를 선택한 상태에서 화면 안으로 마우스를 가져가면 도형 가장자리가 파랗게 변하는데 이때 클릭을 하면 도형 안에 이미지가 들어감

 

이미지의 위치를 옮겨주는 방법

이미지를 확대하거나 축소하거나 또는 레이브를 드래그해서 이미지의 위치를 옮겨줄 수 있음
이미지를 별도로 선택을 해줘야 함
필을 누르게 되면 옆으로 꽉 차게 들어오기 때문에 위 아래가 길 수밖에 없음

 

이미지 불러오기

이미지를 어떤 형태 안에 집어넣기 위해서는 항상 컨트롤 시프트 k를 눌러서 이미지를 불러와야만 이미지가 형태 안에 들어갈 수 있음

 

그레이디언트 조합

그레이디언트 조합을 그룹으로 만들어주면 관리들을 굉장히 손쉽고 편하게 할 수 있음
텍스트도 마찬가지로 입력을 하고 스타일로 등록을 하게 되면 텍스트 스타일이라는 다른 카테고리가 생기게 됨
ui ux 디자인을 하면서 시각적인 부분을 만들어 나가는 것도 중요하지만 혼자 작업하는 게 아니라 동료들과 협업 작업을 하기 때문에 파일들 레이어 프레임의 정리 이런 것들이 굉장히 중요

 

피그마의 프레임

컨트롤 키와 0번을 눌러서 100% 화면에서 어떻게 보여지는지를 확인을 해 주면 됨
피그마에서는 프레임을 오브젝트처럼 인식을 함
프레임 안에 프레임을 생성할 수도 있고 프레임과 프레임을 전체 선택을 해서 컨트롤 키와 주위를 눌러서 그룹으로 만들어 줄 수도 있음
오브젝트 안에 들어가 있을 때는 바탕 화면을 클릭을 했을 때 프레임이 선택이 되지 않음
프레임을 선택을 할 때는 이름을 선택을 해야 프레임의 옵션들을 볼 수 있음

 

 

스마트 셀렉션

스마트 셀렉션을 사용하면 크기를 늘리거나 줄일 수 있음
컨스트레인트를 적용하기 위해서는 프레임을 설정해 주어야 함
프레임 안에서 왼쪽 오른쪽 위 아래라는 기능이 필요함

 

 

* 이 글은 제로 베이스 강의 자료를 발췌해 작성되었습니다. 

---

안그래도 며칠 전에 피그마에서 랙탱글안에 이미지 넣으려고 고생했는데...컨트롤 시프트 k면 해결이 되는구나

다음은 피그마의 프레임과 오브젝트 정렬 등에 대해 공부할 예정이다