피그마에서 fill 값의 opacity를 변경하는 것과 appearance 값을 조정하는 것의 차이가 궁금합니다.
답변
피그마에서 `Fill` 레이어의 `Opacity`를 조절하는 것과 레이어 전체의 `Appearance (Layer Opacity)`를 조절하는 것에는 다음과 같은 차이가 있습니다.
적용 범위:
Fill Opacity: 해당 `Fill` 레이어에만 투명도를 적용합니다. 만약 여러 개의 Fill (예: 이미지 + 색상)이 있다면, 각각의 Fill에 개별적으로 투명도를 조절할 수 있습니다.
Layer Opacity (Appearance): 프레임 또는 레이어 전체(모든 Fill, Stroke, Effect, Text 등 포함)에 투명도를 적용합니다.
코드 변환 (개발자 핸드오프):
Fill Opacity: CSS로 변환 시 `background-color` 속성 내에 RGBA 값으로 투명도가 포함되어 표현될 수 있습니다 (예: `background-color: rgba(255, 0, 0, 0.5);`).
Layer Opacity (Appearance): CSS로 변환 시 `opacity` 속성으로 별도로 표현됩니다 (예: `opacity: 0.5;`). 이는 해당 요소의 모든 자식 요소에도 영향을 미칩니다.
요약:
`Fill Opacity`는 특정 채우기 색상/이미지에만 영향을 주며, 개발자 모드에서 해당 `fill` 속성 내에 투명도 정보가 포함됩니다.
`Layer Opacity`는 레이어 전체와 그 안에 포함된 모든 요소에 영향을 주며, 개발자 모드에서 별도의 `opacity` 속성으로 표시됩니다. 개발 시 `opacity` 속성은 성능에 영향을 줄 수 있으므로, 특정 `fill`에만 투명도를 적용하고 싶다면 `Fill Opacity`를 사용하는 것이 더 효율적일 수 있습니다.