topic★★★★★난이도 · 약 20분
Fill/Stroke/Gradient: 면·선·그래디언트 스타일링
도형의 면(Fill)과 선(Stroke)을 다루고 그래디언트로 깊이감을 더한다.
#Fill#Stroke#Gradient#Dashes#스타일링
왜 배우는가
같은 도형이라도 Fill, Stroke, Gradient 조합에 따라 완전히 다른 느낌이 된다. 플랫 디자인, 네온 글로우, 글래스모피즘 모두 이 세 가지 조합이다.
Shape Layer의 스타일링은 Fill(면 채우기), Stroke(외곽선), Gradient Fill/Stroke(그래디언트) 세 축으로 구성된다. 하나의 Shape Group 안에 Fill과 Stroke을 동시에 적용할 수 있고, 순서(스택 위치)에 따라 렌더링 결과가 달라진다.
| 속성 | 핵심 파라미터 | 효과 |
|---|---|---|
| Fill | Color, Opacity | 도형 내부를 단색으로 채움 |
| Stroke | Color, Width, Line Cap, Line Join, Dashes | 외곽선 — Dashes로 점선 가능 |
| Gradient Fill | Start/End Point, Colors, Ramp Scatter | 선형/원형 그래디언트 |
| Gradient Stroke | Start/End Point, Colors, Width | 그래디언트가 적용된 외곽선 |
Line Cap & Line Join — Cap은 선 끝 모양(Butt/Round/Projecting), Join은 꺾이는 곳 모양(Miter/Round/Bevel). 라운드 캡 + 라운드 조인 조합이 가장 부드러운 느낌을 주며 아이콘 디자인에서 가장 많이 쓰인다.
Stroke Dashes 활용 — Dash에 값을 넣고 Gap을 조절하면 점선이 된다. 여기에 Offset 값을 키프레임 애니메이션하면 행군하는 개미(marching ants) 효과가 완성된다. 프로세스 플로우 라인이나 연결선 애니메이션에 즉시 활용 가능.
실기 드릴 2문항
check_circle실기 드릴 · OX
Shape Layer에서 Fill과 Stroke의 스택 순서는 렌더링 결과에 영향을 주지 않는다. (O/X)
edit실기 드릴 · 단답형
Stroke의 Dashes에서 Offset 값을 키프레임 애니메이션하면 어떤 효과가 만들어지는가?