02. 스타일과 이펙트 입히기

피그마에서 텍스트나 도형, 이미지 같은 요소들을 단순히 배치하는 것을 넘어서, 시각적 스타일을 입히는 건 콘텐츠의 완성도를 업그레이드 시킬 수 있어요. 이 섹션에서는 그림자 효과, 둥근 모서리, 배경 색상과 그라데이션, 이미지 마스킹 등 디자인을 시각적으로 풍부하게 만드는 기능들을 집중적으로 다뤄볼 거예요.

• 기존

✨ Effect 효과 넣기

피그마의 Effect는 단순히 그림자를 넣는 걸 넘어서, 요소의 깊이감, 계층감, 분위기를 풍부하게 만들어주는 시각 도구예요. 최신 버전에서는 더욱 직관적인 UI와 함께 Glass 효과, Texture, Noise 등 새로운 시각 효과가 추가되었어요. (2025년 7월 최신 업데이트 반영)

① Drop shadow (외부 그림자)

• 요소 아래에 그림자를 만들어 입체감과 시선을 끌 수 있어요.
• 카드, 버튼, 팝업 등에서 요소를 부각시킬 때 가장 많이 사용하는 효과예요
• Drop Shadow 적용하기
  1. 그림자를 넣고 싶은 요소(도형, 텍스트, 그룹 등)를 선택해요
  2. 우측 속성 패널에서 Effects 섹션을 찾아요
  3. + 버튼을 클릭하고 Drop shadow를 선택해요
  4. X/Y 오프셋, 블러 값, 투명도, 그림자 색상을 세부 조정할 수 있어요.
     • X 오프셋: 그림자가 가로로 얼마나 이동할지 (-는 왼쪽, +는 오른쪽)
     • Y 오프셋: 그림자가 세로로 얼마나 이동할지 (-는 위쪽, +는 아래쪽)
     • Blur: 그림자 가장자리가 얼마나 부드러울지 (0은 날카롭게, 높을수록 부드럽게)
     • Spread: 그림자가 얼마나 퍼질지 (음수는 축소, 양수는 확장)
• Step by step 예제를 보고 따라 만들어보세요!
  • 부드러운 카드 그림자: X:0, Y:4, Blur:8, Spread:0, 투명도:15%
  • 강한 버튼 그림자: X:0, Y:2, Blur:4, Spread:0, 투명도:25%
  • 플로팅 요소: X:0, Y:8, Blur:16, Spread:0, 투명도:12%

② Inner shadow (내부 그림자)

• 요소 내부에 그림자를 넣어 눌린 듯한 UI나 깊이감을 줄 수 있어요.